séance-1-3-ème-sti 2023-2024fv3

Partie I :
Initiation au langages :
 HTML
 CSS
 JavaScript
0
Sommaire
Pages 2...16 Rappel html

Pages 18. 58 Feuille de style css
Pages 59…. Animation,trasformation et
68 transition avec css3
Pages 69…. Complément de cours html
72
Pages 73…… Formulaires
84
Pages 85 91 Structure générale
Pages Systèmes d’exploitations
92…..113
Pages 114… Javasript cours et TP
142
Pages 143… Base de données cours et TP
172
Pages IOT
173….188
Pages Introduction réseaux et protocoles
190….199
Pages Annexes html,css
200….203
1
HTML5
HTML5
Définitions
🙧 Le Web a été inventé par Tim Berners-Lee au début des années 1990, c'est un
service Internet qui permet la recherche d'informations dans les sites web.
🙧 Un site web est un ensemble de pages web reliées entre elles par des liens hypertexte
🙧 Une page web contient des informations (texte, image, son, vidéo)
🙧 Un navigateur web est un programme qui permet de naviguer sur le Web
A ctivité 1: ouvrir un navigateur web ,visiter un site web
exemple :www.hourofcode.com puis cliquer avec le bouton droit de la souris à
l’intérieur de la page et choisir inspecter.
Ce code on l'appelle html
🙧 HTML (HyperText Markup Language) : il a fait son apparition dès 1991 lors du
lancement du Web. Son rôle est de gérer et organiser le contenu de la page
(paragraphes, titres…) ;
🙧 C'est le navigateur web qui fera la traduction entre ces langages informatiques et ce
que vous verrez s'afficher à l'écran.
Activité 2:affichage sans style :
Cliquer sur alt ,choisir affichage
puis style de pagesans style
Page avec
style Page sans
style
2
🙧 CSS (Cascading Style Sheets, aussi appelées Feuilles de style) : permet de mettre en
forme la page web
(couleur, taille…). Ce langage est venu compléter le HTML en 1996.
Javascript le rend
CSS l'embellit dynamique
La structure
Un fichier HTML contient la Un fichier CSS contient le Un fichier JavaScript

structure de la page elle- style de la page. Il vous détermine les éléments
même. permet de changer les dynamiques et interactifs de
couleurs, le positionnement la page. Il détermine ce qui se
et plus encore.. passe lorsque les utilisateurs
cliquent, survolent ou tapent
dans certains éléments.
🙧 . Pour créer des pages web, on utilise des langages de conception de site web parmi
lesquels : HTML
,CSS et javascript.
🙧 Il y a eu plusieurs versions des langages HTML et CSS. Les dernières versions sont HTML5
et CSS3
🙧 L'éditeur de texte :
Ce sont des programmes dédiés à l'écriture de code. On peut, en général, les utiliser
pour de multiples langages, pas seulement HTML et CSS.
Exemples :
Sublim Notepad++ jedit visual BlueGriffon Page breeze Adobe

e Text, logiciel libre studio un logiciel Dreamweaver.
code libre Solution
commerciale
Activité 3: Lancer Visual code et choisir nouveau fichier, et Sélectionner un
langage « html » Puis écrire le symbole ! et taper entrée.
3
.
Que remarquez-vous ?
4
 Le document HTML contient un ensemble de balises tels que, <html>, <body>,
<head>, …
Modifier le code affiche exemple :ajouter un titre page1 et modifier le contenu du

page.
I-Structure de base d’une page HTML
Un document HTML commence par la balise <HTML> et finit par la balise </HTML>. Il
contient également un en-tête décrivant le titre de la page, puis un corps dans lequel se
trouve le contenu de la page. L'en-tête est délimité par les balises <HEAD> et
</HEAD>. Le corps est délimité par les balises <BODY> et </BODY>.
Balise Rôle
<!DOCTYPE html> Elle indique qu'il s'agit bien d'une page web HTML
html Elle englobe tout le contenu de la page.
head Elle sert à définir quelques informations générales sur la page.
5
L’encodage (charset) détermine comment les caractères
<meta
charset="utf-8" /> spéciaux vont s'afficher (accents, idéogrammes chinois et
japonais, caractères arabes, etc.).
<meta name="viewport" La propriété width contrôle la taille de la zone d'affichage.
content="width=device-width, Elle peut être définie sur un nombre spécifique de pixels
initial-scale=1" /> comme width=600 ou sur la valeur spéciale device-width, qui
est la largeur de l'écran en pixels CSS à une échelle
de 100%
title Définit le titre de la page web qui sera affiché dans la barre du titre
du navigateur.
body Elle est utilisée pour définir le contenu de la page Web.
II-Organisation et mise en forme d’un texte
Activité4:Lancer Visual code

1. Dans le répertoire racine E:\ , créer un dossier qui porte votre nom.
2.Dans ce dossier, créer un fichier nommé activité3.html
3. Saisir le code HTML suivant, enregistrer et tester :
Pour visualiser le résultat dans un navigateur web cliquer sur F5,puis choisir le
navigateur ou cliquer sur Exécuter puis choisir démarrer le débogage
6
Quelques balises html :
Balise Fonction Exemple
<b>< /b> Gras
<i></i> italique
<br> Saut de ligne
<u></u> Souligné
<FONT SIZE= "**" Mise en
COLOR="#****" forme des
FACE="****"> ……</FONT> caractères
<SUP>…..</SUP> Exposant
<HR SIZE= "**" Ligne de
COLOR="#****" séparation
WIDTH="****"
ALIGN="CENTER/LEFT/RIGH
t">
<p> …</p> Nouveau
paragrap
he
<h1> </h1> Créer des titres ( 6
…… niveaux de titres)
<h6> </h6>
<em> </em> Mettre le texte

en valeur (
italique )
<strong> Mettre le texte
en valeur (
gras)
<mark> Surligner le texte
<ul> Listes non
<li>……</li> ordonnées ou
</ul> listes à puces
<ul> </ul> :
pour délimiter
toute la liste
<li> </li> : pour
délimiter un
élément de la
liste
7
<ol> Liste ordonnée.
<li>……</li> Numérotation
</ol> par défaut : 1. 2.
…..
<dl> Liste de données

<dt>…..</dt>
<dd>…..<dd>
</dl>
Remarques :
1) On distingue deux types de balises :
🙧 Balises paires : <balise> </balise> : elles s'ouvrent et se ferment pour délimiter
le contenu
🙧 Balises orphelines : <balise /> : on ne les insère qu'en un seul exemplaire
2)Un commentaire : Les commentaires sont des notes, des informations et des
détails qui accompagnent le code source et qui ne s’afficheront pas sur la page web 
Cela permet une meilleure relecture du code. La forme d’une balise contenant un
commentaire est : 
3) Les attributs : les options de balise, informations supplémentaires : <balise

attribut="valeur">
Exemples :
<ul type="square"> : pour donner des puces carrés.

<ol type="A"> : numérotation avec des
lettres majuscules <ol type="a"> :
numérotation avec des lettres minuscules <ol
type="I"> : numérotation avec des chiffres
romains
Application 1 :
Compléter le code suivant par les balises adéquates pour assurer les
taches décrites ci dessous
8
<!DOCTYPE html>
<html> 1) Ajoutez un titre de niveau 1
<head> 2) A la suite du titre, ajoutez un
<meta charset="utf-8" /> paragraphe indiquant "la définition
<title>Html 5</title> de html5:"
9
</head> 3) Ajoutez une liste ordonnée d'au
<body> moins trois différences avec html que
</body> vous allez rechercher
</html> 4)Mettez en valeur (emphase forte) la
première différence
Rappel
🙧 L’attribut background de la balise body permet de mettre une image comme arrière-
plan d'une page.
Exemple:<body background="images\image2.jpg">
III)Insertion d’objets :
1) Les images :
 Les différents formats d'images

Il existe plusieurs formats d'images adaptées au Web :
- JPEG : pour les photos ;
- PNG : pour toutes les autres illustrations;
- GIF : similaire au PNG, plus limité en nombre de couleurs mais qui peut être
animé.
La balise doit être accompagnée de deux attributs obligatoires :
- src : il permet d'indiquer où se trouve l'image que l'on veut insérer. Vous
pouvez soit mettre un chemin absolu (ex. :http://www.site.com/fleur.png), soit
mettre le chemin en relatif(ex : src="images/fleur.png")
- alt : cela signifie « texte alternatif ». c'est-à-dire un court texte qui décrit ce
que contient l'image. Ce texte sera affiché à la place de l'image si celle-ci ne
peut pas être téléchargée
Cela aide aussi les robots des moteurs de recherche pour les recherches d'images.
 Ajouter une infobulle

- L'attribut permettant d'afficher une bulle d'aide est title. Cet attribut est facultatif
(contrairement à alt).
- Exemple :
10
<p> - Survolez la photo avec la
Voici une photo de la montagne :<br /> souris pour voir l'infobulle
<img src="images/montagne.jpg" apparaître.
alt="Photo de montagne"
title="C'est beau les Alpes quand même !"
/>
</p>
11
 Les figures
 L'élément HTML <figure> représente une figure (un schéma), qui peut être
accompagné d'une légende grâce à l'élément <figcaption>. C'est souvent une
image, une illustration, un diagramme, un fragment de code ou un schéma auquel il
est fait référence dans le texte principal mais qui peut être utilisé sur une autre
page ou dans une annexe sans que cela affecte le contenu principal.
 Quand dois-je placer mon image dans un paragraphe et quand dois-je la placer dans
une figure ?
- Si elle n'apporte aucune information (c'est juste une illustration pour décorer)
: placez
l'image dans un paragraphe<p>.
Exemple :
<figure>
<img src="pic_trulli.jpg" alt="Trulli">
<figcaption>Fig.1 - Trulli, Puglia, Italy.
</figcaption>
</figure>
- Si elle apporte une information : placez l'image dans une figure <figure>.
Activité 5: Ajouter une image du logo html5
url absolue url relative :
Le code correspondant à l’insertion de l’image en rendant l’url relative au

document
<img src ="adresse" width="largeur" height="hauteur" border="taille" alt="texte" align="alignement">
12
🙧 src ="adresse" : définit l'adresse absolue (http://...) ou relative de l'image à
afficher.
13
🙧 width ="largeur" et height ="hauteur" : définissent la largeur et la hauteur de l'image
en pixels.
🙧 alt ="texte": cela signifie « texte alternatif », décrit ce que contient l'image. Ce
texte sera affiché à la place de l'image si celle-ci ne peut pas être téléchargée
(cela arrive).
🙧 border ="taille": définit la largeur de la bordure autour de l'image.
🙧 align ="alignement" permet de définir l'alignement de l'image ("left", "center","right").
2) L’audio :
Quelques formats audio :
 MP3 : il est très utilisé aujourd'hui.
 .AAC : utilisé majoritairement par Apple sur iTunes, ( iPod, iPhone et autres iPad )
 WAV (format non compressé) : car le fichier est très volumineux, on ne l'utilise pas
Activité 6: Ajouter un fichier audio ‘song.mp3’
Code source html :

 Pour insérer un audio (exemple : musique.mp3), on utilise la balise suivante :
<audio src="musique.mp3"></audio>
 Autres attributs :
🙧 controls : pour ajouter les boutons « Lecture », « Pause » et la barre de défilement.
🙧 width : pour modifier la largeur de l'outil de lecture audio.
🙧 loop : la musique sera jouée en boucle.
🙧 autoplay : la musique sera jouée dès le chargement de la page.
3) Insertion d'une vidéo
 Quelques formats : mp4, H.264, Ogg Theora webm…
 Pour insérer un audio (exemple : video.mp4), on utilise la balise suivante :
 Autres attributs :
🙧 poster : image à afficher à la place de la vidéo tant que celle-ci n'est pas lancée. Par
défaut, le navigateur prend la première image de la vidéo.
🙧 controls : pour ajouter les boutons « Lecture », « Pause » et la barre de défilement.
🙧 width : pour modifier la largeur de la vidéo.
🙧 height : pour modifier la hauteur de la vidéo.
🙧 loop : la vidéo sera jouée en boucle.
🙧 autoplay : la vidéo sera jouée dès le chargement de la page
4) Insertion d'un tableau

Tableauinsertion
14
Activité 7: Ajouter un tableau
1) Créer un nouveau fichier HTML et l’enregistrer avec le nom activité7.html
2) Ajouter les lignes suivantes dans la balise body et visualiser votre travail.
<table border="1">
<tr>
<th> le langage html5 </th>
<th> le langage css3 </th>
</tr>
<tr>
<td> structure</td>
<td>le design </td>
</tr>
</table>
Remarques
1-pour mettre en forme le document html cliquer avec le bouton droit de la souris et cho
2-On peut installer une extension pour avoir un aperçu direct au fur et à mesure qu’on
sur extension puis rechercher ou choisir l’extension voulu)
Exemple :HTML Preview

Utilisation de html preview cliquer ici
3) En déduire le rôle de chaque balise.

🙧La définition d'un tableau : <table>…</table>
🙧La définition d'une ligne : <tr>…</tr>
🙧La définition d'une cellule contenant l'en-tête du tableau : <th>…</th>
🙧La définition d'une cellule : <td>…</td>
11
Remarques : la balise <caption> …</caption> permet d’ajouter un titre au
tableau
Colspan et rowspan permet de fusionner des colonnes et des lignes.
Balise TD
Attribut Type de valeur Description
colspan entier Le nombre de colonnes à fusionner
rowspan entier Le nombre de lignes à fusionner
Exemple :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-
width, initial-
scale=1.0">
<title>Document</title>
</head>
<body>
<table border="1">
<tr>
<th>Month</th>
<th>Savings</th>
<th>Month</th> Toujours on met colspan et
<th>Savings</th> rowspan dans la cellule en haut à
</tr>
gauche de la zone à fusionner.
<tr>
<td>February</td>
<td
colspan="2"
rowspan="2">$80</td>
<td>$80</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
<tr>
<td colspan="2">Sum:
$180</td>
<td colspan="2">Sum:
$180</td>
</tr>
</table>
12
IIICréation des liens hypertexte
LIEN HYPERTEXTE
Lien absolu
: Vers un
autre site Ou Lien relatif : Lien vers un ancre :
une autre Vers une autre page du Vers un endroit dans la
page même site même page
du même
site
Pour créer un lien hypertexte, on utilise la balise :

<a href= "adresse cible"> texte </a>
1) Le lien absolu
Activité 8: Saisir et tester le code HTML donné ci-dessous.
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<title> liens </title>
</head>
<body>
<h1> Les liens en HTML
</h1>
<p> Rechercher avec Google :
<a href ="https://www.google.com/" >
www.google.com </a> </p>
<p> Ouvrir Facebook
<a href="https://www.facebook.com"> Facebook
</a></p>
</body>
</html>
🙧 Les attributs :
- target : pour spécifier la fenêtre d'affichage du lien. ( "_blank","_parent","_self",
"_top").
- Title : permet d’afficher un texte au survol du lien.
Exemple :
<a href ="https://www.google.com/" title ="Lien vers le moteur de recherche
13
google" target="_blank">
www.google.com </a>
2) Le lien relatif
Pour se déplacer vers une autre page du même site, utiliser la balise : < a href =
"page cible"> </a>
14
Exemple : <a href ="acceuil.html " > Page d’accueil </a>
3) Le lien vers un ancre
1. Il faut créer une ancre en ajoutant l'attribut id pour « marquer » l’endroit

destination dans la page :
<h2 id="ancre">texte</h2> <a href="#ancre">
2. Faire un lien vers l'ancre comme ceci :
……………………………………………………………………………………………………………………………
……
……………………………………………………………………………………………………………………………
……
Activité 9: dans le fichier de l’activité4, créer le lien : « cliquer ici pour aller vers le bas
de la page »
<body>
<h1> Les liens en HTML </h1>
<p><a href="#bas">cliquer ici pour
aller
vers le fin de la page</a></p>
<p> Rechercher avec Google :
<a
href="https://www.google.com/">
www.google.com </a>
</p>
<p> Ouvrir Facebook
<a
href="https://www.facebook.com"> Facebook
</a>
</p>
<h3 id="bas"> fin de la page </h3>
</
body>
Propriété interpréter
<a href=” “ target=”_self”> le contexte de navigation actuel. (Par défaut)
<a href=” “ target=”_parent”> le contexte de navigation parent de celui en cours. S'il n'y a pas de
parent, il se comporte comme _self.
<a href=” “ target=”_blank”> généralement un nouvel onglet, mais les utilisateurs peuvent
configurer les navigateurs pour ouvrir une nouvelle fenêtre à la place.
15
TP1 ( HTML5)
1) Lancer l’éditeur visual code
2) Lancer un nouveau fichier (ctrl+N),puis
3) Enregistrer votre travail dans D:/votre dossier/html5 et css3/ tp1.html

4) Ecrire un code HTML permettant de réaliser la page web représentée ci-dessous.:
Remarque :on peut tapper un point d’exclamation puis tapper rntré pour créer une page html de
base
5) Ajouter les lignes suivantes à la fin du fichier tp1et visualiser votre travail.
<h3>Évolutions du langage</h3>
<ul><li>1989-1992 : Origine</li></ul>
</body>
En déduire le rôle de chaque balise.

…………………………………………………………………………………………
…………………………………………………………………………………………
6) Compléter le reste de la liste sachant qu’elle contient aussi :
o 1993 : HTML 1.0
o 1995-1996 : HTML 2.0
o 1997 : HTML 3.2. et 4.0 o 2000 :
XHTML
o De 2007 à nos jours : HTML 5 et abandon du XHTML 2
7) Effectuer les modifications présentées dans le tableau ci-dessous sur votre code
HTML.
Modification Résult
at
<ul type="square">
<ul type="circle">
8) Remplacer la balise la balise ul par la balise ol et observer les résultats obtenus.
16
En déduire le rôle de chaque balise ol.
…………………………………………………………………………………………………..
………………………………………………………………………………………………
9) Effectuer les modifications présentées dans le tableau ci-dessous sur votre
codeHTML.
N Modification Résult
° at
1 <ol type="A">
2 <ol type="a">
3 <ol type="I">
4 <ol type="i">
Le résultat final de la page est le suivant :
10) Rechercher comment modifier le couleur du fond de votre page

……………………………………………………………………………………………………………………………
……
11) Rechercher comment modifier le couleur du paragraphe parlant de html5 (couleur de
police :jaune)
……………………………………………………………………………………………………………………………
……
12) rechercher la définition de css et ajouter ce dernière dans un nouveau paragraphe
……………………………………………………………………………………………………………………………
……
Remarque :
Ctrl+s :pour sauvegarder

Ctrl+shift+s :pour sauvegarder un fichier (html,css,…)dans un nouveau
emplacement.
On peut ajouter une balise avec deux méthodes :
Méthode1 : j’écrit le nom du balise avec le signe inférieur h1 :<h1>
Méthode2 : j’écrit le nom du balise sans le signe inférieur et je choisis parmis la l
des balises proposées et je valide
17
LES FEUILLES DE STYLE
INTRO :
Le langage CSS (Cascading Style Sheets : Feuilles de Style en Cascade) a été développé
par le W3C (World
Wide Web Consortium) à partir de 1996.
Il a pour but de séparer totalement la présentation d'une page Web de son contenu (c'est
à dire du langage HTML), et de faciliter ainsi la maintenance et l'accessibilité d'un site.
Activité1 :
1) Lancer l'éditeur Visual code studio
2) Créer un nouveau fichier et l’enregistrer dans votre dossier de travail sous le
nom tp2.html
3) Ecrire un code HTML permettant de réaliser la page web représentée ci-dessous.
……………………………………………………………………
……………………………..………
……………………………………………………………………
…
……………………………………………………………………
……………………
4) Effectuer les modifications ci-dessous sur la balise p.
<p style ="color:blue; font-size:24px; font-family:arial;">
5) Visualiser votre travail, que remarquez-vous ?
style est un attribut.
- On respecte la syntaxe du CSS à l’intérieur de l’attribut style en utilisant les
deux-points et les points virgules.
6) Ajouter les lignes suivantes dans la balise head.

<st
yle>
p{
color:blue
; font-
size:24px;
font-family:arial;
}
Le code CSS est écrit directement dans une balise <style> à l'intérieur de l'en-tête <head>.
18
8) Créer un nouveau fichier CSS et l’enregistrer dans votre dossier de travail sous
le nom style.
9) Déplacer le contenu de la balise style dans le fichier style.css.
19
10) Ajouter la ligne suivante dans la balise head.

<link rel="stylesheet" href="style.css"/>
……………………………………………………………………
</head>
…………………………
……………………………………………………………………
…………………………
I. PRINCIPE :
Le design d'un site évolue toujours au fil du temps. Le problème, lorsqu'on n'utilise pas de
feuilles de style, c'est qu'il faut reprendre toutes les pages html une à une pour modifier
une police de caractère ou une couleur de fond... Avec les "Cascading Style Sheets"
(CSS), ce lourd handicap est résolu.
C'est dans la feuille de style CSS que l'on va déclarer toute la mise en forme des pages :
le positionnement des éléments, l'image de fond, les polices de caractère, les
couleurs,etc.
Celle-ci sera liée à chaque page html. Ainsi, lorsqu'on en modifiera un élément, cela se
répercutera immédiatement sur toutes les pages html.
Où écrit-on le code CSS ?
Vous avez le choix entre trois endroits différents :
Interne En ligne Externe

