ENSEIGNEMENT SUPERIEUR ET UNIVERSITAIRE

INSTITUT SUPERIEUR TECHNIQUE DE L’EXCELLENCE

COURS DE PROGRAMMATION WEB

Lucide BULA BM/Samuel SEMBWANDU
1. Informations générales sur le cours

i) Informations administratives sur le cours

Intitulé du cours : Cours de Programmation Web
Année académique : 2023-2024
Département : Informatique (Toutes orientations)
Heures : 45 heures (15 heures de CM et TD + 30
heures de TP)
Auditeurs visés : Premier Bachelier Informatique
26/01/20
ISTE 2022-2023 2
24
1. Informations générales
sur le cours
Type de cours : Cours
modulaire, obligatoire
Mode d'enseignement :
Présentiel
Langue d'enseignement :
Français
26/01/20
ISTE 2022-2023 3
24
1. Informations générales
sur le cours
ii) Informations sur l'enseignant

Titre et noms : Lucide BULA BUTUPU

MULUMBA
Formations : Graduat & Licence en Informatique
de gestion (ISS/Lubumbashi), Master II IASIG
(Université de Douala/Cameroun)
Grade académique : Chef de Travaux
Contacts : lucidebula@gmail.com
,+243991059627, +243844006058
26/01/20
ISTE 2022-2023 4
24
 2. Pré requis

Laboratoire
informatique(Bureautique
)

26/01/20
ISTE 2022-2023 5
24
 3. Objectifs du cours
3.1. Objectif général
Ce cours vise à former les
compétences dans la conception
et la réalisation des pages web
au moyen du Langage HTML, CSS
et le JavaScript.
26/01/20
ISTE 2022-2023 6
24
 3. Objectifs du cours
3.2. Objectifs spécifiques
A la fin de ce cours l’étudiant devra être capable :
 de décrire la structure d’un document HTML
 de manipuler les images et les liens dans une page
HTML
 de construire le tableau, le formulaire et le cadre
 de réaliser certains traitements avec JavaScript

26/01/20
ISTE 2022-2023 7
24
 4. Plan du cours

CHAPITRE I. LE WEB ET LE LANGAGE

HTML
1.1. Présentation du langage HTML
1.2. La structure d’une application web
1.3. La mise en forme et le langage CSS
1.4. Le tableau, le formulaire et le cadre
26/01/20
ISTE 2022-2023 8
24
 4. Plan du cours
CHAPITRE I. LE WEB ET LE LANGAGE HTML
CHAPITRE II. LE JAVASCRIPT
2.1. L’architecture d’une application web
2.2. Les outils pour programmer en JavaScript
2.3 Structure d’un programme JavaScript
2.4. Les inscriptions d’E/S et les opérateurs
2.5. Les structures de contrôle
26/01/20
ISTE 2022-2023 9
24
 4. Plan du cours
CHAPITRE I. LE WEB ET LE LANGAGE HTML
CHAPITRE II. LA STRUCTURE D’UN PROGRAMME
JAVASCRIPT
CHAPITRE III. LE FRAMEWORK BOOTSTRAP ET LE
TEMPLATE
3.1. Installation et utilisation de bootstrap
3.2. Le Template
3.3. Description du dernier projet

26/01/20
ISTE 2022-2023 10
24
 5. Méthodes pédagogiques et stratégie
d'évaluation

i) Méthodes pédagogiques
Une méthode pédagogique décrit le moyen pédagogique adopté par
l'enseignant pour favoriser l'apprentissage et atteindre son objectif
pédagogique.
Les méthodes pédagogiques utilisées dans ce cours sont :
 Le cours magistral interactif;
 L'étude personnelle ;
 La recherche en groupe ;
ii) Stratégie d'évaluation
La cote annuelle sera calculée de la manière suivante :
 Un travail pratique à la fin de chaque séance
26/01/20
ISTE 2022-2023 11
24
 La présence
6. Bibliographie
1. Laurent GUÉDON, Damien HEUTE, Thomas HEUTE et
Pierre-Emmanuel MULLER, La Bible PHP 5, Micro
Application, Paris, 2005
2. Raphaël Goeter, CSS 2 Pratique du Design Web, 2e éd,
Eyrolles, 2007
3. http://www.med.univ-
rennes1.fr/~poulique/cours/html/
4. www.ccim.be/ccim328/html/index.htm
5. AG Tayllor, SQL web training, Eyrolles, Paris, 2002
6. Laurent GUÉDON, Damien HEUTE, Thomas HEUTE et
Pierre-Emmanuel MULLER, La Bible PHP 5, Micro
26/01/20
Application, Paris, 2005
ISTE 2022-2023
24
12

e
CHAPITRE I. LE WEB
ET LE LANGAGE
HTML

26/01/2024 ISTE 2022-2023 13

1.1. Présentation du langage HTML
WORLD WIDE WEB : WWW
Toile d'araignée d'étendue mondiale
Le Web (Tim Berners-Lee, 1989) :
système d’information reparti en «
pages web » = documents web.

26/01/2024 ISTE 2022-2023 14

1.1. Présentation du langage HTML
Ce système est basé sur la notion d’hypertexte et
la notion d’hyperliens permettant de naviguer
entre les documents web.

les documents forment un graphe = « toile »

des protocoles de communication HTTP, HTTPS
des adresses pour nommer les documents : URL
des langages pour créer les documents : HTML,
CSS, javascript
des navigateurs qui interprètent les documents :
IE, mozilla, Opera, safari, google chrome etc.

26/01/2024 ISTE 2022-2023 15

1.1. Présentation du langage
HTML

W3C « World Wide Web

Consortium » est un organisme
de normalisation chargé de
promouvoir la compatibilité des
technologies du web : « un seul
web partout et pour tous »
26/01/2024 ISTE 2022-2023 16
1.1. Présentation du langage HTML
H.T.M.L. est un format d'écriture de document du type
SGML (Standard Generalized Markup Language). Ce langage
est définit par le W3C (World Wide Web consortium),
organisme indépendant chargé de la normalisation et de la
recherche sur la technologie Web.
En d'autres termes, HTML est un ensemble (réduit) de
balises (ou styles ou "tags") utilisés pour définir les
différents composants d'un document.
Les différentes balises de HTML utilisent une syntaxe SGML,
on entre dans un environnement en le citant borné par les
caractères < et >, on le quitte en le nommant précédé d'un
caractère /.
NB. HTML n'est pas un langage de programmation !
Ce n'est qu'un langage de description de documents

26/01/2024 ISTE 2022-2023 17

1.1. Présentation du langage HTML
Les outils en question sont :
• d'un éditeur de texte tout simple comme par
exemple le Bloc-notes ou Notepad de Windows ou
tout autre équivalent dans votre système
d'exploitation.
• d'un browser.
NB. On n’a pas besoin d’être connecté pour
écrire, voir et peaufiner les pages Html.

26/01/2024 ISTE 2022-2023 18

1.1. Présentation du langage HTML
Le principe des balises
balise = limite d'une boîte où l'on peut mettre
des choses
<balise> chose </balise>
à chaque balise ouvrante <balise> ...
... on associe une balise fermante </balise>
balises sans contenu : <autrebalise />
<balise attribut1="valeur"
attribut2="valeur">...</balise>
NB: commentaire : <!-- blablabla -->

26/01/2024 ISTE 2022-2023 19

1.2. La structure d’une application
web

Une application web est souvent

composée d’une page web ou
des plusieurs pages web qui sont
reliées par des liens
hypertextes.

26/01/2024 ISTE 2022-2023 20

1.2. La structure d’une application web
Une page web a la structure suivante:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
</head>
<body>
</body>
</html>

26/01/2024 ISTE 2022-2023 21

1.2. La structure d’une application web
L’entête
<head> ... </head>
informations qui ne seront pas affichées sur la page HMT
L
titre de la page :
<title>BAC 1 MALKIA</title>

informations utilisées par les moteurs de recherche :

<meta name="description" content="Formation HTML"
charset="utf-8">
NB: charset="utf-8“: Pour prendre en compte les
accents.

26/01/2024 ISTE 2022-2023 22

1.2. La structure d’une application web
Le corps
<body> ... </body>
informations qui vont s'afficher dans le navigateur
<HTML> le début d'un document de type HTML.
<HEAD> le début de la zone d'en-tête
<TITLE> le début du titre de la page.
</TITLE> Ceci est la fin du titre de la page
</HEAD> la fin de la zone d'en-tête.
<BODY> Ceci est le début du document proprement dit.
</BODY> Ceci est la fin du document proprement dit.
</HTML> la fin d'un document de type HTML.
NB. Enregistrer le fichier avec l’extension .html
Pour exécuter, il faut utiliser un navigateur.

26/01/2024 ISTE 2022-2023 23

1.2. La structure d’une application web

Pour vos éventuelles modifications, il

n'est pas nécessaire de rouvrir à chaque
fois le navigateur.
 Retourner dans l'éditeur de texte
(sans fermer le navigateur).
 Modifier les codes Html.
 Enregistrer le fichier.
 Utiliser la commande Actualiser du
browser/Navigateur.
26/01/2024 ISTE 2022-2023 24
1.2. La structure d’une application web
Les images et les liens hypertexte
Les images
Le code Html est pour insérer une image:
<IMG SRC="Adresse de l'image">
La balise image possède de nombreux attributs :
Texte alternatifalt="****"
Dimensions width=? height=? Hauteur et largeur (en pixels)
Bordure: border=? (en pixels)
Alignement :
align=top
align=middle
align=botton
align=left
align=right

26/01/2024 ISTE 2022-2023 25

1.2. La structure d’une application web
Les images et les liens hypertexte
Les images
• En Html, l'image ne fait pas partie de votre document.
Le browser va la chercher à l'adresse indiquée.
Généralement, on place les images dans le même
répertoire que les pages Html.
L'attribut Align cet attribut align positionne l'image par
rapport au texte
<IMG SRC="HELP.gif" align=TOP>Fichier d'aide
<IMG SRC="HELP.gif" align=CENTER>Fichier d'aide
<IMG SRC="HELP.gif" align=BOTTOM>Fichier d'aide

26/01/2024 ISTE 2022-2023 26

1.2. La structure d’une application web
Les images et les liens hypertexte
Les liens
Html (Hyper TextMarkupLanguage) est un langage
hypertexte (et hypergraphique) qui vous permet en
cliquant sur un mot, généralement souligné (ou une image)
de vous transporter;
• vers un autre endroit du document.
• vers un autre fichier Html situé sur votre ordinateur.
• vers un autre ordinateur situé sur le Web.
La syntaxe de ces liens entre plusieurs pages, est simple
mais entraînera de nombreux commentaires :
<A HREF="URL ou adresse">...</A>

26/01/2024 ISTE 2022-2023 27

1.2. La structure d’une application web

Les images et les liens hypertexte

Les liens
Lien externe
Tout ordinateur situé sur le réseau Internet possède une adresse ou une URL
(Universal Ressource Locator). Html permet d'accéder à toutes les machines et
toutes les ressources du Net. Pour peu qu'Internet vous soit un peu familier, ce sont les
adresses du type :
http://serveur/chemin.../fichier
ftp://serveur/chemin.../fichier
mailto:utilisateur@hôte.
Syntaxe
<A HREF="Nom de la ressource">Aller vers </A>
La balise <a> est généralement utilisée avec les attributs suivants :
Href : pour spécifier le nom de la ressource
Target : pour déterminer l’emplacement de la ressource quand elle sera chargée.

26/01/2024 ISTE 2022-2023 28

1.2. La structure d’une application web

Les images et les liens hypertexte

Lien externe
Des liens peuvent aussi pointer vers un endroit
précis du même document ou d'un autre fichier.
C'est ce qu'on appelle les liens internes.
Point d'ancrage <A NAME="***">...</A> Ceci est une
cible Lien vers une ancre dans la même page <A
HREF="#***">...</A> Lien vers la cible *** dans la
même page.
Lien vers une ancre dans une autre page
<A HREF="URL#***">...</A> Lien vers la cible ***
dans une autre page
Plusieurs liens à l'intérieur d'un même document
supposent que ce document présente une certaine
longueur sinon une longueur certaine (et donc un
temps de chargement assez long).26/01/2024 ISTE 2022-2023 29
1.2. La structure d’une application
web

Les images et les liens hypertexte

Lien sur image
Les balises sont :
<A HREF="fichier.htm"><IMG
SRC="image.gif"></A> Remarquons que
les images cliquables sont entourées
d'une bordure.
26/01/2024 ISTE 2022-2023 30
1.3. La mise en forme et le CSS
La mise en forme peut être réalisée en utilisant le
CSS(Cascading Style Sheet ou feuille de style) ou en
utilisant quelques balises HTML qui sont actuellement obsolètes.

<B>...</B> Texte en gras

<BIG>...</BIG> Agrandissement de la taille des
caractères
<EM>...</EM> Texte en italique
<I>...</I> Texte en italique
<FONT color="#XXXXXX">...</FONT> Texte en
couleur où XXXXXX est une valeur
hexadécimale

26/01/2024 ISTE 2022-2023 31

1.3. La mise en forme et le CSS
Voici les codes de quelques couleurs
basiques.
En utilisant le système RGB : Red Green Blue
et le code Hexadécimal : 0 1 2 3 4 5 6 7 8 9 A B C
DEF
Bleu #0000FF
Vert #00FF00
Blanc #FFFFFF
Violet #8000FF
Rouge #FF0000
Jaune #FFFF00
Gris clair #C0C0C0
Noir #000000

26/01/2024 ISTE 2022-2023 32

1.3. La mise en forme et le CSS

Listes <UL><LI></UL>Liste non numérotée (dite à

puces)
Li Elément de liste
<OL><LI></OL>Liste numérotée Elément de liste
Les séparateurs
<HR> Trait horizontal (centré par défaut)
<HR width="x%"> Largeur du trait en %
<HR width=x> Largeur du trait en pixels
<HR size=x> Hauteur du trait en pixels
<HR align=center><HR align=left>
<HR align=right> Trait centré (défaut) Trait aligné à
gauche Trait aligné à droite
<HR noshade> Trait sans effet d'ombrage
26/01/2024 ISTE 2022-2023 33
1.3. La mise en forme et le CSS
Les arrière-plans
L’arrière-plan [background] peut être coloré ou
composé d'une image.
La balise à utiliser :
Couleur d'arrière-plan <BODY
BGCOLOR="#$$$$$$">
<BODY
BGCOLOR="#000088"><H1>Bonjour</H1></BODY>
Voir le CSS pour réaliser les mêmes effets