1- Dans l'en-tête 2- Directement dans les 3- Dansun fichier .css
<head> du fichier balises du fichier HTML (méthode la plus
HTML : via un attribut style recommandée
(méthode la moins
<head> recommandée).
<styl
e> p <body>
{ …
color:blue; <p style
font- ="color:blue ;
size:24px; font-size:24px;
font-family:arial; font-
} family:arial;" >
</style> contenu du paragraphe
</head> </p>
Dans un fichier .css (recommandé)
On écrit le code CSS dans un fichier spécial ayant

l'extension .css (contrairement aux fichiers HTML
qui ont l'extension .html)
20
Dans la balise <head>, on ajoute la BALISE LINK :
21
<link rel="stylesheet" href="Chemin
d'accès/NOM_FICHIER.css"/>
Avantages :
 Obtenir une présentation homogène sur tout un site en faisant appel sur toutes les pages à une
même définition de style
 Simplifie le code.
 Une maintenance de site beaucoup plus facile.
 Meilleure accessibilité : permet de produire des pages web respectueuses des normes du W3C,
les pages seront donc accessibles pour la majorité des navigateurs (ordinateurs, tablettes,
smartphones, smart TV, …).
Exp. :
Pour écrire
- Soit le code suivant contenu dans le fichier « style.css » : l’accolade { On
p{ utilise le raccouci
color : blue ; clavier :Altgr+4
}
- Et la balise suivante dans le fichier « page1.html » :

<head>
<link rel="stylesheet" href="style.css">
</head> <body>
<h1> Mon site </h1>
<p>bonjour</p>
</body></html>
Résultat : A chaque utilisation de la balise <p> dans

la page web page1.html, le contenu de chaque
paragraphe aura le même style : couleur en bleu. Il
en sera de même pour toutes les autres pages
utilisant la même feuille de style.
Reprenons l’exemple Le sélecteur est généralement l’élément HTML (nom du

précédent : balise)
p { auquel on applique un style (exp..
color : blue paragraphe <p>) Une propriété détermine

; le style qui va être appliqué à un élément
} (exp. color pour indiquer la couleur du
texte, font-size pour la taille du texte)
Une valeur détermine le comportement d’une propriété
(exp. le nom de la couleur, la taille).
19
Schématiquement, une feuille de style CSS ressemble donc à cela :
Code : CSS
balise1
{
propriete1:
valeur1;
propriete2:
valeur2;
propriete3:
valeur3;
}
balise2
{
propriete1: valeur1;
…
Note bien :il ne faut pas oublier le point-virgule devant
Remarques :
Lorsqu’on a, par exemple, le cas suivant : On peut l’écrire de

cette manière :
h1 { color : blue;
} h1 , p {
p { color : blue; {
color : blue; }
}
II.Sélecteurs : class et id
 Comme en HTML, il est possible de mettre des commentaires. Les
Il peut s'avérerintéressant
commentaires ne seront pas affichés,d'affecter
ils serventdes styles
simplement différents
à indiquer des
à des mêmes balises. Pour cela les spécifications CSS ont
informations : /* Votre commentaire */
introduit le concept de classe. Pour que certains paragraphes
Exp :
p{
color : blue ; /* les paragraphes de couleur bleu */}
20
seulement soient écrits d'une manière différente on utilise des attributs
spéciaux qui fonctionnent sur toutes les balises :
- L'attribut class.
- L’attribut id.
1. L'attribut class :
Il peut s'avérer intéressant d'affecter des styles différents à des mêmes balises.
Pour cela les spécifications CSS ont introduit le concept de classe.
La définition des classes est aussi simple que celles des styles. Elle consiste
à préciser la balise sélectionnée (comme pour une déclaration de style),
puis de lui ajouter un point (.) et le nom que l'on souhaite donner à la classe. Le nom de la
classe peut-être composé de lettres (accentuées ou non), de chiffres et de tirets :
Selecteur_de_balise.Nom-de-la-classe { propriété-de-style: Valeur;

propriété-de-style: Valeur;
...;}
Où « Nom-de-la-classe » représente le nom donné à la classe.

css
Exp. :css
b.Rouge { font-family : Verdana ; color : red ; }
Appel d'une classe :
Pour appeler une classe dans le code HTML, il suffit de rajouter un attribut class à la balise :
Soit la classe Rouge appliquée à la balise b :
html
<b class="Rouge"> Texte à mettre en rouge et en gras </b>
Les classes universelles :Il est possible de ne pas préciser de balise, auquel cas la classe pourra être utilisée
dans n'importe quelle balise pour laquelle le style sélectionné a un sens ! On parle alors de classe universelle
(parfois classe indépendante). La définition d'une telle classe se fait en précédant tout simplement le nom de la
classe d'un point :
.Nom-de-la-classe { propriété-de-style: Valeur; propriété-de-style: Valeur;
...;}
21
Soit la classe « important » suivante : css
.important { font-family : Verdana ; color : red ; }
L’appel de cette classe peut être fait à partir de n’importe quel élément HTML pour lequel la définition
est valide :
Exp. :
<h1
Remarque : Notez l'absence dececi
class="important">Attention point dans l'appel à la classe.
est un avertissement</h1>
2. L'attribut id :
L’attribut id fonctionne exactement de la même manière que class mais il ne

peut être utilisé qu'une fois dans le code. C'est pour cela qu'il est plutôt utilisé à
la mise en page qu'à la mise en forme de caractères.
Dans le fichier CSS, il faudra faire précéder le nom de l'id par un dièse (#) :
Activité 2 : Modifier la
couleur du fond #couleur
{ background-color: blue; }
è Pour appeler ce style dans la page HTML, on indiquera id="introduction" à

l'intérieur de la balise voulue :
<body id="couleur" >
A retenir
Quand vous voulez appliquer un style à un bloc ou un élément spécifique, utilisez un attrib
Dans la feuille de style CSS, les règles seront écrites avec la syntaxe :
#nom_id à pour les id
.nom_de_classe à pour les class
III. Les Balises Universelles div et span :
22
Les éléments HTML div et span ont été créés principalement pour simplifier la mise en page
des pages HTML en
CSS c’est-à-dire pour simplifier l’application de certains styles CSS.
La balise <div> </div> :

C'est une balise de type block, qui entoure un bloc de texte. Les balises <p>, <h1>, etc.
sont de la même famille. Ces balises ont quelque chose en commun : elles créent un
nouveau « bloc » ou « section » dans la page et provoquent donc obligatoirement un
retour à la ligne.
Activité 3 :
Produire le document suivant :
<body>
<div class="mauve">
<h1> CSS : Cascading Style Sheets </h1>
<p> Les feuilles de style en cascade, généralement appelées CSS de l'anglais
<span id="vert" class="souligne">Cascading Style Sheets </span>, forment
un langage informatique qui décrit la présentation des documents HTML et XML.
</p>
</div>
</body>
1. La balise <span> </span> :
C'est une balise de type inline, c'est-à-dire une balise que l'on place au sein
d'un paragraphe de texte, pour sélectionner certains mots uniquement. Les
balises <strong> (rendre du texte important) et <em> (insister sur du texte)
sont de la même famille.
Ainsi, on va pouvoir placer une certaine partie du texte d’un titre ou d’un
paragraphe dans un élément span pour ensuite pouvoir lui appliquer un style
CSS particulier, chose qu’il nous était impossible de faire jusqu’à présent.
23
 Si on veut spécifier un mot <span> </span> : c'est une balise de type inline, que l'on
place dans un paragraphe, pour sélectionner certains mots uniquement.
Exp.
Code : HTML
<p>Bonjour et <span class="salutations">bienvenue</span> sur mon site !</p>
Code : CSS
.salutations
{
color: blue;
}
Tout élément, en Html, est de type :
 Block (div)
 Inline (span)
Les éléments de type block… Les éléments de type inline…

Commencent sur une nouvelle ligne S’insèrent dans une ligne
Occupent toute la largeur disponible Occupent seulement la largeur nécessaire
Peuvent être imbriqués les uns dans Peuvent être imbriqués les uns dans les
les autres et contenir des éléments de autres mais ne
type inline peuvent pas contenir d’éléments de type
block
Exemples : p , h1, h2, h3, h4, h5, h6 ,ol, Exemples : em , strong , mark, a , img,
ul, dl, li, table, div span
donc un objet rectangulaire qui ne On ne peut lui spécifier une hauteur ni
peut être réparti sur plusieurs une largeur ni l'entourer d'une marge.
lignes.
Elle possède les
attributs margin, padding, width,
height.
IV.Formatage du texte
a) Introduction Le choix de la ou les polices de caractères doit se faire
en connaissance de cause car elle est sujette aux contraintes suivantes
:
• Toutes les polices de caractères n'existent pas sur tous les

ordinateurs et si l'ordinateur de votre visiteur ne possède pas
la police désirée, une autre police s'affichera modifiant votre
mise en page ;
24
• Mac et PC ne possèdent pas toujours les mêmes noms de polices,
ni la même résolution et vous devrez donc vérifier les équivalences
entre ces deux plateformes ;
•Tous les navigateurs ne gèrent pas le rendu des polices de la
même façon et il ne faut pas espérer le même rendu partout
b) Polices génériques Il existe 5 familles de polices de caractères dites "génériques"
:
•Serif ;
•Sans-serif ;
•Monospace ;
•Cursive ;
•Fantasy ;
Ci-dessous un rendu de ces polices sur quelques navigateurs :
A.Les propriétés de type font
A.1/ La taille font-size

Taille des caractères Il existe deux types d'unités pour régler la
taille des caractères : fixes et proportionnelles.
Il est préférable de ne pas utiliser de tailles de caractères absolues
comme les points (pt), les picas (pc) ou les centimètres (cm) car celles-ci ne
sont pas redimensionnables à l'écran. Il faut également éviter d'utiliser les
pixels (px) car Internet Explorer les considère comme une unité de taille de
caractère fixe.
 Une taille absolue : exacte en pixels (px), en centimètres (cm) ou en millimètres

(mm)
Exemple : Code CSS :

p { font-size: 14px; /* Paragraphes de 14
pixels */ } h1 { font-size: 40px; /* Titres
de 40 pixels */ }
25
 Une valeur relative : en pourcentage (80%, 130%…)., em ou ex (même
principe que le em,
mais qui est plus petit).

Il faut donc utiliser des unités relatives, telles que les em ou les pourcentages (%)
car ces unités sont proportionnelles à la taille en pixels déclarée dans le navigateur
qui par défaut est réglée à 16px. La taille des caractères se déclare par l'attribut «
font-size »
La taille d'une valeur exprimée en em est dynamique. Lorsqu'on définit la
propriété font-size, un em est équivalent à la taille de fonte appliquée à l'élément
parent de l'élément courant. Si cette taille n'a pas été définie pour l'élément
parent, elle correspondra à la taille par défaut du navigateur (généralement 16px).
Ainsi, si on définit font-size avec une valeur de 20px sur l'élément body, 1em
correspondra à 20px et 2em à 40px. Ici, la valeur 2 est un facteur multiplicateur de la
taille.
xx-small minuscule large grand

x-small très petit x-large très grand
small petit xx-large gigantesque
medium moyen 0.9em taille en « em »
80 % taille en pourcentage 1.8ex taille en « ex »
em = taille visée en px / font-size du parent en pixels

Ainsi, si la taille font-size de body vaut 1em et que l'échelle par défaut du navigateur
indique 1em = 16px et qu'on souhaite obtenir une font-size équivalente à 12px, on pourra
utiliser la valeur 0.75em (car 12/16 = 0.75).
 1em : le texte a une taille normale

 Valeur > à 1, comme 1.3em : si vous voulez grossir le texte
 Valeur < à 1, comme 0.8em : si vous voulez réduire le texte
Code : CSS
p
{
font-size: 14px; /* Paragraphes de 14 pixels */
}
h1
{
26
font-size: small; /* Titres de petite taille */
}
h2
{
font-size: 1.4em;
}
A2. /font-style
 Italique, gras, souligné… : font-style , font-weight, text-decoration

 pour mettre en italique, on utilise font-style qui peut prendre trois valeurs :
 italic : le texte sera mis en italique ;
 oblique : le texte sera passé en oblique (les lettres sont penchées, le résultat est légèrement différent de
l'italique proprement dit) ;
 normal : le texte sera normal (par défaut). Cela vous permet d'annuler une mise en italique.
Exemple :
Si vous voulez que les textes entre <em> ne soient plus en italique, vous devrez
écrire en CSS :
em { font-style: normal; }
A.3/mettre en gras font-weight
 La propriété CSS pour mettre en gras est font-weight et prend les valeurs suivantes :
 bold : le texte sera en gras ;

 normal : le texte sera écrit normalement (par défaut).
Exemple :
Pour écrire les titres en gras : h1 { font-weight: bold; }
A. 4/La police font-family
- La propriété CSS qui permet d'indiquer la police à utiliser est font-family .
balise {
font-family: police1, police2, police3, police4;
}
- Le navigateur essaiera d'abord d'utiliser la police1. S'il ne l'a pas, il essaiera la
police2. S'il ne l'a pas, il passera à la police3, et ainsi de suite.
- 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.
- Si le nom de la police comporte des espaces, je conseille de l'entourer de
guillemets, comme je l'ai fait pour « Arial Black ».
27
B-Mettre en forme le texte
B.1 text-decoration
Voici les différentes valeurs qu'elle peut prendre :
underline : souligné ; p{text-decoration: underline;}
line-through : barré p{text-decoration: line-
; through;}
overline : ligne au- p{text-decoration: overline;}
dessus
;
blink : clignotant p{text-decoration: blink;} Ne fonctionne pas sur
tous les navigateurs
(Internet Explorer et
Google Chrome,
notamment) ;
none : normal (par
défaut).
Ces valeurs ce sont les valeurs de text-decoration-line
On peut ajouter d’autres attributs au text-decoration-line comme text-decoration-color, text-

decoration- style, text-decoration-thickness
Exemple : p{text-decoration: green wavy underline;}
B.2 L'alignement : text-align

Le langage CSS nous permet de faire tous les alignements connus : à gauche,
centré, à droite et justifié. 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 :
h1 { text-align: center; }
p { text-align: justify; }
.signature { text-align: right; }
Remarque : Vous ne pouvez pas modifier l'alignement du texte d'une balise inline,
28
L'alignement ne fonctionne que sur des balises de type block.
29
B.3. L’indentation : text-indent
La propriété text-indent définit la longueur qui doit être laissée avant le début de la
première ligne d'un élément contenant du texte. L'espacement horizontal se fait en
accord avec le bord gauche (ou droit pour les dispositions de droite à gauche) de
l'élément contenant le texte. Les valeur sont :
 Longuer : Absolus par exemple 3mm , 40px, -3em … ou en pourcentage en proportion de la largeur du
bloc englobant exemple 15%
 each-line : L'indentation n'affecte que la première ligne du bloc et chaque ligne située après un saut de
ligne forcé. Cela n'affecte pas les lignes situées après un retour à la ligne automatique (wrap).
 hanging : Inverse les lignes indentées. Toutes les lignes, sauf la première, seront indentées.
 initial : valeur globale utilisé pour définir une propriété CSS sur sa valeur par défaut.
 inherit : valeur globale qui Donne à une propriété la même valeur que celle de l'élément parent.
 unset : valeur globale qui correspond à la combinaison des mots-clés initial et inherit. Autrement dit, s'il
y a de l'héritage, ce mot-clé se comporte comme inherit, sinon, il se comporte comme initial.
Remarque : Les mots-clés globaux (initial, inherit et unset ) peuvent être utilisés
pour n'importe quelle propriété CSS
Activité 8 :
soit le code CSS suivant :
div.a { text-indent: 50px ; }
div.b { text-indent: -2em ; }
div.c { text-indent: 30% ; }
div.d { text-indent: 5em each-line ; }
div.e { text-indent: 5em hanging ; }
div.f { text-indent: 5em hanging each-line ; }
Ecrire une page HTML qui exploite le code CSS ci-dessus.
B.4. La direction : direction
La propriété direction doit être paramétrée afin de correspondre à la direction du texte:

 rtl : Right To Left pour droite à gauche pour les textes en arabe
 ltr : Left To Right pour gauche à droite pour les autres.
Exemple : CSS : .textearabe { direction : rtl ; }
B.5. Les ombre des textes : text-shadow
Cette propriété nécessite au minimum deux valeurs pour fonctionner.

Cependant, dans la grande majorité des cas, nous en utiliserons quatre, dans
l’ordre vu ci-dessous.
Les trois premières valeurs correspondent à des longueurs et le dernier est la
couleur de l’ombre :
30
• 1ère valeur : déplacement horizontal de l’ombre ;
• 2ème valeur : déplacement vertical de l’ombre ;
• 3ème valeur : rayon de propagation (flou gaussien) de l’ombre ;
• 4ème valeur : couleur de l’ombre (accepte les mêmes valeurs que la propriété
« color »).
Exemple :
text-shadow: 1px 1px 2px pink;
html
<!DOCTYPE html>
Css :
<html lang="en">
.miseenforme{
<head>
Résultat
/* : charset="UTF-8">
color
<meta | offset-x | offset-y | blur-radius
*/
<meta name="viewport" content="width=device-width, initial-
B.6-Miniscule
text-shadow: ou #fc0
scale=1.0"> Majuscule
1px :0text-transform
10px;
On utilisera la propriété text-transform
<link rel="stylesheet" pour modifier l’aspect des caractères d’un
href="style.css">
texte (majuscules ou minuscules). Nous pouvons choisir parmi quatre valeurs :
</head>
<body>
• Uppercase : transforme tout le texte en majuscules ;
<p class="miseenforme">bienvenu</p>
• Lowercase
</body> : met tout le texte en minuscules ;
• Capitalize : met uniquement la première lettre de chaque mot en majuscule ;
• None : pas de transformation ;
Exemple : CSS :
<div class="a">hello div.a { text-transform:

world</div> uppercase ; } div.b { text-
<div class="b">Hello transform: lowercase ; }
World</div> div.c { text-transform:
<div class="c">hello capitalize ; }
world</div>
31
B.7-Dépassement de texte (overflow)
Si vous voulez que le texte ne dépasse pas des limites du bloc, il va falloir
utiliser la propriété overflow. Voici les valeurs qu'elle peut accepter :
• visible (par défaut) : si le texte dépasse les limites de taille, il reste visible et
sort volontairement du bloc.
• hidden : si le texte dépasse les limites, il sera tout simplement coupé. On ne
pourra pas voir tout le texte.
• scroll : le texte sera coupé s'il dépasse les limites. Sauf que cette fois, le
navigateur mettra en place des barres de défilement pour qu'on puisse
lire l'ensemble du texte.
• auto : le navigateur décide de mettre ou non des barres de défilement.
Remarque : la propriété word-wrap: break-word permet de forcer la césure

des très longs mots (généralement des adresses un peu longues).
B.8-La propriété : white-space

white-space définit comment représenter les espaces successifs et les retours à la ligne lorsque
les lignes sont plus grandes que la largeur de l'élément. Les valeurs possibles sont :
 Normal : Valeur par défaut. Les espaces successifs sont affichés comme des espaces uniques. Les
retours à la ligne se font en fonction de la largeur de l'élément ou sur les balises <br/>.
 Nowrap : Les espaces successifs sont affichés comme des espaces uniques. Les retours à la ligne
ne se font que si indiqués par une balise br/. Le texte peut donc déborder sur la droite de
l'élément si les lignes sont plus longues que la largeur de ce dernier.
 Pre : Les espaces multiples et les retours à la ligne se font comme ils apparaissent dans le code
HTML. Le texte peut déborder sur la droite de l'élément. Il peut également ne pas commencer
contre le bord gauche si une tabulation ou des espaces sont présents en début de ligne dans le
code HTML.
 Pre-line : Les espaces successifs sont affichés comme des espaces uniques. Les retours à la ligne se
font comme ils apparaissent dans le code HTML. Le texte peut déborder sur la droite de l'élément.
Pre-wrap : Les espaces successifs sont conservés. Les retours à la ligne se

font en fonction de la largeur de l'élément et sur les balises <br/
Ci-dessous un tableau regroupant certains attributs utilisés pour modifier la mise en

forme
32
B. 9/ Couleur du texte color
En anglais, Rouge-Vert-Bleu s'écrit Red -Green-Blue
rgb (0..255,0..255,0..255)
rgba (0..255,0..255,0..255,opacité:0..1)
Code : CSS
h1
{color: aqua;} p
32
{color:
#FFFFFF;}
h2
{color: rgb(240,96,204);}
V- Mettre en forme l’arriere plan
Couleur de fond : background-color

Pour indiquer une couleur de fond, utiliser la propriété CSS background-color
et elle s'utilise de la même manière que la propriété color. Pour indiquer la
couleur de fond de la page web, il faut travailler sur la balise <body>.
Exemple :
body {
background-color: black; /* Le fond de la page sera noir */ color: white; /* Le
texte de la page sera blanc */ }
Images de fond
La propriété permettant d'indiquer une image de fond est
background-image. On doit mettre l'
url("chemin/nom_image.png").
Exemple : background-image: url("neige.png");
La propriété CSS background-attachment permet de « fixer » le fond. Deux

valeurs sont disponibles :
fixed : l'image de fond reste fixe ;
scroll : l'image de fond défile avec le texte (par défaut).
La propriété CSS background-repeat permet de « répéter » le fond.

Quatre valeurs sont disponibles :
• no-repeat : le fond ne sera pas répété. L'image sera donc unique sur la page.
• repeat-x : le fond sera répété uniquement sur la première ligne, horizontalement.
• repeat-y : le fond sera répété uniquement sur la première colonne, verticalement.
• repeat : le fond sera répété en mosaïque (par défaut).
La propriété CSS background-position permet d'indiquer où doit se trouver

l'image de fond . Deux valeurs sont disponibles :
En pixels pour indiquer la position du fond par rapport au coin supérieur
gauche de la page Utiliser les valeurs : top, bottom, left, center, right
Exemple :
33
body {
background-image: url("soleil.png");
background-attachment: fixed; /* Le fond restera fixe*/
background-repeat: no-repeat; /* Le fond ne sera pas répété */
background-position: top right; /* Le fond sera placé en haut à droite */
}
Depuis CSS3, il est possible de donner plusieurs images de fond à un élément.

Pour cela, il suffit de séparer les déclarations par une virgule, comme ceci :
body {
background: url("soleil.png") fixed no-repeat top right, url("neige.png")
fixed; }
La première image de cette liste sera placée par-dessus les autres. Attention donc,
l'ordre de déclaration des images a son importance : si vous inversez le soleil et la
neige dans le code CSS précédent, vous ne verrez plus le soleil !
La transparence opacity
Avec une valeur de 1, l'élément sera totalement opaque : c'est le

comportement par défaut. Avec une valeur de 0, l'élément sera
totalement transparent.
 Il faut donc choisir une valeur comprise entre 0 et 1. Ainsi, avec une valeur de 0.6,
votre élément sera
opaque à 60%… et on verra donc à travers !
Code : CSS p
h1 { background-color: black;
{ background-color: green ; color: color: white;
white; opacity: 0.3;
opacity: 0.5; }
}
34
Le CSS nous offre deux méthodes pour fixer le niveau d’opacité.
Si nous avons utilisé une valeur de type nom de couleur ou
hexadécimale avec la propriété color, nous devrons utiliser la
propriété opacity pour fixer l’opacité.
Si nous avons utilisé une valeur de type RGB avec la propriété color , nous
pouvons également maîtriser l’opacité de notre texte d’une façon plus simple,
en utilisant une valeur de type RGBa. Dans ce cas, il suffit de rajouter une
valeur pour l’opacité de notre texte après les trois valeurs de notre propriété
RGB.
 Créer un fond en dégradé linéaire :

La fonction linear-gradient() permet de créer une image (type
<image>) représentant un dégradé de couleur linéaire.
- Les dégradés linéaires sont définis par un axe : la ligne du dégradé. Chaque point de
cette ligne aura une couleur différente. Les lignes perpendiculaires à la ligne du dégradé
ont chacune une couleur qui est celle du point se situant sur la ligne du dégradé à ce
niveau.
- Les dégradés sont des valeurs de type <image> et non des couleurs type <color>.
- Il est possible de définir des couleurs intermédiaires grâce à des points d'arrêt de
couleurs qui seront situés sur la ligne du dégradé. Cela permet de créer une transition
non linéaire ou d'utiliser plusieurs couleurs sur un seul dégradé.
- La position d'un point d'arrêt peut être définie de façon explicite en utilisant une longueur
(valeur de type
<length>) ou un pourcentage (valeur de type <percentage>).
Exemple : CSS :
Body{
background: linear-gradient(#e66465, #9198e5);}
background: linear-gradient(217deg, rgba(255,0,0,.8),

rgba(255,0,0,0) 70.71%),
linear-gradient(127deg, rgba(0,255,0,.8),
rgba(0,255,0,0) 70.71%),
linear-gradient(336deg, rgba(0,0,255,.8),
rgba(0,0,255,0) 70.71%);
35
<div id="grad1"></div>
#grad1 {
height: 200px;
background-color: red; /* For browsers that do not
support gradients */
This linear gradient starts red at the top,
background-image: linear-gradient(red, yellow);}
transitioning to yellow at the bottom:
<div id="grad1"></div>
#grad1 {
height: 200px;
background-image: linear-gradient(to right,
rgba(255,0,0,0), rgba(255,0,0,1));
}
Constatation :
Le fond de la page sera un dégradé dont la direction est de gauche à droite qui commence avec le rouge jusqu’à
10% de larguer puis un bleu positionné a 30% de la largeur et enfin un orange qui commence à 90% jusqu’a la
fin.
Valeurs :
- Coté ou coint : Les valeurs to top, to bottom, to left et to right correspondent respectivement aux angles 0deg,
180deg, 270deg, 90deg.
- angle : L'angle de la direction du dégradé. L'angle démarre à partir de to top et progresse dans le sens des
aiguilles d'une montre.
- point d’arrêt : Une valeur composée d'une valeur <color> éventuellement suivie d'une position (un pourcentage
ou une longueur <length>) sur l'axe du dégradé.
- indice de couleur : Cette valeur est une indication pour l'emplacement de la couleur moyenne entre les deux
couleurs des points d'arrêt adjacents. Si cette valeur n'est pas utilisée, la moitié de la transition se produit à
équidistance entre les deux points d'arrêt.
Activité :
Créer des dégradés avec les exemples suivants :
CSS :
- background : linear-gradient( 135deg , red , blue );
- background : linear-gradient( 135deg , red , red 60%, blue );
- background : linear-gradient( to right , red , orange , yellow, green , blue , indigo , violet );
- background : linear-gradient( to bottom right , red , rgba( 0 , 0 , 0 , 0) );
36
Tp3
Exercice
1:
En saisissant le code suivant, on constatera la différence entre la présence d’un paragraphe
dans un bloc généré avec <div> et l’existence d’un paragraphe en dehors d’un bloc :
Style.css :
Page.html
body{ :
background-color: lightBlue; }
<!DOCTYPE html>
<html>
div{ color: white;
<head>
background-color: purple;
<meta80%;
width: charset="utf-8">
/*Définit la largeur des div à 80% de leur parent (body
<title>balise avec attribut</title>
ici)*/
<link 0rel="stylesheet"
margin: href="style.css"
auto; /*Permet de centrer les div/>dans leur élément parent
</head>
(body ici)*/
}
<body>:
Résultat
<h1>Un titre de niveau 1</h1>
<p>Un premier paragraphe</p>
<p>Un autre paragraphe avec un </p>
<a href="#" title="Infobulle">lien</a>
<ul>
<li><a href="#">Elément de liste (lien) 1</a></li>
<li>Elément de liste 2</li>
</ul>
</body>
</html>
37
Activité 4 :
EnCorrection
modifiant le
: code des fichiers de l’activité précédente, mettre le texte « autre
élément » et html>
<!DOCTYPE
« troisième
<html> » en gras, le fond jaune et couleur de police noir.
<head>
<meta charset="utf-8">
<title>Exemple div</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div>
<p>Un autre paragraphe</p>
<ul>
<li>Un élément de liste</li>
</ul>
</div>
<li>Un <span>autre élément</span> de liste</li>
<div>
<p>Un <span>troisième</span> paragraphe</p>
<p>Un dernier paragraphe</p>
</div>
</body>
</html>
Style.css :
38
body{ background-color: lightBlue; }
div{ color: white;

background-color:
purple;
width: 80%; /*Définit la largeur des div à 80% de leur parent (body ici)*/
margin: 0 auto; /*Permet de centrer les div dans leur élément parent (body ici)*/
}
span{
font-weight: bold; /*Les textes seront en
gras*/ background-color: yellow; /*Fond
des span jaune*/ color: black; /*Couleur
du texte noire*/
}
Résultat :
Exercice2:
Construisons une section de page à deux colonnes.
L'une des deux colonnes servira pour un menu de
110 pixels de large flottant à gauche, l'autre pour
un contenu placé à 120 pixels du bord gauche
(pour ne pas empiéter sur le menu bien sûr).
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Exemple sélecteur "id"</title>
<link rel="stylesheet" href="Exp_id.css" />
</head>
<body>
<h1>Exemple sélecteur "id"</h1>
<div id="menu">
<ul>
<li>élément 1</li>
</ul>
</div>
39
<div id="contenu">
<p> bla bla bla bla bla bla bla </p>
</div>
</
body>
</
html>
Exp_id.css :
#menu {
background-color:silver;
width:110px;
float:left;
}
#contenu {
margin-left:120px;
}
40
D.Les bordures et les ombres
D.1/ Bordures standard border
 Largeur : mettre une valeur en pixels (comme 2px)

 Couleur : couleur de la bordure
 Type de bordure : peut être un simple trait, ou des pointillés, ou encore des tirets, etc
none : pas de bordure (par défaut)
solid : trait
simple dotted
: pointillés
dashed :
tirets
double : bordure double
groove : en relief
ridge : autre effet relief
inset : effet 3D global enfoncé
D.2 Bordures arrondies border-radius outset : effet 3D global surélevé
Pour obtenir des bordures arrondies, utiliser la propriété border-radius en indiquant la taille
de l'arrondi en pixels.
Exemple : border-radius: 10px
D.3 Couleur de bordure : border-color

La propriété CSS border-color est une propriété raccourcie qui permet de définir la couleur de la bordure
sur les quatre côtés de la boîte de bordure d'un élément.
Chaque côté peut être paramétré individuellement grâce aux propriétés border-top-color, border-right-
color, border-bottom-color et border-left-color.
Activité : CSS: Tester les exemples suivants avec un code de votre choix.
border-color : red ; /* Une valeur pour les quatre côtés */
border-color : red #f015ca ; /* valeur1 : côtés horizontaux , valeur2 : côtés verticaux */
border-color : red yellow green ; /* côté haut, côtés verticaux , côté bas */
border-color: red yellow green blue; /* côté haut, côté droit, côté bas, côté gauche */
D.4 Largeur de bordure : border-width
La propriété CSS border-width est une propriété raccourcie qui définit la largeur de la bordure d'un élément.
Cette propriété raccourcie définit les propriétés détaillées
border-top-width, border-right-width,border-bottom-width, border-left-width.
41
La propriété border-width peut être définie avec une, deux, trois ou quatre valeurs.
 Une valeur : bordure pour les quatre cotés ;

 Deux valeurs : bordure basse et haute et la seconde pour la bordure gauche et droite.
 Trois valeurs : bordure haute, bordure gauche et droite, bordure basse.
 Quatre valeurs : haut, droit, bas et gauche (sens des aiguilles d'une montre).
Une valeur peut être une longueur( en px, em, …) ou un mot-clé (thin , medium, thick )indiquant l'épaisseur de la
bordure.
Activité : CSS : Utiliser les codes css suivants pour tester des bordures différentes :
- border: ridge #ccc; border-width: 6px; #une valeur
- border: solid red; border-width: 2px 10px; deux valeurs
- border: dotted orange; border-width: 0.3em 0 9px; #trois valeurs
- border: solid lightgreen; border-width: thin medium thick 1em; #quatre valeurs
D.6Coins de bordure arrondi : border-radius

La propriété border-radius permet de définir des coins arrondis pour la bordure d'un élément. La courbure de
chaque coin est définie avec un ou deux rayons de courbures qui permettent de définir un arc de cercle ou un arc
d'ellipse.
Cette propriété est une propriété raccourcie qui permet de définir :border-top-left-radius,
border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius.
42
Border-top-left-radius : 20 px; border-top-left-radius: 30px 20px ;
Avoir une bordure arrondie, bleue, en tirets, épaisse de 3 pixels autour de mes titres :
Code : CSS h1
{
border: 3px blue dashed;
border-radius: 10px;
}
On peut aussi faire des bordures En haut, à droite, à gauche, en bas…
border-top : bordure du Exempl p

haut ; border-bottom : e : Code {
bordure du bas ; border- : CSS border-left: 2px solid black;
left : bordure de gauche ; border-right: 2px solid red;
border-right : bordure de }
droite.
Exemples :
43
La balise <hgroup> </hgroup> :
Dans certains cas de figure, on peut avoir un titre composé de plusieurs éléments et pour
chaque élément un niveau de titre différents (de <h1> à <h6>). Néanmoins, on peut
vouloir leur donner un style unique.
Soit le corps d’une page web suivant :
<body> html
<hgroup>
<h1>Bienvenue sur le
WebMag</h1>
<h2>Le magazine du développeur
web</h2>
</hgroup>
<p>Le contenu ...</p>
</body>
On désire donner le même style suivant aux 2 titres : Alignement à droite avec la
police Verdana. Il faut donc définir le code suivant dans le fichier css :
hgroup { text-align : right ; css
font-family : Verdana ; padding-right : 16px ;
border-right : 10px solid lightblue ; }
La balise <hgroup> est utilisée pour grouper des éléments de titre. Elle permet de
regrouper un ensemble de balises <h1> à <h6>, quand un titre a plusieurs niveaux
(sous-titres).
Le résultat :
Résum
- Class
é :et Id sont deux qui ont été créés pour pouvoir appliquer différents styles à des
typ éléments de même
e.
- Class permet également de faire l’inverse et d’appliquer le même style à différents éléments
choisis.
- id doit être unique dans une page.
- On peut mettre ces deux attributs sur n'importe quelle balise, aussi bien titre que paragraphe,
image, etc.
Les éléments div et span ne possèdent aucune valeur sémantique. Nous allons nous en servir pour
Les balises universelles
entourer des blocs de
code et ainsi pouvoir attribuer des styles particuliers à ces blocs.
La balise <div> est de type en bloc( block), donc un objet rectangulaire qui ne peut être
réparti sur plusieurs lignes. Elle possède les attributs margin, padding, width, height.
Elle est précédée et suivie d'un saut de ligne. Exemple :
44
<div>0000000<div>111111</div>222222</div>
La balise <span> est de type en ligne( inline), elle s'inscrit dans le flux du contenu, peut être
répartie sur plusieurs lignes. On ne peut lui spécifier une hauteur ni une largeur ni
l'entourer d'une marge.
Elle peut être placée à l'intérieur d'un paragraphe pour délimiter une partie de celui-ci sans
affecter en soi l'apparence du texte.
45
VI- Les sélecteurs avancés
 Les sélecteurs avancés sont l’une des grandes forces du CSS. En effet, grâce à eux, nous allons pouvoir cibler
du contenu très précisément et assez simplement. Il existe de très nombreux sélecteurs avancés en CSS on
présentera les plus utiles et les plus utilisés dans le tableau suivant :
1. Le sélecteur universel * :
Pour sélectionner les éléments de la page à modifier, on utilise ce qu'on
appelle des sélecteurs. Activité 1 :

En modifiant le code de l’activité précédente, définir une style de police par défaut à
l’ensemble de la page :
couleur Blanc et police Calibri.
*{
font-family :
calibri; color :
white; }
èLe sélecteur étoile * permet de sélectionner tous les éléments HTML d’une page d’un coup,
c’est pourquoi il est
également appelé sélecteur CSS universel.
2. Une balise contenue
dans une autre : Activité 2 :

Saisir le code suivant dans un fichier page1.html :
…
<p>Un autre paragraphe avec un <a
<ul>
<li><a href="#">Elément de liste (lien) 1</a></li>
<li>Elément de liste 2</li>
</ul>
…
Rque
:
Utiliser href="#" permet de créer un lien HTML valide mais qui ne mène nulle
part, qui est "vide". Dans un fichier style.css, saisir le code suivant :
pa{
background-color: yellow;
}
Constatation : seule la balise <a> contenue dans une balise <p> a été modifiée.
è L’écriture suivante :
XY
46
{ (X et Y sont deux balises quelconques.)
}
47
Permet de sélectionner toutes les balises <Y> situées à l'intérieur d'une balise <X>. Notez
qu'il n'y a pas de virgule entre les deux noms de balises.
3. Une balise qui en suit
une autre : Activité 3 :

Dans le code du fichier page1.html de l’activité précédente, déplacer la
balise <a> en dehors de la balise <p> pour obtenir le code suivant :
…
<a href="#">lien</a>
…
Dans le fichier style.css, saisir le code suivant :
p+a{
background-color : yellow;
}
Constatation : seule la balise <a> située après une balise <p> a été modifiée.
è L’écriture suivante :
X+Y
{
}
Permet de sélectionner la première balise <Y> située après une balise <X> grâce au
caractère
+.
4. Une balise qui possède
un attribut : Activité 4 :
Dans le code du fichier page1.html de l’activité précédente, ajouter à la balise <a> un
attribut title
ayant pour valeur "Infobulle" pour obtenir le code suivant :
…
<a href="#" title="Infobulle">lien</a>
…
En utilisant le fichier style.css, on veut cibler les balises <a> ayant un
attribut title pour donner une taille de police au lien de 50 px :
a[title]
{ font-size: 50px; }
èL’écriture suivante :
Balise [Attribut]
{
}
Permet de cibler des balises précises ayant un attribut précis.
48
5. Une balise qui possède un attribut et une valeur exacte :
A[attribut="Valeur"] : une balise, un attribut

a[title="Cliquez ici"]
{
}
Idem, mais l'attribut doit en plus avoir exactement pour valeur
« Cliquez ici ». Exemple : <a href="http://site.com"
title="Cliquez ici">
A[attribut*="Valeur"] : une balise, un attribut et une valeur

a[title*="ici"]
{
}
Idem, l'attribut doit cette fois contenir dans sa valeur le mot « ici » (peu
importe sa position). Exemple : <a href="http://site.com" title="Quelque
part par ici">
Sélecteur Sert a
…
* Sélectionner tous les éléments (sélecteur universel)
A, B Sélectionner deux éléments A et B
AB Sélectionner un élément B contenu dans un élément A
A+B Sélectionner le premier élément B suivant un élément A
A[nom de l’attribut] Sélectionner tous les éléments A possédant un attribut
particulier
A[nom de l’attribut* Sélectionner tous les éléments A possédant un attribut
= particulier avec
« valeur »] une valeur
A[nom de l’attribut = Sélectionner tous les éléments A possédant un attribut
« valeur »] particulier avec
une valeur précise
A:link un élément A qui est la source d'un hyperlien dont la cible
A:visite n'a pas encore été visitée (:link) ou a déjà été visitée
d (:visited)
A:acti un élément A pendant certaines actions de l'usager
ve
A:hov
er
A:focu
s
VII- Positionner et dimensionner un élément
Le modèle des boîtes

Dans une mise en page réalisée en CSS, tous les éléments sont considérés
comme des boîtes. Chacune de ces boîtes est constituée d’un contenu, d’un
49
espacement intérieur, d’une bordure, et d’une marge externe.
Voici les propriétés CSS qui permettent de déterminer les dimensions, la
couleur, le style de chacun de ses constituants :
50
Propriété CSS Ce qui est concerné :
width et height largeur et hauteur du contenu (texte, image, etc.)

padding espacement intérieur, entre le contenu et la bordure
border bordure (ou encadrement)
margin marge externe, espace (transparent) entourant le tout
• width : c'est la largeur du bloc exprimé en pixels (px) ou en pourcentage (%).

• height : c'est la hauteur du bloc exprimé en pixels (px) ou en pourcentage (%).
• padding : indique la taille de la marge intérieure en pixels (px).
• margin : indique la taille de la marge extérieure en pixels (px).
Exemple :
<!DOCTYPE html>
<html> #entete {
<head> margin: 70px;
<link rel="stylesheet" href="style.css"> border: 1px solid
</head> #4CAF50; padding: 10px;
<body>
<h1 id="entete">CSS Margins</h1>
<p>This element has a margin of 70px and

a padding of 10px </p>
51
</body>
</html> }
1. Un bloc peut avoir des dimensions minimales et maximales :

• min-width : largeur minimale ;
• min-height : hauteur minimale ;
• max-width : largeur maximale ;
• max-height : hauteur maximale.
2. Les marges extérieures peuvent avoir des valeurs différentes :
• margin-top : marge extérieure en haut ;
• margin-bottom : marge extérieure en bas ;
• • margin-left : marge extérieure à gauche ;
• margin-right : marge extérieure à droite.
3. Idem pour les marges intérieures !
Exemple :
p{
width: 350px; border: 1px solid black; text-align: justify;
padding: 12px; margin: 50px; /* Marge extérieure de 50px */
}
Exemple :
pRemarque
{ : utiliser la propriété margin: auto pour centrer des
blocs. Pour
width: 350px;cela,/*ilOn
faut obligatoirement
a indiqué donner
une largeur une largeur
(obligatoire) */ au bloc
(avec la propriété
margin: auto; /* On width).
peut donc demander à ce que le bloc soit centré avec auto */ }
52
Le positionnement
Les positionnements absolu, fixe et relatif
La propriété CSS position permet de positionner avec précision des
éléments sur la page. Pour cela, on lui donne une de ces valeurs :
• absolute : positionnement absolu ; il permet de placer un élément

n'importe où sur la page (en haut à gauche, en bas à droite, tout au centre,
etc.).
• fixed : positionnement fixe ; identique au positionnement absolu mais, cette
fois, l'élément reste toujours visible, même si on descend plus bas dans la
page.
• relative : positionnement relatif ; ce positionnement permet d'effectuer
des « ajustements » : l'élément est décalé par rapport à sa position initiale.
Si un bloc est positionné en absolu, il faut indiquer au navigateur où le positionner

sur la page à l'aide des quatre propriétés CSS :
 left : position par rapport à la gauche de la page

 right : position par rapport à la droite de la page
 top : position par rapport au haut de la page ;
 bottom : position par rapport au bas de la page.
Exemple :
element
{ position: absolute;
right: 0px; bottom:
0px; }
Remarque : les éléments positionnés en absolu sont placés par-dessus le reste des
éléments de la page ! Par ailleurs, si vous placez deux éléments en absolu vers le même
endroit, ils risquent de se chevaucher. Dans ce cas, utilisez la propriété z-index pour
indiquer quel élément doit apparaître au dessus des autres. L'élément ayant la valeur de z-
index la plus élevée sera placé par dessus les autres, comme le montre la figure ci-contre.
53
Le positionnement inline-block
En CSS la propriété display permet de transformer n'importe quel élément de la page d'un
type vers un autre et les faire apparaître sous forme de blocs. À ce moment-là, les
éléments vont se positionner les uns en-dessous des autres et il devient possible de
modifier leurs dimensions !
Voici quelques-unes des principales valeurs que peut prendre la propriété display :
Valeur Exemples Description
inline <a>, <em>, <span>… Eléments d'une ligne. Se placent les uns à côté des
autres.
block <p>, <div>, <section>… Eléments en forme de blocs. Se placent les uns
endessous des autres et peuvent être
redimensionnés.
inline-block <select>, <input> Eléments positionnés les uns à côté des autres
(comme les inlines) mais qui peuvent être
redimensionnés (comme les blocs).
none <head> Eléments non affichés.
Les éléments en inline-block nous permet d'utiliser la propriété vertical-align. Cette
propriété permet de modifier l'alignement vertical des éléments. Voici quelques-unes
des valeurs possibles pour cette propriété :
• baseline : aligne de la base de l'élément avec celle de l'élément parent (par défaut) ;
• top : aligne en haut ;
• middle : centre verticalement ;
• bottom : aligne en bas ;
• (valeur en px ou %) : aligne à une certaine distance de la ligne de base (baseline).
NB : les éléments inline-block se positionnent sur une même ligne de base
(appelée baseline), en bas. Exemple Vertical align :
54
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="vertical.css">
Code css
</head> img.a {
<body> vertical-align: baseline;
}
<h1>The vertical-align Property</h1>
img.b {
<h2>vertical-align: baseline (default):</h2> vertical-align: text-top;
<p>An <img class="a" src="sqpurple.gif" }
width="9" height="9"> image with a default
alignment.</p> img.c {
vertical-align: text-
<h2>vertical-align: text-top:</h2> bottom;
<p>An <img class="b" src="sqpurple.gif" }
width="9" height="9"> image with a text-top
alignment.</p> img.d {
vertical-align: sub;
<h2>vertical-align: text-bottom:</h2> }
<p>An <img class="c" src="sqpurple.gif"
width="9" height="9"> image with a text-bottom img.e {
alignment.</p> vertical-align: super;
}
<h2>vertical-align: sub:</h2>
<p>An <img class="d" src="sqpurple.gif"
width="9" height="9"> image with a sub
alignment.</p>
<h2>vertical-align: sup:</h2>
<p>An <img class="e" src="sqpurple.gif"
width="9" height="9"> image with a super
alignment.</p>
</body>
</html>
55
Display :
Activité :ouvrir le dossier display qui se trouve sur le bureau
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="display.css">
</head>
<body>
<h1>The display Property</h1>
<h2>display: inline</h2>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consequat
scelerisque elit sit amet consequat. Aliquam erat volutpat. <span
class="a">Aliquam</span> <span class="a">venenatis</span> gravida nisl sit amet
facilisis. Nullam cursus fermentum velit sed laoreet. </div>
<h2>display: inline-block</h2>
class="b">Aliquam</span> <span class="b">venenatis</span> gravida nisl sit amet
<h2>display: block</h2>
class="c">Aliquam</span> <span class="c">venenatis</span> gravida nisl sit amet
</body>
</html>
56
Code css : span.b {
span.a { display: inline-
display: inline; /* the default for span */ block; width: 100px;
width: height:
100px; 100px;
height: padding:
100px; 5px;
padding: border: 1px solid
5px; blue; background-
border: 1px solid color: yellow;
blue; background- }
color: yellow;
vertical-align:top;
}
span.c {
display:
block; width:
100px;
height:
100px;
padding: 5px;
border: 1px solid blue;
background-color: yellow;
}
Habillage
.imageflottante
{
float:
left;
width:
100px;
}
p{
width
: 400px;
} Rendu :en inspectant
l’image
Le CSS permet de faire flotter un élément autour d'un texte grâce à la propriété CSS
float.
• left : l'élément flottera à gauche.

• right : l'élément flottera à droite.
<p> HTML5 (HyperText Markup Language 5) est la dernière

révision majeure du HTML (format de données conçu pour représenter les pages
web).</p>
57
<p><img src="im1.gif" class="imageflottante" alt=""> Cette version a été finalisée le
28 octobre 2014 .L’HyperText Markup Language (HTML) est le langage de balisage le
plus utilisé pour créer des pages et des applications Web. Il comprend des
éléments et des balises prédéfinis pour étiqueter les éléments de contenu et
Pour créer un site Web interactif, vous devez combiner HTML avec au moins deux
langages frontaux :une « feuille de style en cascade » (CSS) et JavaScript. </p>
Modifier
Ajouter la largeur
une classeduà paragraphe
l’image du contenant l’image
logo du html 5 à 400px
p{
.imageflottante
{ width: 400px;
} float:
Floatleft;
:right modifier la valeur du float avec right
.imageflottante
width:
{
float: right; width: 100px;
}
p{
width: 400px;
}
Float :none :
.imageflottante
{
float: none; width: 100px;
}
p{
width: 400px;
}
Dans cet exemple l’image va s’afficher ou elle apparait dans le texte (float: none;)
58
La propriété clear indique si un élément peut être situé à côté d'éléments flottants qui le
précèdent ou s'il doit être déplacé vers le bas pour être en dessous de ces éléments. La
propriété clear s'applique aux éléments flottants comme aux éléments non-flottants.
Pour ne plus faire flotter l'élément, il faut utiliser la propriété

clear, qui peut prendre ces trois valeurs :
• left : le texte se poursuit en-dessous après un float: left;

• right : le texte se poursuit en-dessous après un float: right;
• both : le texte se poursuit en-dessous, que ce soit après un
float: left; ou après un float: right;.
<p><img src="flash.gif" class="imageflottante" alt="Image flottante" /></p>

<p>Texte écrit à côté de l'image.</p>
<p class="dessous">Texte écrit sous l'image.</p>
.imageflottante
{
float: left;
}
.dessous
{
clear: both;
}
box-shadow
La propriété CSS box-shadow ajoute des ombres à la boîte d'un élément via une liste
d'ombres séparées par des virgules. Une boîte d'ombre est définie avec des décalages
horizontal et vertical par rapport à l'élément, avec des rayons de flou et d'étalement et
avec une couleur.
Exemple :
box-shadow: 10px 5px 5px red;
/* offset-x | offset-y | blur-radius | color */

box-shadow: 10px 5px 5px black;
/* offset-x | offset-y | blur-radius | spread-radius | color */

box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
La propriété box-shadow peut être définie grâce :
59
 À deux, trois ou quatre valeurs de longueur (<length>) :
o Avec deux valeurs, celles-ci sont respectivement considérées comme les
coordonnées de décalage de l'ombre : <offset-x> et <offset-y>
o Si une troisième valeur est fournie, celle-ci correspondra au rayon du flou : <blur-
radius>
o Si une quatrième valeur est fournie, celle-ci correspondra au rayon
d'étalement : <spread- radius>.
 Au mot-clé optionnel inset
 À une valeur de couleur (<color>) optionnelle.
Elle permet de projeter une ombre depuis un élément. Si une border-radius est définie sur
l'élément avec l'ombre, la boîte de l'ombre prendra les mêmes arrondis. L'ordre des couches
(z order) pour plusieurs ombres sera le même que pour les ombres texte (la première ombre
est sur le dessus).
60
Animations
Pour créer une animation CSS on doit :
 créer et nommer l’animation (avec @keyframes)

 attacher cette animation à un élément (avec animation-name)
1. Notre première animation :
On commence par créer une animation :

@keyframes taille {
from {width:
0px;} to {width:
200px;}
On utilise la règle @keyframes et on nomme l’animation taille.
Rque : Il existe quelques règles avec le signe @ (nommées at-rules) qui
permettent d’encapsuler plusieurs règles pour le processeur CSS du navigateur,
par exemple @media, @page…
Ici, on change la largeur (width) de (from) 0px à (to) 200px.
On attache ensuite cette animation à un élément :

div {
animation-name: taille;
height:
100px;
width:
200px;
background-color: blue;
On utilise :
 animation-name : pour désigner l’animation utilisée. (obligatoire)

 animation-duration : pour définir la durée de l’animation (par défaut elle est de
0 seconde). (obligatoire)
2. Plusieurs étapes :
L’intérêt des animations est de pouvoir gérer des étapes intermédiaires. Voici une
nouvelle version de l’animation :
@keyframes taille {
0% {width:
0px;}
61
100% {width: 200px;}
}
On a 3 étapes :
 le départ (0%) avec une largeur de 0px

 la moitié (50%) avec une largeur de 300px
 l’arrivée (100%) avec une largeur de 200px
3. Plusieurs propriétés :
On peut aussi changer plusieurs propriétés :

@keyframes taille {
0% {width: 0px; background-color: red;}
25% {width: 50px; background-color: yellow;}
50% {width: 100px; background-color: green;}
75% {width: 150px; background-color:
pink;}
/* 100% {width: 200px; background-color: blue;} devient
facultatif car l'état 100% est déjà l'état du div "final".*/
4. Démarrage différé :
Dans les exemples ci-dessus, l’animation commence dès le chargement, ce qui

n’est pas toujours souhaitable. On dispose de la propriété animation-delay pour
différer le départ de la durée voulue.
En poursuivant notre exemple ça pourrait donner ce code :
div {
animation-name:
taille; height:
100px;
width: 200px;
background-color:
blue; animation-
duration: 4s;
5. Nombre d’exécutions :
Par défaut, une animation est exécutée une seule fois, si on en veut plus, il faut
utiliser la propriété animation-iteration-count. Toujours avec notre exemple :
div {
animation-name:
taille; height:
100px;
width: 200px;
background-color:
blue; animation-
duration: 4s;
62
Rque :
Si on veut un nombre d’exécutions infini, au lieu de mettre une valeur on
utilisera infinite.
6. Sens de l’animation :
Par défaut une animation va dans le sens normal mais on peut aussi l’obliger à
aller dans l’autre sens en utilisant la propriété animation-direction. On dispose
de deux valeurs :
 reverse : on va dans le sens inverse.

 alternate : on alterne d’un sens à l’autre (dans ce cas évidemment il faut prévoir
au moins deux exécutions).
div {
height:
7. Progression de l’animation
100px; :
width:
200px;
On peut modifier l’animation avec la propriété animation-timing-function et
background-color:
ces valeurs : blue; animation-name:
taille; animation-
 ease : début rapide, puis
duration: ça accélère, puis ça ralentit à la fin (c’est l’effet par
4s;
défaut).
 linear : même vitesse du début à la fin.
 ease-in : début lent.
 ease-out : fin lente.
 ease-in-out : début et fin lents.
8. Le style avant et après l’animation :
Le style avant et après l’animation est défini par défaut par les règles de
l’élément. On a la possibilité de changer ce comportement en utilisant la
propriété animation-fill-mode. On dispose de ces valeurs :
 none : comportement par défaut (en gros ça sert à rien)
63
 forwards : on garde les valeurs calculées lors de la dernière étape
 backwards : on garde les valeurs calculées lors de la première étape
L’interprétation peut être délicate selon les répétitions et sens des
animations. Par exemple avec ce code :

@keyframes taille { 0% {width: 0px ;}
100% {width: 200px ;}
}
div {
height: 100px; width: 200px;
background-color: blue; animation-name: taille; animation-duration: 4s; animation-del
animation-fill-mode: backwards;
}
Au départ et pendant le délai de démarrage, la largeur sera de 0px qui

correspond à la première étape (à 0%) parce qu’on a utilisé la valeur backwards
pour animation-fill-mode.
9. Action sur une animation :
Pour l’instant nous n’avons pas vu de possibilité d’intervention sur une animation.
On dispose de la propriété animation-play-state qui permet une interaction
avec ces valeurs :
 running : valeur par défaut de l’animation en action.

 paused : animation en pause.
Voici le code d’un exemple où on met l’animation en pause en survolant l’élément

:
@keyframes taille {
0% {width: 50px
;}
100% {width: 200px ;}
}
div {
height: 100px;
background-color:
blue; animation-name:
taille; animation-
duration: 4s;
animation-fill-mode: forwards;
animation-iteration-count:
infinite; animation-direction:
alternate; animation-timing-
function: linear;
}
64
On peut faire exactement l’inverse et mettre l’animation en action seulement au
survol :
@keyframes taille {
0% {width:
50px}
100% {width: 200px}
}
div {
height: 100px;
background-color:
blue; animation-name:
taille; animation-
duration: 4s;
animation-fill-mode: forwards;
animation-iteration-count:
infinite; animation-direction:
alternate; animation-timing-
function: linear; animation-play-
state: paused;
}
65
Série Animation
Exercice1 :
HTML : Construisez une page HTML <!DOCTYPE html>
De base <html lang="en">
<head>
content="width=device-width, initial-
scale=1.0">
</head>
<body>
</body>
</html>
HTML : Créez une feuille de style et liez-la à <link rel="stylesheet"

la page HTML href="style.css" type="text/css">
CSS : Personnalisez la police de caractère du body{

texte par défaut. font-family: arial;
}
5-CSS : Adaptez les propriétés de .forme_carré{

la classe forme-carre pour obtenir width:100px;
un carré coloré de 100 pixels de height:
côté.
100px;
background-
color: #03c4EB;
}
HTML : Ajoutez une seconde classe CSS à
l’élément <div class="forme_carré transition-
<div> que vous nommerez transition-1. 1">hello world</div>
Cette méthode qui consiste à utiliser

plusieurs classes permet d’avoir des
6 classes génériques et des classes
spécifiques. 1, transition-2, etc.
CSS : En utilisant la classe transition-
CSS : En utilisant la classe transition- .transition-1 :hover{

1 et la pseudo-classe hover, ajoutez un effet de background-color:
changement de couleur #03c4EB;
7 lorsque l’on survole le carré avec la }
souris.
CSS : En utilisant la classe transition- ………………………………………………………
……..
1, ajoutez un effet de transition lors ………………………………………………………
66
…….
67
du survol du carré avec les critères …………………………………………………
suivants : Durée de la
transition : 2 secondes.
Exercice2 :Créer un texte défilant

<!DOCTYPE html> #h1 {position:
<html lang="en"> relative;
<head> overflow: hidden;
<meta charset="UTF-8"> animation: def 10s infinite
<meta name="viewport" linear; display: inline-block;
content="width=device- width, initial- transition: all 1s ease-in;
scale=1.0">
<title>Document</title> }
<link rel="stylesheet" href="style1.css"> @keyframes
</head> def{ 0%{
<body> transform: translate(0,0)
<h1 id="h1">hello</h1> }
</body> 100%
</html> {
transform: translate(-100%,0)
}
Exercice3 :bouton animé

<!DOCTYPE html> .button {
<html> padding: 15px
<head> 25px; font-size:
<meta name="viewport" 24px; text-align:
content="width=device-width, initial- center; cursor:
scale=1"> pointer; outline:
<link rel="stylesheet" href="style.css"> none; color:
</head> #fff;
<body> background-color:
<h2>Animated Buttons - "Pressed #04AA6D; border: none;
Effect"</h2>
border-radius: 15px;
<button class="button">Click Me</button>
box-shadow: 0 9px
</body></html>
#999;
}
.button:hover {background-color: #3e8e41}
.button:active {
background-color:
#3e8e41; box-shadow: 0
5px #666; transform:
translateY(4px);
}
68
Transitions
Les transitions permettent de passer d'un affichage à un autre pour un même objet, d'un
contenu à un autre, de façon progressive.
1. Syntaxe de la propriété :
 transition-property :
Indique à quelle propriété on fournit une transition. Par défaut all, c’est-à-dire toutes les
propriétés.
Par exemple pour changer la couleur progressivement :
transition-property:color;
 transition-duration :
Définit la durée totale du temps de la transition. Par défaut la valeur est 0, il n'y a aucune
transition.
Exemple, pour une durée d'une demi-seconde :
transition-duration:0.5s;
 transition-timing-function :
Définit la forme de la progression dans le temps, avec des accélérations possibles durant
la transition.
 Liste des valeurs possibles:
- ease: Par défaut, Cela donne un départ et une arrivée ralentis.

- linear: Une fonction linéraire,
- ease-in: Départ ralenti.
- ease-out: Arrivée ralentie.
- ease-in-out: Départ et arrivée ralentis.
 transition-delay
Indique à quel moment démarre la transition (par rapport à l'évènement qui la déclenche).
Par exemple pour un délai de réaction d'une seconde :
transition-delay: 1s;
69
Par défaut le délai est de 0.
2. Transition :
Les quatre propriétés peuvent être réduites à une seule.

On place dans l'ordre : transition-property, transition-duration, transition-timing-
function, transition-delay. Pas de virgules pour séparer les valeurs, comme usuel.
transition: all 2s ease 0;
On peut omettre les dernières valeurs.
3. Utiliser des listes :
On peut avoir une liste de groupes de propriétés séparées par une virgule :
transition: color 0.2s ease 1s, top 2s ease-in 0;
Les propriétés élémentaires comme la forme compacte peuvent comporter des listes
séparées par une virgule :
transition-property:color,top;
transition-duraction:1s, 5s;
Les éléments des listes sont associés par leur position dans la liste. Une durée d'une seconde
est attribuée à la propriété color, une durée de 5 secondes à la propriété top.
4. Exemple :
Page.html :
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="tr2.css">
</head>
<body>
<div>3SI</div>
</body>
</html>
tr2.css :
div{
color: white;
background-color: red;
width: 300px;
height: 300px;
text-align: center;
position: relative;
top: 0;
70
left: 0;
transition:left,border-radius 5s,10s ;
}
div:hover{
left:1000px;
border-radius: 50%;
}
CSS TRANSITIONS CSS ANIMATIONS
 Peut passer de l'état initial à
l'état final, avec des étapes
intermédiaires entre les deux
 Peut uniquement passer de l'état  Peut boucler à l'infini grâce à la
initial à l'état final – aucune propriété animation-iteration-
étape intermédiaire count
 Ne peut s'exécuter qu'une seule fois  Peut être déclenché mais peut
 Nécessite un déclencheur pour également s'exécuter
s'exécuter (comme le survol de la automatiquement
souris)  Peut courir en avant, en marche
 Courez vers l'avant lorsqu'il est arrière ou dans des directions
déclenché et vers l'arrière lorsque alternatives
la gâchette est retirée  Plus difficile à utiliser avec
 Plus facile à utiliser avec JavaScript JavaScript
 Idéal pour créer un simple  Idéal pour créer une série
changement d'un état à un autre complexe de mouvements
Voici un moyen simple de visualiser les principales différences entre les transitions CSS et les
animations :
71
Complément de cours html
View port,blockquote,cite,q,image mappé
Balises HTML 5 relatives à l’adaptation d’une page Web :
Lors des premières utilisations du web sur mobile, les sites étaient très mal adaptés à
l’utilisation avec un téléphone. Les textes étaient illisibles, les images trop petites, des
marges apparaissaient sur les bords de l’écran, etc…
Exemple :
Pour pallier à ce problème, l’une des méthodes est d’utiliser la balise

…………………………………. Cette balise permet de définir le
comportement de mise en page d’un site en rapport avec sa taille
d’écran. Le viewport c’est la zone de fenêtre active de votre
navigateur où sera affiché le contenu d’un site. Cette zone peut
souvent
ne pas avoir les mêmes dimensions que la page,
dans ce cas le navigateur comblera la différence
de dimension en ajoutant des barres de
défilement. Si vous souhaitez optimiser votre site
pour une utilisation sous mobile ou tablettes, vous
devrez
ajouter au minimum la balise « viewport ». Il faut écrire la ligne de
code suivante, entre les balises « head » de votre site, pour utiliser un
viewport classique :
Des balises HTML 5 relatives aux textes et sémantiques :

Créer une page nommée sémantique.html 1- Dans le corps de la page ajouter le code
suivant puis déduire le rôle des balises utilisées
<p>Ma couleur préférée est Del :…………………………………..
<del>bleu</del><ins>bleu rouge ! Ins :……………………………………
</ins></p>
2-On veut afficher dans une page web une phrase avec des espaces comme suit :
Chercher la balise nécessaire pour afficher les espaces

72
……………………………………………………
3- Ecrire le code suivant pour afficher un code source écrit en python :
73
<p>Voici la structure itérative en Python :
………………for i in range(4):
print("i a pour valeur", i)………………….
</p></body>
4- Ajouter la balise nécessaire

pour obtenir cette page :
Les citations :
1- Chercher la balise qui permet d’insérer un bloc de citation (citation longue ) ainsi que
sa source. Exemple :
<...........................> Je n'ai pas d'ordinateur. Je ne méprise pas du tout l'informatique, tous mes
amis écrivent à
l'ordinateur, mais moi j'écris mes articles avec un stylo et mes livres avec un crayon.
C'est la seule névrose que j'ai : je ne dois pas perdre mon crayon. Je sais qu'un livre,
c'est quatre crayons. </...............................................................................................................>
Jean D'Ormesson <………………………>citation informatique et livre </>
2-Chercher la balise qui indique que le texte est une citation en incise (citation courte).
Exemple :
<p>Chaque fois que Kenny est tué, Stan dira < ……… >Oh mon Dieu, ils ont tué Kenny ! </
...........................................................................................................................></p>
Résultat :
Retenons :
 <blockquote>(qui signifie bloc de citation) indique que le texte contenu dans l'élément est
une citation longue.
<q> permet de placer des citations en incise dans une ligne de texte.
 <cite> permet d'indiquer la source de la citation.
Les contacts :
Chercher la balise qui indique des informations de contact pour une personne, un groupe de
personnes ou une organisation.
Exemple :
Image mappée : On veut créer des zones cliquables dans l’image ci-dessus, par exemple
en cliquant sur la zone de l’ordinateur une page « computer.html » qui contient plus
d’informations s’ouvre. En cliquant sur la zone de tasse du café, la page « caffé.html »
s’ouvre.
74
1- Dans le dossier image mappée qui contient une image « workspace.jpg » et les pages
web « café.html », « phone.html » et « computer.html » , créer un fichier nommée
index.html et écrire le code suivant dans la partie body:
<h2>Image Mappée</h2>
<p>Cliquer sur l’ordinateur, le smartphone, ou la tasse de café pour aller à une
nouvelle page et lire plus sur ce sujet:</p>
<img src="workspace.jpg" alt="image source" usemap="#photomap">
<map name="photomap">
<area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.html">
<area shape="circle" coords="337,300,44" alt="Coffee" href="café.html">
</map>
2-Enregistrer et exécuter pour voir le résultat

3- Ajouter la balise nécessaire pour créer une zone cliquable du smartphone vers la page
phone.html
<…………… shape="………………" coords="…………………………………………………" alt="… "

href="…........................">
Remarque : Pour connaître les coordonnées vous pouvez utiliser un
logiciel de traitement d’images comme gimp , photoshop , ect.
L'image est insérée à l'aide de la balise <img>. La seule différence avec les
autres images est que vous devez ajouter un attribut usemap.
La valeur de usemap commence par une dièse # suivie du nom de l'image cliquable et
elle est utilisée pour créer une relation entre l'image et l'image cliquable.
Ensuite , la balise <map> est utilisée pour créer une image cliquable et elle est
liée à l'image à l'aide de l'attribut name requis.
L' attribut name doit avoir la même valeur que l ' attribut
usemap de <img> . Une zone cliquable est définie à l'aide
d'un <area> élément.
Vous devez définir la forme de la zone cliquable, et vous pouvez choisir
l'une de ces valeurs : rect - définit une région rectangulaire
circle - définit une région
circulaire poly - définit une
région polygonale default -
définit toute la région
75
Vous devez également définir des coordonnées pour pouvoir placer la zone cliquable sur
l'image.
Exemple polygone :
Il existe une image nommée frenchfood.jpg dans votre dossier, on veut la rendre
cliquable. Le type de zone cliquable est polygone, ses coordonnées sont : 140 , 121 , 181 ,
116 , 204 , 160 , 204 , 222
,191,270,140,329,85,355,58,352,37,322,40,259,103,161,128,147 La page à ouvrir en
cliquant sur cette zone est « croissant.html » Ajouter le code correspondant dans le fichier
index
<p>Cliquer sur le croissant pour aller à une nouvelle page et
lire plus sur ce sujet:</p>

<……………… src="………………………………" alt="………….." usemap=" " >
<!- - créer l’image cliquable - - >
<……………….. name="..........................">
< ! - - créer la zone cliquable - - >
<………… shape="………………….."...........="140,121,181,116,204,160,204,222,191,270,
140,329,85,355,58,352,37,322,40,259,103,161,128,147" href="…................................">
</……………….>
76
LES FORMULAIRES
Les pages Web construites en HTML permettent de présenter et de diffuser de l’information en

provenance d’un serveur Web vers un navigateur client. Un « dialogue » client-serveur s’instaure
lorsque le client peut à son tour envoyer des informations au serveur, notamment par le biais de
formulaires :
1. recueil d’informations à l’aide de contrôles dans un formulaire HTML,

2. envoi des informations au serveur,
3. traitement des informations par le serveur (à l’aide d’un langage adapté tels que PHP ou
Perl),
4. renvoi éventuel d’informations HTML au client (réponse, accusé de réception, demande de
précision…).
Une page peut comprendre un à plusieurs formulaires dans sa section <body>. Tous les contrôles
du formulaire doivent être insérés entre les balises <form>…</form> :
Balise Description Attributs facultatifs
<form> formulaire contenant name="nomFormulaire"
des contrôles method="get|post" méthode d’envoi des données
au serveur (get par défaut).
action (="URL") adresse du script auquel
les données sont envoyées (pour être traitées).
Un à plusieurs évènements JavaScript peuvent
être spécifiés
Une zone de texte permet de saisir tout type de données. La voici en version « minimale » :
contrôle de formulaire code HTML
Nom : <input type="text" name="nom" />
La zone de texte :
L’attribut name est obligatoire afin de permettre au serveur, chargé de traiter les valeurs, de
récupérer ces valeurs à partir du nom qui leur est attribué (deux contrôles d’un même formulaire ne
peuvent donc pas avoir la même valeur de l’attribut name).
77
Le message issu du placeholder disparaît lorsque le curseur est placé dans la zone (ce qui est
d’emblée le cas ici du fait de l’autofocus) : il apparaît lorsque la zone n’est pas sélectionnée et
qu’aucun contenu n’a été saisi. placeholder, autofocus et required sont des attributs HTML5 pas
encore reconnus par tous les navigateurs.
L’attribut default permet d’indiquer une valeur par défaut dans la zone (que l’arrivée du curseur
dans la zone ne supprime pas) : s’il n’y a pas de ressaisie, c’est cette valeur qui sera transmise (alors
que placeholder n’indique pas une valeur).
La balise <label> a une portée sémantique (repérer les libellés de formulaire), son attribut for se
réfère à l’id de la zone de texte (qui peut porter la même valeur que name) permet d’envoyer le
curseur dans la zone quand on clique sur le libellé.
Présentons les contrôles de formulaire :

contrôle de formulaire code HTML
La zone de champ caché : elle peut servir à <input type="hidden" name="c"
stocker (et transmettre) des valeurs qui n’ont value="caché" />
pas besoin d’être affichées à l’écran (mais
visibles dans le code source).
La zone mot de
Mot de passe : <input type="password"
passe :
name="mp" />
La zone de texte long <textarea type="text" name="lib"
: rows="3" cols="25">valeur par
défaut</textarea>
L’apparence de la zone de texte
multilignes est paramétrable soit à l’aide
des attributs rows (lignes) et cols
(caractères en elle permet de saisir tout
type de données, sur
plusieurs lignes colonnes) ou en CSS
(propriétés width et height).
Les boutons radio : Sexe :
<input type="radio" name="sexe"
value="M" checked /> Homme
ils permettent d’effectuer un seul choix <input type="radio" name="sexe"
(conditionné par une valeur identique pour value="F" /> Femme
l’attribut name) parmi des propositions
L’attribut facultatif checked détermine la
valeur préselectionnée.
Jour(s) de disponibilité :
Les cases <input type="checkbox" name="jour[]"
à cocher : value="1" />
Mercredi
elles permettent d’effectuer un à plusieurs <input type="checkbox" name="jour[]"
choix parmi un nombre limité de propositions value="2" /> Samedi
; les choix effectués peuvent être stockés <input type="checkbox" name="jour[]"
dans un tableau (attribut name ci-contre) ou value="3" /> Dimanche
chaque case peut avoir sa propre valeur de
l’attribut name
La liste déroulante : Statut :
<select name="statut">
<option value="1">Etudiant</option>
78
elle permet d’effectuer un seul choix <option value="2">Professeur</option>
parmi un nombre élevé de propositions </select>
L’attribut value indique la
valeur renvoyée.
La zone de liste : Jour(s) de disponibilité :
<select size="3" multiple
elle permet d’afficher name="jour[]">
d’emblée plusieurs <option value="l">lundi</option>
(selon l’attribut size) propositions. L’attribut <option value="m">mardi</option>
facultatif multiple permet le choix multiple <option value="j">jeudi</option>
(l’attribut name doit alors désigner un <option value="v">vendredi</option>
tableau) </select>
L’attribut facultatif selected de la balise
<option> permettrait de préselectionner un
élément de la liste.
Le fichier joint : PJ : <input type="file" name="pj"
value="fichier" />
il permet de rechercher un fichier à envoyer
en pièce jointe
<input type="reset" value="Annuler" />
Le bouton Annuler :
il réinitialise tous les contrôles du formulaire
à vide ou à leur valeur par défaut
Le bouton Envoyer : <input type="submit" value="Envoyer" />
il envoie les données du formulaire au

serveur pour un traitement par le script
spécifié dans l’attribut action de la
balise
<form>
Les boutons d’envoie et de réinitialisation :<input
type="submit" value="Envoyer"/> ou <button
type=submit>Envoyer</button>
<input type="reset" value="Effacer"/> ou <button type="reset">Effacer</button>
Les zones de saisie enrichies
79
Regroupement de champ du formulaire par thématique
Liste (déroulante ou non) avec groupements affichage par un
d’options extrait du code HTML navigateur
<select size="9" name="jour">
<optgroup label="semaine">
<option value="1">lundi</option>
<option value="2">mardi</option>
<option value="3">mercredi</option>
<option value="4">jeudi</option>
<option value="5" selected>vendredi</option>
</optgroup>
<optgroup label="week end">
<option value="6">samedi</option>
Les libellés de
<option value="7">dimanche</option>
groupes
</optgroup> </select>
(semaine et week-
end) ne sont pas
cliquables
Script HTML Affichage Liste de suggestions
<input type="text" list="serie">
<datalist id="serie"> Ce type de valeur est le
<option value="juillet"> plus souvent alimenté
<option value="août"> </datalist> à partir
Rq : si août est saisi il de valeurs déjà
sera ensuite proposée enregistrées
deux fois (une fois par dans une base
la liste de suggestion, de données.
une fois par la mémoire
cache du navigateur).
extrait du code HTML affichage par un navigateur

<fieldset>
<legend>identité</legend>
<table>
<tr><td><label for="idNom">Nom :</label></td>
<td><input type="text" name="nom" /></td>
</tr>
<tr> <td><label for="idPrenom">Prenom :</label></td>
<td><input type="text" name="prenom" /></td>
</tr> </table>
</fieldset>
Remarque :
Output <output onload="value = 2 + 2"></output>
<progress id="prog" max=100 value=75> 75%</progress>
Progress
L’apparence des messages de validation est personnalisables à l’aide de pseudo-classes CSS : :required |
:optional, :valid | :invalid et :in-range | :out-of-range.
80
Exercice1 :
81
Exercice2 :
Exercice3 :
Créer le formulaire suivant et l’enregistrer sous le nom commande.html:
2- Créer une page html enregistrée sous le nom «

succes.html » contient le paragraphe suivant «
commande passée avec succès » 3-Dans la balise
form du formulaire commande.html ajouter pour
l’attribut « action » la valeur suivante
Cliquer sur le bouton j’achète et regarder le résultat.

4- Relier la page commande avec un fichier css nommé
sform.css qui contient le code ci-dessous . Essayer ligne
par ligne et déduire le rôle de chaque propriété :
77
body { ol li {
font-family: background: #b9cf6a;
Georgia; padding: border-color:
20px; } #e3ebc3; border-
form { style: solid;
background: border-width: 2px;
#9cbc2c; border- border-radius: 5px;
radius: 5px; line-height: 30px;
padding: 20px; list-style: none;
width: 400px; } padding: 5px 10px;
fieldset { margin-bottom:
border: 2px; } button{
none; margin-left:
margin-bottom: 10px; 60px; text-align:
} legend { center; color:
color: #384313; #fff;
font-size: 16px; line-height: 2.5;
font-weight: padding: 0 20px;
bold; border-radius:
padding-bottom: 10px; 10px;
text-shadow: 0 1px 1px background-color: rgba(220, 0, 0,
#c0d576; } button:hover { 1);
background: }
#1e2506; cursor:
pointer;}
Résultat :
78
Correction Exercice3 :html
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style1.css">
</head>
<body>
<form action="succes.html">
<fieldset>
<legend>Votre identité</legend>
<ol>
<li> <label for=nom>Nom Prénom *</label>
<input id=nom name=nom type=text placeholder="Prénom et nom" required>
</li>
<li> <label for=email>Email *</label>
<input id=email name=email type=email placeholder="[email protected]"
required
> </li>
<li> <label for=telephone>Téléphone</label>
<input id=telephone name=telephone type=tel placeholder="par ex:
+21600000000">
</li>
</ol>
</fieldset>
<fieldset>
<legend>Livraison</legend>
<ol>
<li>
<label for=adresse>Adresse *</label>
<textarea id=adresse name=adresse rows=5 required></textarea>
</li>
<li> <label for=pay>ville</label>
<input list=ville id="pay">
<datalist id=ville>
<option value="TUNIS"></option>
<option value="Bizerte"></option>
<option value="Nabeul"></option>
</datalist>
</li>
<li><label for="dat"> Date souhaitée de Livraison</label>
<input type="date" id="dat" name="dat">
</li>
<li><label for="heu"> Heure souhaitée de Livraison </label>
<input type="time" id="heu" name="heu">
</li>
</ol>
</fieldset>
<fieldset>
79
<legend>informations CB</legend>
<ol>
<li> <input id=visa name=type_de_carte type=radio value visa>
<label for=visa>VISA</label>
<input id=amex name=type_de_carte type=radio value=amex>
<label for=amex>AmEx</label>
<input id=mastercard name=type_de_carte type=radio value=mastercard>
<label for=mastercard>Mastercard</label>
</li>
<li> <label for=numero_de_carte>N° de carte</label>
<input id=numero_de_carte name=numero_de_carte type=number>
</li>
<li> <label for=securite>Code sécurité</label>
<input id=securite name=securite type="password">
</li>
</ol>
</fieldset>
<fieldset>
<button type=submit>J'achéte !</button>
<button type="reset">Annuler !</button>
</fieldset>
</form>
</body>
</html>
80
Correction exercice 1
Html :
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="formulaire2.css">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
</head>
<body>
<form action="">
<fieldset id="f1">
<legend id ="id_leg">this is my form</legend>
<table>
<tr>
<td> <label for id="id_email">email</label></td>
<td><input type="email" id="id_email" class="mis"></td>
</tr>
<tr>
<td> <label for id="id_password">password</label></td>
<td><input type="password" id="id_password" class="mis"></td>
</tr>
<tr>
<td> <label for id="id_upload">upload your picture</label></td>
<td><input type="file" id="id_upload"
name="pj" value="fichier" class="mis"></td>
</tr>
<tr>
<td>gender</td>
<td>
<input type="radio" name="gender" value="m" checked class="mis"/>male
<input type="radio" name="gender" value="f" checked class="mis"/>female
</td></tr>
<tr> <td>
<select name="select country">
<option value="1" > UK</option>
<option value="2" > china</option>
</tr></td>
<tr>
<td>hoppy</td>
<td>
<input type="checkbox" name="cricket" value="1" /> cricket
<input type="checkbox" name="football" value="2" /> football
</td>
</tr>
81
<tr>
<td><label for ="id_address" >address</label></td>

<td> <textarea type="texte" name="lib" cols="25" class="mis">valeur
par defaut</textarea>
</td>
</tr>
<tr><td><input type="submit" value="submbit" class="mis">
</td>
</tr>
Code css :
Correction
.mis{ exercice 2
…………………………………………………………………………………………………………………………
background-color:
……………………
orange; border-
…………………………………………………………………………………………………………………………
style:solid; border-
……………………
color: red;
…………………………………………………………………………………………………………………………
}
……………………
#id_leg
…………………………………………………………………………………………………………………………
{
……………………border-style: double;
…………………………………………………………………………………………………………………………
border-color: red;
……………………background-color:
…………………………………………………………………………………………………………………………
orange; font-family:
……………………Verdana; color:
…………………………………………………………………………………………………………………………
yellow;
……………………
}
#f
…………………………………………………………………………………………………………………………
1{
……………………
border-style:
…………………………………………………………………………………………………………………………
…………………… groove; border-
color: red;
…………………………………………………………………………………………………………………………
…………………… border-width:
2px;
…………………………………………………………………………………………………………………………
……………………
…………………………………………………………………………………………………………………………
……………………
…………………………………………………………………………………………………………………………
……………………
…………………………………………………………………………………………………………………………
……………………
82
…………………………………………………………………………………………………………………………
……………………
…………………………………………………………………………………………………………………………
……………………
…………………………………………………………………………………………………………………………
……………………
…………………………………………………………………………………………………………………………
……………………
…………………………………………………………………………………………………………………………
……………………
…………………………………………………………………………………………………………………………
……………………
…………………………………………………………………………………………………………………………
……………………
…………………………………………………………………………………………………………………………
……………………
…………………………………………………………………………………………………………………………
……………………
…………………………………………………………………………………………………………………………
……………………
…………………………………………………………………………………………………………………………
……………………
…………………………………………………………………………………………………………………………
……………………
…………………………………………………………………………………………………………………………
……………………
…………………………………………………………………………………………………………………………
……………………
…………………………………………………………………………………………………………………………
……………………
…………………………………………………………………………………………………………………………
……………………
…………………………………………………………………………………………………………………………
……………………
…………………………………………………………………………………………………………………………
……………………
…………………………………………………………………………………………………………………………
……………………
…………………………………………………………………………………………………………………………
……………………
…………………………………………………………………………………………………………………………
……………………
…………………………………………………………………………………………………………………………
……………………
…………………………………………………………………………………………………………………………
……………………
…………………………………………………………………………………………………………………………
……………………
…………………………………………………………………………………………………………………………
……………………
…………………………………………………………………………………………………………………………
83
……………………
…………………………………………………………………………………………………………………………
……………………
…………………………………………………………………………………………………………………………
……………………
…………………………………………………………………………………………………………………………
……………………
…………………………………………………………………………………………………………………………
……………………
…………………………………………………………………………………………………………………………
……………………
…………………………………………………………………………………………………………………………
……………………
…………………………………………………………………………………………………………………………
……………………
…………………………………………………………………………………………………………………………
……………………
…………………………………………………………………………………………………………………………
……………………
…………………………………………………………………………………………………………………………
……………………
…………………………………………………………………………………………………………………………
……………………
…………………………………………………………………………………………………………………………
……………………
…………………………………………………………………………………………………………………………
……………………
…………………………………………………………………………………………………………………………
……………………
…………………………………………………………………………………………………………………………
……………………
…………………………………………………………………………………………………………………………
……………………
…………………………………………………………………………………………………………………………
……………………
…………………………………………………………………………………………………………………………
……………………
…………………………………………………………………………………………………………………………
……………………
…………………………………………………………………………………………………………………………
……………………
…………………………………………………………………………………………………………………………
……………………
…………………………………………………………………………………………………………………………
……………………
…………………………………………………………………………………………………………………………
……………………
…………………………………………………………………………………………………………………………
……………………
84
…………………………………………………………………………………………………………………………
……………………
…………………………………………………………………………………………………………………………
……………………
…………………………………………………………………………………………………………………………
……………………
…………………………………………………………………………………………………………………………
……………………
…………………………………………………………………………………………………………………………
……………………
…………………………………………………………………………………………………………………………
……………………
…………………………………………………………………………………………………………………………
……………………
…………………………………………………………………………………………………………………………
……………………
…………………………………………………………………………………………………………………………
……………………
…………………………………………………………………………………………………………………………
……………………
…………………………………………………………………………………………………………………………
……………………
…………………………………………………………………………………………………………………………
……………………
…………………………………………………………………………………………………………………………
……………………
…………………………………………………………………………………………………………………………
……………………
…………………………………………………………………………………………………………………………
……………………
…………………………………………………………………………………………………………………………
……………………
…………………………………………………………………………………………………………………………
……………………
…………………………………………………………………………………………………………………………
……………………
…………………………………………………………………………………………………………………………
……………………
85
86
STRUCTURE GENERALE D’UNE PAGE WEB
<header> <footer> <article> <section> <nav> <aside>
En général, une page web est constituée d'un en-tête (tout en haut), de menus de
navigation (en haut ou sur les
côtés), de différentes sections au centre… et d'un pied de page (tout en bas).
Dans ce chapitre, nous allons nous intéresser aux nouvelles balises HTML dédiées à la
structuration du site. Ces balises ont été introduites par HTML5 (elles n'existaient pas
avant) et vont nous permettre de dire : « Ceci est l’en-tête », « Ceci est le menu de
navigation », etc.
Voici un schéma basique d'un découpage d'une page HTML5. Précisons bien qu'il ne
s'agit pas d'une règle fixe à appliquer à tout document mais juste d'un exemple.
Exp. : Remarque : voilà comment ordonner les

éléments.
1. <header> : En-tête
La plupart des sites web possèdent en général un en-tête, appelé header en anglais. On y
trouve le plus souvent
un logo, une bannière, le slogan du site …
87
Ces informations devront être placées à l'intérieur de la
balise <header> : Exp. :
<header>
88

</header>
Rque : L'en-tête peut contenir tout ce que vous voulez : images, liens, textes…
2. <footer> : Pied de page
À l'inverse de l'en-tête, le pied de page se trouve en général tout en bas du

document. On y trouve des informations comme des liens de contact, le nom de l'auteur,
les mentions légales, etc.
Exp. :
<footer>

</footer>
3. <nav> : Principaux liens de navigation
La balise <nav> doit regrouper tous les principaux liens de navigation du site. Vous y
placerez par exemple le menu principal de votre site.
Généralement, le menu est réalisé sous forme de liste à puces à l'intérieur
de la balise <nav>. Exp. :
<nav>
<ul>
<li><a href="index.html">Accueil</a></li>
<li><a href="forum.html">Forum</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
4. <section> : Section de page
La balise <section> sert à regrouper des contenus en fonction de leur thématique. Elle
englobe généralement une portion du contenu au centre de la page.
Exp. :
<section>
<h1>Ma section de page</h1>
<p>Bla bla bla bla</p>
</section>
5. <aside> : Informations complémentaires
La balise <aside> est conçue pour contenir des informations complémentaires au

document que l'on visualise. Ces informations sont généralement placées sur le côté (bien
que ce ne soit pas une obligation).
Exp. :
<aside>

</aside>
89
Remarque. : Il peut y avoir plusieurs blocs <aside> dans la page.
6. <article> : Article indépendant
La balise <article> sert à englober une partie généralement autonome de la page. C'est
une partie de la page qui pourrait ainsi être reprise sur un autre site. C'est le cas par
exemple des actualités (articles de journaux ou de blogs).
Exp. :
<article>
<h1>Mon article</h1>
<p>Bla bla bla bla</p>
</article>
APPLICATION :
On se propose de créer la page web suivante :
body{
background-color:aliceblue;
}
p{
text-align:
justify;
padding:
20px;
}
header{
border: 1px solid
black; margin:
20px;
}
nav{
background-
color:aqua; display:
inline-block; width:
30%;
vertical-align:
top; margin:
0px 20px;
}
section{
background-color: floralwhite;
87
display: inline-block; width: 60%;
margin: 0px 20px; padding: 20px;
}
article{
background-color: antiquewhite; display: inline-block;
width: 65%
}
aside{
background-color:beige; display: inline-block; width: 30%;
float: right;
}
footer{
background-color: darkgray; margin: 20px;
}
Exercice :
Reproduire cette page
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<link rel="stylesheet"
88
<title>
Le site web</title>
</head>
<body>
<header>
<h1>voyageur</h1>
<h2>Carnets de voyage</h2>
</header>
<nav>
<ul>
<li><a href="accueil.html">Accueil</a></li>
<li><a href="blog.html">Blog</a></li>
<li><a href="cv.html">CV</a></li>
</ul>
</nav>
<section>
<aside>
<h1> à propos de l'auteur</h1>
<p>C'est moi le voyageur!Je suis né en
tunisie</p>
</aside>
<article>
<h1>je suis un grand voyageur</h1>
<p>(texte de l'article)</p>
</article>
</section>
<footer>
<p>Copyright voyageur-Tous droits réservés
<a href="mailto:[email protected]">Me
contacter!</a></p>
</footer>
</body>
Code css :
nav{ section
display:inline-block; {
border: 1px solid display:inline-
blue; background- block; border:1px
color: yellow; solid blue;
border:1px solid vertical-align:top;
black; vertical- }
align:top;
}
89
Projet1
Reproduire cette
page
La structure générale de la page myfirstwebsite.html est sous la description suivante
Body
Header nav section
img hgroup btn1 btn2 btn3 article article
h1 h1 h2 p form
img
90
Description du contenu des conteneurs de la page devoir.html:
91
•Le conteneur header contient deux titres de niveau 1 « Site pour la promotion» et
de niveau 2 « de l'huile d'olive tunisienne» et 5 images une image olive animé .gif et 4
images (image1,image2,image3,image4)
•Le conteneur NAV contient 3 boutons
(Accueil, à propos, lien utile).(Accueil et propos sans lien ,lien utile mène à une adresse
d’un site web du lien se trouve dans un fichier texte intitulé lien.
•Le conteneur SECTION contient deux conteneurs article.
Header (une image et 2 titres) couleur de

fond :mauve
titre 1
Nav titre 2
(3 boutons de navigations) coueur de
police :roug
e borure
arrondu :25px
marge
Article gauche :30px
largeur :800px
Article (un formulaire qui inclut un hauteur :30px
(comporte un fieldset lui-même inclut un
paragraph tableau compotant deux labels couleur de fond :jaune
e et deux champs de saisies de
et une type texte....)
image)
Les bouttons du nav

couleur de fond :rgba de valeur
((255, 99, 71, 0.4)
police
d’écriture :cursive
couleur de
police :blanc bordure
arronu :25px
marge intérieur gauche 10px ,droit
20 px
c
92
En survolant le bouton: couleur de fond : rgba de valeur ((255, 199, 71, 0.4)
Les div :contenants les boutons
alignement :centré
taille de la police
d’écriture :16px affichage :en
ligne (affichagedisplay)
bordure arronu :15px
marge intérieur gauche 10px ,droit
20 px
marge extérieur :auto (pour centrer
les
éléments à l’intérieur du parent)
Section:
couleur de fond :mauve
bordure arrondu :15px
couleur de la
bodure :jaune couleur de
fond : mauve
Article: couleur de fond

:oranger largeur :
400px
couleur de la
bodure :jaune aligné : a
gauche
style de la
bordure :continu couleur
de la bordure :
couleur:rouge
hgroup:
alignéement de texte: centré
l’élément legend du fieldset:

fieldset legend:
couleur:bleu
taille d’écriture : 18px
l’élément * devant le champ zone de saisie du Nom

span
couleur:rouge
aligné verticalement : au milieu
93
largeur :300px
hauteur :3000px
Img affichage:enligne
borure arrondu de:15px;
style de la
bordure-:continu (solid)
couleur de la bordure-:or
largeur de la
bordure:3px;
Animation
94
Correction
Html :
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="project1.css">
</head>
<body>
<header class="e1">
<img class="a im0" src="internet-things.jpg" />
<hgroup>
<h1 id="h1">Lycée ouardanine Monastir</h1>
<h1>My first website</h1>
<h2>Internet Of Things</h2>
</hgroup>
</header>
<nav class="n1">
<div class="b1"><input class="btn" type="button" value="Accueil" /></div>
<div class="b1"><input class="btn" type="button" value="A propos"
href="https://www.aliexpress.com/item/32996463686.html" /></div>
<div class="b1"><input class="btn" type="button"
value="Forum" url="project.html" /></div>
</nav>
<section>
<article class="n0">
<p><img src="sensors.png" class="im1" alt="">Qu'est-ce que l'IoT ?
L'Internet of Things (IoT) décrit le
réseau de terminaux physiques, les « objets », qui intègrent
des capteurs, des softwares et d'autres
technologies en vue de se connecter à d'autres terminaux et
systèmes sur Internet et d'échanger des
données avec eux.</p>
</article>
<article class="n1">
<form name="inscription">
<h1>Priére de remplir ce formulaire</h1>
<fieldset>
<legend>Information générale</legend>
<table >
<tr>
<td>
<label for="id_nom" class="l1">Nom</label>
</td>
95
<td>
<input type="text" id="id_nom" placeholder="écrire
votre nom"
required> <span class="et">*</span>
</td>
</tr>
<tr>
<td>
<label for="id_prenom" class="l1">Prénom</label>
</td>
<td>
<input type="text"
id="id_prénom" placeholder="écrire votre prénom">
</td>
</tr>
<tr>
<td>
<label class="l1">votre email</label>
<td> <input type="text" name="email"></td>
</tr>
<tr>
<td>Vous étes</td>
<td>
<input type="radio" name="genre" />Femme
<input type="radio" name="genre" />homme
</td>
</tr>
<tr>
<td><label class="l1">vous habitez</label></td>
<td> <select name="s1">
<optgroup label="sahel">
<option>Mahdia</option>
<option>monastir</option>
<option>sousse</option>
</optgroup>
<optgroup label="Grand tunis">
<option>Ariana</option>
<option>Ben Arous</option>
</optgroup>
</select> </td>
</tr>
<tr>
<td> <label class="l1"> votre commentaire</label></td>
<td><textarea name="commentaire"></textarea></td>
</tr>
</table>
</fieldset>
<input type="submit" name="envoyer" value="Envoyer">
<input type="reset" name="annuler" value="Annuler">
</form>
</article>
96
</section>
</body>
</html>
Css :
#h1 { input.btn
animation: def 10s {color:white;
infinite linear; font-
transition: all 1s ease-in; family:cursive;
} font-size:16px;
@keyframes border-
def{ 0%{ radius:25px;
transform: background-color:rgba(255, 99,
translate(0,0); 71,
} 0.4);
100% }
{ input:hover
transform: {
translate(- 100%,0); background-color:rgba(255, 180,
} 71,
} 0.4);
@keyframes fondu-in-
out { 0% { }
opacity:1; } 25%
{ div.b1
opacity:1; } 75% {float:center;
{ font-
opacity:0; } 100% size:16px;
{ opacity:0; } color:white;
} display:inlin
.im0 { e;
animation-name: fondu-in- margin:auto;
out; animation-duration: width:100px;
5s; animation-iteration- border-radius:15px;
count: padding: 40px 12px 11px
infinite; 40px; margin:auto;
} }
fieldset legend{ section
font- {
size:18px;
color:red; border-
} radius:15px;
label.l1{ width:800px;
border-radius: 10px; height:500px;
border:solid rgb(31, 30, float:left;
30) 0.1px; background:purple;
background-color: border-
beige; padding: 2px; style:dashed;
} border-
hgroup style:solid;
{color:rgb(255, 255, border-
255); text- color:yellow;
}
97
align:center; article.n1
} {width:410px;
header.e1 margin-top:
{margin:30p 15px;
x; float:left;
width:800px background-
; color:orange; border-
background-color:purple; style:dotted; border-
style:solid;
border-color:black;
98
padding: 10px 12px 11px }
10px; border-radius:15px; img.a
color:white; {width:150p
} x;
nav.n1 height:150p
{width:800px; x;
background- position:fixed
color:gold; border- ; left: 100px;
radius:15px; border- top: 35px;
style:dotted;
height:30px;} border-
radius:15px;
article.n0{ border-
font-size: large; style:solid;
font-family: border-
corbel; color:gold;
width:300px; border-
float:left; spacing:3px;
margin-left: }
10px; margin-top: input[type=text],
20px; margin- select { width: 80%;
right: 20px; padding: 12px 20px;
padding-left: margin-left: 10px ;
10px; border: 1px solid
background-color:rgb(241, 237, #ccc; border-radius:
229); 4px; box-sizing:
border- border-box;
style:dotted; }
border-
style:solid; input[type=submit],input[type=rese
border- t] { width: 30%;
color:black; background-color:
box-shadow: 3px 1px 3px 1px #4CAF50; color: white;
rgb(248, 179, 16); padding: 7px
} 10px; margin-
.im1{ left: 10px ;
float: border: none;
right; border-radius:
width: 4px; cursor:
100px; pointer;
height: }
100px; span.et
border:solid 1px {
gold; border-radius: vertical-
5px; margin-right: align:middle;
5px; color:red;
}
}
99
Système d’exploitation
Système d’Exploitation (S.E) :

Un S.E est ensemble de programmes permettant de faire fonctionner et contrôler un
appareil informatique.
On distingue deux principales taches bien distinctes à un S.E :

 Gérer les ressources physiques de l’ordinateur
 Gérer l’interaction avec les utilisateurs (logiciels utilisateur + données)
Dans le secteur informatique, les systèmes d'exploitation les

plus répandus sont Windows (pour les PC), Mac OS (pour les
ordinateurs d'Apple), Linux (pour les PC et les serveurs) et Unix
(pour les serveurs).
Système informatique :
 Un système informatique est un ensemble de matériels
(hardware) et de logiciels (software) destiné à réaliser des taches mettant
en jeu le traitement automatique de l’information
 le Système informatique est constitué de :

 logiciels d’application (log. Utilisateur)
 logiciels de base (SE) :
 les outils et les services (compilateurs, éditeurs, utilitaires)
 le noyau (kernel)
 machine physique
100
Composantes d’un S.E :
Le S.E est constitué généralement
de quelques logiciels pour assurer
ses fonctionnalités. On distingue
généralement les éléments
suivants :
 Le noyau (kernel) : représente les

fonctionnalités fondamentales du SE
telles que la gestion des processus
(programmes en cours d’exécution),
des fichiers, des entrées sorties
principales…
 L’interpréteur de commandes (Shell) : analyse les commandes de l’utilisateur

(texte, clic, combinaison de touches…) afin d’exécuter les actions demandées
(lancer une application, copier un fichier…) Un interpréteur peut être en mode texte
ou en mode graphique
 Les utilitaires : un ensemble de programmes nécessaires à l’exploitation de base

de l’ordinateur (éditeur de texte, visualiseur d’images, lecteur multimédia…) et au
développement et à la mise au point des
pgms utilisateurs (compilateurs…)
 Le système de fichiers (file system ou FS) : permet de gérer les fichiers du

système (créer, copier,
déplacer, renommer, supprimer…) .Dans le cas des systèmes multi_utilisateurs le
système de fichiers doit assurer la confidentialité des fichiers (les fichiers d’un
utilisateur donné sont interdits en accès pour les autres utilisateurs)
Démarrage de l’ordinateur :
1. Le BIOS
Le BIOS (Basic Input/Output System) est un ensemble de programmes enregistrés
dans la ROM .Il contient les programmes et les pilotes de démarrage utilises pour
permettre a l'ordinateur de démarrer. Il intègre aussi des programmes de diagnostic
et d'autotest
2. L’autotest
Lors de démarrage de l'ordinateur le BIOS va commencer par effectuer des tests
pour vérifier la configuration et le fonctionnement de l’ordinateur .Cette
opération est effectuée par un programme spécifique dit POST (Power On Self
Test).
3. Le SETUP
Le SETUP est un ensemble de procédures permettant de configurer l'ordinateur
selon ses caractéristiques matérielles (type des disques, mot de passe, date et
heure système, choix de la
séquence de démarrage…). Toutes ces informations sont enregistrées dans la
mémoire RAMCMOS. L'accès au setup se fait grâce au BIOS.
4. Chargement du système
Une fois la phase d'autotest est accomplie avec succès, le BIOS lance le chargement
101
du SE dans la RAM à travers le Système d'amorçage (démarrage) appelé
BOOTSTRAP (chargeur d'amorce)
102
Fonctions de base d’un système d’exploitation:
Le S.E offre plusieurs fonctionnalités:
 La gestion des processus
 La gestion de la mémoire centrale
 La gestion des fichiers
 La gestion des périphériques
 La gestion des entrées/sorties (dialogue Homme/Machine)
Ces fonctionnalités peuvent être structurées sous la forme de plusieurs couches
superposes allant de la plus proche du matériel vers la plus proche de l'utilisateur
L'interpréteur de commandes transfère les commandes de l'utilisateur aux différents
composants du SE
I- Information système :
Pour savoir des informations sur votre système :
Lancer l’interpréteur de commande.
Cliquer sur démarrer + Exécuter et taper la commande «
msinfo32) + Ok. Compléter ce tableau :
Nom du système d’exploitation
Version
Editeur
Répertoire système
Périphérique de démarrage
103
Types de SE
On distingue trois types de SE:
systèmes d’exploitation pour PC (Windows,
Linux, MAC OS). systèmes d’exploitation pour
Mobiles (Android, IOS).
systèmes d’exploitation embarqués (WatchOS, TVOS, QNX, etc.)
Exemples:
 Microsoft:
…………………… ……………… ………… ……………… ………… ………………

……… …… … … … …….
Le prochain système d'exploitation de Microsoft ……………………………………………

Quel est le système d’exploitation pour les smart phones………………………………………..
 Apple:
………………………………………… …………………………………………………
………….. ……………
Le prochain système d'exploitation Mac?...................................................

Quel est le système d’exploitation pour les smart phones………………………………………..
 Linux: est un système d'exploitation libre, c'est à dire que vous êtes libre de
l'utiliser, le modifier et le re- distribuer (ce qui n'est pas le cas de Windows ou MacOS X).
étant gratuit, différentes sociétés l'on reprit et complété afin de distribuer un système
d'exploitation à leur goût. C'est ce qu'on appelle les distributions.
Exemple de distributions:
……………………… ……………………… ………………………… ……………………
104
Le prochain système d'exploitation de la distribution Linux Mint?.............................
Quel est le système d’exploitation pour les smart phones ………………………………………..
105
Question :
Quel est le système d’exploitation de votre
ordinateur……………………………………………………………
Comment le savoir ?
…………………………………………………………………………………………………………………………
……
II- Les composants de l’ordinateur :

L’ordinateur se compose d’une unité centrale et quelques périphériques externes. L’unité
centrale est un
boitier, qui contient les éléments électroniques (Les composants internes).
Les composants externes (ou périphériques) sont connectés à l’unité centrale
(figure ci-dessous) par des câbles ou sans.
1) L’unité centrale:
C’est l’élément le plus important de l’ordinateur. Il reçoit les données à partir des…........,
les traitent, puis il envoie les résultats au ……………… ………………….
A l’intérieur de l’unité centrale il y’ a ……………………………………………..
Activité 10:
Complete la figure ci-dessous par les mots : la carte mère, l’unité centrale, la mémoire
vive(RAM), le
microprocesseur
106
La carte mère: est le............................principal c’est en quelque sorte la mère sur elle
,tous les
composants de l’ordinateur sont connectés par exemple le ………………………………..et les
autres mémoires
(RAM et ROM) et les périphériques.
Le microprocesseur: (ou unité centrale de traitement UCT) en anglais CPU est un

composant qui accepte
……………….…….. comme des donnée en entrée, les traitent en utilisant des instructions
qui sont enregistrées dans son mémoire, puis donne les résultats comme des sorties.
La mémoire vive: (RAM) : Random-Access Memory : c’est un composant
électronique qui enregistre les données et les instructions pour exécuter un
……………. .c’est une mémoire....................................................................................car son
contenu
s’efface lors de la mise hors tension du système.
La mémoire morte :(ROM) : Read-Only Memory : est une
mémoire en lecture seulement Ce type de mémoire permet
notamment de conserver les données nécessaires au
démarrage de l'ordinateur. C’est une mémoire non volatile .
Manipulation des fonctionnalités d’un SE: TP1

Problématique 1:
Cas 1: On veut tester des nouveaux systèmes d’exploitation sur notre pc mais on ne peut
pas partitionner le
disque dur.
Cas 2 : On a besoin d’utiliser un logiciel mais il ne peut pas tourner sur le système
d’exploitation de notre
machine .
Proposer une solution ,
Solution : Installer une machine virtuelle
Une machine virtuelle ou VM est un environnement virtuel qui fonctionne sur une machine
physique.
Elle exécute son propre système d’exploitation et bénéficie des mêmes équipement
qu’une machine physique
: CPU, mémoire RAM, disque dur et carte réseau.
Activité
Installer la machine virtuelle VMWare,
puis tester le système d’exploitation libre Ubunto de Linux
Problématique 2:
107
Votre ordinateur se bloque souvent, alors vous fermez toutes les applications et vous le
redémarrez , mais le problème persiste.
Que faut-il faire pour rétablir le bon état de système?

Solution :
Sauvegarder le système en créant :
- une image de
disque Ou bien
- un point de restauration
108
Puis le restaurer.
Problématique 3:
Un membre de ta famille utilise votre pc , oups , il a modifié par erreur l’un de tes
fichiers.
Proposer une solution pour sécuriser vos documents.
Solution
Gérer des comptes utilisateurs.
Sécuriser vos fichiers en attribuant des droits d’accès aux utilisateurs
Chaque utilisateur peut avoir un compte identifié par un nom d'utilisateur et un mot de
passe.
Il existe trois types de compte:
Compte administrateur: utilisateur ayant tous droits.
Compte limité: droits limités.
Compte invité: compte occasionnel
Activité: Créer un compte utilisateur limité pour les autres utilisateurs. Chercher
comment protéger vos fichiers en attribuant les droits d’accès à ce compte
Problématique 4:
Votre pc est infecté par un virus ,
Proposer une solution pour le réparer et le protéger
109
Utiliser des logiciels de protection(antivirus).
Activité:
Installer un antivirus ,puis le- mettre à jour
III- Systèmes d’exploitation pour mobile

L'Emulateur Android aide à créer un Appareil Virtuel Android (ADV) sur votre PC.
Les meilleurs émulateurs d’android sur pc et mac
BlueStacks.LDPlayer.Android Studio.ARChon.Bliss OS.
GameLoop.
Genymotion.
MeMU.
Activité
Installer un émulateur
Manipuler le système Android ( installer et désinstaller des applications , gérer des
fichiers et des dossiers, gérer des comptes , créer des captures d’écran,
Gestion des processus et de la mémoire

centrale:
Gestion des processus:
Mise en situation:
Un programme est une suite d'instructions stockée dans un fichier et pour
l'exécuter le SE doit disposer des ressources nécessaires (mémoire, processeur…)
pour créer une entité dynamique appelée processus, donc un processus est un
programme. en cours d'exécution.
Activité 1 : Gestionnaire des tâches:
 il y a plusieurs processus qui sont chargés en mémoire simultanément (a cause du
SE multi-tâches)
 le SE s'occupe de donner à chaque processus la quantité de mémoire suffisante
 les processus sont de type système (lancés automatiquement) ou utilisateur ou
autres
Activité 2 : ouverture et fermeture des processus:

 le nouveau processus consommera de la mémoire d’où la taille de la mémoire
utilisée augmentera
 on pourra terminer un processus par les manières ordinaires (a savoir il en
existe 3) ou on pourra l'interrompre d'une manière forcée
Principe de fonctionnement de la gestion des processus:
La gestion des processus repose sur deux éléments:
Un allocateur qui repartit (distribue) le temps processeur entre les différents
processus
Un planificateur qui détermine le processus à activer suivant le contexte (demande
du système ou de
l’utilisateur)
La gestion des processus se résume essentiellement dans deux procédures:
110
La gestion des interruptions : les interruptions sont des signaux envoyés par
le matériel destinés au logiciel pour signaler un événement brusque (arrêt
d'impression dut au manque du papier, disque
saturé…)
La gestion du multitâche:
 Simuler la simultanéité des processus
 Gérer les accès simultanés (en même temps) aux ressources
111
Gestion des logiciels (Installation et désinstallation,…):
Installation des logiciels:
Pour utiliser un logiciel, généralement il faut l'installer sur le disque dur (sauf qques
exceptions). Avant d'installer un logiciel, il faut s'assurer du type de la copie:
 Un logiciel libre (open source)
 Un logiciel gratuit (freeware)
 Un logiciel partagé (shareware)
 Une version d'essai (démo)
 Un logiciel commercial (payant), où il faut avoir un certificat d'authentification
avec lequel il faut
avoir un numéro de série ou un code ou autre chose…
La majorité des logiciels utilisent un assistant qui facilite beaucoup l'installation
du logiciel qui suit les étapes suivantes:
L'utilisateur doit remplir un formulaire d'authentification contenant
qques informations personnelles et un numéro de série pour les logiciels
payants
En deuxième lieu, l'assistant doit décompresser les fichiers d'installation (s'ils
sont compressés) avant de les copier sur le disque dur
Une fois l'installation (la copie des fichiers) est terminée, l'application est
prête à être utilisée sauf qques logiciels qui demande de redémarrer la machine
Mise à jour d'un logiciel:
La mise à jour d'un logiciel, généralement réalisée par un assistant, permet de
modifier ou d'ajouter certaines fonctionnalités d'un logiciel en changeant certains
fichiers par des versions plus récentes. La mise à jour d'un logiciel est fournie dans
la plus part des cas à travers le réseau Internet et dans des cas moins fréquents
sur une mémoire de masse (cd, disquette, flash disc…)
Désinstallation des logiciels:
Pour bien gérer l'espace disque d'une machine, il faut désinstaller tout logiciel
inutile (mal installé, défaut de fonctionnement=>instabilité du système) ou non
utilisé (a cause par exemple de l'installation d'une nouvelle version)
La désinstallation d'un logiciel doit être réalisée correctement (la suppression
du répertoire d'installation ou du raccourci est insuffisante) en utilisant l'assistant
de désinstallation fournit avec le logiciel sinon avec un logiciel approprié pour la
désinstallation des logiciels malveillants.
Administration
SYSTÈME
Introduction:
Pour que le système informatique (hotes, périphériques, équipements réseaux…)
fonctionne correctement, on a besoin de ce qu'on appelle "administrateur système"
qui est une personne chargée de gérer un système informatique, qui en est le
responsable, que ce soit au niveau de sa sécurité, de son fonctionnement, de son
exploitation ou de son évolution
L'administrateur système a pour rôle:
112
Maintenir le bon fonctionnement du parc informatique
Résoudre tous types "d'incidents informatique" (imprimante en panne, pc
infecté par un virus…) Gérer les utilisateurs (création, limitations,
suppression…)
Gérer les systèmes de fichiers
113
Surveiller la sécurité du
système Bien configurer
les machines
Installer et mettre a jour les logiciels
Planifier l'évolution du parc (ajout d'une hote, extension du réseau…)
Choisir les nouveaux équipements
Guider et conseiller les utilisateurs…
Installation d'un système d'exploitation:

Les nouveaux systèmes d'exploitation offrent des assistants qui facilitent l'installation
du système au contraire des "vieux" systèmes (l'installation de win95 demande 25
disquettes et la recherche des pilotes avec la difficulté d'accès a Internet)
En général l'opération d'installation d'un SE passe
par 4 étapes: Préparation des disques
Saisie des informations et des paramètres
Installation des périphériques et configuration
du réseau Mise en place du menu principal
Dans la suite de notre cours on va prendre l'exemple de l'installation de Win 7:

L'installation commence par l'amorçage (démarrage) du système à l'aide du
CD/USB de Win7, après avoir faire quelques tests et que l'utilisateur confirme le
contrat de licence on aura les étapes suivantes:
1. partitionnement des disques: L'installation peut se faire une partition existante
ou sur une nouvelle partition qu'on la crée sur le champ
2. formatage des disques : Si la partition est encore vierge ou qu'elle possède des
fichiers que l'on veut supprimer on doit la formater on choisissant le système des
fichiers et le type de formatage (rapide ou complet)
3. copie des fichiers : Une fois les disques sont prêts, l'assistant commence la copie
des fichiers système sur la partition choisie
4. installation et configuration des périphériques : Dans cette étape l'utilisateur
n'intervient pas, l'assistant
installe les périphériques (drivers…), les utilitaires, les éléments du menu démarrer…
L'utilisateur doit définir quelques paramètres tel que la date et l'heure et les langues
…
5. activation des paramètres: L'installation est terminée, le système doit configurer
le système selon les paramètres choisis par l'utilisateur
6. démarrage du système: Le système est bien installé et la machine est prête à
l'exploitation
Remarques:
il faut s'assurer de la récupération des documents personnels avant le formatage
il est parfois d'installer les drivers du matériel non installé automatiquement par le
système
Paramétrage d'un système d'exploitation:

Le paramétrage du système se fait à l'aide du panneau de configuration
Pour afficher le panneau de configuration:
114
 Cliquer sur le bouton "démarrer"
 Choisir la commande "paramètres"
 Choisir "panneau de configuration"
115
Pour installer une nouvelle police:
 Activer le panneau de configuration
 Choisir le paramètre "police"
 Choisir la commande "installer une nouvelle police" du menu
"fichier"
 Sélectionner l'emplacement de la police et valider
Pour configurer la souris:

 Choisir le paramètre "souris"
 Effectuer les modifications nécessaires à l'aide des
différents onglets et valider
Pour modifier les langues:
 Cliquer sur "paramètres régionales et linguistiques"
 Choisir l'onglet "langue"
 Choisir le bouton "ajouter"
 Sélectionner une langue parmi la liste et valider
Pour modifier la date et l'heure système:

 Choisir le paramètre "date et heure"
 Mettre a jour la date et l'heure système et valider
Pour changer la résolution ou le fond d'écran:

 Choisir le paramètre "affichage"
 Choisir l'onglet "bureau"
 Choisir l'image de fond et la résolution souhaitée et valider
116
Gestion des comptes:
Quand un ordinateur est utilisé par plusieurs personnes, il est souvent
nécessaire de faire la distinction entre les utilisateurs, pour que leurs
fichiers privés le restent, par exemple Cependant, un utilisateur est plus
qu'un nom. Un compte comprend tous les fichiers, ressources, et
informations qui appartiennent à un utilisateur
Types des comptes utilisateur:
a. administrateur:
Il sert à gérer la configuration globale de l'ordinateur. Il peut effectuer toutes
les tâches tel que la gestion des utilisateurs (création, suppression,
modification du type et de mot de passé…) et l'installation des logiciels…
b. standard:
dit encore compte limité, ce compte est destiné aux utilisateurs qui ne
sont pas autorisés à modifier la plupart des paramètres de l'ordinateur,
un compte limité:
 ne peut pas installer un logiciel ou un périphérique que si il est permit par
l'administrateur mais peut accéder aux applications déjà installées
 peut créer, modifier ou supprimer le mot de passe de son compte et non
pas son nom ou le type de son compte
c. invité:
Il permet aux utilisateurs occasionnels d’ouvrir une session et d’accéder à
l’ordinateur local sans
passer par un mot de passe. Un invité:
 ne peut pas installer un logiciel ou un périphérique mais peut accéder
aux applications déjà installées
 ne peut pas avoir l'accès à la modification des utilisateurs
Manipulation des comptes utilisateur:
d. manipulation des comptes sous Windows:
La manipulation des comptes est une opération strictement réservée aux
administrateurs
i) création d'un compte:
o Dans le Panneau de configuration, ouvrez le

composant Comptes d'utilisateurs
o Dans la zone Choisir une tâche, cliquez sur Créer un
nouveau compte
o Tapez un nom pour le nouveau compte, puis cliquez sur
Suivant
o Cliquez sur Administrateur de l'ordinateur ou sur Limité
puis cliquez sur
Créer un compte
ii) modification et suppression d'un compte:
o Dans le Panneau de configuration, ouvrez le

composant Comptes d'utilisateurs
o Cliquer sur le compte qu'on souhaite modifier
o Effectuer la modification nécessaire (changer le nom, créer
ou modifier le mot de passe, changer l'image, modifier son
type ou le supprimer) et valider
iii) modification des propriétés d'un compte

117
o Dans le Panneau de configuration, choisir
l'icône "gestion de l'ordinateur" de l'option
"outils d'administration"
o Dans l'arborescence qui s'affiche, choisir "outils
système=>utilisateurs et groupes
locaux=>utilisateurs"
118
o Double cliquer sur l'utilisateur souhaité et effectuer les
opérations nécessaires (désactiver ou verrouiller le
compte, interdire ou imposer le changement du mot de
passe,…)
iv) restriction d'horaires d'utilisation de l'ordinateur:
o pour des raisons de sécurité on pourra restreindre

(limiter) les horaires d'accès a la machine pour un
utilisateur quelconque en utilisant la commande "net
user"
o choisir l'invite de commandes en tapant "cmd" dans la
rubrique
"exécuter" du menu démarrer
o taper la syntaxe suivante:
net user nom_utilisateur jours et heures autorisés
nom_utilisateur:le nom de l'utilisateur qu'on souhaite restreindre l'utilisation de

l'ordinateur
jours et heures autorisés:les valeurs de restriction
exemple:
[jours et heures Descripti
autorisés] on
Lundi,9h00-20h00;Mardi,9h00- L'utilisateur peut uniquement ouvrir une session
21h00; Jeudi,10h00-18h00 le lundi entre 9h00 et 20h00, le Mardi entre 9h00
et 21h00 et le Jeudi entre 10h00 et 18h00.
Lundi-Vendredi,9h00- L'utilisateur peut ouvrir une session du Lundi au
20h00; Samedi- Vendredi entre 9h00 et 20h00 et le Samedi et le
Dimanche,8h00-23h00 Dimanche entre 8h00
et 23h00.
All L'utilisateur peut ouvrir une session sans aucune
restriction.
Utilisez cette valeur pour autoriser de nouveau un
utilisateur à ouvrir une session à n'importe quel
moment.
Remarques:
o Les valeurs de jour peuvent être écrites en toutes lettres : Lundi, Mardi, … ou bien
représentées
par des abréviations : L, Ma, Me, J, V, S, D.
o Si l'utilisateur essaie d'ouvrir une session en dehors des horaires autorisés, il
ne pourra pas aller plus loin.
119
o Si un utilisateur a ouvert une session et qu'il a dépassé sa limite, il restera
connecté sauf si l'administrateur a forcé la déconnexion des utilisateurs
e. manipulation des comptes sous linux:
i) mode graphique:
120
Pour la gestion des utilisateurs, il faut utiliser l'utilitaire "YAST":
o cliquer sur le menu KDE
o choisir la commande "YAST" du menu "système"
o effectuer les opérations nécessaires et valider
ii) mode textuel:
Commande description
useradd <login> Création d'un compte
Passwd <login> Création d'un mot de passe pour un compte
<pass>
<pass>
Usermod <login> Modifier un utilisateur appartenant à plusieurs groupes
userdel <login> Suppression d'un compte
Profils utilisateurs:
f. définition:
Un profil utilisateur (ou encore modèle utilisateur) est un ensemble de
données qui concernent l'utilisateur (affichage, paramètres de connexion
réseau, raccourcis du bureau…)
g. sauvegarde d'un profil:
 Système=>options avancés=>profil des utilisateurs=>paramètres
 Choisir le profil désiré
 Cliquer sur le bouton "copier dans"
 Taper un nom pour le profil, choisir une destination puis valider
h. attribution d'un profil prédéfini a un utilisateur:
 Choisir "gestion de l'ordinateur" de l'option "outils d'administration"
 Développer le dossier "utilisateurs et groupes locaux" pour sélectionner "utilisateurs"
 Sélectionner le compte désiré
 Taper le chemin d'accès du profil à attribuer et valider
Outils système et
sécurité:
introduction:
en général, un SE est fourni avec un ensemble d'utilitaires appelés outils
système(chdisk,
scandisk…) qui ont pour rôle de:
oentretenir les ressources du système
odétecter et corriger les failles de
fonctionnement ooptimiser l'utilisation des
ressources du système osécuriser le système
contre les différents types de menace facteurs
de défaillance des disques durs:
Panne électronique Panne mécanique Panne logique
Causes surtension Usure des composants Arrêt brutal de
l'ordinateur
Instabilité de
quelques logiciels
Fréquences rare Dépend de la marque du Fréquente
DD
conséquences Court_circuit de la Endommagement des Instabilité du
carte Composants têtes de lecture système Lenteur
grillés Arrêt de Arrêt de l'ordinateur d'accès aux
l'ordinateur données
121
Plantage des
applications
Remarques:
 Les pannes mécaniques sont rarement récupérables et nécessitent l'intervention
d'un expert avec un matériel adéquat
122
 Les pannes logiques sont souvent récupérables facilement moyennant des
utilitaires de gestion de disques
Entretien et maintenance des disques durs:
i. signalisation des erreurs:
Le SE détecte automatiquement les clusters défectueux pour interdire leur utilisation
j. nettoyage des disques durs:
Nettoyer le disque dur signifie la suppression de tous les éléments non utilisés qui
s'accumulent avec le temps
La plupart de ces fichiers sont des fichiers temporaires, installés sur le disque dur
par le SE lui-même ou par quelques applications mais qui ne sont pas supprimés
automatiquement par la suite
k. défragmentation:
Défragmenter son disque dur signifie bien organiser ses données.
Lorsqu'un fichier est supprimé du disque dur il laisse de l'espace qui
est non utilisé
La défragmentation consiste a "rassembler" l'espace vide pour gagner
en terme d'espace disque et de performance du système
Sauvegarde des données:
"Le matériel est fiable de façon
indéterminée. Le logiciel n'est pas
fiable de façon déterminée.
Les gens ne sont pas fiables de façon indéterminée.
La nature est fiable de façon déterminée."
Les données ont de la valeur. Les recréer coûte du temps, du travail, et de l'argent…
Quelquefois, elles ne
peuvent même pas être recrées, par exemple si elles étaient le résultat de quelque
expérimentation. Puisqu'elles représentent un investissement, on doit les protéger et
faire en sorte d'éviter de les perdre.
Il y a quatre raisons de base pour lesquelles on peut perdre ses données :

pannes matérielles, erreurs logicielles, actions humaines, ou désastres
naturels.
Les sauvegardes sont un moyen de protéger les investissements en données.

En ayant plusieurs copies de ces données, si l'une est détruite, cela ne pose
pas de problème (le coût est simplement celui de la récupération des
données perdues à partir de la sauvegarde).
a. Sauvegarde des fichiers et des paramètres:
 Activer "utilitaire de sauvegarde" a partir du menu "outils système" du menu

"accessoires"
 Choisir l'option "sauvegarder les fichiers et les paramètres"
 Choisir les documents et les paramètres à sauvegarder
 Choisir l'emplacement de sauvegarde et le nom du fichier
destination Tous les fichiers et les paramètres sont
enregistrés dans le même fichier
123
b. Restauration des fichiers et des paramètres:
 Activer "utilitaire de sauvegarde" a partir du menu "outils système" du menu

"accessoires"
 Choisir l'option "restaurer les fichiers et les paramètres"
 Sélectionner les éléments à restaurer puis valider
c. Sauvegarde et restauration du système:
124
Cette fonction permet de remettre votre ordinateur dans un état de travail
précédent correct, d'annuler les modifications néfastes et de restaurer les
performances et les paramètres de votre ordinateur, La Restauration système
vous permet de rétablir une configuration antérieure de votre système
Cet utilitaire est disponible en cliquant sur "Démarrer", "Tous les programmes",
"Accessoires", "Outils système" et "Restauration du système".
Compression des données:

 La compression des fichiers, des dossiers et des programmes diminue
leur taille et réduit la quantité d'espace qu'ils utilisent sur le disque
 Une archive est un seul objet dans lequel sont stockés plusieurs fichiers ou dossiers
 un fichier SFX (SelF-eXtracting ou "Auto extractible") est une archive caractérisée par
le fait
qu'aucun programme externe n’est nécessaire pour extraire son contenu
Protection contre les virus et les intrusions:
a. les virus:
Un virus est un petit programme informatique situé dans le corps d'un autre
qui, lorsqu'on l'exécute, se charge en mémoire et exécute les instructions
que son auteur a programmé:faille dans le système, suppression des
fichiers personnels ou système, saturation d'un disque dur, suppression du
secteur de démarrage de l'ordinateur…
On distingue les principaux types des virus suivants
virus programmes:existe ds un fichier exécutable dans une partie du code
source qui s'exécute en même temps que l'application. ex:chernobyl (1998)
virus de script:programme ajouté a une page HTML a l'aide d'un langage de script
(java script,
VBscript…).ex: I love U (mai 2000)
virus macro:existe ds les documents bureautiques (tableur, courrier) à
l'aide d'un langage de programmation (VB pour Microsoft).ex: Concept (1995)
ver:existe avec les programmes de messagerie, il se propage surtout avec
les réseaux locaux ou distants. ex:Mytob (2005)
b. les antivirus:
Un antivirus est un logiciel capable de détecter la présence de virus sur un
ordinateur et, dans la mesure du possible, de désinfecter ce dernier. On parle ainsi
d'éradication de virus pour désigner la procédure de nettoyage de l'ordinateur.
Il existe plusieurs méthodes d'éradication :
 La suppression du code correspondant au virus dans le fichier infecté ;
 La suppression du fichier infecté ;
 La mise en quarantaine du fichier infecté, consistant à le déplacer dans un
emplacement où il ne pourra pas être exécuté.
Un antivirus doit être mis a jour pour détecter les nouveaux virus
125
Le JavaScript
1. INTRODUCTION
1.1. Les limites du langage HTML :
- Absence de structures de contrôles algorithmiques (conditionnelles et itératives) ;
- Un langage sans aucune logique de programmation procédurale
- Absence de possibilité d’interfaçage avec les bases de données.
Pour dépasser ces limites, deux solutions sont proposées :
- Utilisation d’un langage du côté client (JavaScript, VbScript, …) permettant
d’ajouter d’autres
fonctionnalités omises par HTML et qui peuvent être exécutés par le navigateur ;
- Utilisation des langages du côté serveur (ASP, PHP, …) : pour se connecter à des
bases de données.
2. Le formalisme de base du JavaScript

 Activité 1 :
Créer un nouveau fichier texte et l’enregistrer sous le nom « TPJS1.html » et saisir le
code suivant :
<html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">balises html
</head>
<body>
<h1>Premier exemple en JavaScript</h1>
<script language="javascript">
alert("Bienvenue");Script
//alert permet d'afficher une fenêtre de message.
</script>
<h1>Fin du premier script</h1>
</body> balises html

</html>
3. Les objets JavaScript

3.1. Les objets JavaScript et leurs hiérarchies
JavaScript divise une page web en objets et permet d’accéder à ces objets de tirer
des informations et de les manipuler. On distingue deux catégories d’objets :
 Les objets d’interface : permettent de gérer les aspects visuels des différents
contrôles graphiques
: L’objet Window, document, button, radio, checkbox, etc.
 Les objets des propriétés et des fonctions prédéfinies : fournissent les
126
différentes ressources
requises pour la programmation : l’objet String, math, date, navigator, array et object.
127
<!DOCTYPE html>
<html lang="en">
<head>
content="width=device-width,
initial- scale=1.0">
<title>Cours Javascript</title>
</head>
<body>
<h1>Titre Principal</h1>
<p>un paragraphe</p>
</body>
</html>
a- La hiérarchie des objets d’interfaces :

Exp. :
Il s'agit d'une approche objet du modèle d'arbre: Chaque nœuds est un objet, et
des méthodes
permettent d'accèder aux noeuds en relation avec un noeud donné.
Les principaux types de nœuds sont:
 Document: la racine
 Element: les balises standards
 Text: le... texte
 Comment: les commentaires
 Attr: les attributs des balises
La navigation dans l'arbre se fait en

appelant:
le parent d'un noeud
les fils d'un noeud
(child) les attributs
d'un noeud les
noeud-frères (sibling)
128
129
b- Les propriétés des objets :
è Pour accéder à une propriété, il faut donner le chemin complet de l’objet :
Syntaxe : nom_objet.nom_propriété
Exp. :
document.form.zone.value c’est le contenu (propriété value) de l’élément
appelé « zone » du
formulaire « form ».
è La propriété innerHTML permet d’accéder au contenu d’une balise identifiée par

son attribut « id ».
Syntaxe : document.getElementById('idelement').innerHTML = "contenu";
Exp. :
document.getElementById("paragraphe").innerHTML = "Texte changé !";
c- Les méthodes des objets :

è Le langage JavaScript a prévu un ensemble de méthodes (fonctions) pour chaque
objet.
syntaxe : nom_objet.nom_methode()
Par exemple pour l’objet document on dispose de la méthode write () ou
writeln() « Ecrire dans le document ».
 Activité 2 :
Créer un fichier nommé « TPJS2.html » et saisir le code suivant :
<html>
<head>
<title>methodes</title>
</head>
<body>
document.write("methode write
<br>"); x=2;
document.write(x);
document.write("<br>le contenu de la variable x est: "+x);
</script>
</body>
</html>
- L’opérateur « + » joue le rôle de concaténation lorsqu’il est utilisé avec la métho

».
- Il est possible de générer du code HTML lors de l’utilisation de la méthode « writ
- Si le code HTML contient (") et pour ne pas confondre avec les guillemets de wri
mieux de les remplacer par des apostrophes (‘).
d- accès aux éléments d’une page web

Lorsqu'une page internet se charge, un objet particulier est créé: l'objet window.document. Il
propose en particulier des « raccourcis » pour accéder à certains éléments d'une page web.
Attention: L'objet document n'est disponible qu'une fois que la page est complètement
chargée, après l'événement load
A partir du nœud « window.document » :
 Exemple : window.document.title : élément <title>
Recherche dans l'arbre
On peut rechercher des éléments et des attributs:
130
La méthode getElementById() permet de récupérer les informations d'une balise
identifiée par son id. Exp. :
131
 Modifier la contenu d’une zone de texte :
document.getElementById("age").value = 25;
 Modifier la couleur du texte :
document.getElementById("paragraphe").style.color = ‘blue’;
 Modifier le fond du titre du texte :
document.getElementById("titre").style.backgroundColor =
"#FF0000";
 Modifier le source d'une image :
document.getElementById('idImage').src='images/photo2.jpg';
3.2. Les différents emplacements du code JavaScript :

 Activité :
Définir les différents emplacements du code JavaScript dans un document HTML.
a- Créer un fichier nommé « TPJS3.html » et saisir le code suivant :
<html><head><title>emp</title>
<script language="javascript"> function fermer()
{
window.close();
}
</script>
</head>
<body>
<script language="javascript"> function message()
{
document.write("pour fermer cette fenetre vous pouvez cliquer: ");
}
message();
</script>
<a href ="" onclick="fermer()">ici</a>
</body></html>
b- Créer un fichier nommé « lib.js », déplacer les deux fonctions

fermer() et msg() vers ce fichier et puis ajouter à la partie entête du fichier
« TPJS3.html » le code suivant :
<script type="text/javascript" src="libe.js"></script> et faire le test.
Code du fichier : TPJS3.html Code du fichier : libe.js
<html><head> function fermer()
<title>emp</title> {
<script window.close();
}
type="text/javascript" function messge()
src="libe.js"></script> {
</head> document.write("Vous
<body>
<script pouvez fermer cette fenêtre
language="javascript"> en cliquant:");
message(); }
</script>
<a href =""
onclick="fermer()">ici</a>
</body></html>
132
Constatations :
- Les solutions permettant d’insérer du code JavaScript dans une page web sont :
Insérer des instructions JavaScript entre <script>…</script> dans <body> et </body>
Déclarer les fonctions puis les appeler dans <body> et </body> ;
Utiliser un des gestionnaires d’évènements rattachés aux balises html pour appe
- La déclaration de fonctions JavaScript peut se faire :
Entre <head> et </head>
Entre <body> et </body>
Dans un fichier externe avec l’extension « .js » à inclure dans les fichiers HTM
4. LES OPERATEURS :
4.1. Les Opérateurs de Calcul :
Dans les exemples, la valeur initiale de x sera toujours égale à 11
Signe Nom Significatio Exem Résult
n pl at
e
+ plus addition x+3 14
- moins soustraction x-3 8
* multipli multiplication x*2 22
é par
/ divisé par division x /2 5.5
% modulo reste de x%5 1
la
division
par
= a la affectation x=5 5
vale
ur
4.2.Les Opérateurs de Comparaison :

Signe Nom Exemple Résultat
== égal x==11 true
< inférieur x<11 false
<= inférieur ou x<=11 true
égal
> supérieur x>11 false
=< supérieur ou x>=11 True
égal
!= différent x!=11 false
IMPORTANT :
On confond souvent le = et le == (deux signes =). Le = est un opérateur d'attribution
de valeur tandis
que le == est un opérateur de comparaison. Cette confusion est une source classique
d'erreur de programmation.
4.3. Les Opérateurs Associatifs :

Dans les exemples suivants x vaut toujours 11 et y aura comme valeur 5.
Si Description Exempl Significati Résultat
g e on
n
e
+= plus égal x += y x=x+y 16
-= moins égal x -= y x=x-y 6
*= multiplié égal x *= y x=x*y 55
133
/= divisé égal x /= y x=x/y 2.2
4.4. Les Opérateurs Logiques :

Aussi appelés opérateurs booléens, ses opérateurs servent à vérifier deux ou
plusieurs conditions.
Signe Nom Exemple Signification
134
&& et (condition1) condition1 et condition2
&&
(condition2)
|| ou (condition1) || condition1 ou condition2
(condition2)
4.5. .5 Les opérateurs

d'incrémentation Dans les
exemples x vaut 3.
Description Exemple Signification Résultat
incrémentation y = x++ 3 puis plus 1 4
(x++ est le même que x=x+1)
décrémentation y= x-- 3 puis moins 1 2
(x-- est le même que x=x-1)
I. Les variables
IV.1.La déclaration des variables
Les variables peuvent se déclarer de deux façons :
- Façon explicite : en utilisant la
commande « VAR » Exemple : VAR Numero
=1 VAR Prenom=
"Yassine"
- Façon implicite : Décrire directement le nom de la variable suivi de la
valeur attribuée : Exemple : Numero = 1
Activité1 : Créer un fichier nommé « tpjs4.html » et saisir le code suivant :

<Html>
<Head><title>Les variables</title>
<script
language="javascript">
Var x=2;
y=3;
function test()
{
x=22;
var y=33;
}
</script>
</head>
<body>
document.write("la valeur de x est :"+x+" Alors que la
valeur de y est: "+y); test();
document.write("<br> la valeur de x est: "+x+" Alors que la valeur de y est: "+y);
</Script>
</Body></html>
IV.2. La visibilité des variables

- Les variables déclarées (de façon explicite ou implicite) au début du script,
en dehors et avant toutes fonctions, sont des variables globales ;
- Dans une fonction :
 Une variable déclarée par le mot clé Var est locale à cette fonction ;
 Une variable déclarée sans le mot clé Var, sa portée sera globale.
135
- JavaScript utilise 4 types de données :
 Des nombres (entier et réel) ;
 Des chaînes de caractères ;
 Des booléens : (True pour vrai et False pour faux) ;
136
 Le mot null : Mot spécial qui indique l’absence
d’une valeur. Il ne faut pas déclarer le type de
données d’une variable.
Activité2 : Créer un fichier nommé « tpjs4bis.html » et saisir le code suivant :
<html><body>
<script
b=prompt ("saisissez une
valeur"); if(isNaN(b))
{alert("conversion
impossible");} else
{
b=Number
(b); b=b+1;
document.write("la valeur de b est :"+b);
}</script>
</body></html>
Remarque :
- La Fonction « isNaN : is Not a Number » est une fonction booléenne permettant de vérifier
si le contenu d’une
variable donnée est numérique ou non. ;
- Alert et Prompt : sont deux méthodes de l’objet « window » permettant l’affichage et la
saisie dans des boites
de dialogue.
- Il existe des fonctions de conversion de type : String et Number
 Var a = String (21.34) ; à a = "21.34"
 Var a = Number ("10.5") ; à a = 10.5
- La fonction « eval » évalue une chaine de caractères sous forme de
valeur numérique : Exemple : ch="5+10" ; x=eval (ch) ; à x=15 ;
- Il est préférable de précéder toute conversion avec la fonction « Number » par un test de
validité avec la fonction
« isNaN ».
- Confirm :donne une fenetre avec deux choix ok et annuler
exemple : if(confirm("vous etes bac info?")) alert("commencer la
programmation"); else alert(("commencer le traitement de
texte");
IV.3. LES
TYPES
1/Objet string
x=variable.length; Donne la longueur d’une a= «

chaine informatique » ;
x=a.length ; x
=…….
Les méthodes de l'objet String
Syntaxe Role Exemples
chaine.charAt(pos) Donne lecaractere correspendant a a= informatique ;
la a. charAt(3) donne « f »
position dans la chaine
137
P=Ch.indexOf(Sch Retourne la position d'une sous- Ch="Javascript" ;
,pos); ou chaîne souschaine dans une Sch="script" ;
P=Ch.indexOf(Sch); chaîne, à partir de la position pos P=Ch.indexOf(Sch,0);
sinonelle retourne -1 P=…….
P=Ch.lastIndexOf(Sch,pos); Retourne l'indice de la dernière Ch="Javascript" ;
occurence de Sch P=Ch.LastIndexOf("a");
P=Ch.lastIndexOf(Sch); Si souschaine n'est pas P=……..
trouvée, lastIndexOf()
retourne -1.
Sch=Ch.substr(P,Nbr); permet d'extraire d'une chaîne Ch, Ch="Javascript" ;
une sous chaîne Sch à partir d'une Sch1 = Ch.substr(3,3);
position P et d'une longueur Nbr. Sch2 = Ch.substr(1);
138
Nbr est facultatif.
Sch1 ="asc"
Sch2 = "avascript"
R=Ch.toLowerCase(); transforme une chaîne de
caractères Ch en minuscule
R=Ch.toUpperCase(); transforme une chaîne de
caractères Ch en majuscule
Ch=Ch1.concat(Ch2); concaténer une chaîne de Ch1="java"
caractères Ch1 Ch2="script"
avec une autre Ch2 Ch=Ch1.concat(
Ch2);
Ch="javascript"
X=chaine.charCodeAt(pos) ; Retourne le code ASCII du x= chaine.charCodeAt(1) ;
caractère de chaine à la position x = 65
pos
2/L'objet Array :
a/Declaration
Schéma Synta Exemp
xe le
1 NomObjet= new Array(); T=new Array();
2 NomObjet= new Array(nombre); T=new Array(10);
3 NomObjet= new Array(val1, val2); T=new Array("A","B","C");
Taille=Nomtableau.length; permet de calculer le nombre

d'éléments dans un tableau. Le remplissage se fait avec
nomtableau[position]=valeur ;
b/Les méthodes de l'objet Array
ObjetTab=NTab1.concat(NTab former un tableau en Var A= new
2); provenance de la Array(1,2); var B =
concaténation de deux autres new Array(10,30);
C= A.concat(B);
C =(1, 2, 10, 20, 30)
Ch=T.join("Separateur"); transforme un tableau T en Var T = new
chaîne de caractères Ch et Array(1,2,4,8,16,32); var
exploite un séparateur par ch = T.join(":");
lequel les éléments du
tableau doivent être séparés
dans la Ch = "1:2:4:8:16:32"
chaîne de caractères.
T.pop(); permet d'effacer le dernier Var T = new
élément d'un tableau T Array(64,128,256);
T.pop();
T=(64,128)
Taille=T.push("élt1","éltn"); ajoute plusieurs éléments à la T=new Array("UN");
fin d'un tableau T et retourne N=T.Push("10","Info
la nouvelle taille du tableau. ");
N=3
T.reverse() permet d'inverser l'ordre des T=new
éléments d'un tableau T Array("R","I","P","T");
T.reverse() ;
T=("T","P","I","R")
element = T.shift(); enlever le premier T=new
élément d'un tableau T Array("R","I","P","T");
et le mettre dans le resultat A=T.shift();
T=("I","P",
"T") A="R"
R= Extraire une partie d'un T=new
139
T.slice(indexdébut,indexfin); tableau T allant de Array("R","I","P","T");
indexdebut a indexfin R=T.slice(1,2);
Elle renvoie les éléments
extraits sous R=("R","I")
forme d’un nouveau tableau
T.sort(); Exple1
permet de trier les éléments d'un tableau. Si vous ne transmettez T=new
aucun paramètre, le tri se fait alphabétiquement, les valeurs Array("R","I","P","T");
numériques sont transformées automatiquement en chaînes de T.sort();
caractères et triées en tant que T("I","P","R","T")
telles. Dans le cas où vous voulez trier des valeurs numériques, Exple2
vous pouvez
140
définir une fonction de comparaison et transmettre son nom T=new
comme paramètre. Array(14,7,66,19,33);
Cette méthode s'applique avec la syntaxe suivante T.sort(compare);
function compare(a,b)
{return a-b} T=(7,14,19,33,66)
c/Tableau à deux dimensions
Déclare un tableau à 1 dimension de façon Exemple
classique t=new
nom_du_tableau = new Array (x); Array(10) ;
Ensuite, déclare chaque élément du tableau t[i]=new
comme un tableau à 1 dimension : Array(20) ;
nom_du_tableau[i] = new Array(y);
3/L'objet Math :
a/ Les méthodes de l'objet Math
Métho Résult Exemp

de at le
Math.abs(nombre) Valeur absolue du nombre.
Math.min(nombre1,nombr Plus petit des deux nombres.
e2)
Math.max(nombre1,nomb Plus grand des deux nombres.
re2)
Math.sin(nombre) Sinus de l'angle nombre.
Math.cos(nombre) Cosinus de l'angle nombre.
Math.tan(nombre) Tangente de l'angle nombre.
Math.asin(nombre) Arc-sinus du nombre.
Math.acos(nombre) Arc-cosinus du nombre.
Math.atan(nombre) Arc-tangente du nombre.
Arc-tangente dont les projections sur
Math.atan2(y,x)
les axes Y et X sont les nombres y et
x.
Math.sqrt(nombre) Racine carrée du nombre.
X=12,56;
Math.ceil(nombre) Arrondi du nombre à l'entier
Y=Math.ceil(X);
supérieur.
X=12
Math.floor(nombre) Arrondi du nombre à l'entier inférieur.
Math.round(nombre) Arrondi du nombre à l'entier le plus
proche.
Math.exp(nombre) enombre
Math.log(nombre) Logarithme naturel du nombre
Math.pow(base,exposant) baseexposant
Nombre pseudo-aléatoire compris
entre 0 et 1 inclus. Le générateur de
Math.random()
nombres aléatoires prend
automatiquement une valeur initiale
lors du chargement de JavaScript.
essayent de convertir une chaîne X=Math.parseFloat("123.
X= numérique en en réel 58");
Math.parseFloat(chaine); retourne NaN si le 1er caractere n’est x=123.58
pas
numerique
essayent de convertir une chaîne x=
x= Math.parseInt(chaine); numérique en entier Math.parseInt("123.58");
retourne NaN si le 1er caractere n’est x=123
pas
numerique
parseInt(chaine, b) :permet de convertir la chaine en nombre entier a base 10 avec
141
b est la base de chaine exemple parseInt("ABC7F", 16) donne 703615.
nb.toString(b) permet de convertir le nombre decimal nb a la
base b Exemple nb=25 ; V= nb.toString(2) ;//convertit nb a
la base binaire V=11001
V = nb.toString(16)// convertit nb a la base hexadecimal V=19
4/L'objet Date :
142
a/ Les méthodes de l'objet Date
Synta Rol exemp

xe e le
variable = new Date(); Cette méthode renvoie la date et
l'heure système.
Ces informations sont
enregistrées par Javascript
sous le format :
"Mon Dec 10 09:23:30 2014"
variable_date = new Retourne les deux derniers
Date(); an = chiffres de l'année dans
variable_date.getYear variable_date. Soit ici 14.
();
variable_date = new Date(); Retourne le mois dans
mois variable_date sous forme d'un
=variable_date.getMonth(); entier compris entre 0 et 11 (0
pour janvier, 1 pour février, 2
pour mars, etc.).
variable_date = new Retourne le jour du mois
Date(); jourm = dans variable_date sous
variable_date.getDate(); forme d'un entier compris
entre 1 et 31.
variable_date = new Retourne le jour de la semaine
Date(); jours = dans variable_date sous forme
variable_date.getDay(); d'un entier compris entre 0 et 6
(0 pour dimanche, 1 pour lundi,
2 pour mardi, etc.).
variable_date = new Retourne l'heure dans
Date(); HRS = variable_date sous forme d'un
variable_date.getHours( entier compris entre 0 et 23.
);
variable_date=new Date(); Retourne les minutes dans
min=variable_date.getMinutes( variable_date
); sous forme d'un entier compris
entre 0 et 59
variable_date=new Date(); Retourne les secondes dans
sec=variable_date.getSeconds( variable_date sous forme
); d'un entier compris entre 0
et 59.
b/La gestion des minuteries

Javascript met à votre disposition une minuterie (ou plus précisément un compteur à
rebours)
qui permettra de déclencher une fonction après un laps de temps déterminé. La
syntaxe de mise en route du temporisateur est :
nom_du_compteur = setTimeout("fonction_appelée()", temps en milliseconde)
Ainsi, setTimeout("demarrer()",5000) va lancer la fonction demarrer() après 5
secondes. Pour arrêter le temporisateur avant l'expiration du délai fixé, il y a :
clearTimeout(nom_du_compteur)
remarque :
Ouverture d’une fenêtre pop
open("URL","","") ;
exemple open("page.htm","","");
ex :ecrire un script qui permet d’afficher le temps hh :mm :ss
143
II. Les Entrées/Sorties en JavaScript
144
L’entrée (lecture) : est faisable avec la méthode « prompt » de l’objet « window » ou à
l’aide d’objets graphiques
du formulaire HTML ;
La sortie : est possible en utilisant la méthode « write » de l’objet « document », la
méthode « alert » de l’objet
« window » ou à l’aide d’objets graphique du formulaire HTML. Ou avec l’objet
innerHTML contient le code HTML intérieur à l'objet.
Remarque : innerHTML :
Cette propriété est accessible en écriture : il est donc possible de changer le
contenu d'un objet. Exemple :
x=document.getElementById("element1").innerHTML;
document.getElementById("element2").innerHTML=5+x;
contenu=document.getElementById("eltformulaire").value ;
a/Avec les méthodes

Activité 1 : Créer un fichier nommé « tp6js.html » et saisir le code suivant :
<body>
<h1>Permutation de deux valeurs</h1>
<script
a=Number(prompt("a=",
""));
b=Number(prompt("b=","")
); a=a+b;
b=a-b;
a=a-b;
alert("après la permutation
a="+a); alert("après la
permutation b="+b);
</script>
</body>
Syntaxe :
L’entrée : nom_variable=prompt("texte de la boite d’invite","valeur par défaut") ;
La sortie :
document.write("message"+nom_v
ariable) ;
Alert("message"+nom_variable) ;
Autre formulation
<script
a=prompt("a=","");
if(isNaN(a))
{alert("ce n'est pas une valeur
numérique");} else
{a=Number(a);}
b=prompt("b=","");
if(isNaN(b))
{alert("ce n'est pas une valeur
numérique");} else
{b=Number(
b);} a=a+b;
145
b=a-b;
a=a-b;
alert("a="
+a);
alert("b="+b);
</script>
146
Activité 2 :une page qui contient deux boutons . chacun bouton permet de changer le
contenu d’un
paragraphe <p> .
<script>
function
Msg1(){
document.getElementById('myText').innerHTML = 'Hey <strong>Thanks!</strong>';
}
function Msg2(){
document.getElementById('myText').innerHTML = 'Try <strong>message 1</strong>
again...';
}
</script>
<input type="button" onclick="Msg1()" value="Show Message 1">
<input type="button" onclick="Msg2()" value="Show Message 2">
<p id="myText"></p>
III. Les Structures de contrôle :

.1. Les structures conditionnelles
a) La structure IF
La Forme La Forme complète
réduite
IF (condition vraie) IF (condition vraie)
{Une ou plusieurs instructions ;} {Instructions
1 ;} ELSE
{Instructions 2 ;}
<html>
<head>
<title>forme reduite</title>
</head>
<body>
var a=Number(prompt("donner un premier
entier:","")); var b=Number(prompt("donner un
deuxieme entier:","")); max=a;
if (a<b)
{max=b;}
alert("le maximum est:"+max);
</script>
</body></html>
Ex1 :tester si une valeur entrée est un nombre.
Activité 1 : Déterminer le maximum de Activité 2 : Déterminer le maximum de

deux entiers (forme réduite) deux entiers (forme généralisée)
147
<html> <html>
<head> <head>
<title>forme reduite</title> <title>forme reduite</title>
</head> </head>
<body> <body>
<script language="javascript"> <script language="javascript">
Var a=Number(prompt("donner un premier var a=Number(prompt("donner un premier
entier:","")); var b=Number(prompt("donner entier:","")); var b=Number(prompt("donner
un deuxieme entier:","")); un deuxieme entier:",""));
max=a; if (a<b)
if (a<b) {max=b;}
148
{max=b;} else
alert("le maximum est:"+max); {max=a;}
</script> alert("le maximum est:"+max);
</body></html> </script>
</body>
</html>
Remarques:
Dans le cas d’une seule instruction, les accolades sont facultatives;
Il est possible d’imbriquer des structures conditionnelles (forme généralisée) ;
Autre syntaxe (expression) ? instruction 1 : instruction 2.
b) La structure switch
La syntaxe est la suivante :
Switch (expression)
{
Case v1:
bloc 1;
Break;
Case v2:
bloc 2;
Break ; …
Default: bloc
n; Break ;}
Activité : Ecrire un code javaScript permettant de lire le numéro du mois et la

valeur d’une année puis de
déterminer le nombre de jours de ce mois.
<html>
<head>
<title>nombre de jours</title>
</head>
<body>
var m=Number(window.prompt("donner le numéro
du mois","")); var
a=Number(window.prompt("donner la valeur de
l'année","")); switch(m)
{
case 1:case 3:case 5:case 7:case 8:case 10:case
12:j=31;break; case 4:case 6:case 9:case
11:j=30;break;
case 2:if(a%4==0)j=29; else
j=28;break;
default:j="erreur";}
alert("le nombre de jours du mois n°"+m+" est: "+j);
</script>
</body>
</html>
149
Remarques:
L’instructions break permet de quitter la structure switch après l’exécution du bloc
convenable ;
Lorsque le résultat de l’expression est différent de toutes les valeurs envisagées ; c’est le
bloc n relatif à default
qui sera exécuté ;
150
La clause default (bloc n) est facultative.
.2. Les structures itératives

a) La structure For
Permet de répéter l’exécution d’un bloc d’instructions un certain nombre de fois connu
d’avance :
For (initialisation ; condition ; progression)
{
Instructions ;
}
Initialisation : les instructions d’initialisations nécessaires ;
Condition : la condition de continuité (bouclage) ;
Progression : définit le pas du compteur (pas forcément + ou – 1)
Activité : Ecrire un code JavaScript permettant d’afficher tous les nombres

parfaits compris entre 2 et 1000
; sachant qu’un nombre N est dit parfait s’il est égal à la somme de ses diviseurs
sauf lui même.
Exemple pour N=6 è 1+2+3=6
<html>
<head>
<title>boucle pour</title>
</head>
<body>
<script
for (n=2;n<=1000;n++)
{
s=0;
for(i=1;i<=n/
2;i++) if(n
%i==0) s+=i;
if (s==n) document.write(n+"<br>");
}
</script>
</body>
</html>
b) La structure do…while
Permet de répéter l’exécution des instructions tant que la condition est vérifiée.
L’équivalent en langage pascal est repeat…until (à la seule différence que la condition
utilisée après until est une condition d’arrêt alors que la condition utilisée après while est
une condition de continuité)
Do
{
Instructions;
} while (condition(s));
Activité : Ecrire un code JavaScript permettant d’afficher tous les nombres

premiers compris entre deux entiers (a>1 et a<b et b<1001). Un nombre est
151
dit premier s’il n’est divisible que par 1 et par lui-même.
<html>
<head>
<title>do while</title>
152
</head>
<body>
<script
do
{
a=Number(window.prompt("donner un entier: ",""));
b=Number(window.prompt("donner un autre entier:",""));
}while(a<=1||a>=b||
b>=1001); for
(n=a;n<=b;n++)
{i=1;
do
{i=i+1;
}while (n%i!=0 && i<=n/2);
if (i>n/2) document.writeln(n);}
</script>
</body>
</html>
c) La structure while
Lorsque le nombre de répétitions n’est pas connu d’avance on utilise la structure itérative
while.
While (condition(s))
{
Instructions ;
}
Activité : Ecrire un code JavaScript permettant d’afficher le PGCD de deux

entiers donnés a et b tels que
(a>1 et b>1) en utilisant la méthode de différences.
<html>
<head>
<title>boucle while</title>
</head>
<body>
<script
var a,b;
do
{
a=Number(prompt("donner un entier",""));
b=Number(prompt("donner un autre entier",""));
}while (a<=1||
b<=1); while
(a!=b)
if
(a>b)
a-=b;
else
b-=a;
153
alert("le pgcd est "+a);
</script></body>
</html>
Application1
154
Ecrire un script qui permet de lire un entier N entre 10 et 100 et d’afficher tous les nombre
premier inferieur a
N dans un tableau horizontal puis dans un tableau vertical
Application2
Ecrire un script qui permet de lire une taille d’un tableau T (entre 20 et 50),remplire T
avec des entiers positives Remplir a partir de T deux tableau TI et TP qui contiennent
respectivement les entiers impair et les entiers pairs de T
IV. Les fonctions en javascript

Une fonction est un groupe de ligne(s) de code de programmation destiné à exécuter une
tâche bien spécifique et que l'on pourra utiliser à plusieurs reprises. De plus, l'usage des
fonctions améliorera grandement la lisibilité de notre script.
En Javascript, il existe deux types de fonctions :
les fonctions propres à Javascript. On les appelle des "méthodes". Elles sont
associées à un objet bien particulier comme c'était le cas de la méthode Alert()
avec l'objet window.
les fonctions écrites par le programmeur pour les besoins de son script.
1/ Déclaration des fonctions
La syntaxe d'une déclaration de fonction est la suivante :
Function nom_de_la_fonction(arguments) {
... code des instructions ...
}
La mention des arguments est facultative mais dans ce cas les parenthèses doivent rester.
C'est d'ailleurs
grâce à ces parenthèses que l'interpréteur Javascript distingue les variables des fonctions.
C'est lors de l'appel de la fonction que le code de
programme est exécuté. 2/ L'appel d'une fonction
L'appel d'une fonction se fait par le nom de la fonction (avec
les parenthèses). Soit par exemple nom_de_la_fonction();
La fonction doit etre définie avant d'être appelée.Il est donc prudent de
placer toutes les déclarations de fonctions dans la dans la balise <HEAD> ...
<HEAD>.
3Exemple
<HTML>
<HEAD>
<SCRIPT
LANGUAGE="Javascript">
function message() {
document.write("Bienvenue à ma
page");}
</SCRIPT>
</HEAD>
<BODY onLoad="message()">
</BODY></HTML>
4 Passer des valeurs à une fonction
On peut passer des paramètres aux
fonctions Javascript function Exemple(Texte)
{
alert(texte); }
Et dans l'appel de la fonction : Exemple("Salut à tous");
155
Syntaxe exemple
function nom_de_la_fonction(arg1, arg2, function Exemplebis(Texte1,
arg3) { Texte2){ alert(texte1,texte2);
... code des instructions ... }
} et pour l'appel de la fonction
Exemplebis("Salut à tous", "Signé
directeur")
156
5 Retourner une valeur
Pour renvoyer un résultat, il suffit d'écrire le mot clé return suivi de l'expression à
renvoyer.
syntaxe exemple :
Function function cube(nombre) {
nom_de_la_fonction(arguments) { var C =
... code des nombre*nombre*nombre
instructions ... return C;
Return non_vble ; } }
Remarque L'instruction return est facultative et on peut trouver plusieurs return dans une
même fonction.
V. / La gestion des événements en javascript :
Les gestionnaires d'événements
les événements doivent etre associées a des actions prévues par le programme. C'est le
rôle des gestionnaires d'événements. La syntaxe est
<nonbalise onévénement="fonction()">
exemple
<input type="button" name="b" value="executer" onClick="execution()">
Description Evénement
Lorsque l'utilisateur clique sur un bouton, un lien ou tout autre élément. Clik
Lorsque la page est chargée par le browser ou le navigateur. Load
Lorsque l'utilisateur place le pointeur de la souris sur un lien ou tout MouseOver
autre élément.
Lorsque un élément de formulaire a le focus c-à-d devient la zone Focus
d'entrée active.
Lorsque un élément de formulaire perd le focus c-à-d que l'utilisateur Blur
clique hors du champs et que la zone d'entrée n'est plus active.
Lorsque la valeur d'un champ de formulaire est modifiée. Change
Lorsque l'utilisateur clique sur le bouton Submit pour envoyer un Submit
formulaire.
Lorsque l'utilisateur écrit dans une zone de formulaire input
Objets Gestionnaires d'événement disponibles
Formulaire onSubmit
Fenêtre onLoad,
Lien hypertexte onClick, onmouseOver
Elément de texte onBlur, onChange, onFocus,
Elément de zone de texte onBlur, onChange, onFocus, oninput
Elément bouton onClick
Case à cocher onClick
Bouton Radio onClick
Liste de sélectionon onBlur, onChange, onFocus
Bouton Submit onClick
Bouton Reset onClick
Clavier (saisie d’un texte) onKeyUp, onkeypress
Exemple <A HREF="" onmouseOut="action()">lien</A>
157
Application1 Application2
Utiliser le gestionnaire d’evenement pour <html>
le code <head>
suivant: <script
<HTML> language="javascript">
<HEAD> function lon( ){
<SCRIPT np=document.f.a.value;
language="Javascript"> document.f.d.value=np.l
function message(){ ength
alert("evenementchoisi") }
} </script>
</SCRIPT> </head>
</HEAD> <body>
<BODY> <form method="POST" name="f">
<FORM> <p>nom
<INPUT TYPE=text..........="message( )"> <input type="text" name="a" size="20"
onkeyup="lon( )">
158
<INPUT TYPE="button" </p>
VALUE="Cliquezici" <p>nombre de caracteres tapés
……………………="message()"> <input type="text" name="d" size="20"></p>
</FORM> </form>
<A HREF=""….............="message( )"> </body></html>
message important</A>
</BODY></HTML>
VI. Manipulation des formulaires

A tout élément de formulaire on peut lui associe les méthodes suivantes :
nom rôl contrôles
e concernés
blur() enlève le focus d'un champ du formulaire input, select, textarea
click() simule un clic de souris sur le champ du formulaire (input, input
)
focus( attribue le focus à un champ du formulaire input, select, textarea
)
select sélectionne le contenu d'un champ du formulaire input, textarea
()
il existe également les méthodes submit() et reset() pour l'élément form
a/ zone de texte
recuperer son contenu :
Nomvariable=
document.nomformulaire.nomzonedesaisie.valu
e ; Nomvariable= document.
getElementById('idtexte').value ;
modifier son contenu :

document.nomformulaire.nomzonedesaisie.value=e
xpression ; document.
getElementById('idtexte').value =expression ;
Les controles password ,email,tel,number, textarea sont traitées avec la meme
façon .
b/les boutons radio

tester si la case est cocher
document.nomformulaire.nomcase[indice].ch
ecked==true ; document.
getElementById('idradio').checked==true ;
recuperer la valeur d’un bouton radio
nomvariable =
document.nomformulaire.nomcase[indice].valu
e ; nomvariable = document.
getElementById('idradio').value ;
recuperer le nombre d’options :
nomvariable =
document.nomformulaire.nomcase.length ;
nomvariable = document.
getElementById('idradio'). length ; c/ les
checkbox
recuperer la valeur d’un bouton checkbox
nomvariable =
document.nomformulaire.nomcase.Value ;
159
getElementById('idchek').value ;
Verifier si une case est cocher

nomvariable =
document.nomformulaire.nomcase.checked ;
getElementById('idchek'). checked ; d/ liste
de selection
la gestion des listes déroulantes se fait à travers document.nomformulaire.nomliste
ou document. getElementById('idliste')
document.
getElementById('idliste'). length
:/ retourne le nombre d'éléments de
la liste
document. getElementById('idliste').selectedIndex : /
permet de retourner l'indice de l'élément sélectionné dans une liste déroulante à sélection
unique.
160
NB1 : L'indice d'une liste déroulante commence à
partir de 0. Les propriétés JavaScript des éléments
d'un objet options sont :
document. getElementById('idliste').options[i].selected : renvoie true si
l'option est sélectionnée, false sinon.
document. getElementById('idliste').options[i].text : renvoie le texte de
l'élément sélectionné. document. getElementById('idliste').options[i].value
: renvoie la valeur de l'élément sélectionné. L'ajout d'une nouvelle option, se fait
à travers la syntaxe :
nomvariable= new Option(texte, valeur);
document.nomformulaire.nomliste.options[taille
] = nomvariable; document.
getElementById('idliste').options[taille] =
nomvariable; texte : le texte de l'élément à ajouter.
valeur : la valeur de l'élément à ajouter.
taille : la position de l'élément à ajouter dans la liste.(length de la liste)
❖ La suppression d'une option, se fait à travers la syntaxe :
document.
nomformulaire.nomliste.options[i] =
null; document.
getElementById('idliste').
options[i]=null ; avec :
i : la position de l'élément à supprimer de la liste.
Exemple
Créer un formulaire qui contient une liste deroulante appelee eleve ,contenant 4 nom
d’eleves ,si on choisit un
et on clique sur un bouton il affiche le nom d’eleve choisit .ajouter 3 bouton pour
ajouter,supprimer,
<html> </head>
<head> <body>
<script language="javascript"> <form name="f">
function changer() <select name="choix" size="1"
{i=document.f.choix.options.selectedIndex; onchange="changer()">
alert(document.f.choix.options[i].value); <option value="chaine1">ch1</option>
} <option value="chaine2">ch2</option>
function ajout() <option value="chaine3">ch3</option>
{x=prompt("le </select>
texte"); <input type=”button” name=”b1”
y=prompt("valeu value=”executer”
r"); v=new onclick="changer()">
Option(x,y); <input type=”button” name=”b2”
t=document.f.choix.options.leng value=”ajouter”
th; onclick="ajout()">
document.f.choix.options[t]=v; <input type=”button” name=”b3”
alert("on ajout elelt "+(t+1)); value=”supprimer”
} onclick="supp()">
function supp() <input type=”button” name=”b4”
{i=prompt("donner la pos a sup"); value=”vider”
document.f.choix.options[i]=null; onclick="vider()">
} </form>
function vider() </body>
{document.f.choix.options.length=null; </html>
}
</script>
161
162
Série1
Javascript
Activité :1 boite-de-dialogue-alert -prompt-en-javascript et document.write.
a)Afficher un message de bienvenu 4 SI dans un box de dialogue avec alert()
b) Ecrire dans une page html en utilisant document.write le même message de

bienvenu
c) Afficher le contenu d’une variable x initialisé avec la valeur 5.
d) Afficher un message bonjour dans le console(console.log)
Activité:2 : getElementById,innerHTML
Ecrire un programme javascript qui permet d'afficher le mot bonjour dans une
balise p en utilisant la fonction suivante :
document.getElementById("id_de_element_a_modifier").innerHTML = "message à afficher"
Activité :3
a) saisir deux entiers en utilisant prompt puis afficher leurs sommes dans la
console.
163
Correction :
c) afficher la somme dans une paragraphe
d) calculer la somme si seulement si les deux nombres sont des entiers

(isNaN ,if )
La fonction isNaN() permet de déterminer si une valeur est NaN .(Not a Number)
isNaN(‘fruit’)True
isNaN(‘5’)-false
correction :
Activité 3 : boite de dialogue confirm, if else
164
Activité5 :appel d’une fonction ,évenement onclick et script src
Créer un code javascript dans un fichier qui permet de créer un lien avec lequel on ferme le
document.
lib.js
165
Serie 2
Exercice1 :somme de deux entiers
Ecrire un programme javascript qui permet calculer la somme de deux entiers
données par l'utilisateur en utilisant un formulaire comme le montre l'image
"maquette-somme.png" en créant une fonction somme. Enregistrer le
programme sous le nom "somme.html" dans le dossier "Javascript" dans votre
dossier de travail
Exercice:Mini calculatrice
Modifier le programme javascript précèdent pour réaliser la somme, la soustraction, la
multiplication
et la division de deux entiers données par l'utilisateur en utilisant un formulaire
comme le montre l'image "maquette-calculatrice.png"
Les champs nombre1 et nombre 2 sont obligatoires.

Dans le cas de la division, il faut traiter le cas de la division par zéro.
Enregistrer le programme sous le nom "calculatrice.html" dans le dossier "javascript"
dans votre dossier de travail
Correction exercice 1 :
166
167
168
169
Serie3
Activité 1:
(onmouseover,onmouseout)
Créer un programme qui permet d’agrandir une image qu’on va le mettre à 32px de
largeur et hauteur. lorsque l’image est survolée par la souris elle sera agrandi à 64 pixels
de largeur et hauteur. si non va avoir sa taille initiale (32pixels*32pixels)
Activité 2 :
changer d’image :src Créer un programme qui permet de changer d’images en cliquant
sur un bouton
document.getElementById('idImage').src='images/photo2.jpg';
b) Créer un dossier images puis déplacer les deux images à l’intérieur de ce

dernier.puis rafraichisser la page web. Pb l’image ne s’affiche plus !
.src=………………………………………………………………………………. On a accéder depuis la

page à un dossier…………..
c) maintenant on ai dans le cas ou on créer un dossier pour la page web,donc la page se
trouve à l’intérieur du dossier il remonter au dossier……………….
Activité 3: display none,block Créer un paragraphe initialement caché Créer deux

boutton permettant d’afficher et de cacher une paragraphe.
Activité4 : toUppercase ,innerHTML et onclick,function Créer une page qui permet de

mettre une paragraphe en majuscule
170
Activité5: eval et onfocus et src Créer une page web contenant deux zone de texte
permettant d’afficher le résultat dans la zone de texte 2 d’une opération faite dans la
zone de texte 1
Activité 6 : (radio box,onchange et if ) Créer une page web cotenant des radio box pour
répondre à une question donnée Quel est l’angle d’un triangle équilatéral
si l’utilisateur coche la bonne réponse on affiche dans la zone de texte la réponse est
juste si non on affiche la réponse est fausse.
Activité 7 :bluegriffont+parseInt Remarque :parseInt (voir page 9) Oninput (voir page
18)
Activité 8 : chaine de caractères
Exercice1: Date et substring Creér une page qui affiche une zone de saisie pour saisir
une date sous forme jj/mm/aaaa puis de Calculer l’Age à partir de cette date.
171
Exercice2 :onkeyup,onkeypress,substr,fonction avec paramètre
Créer la page suivante contenant un formulaire
Exécution :
1- permetant de changer le lettres saisie dans la zone du nom en majuscule.

2- de colorer la zone de mot de passe mdp en rouge lors du saisie du mot de passe.
3-de générer un nom d’utilisteur composé des deux premières lettres du nom en
majuscule,des deux premières lettre du prénom,la longueur du mot de passe mdp+le
genre(m ou f) et de l’afficher via une alert.
172
Correction
Activité1:
activité2:
Correction Activité 3:
Activité4
173
Activité 5 : onchange
Html Javascript :
Activité6 correction :
Html :
174
Activité 7 :
Exercice1 :
…………………………………………………………………………………………………………………………
………………….
…………………………………………………………………………………………………………………………
………………….
…………………………………………………………………………………………………………………………
………………….
…………………………………………………………………………………………………………………………
………………….
…………………………………………………………………………………………………………………………
………………….
…………………………………………………………………………………………………………………………
………………….
…………………………………………………………………………………………………………………………
………………….
…………………………………………………………………………………………………………………………
………………….
…………………………………………………………………………………………………………………………
………………….
…………………………………………………………………………………………………………………………
………………….
…………………………………………………………………………………………………………………………
………………….
…………………………………………………………………………………………………………………………
………………….
Exercice2 :
175
…………………………………………………………………………………………………………………………
………………….
…………………………………………………………………………………………………………………………
………………….
…………………………………………………………………………………………………………………………
………………….
…………………………………………………………………………………………………………………………
………………….
…………………………………………………………………………………………………………………………
………………….
…………………………………………………………………………………………………………………………
………………….
…………………………………………………………………………………………………………………………
………………….
…………………………………………………………………………………………………………………………
………………….
…………………………………………………………………………………………………………………………
………………….
…………………………………………………………………………………………………………………………
………………….
…………………………………………………………………………………………………………………………
………………….
…………………………………………………………………………………………………………………………
………………….
…………………………………………………………………………………………………………………………
………………….
176
…………………………………………………………………………………………………………………………
………………….
…………………………………………………………………………………………………………………………
………………….
…………………………………………………………………………………………………………………………
………………….
…………………………………………………………………………………………………………………………
………………….
…………………………………………………………………………………………………………………………
………………….
…………………………………………………………………………………………………………………………
………………….
…………………………………………………………………………………………………………………………
………………….
177
Série 4
Activité 1: display none,block
Créer un paragraphe initialement caché
Créer deux boutton permettant d’afficher et de cacher une paragraphe.
Activité 2:Math.Random
Créer un programme qui affiche un nombre aléatoire entre 0 et 1dans la console en
utilisant la fonction Math.Random() (cette fonction retourne un nombre aléatoire entre 0
et 1)(un réel)
……………………………………………………………………………………………………………………..
b) Modifier le programme pour afficher un nombre aléatoire entre 0 et 100
…………………………………………………………………………………………………………………………
………………………
……………………………………………………………………………………………………………
c) en utilisant la fonction Math.floor() afficher la partie entière (on va afficher un nombre
entier entre 0 et 100)
…………………………………………………………………………………………………………………………
………………………
…………………………………………………………………………………………………………..
Activité 3 : (objet string) :
chaine.charAt(pos) : Donne le caractere correspendant a la position dans la
chaine Exemple :
P=Ch.indexOf(Sch,pos); ou P=Ch.indexOf(Sch);
Retourne la position d'une sous-chaîne sous chaine dans une chaîne, à partir de la position
pos
sinon elle retourne -1
*)déterminer si un nombre saisie est il un entier ou un réel en utilisant indexOf .
………………………………………………………………………………………………………………………
………………………………………………………………………………………………………
Activité 4 :Tableau
Déclaration 1-NomObjet= new Array();
2- NomObjet= new Array(nombre);
3- NomObjet= new Array(val1, val2);
Concaténer deux tableaux
On peut faire le débogage en choisiant un point d’arret (on a choisi la ligne 16)ou
l’éxécution pas à pas et voir le contenu des variables en l’ajoutant dans la partie
watch.
178
Activité 5 :boucle for
Permet de répéter l’exécution d’un bloc d’instructions un certain nombre de fois connu
d’avance :
For (initialisation ; condition ; progression) Initialisation : les instructions d’initialisations
{ nécessaires ;
Instructions ; Condition : la condition de continuité
} (bouclage) ;
Progression : définit le pas du compteur (pas
forcément + ou – 1)
Afficher les nombres entre 0 et 9 en utilisant un boucle for

Solution :
<script>
for(i=0 ;i<10 ;i++)
{Console.log(i) ;}
</script>
Exercice n1 :Créer un jeu de Dé virtuel

Lorsque le joueur clique sur le bouton
lancer, une face du dé sera affichée
aléatoirement, le programme affiche le
nombre de lancés et le total des
nombres choisit.
Exercice n2 : Créer une horloge numérique (onload,date)
Exercice n3 :Array,toString
Afficher remplir et afficher un tableau
179
Exercice n4 :for et while
Calculer la somme de 1 à 8 en utilisant la boucle for puis while
…………………………………………………………………………………………………………..
…………………………………………………………………………………………………………..
………………………………………………………………………………………………………….
……………………………………………………………………………………………………………
…………………………………………………………………………………………………………….
……………………………………………………………………………………………………………..
…………………………………………………………………………………………………………….
Exercice n5 :do {instructions}while( condition) ;

Créer un programme qui permet de saisir un entier entre 5 et 20
…………………………………………………………………………………………………………………………
……………..
…………………………………………………………………………………………………………………………
……………..
…………………………………………………………………………………………………………………………
………………
…………………………………………………………………………………………………………………
……………………. Exercice 6:Manipulation de quelques méthodes prédéfinies
isNaN,Number,toString,indexOf
…………………………………………………………………………………………………………………………
…………….
…………………………………………………………………………………………………………………………
……………
…………………………………………………………………………………………………………………………
……………
…………………………………………………………………………………………………………………………
…………..
…………………………………………………………………………………………………………………………
…………..
Exercice n7 :charAt,while(condition){instructions ;}
Créer un formulaire et une fonction javascript verif() qui permet de saisir une chaine et
vérifier si elle est composé uniquement de lettre alphabétiques.
…………………………………………………………………………………………………………………………
………………
…………………………………………………………………………………………………………………………
………………
…………………………………………………………………………………………………………………………
………………
…………………………………………………………………………………………………………………………
……………..
180
…………………………………………………………………………………………………………………………
………………
…………………………………………………………………………………………………………………………
…………….
…………………………………………………………………………………………………………………………
……………..
…………………………………………………………………………………………………………………………
…………….
…………………………………………………………………………………………………………………………
…………….
…………………………………………………………………………………………………………………………
……………
181
Correction
Activité 1 :
Activité 2 :
Exercice1 :
<!DOCTYPE html>
<html>
<head><script language ="javascript" src="de.js">
</script>
<title>Maximum de n</title>
</head>
<body onload="debut()">
<center>
<h1>Dé en ligne - Lancé de dé aléatoire - Dé virtuel</h1>
<table id="jets" >
<tr>
<br/><img id="pic" src="0.png"><br/>
</tr>
<tr>
<br/><center>nombre de lancés: <span id="nblanc"></span></center><br/>
<br/><center>total: <span id="total"></span></center><br/>
</tr>
<tr>
<br/><center><button onclick="lancer()">Lancer </button></center><br/><br/>
</tr>
</table>
</center>
182
<br/>
</body>
</html>
De.js
nbfois=0;
total=0;
function lancer(){ nb=Math.floor(Math.random()*6+1); document.getElementById("pic").src=

total=total+nb; document.getElementById("nblanc").innerHTML = nbfois; document.getElemen
}
Exercice 2 :
<html>
<head>
<script type="text/javascript"> function refresh(){
var t = 1000; // rafraîchissement en millisecondes
setTimeout('showDate()',t)
}
function showDate() { var date = new Date()

var h = date.getHours(); var m = date.getMinutes(); var s = date.getSeconds(); if( h <
if( m < 10 ){ m = '0' + m; }
if( s < 10 ){ s = '0' + s; }
var time = h + ':' + m + ':' + s document.getElementById('horloge').innerHTML = time; re
}
</script>
</head>
<body onload=showDate();>
<span id='horloge' style="background-color:#1C1C1C;color:silver;font-size:40px;"></span>
</body>
</html>
Exercice3 :
<!DOCTYPE html>
<head>
<script language="javascript" src="tab.js"></script>
<title>Nouvelle page 1</title>
</head>
<body>
183
<form id="f1">
<p>element 1<input type="text" id="T1" size="20"></p>

<p>element2 <input type="text" id="T2" size="20"></p>
<p><input type="button" value="remplir afficher" name="B1" onclick="tableau()"></p>

</form>
</body>
</html>
Tab.js
function tableau()
{ tab=new Array; tab[0]=document.getElementById('T1').value; tab[1]=document.getElementB
document.write(" la taille du tableau",tab.length,"<br>"); chtab=tab.toString();
document.write("la taille de la chaine",chtab.length,"<br>"); for(i=0;i<tab.length;i++)
{ document.write("lelement numero " ,i, " est ",tab[i],"<br>"); }//
}
184
Base de données
Base de données?:
Activité 1:Brainstorming
Donner les informations utiles Donner les informations Donner les informations
pour gérer la location de nécessaires pour gérer une nécessaires pour gérer les notes des
voitures:
bibliothèque de facultés: élèves
Client, marque, CIN, Modèle, Livre, étudiant, nom Livre, CIN, Id_eleve,
numéro voiture, Classe, Code nom,prénom,date_de_naissan
date_de_location,date_de_retour,é livre,date_emprunt,date_de_retour,é ce,clas se,
tat tat Id_matière,lib_matière,coeffici
ent,no te
Prenant l’exemple de gestion de notes On peut créer
un fichier Excel qui englobe toutes les informations
L’élève E01 dont le nom est « Bibani » et prénom « Ali » a 3 notes en 3

matières,dans cette solution on a répeter
3 fois les informations relatives à l’élèves.
Dans cette solution Il y a redondance d’information
Ou une solution avec plusieurs fichiers
185
On peut facilement faire une faute par exemple lors de saisie de l’identiant d’un
élève et mètre un code qui n’éxiste pas dans la feuille note par exemple Au lieu
d’écrire E003 on écrit E0003
-excell n’affiche pas une faute !non cohérence des données.
Cette solution qui est basée sur la structure des fichiers présente plusieurs
inconvénients : (lourdeur dans la manipulation des fichiers (vérification de
cohérence des données, mise à jours, sécurité
des
données)
on n’a pas de relation entre les tables qui garanti tous ça.
Parmi les approches qu’il peut l’utilisés on trouve celle basé sur une Base de
Données relationnelle.
Quelques Définitions Générales :

1- Une base de données est un ensemble d'i nformations qui est organisé de
manière à être facilement accessible, géré et mis à jour. Elle est utilisée par les
organisations comme méthode de stockage, de gestion et de récupération de
l'informations.
Une base de données contient des informations nécessaires au fonctionnement des
entreprises, des sociétés et des établissements (gestion comptable, gestion
commerciale, gestion de production, gestion des stocks,..).
2- Système de Gestion de Bases de Données (SGBD)
est un outil permettant de créer de nouvelles bases de données, de mettre à jour
ces données (ajouter, modifier, supprimer), de rechercher efficacement des
données spécifiques et de fournir des différentes manières de les visualiser (à
l’écran ou sur papier)
3- Le SGBD relationnel (Codd, en 1970)
Il consiste à représenter les objets ainsi que les

liens à l’aide d’une structure appelé table. Une
table est une structure tabulaire dont les
colonnes (attributs) correspondent aux
caractéristiques de l’objet et les lignes (n-
uplets) correspondent aux enregistrements.
Les principaux SGBD
Exemples de SGBD Relationnels :
Oracle SQL Server Access MySQL
186
Différences entre un Tableur et un SGBD
Différences Table SGB
sur... ur D
Utilisation principale Calculs Gestion et traitement des données
Structuration des Aucune Structuration et cohérence forte
Contrôles Aucuns Vérification stricte des valeurs
d'intégrité des possibles de chaque donnée
données
187
Accès aux données Mono utilisateur Multi utilisateurs
Confidentialité Aucun contrôle Vérification des droits d'accès de
des données chaque utilisateur
Taille des données - Une table - Plusieurs tables
- Quelques dizaines de - Plusieurs milliers de lignes par
lignes table
Traitement sur les Quantitatifs Qualitatifs et quantitatifs
Interrogations Réalisée par des Langage "universel" : SQL
des données procédures
spécifiques
Est-ce que Excel est une base de données ?
Une feuille de calcul, à elle seule, est une base de données, mais pas une base de
données relationnelle.
Excel ne permet de gérer des relations
Pourquoi créer une base de données relationnel?
Il est conçu pour gérer les données complexes reliées entre elles. Lorsque ces
données deviennent conséquentes, vous ne devez en aucun cas utiliser Excel pour
les gérer mais Access. Un de ses objectifs est d'éviter de répéter les données.
La réalisation d’une base de données relationnelles :
Un modèle relationnel est une représentation simple, élégante d’une base de

données, afin de :
Etablir une base de données solide pour traiter les problèmes de cohérence et de
redondance des
données
Les données, dans le modèle relationnel, sont organisées sous forme de tableaux
de valeurs appelés
Tables
A) Création d’une base,table et insertion de données

dans Access 2016
Création d’une base de données vide
Fichiernouveau
1- Les tables
 Définition : une table est un ensemble de données relatives à un sujet
188
spécifique du monde réel (ou entité) et structurées sous forme de tableau.
 Champs et enregistrement : une table est composée verticalement d’un ensemble de
colonnes appelées
attributs ou champs. Ils représentent les caractéristiques des entités qu'on souhaite
stocker dans la table
189
; et horizontalement d’un ensemble de lignes (tuples/ n-uplets) qui correspondent
aux occurrences (enregistrements) de l'entité.
Les champs ou les attributs

Exemple : Table Elève
Les enregistrements
Un enregistrement de table Eleve se lit de cette façon : L’élève dont l’identifiant est
E 001, qui s’appelle Bibani Ali, et qui est né le18/09/1992, est inscrit dans la classe 3Eco1
La réalisation de table nécessite deux étapes :

1- Préparation de sa structure qui est l’étape d’identification des champs et de
leurs propriétés.
2- L’étape de remplisssage de cette table avec les données initialement et
généralement se trouvant sur papier.
N.B. Dans une table chaque champ contient le même type d’informations et chaque
type dispose d’une liste de propriétés.
 Schéma d'une table : il est donné par l'ensemble de ses attributs [ T (a1, a2, a3, a4) ]
Eleve (ID_ELEVE, nom, prénom, date de nais, classe)
 Clé primaire : c'est une colonne ou un groupe de colonnes permettant d’identifier de
façon unique chaque
ligne de la table. Elle doit être unique et non nulle.
Français Anglais Arabe Synonymes
Clé primaire Primary key ‫مفتاح أساسي‬ identifiant
Exemple :Id_eleve est la clé primaire de la table eleve.
Id_eleve,id_matiere est la clé primaire de la table note.
Etape 1 :Création d'une table

cliquer l'onglet« Créer » de la fenêtre base de données
Choisir l’option « création de table»
Remplir pour chaque champ :
190
 Le nom
 Le type adéquat
 Les propriétés souhaitées
Création des champs du table
. Lors de la création d’un champ, on doit spécifier son
nom, son type et ses propriétés.
Les champs représentent les caractéristiques des éléments qu’on souhaite

stocker dans la table.Lors de la création d’un champ on doit préciser son type
(texte,mémo,numérique
,date,…)et pour chaque type ses propriétés.
Fixer le champ Clé Primaire

.Dans le MS ACCESS 2016, une clé primaire est
désignée par ce symbole
- Une fois la création de la table est terminée,
sélectionner le(s) champs qui va (vont) servir
comme clé primaire
- Enregistrer la table
 Enregistrer la table et la fermer
(cliquer avec le bouton droit de la souris et choisir Enregistrer)
 Ouvrir la table (Mode Affichage, par un simple clic) et

introduire les enregistrements donnés.
Nous avons vue un exemple fait avec Microsoft Access 2016,Maintenant on va le recréer avec
Mysql
De xam plite.
B) Création de base et
table Avec Mysql de Xamp lite
1- On démarre Xampp Lite
2 - on va utiliser Mysql pour créer une base de données pour cela cliquer ave
191
2
3-puis cliquer sur le bouton Admin
3
4-puis choisir nouvelle base de données

Le résultat :
5 6
5-Nommer la base de données «

gestion_élèves_nom_prénom » puis 6- cliquer sur
créer .
La base de données est créée
6- Créer une table en donnant un nom au table et le nombre de champs
7- Saisir les nom des attributs ainsi que leurs types
Les types de données en Mysql
Type de donnée Syntaxe Descript

ion
Chaîne de caractères de n
Alphanumérique VARCHAR(n)
caractères maximum
(n<16383)
Horaire DATE Date sous la forme YYYY-MM-DD 2002-
07-19
Numérique INT(n) Numérique à n chiffres
Numérique à n chiffres dont m

Numérique DECIMAL(n,m) décimales
192
nombre à virgule flottante simple
précision
193
Numérique Float(n,m) nombre à virgule flottante précision absolue
8-Définir la clé Primaire dans la rubrique index Clé primaire
9-Puis cliquer sur Enregistrer.

Puis cliquer sur Exécuter
On a terminer la définition de la structure de la table

on a créer la table élèves dans la base gestion élève g1
On remarque qu’il y a une clé jaune à droite de id_élèves (c’est une clés primaire :les
valeurs sont unique on ne peut pas avoir des valeurs en double)
On peut modifier ,supprimer un champs ou attribut.
Note bien :on peut imprimer la structure de la table en cliquant sur le bouton imprimer
194
On peut en cliqant sut le lien de la base de données accéder au concepteur pour afficher
la table
Etape 2 : insertion de données :
Activité :Ajouter des données au table créée

Id_élève Nom Prénom Date de Classe
naissance
E01 Tounsi Ahmed 04/01/2003 3SI
E02 Mrad Amira 23/10/2001 4ECO2
E03 Dridi Wided 22/01/2002 4ECO1
E04 Jileni Amira 23/10/2004 3ECO2
E05 Mtir Amine 22/03/2006 1s1
E06 Nouira Rami 05/04/2007 1s1
E07 Masmoudi Ahmed 06/12/2004 3SI
1-cliquer sur le bouton Insérer
2-Puis cliquer sur Exécuter
195
Schéma d’une base de données
Le schéma d’une base de données est l’ensemble des schémas de ces tables.
Le schéma de la base de données « Gestion des élèves » est :
élèves (Id_élève, Nom, Prénom,
date_naissance, classe) Matieres
(Id_matière, libellé matière, Coefficient)
Notes (Id_élèves, Id_matères, note)
2-Les relations:
Nous avons vu qu'une base de données est formée d'un ensemble de tables séparées. Pour éviter les
redondances
des données on doit établir des liens entre ces tables: ce sont les relations d'une BD.
a. Définition :
Une relation est un lien entre deux tables d’une base de données à l’aide de deux champs en commun à ces deux
tables. Ces deux champs sont dits associés.
b. Différents types de relations (les cardinalités):

Soit deux tables A et B. On distingue trois types de relations :
Table A Table B
champ1 Champ1
 Relation un- a- un (1-1): …
Chaque enregistrement de la table A ne peut correspondre qu’a un enregistrement de la
table B et inversement.
Exemple: gestion d'un groupe
Table A Table B
Champ1_ A 1 1 Champ1_ B
Directeur Club
Champ2_A Champ3_A Champ2_B Champ3_B 1 1
CIN Numéro Libellé Adresse
Prénom
162 Nom
Dans une relation 1-1 les deux champs Liés
sont deux clés primaires.
Exemples :
Un directeur dirige un seul club Une personne possède une seul CIN
Un club est dérigé par un seul Une CIN est possédé par une seul
directeur personne
 Relation un- à- plusieurs (1-N):
Dans ce type chaque enregistrement de la table contenant la clé primaire peut être associé à plusieurs
enregistrements de la deuxième table, mais chaque enregistrement de la deuxième table n’est associé qu’à
un seul enregistrement de la première table.
Exemple:
Table A Table B Club Abonné
1 1
Champ1_B Champ2_B
Champ1_A Champ2_A Champ3_A Champ1_A
Numéro Libellé Adresse CIN
Nom Prénom Numéro
∞
∞
 Champ1_A de la table A est un clé primaire

 Champ1_A de la table B est appelé clé étrangère
Exemples :
Un club lui adèrent un ou plusieurs Une personne possède plusieurs
abonnés Un abonné est adére à un voitures
Une voiture est possédé par une seul
seul club personne
Club(Numéro, Libellé,Adresse)
Abonné(CIN, Nom,Prénom,Numéro)
…………………………………………
Établir les conditions préalables:

 Il existe une clé primaire unique dans la table du côté 1.
 Le champ commun dans la table associée (côté plusieurs ) est de même type
et de même taille que la clé primaire.
 Une clé étrangère est un champ externe par rapport à la table en cours, importé
d’une autre table.
 une clé primaire est la donnée qui permet d'identifier de manière unique un enregistrement
dans une table. Une clé primaire peut être composée d'une ou de plusieurs colonnes de la
table
Formée par un ou plusieurs champs, qui existe aussi dans une autre table comme clé primaire. Il assure la
liaison (association) entre les deux tables.
163
Français Anglais Arabe Synonymes
 Référence
Clé Foreign key ‫مفتاح خارجي‬
 Contrainte d'intégrité
étrangère
référentielle
164
 Relation plusieurs- à -plusieurs (N-M):
Plusieurs enregistrements de la table A peut être mis en correspondance avec
plusieurs enregistrements de la table B et inversement. Cette relation est traduire en
Access par deux relations 1-N
Activité: Déterminer les relations entre les tables de la BD Gestion de notes et indiquer
leurs cardinalités.
On ne peut définir ce type qu’après définition d'une troisième table A_B (table de
jonction) dont la clé primaire est formée de deux clés des tables A et B.
 Dans une relation N-M on trouve deux relations 1-N avec une troisième table.
Ajouter une table supplémentaire, contenant uniquement les champs associés, pour
servir de jointure
entre les deux tables.
Les contraintes
 Une contrainte est une règle (‫ ق ـيـد‬/‫ ) ق ـاعـدة‬appliquée à une colonne ou à une table et qui doit être
toujours
vérifiée à fin d’assurer l’intégrité (‫ تناسق‬/‫سالمة‬/‫ )صحـة‬des données.
 On distingue trois types de contraintes (‫ )قـ ـ ـيـود‬:
• Contrainte d’intégrité de tables : Permet d’assurer l’unicité des lignes des
tables. Chaque table doit avoir une la clé primaire.
• Contrainte d’intégrité référentielle : Permet d’assurer qu’une clé secondaire
d’une table est reliée à une clé primaire d’une autre table. Elle est représentée
sous forme de lien entre tables.
• Contrainte de domaine : s’assurer de la validité des valeurs des colonnes
(obligatoire ou pas,
supérieur à zéro, ….)
Français Anglais Arabe

Contrainte Integrity constraint ‫ق ـواعـد تناسق العلومـات‬
d'intégrité
Application :
Créer une nouvelle base de données dans votre dossier de travail et lui donner le nom «
Gestion des notes + votre nom
». Sql
:
…………………………………………………………………………………………………………………………
165
…………………
…………………………………………………………………………………………………………………………
………………………
.
On veut Créer les tables suivantes en respectant le schéma de la base
de données présenté ci- dessous.
ELEVE (id_élèves, Nom, Prénom, Date_naissance, Classe)
MATIERE (id_matières, libellé_matière,coefficient)
166
NOTE (id_élèves, id_matières, Note)
La table Elève (La clé primaire est ID_ELEVE)

Champ Type de données Propriétés
ID_ELEVE Varchar Taille = 8
Nom Varchar Taille = 30
Prénom Varchar Taille = 30
Date_naissance Date/Heure
Classe Varchar Taille = 8
La table Matière (La clé primaire est ID_MATIERE)
ID_MATIERE Varchar Taille = 3
Libellé_matière Varchar Taille = 30
Coefficient Numérique réel simple
3) La table Note (La clé primaire est ID_ELEVE, ID_MATIERE)
ID_ELEVE Varchar Taille = 8
ID_MATIERE Varchar Taille = 3
Note Numérique Taille = réel simple
A) Créer les tables élèves,matières et notes puis saisir les données

La table ELEVE
1) Création de la table élèves (structure )
Sql:
…………………………………………………………………………………………………………………………
………………………
…………………………………………………………………………………………………………………………
………………………
…………………………………………………………………………………………………………………………
………………………
………………………………………………
2Création de la table matière
sql:
…………………………………………………………………………………………………………………………
………………
…………………………………………………………………………………………………………………………
………………………
…………………………………………………………………………………………………………………………
………………………
…………………………………………………………………………………………………………………………
………………………
…………………….
167
…………………………………………………………………………………………………………………………
………………………
…
3)Création la table note
Sql
:
…………………………………………………………………………………………………………………………
……………………
…………………………………………………………………………………………………………………………
………………………
…………………………………………………………………………………………………………………………
………………………
168
…………………………………………………………………………………………………………………………
………………………
………………….
…………………………………………………………………………………………………………………………
………………………
……
Création des relations :
…………………………………………………………………………………………………………………………
………………………
…………………………………………………………………………………………………………………………
……………………
…………………………………………………………………………………………………………………………
………………………
b)Insertion de données:
Id_élève Nom Prénom Date de Classe
naissance
E01 Tounsi Ahmed 04/01/2003 3SI
E02 Mrad Amira 23/10/2001 4ECO2
E03 Dridi Wided 22/01/2002 4ECO1
E04 Jileni Amira 23/10/2004 3ECO2
E05 Mtir Amine 22/03/2006 1s1
E06 Nouira Rami 05/04/2007 1s1
E07 Masmoudi Ahmed 06/12/2004 3SI
Sql: (se limiter à deux enregistrements)
INSERT INTO `élèves` (ìd_élèves`, `Nom`, `Prénom`, `Date_naissance`,
`classe`) VALUES ('E01', 'Tounsi', 'Ahmed', '2003/01/04/', '3SI');
INSERT INTO `élèves` (ìd_élèves`, `Nom`, `Prénom`, `Date_naissance`,
`classe`) VALUES ('E01', 'Tounsi', 'Ahmed', '2003/04/01/', '3SI');
La table MATIERE
ID_MATIERE Libéllé_Matière Coefficient
M01 Algorithme 3
M02 STI 3
M03 Math 1,5
d)insertion de données dans la table matière :

…………………………………………………………………………………………………………………
…………………………………………………………………………………………………………………
…………………………………………………………………………………………………………………
…………………………………………………………………………………………………………………
…………………………………………………………………………………………………………………
La table NOTE
ID_ELEVE ID_MATIERE Note
E01 M01 14
E01 M02 13
E01 M03 10
E02 M03 11
E03 M03 17
E07 M02 14,5
Requête de sélection :
1)Afficher tous les élèves
169
Requête 1 :SELECT *
FROM ‘élèves’
Remarque : on a sélectionné tous les champs en utilisant l’opérateur étoile *

2) Afficher les nom et prénom des élèves
Requête 2 :SELECT
‘Nom’,’Prénom’
FROM ‘élèves’
3) Afficher les élèves dont la classe est 3SI

Requête 3 :
SELECT ‘élèves.*’
FROM élèves
WHERE (‘élèves.classe’=
‘3SI’)
4) Afficher id_elèves,id_matière dont la note est supérieur à 12

170
171
Requete 4 :SELECT `note`.ìd_élèves`,
`note`.ìd_matière`, `note`.`note` FROM note
WHERE (`note`.`note` >12)
5) Afficher id_elèves,id_matière dont la note est supérieur à 12 en
utilisant l’opérateur
BETWEEN
En ordre croissant des notes:
SELECT `note`.ìd_élèves`, `note`.ìd_matière`,

`note`.`note` FROM note
WHERE (`note`.`note` BETWEEN
12 AND 17) ORDER BY
`note`.`note` ASC
172
6) Afficher le nombre des élèves en utilisant l’opérateur count
173
7) ’ajouter la colonne « E_mail » (de 70 caractères) à la table élèves
……………………………………………………………………………………………………..
………………………………………………………………………………………………………
……………………………………………………………………………………………………….
8) Modifier la colonne « E_mail » (au de 70 caractères on met 100 caractères) à la table
élèves.
……………………………………………………………………………………………………..
………………………………………………………………………………………………………
……………………………………………………………………………………………………….
9) supprimer la ligne de l’élève E05 du table élèves
……………………………………………………………………………………………………..
………………………………………………………………………………………………………
……………………………………………………………………………………………………….
10)Modifier la note de l’élève E01 dans la table note
……………………………………………………………………………………………………..
………………………………………………………………………………………………………
……………………………………………………………………………………………………….
174
Serie 2
1. Dans la base de données « BDgestion_deptg.. », créer les tables suivantes :
➢ Employes (NumEmp, Nom_emp, Fonction, Salaire, Prime, DateEmb, Num_dept#)
➢ Departement (Num_dept, Nom_dept , Ville)
Le tableau suivant indique les noms et les types des champs de chaque table.
1. Insérer dans la table « Département » les lignes suivantes :
2. Insérer dans la table « Employes » les lignes suivantes :
Travail demandé :
Q1-Créer les tables Employés et départements.
Q2 :Créer la relation entre la table Employés et départements.
Q3-Requete de projection avec sql :SELECT liste des attributs FROM nom de relation ;
Donner les noms de tous les employés et le salaire de chacun d’eux ?
…………………………………………………………………………………………………………………………
……………….
…………………………………………………………………………………………………………………………
………………
…………………………………………………………………………………………………………………………
………………
Q4 :Requête de sélection avec sql :SELECT liste des attributs FROM nom de relation
WHERE condition ;
…………………………………………………………………………………………………………………………
…………………..
…………………………………………………………………………………………………………………………
…………………….
…………………………………………………………………………………………………………………………
175
……………………
…………………………………………………………………………………………………………………………
…………………….
Q5-Quels sont les employés travaillant dans le département 30 ?
…………………………………………………………………………………………………………………………
……………………
…………………………………………………………………………………………………………………………
…………………..
…………………………………………………………………………………………………………………………
………………….
176
Q6 : Modifier le salaire du NumEmp 1 de 2500 à 3000
…………………………………………………………………………………………………………………………
…………………….
…………………………………………………………………………………………………………………………
…………………….
Q7 : supprimer les données du NumEmp 6
…………………………………………………………………………………………………………………………
……………………….
…………………………………………………………………………………………………………………………
……………………..
…………………………………………………………………………………………………………………………
…………………………
Q8- : supprimer la colonne Prime
…………………………………………………………………………………………………………………………
…………………………
…………………………………………………………………………………………………………………………
……………………………
…………………………………………………………………………………………………………………………
…………………………..
177
Esp32 & iot
Définitions :
C’est quoi un robot ?
Les robots sont des dispositifs ………………….. et ………………….. composés de

Relation entre la programmation et les robots
.......................................................................................................................................................
collectant
La programmation
certaines données permet (par exemple, de donner des instructions
l’inclinaison ou la distance) aux robots sur la manière
et capables de
de modifier
collecter les informations
de l’environnement (…………………..), de.........leurs actions et...................par le biais des

………………….. qui vont faire réaliser des actions au robot (mouvements, lumière, sons,
...................................................................................................................).
Qu’est ce que l’Internet des objets?
L'Internet des objets (IoT) désigne l'interconnexion de millions d'appareils et de capteurs

intelligents connectés à Internet. Ces objets (capteurs et ces appareils ) connectés
collectent et partagent des données qui seront utilisées et analysées par plusieurs
organismes, dont des entreprises, des villes, des gouvernements, des hôpitaux et des
particuliers
Domaine d’utilisation de l’Internet des objets
Santé Maison
Sport
Loisirs
Domaine de
l’Internet
des Objets
Transport
Animaux
Industrie
Comment se compose un système IoT ?

• Un système IoT réunit de nombreux acteurs et composants technologiques. Il est
composé
• 1-d’objets connectés,
178
• 2-de réseaux de communication sans fil,
• 3-de plateformes de collecte/d’hébergement/de traitement des données,
• 4-d’applications/services pour les
utilisateurs finaux et d’une
supervision/sécurisation de toute la chaîne.
Les 5 composantes de l’IoT
• Une solution d’IoT s’articule autour de 5 composants essentiels que sont :
• Les objets (capteurs),Le réseau (connectivité),Les données, Les informations, Les
applications
d’exploitation.
Les objets communicants
Un objet communicant est un objet capable d’interagir en autonomie avec son
environnement et d’échanger de lui-même (sans intervention humaine) des
informations avec des utilisateurs ou d’autres objets. On distingue 2 types : les objets
communicants non connectés et les objets communicant connectés (ou encore
«objets connecté»)
Object Communicant
Objet communicant
Objet communicant
non connecté connecté
L’objet connecté est d’abord un objet qui a une fonction mécanique et/ou électrique
propre, il peut soit être
conçu directement « connectable », soit il est déjà existant et la connectivité est rajoutée
à postériori.
L’objet connecté a pour fonction de collecter des données de capteurs, de traiter ces
données et de les
communiquer à l’aide de d’une fonction de connectivité et de recevoir des instructions
pour exécuter une
action. Généralement ces fonctions de l’objet connecté nécessitent une source d’énergie,
surtout quand les
données sont prétraitées directement dans l’objet.
179
Architecture d’un object communicant
180
Exemple de cartes programmable :
La carte microbit La carte arduino La carte esp32
La carte ESP 32
C’est une puce de type SOC(System On Chip) mise sur un ………………….. et une de
développement permettant de créer facilement des projets. La carte ESP32 est mise sur un
module qui
s’appelle WROOM32 et sur une plateforme de développement qui
s’appelle DEVKIT V1. Description :
181
Présentation
L’ESP32 des cartes
est une petite ESP32 :
carte électronique, appelée microcontrôleur, facile à prendre
en main grâce à ses
ressemblances avec la carte Arduino qui est bien plus répandue. L’ESP32 peut avoir
différentes tailles.
Généralement, ces cartes ont deux types :
1. Development Board ou ESP32 DB (Annexe.Fig1) : c’est la version avec laquelle
nous allons travailler.
2. Wrover Kit ou ESP32 WK (Annexe.Fig2) : qui est un peu raffinée par quelques
extensions (port caméra
intégré, SD card, powerjack, écran LCD …)
Qu’est ce qu’un microcontrôleur ?

Les cartes microcontrôleur sont des petits circuits dotés d’entrées/sorties
programmables. Elles permettent l’acquisition de données provenant de capteurs, l’envoi
de signaux de données ou le contrôle de circuits de puissance. De nombreuses
utilisations sont possibles grâce à des modules complémentaires qui se branchent sur les
broches (pins) de la carte (capteurs, leds, écrans, etc.).
Utilité mentionné
Comme des cartesprécédemment,
ESP32 : l’ESP32 est une carte électronique permettant de
réaliser des projets «IoT» (Internet Of Things) assez facilement (exp. Domotique,
agriculture intelligente, météorologique …). Par ailleurs, elle mesure moins de 3 cm par 5
cm, malgré les technologies qu’elle embarque! L’ESP32 est sans doute la carte
microcontrôleur qui possède le meilleur compromis taille / connectivité / entrées sorties.
Cela en fait un outil redoutable pour la miniaturisation des projets connectés.
Pour finir elle est aussi tout à fait adaptée à la réalisation de prototypes (que nous
allons appliqués au niveau de ce chapitre) et non uniquement à la réalisation de projets
«finis et définitifs».
Connectivité sur cartes ESP32 :

182
L’ESP32 est une solution intéressante dans l’IoT, car elle contient au sein de son
architecture un module WiFi intégré. Dans cette mesure, et donc sans avoir besoin de
monopoliser des broches en ajoutant un module WiFi externe, l’utilisateur va être
capable de connecter son objet IoT à Internet grâce à trois lignes de codes (pour les
réseaux domestiques classiques).
Un second atout majeur de l’ESP32 est sa puce Bluetooth intégrée, qui peut aussi être
utilisée en mode «BLE»
(Bluetooth Low Energy) consommant moins d’énergie.
Côté entrées et sorties, l’ESP32 est semblable aux cartes Arduino et aux cartes
Raspberry. On relève en effet l’utilisation des ports GPIO (General Purpose Input/Output)
(Annexe.Fig.3) qui sont des broches permettant de servir soit d’entrée, soit de sortie
selon le programme téléversé.
Installation
Passons des cartes
maintenant ESP32 et
à l’étape Ecriture
la plus des codes
importante de: ce chapitre : comment programmer
une carte ESP32
Pré-requis :
 Carte Esp32
 Cable data
 Câble smartphone
 Logiciel thonny pour python : https://thonny.org/
 Esptools : https://github.com/espressif/esptool/
 Firmware bin pour esp32 : https://micropython.org/resources/firmware/esp32-
20220117-v1.18.bin
 Micropython : https://micropython.org/resources/source/micropython-1.18.zip
 (MicroPython est une adaptation du langage Python pour les cartes de développement
ESP8266, ESP32,…)
Démarche à suivre :
 Etape 1 : installer Thonny
 Etape 2 : installer esptools pour Thonny
 Etape 3 : relier la carte au PC
 Etape 4 : installer le firmware sur esp32 en le mettant en download mode
(bouton EN ensuite bouton boot(IOO))
Programmation de la carte :
Pour programmer la carte on peut utiliser les environnements de développement

suivants : Arduino IDE, Thonny IDE, uPyCraft, Espressif IDF (IoT Development
Framework), Micropython, JavaScript, LUA, Zerynth studio …
Dans les projets à réaliser on va utiliser essentiellement Thonny pour programmer la carte
ESP32.
Ecriture des codes :
 Commencer par créer un nouveau fichier
183
 Saisir un code d’un tel programme avec le langage Microphyton.
 Enregistrer le fichier: fichier -> enregistrer sous -> Save ou
cliquer sur le bouton "Save"
 Choisir "Cet ordinateur" ou "appareil MicroPython" pour
enregistrer directement dans la carte ESP32.
 Choisir le nom main puis cliquer sur le bouton "Ok"
Remarque : Il est recommandé d'écrire le code principal à exécuter dans un fichier

"main.py" pour être exécuté immédiatement après "boot.py"
 Pour lancer le code il suffit de cliquer sur le bouton " Exécuter le script courant" (F5).
Activité1 : Allumé une diode led
Led:light emitting diod
184
Activité2 : Clignotement d’une diode led
Code :
185
Activité 2 :
Remarque :led.on() est équivalent à led.value(1) et led.off() est équivalente à led.value(0)

Activité 3 :Clignotement de 3 diodes leds
186
Activité 4: GpiotouchPad: (la fonction if)
Code:
Activité 4:PWM(Pulse with modulation) et la boucle for (fade in et fade out)

Faire apparaitre /disparaitre graduellement (modifier l’intensité
lumineuse d’une led)
187
188
Explication du pwm:
Si Si i=128 led.duty(128)la tension est

i=0led.duty(0)0 à 5v le
v le led est éteint moitier du temps-la
s tension=5*5.%=5*0.5=2.5 volts
Activité 5:jeu de lumière avec couleur aléatoire en utilisant une

diode RGB
Module du diode RGB

(pas besoin de résistances ,
ils sont intégrés)
Rouge-au pin 2
Vert-au pin
23 Bleu au
pin 22
Le (-) au gnd de l’esp 32
Code :
189
Activité 6 : afficher la température et l’humidité (capteur Dht11)
+-au pin 3v
-au pin GND
Bleu au pin
22
Le (-) au gnd de l’esp 32
Le signal -au pin 23
Code :
190
Projet : commander une diode led via wifi
191
192
193
194
195
196
Introduction aux réseaux informatiques
Activité
1:
1. Définir les termes suivants : réseau téléphonique, réseau SONEDE et réseau de

transport.
2. On veut copier un dossier d’un PC1 vers un PC2. Que doit-on utiliser ?
3. On veut copier un dossier du PC du professeur vers 15 PC des élèves. Que doit-on
faire ?
4. Après le traitement d’un texte, tous les élèves doivent imprimer leurs documents.
Donc chaque poste doit disposer d’une imprimante. Est-ce que c’est une solution
idéale ? Proposer une solution non coûteuse.
5. Dégager la définition du réseau informatique.
6. Quels sont les avantages d’un réseau informatique ?
7. Qu’elle est la différence entre ces deux réseaux ?
Activité 2 :
Classer les réseaux ci-dessous suivant l’étendue géographique :
- Un réseau entre les différents points de vente d’un magasin situés dans une même
ville,
- Un laboratoire d’informatique d’un lycée,
- Un réseau d’un cabinet médical,
- Un réseau Internet,
- Un réseau bancaire.
- Un réseau entre un ordinateur portable et un ordinateur de bureau dans une maison
Application : Nommer le type de chaque réseau :
…………………. …………… …………………. ……………..

Activité 3 :
Quelle est la différence entre ces deux réseaux ?
Dans le 1er réseau, tous les ordinateurs demandent les services d’un seul ordinateur
nommé « serveur»
Dans le deuxième réseau, chaque ordinateur peut demander un service d’un ordinateur et
peut aussi le servir
197
198
I-Définition d’un réseau informatique
C’est un ensemble d’équipements informatiques (ordinateurs, imprimantes, etc)
reliés entre eux par des supports de communications (câble, ondes) pour échanger
des données ou partager des ressources matérielles et logicielles.
On distingue deux catégories de réseaux :
Réseau câblé: si les ordinateurs sont reliés par des câbles
Réseau sans fils: s’ils sont reliés par des ondes
II-Intérêts d'un réseau
Communication plus efficace (chat, mail, forum, etc).
Diminuer les coûts grâce au partage de ressources
matérielles et logicielles. Partager des données et des
applications
Centraliser les données(base de données
en réseau). Le jeu vidéo multi-joueurs
III- Types des réseaux
Activité 2 (voir tp)
Les réseaux informatiques peuvent être classés suivant leurs
étendus géographiques. On trouve principalement :
réseau personnel
(PAN), réseau local
(LAN),
réseau métropolitain
(MAN) et réseau
étendu (WAN).
1- PAN (Personal Area Network):
Réseau de l'ordre de quelques mètres (autour d’une personne).
Exemple: réseau entre un ordinateur portable d'une personne et son ordinateur du
Bureau.
2-LAN (Local Area Network):
Il relie des ordinateurs et des dispositifs situés dans un espace réduit
(Quelques dizaines de mètres).
Exemple : laboratoire d'informatique du lycée, réseau dans un même bâtiment.
3- MAN (Metropolitan Area Network):

Il interconnecte plusieurs LAN géographiquement proches (quelques
dizaines de km) au niveau de la même ville.
Exemple: réseau entre 3 entreprises se trouvant dans la même ville.
4-WAN (Wide Area Network):
Réseau entre des LANs et MANs à très grande distance (régions, pays).
Exemple: Internet
IV- Architectures des réseaux
Activité 3 :voir tp
Selon le mode de configuration des postes, on distingue deux types de réseaux:
1- Architecture client/serveur
Le principe d’un environnement Client/Serveur est basé sur le fait que des machines
clientes communiquent
avec un serveur qui leurs fournit des services( impression, page
web, fichier , ...) 2- Architecture poste à poste (peer to peer
(P2P) ou égale à égale)
199
Dans cette architecture, chaque poste joue le rôle de serveur et de client à la fois .
200
Protocoles réseaux
I- Présentation du modèle
OSI :
Avec l’évolution de l’informatique, le nombre et la taille des réseaux ont augmenté
considérablement, ce qui à provoque une incompatibilité entre les nombreux
réseaux d’où il est devenu difficile d’établir des communications entre eux. Pour
résoudre ce problème, l’organisation internationale de normalisation à
mis en place un modèle réseau permettant de mettre en œuvre des réseaux capable
de communiquer entre eux : c’est le modèle OSI (Open System Interconnexion).
Le modèle OSI représente 7 couches, chacune à une fonction réseau prédéfinie.
II-1 ) Les Couches du modèle OSI :
1. La Couche Physique :
Dans cette couche Physique, on atteint le matériel. C’est
par elle que passe le réseau filaire, qui relie un ordinateur
à un autre. Cette couche s’occupe donc du câblage, des
connecteurs, des signaux électriques et du flux de 0 et de
1 comme elle assure le transport des bits sur les supports
physique.
2. La Couche liaison :
Cette couche est responsable de l’acheminement sans
erreurs de blocs d’informations sur la liaison physique
Cette couche est divisée en 2 sous couches :
 La couche MAC (Medium Access Control) qui a pour rôle de gérer l’adressage physique