26/01/2024 ISTE 2022-2023 34

1.3. La mise en forme et le CSS
Couleur de texte <BODY TEXT="#$$$$$$">
Couleur de lien <BODY LINK="#$$$$$$">
Lien visité <BODY VLINK="#$$$$$$">
Lien actif <BODY ALINK="#$$$$$$">
Reprenons notre exemple;
<BODY BGCOLOR="#000088"
TEXT="#FFFF00"><H1>Bonjour</H1></BODY>
Texture d'arrière-plan <BODY BACKGROUND="Adresse">
Ce qui peut nous donner :
<BODY BACKGROUND="PAPER.gif"><H1>Bonjour</H1>
</BODY>
Il est conseillé actuellement de
réaliser ces effets avec le CSS.

26/01/2024 ISTE 2022-2023 35

1.3. La mise en forme et le CSS
1.3.2. Le langage CSS
CSS (Cascading Style Sheets), ce langage vient
compléter le HTML. Il aura comme rôle : Gérer la
mise en forme de votre site.
Le HTML définit le contenu, Le CSS
permet, lui, d'arranger le contenu et
de définir la présentation : couleur, image
de fond, marges, taille du texte... Comme vous vous
en doutez, le CSS a besoin d'une page HTML pour
fonctionner.
Utilisation du CSS.
26/01/2024 ISTE 2022-2023 36
1.3. La mise en forme et le CSS
1.3.2. Le langage CSS
Utilisation de CSS
Une règle est composée de deux parties : un
sélecteur (balise ou forme avancée) et une
déclaration.
Le sélecteur indique l’élément auquel est appliquée
la règle. Nous verrons par la suite qu’il en existe
plusieurs types : classe, élément, id…
La déclaration indique entre accolades la mise en
forme souhaitée avec des couples propriété-valeur. La
propriété est séparée de sa valeur par le caractère
deux-points :. Et se termine un point-virgule ;.

26/01/2024 ISTE 2022-2023 37

1.3. La mise en forme et le CSS
1.3.2. Le langage CSS

Donc dans le code CSS, on trouve 3

éléments différents :
Des noms de balises, les propriétés CSS
et les valeurs.
monStyle{
color: red;
font-size: 12px;
text-align: center;
}
26/01/2024 ISTE 2022-2023 38
1.3. La mise en forme et le CSS
1.3.2. Le langage CSS
Exemple
h1{background-color:yellow;
color:red;
font-size:40px;
text-align:center;
}
h2:first-letter{background-color:yellow;
color:red;
font-size:30px;
}
body{background-color:blue;
font-size:40px;
text-align:center;
}

26/01/2024 ISTE 2022-2023 39

1.3. La mise en forme et le CSS
1.3.2. Le langage CSS

26/01/2024 ISTE 2022-2023 40

1.3. La mise en forme et le CSS
1.3.2. Le langage CSS

26/01/2024 ISTE 2022-2023 41

1.3. La mise en forme et le CSS
1.3.2. Le langage CSS
Où créer la feuille de style ?
Elle peut être créée à trois "endroits" :
 Dans l’élément HTML concerné par le s
tyle, avec l’attribut style,
 Dans la page HTML, dans l’élément <h
ead>,
 Dans un fichier extérieur ayant pour e
xtension css et lié à la page HTML avec
l’élément <link>.

26/01/2024 ISTE 2022-2023 42

1.3. La mise en forme et le CSS
1.3.2. Le langage CSS
1. Dans l’élément HTML
La portée de cette utilisation est donc plus que limitée.
Exemple
<p style="color: red">Texte en rouge</p>
<html>
<head>
<meta charset="utf-8" />
<title>Premiers tests du CSS</title>
</head>
<body>
<h1>Mon super site</h1>
<p style="color: blue;">Bonjour et bienvenue sur mon site !</p>
<p>Pour le moment, mon site est un peu vide.
Patientez encore un peu !</p>
</body>
</html>

26/01/2024 ISTE 2022-2023 43

1.3. La mise en forme et le CSS
1.3.2. Le langage CSS
2. Dans la page HTML
Cette deuxième possibilité permet
de créer les styles dans la page HTML au niveau
de la balise <head> avec la balise <style>.

Cette balise, <style> , possède

plusieurs arguments :
le premier argument est type, il est
indispensable et il permet de définir quel type
de style sera utilisé. Dans notre cas ca sera
text/css
26/01/2024 ISTE 2022-2023 44
1.3. La mise en forme et le CSS
1.3.2. Le langage CSS
2. Dans la page HTML

<html>
<head>
<meta charset="utf-8" />
<style>
p{color: blue; }
</style>
<title>Premiers tests du CSS</title>
</head>
<body>
<h1>Mon super site</h1>
<p>Bonjour et bienvenue sur mon site !</p>
<p>Pour le moment, mon site est un peu <em>vide</em>.
Patientez encore un peu !</p>
</body>
</html>

26/01/2024 ISTE 2022-2023 45

1.3. La mise en forme et le CSS
1.3.2. Le langage CSS
3. Dans un fichier CSS
La solution la plus efficace est de
créer les styles dans un fichier spécifique,
qui aura comme extension .css.
Contenu du fichier
monStyle{
color: red ;
}
monTitre{
Background-color: yellow ;
}
26/01/2024 ISTE 2022-2023 46
1.3. La mise en forme et le CSS
1.3.2. Le langage CSS
3. Dans un fichier CSS
Dans la page HTML, il faut réaliser le lien entre la age HTML et le fichier .css. cette
liaison s’écrit dans la balise <head> au moyen de ma balise<link>.
Le premier attribut indispensable de <link> est href, qui permet
d’indiquer le chemin d’accès au fichier .css.
<head>
<link href="mesStyles.css">
</head>
Le deuxième attribut est rel qui va spécifier la relation qui existe avec le fichier lié, la
valeur stylesheet sera utilisée pour cet attribut pour indiquer qu’il s’agit d’une feuille
de style.
<head>
<link href="mesStyles.css" rel="stylesheet">
</head>
Les deux autres attributs utilisables sont type et media.
<head>
<link href="mesStyles.css" rel="stylesheet" type="text/css" media="screen">
</head>

26/01/2024 ISTE 2022-2023 47

1.3. La mise en forme et le CSS
1.3.2. Le langage CSS
3. Dans un fichier CSS
Exemple
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css" />
<title>Premiers tests du CSS</title>
</head>
<body>
<h1>Mon super site</h1>
<p>Bonjour et bienvenue sur mon site !</p>
<p>Pour le moment, mon site est un peu <em>vide</em>.
Patientez encore un peu !</p>
</body>
</html>
Code : CSS
p{
color: blue;
}
26/01/2024 ISTE 2022-2023 48
1.3. La mise en forme et le CSS
1.3.2. Le langage CSS
CSS et éléments block et inline
Les éléments HTML peuvent être classé en deux types :
ceux de type «block» et les autres de type «inline».
Les éléments de type «inline» se fondent dans le texte,
alors que
Les éléments de type «block» forcent un retour chariot
(retour à la ligne) avant et après leur insertion.

Exemples d’éléments de type block : <p>, <hx>, <table>