des cartes réseaux.
 La couche LLC (Logical Link Control) qui s’occupe de transfert des trames (séquence des
bits) entres les stations du réseau.
3. La Couche Réseau :
Elle s’occupe de trouver un chemin pour acheminer un paquet de données entre deux
stations qui ne sont
pas sur le même support physique : La fonction de routage.
4. La Couche Transport :
Cette couche permet :
 De segmenter les données envoyées par la machine source en paquets et les
rassembler en flux de données sur la machine destinatrice.
 De fournir une livraison de bout en bout (communication entre émetteur et
récepteur), qui inclut un accusé
de réception issu de l’ordinateur destinataire pour signaler que le message est arrivé sans
erreur.
5. La Couche Session :
 Cette couche est responsable de l’organisation (ouverture et fermeture des sessions entre
deux machines en
communication) et de la synchronisation des échanges entre utilisateurs.

6. La Couche Présentation :
Cette couche s’occupe de la présentation des informations, c’est à dire, elle assure que les
informations
envoyées par la couche application d’un système sont lisibles par la couche application
d’un autre système.
7. La Couche Application :
201
C’est la couche la plus proche de l’utilisateur, elle fournit les applications tel que
(Courriers électronique, transfert des fichiers…).
8. Avantage de découpage en couche :
Le découpage en 7 couches présente les avantages suivant :
 Il permet de diviser les communications en éléments plus petits et plus simples, ce qui
permet de les comprendre plus facilement.
202
 Il uniforme les éléments du réseau ;
 Il permet à différents types de matériels et logiciels de communiquer entre eux ;
II- Le modèle TCP/IP
III-1) Présentation du modèle TCP/IP :
La naissance et l’évolution d’Internet ont donné le jour à un autre modèle de référence :
Le TCP/IP ou modèle
de référence Internet.
Contrairement au modèle OSI, ce modèle n’est pas fondé sur le concept de session de
communication entre deux nœuds bien identifiés. Le modèle TCP/IP reflète le monde de
la communication inter-réseau, où
interviennent un transfert et un routage d’informations entre stations de travail et réseaux
différents.
III-2) Vue en couche de TCP/IP :
 La couche matérielle correspond aux couches 1 et 2 du modèle OSI
 Les Couches Interconnexion et interface réseau (la couche Internet) correspondent à la
couche 3 du modèle OSI
 La couche transport correspond à la couche 4 du modèle OSI
 La couche application correspond aux couches 5, 6 et 7 du modèle OSI
 La couche IP (Internet Protocol) gère l’adressage et assure l’acheminement (Routage)

des paquets d’une
machine à une autre.
 La couche TCP (Transmission Control Protocol) gère les erreurs et les contrôles du flux.
III-3) Identification des machines :