Exemples d’éléments de type inline : <strong>, <a>,
<img>
26/01/2024 ISTE 2022-2023 49
1.3. La mise en forme et le CSS
1.3.2. Le langage CSS
CSS et éléments block et inline
Maintenant que cette classification des
éléments HTML est faite, nous pouvons
introduire les balises spéciales <SPAN> et
<DIV>. Ces deux balises ne correspondent
en réalité à aucun élément HTML. Elles sont
utilisées seulement pour la définition de
style.
La balise <SPAN> est de type « inline » et
<DIV> est de type « block ».
On les appelle aussi balises universelles.
26/01/2024 ISTE 2022-2023 50
1.3. La mise en forme et le CSS
1.3.2. Le langage CSS
Par exemple, si je veux modifier uniquement "bienvenue" dans le paragraphe suivant :
Code : HTML

<p>Bonjour et bienvenue sur mon site !</p>

Ça serait facile à faire s'il y avait une balise autour de "bienvenue", malheureusement
il n'y en a pas. Heureusement, on a inventé 2 balises dites universelles qui
n'ont aucune signification particulière :
<span> </span> : c'est une balise de type inline. C'est une balise que l'on place au
sein d'un paragraphe de texte, pour sélectionner certains mots uniquement. Les
balises <strong> et <em> sont de la même famille. Cette balise s'utilise donc au
milieu d'un paragraphe, et c'est celle dont nous allons nous servir pour colorer
"bienvenue".
<div> </div> : c'est une balise de type block qui entoure un bloc de texte. Les balises
de la même famille sont <p>, <h1>, etc. Ces balises ont quelque chose en commun :
elles créent un nouveau "bloc" dans la page, et provoquent donc obligatoirement un
retour à la ligne. <div> est une balise fréquemment utilisée dans la
construction d'un design.

26/01/2024 ISTE 2022-2023 51

1.3. La mise en forme et le CSS
1.3.2. Le langage CSS
Appliquer un style : class et id

Les attributs class et id sont quasiment identiques. ces attributs on peut les
mettre sur n'importe quelle balise.

26/01/2024 ISTE 2022-2023 52

1.3. La mise en forme et le CSS
1.3.2. Le langage CSS
Formatage du texte
La taille font-size : valeur: npx ou small/large
La police : font-family : police;

Seulement, pour éviter qu'il n'y ait de problème si l'internaute n'a pas la même
police que vous, on précise en général plusieurs noms de police, séparés par des
virgules :
Code : CSS
balise
{
font-family: police1, police2, police3, police4;
}

Code : CSS
p{
font-family: Impact, Arial Black, Arial, Verdana, serif;
}

26/01/2024 ISTE 2022-2023 53

1.3. La mise en forme et le CSS
1.3.2. Le langage CSS
Formatage du texte
Mettre en italique
en CSS on utilise font-style, qui peut prendre 3 valeurs :
 italic : le texte sera mis en italique.
 oblique : le texte sera aussi mis en italique (en penchant les lettres).
 normal : le texte sera normal (par défaut).

Mettre en gras
La propriété CSS pour mettre en gras est font-weight, et prend les valeurs
suivantes :
 normal : le texte sera écrit normalement (par défaut).
 Bold: en gras

26/01/2024 ISTE 2022-2023 54

1.3. La mise en forme et le CSS
1.3.2. Le langage CSS
Formatage du texte
Soulignement et autres décorations
Cette propriété CSS porte bien son nom : text-decoration. Elle permet entre
autres de souligner le texte, mais pas seulement. Voici les différentes valeurs
qu'elle peut prendre :
 underline : souligné.
 line-through : barré.
 overline : ligne au-dessus.
 blink : clignotant. Ne marche pas sur tous les navigateurs (Internet Explorer et
Google Chrome notamment).
 none : normal (par défaut).

26/01/2024 ISTE 2022-2023 55

1.3. La mise en forme et le CSS
1.3.2. Le langage CSS
Formatage du texte
L'alignement
Le langage CSS nous permet de faire tous les alignements que l'on connaît : à
gauche, centré, à droite et justifié.
C'est tout simple. 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é". Justifier le texte permet de faire en sorte qu'il
prenne toute la largeur possible sans laisser d'espace blanc à la fin des lignes.
Les textes des journaux, par exemple, sont tout le temps justifiés.

26/01/2024 ISTE 2022-2023 56

1.3. La mise en forme et le CSS
1.3.2. Le langage CSS
Formatage du texte
Les couleurs
Continuons notre tour d'horizon des propriétés CSS existantes. Nous allons nous
intéresser ici aux propriétés liées de près ou de loin à la couleur. Nous verrons
entre autres :
 Comment changer la couleur du texte: color: couleur; Nom couleur en
anglais ou code hexadécimal: #AACCFF ou #A58

 Comment mettre une couleur ou une image de fond: background-color: black;

/* Le fond de la page sera noir */ ou background-image: url("neige.png");
à utiliser avec le sélecteur body

26/01/2024 ISTE 2022-2023 57

1.3. La mise en forme et le CSS
1.3.2. Le langage CSS
Les bordures
- border-style : solid
- Border-color : couleur en anglais
- Border-radius : en px pour ajouter les arrondis
au coin

Affichage
- display: none/block
- Float:left/right

Etc. Voir la documentation sur le CSS

26/01/2024 ISTE 2022-2023 58
1.3. La mise en forme et le CSS
1.3.2. Le langage CSS
Création d’apparence dynamique
Nous verrons dans ce point comment
changer l'apparence :
 Au survol : a:hover { }
 Lors du clic : a:active /* Quand le
visiteur clique sur le lien */
 Lors du focus (élément
sélectionné) : a:focus /* Quand le
visiteur sélectionne le lien */
 Lorsqu'un lien a été visité :