Pour établir une communication l’émetteur doit disposer des informations nécessaires pour
identifier le
récepteur.
Ces informations se présentent sous forme d’une adresse qui peut être un numéro où une
chaîne.
Une machine est identifiée par deux adresses : adresse physique et adresse logique.
Adresse physique ou MAC (Medium Access Control) : c’est un identifiant physique stocké
dans une carte
réseau. Il est codé sur 6 octets représentée sous la forme
hexadécimale Exemple : 5E:FF:56:A3:AE:15
Retenons :
Une adresse IP est codée sur 4 octets (32 Bits)
L’adresse IP est composée de 2 parties:
203
L’identifiant du réseau
L’identifiant de la machine
Exemple
En mode binaire : 1001011.01101001.00100100.01000101
204
En mode décimale :155.105.50.69
Le plus courant, cette adresse est représenter sous forme décimale pointé W.X.Y.Z où
w,x,y et z sont quatre chiffre entre 0 et 255. Cette adresse peut être lue de 4 façons :
 La machine d’adresse W.X.Y.Z ; ou
 La machine d’adresse Z du réseau W.X.Y.0 ; ou
 La machine d’adresse Y.Z du réseau W.X.0.0 ; ou
 La machine d’adresse X.Y.Z du réseau W.0.0.0 ;
La décomposition d’une adresse IP en adresse de réseau + une adresse machine
ne se fait pas au hasard ;
Donc pour voir si l’adresse du réseau est codée sur 1,2 ou 3 octets, il suffit de regarder la
valeur du premier
octet (ou seulement les premiers bits du premier octet (en mode binaire)) :
Clas Valeur du Valeur Largeur de Nombre Nombre max
se premier des l’adresse de de des
octet premiers réseau réseau machines
Bits x
A 0-127 0 1 octet 127 167772
16
B 128- 10 2 octet 16384 65536
191
C 192- 110 3 octet 20971 256
223 52
D 224- 1110
239
E 240- 1111
255
Remarque:
Pour chaque classe d’adresse, on trouve des plages d’adresse non routable (réservé pour
les réseaux locaux).
Le tableau suivant représente les adresses NON routable pour chaque classe :
Clas Plages d’adresse non routable
se
A 10.0.0.1 à 10.255.255.254
B 172.16.0.1 à 172.31.255.254
C 192.168.0.1 à 192.168.255.254
Masque du réseau:
Afin de bien identifier la partie de l’adresse représentant le réseau et celle représentant la
machine, on utilise
un masque réseau composée de 32 bits (4 octets).
Les bits représentant le réseau sont positionnés à 1 et les bits représentant la machine
sont positionnés en 0. Exemple : le masque pour un réseau de classe B à la forme
suivante :
Masque : 11111111 11111111 00000000 00000000.
La valeur du masque en mode décimale est :
255.0.0.0 pour la classe A
205
255.255.0.0 Pour la classe
B 255.255.255.0 Pour la
classe C.
Note bien :Pour savoir l’adresse ip de notre machine on peut le savoir en ligne :
http://www.mon-ip.com/
206
adresse ip locale. C'est ce qui permet d'identifier votre appareil (PC, tablette,
telephone, portable ...) sur votre réseau local.
Attention à ne pas confondre adresse IP publique qui vous est attribuée par votre
Fournisseur d'accès Internet (FAI) et l'adresse IP locale de votre pc qui est en général
attribuée par votre Box ou routeur via son DHCP.
Ou en utilisant :la commande ipconfig dans l’invite de commande