a:visited /* Quand le visiteur a
26/01/2024 ISTE 2022-2023 59
1.4. Le tableau, le formulaire et le cadre
1.4.1. Le tableau
En Html, les tableaux servent non
seulement à aligner des chiffres mais surtout à
placer des éléments à l'emplacement que vous
souhaitez. L'usage des tableaux est donc très
fréquent.
Un tableau est composé de lignes et de
colonnes qui forment les cellules du tableau. Les
balises de base sont donc :

26/01/2024 ISTE 2022-2023 60

1.4. Le tableau, le formulaire et le cadre
1.4.1. Le tableau
Exemple1
<table>
<tr>
<td>1ère ligne, 1ère colonne</td>
<td>1ère ligne, 2ème colonne</td>
</tr>
<tr>
<td>2ème ligne, 1ère colonne</td>
<td>2ème ligne, 2ème colonne</td>
</tr>
</table>
26/01/2024 ISTE 2022-2023 61
1.4. Le tableau, le formulaire et le cadre
1.4.1. Le tableau
Pour certains tableaux, il se peut que vous
ayez besoin de fusionner des cellules entre elles.
La fusion de colonnes : On utilisera l'attribut
colspan.
La fusion de lignes : on utilisera l'attribut rowspan.

La valeur à donner à ces deux

attributs est un nombre de cellules à
fusionner entre elles.

26/01/2024 ISTE 2022-2023 62

1.4. Le tableau, le formulaire et le
cadre
1.4.1. Le tableau
Exemple 1

26/01/2024 ISTE 2022-2023 63

1.4. Le tableau, le formulaire et le
cadre
1.4.2. Le formulaire
Un formulaire est une fiche que l'utilisateur peut remplir, ces
informations ainsi saisies sont traitées par le serveur WWW.
Un formulaire commence et finit par
<form action =“ “ method=“ “>
</form> avec ACTION = "programme executable“ METHOD
= POST

26/01/2024 ISTE 2022-2023 64

1.4. Le tableau, le formulaire et le
cadre
1.4.2. Le formulaire

Il existe quatre types de champs :

Bouton
<input type name value checked>
avec type = radio pour les boutons multiples
button pour le bouton de commande
checkbox pour les cases à cocher
submit pour envoyer le formulaire une fois rempli
reset pour effacer le contenu du formulaire
name = "un nom" qui identifie le bouton
value= "valeur" donnée au bouton lorsqu'il est sélectionné
checked signale un bouton par défaut (radio) ou
une case cochée avant saisie (checkbox)
26/01/2024 ISTE 2022-2023 65
1.4. Le tableau, le formulaire et le cadre
1.4.2. Le formulaire

Il existe quatre types de champs :

Texte libre sur une ligne
<input type name size value>
Avec type = text pour faire saisir du texte
password les caractères saisis sont
représentés par des '*'
hidden le champ est caché : utile pour
transmettre des informations non visibles.
name = "un nom" qui identifie le champ
texte
value= « valeur"
placeholder: un message par défaut
required: forcer la saisie

26/01/2024 ISTE 2022-2023 66

1.4. Le tableau, le formulaire et le cadre
1.4.2. Le formulaire
Il existe quatre types de champs :
texte libre sur plusieurs lignes
<textarea name rows cols> </textarea>
avec name = "un nom" qui identifie le champ texte
rows = nombre de lignes visibles
cols = nombre de colonnes visibles
liste déroulante
<select name></select>
avec name = "un nom" qui identifie le menu
<option></option>représente chaque choix du menu

26/01/2024 ISTE 2022-2023 67

1.4. Le tableau, le formulaire et le cadre
1.4.2. Le formulaire
Les zones enrichies de HTML5

E-mail
<input type="email" />
Une URL
<input type="url" />
Numéro de téléphone
<input type="tel" />
Nombre
<input type="number" />

26/01/2024 ISTE 2022-2023 68

 1.4. Le tableau, le formulaire et le cadre
1.4.2. Le formulaire
Les zones enrichies de HTML5

Vous pouvez personnaliser le fonctionnement du champ avec

les attributs suivants :
•min : valeur minimale autorisée ;
•max : valeur maximale autorisée ;
•step : c'est le « pas » de déplacement. Si vous indiquez un
pas de 2, le champ n'acceptera que des valeurs de 2 en 2 (par
exemple 0, 2, 4, 6…).

Un curseur
Le type range permet de sélectionner un nombre avec un curseur
(aussi appelé slider), comme à la figure suivante :
<input type="range" />
26/01/2024 ISTE 2022-2023 69
1.4. Le tableau, le formulaire et le cadre
1.4.2. Le formulaire
Les zones enrichies de HTML5
Couleur
Ce champ permet de saisir une
couleur :
<input type="color" />

26/01/2024 ISTE 2022-2023 70

1.4. Le tableau, le formulaire et le cadre
1.4.2. Le formulaire
Les zones enrichies de HTML5
Couleur
Ce champ permet de saisir une
couleur :
<input type="color" />

26/01/2024 ISTE 2022-2023 71

 1.4. Le tableau, le formulaire et le cadre
1.4.2. Le formulaire
Les zones enrichies de HTML5
Date
Différents types de champs de sélection de date
existent :
•date : pour la date (05/08/1985 par exemple) ;
•time : pour l'heure (13:37 par exemple) ;
•week : pour la semaine ;
•month: pour le mois

26/01/2024 ISTE 2022-2023 72

1.4. Le tableau, le formulaire et le cadre
1.4.2. Le formulaire
La musique et la vidéo
<video> et <audio>
Exemple : <audio src="tour.mp3" controls>
<video src="php.mp4" controls width="400">

26/01/2024 ISTE 2022-2023 73

1.4. Le tableau, le formulaire et
le cadre
1.4.2. Le formulaire
Application 1

26/01/2024 ISTE 2022-2023 74

 Premier projet
 Créer une page qui présente votre promotion
 Une autre page qui présente les différents cours inscrits à
votre promotion
 Une autre page par cours qui permettra de lire le cours en
commençant par le plan et en utilisant le lien interne pour
atteindre les différents chapitres
 Pour chaque cours, ajouter la photo de l’enseignant
 Donner la possibilité de naviguer entre les différentes pages
 Si on clique sur la photo de l’enseignant, on doit avoir une
petite description de sa personnalité.
 Ajouter un lien vers la page qui présente les membres du
groupe(10 étudiants par groupe et, pour chaque membre,
une page qui présente ce qu’il a réalisé comme travail)
1. Utiliser le CSS pour le Design de vos pages.
2. Utiliser la balise DIV pour une meilleure présentation.
3. Le projet est à envoyer à l’adresse lucidebula@gmail.com
4. Ou au numéro WhatsApp 0991059627
5. Le dossier du projet doit porter votre nom complet
26/01/2024 ISTE 2022-2023 75
CHAPITRE II. LE JAVASCRIPT

2.1. L’architecture d’une application web

2.2. Les outils pour programmer en JavaScript
2.3 Structure d’un programme PHP/JavaScript
2.4. Les inscriptions d’E/S et les opérateurs
2.5. Les structures de contrôle

26/01/20
ISTE 2022-2023 76
24
 CHAPITRE II. LE JAVASCRIPT
2.1. L’architecture d’une application web

Le web utilise généralement une architecture clien/serveur.

JavaScript

26/01/20
ISTE 2022-2023 77
24
 CHAPITRE II. LE JAVASCRIPT
2.1. L’architecture d’une application web

L'architecture client/serveur désigne un mode

de communication entre plusieurs ordinateurs
d'un réseau qui distingue un ou plusieurs
postes clients du serveur : chaque logiciel
client peut envoyer des requêtes à un
serveur.
L'architecture client/serveur s'appuie sur un
poste central, le serveur, qui envoie des
données aux machines clientes.
Des programmes qui accèdent au serveur sont
appelés programmes clients.
ISTE 2022-2023
26/01/20
24
78
 CHAPITRE II. LE LANGAGE JAVASCRIPT
2.2. Les outils pour travailler en JavaScript

Un navigateur
Un éditeur de textes

NB. JavaScript n’a pas besoin

du serveur.
26/01/20
ISTE 2022-2023 79
24
 CHAPITRE II. LE LANGAGE JAVASCRIPT
2.3 Structure d’un programme PHP/JavaScript

En JavaScript, toutes les instructions se terminent par

26/01/20

un point virgule et il est sensible à la case.

ISTE 2022-2023 80
24
 CHAPITRE II. LE LANGAGE JAVASCRIPT
2.3 Structure d’un programme JavaScript

Création d’un programme

Javascript: comme la
création d’un document
HTML: n’importe où et
avec l’extension .html
26/01/20
ISTE 2022-2023 81
24
 CHAPITRE II. LE LANGAGE JAVASCRIPT
2.3 Structure d’un programme JavaScript
Exécution

JavaScript: lancer le
fichier directement
au moyen du
navigateur.
26/01/20
ISTE 2022-2023 82
24
 CHAPITRE II. LE LANGAGE JAVASCRIPT
2.3 Structure d’un programme PHP/JavaScript
Les objets du navigateur
JavaScript divise la page du navigateur en objets, afin de
permettre d'accéder à n'importe lequel d'entre-eux et de
pouvoir les manipuler par l'intermédiaire de leurs propriétés.
 L'objet le plus grand est l'objet fenêtre (les objets en
javascript ont leur dénomination en anglais, donc dans le
cas présent window)
 Dans la fenêtre s'affiche une page, c'est l'objet document
 Cette page peut contenir plusieurs objets, comme des
formulaires, des images, etc.

26/01/20
ISTE 2022-2023 83
24
 CHAPITRE II. LE LANGAGE JAVASCRIPT
2.3 Structure d’un programme JavaScript
Les objets du navigateur
Accès aux objets du formulaire

 Le formulaire (baptisé form1 pour le distinguer des autres

formulaires de la page) est repéré par le code suivant :
window.document.forms["form1"] ou soit
window.document.form1
 Le bouton checkbox (baptisé checkbox) est repéré par le code
suivant :
window.document.form1.checkbox
 Le champ de texte (appelé Nbre) est repéré par le code
suivant :
window.document.forms["form1"].Nbre ou soit
26/01/20
ISTE 2022-2023 84
24
window.document.form1.Nbre
 CHAPITRE II. LE LANGAGE JAVASCRIPT
2.4. Les inscriptions d’E/S et les opérateurs
VARIABLE: En JavaScript, la
déclaration peut commencer par
var et on peut utiliser la
déclaration implicite.
Instruction d’entrée
JavaScirpt: window.document.NomForm.Champs.Value
26/01/20
ISTE 2022-2023 85
24
 CHAPITRE II. LE LANGAGE JAVASCRIPT
2.4. Les inscriptions d’E/S et les opérateurs

Instruction d’entrée

JavaScirpt: Il utilise aussi la boite de dialogue

prompt(‘ Message ’,’ valeur par défaut’);

La valeur saisie est une chaine: parseInt ou parseFloat pour convertir.

26/01/20
ISTE 2022-2023 86
24
 CHAPITRE II. LE LANGAGE JAVASCRIPT
2.4. Les inscriptions d’E/S et les opérateurs
Instruction de sortie
JavaScirpt: document.write() et Il utilise aussi les boites de dialogue
suivantes

- alert()
- confirm()

NB: La concaténation on utilise « + »

26/01/20
ISTE 2022-2023 87
24
 CHAPITRE II. LE LANGAGEJAVASCRIPT
2.4. Les inscriptions d’E/S et les opérateurs

Les événements
Les événements sont des actions de l'utilisateur, qui
vont pouvoir donner lieu à une interactivité. L'événement
par excellence est le clic de souris ( OnClick), car c'est le
plus utilisé par le HTML gère. Grâce au Javascript il est
possible d'associer des fonctions, des méthodes à des
événements tels que le passage de la souris au-dessus
d'une zone, le changement d'une valeur, ...
:
onEvenement="Action_Javascript_ou_Fonction(); "
Exemple:
Onclick/Onload/OnMouseOver/OnMouseOut etc
ISTE 2022-2023
26/01/20
24
88
 CHAPITRE II. LE LANGAGEJAVASCRIPT
2.4. Les inscriptions d’E/S et les opérateurs

Fonction Javascript

function nomFonction(Parametre)
{

Exemple
function calculer( a)
{ var b=2*a;
alert(b);
ISTE 2022-2023 } 26/01/20
24
89
 CHAPITRE II. LE LANGAGEJAVASCRIPT
2.4. Les inscriptions d’E/S et les opérateurs

26/01/20
ISTE 2022-2023 90
24
 CHAPITRE II. LE LANGAGE JAVASCRIPT
2.4. Les inscriptions d’E/S et les opérateurs
Les opérateurs

Les opérateurs sont des symboles qui permettent de manipuler

des variables, c'est-à-dire effectuer des opérations, les évaluer,
On distingue plusieurs types d'opérateurs :
 Les Opérateurs arithmétiques : +, -, *, /, %
 Les opérateurs de comparaison : ==, !=, <, <=, >, >=
 Les opérateurs logiques (booléens) : ||, &&, !
 Les opérateurs d'incrémentation : ++, --
 Les opérateurs abrégés : += ,-=,*= etc.
 a=a+5 ; a+=5 ;
 p=p*10 ; p*=10 ;
ISTE 2022-2023
26/01/20
91
24
 CHAPITRE II. LE LANGAGE JAVASCRIPT
2.5. Les structures de contrôle
1° Instruction if Syntaxe :
if (condition)
Instruction1 ;
else instruction2 ;
Remarques:
 la condition doit être entre des parenthèses
 il est possible de définir plusieurs conditions à remplir avec les
opérateurs ET et OU (&& et ||)
 La partie else est optionnelle
 s’il y a plusieurs instructions à exécuter on utilise les accolades
26/01/20
ISTE 2022-2023 92
24
 CHAPITRE II. LE LANGAGE JAVASCRIPT
2.5. Les structures de contrôle
2° Instruction switch...case

L'instruction switch permet de faire plusieurs

tests de valeurs sur le contenu d'une même variable.
Sa syntaxe est la suivante :

switch (Variable)
{ caseValeur1: Liste d'instructions; break;
caseValeur2: Liste d'instructions; break;
caseValeurX: Liste d'instructions; break;
default: Liste d'instructions; break;
}
ISTE 2022-2023
26/01/20
24
93
 CHAPITRE II. LE LANGAGE JAVASCRIPT
2.5. Les structures de contrôle
3° Boucle for
La syntaxe : On connait combien de fois répéter
for (initialisation; condition; modification)
{liste d'instructions}
4° Boucle while
La syntaxe : On ne connait pas combien de fois répéter
while(condition)
{liste d'instructions} on test et on exécute
5° Boucle do while
La syntaxe : On ne connait pas combien de fois répéter
do {liste d'instructions}
while(condition); on exécute et on test
26/01/20
ISTE 2022-2023 94
24
 CHAPITRE II. LE LANGAGE JAVASCRIPT
Projet 2 :

Premier Bachelier ISTE

26/01/20
ISTE 2022-2023 95
24
CHAPITRE III. LE FRAMEWORK BOOTSTRAP

3.1. Installation et utilisation de bootstrap

3.2. Le Template
3.3. Description du dernier projet

26/01/20
ISTE 2022-2023 96
24
CHAPITRE III. LE FRAMEWORK BOOTSTRAP ET LE TEMPLATE
3.1. Installation et utilisation de Bootstrap

Qu'est-ce que Bootstrap ?

 Bootstrap est un framework frontal gratuit pour un
développement Web plus rapide et plus facile
 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 modaux, les carrousels d'images
et bien d'autres, ainsi que des plugins JavaScript
facultatifs
 Bootstrap vous donne également la possibilité de
créer facilement des conceptions réactives
ISTE 2022-2023
26/01/20
97
24
CHAPITRE III. LE FRAMEWORK BOOTSTRAP ET LE TEMPLATE
3.1. Installation et utilisation de Bootstrap
Le Responsive Web Design

La conception Web réactive consiste

à créer des sites Web qui s'adaptent
automatiquement pour bien paraître
sur tous les appareils, des petits
téléphones aux grands ordinateurs de
bureau.
26/01/20
ISTE 2022-2023 98
24
CHAPITRE III. LE FRAMEWORK BOOTSTRAP ET LE TEMPLATE
3.1. Installation et utilisation de Bootstrap

Pourquoi utiliser Bootstrap ?

 Facile à utiliser : toute personne ayant des connaissances
de base en HTML et CSS peut commencer à utiliser
Bootstrap.
 Fonctionnalités réactives : le CSS réactif de Bootstrap
s'adapte aux téléphones, tablettes et ordinateurs de bureau
 Approche mobile d'abord : dans Bootstrap, les styles
mobiles d'abord font partie du cadre de base
 Compatibilité du navigateur : Bootstrap 4 est compatible
avec tous les navigateurs modernes (Chrome, Firefox,
Internet Explorer 10+, Edge, Safari et Opera)
26/01/20
ISTE 2022-2023 99
24
CHAPITRE III. LE FRAMEWORK BOOTSTRAP ET LE TEMPLATE
3.1. Installation et utilisation de Bootstrap

Où obtenir Bootstrap 4 ?
 Il existe deux façons de commencer à utiliser Bootstrap 4
sur votre propre site Web.
 Inclure Bootstrap 4 à partir d'un CDN
 Téléchargez Bootstrap 4 sur getbootstrap.com
Si vous ne souhaitez pas télécharger et héberger Bootstrap 4
vous-même, vous pouvez l'inclure à partir d'un CDN (Content
Delivery Network).
 Téléchargement de Bootstrap 4
https://getbootstrap.com/ et suivez les instructions qui s'y
trouvent. 26/01/20
ISTE 2022-2023 100
24
CHAPITRE III. LE FRAMEWORK BOOTSTRAP ET LE TEMPLATE
3.2. Modèle de base de Bootstrap
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-
fit=no" />
<title>Titre de la page affiché dans la barre du navigateur</title>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
<link rel="stylesheet" href="custom.css" />
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></
script>
26/01/20
ISTE 2022-2023 101
<script 24

src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></scrip
CHAPITRE III. LE FRAMEWORK BOOTSTRAP ET LE TEMPLATE
3.2. Modèle de base de Bootstrap

Pour garantir un rendu et un zoom tactile corrects, ajoutez

la <meta>balise suivante à l'intérieur de l' <head>élément :
<meta name="viewport" content="width=device-width, initial-
scale=1">

La width=device-width définit la largeur de la page pour

suivre la largeur de l'écran de l'appareil (qui varie selon
l'appareil).
La initial-scale=1 définit le niveau de zoom initial
lorsque la page est chargée pour la première fois par le
navigateur.
26/01/20
ISTE 2022-2023 102
24
CHAPITRE III. LE FRAMEWORK BOOTSTRAP ET LE TEMPLATE
3.2. Modèle de base de Bootstrap
Pour utiliser Bootstrap, il faut maitriser un certain nombre de classes de basse.

vous trouverez une liste de classes de base à cette adresse:

https://www.w3schools.com/bootstrap4/bootstrap_ref_all_classes.asp

26/01/20
ISTE 2022-2023 103
24
CHAPITRE III. LE FRAMEWORK BOOTSTRAP ET LE TEMPLATE
3.3. Les couleurs

Couleurs du texte
Bootstrap 4 a des classes contextuelles qui peuvent être utilisées
pour fournir "un sens à travers les couleurs".
Les classes pour les couleurs de 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:

Couleurs de fond
Les classes pour les couleurs d'arrière-plan sont : .bg-primary, .bg-
success, .bg-info, .bg-warning, .bg-danger, .bg-secondaryet ..bg-
dark.bg-light
Notez que les couleurs d'arrière-plan ne définissent pas la couleur du
texte, donc dans certains cas, vous voudrez les utiliser avec
une .text-*classe.
ISTE 2022-2023
26/01/20
104
24
CHAPITRE III. LE FRAMEWORK BOOTSTRAP ET LE TEMPLATE
3.4. Les containeurs

Le framework Bootstrap repose sur un système de

grille. On entend par système de grille, une structure
de colonnes et de lignes permettant d'organiser le
contenu et la mise en forme de la page web. C'est
l'élément essentiel et le cœur même de Bootstrap.

le containeur. Il y en a deux types :

•.container
•.container-fluid
26/01/20
ISTE 2022-2023 105
24
CHAPITRE III. LE FRAMEWORK BOOTSTRAP ET LE TEMPLATE
3.4. Les containeurs

La classe .container possède une

largeur maximale fixe suivant la largeur de la
page web. En effet, Bootstrap réagit suivant
plusieurs formats. Bootstrap 4 réagit suivant 5
formats. Le tableau ci-après récapitule les
points clés.

26/01/20
ISTE 2022-2023 106
24
CHAPITRE III. LE FRAMEWORK BOOTSTRAP ET LE TEMPLATE
3.4. Les containeurs

26/01/20
ISTE 2022-2023 107
24
CHAPITRE III. LE FRAMEWORK BOOTSTRAP ET LE TEMPLATE
3.4. Les containeurs

Bootstrap 4 découpe le corps de la page web en

une multitude de lignes, on parle alors de row. Chaque ligne
est découpée en 12 colonnes de largeur égale. Le terme
associé est col. Il n'est pas obligatoire de toutes les utiliser
individuellement, il est possible de les regrouper pour en

former des plus larges. Toutefois, attention à

ne pas dépasser 12 colonnes.
26/01/20
ISTE 2022-2023 108
24
CHAPITRE III. LE FRAMEWORK BOOTSTRAP ET LE TEMPLATE
3.4. Les containeurs

26/01/20
ISTE 2022-2023 109
24
CHAPITRE III. LE FRAMEWORK BOOTSTRAP ET LE TEMPLATE
3.4. Les containeurs
Exemple : On subdive l’écran en deux partie 3/12 et 9/12

<div class="container">
<div class="row">
<div id=“partie1" class="col-3 border border-secondary">
Partie 1
</div>
<div id=“partie2" class="col-9 border border-secondary">
Partie 2
</div>
</div>
ISTE 2022-2023
26/01/20
110
24
CHAPITRE III. LE FRAMEWORK BOOTSTRAP ET LE TEMPLATE
3.5. Les éléments pliables

Les éléments pliables sont utiles lorsque vous souhaitez masquer et afficher
une grande quantité de contenu :
<button data-toggle="collapse" data-target="#cible">
Qui suis-je?
</button>
<div id="cible" class="collapse">
Je suis informaticien. Spécialiste en Conception de SIG
</div>
La .collapse classe indique un élément réductible (un <div> dans
notre exemple) ; c'est le contenu qui sera affiché ou masqué d'un
simple clic sur un bouton.
ISTE 2022-2023
26/01/20
24
111
CHAPITRE III. LE FRAMEWORK BOOTSTRAP ET LE TEMPLATE
3.5. Les éléments pliables

Pour contrôler (afficher/masquer) le contenu réductible,

ajoutez l' data-toggle="collapse" attribut à un élément
<a> ou <button>. Ajoutez ensuite l' data-
target="#id" attribut pour connecter le bouton avec le
contenu pliable.

Remarque : Pour les éléments <a>, vous pouvez utiliser

l' href attribut au lieu de data-target attribut

26/01/20
ISTE 2022-2023 112
24
CHAPITRE III. LE FRAMEWORK BOOTSTRAP ET LE TEMPLATE
3.5. Les éléments pliables
<a href="#cible " data-toggle="collapse">Collapsible</a>

Par défaut, le contenu réductible est masqué. Cependant, vous pouvez ajouter
la .showclasse pour afficher le contenu par défaut :
<div id="demo" class="collapse show">
text à afficher ici
</div>

26/01/20
ISTE 2022-2023 113
24
CHAPITRE III. LE FRAMEWORK BOOTSTRAP ET LE TEMPLATE
3.5. Les éléments pliables
Accordéon

 L'exemple suivant montre un accordéon

simple en étendant le composant card.
 Remarque : utilisez l' data-parent
attribut pour vous assurer que tous les
éléments réductibles sous le parent
spécifié seront fermés lorsque l'un des
éléments réductibles est affiché.
26/01/20
ISTE 2022-2023 114
24
CHAPITRE III. LE FRAMEWORK BOOTSTRAP ET LE TEMPLATE
3.5. Les éléments pliables
<div id="accordion">
<div class="card">
<div class="card-header">
<a class="card-link" data-toggle="collapse" href="#collapseOne"> Collapsible Group Item
#1 </a>
</div>
<div id="collapseOne" class="collapse show" data-parent="#accordion">
<div class="card-body"> Lorem ipsum.. </div>
</div>
</div>
<div class="card">
<div class="card-header">
<a class="collapsed card-link" data-toggle="collapse" href="#collapseTwo">Collapsible Group Item
#2 </a>
</div>
<div id="collapseTwo" class="collapse" data-parent="#accordion">
<div class="card-body"> Lorem ipsum.. </div>
</div>
</div>ISTE 2022-2023
26/01/20
115
24
</div>
CHAPITRE III. LE FRAMEWORK BOOTSTRAP ET LE TEMPLATE
3.6. Téléchargement de fichier personnalisé

Pour créer un téléchargement de fichier personnalisé,

enveloppez un élément de conteneur avec une
classe .custom-file autour de l'entrée avec
type="file". Ajoutez-y ensuite le .custom-file-input.

Conseil : Si vous utilisez des étiquettes pour le texte

d'accompagnement, ajoutez-y la .custom-file-label
classe. Notez que la valeur de l'attribut for doit
correspondre à l'id de la case à cocher :

26/01/20
ISTE 2022-2023 116
24
CHAPITRE III. LE FRAMEWORK BOOTSTRAP ET LE TEMPLATE
3.6. Téléchargement de fichier personnalisé
<form>
<div class="custom-file">
<input type="file" class="custom-file-input" id="customFile">
<label class="custom-file-label" for="customFile">Choose file</label>
</div>
</form>
<script>
// Add the following code if you want the name of the file appear on select
$(".custom-file-input").on("change", function() {
var fileName = $(this).val().split("\\").pop();
$(this).siblings(".custom-file-label").addClass("selected").html(fileName);
}); </script>

26/01/20
ISTE 2022-2023 117
24
CHAPITRE III. LE FRAMEWORK BOOTSTRAP ET LE TEMPLATE
3.6. Téléchargement de fichier personnalisé

Spinners
Pour créer un spinner/loader, utilisez la .spinner-
borderclasse :

<div class="spinner-border"></div>

<div class="spinner-border text-muted"></div>

<div class="spinner-border text-primary"></div>
<div class="spinner-border text-success"></div>
26/01/20
ISTE 2022-2023 118
24
CHAPITRE III. LE FRAMEWORK BOOTSTRAP ET LE TEMPLATE
3.7. Le carrousel
Le carrousel est un diaporama pour faire défiler les éléments.

<div id="demo" class="carousel slide" data-

ride="carousel">

<!-- Indicators -->

<ul class="carousel-indicators">
<li data-target="#demo" data-slide-to="0" class="active"></li>
<li data-target="#demo" data-slide-to="1"></li>
<li data-target="#demo" data-slide-to="2"></li>
</ul>

26/01/20
ISTE 2022-2023 119
24
CHAPITRE III. LE FRAMEWORK BOOTSTRAP ET LE TEMPLATE
3.7. Le carrousel
<!-- The slideshow -->
<div class="carousel-inner">
<div class="carousel-item active">
<img src="la.jpg" alt="Los Angeles">
</div>
<div class="carousel-item">
<img src="chicago.jpg" alt="Chicago">
</div>
<div class="carousel-item">
<img src="ny.jpg" alt="New York">
</div>
</div>
<!-- Left and right controls -->
<a class="carousel-control-prev" href="#demo" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#demo" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
26/01/20
ISTE 2022-2023 120
24
</div>
CHAPITRE III. LE FRAMEWORK BOOTSTRAP ET LE TEMPLATE
3.7. Le carrousel

Ajoutez des éléments à <div class="carousel-

caption">l'intérieur de chacun <div class="carousel-
item">pour créer une légende pour chaque
diapositive :
<div class="carousel-item">
<img src="la.jpg" alt="Los Angeles">
<div class="carousel-caption">
<h3>Los Angeles</h3>
<p>We had such a great time in LA!</p>
</div>
</div>
ISTE 2022-2023
26/01/20
24
121
CHAPITRE III. LE FRAMEWORK BOOTSTRAP ET LE TEMPLATE
3.8. Les onglets
Les onglets sont utilisés pour séparer le contenu dans différents volets où
chaque volet est visible un par un
<h2>Cours</h2>
<br>
<!-- Nav tabs -->
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#menu1">C++</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#menu2">Java</a> </li>
</ul>
ISTE 2022-2023
26/01/20
24
122
CHAPITRE III. LE FRAMEWORK BOOTSTRAP ET LE TEMPLATE
3.8. Les onglets

<div id="menu1" class="container tab-pane fade"><br>

<h3>C++</h3>
<Le contenu du cours de C++</p>
</div>
<div id="menu2" class="container tab-pane fade"><br>
<h3>Java</h3>
<Le contenu du cours de Java.</p>
</div>
</div>
</div>
26/01/20
ISTE 2022-2023 123
24
CHAPITRE III. LE FRAMEWORK BOOTSTRAP ET LE TEMPLATE
3.1. Installation et utilisation de Bootstrap

https://www.w3schools.com/bootstrap4

26/01/20
ISTE 2022-2023 124
24
CHAPITRE III. LE FRAMEWORK BOOTSTRAP ET LE TEMPLATE
PROJET 3: EXAMEN
- Créer avec BootStrap un site qui permet de consulter le résultat de la
délibération par promotion pour toutes les filières de l’ISTE.

 Les facultés(Image du décanat et autres publicités)

doivent défiler dans un carrousel. Et les promotions sont
des ongles de la page Faculté. Pour chaque promotion on
affiche le résultat de la délibération( le % de chaque
étudiant est sous forme d’une barre de progression). La
faculté est obtenue en cliquant sur l’image de son décanat
qui circule dans le carrousel.
 Un onglet doit présenter le réalisateur du site et les outils
qu’il a utilisé.
 Par groupe de 2
26/01/20
ISTE 2022-2023 125

A exposer le JOUR DE L’EXAMEN

24

 FIN

26/01/20
ISTE 2022-2023 126
24