1-(windows +R) puis on écrit cmd puis la commande ipconfig
Adresse IP dynamique : Il s'agit d'une adresse qui n'est pas statique et qui peut
changer à tout moment. Cette adresse IP vous est distribuée à partir d'un groupe
d'adresses IP affectées à votre ISP ou serveur DHCP. C'est pour un grand nombre de
clients qui n'ont pas besoin de garder la même adresse IP tout le temps et cela pour des
raisons variées. Votre ordinateur obtient automatiquement ce numéro lorsqu'il se
connecte au réseau et cela vous épargne l'ennui d'avoir à connaître les détails des
configurations du réseau en question. Ce numéro peut être attribué à toute personne
utilisant une connexion téléphonique, des connexions internet sans fil et à haut débit. Si
vous devez gérer votre propre serveur d'e-mail ou serveur web, il vaut mieux avoir un IP
statique.
Adresse IP statique : une adresse IP qui est fixe et ne change jamais. Cela contraste
avec l'adresse dynamique qui peut changer à n'importe quel moment. La plupart des FAI
offrent une seule adresse IP statique ou un groupe d'IP statiques pour quelques dollars
supplémentaires par mois.
207
Si on n’utilise pas le serveur DHCP,On peut changer notre addresse Ip
manuellement
En accédant au propriété de notre réseau
Puis on choisit propriétés

Fig 1 :
Fig2:
Fig 4
Cas 1 :Chez vous pas besoin de faire la configuration pour identifier votre appareil sur
le réseau ,le serveur ou le protocol DHCP se charge de ça.de même pour le serveur DNS
(domain name system) (fig 4)ceux deux options sont cochées par défaut.
DHCP signifie Dynamic Host Configuration Protocol. Il s'agit d'un protocole qui
permet à un ordinateur qui se connecte sur un réseau d'obtenir dynamiquement (c'est-
à-dire sans intervention particulière)
Fig 3 Puis on choisit internet protocol TCP /IP v4
208
Le serveur DNS permet d’associer un nom compréhensible, à une adresse IP. On associe
donc une adresse
logique, le nom de domaine, à une adresse physique l’adresse IP.
Le Serveur faisant autorité : serveur DNS qui connait le contenu d’un domaine. (Les
serveurs de l’AFNIC connaissent ce qu’il y a dans .Fr et peuvent répondre).
Le serveur DNS (Domain Name System, ou Système de noms de domaine en français)
est un service dont la principale fonction est de traduire un nom de domaine en
adresse IP.
Pour simplifier, le serveur DNS agit comme un annuaire que consulte un ordinateur au
moment d'accéder à un autre ordinateur via un réseau.
Cas 2 :Au lycée ou dans d’autre établissement utilisant un proxy on doit
configurer les adresses ip manuellement ,le masque sous réseau ainsi que la
passerelle les serveurs dns.
Note bien :dans le cas si on configure manuellement les adresses IP. Elles doivent être
Exemples :Ip pour pc1 labo 2 :172.16.100.1 Ip pour pc 2 labo 2 :172.16.100.2
unique.
Le proxy
Un proxy est un composant logiciel qui joue le rôle d'intermédiaire en se plaçant
entre deux hôtes pour faciliter ou surveiller leurs échanges.
un proxy est alors un programme servant d'intermédiaire pour
accéder à un autre réseau, généralement Internet.
III-4) Passage des adresses IP aux adresses physiques :
Dans un réseau local, chaque machine dispose d’une adresse physique unique (Adresse
MAC), cette adresse
dépend du matériel utilisé pour mettre la machine en réseau.
Dans un réseau TCP/IP chaque machine est identifiée par une adresse IP. Cette
adresse est logique, elle ne dépend pas du matériel et peut être modifié par les
administrateurs.
Dans un réseau local une machine ne peut envoyer une information à une autre
machine que si elle connaît son adresse physique. Il faut donc trouver un système qui
permet de convertir l’adresse logique IP en une adresse physique.
III-6) Routage:
Le Routage est l’un des rôles de la couche 3 : acheminer les informations d’un réseau à
un autre. Les réseaux sont reliés entre eux à l’aide de routeurs.
209
Tous les réseaux ne sont pas directement reliés, il faut passer par des réseaux
intermédiaires.
210
Toutes les machines (y compris les routeurs) possèdent une table de routage qui
contient des routes. Une route contient les paramètres pour déterminer par quel
routeur ou passerelle il faut passer pour accéder à un réseau donné.
Les protocoles pour chaque couche du modèle TCP/IP
Rôle de chaque couche :
http :hyper Texte Transfer Protocol : est un protocole qui permet de récupérer des
ressources telles que des documents HTML. Il est à la base de tout échange de
données sur le Web. C'est un protocole de type client- serveur, ce qui signifie que
les requêtes sont initiées par le destinataire (qui est généralement un navigateur web.
smtp:simple mail Transfer Protocol ftp:file transfer protocol
Note bien:
Un programme utilise un port pour envoyer ou recevoir
des données à travers le réseau. Les ports sont codés
sur 16 bits. Il en existe donc 65536. Lorsqu'un
ordinateur reçoit des informations du réseau, il
identifie à quelle application il doit les envoyer grâce
au numéro de port.
Les ports de 0 à 1023 sont les ports "reconnus",
généralement réservés aux processus système
(démons) ou aux ports du serveur. Par exemple, le
port 80 correspond au protocole HTTP, c'est-à-dire à
la connexion d'un serveur HTTP avec un navigateur
Web.
211
CP regroupe un ensemble de protocoles comme HTTP, FTP, SMTP..
212
Configuration et administration d’un réseau local
I-Introduction
Après installation des composants matériels d’un réseau local, il faut faire une
configuration pour que les
postes puissent communiquer.
II-Configuration logicielle d’un réseau poste à poste
Dans un réseau poste à poste, chaque poste peut jouer le rôle d’un
serveur et d’un client. L’organisation des postes se fait sous forme de
groupe de travail(WORKGROUP).
Pour que les postes puissent communiquer, il faut :
Installer et configurer les cartes
réseaux. Ajouter et configurer
les protocoles.
Attribuer une adresse IP pour chaque poste (manuellement ou automatiquement).
1-Configuration d’une carte réseau

Gestionnaire de périphérique  carte réseau
2. Attribution d'une adresse IP

Activer la commande "Connexions réseau" du "Panneau de configuration".
Sélectionner la commande "Protocole Internet (TCP/IP)" et cliquer sur le bouton
"Propriétés".
Sélectionner l'option "Utiliser l'adresse IP suivante" et entrer l'adresse "192.168.0.x"
(où x désigne le numéro d'un ordinateur dans le laboratoire)
Dans la zone "Masque de sous-réseau", faites entrer la
valeur 255.255.255.0 Valider
3. Configuration des noms des ordinateurs et du groupe de travail
Dans un réseau local les ordinateurs doivent appartenir à un même groupe de travail
pour pouvoir dialoguer. Un groupe de travail est un ensemble d'ordinateurs regroupés
pour une fonction commune.
Les membres d'un groupe de travail peuvent utiliser les imprimantes et les dossiers
partagés à l'intérieur du groupe
Chaque groupe de travail a un nom qui lui est propre.
Pour définir un groupe de travail dans un ordinateur, on
procède comme suit: Cliquer avec le bouton droit de la souris
sur le poste de travail.
Choisir l'onglet "nom de
213
l'ordinateur". Cliquer sur le
bouton "modifier"
Entrer les informations nécessaires et valider.
4-Partage de répertoire
Cliquer bouton droit sur le dossier
214
Partage et sécurité
Préciser les droits d’accès (lecture, écriture ou les deux).
Valider
b-Accès aux données

Favoris réseau dossier partagé
5-Comment sécuriser un réseau?
Un pare-feu (de l'anglais firewall) est un logiciel et/ou un matériel qui surveille et
contrôle les applications et les flux de données (paquets).
215
216

séance-1-3-ème-sti 2023-2024fv3

Transféré par

Droits d'auteur :

Formats disponibles

séance-1-3-ème-sti 2023-2024fv3

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

séance-1-3-ème-sti 2023-2024fv3

Transféré par

Droits d'auteur :

Formats disponibles

Partie I :

Pages 2...16 Rappel html

Ce code on l'appelle html

Un fichier HTML contient la Un fichier CSS contient le Un fichier JavaScript

Sublim Notepad++ jedit visual BlueGriffon Page breeze Adobe

Modifier le code affiche exemple :ajouter un titre page1 et modifier le contenu du

I-Structure de base d’une page HTML

html Elle englobe tout le contenu de la page.

head Elle sert à définir quelques informations générales sur la page.

II-Organisation et mise en forme d’un texte

Activité4:Lancer Visual code

<em> </em> Mettre le texte

<dl> Liste de données

3) Les attributs : les options de balise, informations supplémentaires : <balise

<ul type="square"> : pour donner des puces carrés.

 Les différents formats d'images

La balise doit être accompagnée de deux attributs obligatoires :

 Ajouter une infobulle

l'image dans un paragraphe<p>.

Activité 5: Ajouter une image du logo html5

url absolue url relative :

Le code correspondant à l’insertion de l’image en rendant l’url relative au

Code source html :

 Pour insérer un audio (exemple : video.mp4), on utilise la balise suivante :

4) Insertion d'un tableau

Exemple :HTML Preview

3) En déduire le rôle de chaque balise.

Pour créer un lien hypertexte, on utilise la balise :

3) Le lien vers un ancre

1. Il faut créer une ancre en ajoutant l'attribut id pour « marquer » l’endroit

<h2 id="ancre">texte</h2> <a href="#ancre">

2. Faire un lien vers l'ancre comme ceci :

3) Enregistrer votre travail dans D:/votre dossier/html5 et css3/ tp1.html

En déduire le rôle de chaque balise.

Le résultat final de la page est le suivant :

10) Rechercher comment modifier le couleur du fond de votre page

Ctrl+s :pour sauvegarder

Méthode1 : j’écrit le nom du balise avec le signe inférieur h1 :<h1>

Méthode2 : j’écrit le nom du balise sans le signe inférieur et je choisis parmis la l

des balises proposées et je valide

6) Ajouter les lignes suivantes dans la balise head.

11) Visualiser votre travail, que remarquez-vous ?

Vous avez le choix entre trois endroits différents :

Interne En ligne Externe

Dans un fichier .css (recommandé)

On écrit le code CSS dans un fichier spécial ayant

- Et la balise suivante dans le fichier « page1.html » :

Résultat : A chaque utilisation de la balise <p> dans

Reprenons l’exemple Le sélecteur est généralement l’élément HTML (nom du

p { auquel on applique un style (exp..

color : blue paragraphe <p>) Une propriété détermine

Lorsqu’on a, par exemple, le cas suivant : On peut l’écrire de

Selecteur_de_balise.Nom-de-la-classe { propriété-de-style: Valeur;

Où « Nom-de-la-classe » représente le nom donné à la classe.

b.Rouge { font-family : Verdana ; color : red ; }

Appel d'une classe :

<b class="Rouge"> Texte à mettre en rouge et en gras </b>

.important { font-family : Verdana ; color : red ; }

L’attribut id fonctionne exactement de la même manière que class mais il ne

è Pour appeler ce style dans la page HTML, on indiquera id="introduction" à