Livre 1ère TI

Collection Constellation
Informatique
Informatique
en 1ère
TI
1ère TI
ENS - DITE - 2013

Informatique
en 1ère
TI
ABOLO AMBASSA ANGELO
Licencié en Sociologie
ATOUBA MINSE LEONCE DAVY

Licencié en Management
GUENTANG GUEGABA PIERRE FREDERIC

Licencié en Informatique
NGNABANG MARIE NOEL

Licencié en Droit
Sous la direction de :
Dr Adolphe AYISSI ETEME
ENS - DITE - 2013

AVANT-PROPOS
L’introduction de l’informatique dans le système éducatif camerou-

nais fut en réalité la pose de la première pierre pour la réalisation d’un
vaste projet visant à intégrer la pratique et l’usage quotidiens des TIC
dans les mentalités des populations. Ce projet a pour objectifs de permet-
tre au Cameroun de s’arrimer aux dernières évolutions technologiques et
surtout de former des citoyens ouverts au monde de la haute technologie.
L’introduction de l’informatique comme discipline à part entière dans
l’enseignement secondaire général au Cameroun vient ainsi enclencher
un certain nombre de processus parmi lesquels : l’élaboration des pro-
grammes pour toutes les classes ; le choix des contenus à enseigner ;
l’acquisition des infrastructures ; la formation des enseignants qui dis-
penseront la matière et bien d’autres projets encore. C’est donc à juste ti-
tre que nous élèves-professeurs de la 52ième promotion de l’école Normale
Supérieure (ENS) de Yaoundé, en filière informatique, devons contribuer
à l’élévation de cet édifice, en concevant et en réalisant des manuels
d’enseignement de l’informatique pour les classes de l’enseignement
secondaire général. Ces manuels, en toute logique, prennent appui sur le
nouveau programme d’informatique en vigueur depuis Septembre 2011.
Par conséquent, la production d’un livre d’informatique pour la classe de
première TI permettra d’optimiser l’enseignement de l’informatique et de
contribuer à la valorisation des TIC, dans la mesure où ce livre propose
des ressources d’enseignement de l’informatique au secondaire.
Les auteurs
Manuel de Première TI
TABLE DES MATIÈRES

TOME 1 : inFORMatique..............................................................................6
MODULE 1 : ALGORITHMIQUE ET PROGRAMMATION WEB..........................7

CHAPITRE 1 : PRATIQUER L’ALGORITHMIQUE..................................................................8
Introduction...........................................................................................................................12
I. Etapes de résolution d’un problème..................................................................................12
II. Structure générale d’un algorithme..................................................................................15
III. Outils en algorithme........................................................................................................28
IV. Les structures en algorithme............................................................................................35
V. Les fonctions et les procédures........................................................................................48
VI. Récursivité.......................................................................................................................62
CHAPITRE 2 : PROGRAMMER LES PAGES WEB STATIQUES HTML...................................79

I Introduction au langage HTML...........................................................................................81
II. Les outils de developpement de pages Web.....................................................................84
III. Structure d’un document HTML.......................................................................................86
IV. Les balises du langage HTML.........................................................................................87
CHAPITRE 3 : PRODUIRE UNE FEUILLE DE STYLE.........................................................115

I. Introduction aux feuilles de style....................................................................................117
II.. Attributs et proprietes de mise en forme.......................................................................118
III. Creation des feuilles de style........................................................................................121
IV. Joindre le fichier de style et les pages html..................................................................125
V. Inserer des commentaires dans une feuille...................................................................126
VI. Liste des proprietes.......................................................................................................127
VII. Appliquer un style........................................................................................................131
CHAPITRE 4 : PROGRAMMER EN JAVASCRIPT................................................................142

I. Introduction au langage javascript .................................................................................144
II. Le formalisme de base du javascript.............................................................................146
III. Les objets JavaScript....................................................................................................147
IV. Les variables.................................................................................................................152
V. Les operateurs predefinis..............................................................................................155
VI. Les entrees/sorties en JavaScript................................................................................157
VII. Les structures de controle ...........................................................................................158
VIII. Les fonctions en JavaScript........................................................................................164
IX. La gestion des evenements en JavaScript ...................................................................166
X. Les formulaires en JavaScript.......................................................................................171
XI. Les cookies...................................................................................................................178
PROJET 1 : REALISER ET PUBLIER UN SITE WEB STATIQUE...................189
MODULE 2 : INFOGRAPHIE.......................................................................197
CHAPITRE 5 : PRESENTATION DE L’INFOGRAPHIE .......................................................198
Introduction.........................................................................................................................200
I. L’infographie : Qu’est ce que c’est ?...............................................................................201
II. A quoi cela sert l’infographie..........................................................................................203
III. Le matériel qu’il utilise...................................................................................................205
IV. Activités basées sur Photoshop.....................................................................................211
CHAPITRE 6 : CREATION DES TEXTES AVEC EFFETS ..................................................217

Introduction.........................................................................................................................219
I. Les modifications que peuvent subir un texte ?..............................................................219
II. Mise en exergue dans un logiciel d’infographie : Photoshop..........................................222
4
CHAPITRE 7 : RETOUCHE D’UNE PHOTO ET CREATION DE BOUTON..............................231

Introduction........................................................................................................................233
I. Anomalies et modification dans l4entreprise..................................................................233
II. Paramètres de la création des boutons..........................................................................236
III. Adaptation dans un logiciel d’infographie : Photoshop.................................................237
CHAPITRE 8 : CREATION DES ANIMATIONS...................................................................249

Introduction........................................................................................................................249
I. Notion d’animation..........................................................................................................251
II. Création d’une animation...............................................................................................254
PROJET 2 : REALISER UNE SEQUENCE PUBLICITAIRE..............................264
MODULE 3 : CONNAISSANCE DE L’ENVIRONNEMENT D’UN ORDINATEUR...268

CHAPITRE 9 : LES ELEMENTS DE BASE D’UN ORDINATEUR..........................................269
I. LAstructure de l’ordinateur..............................................................................................271
II. Catérosisation des types de périphériques....................................................................282
III. Logiciels et domaines d’application de l’informatique...................................................286
CHAPITRE 10 : MONTAGE D’UN ORDINATEUR..................................................................297

I. Les précautions à prendre..............................................................................................300
II. Les étapes du montage..................................................................................................302
CHAPITRE 11 : INSTALLATION D’UN SYSTEME D’EXPLOITATION..................................327

I. Description et rôles du système d’exploitation................................................................330
II. Les types de système d’exploitation;..............................................................................335
III. Exemples de système d’exploitation : WINDOWS et LINUX...........................................337
CHAPITRE 12 : ENTRETIEN D’UN ORDINATEUR.............................................................359

I. Le cas des ordinateurs de bureau....................................................................................361
II. Le cas particulier des ordinateurs portables...................................................................363
GLOSSAIRE...................................................................................................................371
REFERENCE..................................................................................................................373
5
Tome 1
inFORMatique
MODULE 1 : ALGORITHMIQUE ET PROGRAMMATION WEB.................................7
MODULE 2 : INFOGRAPHIE............................................................................197
MODULE 3 : CONNAISSANCE DE L’ENVIRONNEMENT D’UN ORDINATEUR.......268

Module 1
ALGORITHMIQUE ET PROGRAMMATION WEB
COMPETENCES
- Ecrire des algorithmes corrects pour résoudre un problème réel
- Connaître et utiliser des balises du langage HTML
- Connaître la syntaxe des feuilles de style
- Connaître et écrire des programmes en langage JavaScript
CHAPITRE 1 : PRATIQUER L’ALGORITHMIQUE...................................................8
CHAPITRE 2 : PROGRAMMER LES PAGES WEB STATIQUES HTML....................79
CHAPITRE 3 : PRODUIRE UNE FEUILLE DE STYLE..........................................115
CHAPITRE 4 : PROGRAMMER EN JAVASCRIPT.................................................142

1
Chapitre
PRATIQUER L’ALGORITHMIQUE
“Votre temps est limité, ne le passez pas à vivre la vie de quelqu’un d’autre. Ne vous
enfermez pas dans des dogmes – ce qui correspondrait à vivre avec les pensées des
autres. Ne laissez pas le bruit ambiant influencer vos opinions et la petite voix en
vous. Et au delà de toutes ces choses, ayez le courage de suivre votre cœur et vos in-
tuitions. D’une manière ou d’une autre, elles savent déjà ce que vous voulez devenir.
le reste est secondaire.”
Steve Jobs
J’observe / problème
On constate depuis une décennie que l’informatique a envahi tous les do-
maines de la vie courante. Pratiquement, tout problème est totalement ou
en partie informatisé. Partout dans le monde, à tous les niveaux et dans
chaque secteur d’activité, les outils informatiques sont présents et effective-
ment utilisés.
8
Pré-requis
* Il faut savoir lire et écrire, car ce sont là les notions fondamentales

pour la rédaction d’un algorithme.
* il faut avoir une certaine intuition, car aucune recette ne permet
de savoir a priori quelles instructions permettront d’obtenir le ré-
sultat voulu. C’est là qu’intervient la forme « d’intelligence » requise
pour l’algorithmique. Les réflexes, cela s’acquiert. Et ce qu’on appelle
l’intuition n’est finalement que de l’expérience tellement répétée que
le raisonnement, au départ laborieux, finit par devenir « spontané ».
* il faut être méthodique et rigoureux. En effet, chaque fois qu’on
écrit une série d’instructions qu’on croit justes, il faut systématique-
ment se mettre mentalement à la place de la machine qui va les exé-
cuter, armé d’un papier et d’un crayon, afin de vérifier si le résultat
obtenu est bien celui que l’on voulait.
Compétences
• Connaitre les étapes de résolution d’un problème.
• Connaître la structure d’un algorithme
• Citer et utiliser les outils de l’algorithme
• Déclarer et utiliser les sous programme
• Connaitre les structures de l’algorithme
Sommaire
Introduction..............................................................................12
I. Etapes de résolution d’un problème........................................12
II. Structure générale d’un algorithme.........................................15
III. Outils en algorithme.................................................................28
IV. Les structures en algorithme....................................................35
V. Les fonctions et les procédures................................................48
VI. Récursivité...............................................................................62
Résumé.............................................................................................68
Exercices..........................................................................................70
9
Activité d’intégration
Exemple 1
Dans un vieux cahier de tante Maguy qu’elle considère comme son

livre de cuisine, je lis la recette suivante :
Okok
Ingrédients
Okok coupé – noix de palme – sel – arachides – Eau – Sucre
♦♦ Mettez dans une assiette 1 Kg de noix de palme

♦♦ Mettez dans un bol 250g de sucre
♦♦ Mettez dans un plateau 500g de feuille de ‘‘OKOK””
♦♦ Mettez dans un bol 300g d’arachide
♦♦ Mettez dans un bol 200g de sel
Préparation
Cette recette décrit une démarche : comment réaliser une
marmite d’OKOK? À partir d’ingrédients précisés, il décrit une succes-
sion d’opérations qui les utilisent pour obtenir un résultat. Il pourrait
énumérer les différentes opérations en les ordonnant :
1. Lavez les noix de palme ;
2. Laver les les feuilles d’OKOK coupé ;
3. Faire cuire les noix de palme pendant 30 Min ;
4. Faites griller les arachides sans les laisser craquer pendant
10 à 15 Min, les laisser refroidir et les écraser ;
5. Pilez ensuite les noix de palme et extraire la pulpe en se
servant d’un litre d’eau ;
6. Mettez dans une marmite de la pulpe des noix que vous avez
extrait avec les feuilles d’OKOK, laissez cuire pendant 45 à 1heure de
temps ;
7. Ajoutez la pâte d’arachide grillée, laissez au feu pendant 25
Min
8. Ajoutez un peu de sel et du sucre en fonction de vos préfé-
rances.
Exemple 2
Tout élève apprend à additionner deux nombres entiers positifs

en classe primaire. Pour calculer la somme de 127 et 35, il apprend à «
poser » l’addition, en plaçant en colonnes les chiffres des deux nombres,
10
les unités du second sous les unités du premier, les dizaines du sec-
ond sous les dizaines du premier, etc. Ceci fait, il utilise un répertoire
de connaissances acquises préalablement, pour additionner les deux
nombres chiffre à chiffre. Il doit donc savoir que 7+5 font 12, 2+3 font
5, etc. Il apprend aussi à reporter la retenue lorsque l’addition de
deux chiffres donne une somme supérieure à 9. Il est aussi possible
de détailler les étapes du calcul de la façon suivante :
1. poser 127 ;
2. poser 35 sous 127, avec 5 sous 7, 3 sous 2 ;
3. additionner 7 et 5 qui font 12 : poser 2 pour les unités du
résultat et 1 de retenue pour les dizaines ;
4. additionner 2 et 3 qui font 5 pour les dizaines et augmenter
le résultat de la retenue précédente : poser 6 ;
5. additionner les centaines 1 à 0 : poser 1 ;
6. le résultat est 162.
Cette description est comparable à la recette précédente. On
considère les ingrédients que sont les nombres à additionner,
127 et 35. À partir des tables d’addition, dont la connaissance est un
préalable, on applique un ensemble de règles qui transforme les don-
nées, pour obtenir un résultat, ici leur somme 162.
A partir de ces quelques exemples, des préoccupations se posent

à la suite de quelques constats :
• Un problème qui nécessite une réponse est posé ;
• Des éléments qui seront manipulés sont données ;
• Une démarche pour résoudre le problème est proposée ;
Pour chaque exemple, il serait indispensable de :

• Identifier le problème posé ;
• Citer les éléments manipulés ou données ;
• Donner le résultat attendu ;
• Rédiger la méthode ou le processus qui permet de résoudre le
problème
Questions
• Quels sont d’après vous les principales parties de ces exemples ?
• Comment pouvez-vous nommer le processus qui vous permet de
resoudre un problème qui vous est posé ?
11
J’apprends /cours
INTRODUCTION
Si l’on s’intéresse aux applications de l’ordinateur, on s’aperçoit
qu’elles sont très nombreuses. En voici quelques exemples :
• Apprendre à l’école par l’utilisation des didacticiels.
• Visualiser une encyclopédie,
• Chercher une information sur le réseau Internet
• Etablissement de feuille de payes, de factures
• Gestion de stocks
• Calcul de la trajectoire d’un satellite
• Suivi médical de patients dans un hôpital
• …
Un ordinateur pour qu’il puisse effectuer des tâches aussi variées il
suffit de le programmer. Effectivement l’ordinateur est capable de mettre en
mémoire un programme qu’on lui fournit puis l’exécuter.
Plus précisément, l’ordinateur possède un ensemble limité d’opérations élé-
mentaires qu’il sait exécuter. Un programme est constitué d’un ensemble
de directives, nommées instructions, qui spécifient :
• les opérations élémentaires à exécuter
• la façon dont elles s’enchaînent.
Pour s’exécuter, un programme nécessite qu’on lui fournisse ce qu’on
peut appeler «informations données» ou plus simplement «données ». En
retour, le programme va fournir des « informations résultats » ou plus sim-
plement résultats.
Par exemple un programme de production de bulletin scolaire des
élèves d’un établissement nécessite des informations données : noms des
élèves, classe, notes, etc… Le résultat sera les bulletins imprimés des élèves
de l’établissement.
Essayons de voir comment s’y prendre quand on a un problème à faire
résoudre par un ordinateur. En partant de premier énoncé du problème
jusqu’au produit fini de l’ordinateur, quelles sont les étapes à suivre ?
I- ETAPES DE RESOLUTION D’UN PROBLEME

1. Le processus de la programmation
La programmation consiste, avant tout, à déterminer la démarche
permettant d’obtenir, à l’aide d’un ordinateur, la solution d’un problème
donné.
Le processus de la programmation se déroule en deux phases :
●● Dans un premier temps, on procède à ce qu’on appelle l’analyse du
problème posé ou encore la recherche d’un algorithme qui consiste à
définir les différentes étapes de la résolution du problème. C’est la partie
essentielle dans le processus de programmation. Elle permet de définir le
12
contenu d’un programme en termes de données et d’actions.

●● Dans un deuxième temps, on exprime dans un langage de program-
mation donné, le résultat de l’étape précédente. Ce travail, quoi qu’il soit
facile, exige le respect strict de la syntaxe du langage de programmation.
Lors de l’étape d’exécution, il se peut que des erreurs syntaxiques
soient signalées, ce qui entraîne des corrections en général simple ou des
erreurs sémantiques plus difficiles à déceler. Dans ce dernier cas, le pro-
gramme produit des résultats qui ne correspondent pas à ceux escomptés
: le retour vers l’analyse sera alors inévitable.
La partie de ce processus qui nous intéresse est l’algorithme qui est et de-
meure la partie la plus importante de ce processus.
C’est ainsi qu’il serait légitime de se poser un certain de question à savoir :
-- Pourquoi apprendre l’algorithmique pour apprendre à programmer ?
-- Pourquoi a-t-on besoin d’un langage spécial, distinct des langages de
programmation compréhensibles par les ordinateurs ?
Parce que l’algorithmique exprime les instructions résolvant un prob-
lème donné indépendamment des particularités de tel ou tel langage. C’est
également une démarche qui est proche du langage humain car manipule
les langues parlées et lues par tout le monde mais qui s’appuie sur un
certain formalisme. Apprendre l’algorithmique, c’est apprendre à manier
la structure logique d’un programme informatique. Cette dimension est
présente quelle que soit le langage de programmation ; mais lorsqu’on pro-
gramme dans un langage (en C, en Java, etc.) on doit en plus se colleter les
problèmes de syntaxe, ou de types d’instructions, propres à ce langage. Ap-
prendre l’algorithmique de manière séparée, c’est donc cerner les difficultés
pour mieux les vaincre.
Figure 1.1: Processus de programmation
13
2. Concevoir un algorithme
Pour concevoir un algorithme, il faut suivre les étapes suivantes :
Etape 1
Lire et comprendre bien l’énoncé du problème à résoudre
Etape 2
• Définir les résultats du problème (les sorties) ;
• Définir les données du problème (les entrées) ;
• Définir le traitement (les relations permettant d’obtenir les résultats
à partir des données) ;
Etape 3
Ecrire l’algorithme en respectant la structure pseudo-code
Exemple
Un algorithme qui demande la valeur du rayon pour calculer la surface
d’un cercle
Etape 1 : on veut calculer la surface d’un cercle
Etape 2 :
-- En sortie, nous aurons : la surface du cercle ayant pour rayon R
-- En entrée, nous aurons : le rayon du cercle R
-- Le traitement va s’appluyer sur la formule de calcul de la surface :
S = Pi * R*R (PI=3,14)
Résultat
La surface du cercle Surf
Données
Le rayon R
3,14 la valeur de Pi
Traitement
Surf = Pi * R*R
Etape 3 :
Algorithme Surface_cercle L’en-tête

Constante Pi = 3,14 ;
Variable R, Surf : Réel ; Les déclarations
Début
Ecrire (‘ Donnez la valeur de rayon: ‘) ;
Lire (R) ; Le corps
Surf Pi*R^2 ;
Ecrire (‘ La surface de cercle est : ‘, Surf) ;
Fin.
14
II- STRUCTURE GENERALE D’UN ALGORITHME

L’algorithmique est la technique des algorithmes. Un algorithme est la
description d’un traitement selon une logique ou un formalisme rigoureux.
Il prépare la programmation. L’algorithme manipule des données, que l’on
nomme variables, décrit des opérations de calcul ou de transfert de don-
nées et s’articule grâce à des ordres de contrôle (faire ceci à telle condition).
Par similitude avec les programmes, les opérations et les ordres de contrôle
qui composent un algorithme sont souvent appelés instructions.
Définition
Définition 1
Un algorithme est la description non ambigüe, en un nombre fini
d’étapes d’un calcul ou de la résolution d’un problème.
Définition 2
Un algorithme est une suite ordonnée d’instructions qui indique
la démarche à suivre pour résoudre une série de problèmes équiv-
alents.
Extrait d’un dialogue entre un parent égaré et un élève.
– Pourriez-vous m’indiquer le chemin du bureau du proviseur, s’il vous plait ?
– Oui bien sûr : vous allez tout droit jusqu’à l’entrée du bâtiment, vous prenez
à gauche au carrefour, ensuite la troisième porte à droite, et vous verrez le
secrétariat du proviseur en face de vous.
– Merci.
Dans ce dialogue, la réponse de l’élève est la description d’une suite ordonnée
d’instructions (allez tout droit, prenez à gauche, prenez la troisième porte à
droite) qui manipulent des données (carrefour, portes) pour réaliser la tâche
désirée (aller chez le proviseur). Ici encore, chacun a déjà été confronté à ce
genre de situation et donc, consciemment ou non, a déjà construit un algo-
rithme dans sa tête (c’est-à-dire définir la suite d’instructions pour réaliser
une tâche). Mais quand on définit un algorithme, celui-ci ne doit contenir que
des instructions compréhensibles par celui qui devra l’exécuter (des humains
dans l’exemple précédent).
Un algorithme comprend 4 sections :
15
- L’en-tête : Algorithme +nom de l’algorithme

- La Déclaration et l’initialisation des variables, constantes et structures
(noms attribués et leur type)
- Le traitement proprement dit avec début et fin de l’algorithme
- Les déclarations de fonctions et procédures (sous-traitement) de portée
générale qui sont réutilisés dans plusieurs algorithmes différents)
Exemple : algorithme permettant d’identifier l’utilisateur du programme

(prénom) et affecter un message de bienvenue (procédure accueil). On veut
créer une fonction calculant la prime sur chiffre d’affaires (primeCA).
En-tête Algorithme CALCULPRIME

Déclarations VAR
CA : Réel
DEBUT DEBUT
Accueil()
Corps de l’algorithme Ecrire (“ Saisissez le Chiffre d’affaires ‘’) ;
Lire (CA) ;
Ecrire (“Votre prime est de & ‘’) ;
CVCHAINE(PrimeCA(CA)) ;
FIN
PROCEDURE Accueil() ‘Cette procédure ne
comporte aucun argument
VA
Pren : Chaîne
SAISIR « Saisissez votre prénom », Pren
AFFICHER « Bonjour »&Pren
FIN PROCEDURE
FONCTION PrimeCA(CAFF : Réel) :Réel
CONSTANTES
TauxPrime = 0,10
Si CAFF >=10000 ALORS PrimeCA ←
CAFF*TauxPrime
SINON PrimeCA ← 0
FIN SI
FIN FONCTION
1) Déclaration des variables et constantes, et affectation de valeurs

Dans un algorithme, il est nécessaire de stocker provisoirement
des valeurs. Il peut s’agir de données issues du disque dur, fournies par
l’utilisateur, ou de résultats obtenus par le programme, intermédiaires ou
définitifs. Ces données peuvent être de plusieurs types (des nombres, du
texte, etc.).
16
a) Les constantes
Identifier quelques valeurs prédéfinies utilisées dans votre cours de
mathématiques.
Réponse :
La constante g, utilisée dans le calcul du poids, vaut 9.81. La constante
pi (), utilisée dans le calcul trigonométrique, vaut 3.14. Ces constantes
seront déclarées en algorithme de la manière suivante :
CONST g = 9.81 ;
pi = 3.141 ;
Définition
Une constante est un objet ayant une valeur fixe tout le long de
l’exécution d’un algorithme ou d’un programme.
Une constante est caractérisée par :
♦♦ son nom (un identificateur unique).

♦♦ sa valeur.
b) Les variables
Dans le calcul d’un salaire annuel, on pourra utiliser la constante
nb_mois et les variables Salaire_annuel et Salaire_mensuel.
Salaire_annuel = nb_mois x Salaire_mensuel
1) Elaborer le tableau de déclaration des objets intervenant dans cette
affectation.
2) Déclarer les différents objets en Algorithme
Réponse :
1) Tableau de déclaration des objets.
Objet Type Rôle
nb_mois Constante = 12 Nombre de mois de l’année
Salaire_annuel Réel Salaire annuel de l’employé
Salaire_mensuel Réel Salaire mensuel de l’employé
2) Déclarer les différents objets en Algorithme
CONST nb_mois=12 ;
Var Salaire_annuel : Réel ;
Salaire_mensuel : Réel ;
17
Définition
On appelle variable un objet pouvant prendre différentes valeurs tout le
long de l’exécution d’un algorithme ou d’un programme.
Une variable est caractérisée par :
♦♦ son nom (un identificateur unique)
♦♦ son type
♦♦ son contenu.
Différence
Remarque entre variable et constance
Les valeurs attribuées aux variables peuvent être modifiées au cours
de l’exécution de l’algorithme. Les constantes en revanche, sont définies
une fois pour toute à l’intérieur de l’algorithme (avant les variables) et
ne peuvent pas être modifiées par l’utilisateur. Une constante corre-
spond à un paramètre.
Remarque
1- Le choix de l’identificateur d’un objet doit être fait de manière à être
le plus significatif possible.
2- Lorsqu’on déclare une variable, on réserve en mémoire vive (RAM)
un espace mémoire propre à la variable. En effet, la variable constitue
le moyen de stocker les données. C’est pour cette raison que la notion
de variable est une notion fondamentale en algorithmique. Générale-
ment, l’opération permettant de changer le contenu d’une variable est
l’affectation.
3- Pour réussir un algorithme, il faudra d’une part déclarer les dif-
férentes variables utiles et nécessaires pour le bon déroulement de
l’algorithme en définissant correctement leurs types et d’autres part
leur donner les valeurs correctes tout le long de l’algorithme. Certaines
variables serviront de données initiales, d’autres seront des variables
intermédiaires et d’autres variables seront les résultats de l’algorithme.
Bien entendu, une variable peut être une combinaison de deux ou trois
classes (donnée, intermédiaire ou résultat).
18
Les valeurs attribuées aux variables peuvent être modifiées au cours de

l’exécution de l’algorithme.
Les constantes en revanche, sont définies une fois pour toute à l’intérieur
de l’algorithme (avant les variables) et ne peuvent pas être modifiées par
l’utilisateur. Une constante correspond à un paramètre.
Exemples :
CONSTANTES Taux = 0,10
VARIABLES CA : Réel
PU : Réel
Qté : Réel
Ou CA, PU, Qté : Réel (si les variables sont du même type)
Une variable est une entité qui contient une information.
Une variable possède :
♦♦ Un nom, on parle d’identifiant,
♦♦ Un type qui caractérise l’ensemble des valeurs que peut prendre la
variable,
♦♦ Une valeur.
Une variable représente une et une seule entité dont la valeur peut
évoluer au cours du temps (la valeur antérieure est perdue).
Les variables et les constantes sont définies dans la partie déclarative par
deux caractéristiques essentielles :
- L’identificateur : c’est le nom de la variable ou de la constante. (Il est
composé de lettres et de chiffres)
- Le type : il détermine la nature de la variable ou de la constante (entier,
réel, booléen, chaîne de caractères,…)
2) Les différents types de constantes et variables

Le type d’une variable permet de déterminer le domaine des valeurs
possibles que peut prendre cette variable. La connaissance du type permet
également de déduire l’ensemble des opérateurs applicables sur les vari-
ables de ce type.
Un type est désigné par un identificateur (ou un nom). Les types stand-
ard sont :
• Le type Entier, désignant les valeurs des nombres entiers relatifs.
• Le type Réel, désignant les valeurs des nombres réels.
• Le type Caractère, désignant les “valeurs” des caractères.
• Le type Booléen, désignant les valeurs logiques.
• Le type Chaîne de caractères, désignant les “valeurs” des chaînes de
caractères.
Les types sont regroupés en deux : les types numériques et les types al-
phanumériques.
19
a) Les types booléens

1- Quelles sont les valeurs du type booléen?
2- Quels sont les opérateurs logiques qu’on peut appliquer sur les boolée-
ns?
3- Evaluer les propositions logiques suivantes :
a- La proposition (88>66) ET (44<55)
b- La proposition (88>66) ET (66<55)
Réponses :
1- Les variables d’un tel type peuvent prendre uniquement deux valeurs
logiques : VRAI et FAUX.
2- Ces opérateurs sont NON (négation), Et (conjonction), OU (disjonction)

et OUex (OU exclusif).
3- a- (88>66) ET (44<55) 3- b- (88>66) ET (66<55)

VRAI ET VRAI VRAI ET FAUX
VRAI FAUX
1- Soient a, b et c trois variables booléennes
a- Donner les étapes d’évaluation de l’expression a OU ( b ET c).
b- Si on veut d’abord évaluer la disjonction a OU b, comment faut-il
s’y prendre ?
2- Dans la réponse à la question précédente, nous avons utilisé le fait que
l’opérateur ET est prioritaire par rapport à l’opérateur OU. Donner l’ordre
de priorité qui existe entre les opérateurs logiques.
3- Déclarer en algorithme les quatre variables suivantes : p, q, existe et
drapeau de type booléen.
4- Evaluer les expressions logiques suivantes :
a- ( x <= 4) ET (x >= 1) avec x = 3
b- ( x <= 2) ET (x >= 0) avec x = -4
c- NON ( x <= 55) OU (x >= 0) avec x = 21
Réponses
1- a- on évalue d’abord la conjonction b ET c puis la disjonction a OU (b
ET c) comme s’il y avait des parenthèses.
20
b- il suffit d’ajouter des parenthèses (a OU b) ET c.

2- Il existe un ordre de priorité entre les opérateurs logiques :
• La négation NON est prioritaire par rapport à la conjonction ET.
• La conjonction ET est prioritaire par rapport à la disjonction OU.
• La disjonction OU a la même priorité que l’opérateur OUex.
Si deux opérateurs ont la même priorité, le calcul de l’expression logique
se fera de gauche à droite.
Dans tous les cas, les opérations mises entre parenthèses sont
prioritaires.
Les parenthèses les plus internes sont les plus prioritaires.
3- Var p, q, existe, drapeau : BOOLEEN ;
4- a- VRAI
b- FAUX
c- VRAI
b) Les types alphanumériques

i- Le type caractère
Le type caractère est utilisé pour représenter une lettre minuscule,
une lettre majuscule, un chiffre ou un signe de ponctuation, mais aussi un
espace typographique, une tabulation, un retour à la ligne et quelques au-
tres opérations spéciales (sonnerie, effacement, etc.). Tous les caractères
sont ordonnés selon leur code ASCII (American Standard Code for Infor-
mation Interchange).
1- Les chiffres, les lettres en majuscule, les lettres en minuscule ont des
codes ordonnés et contigus ; Quel est cet ordre ?
2- Citer quelques opérateurs applicables aux caractères.
3- Déclarer en algorithme :
a- une constante caractère de valeur ‘’v’’
b- deux variables de type caractère car1 et car2
Réponses :
1- On peut comparer les caractères comme suit :
‘’0’’ < ‘’1’’ … <C < … “A’’ < ‘’B’’ … < “Z” … ‘’a’’ < ‘’b’’ <’’z’’ …
2- Comme les valeurs de type caractère sont ordonnées, les opérateurs
relationnels y sont définis.
Exemples :
‘’B’’ < ‘’F’’ est une proposition VRAIE.
‘’g’’ > ‘’b’’ est une proposition VRAIE.
3- a- CONST car = ‘v’ ;
b- VAR car1, car2 : CHAR ;
21
ii- Le type chaîne de caractères

Une chaîne de caractères est une suite ordonnée de caractères. En
algorithmique, la valeur d'une chaîne se note en utilisant des guillemets
(").
Exemple
classe = “Première TI”
Etablissement = “Collège”
Note_Info = “16”
Remarque
Les variables chaînes de caractères sont définies par une déclaration
pouvant indiquer le nombre maximum de ses caractères.
c) Le type scalaire énuméré
Dans certaines situations où l’on aimerait contraindre une variable
à décrire un jeu de valeurs bien déterminé, on utilisera un type scalaire
énuméré afin d’énumérer ces valeurs.
Un type scalaire définit, en général, un domaine de valeurs comme
c’est le cas du type entier. Par ailleurs, le type scalaire par énumération
définit un ensemble ordonné et fini de valeurs désignées par des identifi-
cateurs.
Définition
Le type scalaire par énumération définit un ensemble ordonné et fini de
valeurs désignées par des identificateurs
Nous voulons définir un type que nous appelons ANNEE_SCOLAIRE
contenant les dix mois de l’année scolaire et manipuler les valeurs de
ce type.
1- Donner le tableau de déclaration des nouveaux types illustrant le
type
ANNEE_SCOLAIRE.
2- L’affectation suivante est-elle correcte sachant que mois est une vari-
able de type ANNEE_SCOLAIRE ? mois ← octobre
3- Quel est l’ordre de ces constantes ?
4- Quels sont les opérateurs applicables à ces valeurs ?
5- Evaluer les expressions suivantes :
a- SUCC (septembre) b- PRED (juin)
6- La déclaration du type énuméré IMPAIR = (1, 3, 5, 7) est-elle possi-
ble?
22
7- Déclarer en Algorithme
a- un type scalaire énuméré contenant les mois à 30 jours.
b- une variable intitulée mois_court du type mois_a_trente.
Réponses :
1- Tableau de déclaration des nouveaux types
Types
ANNEE_SCOLAIRE=(septembre, octobre, novembre, decembre, janvier,
fevrier, mars, avril, mai, juin) septembre, octobre, novembre, decembre,
janvier, fevrier, mars, avril, mai, juin sont les éléments du type ANNEE_
SCOLAIRE.
2- Une variable mois de type ANNEE_SCOLAIRE peut prendre comme

valeur : septembre, octobre, novembre, decembre, janvier, fevrier, mars,
avril, mai, juin.
L’affectation mois ← octobre est correcte.
3- L’ordre sur ces valeurs est le suivant : septembre < octobre < … <
juin. Par ailleurs, on peut appliquer la fonction Ord sur ces valeurs pour
déterminer leurs numéros d’ordre, ainsi Ord (septembre) vaut 0 et Ord
(octobre) vaut 1 et ainsi de suite.
4- Les opérateurs applicables à ces valeurs sont :

• Les opérateurs de relation
• Les opérateurs PRED représente le prédécesseur (le précédent) et SUCC
représente le successeur (le suivant).
5- a- octobre
b- mai
6- Cette déclaration est interdite car 1, 3, 5 et 7 sont des valeurs qui ap-
partiennent au type prédéfini ENTIER.
7- a- TYPE mois_a_trente = (avril, juin, septembre, novembre) ;
b- VAR mois_court : mois_a_trente ;
d) Le type intervalle
1- Elaborer un tableau de déclaration des nouveaux types illustrant un
type intervalle intitulé mois de 1 à 12 et un type intervalle concernant le
premier trimestre de l’année scolaire.
2- a- Quels sont les bornes inférieure et supérieure du type mois ?
b- Quels sont les valeurs que peut prendre une variable du type mois ?
23
c- Quels sont les bornes inférieure et supérieure du type premier_trimes-

tre ?
d- Quels sont les valeurs que peut prendre une variable du type pre-
mier_trimestre?
3- Déclarer en Algorithme un type intervalle mois, un type intervalle
jours et deux variables mois_actuel et j de types respectifs mois et jours.
Réponses :
1- Tableau de déclaration des nouveaux types
Mois = 1. . 12
ANNEE_SCOLAIRE = (septembre, octobre, novembre, decembre, janvier,
fevrier, mars, avril, mai, juin)
Premier_trimestre = septembre .. decembre
2- a- Les bornes de Mois sont 1 et 12 prises comme valeurs entières.

b- Une variable de type Mois peut prendre ses valeurs entre 1 et 12.
c- Les bornes de premier_trimestre sont septembre et decembre.
d- Une variable de type premier_trimestre peut prendre comme valeur :
septembre, octobre, novembre et decembre.
3- TYPE mois = 1 .. 12;
jours = 1 .. 31 ;
VAR mois_actuel : mois ;
j : jours ;
Le type intervalle possède les propriétés d’un type scalaire discret ordonné
(entier, caractère et scalaire énuméré).
Définition
La définition d’un intervalle est décrite par la donnée de deux constantes
représentant respectivement la “Borne Inférieure” et la “Borne Supéri-
eure” appartenant à un type scalaire discret ordonné et telle que Borne
Inférieure < Borne Supérieure.
Remarque
Une variable d’un type intervalle possède toutes les propriétés du
type de base dont l’intervalle est issu. Toutefois, sa valeur doit être com-
prise au sens large entre les bornes de l’intervalle.
L’intérêt de ce type réside dans le fait qu’il permet une meilleure
lisibilité de l’algorithme et du programme.
Exemple : mois : 1 . .12 est beaucoup plus précis que mois : entier
24
e) Types énumérés : Les tableaux à une dimension

Quand on veut regrouper un certain nombre de variables de même
type sous un même nom, on utilise la notion de tableau. Un tableau peut
être considéré comme une suite de variables, de même nom, repérées par
des indices.
Définition
Un tableau est une structure de données homogènes regroupant un en-
semble d’éléments de même type.
i. Déclaration d'un tableau

Dans le cas général, pour déclarer un tableau, on utilisera la forme
suivante :
Au niveau de l'analyse et de l'algorithme
ident_tableau:TABLEAU[Borne_inf..Borne_sup]DE Type_élément;
Où :
Ident_tableau : Identificateur du nouveau tableau que nous voulons
définir.
Borne_Inf .. Borne_Sup : intervalle correspondant à l’ensemble des
valeurs des indices du tableau.
Borne_Inf : Borne inférieure de l’intervalle des indices.
Borne_Sup : Borne supérieure de l’intervalle des indices.
Type_élément : Type des éléments du tableau. Il peut être l’un des types
vu précédemment.
Exemple :
T : TABLEAU [ 1..7 ] de Réel ; {déclaration d'un tableau de 7 éléments
réels }
Suite à cette déclaration, nous réservons un espace mémoire au niveau
de la RAM pouvant contenir sept réels.
Un tableau est caractérisé par ses dimensions. Nous nous limiterons
à l'étude des tableaux unidimensionnels appelés aussi vecteurs.
1- Donner le tableau de déclaration des objets pour un vecteur de 5 élé-
ments de type réel pouvant contenir les notes des élèves.
2- Déclarer le tableau NOTES en algorithme.
3- Affecter à chaque élément la note correspondante suivant le tableau
suivant :

25
NOTES
12 13.5 10 15.5 16
1 2 3 4 5
Réponses :
1- La déclaration du tableau se fera comme suit :
Tableau de déclaration des objets
Objet Type Rôle
NOTES Tableau de 5 réels Tableau servant à contenir les notes
de 5 élèves
Tableau servant à contenir les notes de 5 élèves

2- En algorithme, on aurait effectué la déclaration suivante :
VAR NOTES : TABLEAU [ 1..5 ] DE Réel;
3-
NOTES [1] est le 1er élément du tableau NOTES.
NOTES [2] est le 2ème élément du tableau NOTES.
NOTES [1] ← 12
NOTES [2] ← 13.5
NOTES [3] ← 10
NOTES [4] ← 15.5
NOTES [5] ← 16
Remarque
1) Pour accéder au ième élément du tableau, il suffit de donner
l’identificateur du tableau et l’indice i indiquant le rang de l’élément.
Cet indice doit être dans l’intervalle Borne_inf.. Borne_sup.
2) Nous pouvons lire et écrire un élément du tableau (à venir). Nous
pouvons modifier un élément par une instruction d’affectation. (para-
graphe suivant)
Exemple : NOTES [4] ← 17.50
3) Les opérations possibles sur un élément du tableau sont les mêmes
que celles définies sur une variable de même type.
ii- Le type tableau

Il est possible de déclarer le type d’un tableau.
26

Exemple
Tableau de déclaration des nouveaux types
Types Eleves = tableau de 30 chaînes de caractères
Moyennes = tableau de 30 réels
Comptes = tableau de 26 entiers

Objet Type Rôle
T_ELEVES Eleves Tableau des 30 noms d’élèves
T_MOY Moyennes Tableau des 30 moyennes d’élèves
T_Compte Comptes Tableau comptant le nombre de chaque lettre
de 'A' à 'Z' du texte
Soit la séquence suivante :
A [ 1 ] ← 10
A [ 2 ] ← 7
A [ 3 ] ← A [ 1 ] Div A [ 2 ]
A [ 4 ] ← A [ 3 ] * A [ 2 ]
A [ 5 ] ← A [ 1 ] + A [ 3 ] * A [ 4 ]
1- Déclarer le tableau A.
2- Quel est le contenu de chaque élément du tableau A ?
Réponses
1- Déclaration
Tableau de déclaration de nouveaux types
Types
vecteur = tableau de 5 entiers

Objet Type Rôle
A Vecteur Tableau de 5 éléments
2- Le contenu de chaque élément :

A
10 7 1 7 17
1 2 3 4 5
27
III- OUTILS EN ALGORITHME

1. Les expressions
Une expression simple est constituée d'opérandes reliés par des
opérateurs.
Nous distinguons deux types d'expressions :
♦♦ les expressions arithmétiques donnant une valeur numérique.
♦♦ les expressions logiques donnant une valeur booléenne.
Donner le type et la valeur de chacune des expressions suivantes :
1- (6 < = 2)
2- (7+3) DIV 2
Réponses :
1- C’est une expression logique ; le résultat est booléen ; sa valeur est
FAUX.
2- C’est une expression arithmétique ; le résultat est entier ; sa valeur
est 5.
2. Les opérandes
1- Soient les expressions suivantes :
a- 5 + 3.141 b- 7 MOD 3
Indiquer pour chacune des expressions ci-dessus le premier et le
deuxième opérande et l’opérateur.
2- Quels sont les types d’opérandes ?
3- Donner les valeurs résultats de chacune de ces expressions :
a- 3.14* D1 b- (3.14*D1) + (3.14 *D2)
c- 3.14 * CARRE (R1) d- 100/25
Pour les valeurs D1=4, D2=3 et R1=2
Réponses :
1- a- 5 est le premier opérande ; + est l’opérateur et 3.141 constitue
le deuxième opérande.
b- 7 est le premier opérande ; MOD est l’opérateur et 3 constitue
le deuxième opérande.
2- Les opérandes peuvent être des constantes, des variables, des
valeurs ou des résultats envoyés par des fonctions. Par ailleurs, un
opérande peut être une expression.
3- a- 12.56 b- 21.98 c- 12.56 d- 4.0
28
3. Les opérateurs
i- Les opérateurs arithmétiques
* Les opérateurs unaires
Un opérateur est dit unaire s'il est appliqué à un seul opérande. On dit
aussi qu'il est monadique.
L'opérateur unaire usuel
Exemple : - (77) - est l'opérateur et 77 est l'opérande.
* Les opérateurs binaires
Un opérateur est dit binaire s'il est appliqué à deux opérandes. On dit
ausi qu'il est dyadique.
ii- Les opérateurs logiques
1- a- Quel est l’opérateur unaire usuel, le type de l’opérande et le type

du résultat?
b- Evaluer l’expression suivante : NON (44<66)
2- Remplir un tableau permettant de montrer le type du résultat pour
les types d’opérandes admis en ce qui concerne les opérateurs bi-
naires logiques.
Réponses :
1- a- Opérateur Type opérande Type résultat
Non Booléen Booléen
b- NON est l’opérateur et (44<66) est un opérande. Le résultat de cette

expression est FAUX.
2-
Opérateurs Type opérande 1 Type opérande 2 Type résultat
Et Booléen Booléen Booléen
Ou Booléen Booléen Booléen
Ouex Booléen Booléen Booléen
NB : Souvent les opérateurs logiques sont notés multiplicativement
pour le ET et additivement pour le OU.
iii- Les opérateurs relationnels

Le tableau suivant illustre les opérateurs relationnels usuels :
Opérateurs Type opérande 1 Type opérande 2 Type résultat
<, >, =, <>, <=, >= Tout type ordonné Tout type ordonné Logique
29
Remarque
Tous les types que nous avons vus sont des types ordonnés. Toute
comparaison entre deux éléments de même type ou de types compati-
bles est possible.
1- Quel est le résultat d’une comparaison de deux éléments de même
type ou de types compatibles ?
2- Pour x=32 et y=36, quelle est la valeur de x<y ?
Réponses :
1- Le résultat de la comparaison est booléen (VRAI ou FAUX).
2- x < y vaut VRAI
4. Évaluation d’une expression

Lors de l’évaluation d’une expression, on tient compte de la priorité
entre les opérateurs.
1- Quel est l’ordre de priorité dans le calcul des expressions ?
2- Donner les étapes de calcul de l’expression 31+7*10.
3- Evaluer l’expression 55 + 6 - 10
4- Dans le cas où on veut imposer un autre ordre, que doit-on faire ?
5- Evaluer les expressions suivantes :
a- (44 * x + y) avec x = 2 et y =4
b- (y + 44 * x) avec x = 2 et y=4
c- ((y + 44) * x) avec x = 2 et y =4
Réponses :
1- Cet ordre est le suivant :
1) Les parenthèses.
2) Les opérateurs unaires.
3) Les opérateurs multiplicatifs.
4) Les opérateurs additifs.
30
5) Les opérateurs relationnels.

2- 1ère opération 7 * 10 = 70 2ème opération 31 + 70 = 101
3- Le calcul de 55 + 6 -10 commence par 55 + 6 donc 61 puis 61-10
pour avoir 51.
En effet, pour les opérateurs de même priorité, on commence
par celui qui est le plus à gauche.
4- Dans ce cas, on doit utiliser des parenthèses.
31 + 7 * 10 vaut 101 mais si on écrit (31 + 7) * 10 le résultat est 380.
5- a- 92
b- 92
c- 96
5. L’affectation de variable
L’affection d’une variable consiste à attribuer une valeur à une
variable.
Définition
L’opération d’affectation consiste à attribuer une valeur à
une variable.
L’instruction d’affectation se note avec le symbole “ ← ” en algo-
rithmique.
L’expression à droite du symbole d’affectation sera évaluée puis
le résultat sera affectée à la variable située à gauche du symbole
“ ← “.
Sachant que m, n, p et r sont quatre variables de type entier ou de
type entier. Soit la séquence ci-dessous :
1) m ← 159383552
2) n ← m DIV 8
3) p ← n DIV 1024
4) r ← p DIV (1024)
1- Déterminer la valeur de chacune des variables n, p et r après
l’exécution de la séquence ci-dessus.
2- Que fait cette séquence d’instructions?
3- Ecrire l’algorithme complet.
31

Réponse :
1-
- La valeur de n vaut 19922944.
- La valeur de p vaut 19456.
- La valeur de r vaut 19.
2- Cette séquence convertit une capacité mémoire donnée en bits en
son équivalent en octets, kilo octets (Ko) et méga octets (Mo).
Ecriture de l’algorithme complet :
Algorithme CONVERSION
Var m,n,p,r : Entier;
DEBUT
m ← 59383552;
n ← m DIV 8;
p ← n DIV 1024;
r ← p DIV 1024;
FIN.
i- L’affectation simple
En algorithme l’affectation se fait avec l’instruction suivante :
Nom de la variable ← Information à stocker dans la variable
Exemple 1
Nomclient ← “Patson” : Permet de stocker le texte Patson dans la vari-
able Nomclient.
Exemple 2
PrixHT ← 240 : Permet de stocker le chiffre 240 dans la variable PrixHT.
Il est possible de stocker le contenu d’une variable dans une autre
variable.
Exemple 3
Toto ← 24
Tata ← Toto Permet de stocker la valeur 24 dans la variable Tata.
Remarque
En algorithme une variable alphanumérique est toujours encadrée
de guillemets. Cela permet de distinguer les noms des variables de
leurs contenus
32
Exemples
Exemple n°1 Exemple n°2
DÉBUT DÉBUT
Riri ← “Loulou”; Riri ← “Loulou”;
Fifi ← “Riri”; Fifi ← Riri;
FIN FIN
Dans l’exemple 1, la variable Fifi contient le texte Riri alors que

dans l’exemple 2, elle contient le texte Loulou
ii- L’affectation d’expression

Définition
Une expression est un ensemble de valeurs, reliées par des opé-

rateurs, et équivalent à une seule valeur.
Un opérateur est un signe qui relie deux valeurs, pour produire
un résultat.
Exemple d’expression Exemple d’affection d’expression

5+4 MontantTVA ← PrixHT*TauxTVA
Toto + 14 Toto ← toto+1
PrixHT*TauxTVA
iii- Les différents opérateurs

Il existe de nombreux opérateurs
Type d’opérateur Opérateur Rôles
+ Addition
- Soustraction
Opérateurs numériques / Division
* Multiplication
^ Puissance
Opérateur Alphanumérique & Concaténation (addition de texte)
ET
OU Ces opérateurs sont utilisés lors
Opérateurs logique NON des tests
XOR
Remarque
• L’expression est évaluée avant d’être affectée à la variable.
• La valeur de l’évaluation de l’expression doit être compatible avec le
type de la variable ; sinon l’exécution de cette affectation provo-
33
quera une erreur.

• Il est possible d’affecter la valeur d’une variable à une autre variable.
• Le nom d’une variable dans une expression signifie sa valeur ac-
tuelle.
• L’instruction d’affectation ne modifie que ce qui est situé à gauche
du symbole d’affectation “ ← ”.
6. Les opérations de lecture / écriture

L’opération lecture permet à la machine d’obtenir du texte (par ex-
emple grâce à la saisie de l’utilisateur)
L’opération écriture permet à la machine de donner des informations à
l’utilisateur (par exemple en les faisant apparaitre à l’écran, ou en les
imprimant)
a- Les instructions de lecture / écriture
Effectuer une analyse, écrire un algorithme intitulé DISTANCE qui
convertit une distance n = 24 pouces en ses équivalents pieds et mè-
tres. Afficher les résultats.
On rappelle que :
- 1 pied =12 pouces
- 1 pouce = 2.54 cm
Analyse
Objet Type Rôle
m Réel Mesure en mètre
p Réel Mesure en pied
n Entier Mesure en pouce
Algorithme DISTANCE
Var
n : Entier
m, p : Réel
Début
Ecrire(“Entrer la valeur de n : “);
Lire(n);
n ← 24;
p ← div 12;
34
m ← (n* 2.54) / 100;

Ecrire(“La mesure en mètre vaut : “,m);
Ecrire(“La mesure en pied vaut : “,p);
Fin
Définition
Instruction lecture
Pour qu’un utilisateur entre la valeur d’une variable on
écrira : Lire (Nom de la variable)
Dès que le programme rencontre une instruction Lire,
l’exécution s’interrompt, attendant la frappe d’une valeur au
clavier. Dès que l’utilisateur appuie sur la touche [Entrée] le
programme reprend.
Instruction écriture
La sortie de données est l’action convenue élémentaire
qui consiste à écrire une donnée sur un périphérique de sortie
tel que l’écran, l’imprimante, etc.
Ecrire(Variable)
IV- LES STRUCTURES EN ALGORITHME

Très souvent nous sommes confrontés, face à une situation ponc-
tuelle à faire un choix, par exemple la nécessité de prendre un parapluie
lorsqu’on voit le ciel menaçant. D’autre part, il arrive souvent que nous
nous trouvons face à une situation qui nous contraint à effectuer plus
d’une fois une même action. L’une comme l’autre trouve une représen-
tation en algorithme qui se regroupe en trois types de structures de
contrôle conditionnelles :
♦♦ la structure conditionnelle simple
♦♦ la structure conditionnelle généralisée
♦♦ la structure conditionnelle à choix
1. La structure de contrôle conditionnelle simple

i- La forme réduite

On se propose d’écrire un algorithme intitulé PULL qui affiche le mes-
sage “Porter un Pull over” si la température est inférieur à 24 °C
35
Analyse
Objet Type Rôle
message Chaîne de car- Sauvegarde l'état de l'alarme
actères
Temp Entier Saisie la température
Algorithme PULL
Var
Temp : Entier ;
message : Chaine de caractère ;
Début
message = “Porter un Pull over “ ;
Écrire (“Entrer la valeur de la température : “) ;
Lire (Temp) ;
Si (Temp < 24) Alors
Écrire (message) ;
FinSi
Fin
Syntaxe
Si condition Alors
Instruction 1
Instruction 2
- - -
Instruction n
FinSi
Remarque
• L’initialisation et le traitement sont généralement des séquences
formées de plusieurs instructions.
• La condition est une expression logique qui prend soit la valeur «
VRAI » soit la valeur « FAUX».
• Si la condition est « VRAI », les instructions entre Alors et FinSi sont
exécutées.
• La condition peut être une condition composée de plusieurs autres
propositions logiques liées par les opérateurs booléens.
36
ii- La forme alternative
Écrire un programme qui demande à l’utilisateur de saisir 4 valeurs
réelles correspondants aux coordonnées de 2 vecteurs u (x1, y1) et v
(x2, y2) et qui détermine et affiche si ces vecteurs sont orthogonaux
entre eux ou pas.
Analyser ce problème et en déduire l’algorithme correspondant.
NB : Deux vecteurs sont orthogonaux si la somme de leur produit

scalaire est égal à 0.
Analyse
Soient u (x1, y1) et v (x2 ,y2) dans une base orthonormée de l’ensemble
des vecteurs du plan.
u perpendiculaire à v équivaut à (x1 * x2) + (y1 * y2) = 0.

Objet Type Rôle
Nature Chaîne Nature des deux vecteurs
x1,x2,y1,y2 Réel Coordonnées des vecteurs u et v
Algorithme ORTHOGONAL
Var
x1, x2, y1, y2 : Réel ;
Nature : Chaine de caractère ;
Début
Ecrire (“Entrer les coordonnés du vecteur u: “) ;
Lire(x1,y1) ;
Ecrire (“Entrer les coordonnés du vecteur v: “) ;
Lire(x2,y2) ;
Si (x1*x2 + y1*y2=0) Alors
Nature ← ” u est perpendiculaire à v “ ;
Sinon
Nature ← ” u n’est pas perpendiculaire à v “ ;
FinSi
Ecrire (Nature);
Fin
37
Syntaxe
Si condition Alors
Instruction 1.1
Instruction 1.2
- - - Traitement 1
Instruction 1.n
Sinon
Instruction 2.1
Instruction 2.2
- - - Traitement 2
Instruction 2.m
FinSi
Définition
Une structure de contrôle conditionnelle est dite à forme alter-

native lorsque le traitement dépend d’une condition à deux états : si
la condition est évaluée à « VRAI », le premier traitement est exécuté ;
si la condition est évaluée à « FAUX », le second traitement est exécu-
té.
Remarque
• Lorsque l’évaluation de la condition produit la valeur :
VRAI seules les instructions du traitement 1 sont exécutées.
FAUX seules les instructions du traitement 2 sont exécutées.
• Chaque traitement peut comporter une ou plusieurs instructions.
• Les instructions du traitement 1 sont délimitées entre « Alors » et
« Sinon » et celles du traitement 2 le sont entre « Sinon » et « Finsi ».
On se propose d’écrire un algorithme intitulé PULL qui affiche le mes-
sage “Porter un Pull over” si la température est inférieur à 24 °C sinon
affiche le méssage “Belle journée”
38
Analyse
Objet Type Rôle
message Chaîne de caractères Sauvegarde l'état de l'alarme
Temp Entier Saisie la température
Algorithme PULL
Var
Temp : Entier ;
message1, message2 : Chaine de caractère ;
Début
message1 = “Porter un Pull over “ ;
message2 = “Belle journée” ;
Écrire (“Entrer la valeur de la température : “) ;
Lire (Temp) ;
Si (Temp < 24) Alors
Écrire (message1) ;
Sinon
Écrire (message2) ;
FinSi
Fin
2. La structure de contrôle conditionnelle généralisée
Effectuer une analyse et écrire un algorithme intitulé NATURE_TRI-
ANGLE, qui à partir de trois points donnés A, B et C détermine et
affiche la nature du triangle (isocèle en A, isocèle en B, isocèle en C,
équilatéral, quelconque).
Analyse
Lorsqu’un triangle ABC est tel que AC = AB (les deux côtés d’extrémité
A sont égaux), alors on dit que le triangle est isocèle de sommet A. A
est le sommet principal du triangle. Le côté [BC], opposé à A, est ap-
pelé base du triangle.
Si un triangle a trois côtés de même longueur, il est dit équilatéral.
Dans le plan cartésien, les points sont définis à l’aide de leurs coor-
données dites cartésiennes.
Soient deux points A et B dans le plan cartésien. On appelle (xA,yA)
les coordonnées du point A et (xB,yB) les coordonnées du point B.
39
La distance AB dans le plan vaut :
AB =

Objet Type Rôle
Nature Chaîne Sauvegarde la nature du triangle
AB, AC, BC Réel Longueur des côtés du triangle
Xc, Xb,Yc,Yb,Xa,Ya Réel Saisie les coordonnés des points
A, B et C
Algorithme NATURE_TRIANGLE
Var
Nature : Chaine;
AC, AB, BC : Réel;
Xc, Xb, Xa, Yb, Yc, Ya : Réel;
Début
Ecrire (“Entrer les coordonnés du point A: “) ;
Lire(Xa,Ya) ;
Ecrire (“Entrer les coordonnés du point B: “) ;
Lire(Xb,Yb) ;
Ecrire (“Entrer les coordonnés du point C: “) ;
Lire(Xc,Yc) ;
AC ← SQRT ((Xc-Xa)*(Xc-Xa) + (Yc-Ya)* (Yc-Ya))
AB ← SQRT ((Xb-Xa)*(Xb-Xa) + (Yb-Ya)*(Yb-Ya))
BC ← SQRT ((Xc-Xb)*(Xc-Xb) + (Yc-Yb)*(Yc-Yb))
Si (AC=AB) et (AB=BC) Alors
Nature ← “Triangle équilatéral”
Sinon Si AB=BC Alors
Nature ← “Triangle isocèle en B”
Sinon Si AC=BC Alors
Nature ← “Triangle isocèle en C”
Sinon Si AB = AC Alors
Nature ← “Triangle isocèle en A”
Sinon
Nature ← “Triangle quelconque”
FinSi
Ecrire (Nature) ;
Fin
40
Syntaxe
Si cond1 Alors trait1

Sinon Si cond2 Alors trait2
Sinon Si cond3 Alors trait3
---
Sinon Si cond n-1 Alors trait n-1
Sinon trait n
FinSi
Définition
Une structure de contrôle conditionnelle est dite géné-

ralisée lorsqu’elle permet de résoudre des problèmes comportant
plus de deux traitements en fonction des conditions.
L’exécution d’un traitement entraîne automatiquement la
non exécution des autres traitements.
Je pratique
Dans le but de déterminer la nature d’une solution chimique on uti-
lise un pH_mètre.
Une solution peut être :
- Acide fort si le pH est inférieur à 2
- Acide faible si le pH est entre 2 et 6
- Neutre si le pH est égal à 7
- Base faible si le pH est entre 8 et 12
- Base forte si le pH est supérieur à 13
3. La structure de contrôle conditionnelle à choix

La structure conditionnelle à choix fait référence à un choix mul-
tiple car plusieurs voies sont possibles selon les différentes valeurs que
peut contenir une variable de type scalaire.
Cette structure rend le code source du programme plus lisible.
Pour un entier N donné, lequel de ces nombres est multiple de 5 : N,
N +1, N +2, N +3 et N +4.
41
Effectuer une analyse, écrire un algorithme intitulé MULTIPLE5, qui

saisit un entier N et détermine lequel parmi ces nombres est multiple
de 5.
Analyse
Pour vérifier que le premier entier N est multiple de cinq, il suffit de
montrer que le reste de la division entière de N par 5 vaut 0.
Si le reste est différent de 0 il suffit d’ajouter à N la valeur (5-reste)
pour que l’entier (N +5-reste) soit multiple de 5.

Objet Type Rôle
M Chaîne de cara- Sauvegarde le résultat
ctères
R Réel Contient le reste
N Réel Saisit de l'entier N
Algorithme MULTIPLE5
Var
N, R : Entier;
M : Chaine;
Début
Ecrire (“Entrer un entier N : “) ;
Lire(N) ;
R ← N MOD 5
Selon R Faire
0 : M ← ”N”;
1 : M ← ”N +4”;
2 : M ← ”N +3”;
3 : M ← ”N +2”;
4 : M ← ”N +1”;
Fin Selon
Ecrire (M) ;
Fin
Syntaxe
Selon sélecteur Faire
Valeur 1 : Traitement 1
Valeur 4, Valeur 5, Valeur 6 : Traitement 4
42
Valeur 7 .. Valeur 10 : Traitement 5

---
Valeur N : Traitement N
Sinon traitement R
Fin Selon
Remarque
- Le sélecteur doit être de type scalaire discret et non réel.
- Plusieurs valeurs séparées par des virgules, auront un même traite-
ment.
- Un intervalle de valeurs peut entraîner un même traitement.
- Un traitement peut comporter une ou plusieurs instructions.
- Si la valeur du sélecteur est différente des valeurs proposées alors le
traitement de la clause Sinon sera exécuté.
- La partie Sinon est facultative.
Définition
Une structure de contrôle conditionnelle est dite à choix lor-

sque le traitement dépend de la valeur que prendra le sélect-
eur. Ce sélecteur doit être de type scalaire (entier ou caractère).
Je pratique
Ecrire un algorithme qui permet de saisir le prix unitaire d’un
produit et la quantité commandée, affiche le prix à payer, sachant
que :
- la remise est de 3% si le montant net est compris entre 1000 Fcfa
et 3000 Fcfa
- la remise est de 5% si le montant net est compris entre 3001 Fcfa
et 5000 Fcfa
- la remise est de 7% si le montant net est supérieur à 5000 Fcfa
43
4. Structures de contrôle itératives
Écrire un algorithme qui saisit un entier naturel n et affiche les n-1
nombres qui lui sont inférieurs ou égaux.
Analyse

Objet Type Rôle
i Entier Nombre d’itérations
n Entier Compteur
Algorithme inferieur
Var
n,i : Entier
Début
Ecrire(“Entrez un nombre entier “) ;
Lire(n) ;
Pour i de 1 à n faire
Ecrire (i) ;
FinPour
Fin
Syntaxe
La séquence “Traitement” est composée d’instructions ordonnées

par ordre d’exécution.
On pourra l’exprimer aussi sous la forme :
Pour c de 1 à n faire
Instruction 1
Pour c de 1 à n faire
Instruction 2
Traitement
...
FinPour
Instruction p
FinPour
Le nombre de ces répétitions est égal à n. La variable c a servi de
compteur qui est automatiquement incrémenté par défaut de 1
par la définition de la structure elle-même.
44
Remarque
1. Le compteur c est de type scalaire (entier, caractères, booléen,
etc.).
2. L’incrémentation de c est automatique et fait progresser au suc-
cesseur de la valeur en cours. A l’opposé de la décrémentation qui fait
regresser au prédécesseur la valeur de c
Cas général :
Dans ce cas, la forme générale est :
Pour c de d à f (pas = p) faire
Instruction 1
Instruction 2
...
Instruction p
FinPour
NB.
Si p est positif, le parcours est ascendant et si p est négatif, le par-
cours est descendant. Remarquez que n est toujours positif, c’est le
signe de p qui détermine le compteur c.
Je pratique
n individus passent un examen composé de 3 épreuves de coef-

ficients respectifs 2, 2 et 4. Après la correction, on se propose de
faire le calcul des moyennes, la moyenne générale par épreuve, la
moyenne générale de toutes les épreuves pondérées et le nombre
d’admis sachant qu’un candidat est déclaré admis s’il obtient une
moyenne supérieure ou égale à 10.
5. Les structures de contrôle itératives à condition d’arrêt

Cette structure de contrôle permet à l’ordinateur de répéter un
traitement donné. Nous avons vu le cas des répétitions dont le nombre
est connu d’avance. Nous l’avons appelé : structure itérative complète.
Cependant, plusieurs problèmes nécessitent les répétitions d’un traite-
ment dont on ne connaît pas le nombre. C’est une condition qui doit
gérer l’arrêt des répétitions.
Nous allons vous présenter des activités auxquelles vous êtes rela-
tivement familiarisées.
45
1. Une personne en possession d’une carte bancaire se présente à un

distributeur pour retirer de l’argent. Cette personne a des doutes con-
cernant son code secret. Le système ne lui permet que trois essais au
maximum.
Ecrire les étapes du programme permettant la lecture du code secret.
Réponse :
En effet, dès que la personne aura mis sa carte dans le distributeur, il
va entrer dans une boucle qui va lui permettre la saisie de son code.
Si la première saisie est fausse, le distributeur va lui donner une sec-
onde chance. Si après cette chance, le code saisi est encore erroné, le
distributeur donne la troisième et la dernière chance, après quoi, la
carte sera avalée si le code n’est pas encore correct.
Nous pouvons formuler cette action par :
Répéter
Incrémenter l’essai
Saisir le code
Jusqu’à (code correct) ou (essai=3)
2. Vous êtes dans une station de transport public de Mvan à attendre

le bus qui vous conduira en Mbalmayo. Ce dernier arrive, le convoyeur
procède à faire monter les voyageurs avec la condition qu’aucun ne
possède de bagage.
Écrivez l’action faite par le convoyeur.
Réponse :
Dans ce cas, en arrivant à une station, le convoyeur avertit le chauf-
feur d’ouvrir les portes s’il reste des places vacantes et commence
l’action itérative suivante.
Tant qu’il y a encore des places, faire monter les voyageurs sans bagage.
Cette opération pourra être formulée comme suit :
Tant Que (il y a des places vacantes) faire
Monter voyageur sans bagage
Diminuer d’une place les places vacantes du bus
Fin
Vous avez vu que dans chacune des deux activités, nous avons utilisé
une structure itérative particulière. Ce sont les deux formulations tra-
duisant la structure itérative à condition d’arrêt.
46
Définition
On appelle structure de contrôle itérative à condition d’arrêt

l’action qui consiste à répéter un traitement donné et que l’arrêt est
géré par une condition.
Il existe deux formulations pour traduire une telle structure :
La structure
Répéter …. Jusqu’à …
et la structure
Tant Que … Répéter ….
Syntaxe
1.
Répéter
Traitement
Jusqu'à (Condition d’arrêt)
2.
Tant Que Not(Arrêt) Faire
Traitement
FinTantQue
Remarque
• “Traitement” est le jeu d’instructions à répéter.
• “FinTantQue” sert à délimiter les instructions qui vont former
“Traitement”.
• Dans les deux formulations, il faut faire attention aux deux cas
d’entrée et de sortie de la boucle et de faire les bonnes initialisations
et les bons emplacements des instructions relatives à l’avancement
dans l’itération. Ceci est souvent une source d’erreurs.
47
V- LES FONCTIONS ET PROCEDURES

Dans le cas de la résolution d’un problème simple, il est possible
d’écrire directement l’algorithme correspondant. Toutefois, dans le cas
d’un problème plus complexe, la solution nécessiterait l’écriture de plu-
sieurs sous-programmes résolvant chacun une partie du problème.
En général, et afin de faciliter la résolution d’un problème com-
plexe et/ou de grande taille, on doit le décomposer en sous-problèmes
indépendants et de taille moindre. Ce principe de réduction de com-
plexité est connu sous le nom : « Diviser pour régner ».
Exemple 1 :
Soit le problème consistant en la détermination de tous les nombres
premiers compris entre 1 et 10000. La résolution de ce problème né-
cessiterait de développer un sous programme permettant de décider
si un nombre entier donné est premier. La solution globale fera alors
appel à ce sous-programme (module) pour tous les nombres entiers
de la fourchette 1 à 10000.
Exemple 2 :
Votre classe veut organiser une fête de fin d’année. Il est alors néces-
saire de se partager le travail afin de réussir ce projet. Dans ce but,
un chef de projet et des groupes d’élèves seront constitués. Chaque
groupe aura une tâche précise et devra la programmer. Un groupe
s’occupe de la décoration de la salle ; un autre s’occupe des invités
; un autre s’occupe des prix à distribuer aux bons élèves et un au-
tre groupe prend en charge l’aspect musical. Le chef de projet pilote
l’ensemble des groupes. Il appelle chaque groupe pour l’exécution
d’une tâche donnée au moment opportun.
À travers cet exemple, des notions importantes apparaissent suite à
des questions naturellement posées. En effet, le chef de projet aura
à communiquer avec chaque groupe de travail en précisant des don-
nées comme par exemple les dimensions de la salle et il obtiendra des
résultats comme par exemple le nombre des personnes qu’elle peut
contenir. Le calcul du nombre de personnes est bien sûr élaboré par
un des groupes de travail en utilisant des ressources locales telles
que les mesures des tables, etc.… Outre ces communications, les
groupes de travail peuvent utiliser quelques ressources du chef du
projet ; ça peut être par exemple une caisse commune.
Toutes ces notions sont explicitées par la suite dans ce paragraphe
48
où nous présentons encore une fois une introduction à l’analyse mod-

ulaire, la notion de module ou de sous-programme et les problèmes
qu’elle pose quant à la transmission des paramètres et le partage des
données. Nous explicitons les cas des fonctions et des procédures.
J’apprends /cours
1. L’analyse modulaire
Un aspect important d’une méthodologie d’analyse est de rendre
possible la décomposition modulaire d’un programme en plusieurs sous-
programmes. Il est certain que toute méthode d’analyse qu’elle soit de-
scendante ou ascendante, voit son efficacité renforcée si on la combine
avec l’utilisation de cette notion.
Définition
L’analyse modulaire consiste à diviser un problème en sous prob-

lèmes de difficultés moindres. Ces derniers peuvent être aussi assu-
jettis à cette division jusqu’à ce qu’on arrive à un niveau abordable
de difficulté.
a- Intérêts
Le recours à une méthode d’analyse utilisant le concept de la mod-
ularité présente un ensemble d’avantages. Parmi ceux-ci, on cite :
• Améliorer l’écriture de l’algorithme de résolution et du programme asso-
cié en évitant les duplications de textes.Remarque
Si une même suite d’instructions
figure à plusieurs endroits d’un programme, elle pourra constituer un
sous-programme et être remplacée par un appel à ce sous-programme.
• Pouvoir poursuivre l’analyse du problème initial comme si différents
sous-problèmes étaient résolus ; chaque sous-problème lui est alors as-
socié un sous-programme.
• Faciliter la résolution du problème en ne s’intéressant qu’à la résolu-
tion algorithmique d’un sous-problème à la fois.
• Décrire l’algorithme de chaque sous-programme avec un tableau de
déclaration indépendant mais relatif à l’environnement du sous-prob-
lème résolu.
• Réutiliser des sous-programmes par ailleurs décrits tels que des fonc-
tions appartenant à des bibliothèques standard (telle que la bibliothèque
de fonctions mathématiques, la bibliothèque de fonctions de gestion de
l’écran, etc.…).
49
Ainsi, le programme sera plus lisible, plus facile à documenter, à mettre

au point et à maintenir (modifier éventuellement par la suite).
Si la décomposition modulaire est un bon moyen de structurer
les programmes, il faut que le découpage soit significatif : un sous-pro-
gramme doit correspondre à une tâche déterminée qui intervient “na-
turellement” dans l’analyse du problème. L’analyse modulaire met en év-
idence progressivement des sous-problèmes : ceci offre “naturellement”
la possibilité de définir des sous-programmes de tâches claires, précises
et explicites.
b- Notion de sous-programme
C’est une portion de code analogue à un programme, déclaré dans
un programme ou dans un sous-programme et dont la partie instruction
peut être exécutée plusieurs fois au cours du traitement du programme
grâce à des appels.
On distinguera alors les sous-programmes appelant et appelé.
L’appelant va activer l’appelé à l’aide d’une instruction d’appel et lorsque
l’exécution de l’appelé cesse, un retour à l’appelant s’effectue afin de
poursuivre l’exécution à partir de l’action qui suit l’appel.
On distingue deux types de sous-programmes : les fonctions et
les procédures.
Remarque
Une fonction réalise un traitement et retourne un seul résultat, comme
par exemple la fonction factoriel(n) alors qu’une procédure réalise un
traitement et pourrait retourner zéro, un ou plusieurs résultats.
Décider si un sous-programme est une fonction ou une procédure

se fait lors de l’analyse et ce sous-programme, en fonction de la nature
du traitement et des entrées/sorties réalisées.
c- Exemple d’analyse modulaire

Nous proposons dans l’activité ci-dessous non pas une solution
complète du problème mais plutôt une approche de résolution du prob-
lème
Donner un algorithme pour la construction d’une maison. Arrêtez-
vous à ces énoncés et ne regardez pas la solution proposée. Prenez
une feuille et un crayon, essayez de tracer une démarche de résolution
de ce problème.
50
Puis essayez de comparer votre proposition avec celles de vos cama-

rades.
Solution :
Afin d’aborder ce problème, il est recommandé d’appliquer le principe
de réduction de complexité (diviser pour régner). Ceci nous conduit
à adopter une approche modulaire et descendante afin de diviser le
problème en sous problèmes ou en modules de difficulté moindre. Si
dans un module, il y a encore davantage de complexité, on continue
à le diviser en sous modules et ainsi de suite jusqu’à arriver à un
niveau élémentaire de difficulté.
Nous devons d’abord reposer le problème en détails. Nous supposons
que le futur propriétaire de cette maison va faire le choix du terrain et
de son emplacement. Il a aussi une idée claire et précise du plan de
la maison. Commençons donc l’analyse de ce sujet.
Analyse
Nous pouvons constater que le résultat MaMaison est une suite or-
donnée de cinq modules qui sont : Finition, Toits, Murailles, Fonda-
tions et Terrain. La disposition de ces modules est descendante
Nous passerons ensuite à l’analyse de chaque module à part. Prenons
l’exemple du module Finition.
Vous avez remarqué à travers cet exemple comment diviser un grand
programme de construction d’une maison en sous-programmes. Eux-
mêmes, ces sous-programmes sont divisés en sous-programmes.
C’est l’approche modulaire.
2. Les paramètres et leurs modes de transmission

a- Les paramètres formels
Définition
Les paramètres formels sont les paramètres qui se trouvent dans
l’entête du sous programme.
Syntaxe
La présentation de l’entête d’une fonction Moyenne par exemple
est la suivante :
FONCTION Moyenne (c1, n1, c2, n2 : Réel) : Réel
Dans l’entête de la fonction Moyenne, c1, n1, c2 et n2 sont
des paramètres formels.
Pour leur spécification, il faut indiquer le nom, le type et le mode de
passage de chaque paramètre (voir ci-dessous). Dans la partie instruc-
tion du sous-programme, on fait référence aux paramètres formels.
Dans la fonction Moyenne, c1, n1, c2 et n2 sont manipulés dans la
partie instruction.
51
b-Les paramètres effectifs

Définition
Les paramètres effectifs sont les paramètres qui figurent (dans le

programme ou sous-programme appelant) au niveau de l’appel du
sous-programme. Leurs valeurs respectives sont relatives à une ac-
tivation particulière et se substitueront aux paramètres formels.
Remarque
Le nombre des paramètres effectifs et des paramètres formels cor-
respondants doit être le même. La correspondance entre paramètre
formel et paramètre effectif s’établit d’après leur position dans la liste
des paramètres. Il faut bien sûr s’assurer de la compatibilité de type
entre paramètre effectif et paramètre formel correspondant. Moyenne
(Coef1, Note1, Coef2, Note2) constitue l’appel de la fonction Moyenne.
Les objets Coef1, Note1, Coef2 et Note2 sont des paramètres effectifs.
Coef1 est un paramètre effectif correspondant au paramètre formel c1.

Note2 est un paramètre effectif correspondant au paramètre formel n2.
Coef2 est un paramètre effectif correspondant au paramètre formel c1.
Note2 est un paramètre effectif correspondant au paramètre formel n2.
c- Mode de passage des paramètres

Pour les sous-programmes, il existe deux modes de passage des
paramètres : le mode de passage par valeur et celui par variable. Pour le
cas de la fonction, nous définissons seulement le mode de passage par
valeur lequel est le plus utilisé.
Le mode de passage par variable sera expliqué dans la définition
des procédures.
d- Mode de passage par valeur

Définition
Le paramètre effectif est une expression (on rappelle que ça peut
être une constante, une valeur explicite, une variable ou un cal-
cul simple donnant une valeur).
Le paramètre formel correspondant désigne une variable locale du

sous-programme. Au moment de l’appel, l’expression représentant le
paramètre effectif est évaluée dans le contexte du programme ou du
sous-programme appelant. La valeur du paramètre effectif est copiée
dans la variable locale désignée par le paramètre formel correspondant.
52
L’appelant impose à l’appelé une pure lecture des valeurs des paramè-
tres effectifs. Les paramètres transmis par valeur font communiquer
l’information dans un seul sens: du sous-programme (ou programme)
appelant vers le sous-programme appelé.
Les paramètres formels sont des variables locales dont les valeurs après
exécution des instructions de l’appelé ne peuvent pas être récupérées
par l’appelant. Ce mode assure donc une protection des variables de
l’appelant transmises par valeur. Elles gardent les mêmes valeurs au
niveau de l’appel du sous-programme et juste après l’exécution de cet
appel.
Dans notre exemple, l’appel de la fonction Moyenne (Coef1, Note1, Coef2,
Note2), les paramètres effectifs Coef1, Note1, Coef2 et Note2 sont trans-
mis par valeur. Les paramètres formels correspondants c1, n1, c2 et
n2 seront tout simplement “initialisées” par les quatre valeurs Coef1,
Note1, Coef2 et Note2 au moment de l’appel de cette fonction.
Remarque
Dans la partie instruction du sous-programme appelé (exemple : fonc-
tion Moyenne), les paramètres formels transmis par valeur (exemple
: c1, n1, c2 et n2) ne doivent en aucun cas se trouver à gauche du
symbole d’une instruction d’affectation. Même si par erreur la valeur
du paramètre formel transmis par valeur (exemple : c1, n1, c2 ou n2)
est modifiée dans l’appelé, au retour après exécution de celui-ci, le
paramètre effectif correspondant (exemple : Coef1, Note1, Coef2 ou
Note2) garde la même valeur originale transmise lors de l’appel. En
effet on ne manipule au niveau de l’appelé qu’une copie locale.
3- Les fonctions
Lorsqu’un ensemble d’instructions doit être exécuté plusieurs fois
dans un programme il est possible de les regrouper dans une fonction
qui sera appelé par le programme à chaque fois qu’il en aura besoin.
Cela évite de taper plusieurs fois l’ensemble d’instruction.
Définition
Une fonction est un sous-programme qui renvoie une valeur d’un

seul type. Ce type sera celui de la fonction.
53
Soit la fonction f(x)=4.x+0,75. Nous voulons écrire un programme qui
affiche pour n valeurs de x, le couple (x, f(x)), x étant une valeur don-
née.
Analyse
Objet Type Rôle
n Entier Nombre d'itérations
i Entier Compteur
x Réel Abscisse
y Réel Valeur de f(x)
f Fonction de valeur f(x) =4*x+0.75 Fonction
Algorithme Calcul_F
Var
n, i : Entier ;
x, y : Réel ;
Début
Lire (n) ;
Pour i de 1 à n Faire
Ecrire (“Entrer la valeur de x “) ;
Lire (x) ;
y ← f(x) ;
Ecrire (x, y) ;
FinPour
Fin
Remarque
1) L’appel de la fonction f est fait à l’aide de f(x).
2) La fonction qu’on appelle se place toujours du coté droit de
l’affectation
Analyse de la fonction f
x et f sont déjà déclarés au niveau de l’entête de la fonction (f (x : Réel)

: Réel).
54
Algorithme
FONCTION f (x : Réel) : Réel
f ← 4*x+0,75 ;
Fin FONCTION
Remarque
f est une fonction ayant un seul paramètre x. Il est possible qu’une
fonction ait plusieurs paramètres. Dans le cas de la fonction
Moyenne, elle en possède plusieurs.
a- Activation d’une fonction et retour du résultat de la

fonction
i- Activation d’une fonction
Définition
L’activation d’une fonction est provoquée par l’exécution d’une
instruction d’appel.
Dans notre exemple, f (x) constitue l’appel à la fonction f.
Syntaxe
L’activation de la fonction après passage des paramètres se dé-

roule dans l’ordre suivant :
1. Déclarations des objets locaux ;Remarque
ce qui provoque leur création
(et notamment les places mémoires nécessaires aux différentes vari-
ables locales).
2. Exécution des instructions qui composent le corps de la fonction.
3. Sortie de la fonction provoquée une fois que le corps est exécuté
et que l’on atteint l’instruction Fin. Il y a alors retour à l’appelant qui
continue l’exécution de l’instruction en cours ou l’instruction qui
suit l’instruction d’appel.
ii- Retour du résultat de la fonction

Une fonction possède un type, c’est celui du résultat qu’elle calcule.
Dans notre exemple,
FONCTION f (x : Réel) : Réel, la fonction f rend un résultat du type Réel.
Si l’on considère l’appel de la fonction Moyenne (c1, n1, c2, n2), on
a la représentation suivante :
55
Remarque
1. Il doit y avoir nécessairement dans la partie instruction de la fonc-
tion au moins une affectation explicite ayant l’identificateur de la
fonction à gauche du symbole d’affectation.
Dans notre exemple, ceci est illustré par : f <-- 4*x+0.75.
2. La dernière valeur affectée à cet identificateur lors de l’appel de la
fonction est le résultat de l’évaluation de la fonction.
Une fonction peut être appelée à l’intérieur d’une expression (exemple
y <--3*f(x)).
3. L’appel de la fonction ne pourra pas se trouver à gauche du sym-
bole de l’affectation dans le sous-programme ou programme appelant
4. Une fonction calcule une valeur qui, retournée au sous-programme
ou programme appelant, est immédiatement utilisable. Son nom est
le seul paramètre résultat et tous les paramètres explicitement trans-
mis sont en principe des données.
Je pratique
Cas 1 :
Soit la fonction f(x) = 4x - 9. Nous voulons écrire un algorithme qui
affiche pour x allant de 3 à 20 les valeurs du couple (x, f(x)).
Cas 2 :
Soit la fonction g(x) = 10x - 2. Nous voulons écrire un algorithme qui
affiche toutes les valeurs du couple (x, g(x)) telles que g(x) soit stricte-
ment superieur à 0.
56
4- Les procédures
Définition
Les procédures sont des sous-programmes qui peuvent avoir zéro,
un ou plusieurs résultats. Une procédure permet de résoudre un
sous-problème.
Syntaxe
PROCEDURE identificateur_procedure(paramètre1, paramè-
tre2, ..., paramètren)
Écrire un algorithme permettant de saisir le nom et la note de n can-
didats. Il doit ensuite appeler une procédure Concours qui affiche
l’admission éventuelle de cette personne au concours. On fera la sai-
sie de n noms et notes.
Objet Type Rôle
n Entier Nombre de candidats au concours
i Entier Compteur
Nom Chaîne Nom d'une personne donnée
Note Réel Note obtenue au concours
Concours Procédure Procédure permettant d'afficher l'admission au
concours d’une personne donnée
Algorithme Recrutements
Var Remarque
n, i : Entier ;
Note : Réel ;
Nom : Chaine ;
début
Ecrire (“ donner le nombre de personnes : “) ;
Lire (n) ;
Lire (Nom) ;
Lire (Note) ;
PROCEDURE Concours(Nom,Note) ;
FinPour
Fin.
57
Analyse de la procédure Concours

Objet Type Rôle
message Chaine Message à adresser au candidat
Algorithme
PROCEDURE Concours (Lenom : Chaîne, Note_eval : Réel)

Si (Note_eval > 14) Alors
message ← “ vous êtes admis au concours ”
Sinon
message ← “ vous n’êtes pas admis au concours ”
Finsi
Écrire (“ M. ”, Lenom, message) ;
Fin Concours
Dans l’activité, l’appel est réalisé par l’instruction : PROCEDURE Con-

cours (Nom,Note).
Les définitions des objets locaux et globaux pour une procédure suiv-
ent les mêmes règles que celles édictées pour les fonctions.
L’entête de la procédure Concours est PROCEDURE Concours (Le-
nom : Chaîne Remarque
, Note_eval : Réel).
Lenom et Note_eval sont deux paramètres formels avec un mode de
Une fonction réalise un traitement et retourne un seul résultat, comme
transmission par valeur que nous avons traité lors de l’étude des
par exemple la fonction factoriel(n) alors qu’une procédure réalise un
fonctions. Nous allons définir dans le paragraphe suivant le mode de
traitement et pourrait retourner zéro, un ou plusieurs résultats.
transmission par variable.
Remarque
L’appel de la procédure doit se trouver dans une instruction d’appel
et ne peut pas être dans une expression comme le cas des fonctions.
Mode de transmission par variable
Soit T un tableau de n caractères (2≤n≤20). On se propose d’écrire un
programme qui saisit n et les valeurs du tableau T, ensuite il appelle
une procédure Occurrence qui cherche le nombre de caractères al-
phabétiques et le nombre de chiffres dans le tableau T.
58
Analyse
Objet Type Rôle
Nbr_A Entier Paramètre effectif résultat, nombre de caractères al-
phabétiques
Nbr_C Entier Paramètre effectif résultat, nombre de chiffres
T Tableau Tableau des caractères
n Entier Nombre d'éléments de T
i Entier Compteur
Algorithme Cherche_nbr
Var
Nbr_A, Nbr_C, n, i: Entier ;
T : Tableau [1..30] de Caractère ;
Début
Ecrire(“Entrer le nombre d’éléments”) ;
Lire (n) ;
Ecrire(“ Entrer un élément”) ;
Lire (T(i)) ;
FinPour
PROCEDURE Occurence (T, Nbr_A, Nbr_C) ;
Ecrire (“Alphabétique = “, Nbr_A, “Chiffre = “, Nbr_C) ;
Fin
Analyse de la procédure Concours

Objet Type Rôle
I Entier Compteur
Algorithme
PROCEDURE Occurrence (TE : tableau de n entiers, VAR A : entier,
VAR C : entier)
A←0
C←0
POUR I de 1 à n Faire
Si (TE[I]) Dans [“A”..”Z”] ou Dans [“a”..”z”] Alors
A ← A +1 ;
Sinon si (TE[I]) Dans [“1”..”9”] Alors
C ← C +1 ;
FinSi
Fin POUR
Fin PROCEDURE
59

Dans cette activité, l’appel est réalisé par l’instruction :
PROC Occurrence ( T, Nbr_A, Nbr_C ).
L’entête de la procédure Occurrence est PROCEDURE Occurrence (TE
: tableau d’entiers d’indices entier , VAR A : entier , VAR C : entier ).
Remarque
Dans l’analyse de la procédure Occurrence, l’objet utilisé n est un ob-
jet global.
Comme nous le verrons par la suite, n sera déclaré dans le programme
appelant qui est dans ce cas le programme principal.
Appelant T Appelé
DEF PROC Occurrence (TE : tableau
PROCEDURE Occurrence (T, d'entiers d'indices entier, VAR A : entier,
A, C
Nbr_A, Nbr_C ) VAR C : entier)
Figure 1.1 : Passage de paramètres entre l’appelant et l’appelé

TE est le paramètre formel avec un mode de transmission par valeur.
A et C sont des paramètres formels avec un mode de transmission par
variable.
Le paramètre effectif est une variable qui peut être une variable simple
ou structurée (tableau), ou élément d’un tableau. Dans l’entête de la
procédure, on doit faire précéder les paramètres formels transmis par
variable par le mot-clé VAR. S’ils sont d’un même type, on pourra les
regrouper après un même VAR.
Les paramètres transmis par variable font communiquer l’information
dans les deux sens :
A l’appel, l’appelant transmet une ou plusieurs valeurs à l’appelé ; de
même l’appelé rend un ou plusieurs résultats à l’appelant au moment
du retour après activation de la procédure.
Il faut donc utiliser ce mode de transmission par variable chaque fois
que le paramètre représente un résultat calculé par le sous-programme
appelé et transmis au sous programme (ou programme) appelant.
Dans ce mode de passage, le paramètre effectif et le paramètre formel
correspondant deviennent synonymes et ont la même adresse (la même
référence en mémoire).
Cela implique que toute modification d’un paramètre formel dans le
sous-programme appelé (dans la partie instruction) entraîne au mo-
ment du retour à l’appelant une modification de la valeur du paramètre
effectif correspondant.
60
Dans l’instruction d’appel PROCEDURE Occurrence ( T, Nbr_A, Nbr_C)

de l’exemple précédent, les variables Nbr_A et Nbr_C sont des paramè-
tres effectifs recevant en retour un résultat de la part de la procédure
Occurrence au retour une fois son activation terminée.
Le mode de transmission est alors nécessairement par variable. Dans
l’entête de la procédure Occurrence, les paramètres formels correspon-
dant A et C sont précédés par le mot-clé VAR.
Remarque
Dans cet exemple, les paramètres formels A et C sont initialisés au
niveau de l’appel par les valeurs de Nbe_A et de Nbe_C puis une fois
les variables A et C permutées, au retour, leurs valeurs sont com-
muniquées en tant que résultats à l’appelant. Les variables Nbe_A et
Nbe_C reçoivent alors les nouvelles valeurs résultats. Ces paramètres
sont des paramètres Données / Résultats. Cet exemple nous montre
l’intérêt de l’utilisation du mode de passage par variable.
Il est possible de déclarer un sous-programme sans paramètre. La com-
munication avec l’appelant pourrait se produire grâce aux ressources
communes (objets globaux) partagées entre l’appelé et l’appelant.
Je pratique
1. Ecrire un programme qui répète n fois la saisie de deux valeurs x et

y, affiche ces valeurs puis appelle un sous-programme permettant de
permuter ces deux valeurs et il affiche à chaque fois les deux valeurs
permutées.
2. On veut saisir le contenu de deux vecteurs d’entiers A(Xa, Ya) et

B(Xb, Yb) et faire la somme des deux puis mettre le résultat dans un
vecteur C que l’on affichera par la suite. Décomposer ce problème en
en un ensemble de sous-problèmes et analyser chacun de ces sous-
problèmes.
a. Ecrire la procédure SOMME qui prend trois (03) paramètres
donc le troisième est passé par variable
b. Ecrire l’algorithme correspondant à ce problème
61
VI- LA RECURSIVITE
J’apprends /cours
On affirme souvent que la notion de fonction récursive est extrême-
ment difficile à appréhender par les apprenants, car dit-on, «définir
une notion en s’appuyant sur la notion que l’on est en train de définir
est complètement incompréhensible». On ajoute souvent que c’est
l’une des difficultés majeures de l’apprentissage de la programmation
fonctionnelle, car la récursivité y joue un rôle bien plus important que
dans les autres paradigmes de programmation. Je conteste ce point
de vue, car je suis persuadé que tout le monde a déjà rencontré cette
vieille notion (elle apparaît déjà dans les écrits d’Archimède sur la
quadrature de la parabole et de la lunule). C’est pourquoi je me suis
mis à traquer la récursivité dans la vie courante, et ai appris à la re-
connaître un peu partout!
Voici ce que ça donne et ce n’est pas triste...
En philosophie, chez les grecs au 5ème siècle avant JC :
Connaîs-toi toi-même.
Médecin, soigne-toi toi-même.
Socrate: Je sais que je ne sais rien.
En logique, toujours chez les grecs anciens :
Un dictionnaire est un livre qui explique les mots avec des définitions
qui sont faites de phrases qui sont des suites de mots.
En proverbe,
On n’est jamais mieux servi que par soi-même!
En croyances absurdes,
Ne soyez pas superstitieux : ça porte malheur!
En titre, Raymond Smullyan a écrit un livre sur la logique intitulé :
Titre : Quel est le titre de ce livre ?
En biologie, Œuf et poule sont définis mutuellement récursivement
: la poule naît d’un œuf (qui est produit par une poule (qui naît d’un
oeuf (qui est produit
Remarque par une poule (qui naît d’un oeuf (qui est produit
...)))))
Question 1 :
Proposez une analyse, puis déduisez l’algorithme d’une fonction per-
mettant de calculer la factorielle d’un entier n. Comment appelle t-on
le procédé utilisé dans ce traitement ?
62
Analyse de la fonction Factorielle

Résultat : Factorielle
Traitement : La factorielle est obtenue après :
♦♦ Une initialisation (F ←1),
♦♦ Ensuite, une structure itérative complète (Pour i de 2 à n Faire)
contenant l’instruction :
F←F * i
Algorithme de la fonction Factorielle
Fonction Factorielle (n : Entier) : Entier
F ←1;
F←F * i;
Fin Pour
Factorielle ← F;
Fin Factorielle
Tableau de déclaration des objets :
Objet Type Rôle
F Entier Long Contenant la factorielle de n
i Entier Entier non signé (Mot) Compteur
Il s’agit d’un procédé itératif pour calculer n!
Question 2 : Pouvez vous proposer un procédé différent pour trouver

la valeur de la factorielle de n ?
Idée
Et si pour résoudre un problème, on réduisait sa taille ?
Dans certains cas, la solution d’un problème peut se ramener à ré-
soudre le même problème de taille plus réduite, qui lui-même pourra
se ramener à résoudre le même problème de taille encore plus petite
... jusqu’à aboutir à la résolution d’un problème élémentaire.
Explications :
* Donnez la formule mathématique de la factorielle de n
n ! = n * (n-1) * (n-2) * (n-3) * … * 1
et 0 ! = 1
ou encore
factorielle (n) = n * (n-1) * (n-2) * (n-3) * … * 1 Formule 1
et factorielle (0) = 1
* Remplacez la partie en gras de la Formule1 donnée ci-dessus
par une expression équivalente utilisant la fonction factorielle
factorielle (n) = n * factorielle (n-1) Formule 2
et factorielle (0) = 1
63
Constatations :
♦♦ Pour définir factorielle (n) au niveau de la Formule 1, nous avons
utilisé un traitement itératif.
♦♦ Pour définir factorielle (n) au niveau de la Formule 2, nous avons
utilisé un appel un appel de la même fonction
Exemple :
Pour calculer factorielle (4) ou 4!, nous procédons ainsi :
1ère étape : 4 ≠ 0 alors
Factorielle (4) = 4 * Factorielle (4-1) = 4 * Factorielle (3)
2ème étape : 3 ≠ 0 alors
Factorielle (3) = 3 * Factorielle (3-1) = 3 * Factorielle (2) d’où
Factorielle (4) = 4 * 3 * Factorielle (2)
Factorielle (4) = 4 * 3 * 2 * Factorielle (1)
Factorielle (4) = 4 * 3 * 2 * 1 * Factorielle (0)
5ème étape : La valeur 0 est rejointe, c’est le cas particulier qui pro-
voquera l’arrêt des étapes du calcul de la factorielle, alors
Factorielle (0) = 1
D’où Factorielle (4) = 4 * 3 * 2 * 1 * 1
Remarque
Le résultat final = 24
Conclusion :
Voici la solution récursive de la fonction Factorielle :
0) Fonction Factorielle (n : Entier) : Entier
1) Si (n = 0) Alors Factorielle ← 1
Sinon Factorielle ← n * Factorielle (n-1)
Fin Si
2) Fin Factorielle
Constatations :
La solution récursive comporte :
♦♦ L’appel récursif en changeant la valeur du paramètre. Dans
l’exemple de la fonction Factorielle, le paramètre est décrémenté de
1 à chaque appel, (Factorielle ← n * Factorielle (n-1))
♦♦ La condition d’arrêt de l’appel récursif. En effet, nous arrêtons le
traitement quand n devient égal à 0 (Si n = 0 Alors Factorielle ←1)
Conclusion :
La solution récursive comporte :
♦♦ Un appel récursif en changeant la valeur du paramètre. Dans
64
l’exemple de la fonction Palindrome, le paramètre ch est démuni

de son premier et de son dernier caractère s’ils sont identiques,
(Palindrome ← Palindrome(Sous_chaîne (ch, 2, Long (ch) - 2)))
♦♦ Une 1ère condition d’arrêt de l’appel récursif. En effet, nous ar-
rêtons le traitement lorsque les caractères extrêmes du paramètre
sont différents
(Palindrome ←Faux)
♦♦ Une 2ème condition d’arrêt de l’appel récursif, lorsque le para-
mètre est composé d’un seul caractère (Si Long (ch) < 2 Alors Pal-
indrome ←Vrai)
1. Définitions
La récursivité est une méthode algorithmique qui consiste à ap-
peler un sous-programme dans son propre corps. Cette méthode
permet de résoudre des problèmes où l’on doit itérer un nombre de
fois dépendamment du nombre de données.
Un sous-programme récursif est un module qui s’”appelle” lui-même.
A chaque appel, il y a mémorisation d’une valeur différente d’un même
paramètre formel.
Le principal avantage d’un algorithme récursif est qu’il est générale-
ment plus simple, plus lisible et naturel à comprendre. Par contre, le
principal problème est la définition du ou des cas d’arrêt. Il est im-
portant de s’assurer que le programme se termine correctement dans
tous les cas.
La limite technique de la récursivité est la mémoire stockant les don-
nées intermédiaires des sous-programmes, que nous appelons la
“pile”. Cette dernière déborde lorsque le nombre des appels devient
important.
Remarque
1) Les fonctions récursives sont appelées depuis leur propre corps,
soit directement, soit indirectement à travers une ou plusieurs fonc-
tions relais.
Par exemple, si la fonction P appelle directement P, nous disons que
la récursivité est directe. Si P appelle une fonction P1, qui appelle
une fonction P2, ..., qui appelle une fonction Pn et qui enfin appelle
P, nous disons qu’il s’agit d’une récursivité indirecte.
2) La récursivité est dite croisée lorsque plusieurs procédures ou fonc-
tions s’appellent mutuellement.
65

2. Principe
Un programme récursif doit :
♦♦ traiter un ou plusieurs cas particuliers représentés par une ou
plusieurs conditions d’arrêt, sinon il tournera indéfiniment.
♦♦ traiter un ou plusieurs cas généraux représentés par des ap-
pels récursifs. Chaque fois qu’un programme récursif est appelé
(par lui-même), un ou plusieurs des arguments qui lui sont trans-
mis doivent converger et arriver à la condition d’arrêt.
C’est-à-dire que la complexité du problème doit être réduite à chaque
nouvel appel récursif.
3. Applications
Nous proposons d’afficher la somme des n premiers entiers.
a. Proposez une analyse au problème en utilisant un procédé ré-
cursif,
b. Déduisez les algorithmes correspondants.

Solution
a. Analyse du problème
Résultat : Ecrire (“La somme des “, n, “ premiers entiers = “, Somme (n))
Traitement : Somme est une fonction récursive permettant de calculer
la somme des n premiers entiers. Elle est appelée au niveau du pro-
gramme principal dans un contexte d’affichage.
Données : un entier n obtenu grâce à la procédure Saisir
b) Algorithme du programme principal et codification des objets
Début Somme_N
Proc Saisir (n)
Ecrire (“ La somme des “, n, “ premiers entiers = “, Somme (n))
Fin Somme_N
Tableau de codification des objets globaux
Objet Type Rôle
n Entier Entier non signé Nombre à sommer
Saisir Procédure Permet de saisir n
S Fonction Permet de sommer les n premiers entiers
Analyse de la fonction Somme
Résultat : Somme
Traitement : La somme des m premiers entiers est obtenue comme suit
:
Un cas particulier : Si m = 0 alors Somme ← 0
Un cas général : Sinon Somme ← m + Somme (m-1).
66
Algorithme récursif de la fonction Somme

Fonction Somme (m : Entier) : Entier
Si (m = 0) Alors Somme ← 0
Sinon Somme ← m + Somme (m - 1)
Finsi
Fin Somme
67
Résumé
• Les constantes contiennent des valeurs inchangées tout le long de
l’exécution de l’algorithme. Les variables peuvent changer de contenu
tout le long de l’algorithme.
• Un type définit un ensemble de valeurs et un ensemble d’opérations
applicables sur ces valeurs.
• Les types standards sont :
– les entiers,
– les réels,
– les booléens,
– les caractères,
– et les chaînes de caractères
• Une expression est composée d’opérateurs et d’opérandes et son
évaluation produit une valeur.
- On distingue les expressions arithmétiques, et les expressions
logiques.
- L’évaluation d’une expression se fait toujours selon l’ordre de
priorité des opérateurs.
• Le type scalaire par énumération définit un ensemble ordonné et fini
de valeurs désignées par des identificateurs définis par l’utilisateur.
Les opérateurs applicables à ces valeurs sont :
- Les opérateurs de relation
- Les opérateurs PRED et SUCC.
• Le type intervalle possède les propriétés d’un type scalaire discret
ordonné (entier, caractère et scalaire énuméré).
La définition d’un intervalle est décrite par la donnée de deux
constantes représentant respectivement la “Borne Inférieure” et la
“Borne Supérieure” appartenant à un type scalaire discret ordonné
et telle que Borne Inférieure < Borne Supérieure.
• Les structures de données vues dans cette leçon sont les tableaux
(suite de variables de même type repérées par des indices).
• Avant d’utiliser un tableau, il faut le déclarer.
• Il faut bien faire la différence entre l’indice d’un élément et le type
des éléments.
• L’action d’affectation consiste à attribuer une valeur à une variable.
• L’instruction d’affectation se note avec le symbole “←”.
• Une variable à affecter située à gauche de l’affectation doit avoir le
même type ou un type compatible avec celui du résultat de l’évaluation
de l’expression placée à droite du symbole d’affectation.
68
• La structure de contrôle conditionnelle simple est utilisée pour

définir au maximum deux résultats dépendant de l’évaluation d’une
seule condition.
• Une structure de contrôle conditionnelle est dite à forme simple ré-
duite lorsque le traitement dépend d’une condition. Si la condition est
évaluée à « VRAI », le traitement est exécuté.
• Une structure de contrôle conditionnelle a une forme alternative si
suivant la valeur d’une condition, on exécute soit un traitement 1
soit un traitement 2.
• La structure de contrôle conditionnelle généralisée offre la possibil-
ité de résoudre des problèmes comportant plus de deux traitements.
• Il existe deux formulations pour traduire une structure itérative à
condition d’arrêt:
- La structure Répéter … Jusqu’à …
- La structure Tant Que … Faire …
• Dans la structure “Répéter …Jusqu’à …”, le traitement à répéter est
exécuté au moins une fois car la condition d’arrêt est testée à poste-
riori (c’est-à-dire après l’exécution des instructions).
• Dans la structure “Tant Que … Faire …. “ le traitement à répéter
peut ne pas être exécuté car la condition d’arrêt est testée à priori
(c’est-à-dire avant l’exécution des instructions). En effet, dans le cas
où elle est vraie dès le début, le traitement n’est pas exécuté.
• Dans l’une ou l’autre formulation, il est conseillé de vérifier à la
main l’exécution pour s’assurer du bon fonctionnement de la boucle
et surtout des cas limites. Il est important de bien initialiser la struc-
ture et de bien positionner les instructions à l’intérieur de la boucle
• Pour faciliter la résolution des problèmes, souvent, ils sont décom-
posés en sous problèmes par une analyse modulaire. Chaque sous-
problème fait l’objet d’une procédure ou d’une fonction.
Une fonction est constituée de trois parties :
1) La partie “entête de la fonction” où nous trouvons le nom
de la fonction suivi entre parenthèses des paramètres en entrée et de
leur mode de passage, puis du type du résultat.
2) La partie “déclaration locale” où tous les objets locaux de
la fonction sont déclarés.
3) La partie “corps de la fonction” où nous trouvons les in-
structions propres à la fonction.
• Les objets déclarés dans un programme ou dans un sous-programme
sont dits locaux à celui-ci.
• Tout objet est dit récursif s’il se définit à partir de lui-même. Ainsi,
un sous-programme est dit récursif s’il comporte, dans son corps, au
moins un appel à lui-même.
69
Exercices
QCM (Questions à Choix Multiple)
1 - Un algorithme est :
a- un programme écrit en Langage dde l’ordinateur
b- un programme écrit en Python
c- une suite d’actions à exécuter, de la première à la dernière.
2-Un algorithme se construit :
a- après l’écriture d’un programme
b- avant l’écriture d’un programme
c- l’ordre de construction n’a pas d’importance
3 - Parmi les éléments suivants, quel est celui qui permet de stocker
une valeur ?
a- Constante b- variable c- expression
4 - Parmi les éléments suivants, quel est celui qui permet de calculer ?
a- Variable b- déclaration c- expression
5 - Quel est l’opérateur capable de stocker une valeur dans une vari-
able ?
a- + b- / c- =
6 - Quelle est l’écriture qui permet d’ajouter 5 à la variable prix ?
a- prix = 5 b- prix = prix 5 c- prix = prix + 5
7 - Comment s’appelle l’action qui soustrait un d’une variable ? Une :
a- Incrémentation b- décrémentation c- comparaison
8 - Comment s’appelle une structure qui influence le déroulement de
l’algorithme dans le temps ?
a- Binaire b- de tableau c- de contrôle
9 - Quelle est la structure qui permet de choisir une action parmi deux
possibles ? Une :
a- Séquence b- répétitif c- alternative
10 - L’évaluation d’une condition renvoie un résultat du type :
a- Logique b- textuel c- arithmétique
11 - Après l’exécution du code suivant, quelle sera la valeur de C si A
vaut 7 ?
Si A<>7 Alors
C=A*A ;
Sinon
C=-A ;
Fin Si
a- 7 b- -7 c- 49
12 - Après l’exécution du code suivant, quelle sera la valeur de C si A
vaut 7 ?
70
Si A=A Alors
C=-3 ;
Sinon
C=2 ;
Fin Si
a- 2 b- 0 c- -3
13 - Sachant qu’un traitement peut être répété 0 à n fois, quelle struc-
ture allez-vous utiliser ?
a- Répéter/Jusqu’à ce que b- si c- Tant que
14 - Sachant qu’un traitement doit être répété 50 fois, quelle est la
structure la plus appropriée ?
a- Répéter/Jusqu’à ce que b- Pour c- Tant que
15 - Dans le code suivant, combien de fois le traitement sera-t-il ef-
fectué ?
cpt=1 ;
Répéter
traitement
cpt = cpt + 1 ;
Jusqu’ à ce queZcpt >= 7
a- 1fois b- 7fois c- 6fois
fectué ?
cpt=1 ;
Répéter
traitement
cpt = cpt + 2 ;
Jusqu’ à ce que cpt=8
a- 1 b- 7 c- à l’infini
fectué ?
Répéter
traitement
cpt = cpt + 1 ;
Jusqu’ à ce que cpt > 5
a- 0 fois b- 5fois c- Impossible à déterminer
fectué au minimum ?
Répéter
traitement
cpt = cpt + 1 ;
Jusqu’ à ce que cpt > 5
a- 0 b- 5 c- 1
71
19 - Quelle sera la valeur affichée à la fin de l’exécution de l’algorithme

suivant ?
cpt = 1 ;
Tant que cpt <= 4
cpt=cpt+3 ;
Traitement
Fin Tant que
Ecrire (cpt)
a- 4 b- 7 c- 1
20 - Quelle est la condition à écrire pour que la boucle fonctionne 10
fois ?
cpt = 1 ;
Tant que ....
Traitement
cpt = cpt + 1 ;
Fin Tant que
a- cpt <=10 b- cpt < 10 c- cpt > 10
Exercices
Exercice 1
Quelle est la différence entre une constante et une variable?
Exercice 2
On se propose de calculer la surface d’un rectangle. Etablir un tab-
leau de déclaration des objets nécessaires.
Exercice 3
Remarque
Soit la séquence d’instructions suivante :
X ← -5
X ← X*X
Y ← -X-3
Z ← (-X-Y)*3
X ← -(X+Y)*2+Z
Y ← Z*X*Y
Y ← -(Z+Y)
X ← X+Y-Z
Y ← X+Z
X ← Y+Z)/(X/10)
Y ← ((X*Z)/Y)*9
Dresser la trace de la séquence algorithmique précédente pour déter-
miner les valeurs des variables X,Y et Z après l’exécution des séquence
d’instructions ci-dessus.
72
Exercice 4
1) Faire une analyse, écrire un algorithme intitulé PERMUTATION
qui permet de permuter les contenus de deux variables X et Y en uti-
lisant une variable auxiliaire.
2) Donner une deuxième méthode permettant de résoudre cet ex-
ercice sans l’utilisation d’une variable auxiliaire.
Exercice 5
Soit la séquence d’instructions suivante :
1) X ← 19.7
2) Y ← 114
3) K ← (X + Y - ABS(X-Y))/2
4) L ← (X + Y + ABS(X-Y))/2
1) Dresser la trace de la séquence algorithmique précédente pour dé-
terminer les valeurs des variables K et L après l’exécution des instruc-
tions précédentes.
2) Quel est le rôle des instructions 3 et 4 ?
Exercice 6
Écrire un algorithme qui saisit un temps en seconde puis le convertit
en jours, heure, minutes et secondes.
Exercice 7
On vous demande d’écrire un algorithme qui permet de convertir une
mesure d’énergie en Joule (J) saisie au clavier en son équivalent Deci-
joule (dJ), Hecto joule (hJ), Kilojoule (kJ), Calorie (cal), Kilocalorie
(kcal), Wattheure (W/h), Kilowattheure (kWh).
Sachant que :
– 1 calorie = 4,1855 joules
– 1 kWh = 3 600 000 J
Exercice 7
On se propose d’écrire un algorithme intitulé POIDS qui calcule le
poids d’une image numérique prise par un appareil photo numérique
de sept méga pixel de résolution et d’un codage de 6 octets (48 bits/
pixel).
Exercice 8
Elaborer un tableau de déclaration des objets relatifs aux :
• noms des employés
• leurs nombres de jours travaillés
73
Exercice 6
Écrire un algorithme qui saisit un temps en seconde puis le convertit
en jours, heure, minutes et secondes.
Exercice 7
On vous demande d’écrire un algorithme qui permet de convertir une
mesure d’énergie en Joule (J) saisie au clavier en son équivalent Deci-
joule (dJ), Hecto joule (hJ), Kilojoule (kJ), Calorie (cal), Kilocalorie
(kcal), Wattheure (W/h), Kilowattheure (kWh).
Sachant que : – 1 calorie = 4,1855 joules
– 1 kWh = 3 600 000 J
Exercice 7
On se propose d’écrire un algorithme intitulé POIDS qui calcule le
poids d’une image numérique prise par un appareil photo numérique
de sept méga pixel de résolution et d’un codage de 6 octets (48 bits/
pixel).
Exercice 8
Elaborer un tableau de déclaration des objets relatifs aux :
• noms des employés
• leurs nombres de jours travaillés
• leurs salaires d’une entreprise comptant 50 employés.
Exercice 9
1-Déclarer le tableau JOURS qui contient les sept jours de la semaine.
2-De même, déclarer le tableau MOIS permettant de regrouper les
douze mois de l’année. Remarque
Exercice 10
Soit le tableau suivant :
1- Déclarer le tableau T en algorithmique.
2- Donner les affectations permettant de remplir T.
3- Inverser les éléments du tableau T sans utiliser un autre tab-
leau.
Exercice 11
Soit le tableau de SALAIRES exprimés en FCFA.
1- Donner les cinq affectations permettant de remplir le tableau
SALAIRES par les données précédentes.
2- Ranger, dans un deuxième tableau SALAIRES_MI, les équivalences
des éléments de SALAIRES en FCFA.
74
Exercice 12
1- Soit V et W deux tableaux d’entiers, de types respectifs T1 et T2
et de tailles respectives 4 et 3.
2- Soit la séquence d’affectations suivantes :
V[1] ← 300
V[2] ← 50
W[1] ← V[1] + V[2]* 2
V[3] ← W[1] DIV 3
W[2] ← W[1] MOD V[1]
W[3] ← V[2] * 2 + 2
V[4] ← (V[2] DIV 4) MOD 2
V[8] ← V[4]
1-Déclarer les deux tableaux V et W.

2-Trouver les erreurs d’affectation dans la séquence précédente.
3-Quel est le contenu de chaque élément des deux tableaux V et W ?
Excercice 13
1- Elaborer un tableau de déclaration des objets où vous définirez
une chaîne prenom de 10 caractères, une chaîne nom pouvant con-
tenir jusqu’à 255 caractères et une chaîne adresse de 25 caractères.
2- Déclarer ces objets en algorithme.
3- Réaliser les affectations suivantes :
Chaîne vide à la variable Prenom, “Atango” à la variable Nom et un
espace à la variable Adresse.
4- Comment accéder au i ème caractère d’une chaîne CH ?
5- Soit l’affectation suivante :
Nom ← ‘’Beti’’
a- Quelles sont les valeurs de Nom[1] et de Nom[4] ?
b- Après l’affectation Nom[2] ← ”a” , Quel est le contenu de la variable
Nom.
NB: Pour chacun des exercices 14 à 16, effectuer une analyse et écrire
un algorithme.
Exercice 14
Lire un nombre et afficher sa racine carrée si elle existe.
Exercice 15
Demander un caractère à l’utilisateur et tester si ce caractère est ma-
juscule ou minuscule.
75
Exercice 16
Lire l’année et afficher si elle est éventuellement bissextile.
NB. Si l’année n’est pas divisible par 4, l’année n’est pas bissextile.
Exercice 10
Saisir un entier de trois chiffres et afficher si cet entier est :
– Cube ou non (la somme des cubes de ses chiffres est égale à lui
même).
– Pair - impair
– Positif - négatif
Exercice 17
Donner la différence entre les deux formulations traduisant une struc-
ture itérative à condition d’arrêt.
Exercice 18
Quand il s’agit de faire un contrôle lors de la saisie d’une donnée, pour-
quoi il est préférable d’opter pour la structure “Répéter .. Jusqu’à…”
Exercice 19
Analyser puis déduire un algorithme qui permet de chercher si une
valeur v existe dans un tableau. Dans l’affirmative, le programme af-
fiche la dernière et l’avant dernière place si elle existe.
Exercice 20
Écrire un algorithme qui saisit un mot en français puis il affiche la
première lettre double dans l’écriture de ce mot.
Exemple :
ch = “programme” Remarque
Le programme affiche la lettre m.
Exercice 21
Écrire un algorithme qui saisie un mot en français puis affiche le
nombre de lettres de ce mot.
Exercice 22
Effectuer le cryptage d’un caractère C donnée en utilisant le principe
de cryptage suivant :
- si le caractère est une voyelle alors la fonction f(x)=X-1
- si le caractère est une consonne alors la fonction f(x)=X-2
- si le caractère est un chiffre alors la fonction f(x)=X+1
- si le caractère est un symbole alors la fonction f(x)=X+2
X étant le code ASCII du caractère.
76
Exercice 23
Afficher le jour selon un nombre entré par l’usager (1 = LUNDI, 2 =
MARDI, etc.).
Votre programme devra détecter les jours erronés.
Exemple :
Entrez un jour : 1
Vous avez choisi LUNDI
Exercice 24
On veut saisir le contenu de deux vecteurs d’entiers A et B et les ré-
unir dans un vecteur
C que l’on affichera par la suite. Décomposer ce problème en en un
ensemble de sous-problèmes et analyser chacun de ces sous-prob-
lèmes.
Exercice 25
Nous avons relevé la pluviométrie mensuelle concernant les 5 dern-
ières années.
Nous voulons déterminer la moyenne pluviométrique annuelle, les
pluviométries mensuelles minimale et maximale. Décomposer ce
problème en un ensemble de sous-problèmes et analyser chacun de
ces sous-problèmes.
Exercice 26
Soit un tableau T d’entiers non nuls, trouvez combien il y a d’entiers
distincts positifs dont l’opposé est aussi dans le tableau.
Exemple : Donnée T : -3 4 2 8 9 1 -3 -8 -4 2 8 2 -8 1 3
Résultat : 3
On affichera 3 car les trois entiers 3, 4, et 8 ont leurs opposés dans
le tableau T.
Questions :
1. Analyser ce problème en le décomposant en modules
2. Analyser chacun de ces modules
Exercice 27
1. Quelle est la différence entre paramètre formel et paramètre effectif
2. Quels sont les sous-programmes qui peuvent accéder à un objet
déclaré dans un sous-programme F ?
3. Quel est le mode de passage des paramètres utilisé pour les fonc-
tions
77
Exercice 28
1. Quelle est la différence entre paramètre formel et paramètre effectif
?
2. Quels sont les sous-programmes qui peuvent accéder à un objet
déclaré dans un sous-programme F ?
3. Quel est le mode de passage des paramètres utilisé pour les fonc-
tions ?
Exercice 29
1. Ecrire un algoriyhme qui permet de calculer le minimum et le max-
imum de deux entiers en utilisant deux fonctions MIN et MAX.
2. Donner le bilan des objets utilisés dans ce programme :
• Les objets globaux
• Les objets locaux (par fonction)
• les paramètres formels
• les paramètres effectifs
Exercice 30
a- Écrire une fonction MIN2 qui donne le minimum de deux entiers.
b- Écrire une fonction MIN3 qui donne le minimum de trois entiers.
Exercice 31
La factorielle d’un entier N est définie par N ! =1*2*3*…*N et 0 ! = 1
Écrire un algorithme qui permet de calculer la somme suivante :
S = 1!+2!+ ………………+N !
Exercice 32
Remarque
Écrire une fonction permettant de calculer le PGCD(Plus Grand Com-
mun Diviseur)
d’un couple d’entiers naturels (a,b) en utilisant les deux formules
suivantes :
1)PGCD(a,b)=PGCD(b ,a MOD b) ;
2)PGCD(a,b)=PGCD(b,a-b) ;
Exercice 33
Écrire une procédure intitulée COMB_NBRE qui permet d’afficher
toutes les combinaisons d’un nombre qui s’écrit sous la forme de 3
chiffres.
Questions :
1. Saisir n dans le programme principal
2. Appeler la procédure COMB_NBRE permettant de chercher et
d’afficher les différentes combinaisons.
78
Chapitre
PROGRAMMER LES PAGES WEB STATIQUES HTML
2
“Aujourd’hui, la programmation est devenue une course entre le développeur, qui
s’efforce de produire de meilleures applications à l’épreuve des imbéciles et l’univers,
qui s’efforce de produire de meilleurs imbéciles. Pour l’instant, l’univers a une bonne
longueur d’avance ”
Rich Cook
Mini site de votre établissement

Dans votre établissement, le chef d’établissement veut promou-
voir l’image de son établissement, et face à l’avènement des NTIC, il
opte pour la création d’un site Web qui devra faire une présentation de
l’établissement. C’est ainsi qu’il fait appel à vos compétences en tant que
spécialiste du domaine pour réaliser ce projet.
Pré-requis
* Il faut savoir lire et écrire l’anglais qui est la principale langue en
Informatique.
* Il faut connaître démarrer un ordinateur.
* Il faut savoir ouvrir une application.
* Il faut connaître enregister un travail.
* Il faut savoir fermer une application.
Compétences
• Manipuler le langage HTML

• Créer des pages Web statiques en utilisant le langage HTML
• Concevoir un site web statique
Sommaire
I Introduction au langage HTML................................................81
II. Les outils de developpement de pages Web.............................84
III. Structure d’un document HTML...............................................86
IV. Les balises du langage HTML..................................................87
Résumé .........................................................................................109
Exercices.........................................................................................110
80
Min site de votre établissement
Réalisez le site Web de votre établissement qui comprend :

♦♦ Une page histoire.html qui contient le texte (mis en forme) de
l’historique de votre établissement et qui incorporera une image
histoire.jpg qui présente une des premières vues de votre établisse-
ment.
♦♦ Une page celebrite.html, montrant l’historique des anciens chefs
de l’établissement, une image illustrant chaque personne devra
être incorporée. De plus, un petit sommaire devra être présent en
haut de la page et devra contenir des liens renvoyant vers chaque
section. De plus, un lien « Retour vers le sommaire » après chaque
personne doit renvoyer vers ce sommaire.
♦♦ Une page plan.html qui contient uniquement un plan de locali-
sation de votre établissement (le fichier plan.jpg et un titre)
Tous les fichiers nécessaires (notamment les images) se trouvent dans

le répertoire image.
I- INTRODUCTION AU LANGAGE HTML
J’apprends /cours
Les pages Web visualisées dans un navigateur Internet sont écrites

avec un langage nommé HTML (HyperText Markup Language). C’est un
langage de description de contenu et de structure.
Les pages HTML ont la particularité d’être indépendantes de toute
plate-forme, et donc bien adaptées à des échanges d’informations dans
un environnement hétérogène comme le Web.
Le langage HTML est composé d’un ensemble de balises (tags).
Une balise est un élément spécial qui indique une action con-
cernant la mise en page, la mise en forme ou la structure logique d’un
document.
81
1. Créez un nouveau répertoire sous la racine de votre disque dur
avec le nom tphtml.
2. Dans le répertoire tphtml, créez un nouveau document texte (cliquez
avec le bouton droit dans une zone vide et choisissez nouveau docu-
ment texte).
3. Renommez le fichier afin de le doter de l’extension html (tp1.html).
Constatations
♦♦ Le fichier texte s’est transformé en page Web ce qui signifie

qu’une page Web n’est rien d’autre qu’un fichier texte enregistré
avec l’extension html (ou htm).
♦♦ En double cliquant sur ce fichier, le navigateur se lance avec
comme contenu le fichier tp1.html, ce qui signifie que le langage
HTML utilisé pour la création des pages Web, est un langage inter-
prété, dont l’interpréteur est le navigateur installé sur la machine
de test, tel que : Firefox, Google Chrome, Safari, Internet Ex-
plorer, Netscape, …
Remarque
♦♦ Bien que de nombreux logiciels soient destinés à créer des
pages HTML, dans ce manuel nous allons utiliser un éditeur de tex-
te pour la création et l’édition des pages Web, et ce d’une part pour
vous inviter à connaître de plus près la syntaxe du langage HTML
et d’autre part pour ne pas être dépendant des fonctionnalités d’un
logiciel particulier.
♦♦ Une présentation plus approfondie de la panoplie des logiciels
susceptibles de développer des pages Web est donnée plutard.
1- Dans le répertoire de travail, créez un nouveau fichier tp2.html.
2- Recherchez une image d’extension jpg sur votre disque dur, pour
la copier dans votre répertoire de travail avec le nom image1.jpg.
3- Double cliquez sur le fichier tp2.html.
82
4- A l’aide de votre navigateur, accédez à la fenêtre d’édition du code

source de la page (menu affichage puis la commande source).
5- Saisissez le code HTML donné ci-dessous, enregistrez et testez
(bouton rafraîchir).
solution Résultat
<HTML>
<HEAD>
<TITLE> MA PREMIÈRE PAGE
</TITLE>
</HEAD>
<BODY>
<CENTER>
<FONT SIZE=”5” COLOR=”blue”>
PAGE WEB N°1
</FONT><BR><HR><BR>
<IMG SRC=”image1.jpg” WIDTH=”80”
HEIGHT=”78” >
</CENTER>
</BODY>
</HTML>
Figure 2-1 : Une page Web contenant du texte et une image
J’apprends /cours
* Le document HTML peut contenir un ensemble de balises telles

que <HEAD>, <BODY>, <TITLE>, <HTML>, <P>, <HR>, <IMG>, etc.
* Les balises du langage HTML sont inclues entre les signes inférieur
(<) et supérieur (>).
* Les balises du langage HTML ne sont pas sensibles à la casse.
Pour plus de clarté, nous utiliserons les majuscules.
* Syntaxiquement, les balises rencontrées peuvent être reparties en
quatre catégories:
* Des balises composées d’une partie ouvrante et d’une partie fer-
mente, tel que <BODY>….</BODY>,
* Des balises composées d’une seule partie ouvrante tel que : <BR>
* Des balises composées d’une partie ouvrante et d’une partie fer-
mante avec des propriétés, tel que :
<FONT SIZE=”5”COLOR=”blue”>...</FONT>,
* Des balises composées d’une partie ouvrante avec des propriétés,
tel que :
<IMG SRC=”image1.jpg” WIDTH=”80” HEIGHT=”78” >
83
II- LES OUTILS DE DEVELOPPEMENT DE PAGES WEB
J’apprends /cours
La création de pages Web se fait grâce à l’utilisation du langage

HTML (HyperText Markup Language) : Langage hypertexte à balises.
L’utilisation de ce langage peut se faire à travers plusieurs solutions
logicielles :
1. Les éditeurs de texte
2. Les logiciels de traitement d’images
3. Les convertisseurs des documents bureautiques
4. Les éditeurs HTML
5. Les éditeurs d’animation (flash, shockwave)
1. Editeurs de texte
A l’aide d’un simple éditeur de texte et la connaissance du langage
HTML on peut commencer à écrire directement des pages Web.
Cette solution ne nécessite pas d’investissement particulier et per-
met de faire toutes les opérations que ferait un logiciel spécialisé. Elle
offre un autre avantage, qui est le fait de pouvoir créer des pages sans
être dépendant d’un environnement particulier.
Exemple : le bloc note (de Windows), Edit, VI(de Linux), Notepad++…
2. Les logiciels de traitement d’images

Les versions récentes de la majorité des logiciels de traitement
d’images, offrent des options permettant la conversion d’une interface
graphique en page Web, ce qui constitue une solution à part entière
pour la création des pages Web composées uniquement d’images.
L’avantage de cette solution est de simplifier le développement de
page Web graphiques, en proposant des assistants de découpage et de
création d’animations graphiques.
Exemple : A partir de la version 6.5 d’Adobe PhotoShop.
3. Les convertisseurs de formats bureautiques vers HTML

La majorité des logiciels bureautiques (traitement de texte, tableur,
logiciel de présentation) propose une fonctionnalité de conversion du
document bureautique en une page HTML.
84
Avec cette option, votre logiciel bureautique peut être considéré comme
un générateur de code HTML orienté interface.
Exemple : la suite bureautique Microsoft Office (word, excel, power-
point), OpenOffice, etc.
Avantages :
* Pas d’investissement supplémentaire pour l’achat d’un éditeur
HTML spécialisé.
* Pas besoin de connaître le langage HTML, ni les fonctionnalités
d’un logiciel éditeur HTML, vos connaissances en bureautiques suf-
fisent pour développer un site web.
Inconvénients :
• Les logiciels de bureautique ne proposent pas toutes les fonction-
nalités offertes par le langage de la création de site Web, leurs utilisa-
tions se limites à créer des pages assez simples dépourvu d’options
spécifiques aux pages web (système de cadres, liens internes…)
• Le code générer peut s’avérer dans des cas non conforme au langage
HTML standard.
4. Les éditeurs HTML

Les éditeurs HTML sont des logiciels spécifiquement conçus pour
assister les programmeurs dans le développement de pages web.
Avec ces logiciels on vous offre deux modes de créations de pages
web :
1- Le mode graphique : qui se repose sur le principe de Wysiwyg sig-
nifie, What You See is What You Get, autrement dit ce que vous voyez
est ce que vous obtenez. Avec ce mode sans rien connaître aux balises
du langage HTML, vous pouvez désormais développer des pages Web.
En effet la création des pages se fait d’une façon visuelle et c’est au
logiciel de générer en arrière plan toutes les balises nécessaires.
2- Le mode texte (ou code) : au niveau de ce mode, l’éditeur HTML est
utilise comme étant un simple éditeur de texte enrichi avec quelques as-
sistants de génération de code HTML, dont l’utilisation est facultative.
La génération du code va se faire donc ligne par ligne et sans faire appel
à une interface.
On peut donner comme exemple dans cette catégorie de logiciels
: Macromedia DreamWeaver, Netscape Navigator Gold, Microsoft
Frontpage, Adobe PageMill, Corel, Symposia...).
85
III- STRUCTURE D’UN DOCUMENT HTML
Figure 2-2 : Structure générale d’un document HTML
J’apprends /cours
On peut dire que :

- Un fichier HTML commence par la balise <HTML> et finit par la
balise </HTML>
- La partie entête délimitée par <HEAD> et </HEAD> sert à définir
le titre de la page Web qui sera affiché dans la barre du titre du navi-
gateur (entre <TITLE> et </TITLE>) et à indiquer un certain nombre
d’informations facultatives tel que les mots clés, la date de création,…
A l’exception du titre, le contenu de cette section n’est pas directement
visible pour le visiteur.
- La partie corps du document délimitée par <BODY> et </BODY>
est utilisée pour définir le contenu de la page Web.
86
Remarque
♦♦ Le titre d’une page ne peut pas contenir de mise en forme ou
d’images.
♦♦ Le choix du titre doit se faire avec beaucoup de soin, en effet
c’est cette information qui est utilisée dans les listes historiques et
favoris de votre navigateur.
IV- LES BALISES DU LANGAGE HTML

1- Les textes et les paragraphes
1- Dans votre répertoire de travail, créez un nouveau fichier tp3.html.
2- Double cliquez sur ce fichier.
source de la page.
4- Saisissez le code HTML donné ci-dessous, enregistrez et testez.
solution
<HTML>
<HEAD>
<TITLE> Textes et Paragraphes</TITLE>
</HEAD>
<BODY><P align= center>
<FONT color=”blue” size=7 face=”arial”> <B> Développement Web </B> </FONT>
</P>
<HR color=”#884412” width=”400” size=”5”>
<CENTER>
<FONT size=”6”>les langages pour le Web</FONT>
</CENTER>
<HR color=”#000000” width=”500”>
<BR><B>Langage Html</B>
<BR><I> Langage javascript</I> Résultat
<BR><U> Langage PHP </U> <BR>
<P><FONT size=”5”>Autre</FONT></P>
MERCI Figure 2-3 : La gestion du texte dans le langage HTML
</BODY>
</HTML>
87
J’apprends /cours
Le texte défini entre <BODY> et </BODY> sans balises (Merci),

sera repris par le navigateur avec les propriétés de mise en forme par
défaut, de ce dernier.
♦♦ La balise <BR> permet un retour à la ligne, alors que <P> provoque
un passage à la ligne et décale la ligne suivante d’environ une ligne
(espacement inter paragraphe).
♦♦ On remarque que la balise <FONT> permet de changer la police, la
couleur et la taille du texte.
♦♦ Les styles d’écriture : gras, italique et souligné s’appliquent respec-
tivement avec les balises <B> (BOLD), <I> (ITALIC) et <U> (UNDER-
LINE).
♦♦ La balise <CENTER> permet d’appliquer un alignement centré.
♦♦ La balise <HR> permet d’insérer une ligne horizontale.
♦♦ Dans de la balise <HR>, la propriété width permet de définir la
largeur de la ligne horizontale qui est mesurée soit en pixels, soit en
pourcentage par rapport à son conteneur.
♦♦ Le tableau suivant comporte les balises de mise en forme des
caractères et des paragraphes.
Fonctions Balise Exemple de code Résultat

Gras <B>...</B> <B>Cameroun</B> Cameroun
Italique <I>...</I> <I> Cameroun</I> Cameroun
<FONT <FONT size=”2”
Mise en forme SIZE=”**” color=”blue” Cameroun
COLOR= “#****” face=”arial”>
de caractère
FACE=”****”>…</FONT> Cameroun
</FONT>
Exposant <SUP>……</SUP> X<SUP>2</SUP> X2
Indice <SUB>……</SUB> H<sub>2</sub>O H2O
A la ligne <BR> HTML<BR>WEB HTML
WEB
Ligne de séparation <HR SIZE=”**” HTML HTML
COLOR=”#******” <HR color=”blue”>
WIDTH=”***” WEB
WEB
ALIGN=”CENTER/LEFT/
RIGHT” >
Centré <CENTER>……</CENT- <CENTER>
ER> Cameroun Cameroun
</CENTER>
88
Alignement d’un <DIV <DIV Cameroun

élément ALIGN=”CENTER/LEFT/ align=”right”>
RIGHT”> Cameroun</DIV>
...</DIV>
- Nouveau paragraphe - <P>...</P> <P align=”right”> Cameroun
- paragraphe centré - <P ALIGN=”CENTER”>...</ Cameroun </P>
- paragraphe aligné P>
à gauche - <P ALIGN=”LEFT”>...</P>
- paragraphe aligné - <P ALIGN=”RIGHT”>...</P>
à droite
Commentaire  <!-ceci est un
commentaire-->
Remarque
♦♦ Il est possible d’utiliser plusieurs balises pour un même élément
de texte. Il faut veiller à bien les imbriquer. Ainsi <B><I>...</I></B>
est correct mais <B><I>...</B></I> est incorrect et risque de poser
des problèmes.
♦♦ La taille dans <FONT SIZE= “taille”> est un nombre de 1 à 7
♦♦ La couleur dans <FONT color=”couleur”> peut être indiquée de
deux façons : avec le nom d’une couleur exprimé en anglais (black,
white,...) ou avec un code hexadécimal de la couleur souhaitée. Ex-
emples: #ffffff, #0022AF….
♦♦ Afin de garantir l’affichage correct des pages Web, des caractères
accentués et des symboles spéciaux sur toutes les plates-formes, le
HTML a prévu pour chacun d’entre eux un code commençant par &
( ET commercial)
2- Les titres
Le langage HTML fournit la possibilité de créer des titres avec plu-
sieurs niveaux hiérarchiques afin de subdiviser un document Web en
plusieurs parties séparées.
source de la page.
89
Solution Résultat
Solution
<HTML><HEAD>
<TITLE>Les titres</title>
</HEAD><BODY>
<P align=”center”><FONT size=7>Les
Titres</FONT></P><BR><HR>
<P><H1>on distingue six niveaux
pour les titres</H1></P>
<H1> titre niveau 1</H1>
</BODY>
</HTML>
Figure 2-4 : Les titres au niveau du HTML
J’apprends /cours
* La balise qui permet de définir un titre est <Hn>…</Hn>; avec n
varie de 1 à 6. Pour chaque titre, il y a une taille qui décroit du niveau
1 au niveau 6.
* Les balises <Hn> incluent des retours automatiques à la ligne.
Cela signifie qu’il n’est pas nécessaire d’ajouter <P> pour commencer
un nouveau paragraphe à la suite d’une balise de ce type.
3- Les images
2- Créez un sous répertoire dans votre répertoire de travail, avec le
nom images.
3- Copiez deux images d’extension JPG de votre disque dur, dans le
répertoire images, et renommez-les en image1.jpg et image2.jpg.
source de la page.
90
Solution Résultat
<HTML>
<HEAD>
<TITLE>Les Images</TITLE>
</HEAD>
<BODY>
<P ALIGN= center>
<FONT SIZE=”6” >L’INSERTION D’IMAGES
</FONT>
<BR></P>
<HR COLOR=”#123456” WIDTH=”400”
SIZE=”2”>
HEIGHT=”150”>
<HR COLOR=”#123456” WIDTH=”400”
SIZE=”2”>
HEIGHT=”150” ALIGN=”right”
BORDER=”2”
ALT=”image insérée”>
</BODY></HTML>
Figure 2.5 : Insertion d’images
J’apprends /cours
Dans les pages Web, l’insertion d’une image se fait avec la balise suiv-
ante :
<IMG SRC =”ADRESSE” WIDTH=”LARGEUR” HEIGHT=”HAUTEUR”
BORDER=”TAILLE” ALT=”TEXTE” ALIGN=”ALIGNEMENT”>
-- SRC=”adresse” : définit l’adresse absolue ou relative de l’image à
afficher.
-- WIDTH=”largeur” et HEIGHT=”hauteur” : définissent la largeur et
la hauteur de l’image en pixels.
-- ALT=”texte” : permet de définir le texte de l’info bulle de l’image
-- 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”).
Remarque
* Les navigateurs Web reconnaissent les images aux formats GIF,
JPG et PNG. En effet, d’une part ces formats offrent les tailles les
plus légères pour les images et d’autre part ils sont reconnus par
la majorité des systèmes d’exploitation.
91
* Bien qu’il soit possible d’utiliser des adresses absolues pour ré-
férencer une image, il est fortement conseillé d’utiliser des adresses
relatives pour se prémunir des éventuels problèmes d’adressage lors
des déplacements des répertoires contenant vos sites. (Par exem-
ple lors de l’hébergement).
Je pratique
Cas 1 :
Insérer votre image dans une page HTML
Cas 2 :
Reproduire le paragraphe II de ce chapitre en respectant les niveaux
des titres
Cas 3 :
1- Soit le code HTML suivant :
<HTML>
<HEAD>
<TITLE> Insertion d’une image comme arrière-plan </TITLE>
</HEAD>
<BODY BACKGROUND= “i1.jpg”>
<H1>Bonjour</H1>
</BODY>
</HTML>
source de la page.
4- Saisissez le code HTML donné ci-dessous, enregistrez et testez de
nouveau.
J’apprends /cours
-- Pour mettre une image comme arrière plan d’une page, on

utilise la propriété BACKGROUND de la balise body: <BODY
BACKGROUND=”Adresse”>
-- L’image d’arrière plan d’une page est utilisée avec l’effet de mosaïque
(l’image est dupliquée autant de fois que nécessaire afin de couvrir la
totalité de la fenêtre de navigation).
92
Remarque
Au niveau de la balise <BODY> on peut aussi retrouver les propriétés
suivantes :
-- BGCOLOR : une couleur unie pour le fond d’une page Web.
-- TEXT : la couleur par défaut du texte au niveau d’une page Web
-- LINK : la couleur d’un lien qui n’a pas encore été visité (bleu par
défaut).
-- VLINK : la couleur d’un lien qui a déjà été visité (violet par défaut)
-- ALINK : la couleur qui apparaît au moment du clic sur un lien
(rouge par défaut).
4- Les listes
Les spécifications du langage HTML offrent la possibilité de créer
des listes d’éléments.
1. Dans votre répertoire de travail, créez un nouveau fichier tp7.html.
2. Ouvrez ce fichier.
3. A l’aide de votre navigateur, accédez à la fenêtre d’édition du code
source de la page.
4. Saisissez le code HTML donné ci-dessous, enregistrez et testez de
nouveau.
Solution
<HTML> <OL>
<HEAD> <LI>Ord</LI>
<TITLE> Les listes </TITLE> <LI>Succ</LI>
</HEAD> <LI>Pred</LI>
<BODY> </OL>
<H4> Les types scalaires</H4> <H4>Lexique</H4>
<UL> <DL>
<LI>Entier</LI> <DT>A</DT>
<LI>Caractère</LI> <DD>Array Abs Access </DD>
<LI>Booléen</LI> <DT>B</DT>
<LI>le type énuméré</LI> <DD> Bit Byte Boolean</DD>
</UL> <DT>C</DT>
<H4> les fonctions pour un type énuméré <DD>Com cos chr char</DD>
</H4> </DL>
<OL> </BODY>
</HTML>
93
Résultat
Figure 2-6 : Les listes HTML
J’apprends /cours

1. On distingue 3 types de listes :
-- Les listes énumératives (à puces) qui se définissent avec la balise
<UL>…</UL>
-- Les listes numérotées qui se définissent avec la balise <OL>…</
OL>
-- Les listes de définitions qui se définissent avec la balise <DL>…</
DL>
-- Les listes énumératives et numérotées sont formées par des lignes
d’où l’utilisation des balises <LI>…</LI> tandis que les listes des
définitions sont formées par des termes <DT>…</DT> et leurs défini-
tions <DD>…</DD>.
--
2. La propriété type de la balise <OL> peut avoir les valeurs suivantes
:
-- A : Lettres majuscules.
-- a : Lettres minuscules.
-- I : Chiffres romains majuscules.
-- i : Chiffres romains minuscules.
-- 1 : Chiffres arabes (valeur par défaut)
94
3. La propriété type de la balise <UL> peut avoir les valeurs suivantes

:
-- square : puces carrées.
-- circle : puces circulaires.
-- disc : puces circulaires pleines (valeur par défaut)
Remarque
-- Il est possible d’imbriquer des listes même si elles ne sont pas
de même nature.
-- La balise <LI> admet une propriété type, qui est prioritaire sur
l’attribut type de <OL> ou <UL>.
5- Les tableaux
Dans le langage HTML, les tableaux sont d’une importance capi-
tale, en effet leur utilisation ne se limite pas aux données tabulaires,
mais sont aussi utilisés pour la mise en forme des pages Web.
2- Ouvrez ce fichier.
source de la page.
nouveau Solution
<HTML> <TR><TD>3</TD><TD>4</TD></TR>
<HEAD> </TABLE>
<TITLE>La gestion des tableaux</TITLE> </TD>
</HEAD><BODY> <TD>
<TABLE width=”100%” border=”1”> <TABLE border=2 cellspacing=10 cell-
<TR bgcolor=”yellow” align=”center”> padding=10>
<TD>Tableau</TD> <TD>Définir une bor- <TR><TD>1</TD><TD>2</TD></TR>
dure</TD><TD>Définir l’espacement</TD> <TR><TD>3</TD><TD>4</TD></TR>
</TR> </TABLE>
<TR align=”center”> </TD></TR>
<TD> <TR bgcolor=”yellow” align=”center”>
<TABLE> <TD>Définir la couleur de fond</TD>
<TR><TD>1</TD><TD>2</TD></TR> <TD>Définir la largeur et la hauteur </
<TR><TD>3</TD><TD>4</TD></TR> TD>
</TABLE> <TD>Les opérations de fusion</TD>
</TD> <TD> </TR>
<TABLE border=2> <TR align=”center”>
<TR><TD>1</TD><TD>2</TD></TR> <TD><TABLE border=2 cellpadding=10
bgcolor=”blue”>
95
<TR bgcolor=”yellow”><TD bgcolor=”red”>1</ <BR>

TD><TD>2</TD> </TR> <TABLE width=60% border=1>
<TR><TD>3</TD><TD>4</TD></TR> <TR>
</TABLE></TD> <TD width=33% rowspan=2 align=center
<TD> valign=middle>1</TD>
<TABLE width=60% border=1> <TD width=33%> 2</TD>
<TR><TD>1</TD><TD>2</TD><TD>3</TD></TR> <TD width=34%> 3</TD>
</TABLE> </TR>
</TD> <TR>
<TD> <TD width=33%> 4</TD>
<TABLE width=60% border=1> <TD width=34%> 5</TD>
<TR><TD COLSPAN=3> 1</TD></TR> </TR>
<TR><TD width=33%> 2</TD><TD width=33%> </TABLE></TD>
3</TD><TD </TR>
width=34%>4</TD></TR> </TABLE>
</TABLE> </BODY>
</HTML>
Résultat
Figure 2-7 : La création des tableaux avec HTML
J’apprends /cours
-- En HTML un tableau est conçu sous forme d’un ensemble de lignes,

où chaque ligne est formée d’un ensemble de cellules. Au niveau des
cellules on définit le contenu à afficher.
-- Syntaxiquement, le HTML a prévu pour les tableaux trois balises :
-- La définition d’un tableau : <TABLE>…</TABLE>
-- La définition d’une ligne : <TR>…</TR>
-- La définition d’une cellule <TD>…</TD>
-- Entre <TABLE> et </TABLE>, on doit retrouver que des blocs <
TR > et </TR>, et entre <TR> et </TR> on ne doit retrouver que des
blocs <TD> et </TD>, alors que entre <TD> et </TD> on peut retrou-
ver n’importe quel contenu, y compris <TABLE> et </ TABLE> (des
tableaux imbriqués)
96
-- Les propriétés de la balise <TABLE> concernent tout le tableau

alors que les propriétés de la balise <TR> concernent les différentes
cellules d’une même ligne, tandis que celles de la balise <TD> con-
cernent uniquement une cellule.
-- Dans ce qui suit, nous donnons la liste de ces propriétés réparties
par balises de rattachement.
Les propriétés de la balise <TABLE>

Attributs Description
CELLSPACING Définit l'espace entre les cellules (en pixel).
Représente l'espace entre le contenu de la cellule et le
CELLPADING
bord extérieur de la cellule (en pixel).
BORDER Définit l’épaisseur de bordure (en pixel).
La largeur du tableau en pixel ou en pourcentage par
WIDTH
rapport à la largeur de la fenêtre
La hauteur du tableau en pixel ou en pourcentage par
HEIGHT
rapport à la hauteur de la fenêtre
ALIGN L’alignement du tableau par rapport au conteneur.
BGCOLOR La couleur d’arrière plan du tableau.
Les propriétés de la balise <TR>

L’alignement horizontal des différents contenus
ALIGN des cellules d’une même ligne (les valeurs possi-
bles : left, right et center)
L’alignement vertical des différents contenus des
VALIGN
cellules d’une même ligne
La couleur d’arrière plan des différentes cellules
BGCOLOR
d’une ligne.
La hauteur d’une ligne en pixel ou en pourcentage
HEIGHT
par rapport à la hauteur du tableau.
Les propriétés de la balise <TD>

ALIGN L’alignement horizontal du contenu d’une cellule (les
valeurs possibles : left, right et center).
VALIGN L’alignement vertical du contenu d’une cellule (les
valeurs possibles : bottom, top et middle).
WIDTH La largeur d’une cellule en pixel ou en pourcentage par
rapport à la largeur du tableau.
97
HEIGHT La hauteur d’une cellule en pixel ou en pourcentage par

rapport à la hauteur d’une ligne.
BGCOLOR La couleur d’arrière plan d’une cellule.
ROWSPAN Fusionner des cellules horizontalement.
COLSPAN Fusionner des cellules verticalement.
ALIGN L’alignement du tableau par rapport au conteneur.
BGCOLOR La couleur d’arrière plan du tableau.
Remarque
-- La propriété BORDER de la balise <TABLE> par défaut est égale
à 0.
On obtient une grille « invisible » dont l’intérêt principal est de
permettre l’alignement d’un ensemble d’éléments dans une page.
-- En absence de WIDTH et HEIGHT, le navigateur calcule au-
tomatiquement les dimensions des lignes et des colonnes en fonction
du contenu et de la taille de la fenêtre d’affichage, c’est ce qu’on ap-
pelle «un tableau ajusté par rapport à son contenu».
-- Il est à noter que l’attribut WIDTH de <TR> n’a aucun effet pu-
isque toutes les lignes d’un tableau ont la même largeur : celle du
tableau.
6- Les liens hypertextes

Le langage HTML permet de transformer les objets textes et les im-
ages en liens cliquables pour nous amener vers d’autres emplacements
que ce soit dans la même page ou vers une autre page : c’est la notion
de lien hypertexte.
Conceptuellement, les liens peuvent être répartis en deux catégo-
ries :
- Lien externe : c’est tout lien permettant d’appeler une page HTML
à partir d’une autre page HTML.
- Lien interne : c’est tout lien permettant de pointer un endroit
précis dans la page, à partir d’un autre endroit de la même page HTML.

2- Ouvrez ce fichier.
98

source de la page.
nouveau.
<HTML>
<HEAD>
<TITLE>Lien hypertexte</TITLE> </HEAD>
<BODY>
<h3>Activer le lien convenable</h3>
<TABLE WIDTH=”480” BORDER=”2” >
<tr>
<td>Rechercher avec Google</td>
<td><a href=”http://www.google.fr”>WWW.Google.fr</a></td>
</tr>
<tr>
<td>Accéder à l’annuaire Yahoo</td>
<td><a href=”http://www.yahoo.fr”>WWW.Yahoo.fr</a></td>
</tr>
<tr>
<td>Envoyer un Email</td>
<td><a href=”mailto:contact@Edunet.tn”>Nous contactez</a></td>
</tr>
<tr>
<td>Ouvrir un fichier Html</td>
<td><a href=”file://C:/tp html/Tp4.Html”> une page Web dans le disque dur</a></
td>
</tr>
<tr>
<td>télécharger un fichier</td>
<td><a href=”ftp://ftp.commentcamarche.net/docs/Html.zip”>un fichier Html
compressé</a></td></tr>
</TABLE>
</BODY>
</HTML>
Solution
Figure 2.8 : La création des liens avec HTML
99
J’apprends /cours
-- Les zones sensibles aux clics sont des liens hypertextes crées avec la
balise <A href= “ adresse cible “>texte </A>
-- On visualise une page Web très longue. La navigation dans cette
même page est facile avec l’existence de deux liens internes (Bas) et
(Haut) permettant respectivement de descendre vers le bas de la page
et de remonter vers le haut de la page.
-- La création d’un lien interne se fait en deux étapes :
* La création d’un signet (ou ancre) : l’endroit où le lien interne doit
pointer, à travers la balise : <a name= “ nom du signet “> texte </a>
* La création du lien interne : <A HREF= “ # nom du signet “>texte
</a>
-- Pour chaque adresse cible correspond un protocole, comme le mon-
tre le tableau suivant :
Syntaxe Description
<A HREF="adresse"> Protocole par défaut : http
<A HREF="#position"><A Lien interne, protocole http
HREF="http://adresse Web"> Protocole http
<A HREF="ftp://adresse ftp"> Protocole FTP pour le transfert de
fichiers
<A HREF="mailto:adresse email"> Protocole SMTP pour le courrier
électronique
<A HREF="file://adresse fichier"> Adressage locale sur un poste non
distan
Remarque
-- Par défaut la couleur du texte d’un lien non activé est bleu, d’un
lien activé est violet et d’un lien en cours d’activation est rouge.
-- On peut appliquer un lien à un texte ou à une image.
-- Avec la balise <A> on peut utiliser la propriété TARGET, qui per-
met de spécifier la fenêtre d’affichage du lien. Cette propriété peut
avoir les valeurs suivantes :
♦♦“_blank” : une nouvelle fenêtre
♦♦“_self” : la même fenêtre
♦♦“_parent” ou non du cadre : voir la partie du cours sur les cad-
res.
-- On peut avoir un lien mixte qui pointe vers un signet dans une
autre page HTML en utilisant la balise suivante : <A HREF= “ adresse
document#signet> texte </A>
100
7- La création de formulaires HTML

Jusqu’à présent, toutes les pages développées fonctionnent en
mode consultation où la seule interactivité entre le visiteur et le site est
le système de liens hypertextes.
Les pages Web formulaires offrent une interactivité beaucoup plus
riche, en proposant aux visiteurs divers objets graphiques de saisie, de
sélection et de choix.
1- Dans votre répertoire de travail, créez un nouveau fichier tp10.
html.
2- Ouvrez ce fichier et y saisissez le code HTML donné ci-dessous, en-
registrez et testez de nouveau.
<HTML>
<HEAD>
<TITLE>Les Formulaires</TITLE>
</HEAD>
<BODY>
<CENTER><H1>Inscription</H1></CENTER>
<FORM ACTION=”sauvegarder.html” NAME = “F1” METHOD =”GET”>
<H2>
<P>Votre Nom: <INPUT NAME=”nom” TYPE=”TEXT” SIZE=”20” MAXLENGTH=”
30”> </P>
<P>Votre Prénom:<input name=”Prenom” type=”text” size=”20” maxlength=”20”>
<P>Votre Adresse:<BR> </P>
<TEXTAREA name=”Adresse” cols=”25” rows=”3”></TEXTAREA>
<P>Votre Bac:<BR> </P>
<SELECT name=”bac” size=”6”><OPTION Selected>Sc - Info</OPTION>
<OPTION>Math</OPTION><OPTION>Sc - Exp</OPTION>
<OPTION>Sc - Tech</OPTION><OPTION>Lettres</OPTION>
<OPTION>Sc - Eco</OPTION></SELECT> </P>
<P>Donnez votre 2ème langue:</P><P>
<INPUT type=”radio” name=”langue” value=”Français”> Français<BR>
<INPUT type=”radio” name=”langue” value=”Anglais”> Anglais<BR>
<INPUT type=”radio” name=”langue” value=”Allemand”> Allemand<BR> </P>
<P>Vos options:</P><P>
<INPUT type=”checkbox” name=”option1” value=”Musique”> Musique<BR>
<INPUT type=”checkbox” name=”option2” value=”Théatre”> Théatre<BR>
<INPUT type=”checkbox” name=”option3” value=”Dessin”> Dessin</BR> </P>
<P> Votre Photo jpg, png, bmp...:<BR>
<INPUT name=”fichier” type=”file” size=”35”> </P>
<INPUT type=”submit” value=” Envoyer “>
<INPUT type=”reset” value=” Annuler”>
</H2></FORM>
</BODY>
</HTML>
3 - Créez un fichier HTML nommé “sauvegarder.html” contenant le

message suivant “Merci pour votre utilisation”.
101
Résultat
Figure 2-9 : La création des formulaires avec HTML
J’apprends /cours
-- La page Web créée comporte un formulaire à remplir pour s’inscrire

dans une institution universitaire. Ce formulaire comporte plusieurs
contrôles à savoir: zones de saisie, liste déroulante, boutons, cases à
cocher, boutons radio, etc.
-- Les différents objets graphiques se trouvent entre <FORM> et </
FORM>. Cette balise possède les attributs suivants :
* ACTION : Permet d’indiquer l’action à entreprendre lorsque le bou-
ton de validation est activé.
* NAME : Le nom attribué au formulaire.
* METHOD : Permet de spécifier la méthode d’envoi des données au
serveur (deux méthodes sont possibles : POST ou GET).
Remarque
TARGET : Permet d’indiquer la fenêtre d’affichage du fichier défini
comme valeur de la propriété ACTION
Les balises définissant les composants du formulaire sont :
102
a - La zone de saisie
La définition du contrôle zone de saisie se fait à l’aide de la balise suiv-
ante :
<INPUT TYPE=”TEXT” NAME= “ nom” SIZE=” taille” MAXLENGTH=”taille maximale”>
Propriété Description
NAME Indique le nom du contrôle
SIZE La taille de l'objet texte (en caractères)
MAXLENGTH La taille maximale de l'objet texte (en caractères)
Remarque
Pour les zones de saisies cryptées (type mot de passe), on utilise
INPUT TYPE=”password”
b - La zone de saisie à plusieurs lignes

La définition d’une zone de texte à plusieurs lignes se fait à l’aide de
la syntaxe suivante :
<TEXTAREA NAME=”nom” ROWS=”NL” COLS=”NC”>texte par défaut </TEXTAREA>
Où NL représente le nombre de lignes et NC représente le nombre de
caractères par ligne.
c - Les cases d’options

La définition du contrôle cases d’options (bouton radio) se fait à
l’aide de la balise suivante :
<INPUT TYPE=”RADIO” NAME=”nom” VALUE=”valeur1” > valeur2
Les boutons radio sont utilisés pour faire un et un seul choix, par-
mi un ensemble de propositions.
NAME Indique le nom du contrôle. Tous les boutons, composant
un même groupe, portent le même nom.
VALUE L'information à retourner si la case est cochée.
La valeur (valeur2) est l’information qui va être affichée comme in-

titulé d’une case d’option (qui n’est pas forcément égale à la valeur de la
proprièté value(valeur1))
d - Les cases à cocher

La définition du contrôle cases à cocher (checkbox) se fait à l’aide
de la balise suivante :
103
<INPUT TYPE=”CHECKBOX “ NAME=”nom” VALUE=”valeur1” > valeur2

Les boutons cases à cocher sont utilisés pour faire un ou plusieurs
choix parmi un ensemble de propositions.
NAME Indique le nom du contrôle. Toutes les cases à cocher
portent obligatoirement des noms différents.
VALUE Indique la valeur de l'élément case à cocher.
La valeur (valeur2) est l’information qui va être affichée comme in-

titulé d’une case d’option (qui n’est pas forcément égale à la valeur de la
proprièté value(valeur1))
e - La liste de sélection
La définition du contrôle liste de sélection se fait à l’aide de la balise
suivante:
Syntaxe
<SELECT NAME=”nom” size=x>

<OPTION [SELECTED] >valeur 1 </OPTION>
<OPTION >valeur 2 </OPTION>
........
........
........
<OPTION >valeur n </OPTION>
</SELECT>
NAME Indique le nom du contrôle
SIZE Indique la taille d'affichage de la liste.
SELECTED Indique la valeur sélectionnée par défaut.
Le contrôle liste de sélection permet de proposer diverses options
sous la forme d’une liste déroulante dans laquelle l’utilisateur peut
cliquer pour faire son choix ; ce choix reste alors affiché.
La boite de la liste est créée par la balise <SELECT> et les éléments
de la liste par un ou plusieurs tags <OPTION>.
f - Le contrôle Annuler
Le contrôle RESET permet d’annuler les modifications apportées
aux contrôles d’un formulaire et de restaurer les valeurs par défaut.
La syntaxe en HTML est :
104
<INPUT TYPE=”RESET” NAME=”nom” VALUE= “texte”>
Où VALUE définit le texte à afficher au dessus du bouton.
g - Le contrôle button
Lors d’un clic, un bouton peut exécuter une action ou un pro-
gramme (écrit à l’aide d’un langage autre que le langage HTML, tel que le
javascript, le PHP ou autre), accéder à un site Web, accéder à une boite
email, etc.
La syntaxe HTML est :
<INPUT TYPE=”BUTTON” NAME=”lien” VALUE=”texte”>
Remarque
Dans le cas où la propriété SIZE est >1, on peut ajouter à la balise
SELECT l’attribut MULTIPLE, qui permet d’autoriser la sélection mul-
tiple de plusieurs éléments dans une zone de liste.
h - Le contrôle File
C’est un contrôle qui permet de transmettre un fichier, il s’applique
avec la syntaxe suivante :
<INPUT NAME=”FICHIER” TYPE=”FILE” SIZE=”nombre de caractères” >
Je pratique
Cas 1 :
Créer un tableau représentant l’emploi de temps de votre salle de
classe.
Y atouter la couleur Bleue, aux cellules contenant les jours de la se-
maine.
Cas 2 :
Créer un fichier HTML comportant les liens vers les pages suivantes :
- La page d’acceuil du Ministère des enseignements secondaires
- La page d’acceuil du Ministère de l’enseignement superieur
- La boîte email : première_ti@gmail.com
- La page d’acceuil de l’Office du Baccalauréat du Cameroun
Cas 3 :
Créer un formulaire d’enregistrement pour les frais de scolarité conte-
nant : nom, prenom, classe, matricule, Montant, Numéro de compte ,
code compte (Caché), bouton Annuler, bouton Envoyer
105
8- Les cadres
Le système de cadres est une fonctionnalité du HTML qui permet
de découper la fenêtre de navigation en plusieurs parties indépendan-
tes. Chacune de ces parties peut alors contenir une page HTML qui peut
changer au fil de la navigation.
Un exemple classique est un découpage en deux parties gauche et
droite, dans lequel la partie gauche joue le rôle d’un index (sommaire) et
la partie droite sert d’espace d’affichage.
Dans une telle disposition, le visiteur a en permanence accès à la
liste des liens à gauche et chaque lien charge la page affichée dans la
partie de droite.
Pour créer une page découpée en plusieurs cadres, il faut créer :
●● Une page définissant la structure du découpage : lignes, colonnes,
dimensions, … C’est cette page qui devra être affichée dans le naviga-
teur pour retrouver le système de cadres.
●● Autant de pages Web que de cadres : chaque cadre contient ini-
tialement une page, qui peut changer par la suite au cours de la navi-
gation.
1- Dans votre répertoire de travail, créez trois nouveaux fichiers cad-
reg.html, cadred.html et tp11.html.
2- Saisissez les codes HTML donné ci-dessous, dans les différents
fichiers et ce conformément au tableau suivant :
Le fichier tp11.html
<HTML>
<HEAD>
<TITLE>Les cadres</TITLE>
</HEAD>
<FRAMESET COLS=”250,*”>
<FRAME SRC=”cadreg.html” NAME=”G”>
<FRAME SRC=”cadred.html” NAME=”D”>
</FRAMESET>
</HTML>
Le fichier cadred.html
<HTML>
<HEAD> <TITLE>Accueil</TITLE>
</HEAD>2
<BODY BGCOLOR=”#FFF0C0” TEXT=”#000000” LINK=”#A00000”
VLINK=”#600000” ALINK=”#A00000”>
<H1>Bienvenue</H1>
<P>Choisissez un lien à gauche!</P>
</BODY></HTML>
Le fichier cadreg.html
106
Le fichier cadreg.html
<HTML>
<HEAD>
<TITLE>sommaire de liens</TITLE>
</HEAD>
<BODY BGCOLOR=”#E0C0FF” TEXT=”#000000” LINK=”#804080”
VLINK=”#603060” ALINK=”#804080”>
<H1>Navigation</H1>
<P>

<A HREF=”tp4.html” TARGET=”D”><B>Les images</B></A><BR>
<A HREF=”tp7.html” TARGET=”D”><B>Les tableaux</B></A><BR>
<A HREF=”tp6.html” TARGET=”D”><B>Les listes</B></A><BR>
<A HREF=”tp5.html” TARGET=”D”><B>Les titres</B></A><BR>
</BODY>
</HTML>
Résultat
Figure 2-10 : Utilisation des cadres en HTML
J’apprends /cours
* On observe une page Web divisée en deux zones : une première

zone à gauche qui comporte un sommaire de liens hypertextes et une
zone à droite comportant soit une page d’accueil, soit la destination
de chacun des liens.
* La création d’un système de cadres composé de n cadres (avec n>=2)
nécessite n+1 fichiers HTML séparés : les n premiers fichiers HTML
pour définir le contenu des n cadres alors que le (n+1) ème fichier sert
à définir la structure des cadres et à appeler les autres fichiers.
* La balise <FRAMESET COLS=”250,*”> permet de définir deux
cadres verticaux (rows : horizontaux) de largeur respectivement 250
pixels pour la première colonne et le reste de la fenêtre pour la deux-
ième colonne (*).
107
* La balise <FRAME SRC=”cadreg.html” name =”G”> permet de

définir un cadre en spécifiant le fichier à contenir : “cadreg.html” et
son nom : “G”.
* Le nom d’un cadre est très utile lorsqu’il y a des liens hypertextes
entre les cadres.
* La balise <FRAMESET> ….. </FRAMESET> remplace la balise
<BODY>…</BODY>
Remarque
Un jeu de cadre peut comporter plusieurs cadres (2 ou plus)
Je pratique
1. A quoi servent les cades ?
2. Quelle est la prcédure pour créer un cadre ?
3. Créer une page HTML ayant la configuration suivante :
Remarque
108
Résumé
●● Les pages Web sont écrites avec un langage de marquage nom-
mé HTML (HyperText Markup Language); ce langage permet aussi
la description des contenus et des structures.
●● Le langage HTML comporte un ensemble de balises (tags). Une
balise est un élément spécial qui indique une action concernant la
mise en page, la mise en forme ou la structure logique d’un docu-
ment, etc.
●● Un fichier HTML comporte deux parties : un entête et un corps;
l’entête peut comporter le titre du fichier à créer alors que le corps
comporte le contenu qui doit exister dans la page Web à créer.
●● Vous pouvez créer des fichiers HTML avec n’importe quel édi-
teur de texte qui peut sauvegarder les données comme des purs
fichiers texte; Exemple : bloc-notes, Notepad++...
●● Pour visualiser des fichiers HTML, vous avez besoin d’un naviga-
teur. On peut citer : Mozilla Firefox, Internet EXplorer, Chrome,
Safari, Opera ...
●● Avec HTML, il est possible d’insérer et de paramétrer des im-
ages, des tableaux, des listes, des titres, des liens hypertextes, des
formulaires, des cadres, etc.
●● Les balises peuvent avoir plusieurs formes :
o <balise> </balise> : elles s’ouvrent et se ferment pour
délimiter le contenu (début et fin d’un titre, par exemple).
o <balise /> : balises orphelines (on ne les insère qu’en un
seul exemplaire), elles permettent d’insérer un élément à un endroit
précis (par exemple une image).
●● Les balises sont parfois accompagnées d’attributs pour donner
des indications supplémentaires (exemple : <image nom=”photo.
jpg” />).
●● Pour créer des listes, on doit utiliser la balise <ul> (liste à puces,
non ordonnée) ou <ol> (liste ordonnée). À l’intérieur, on insère les
éléments avec une balise <li> pour chaque item.
●● Les liens permettent de changer de page et sont, par défaut,
écrits en bleu et soulignés.
●● Pour insérer un lien, on utilise la balise <a> avec l’attribut href
pour indiquer l’adresse de la page cible.
●● Les paragraphes sont définis par la balise <p> </p> et les sauts
de ligne par la balise <br />.
●● Il existe six niveaux de titre, de <h1> </h1> à <h6> </h6>, à
utiliser selon l’importance du titre.
109
Exercices
1 - Quel est le schéma HTML correct ?
a. <html><body><head></head></body></html>
b. <html><head></head><body></body></html>
c. <html><head></head><body></html></body>
2 - Les titres sont définis à l’aide du tag hx, où x représente un nombre

compris entre :
a. 1 et 3 b. 1 et 5 c. 1 et 6 d. 0 et 6
3 - Quel est le tag à utiliser pour placer une image ?

a. <image src=”” alt=””>
b. <img source=”” alt=””>
c. <img src=”” alt=””>
4 - Un meta-tag doit se placer

a. Dans l’entête b. Dans le corps c. En-dehors du HTML
5 - Que signifie HTML ?

a. Hyper Technology Mixed Language
b. HyperText Markup Language
c. Hot Text Mapping Language
6 - Si je tape « &eacute ; » dans uneRemarque

page html, quelle lettre vais-je
obtenir ?
a. è b. é c. ê
7 - Quelles balises permettent de créer un tableau en HTML ?

a. <col></col> b. <lig></lig> c. <table></table>
8 - Quelle est la règle de style qui permet de définir la couleur d’arrière-

plan d’un élément HTML :
1. color : 2. bgcolor : 3. background-color :
9 - Quelle balise permet d’indiquer le début et la fin d’un document

.html ?
a- <htm> </htm> b- <html> </html> c- <head> </head>
110
Exercices
Exercice 1 : Code HTML de base
En utilisant un éditeur de texte (ex: NotePad), créer un fichier HTML
contenant le code de base d’un document. Comme tous les docu-
ments HTML commencent de la même façon, vous pourrez utiliser
ce fichier pour commencer tous les autres documents HTML que vous
réaliserez. Cela vous évitera de réécrire les mêmes étiquettes de base
à chaque fois.
Le code de base d’un document HTML est :
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
Enregistrez ce travail dans le dossier Personnel\HTML\ sous le nom
Exercice1.htm
Exercice 2 : Caractères gras et italiques

‘ Ouvrez le fichier Exercice1.htm
‘ Ajoutez dans la section BODY ...
<B>Gras</B> <I>Italique</I>
‘ Enregistrez le travail sous le nom Exercice2.htm
‘ Ouvrez le fichier Exercice2.htm avec votre navigateur (Mozilla,
Chrome...)
Exercice 3 : En-tête
Utilisez les étiquettes H1 jusqu’à H6 afin de reproduire le con-
tenu de l’encadré ci-dessous. Pour ce faire vous pouvez utiliser le code
de l’exercice 1 et ajoutez dans la section BODY les étiquettes H1..H6
avec le contenu approprié. Remarquez, le titre du document est Exer-
cice - 3.
( N’oubliez pas de sauver le document sous le nom Exercice3.htm.
111
Exerice 4 : Différence entre <P> et <PRE> / Barre horizontale et

saut de lignes
a) Vous devez reproduire le contenu de la boîte ci-dessous en utilisant
l’étiquette <PRE>.
Enregistrez le travail sous le nom Exercice4a.htm.
b) Vous devez reproduire le contenu de la boîte ci-dessous en utilisant
l’étiquette <P> et <BR>.
Puisqu’il n’y a qu’un seul <P> il est préférable d’utiliser </P>. Enreg-
istrez le travail sous le nom
Exercice4b.htm.
c) Vous devez reproduire le contenu de la boîte ci-dessous sans uti-
liser les étiquettes <P> ou
<PRE>. Enregistrez le travail sous le nom Exercice4c.htm.
Exercice 5 : Les polices et les couleurs

Créer un fichier HTML dont la couleur de l’arrière-plan est FF99FF et
la couleur du texte est FFCCCC. Le texte apparaissant sur le docu-
ment est :
Un très mauvais choix de couleurs!!
Enregistrez le travail sous le nom Exercice5.htm.
Exercice 6 : Les listes

Faites une liste numérotée de vos cinq chanteurs ou groupes de mu-
sique préférés. Enregistrez le travail sous le nom Exercice6.htm.
Exercice 7 : Les tableaux

Reproduisez les tableaux suivant. La bordure des tableaux est 1. En-
Remarque
registrez les travaux sous les noms Exercice7a.htm et Exercice7b.htm
a)
Cellule 1 Cellule 2 Cellule 3
b) Indice : Vous faites dans un premier temps un tableau d’une ligne

et deux colonnes. Ensuite dans la cellule de la première ligne et de
la deuxième colonne, vous faites un deuxième tableau de 2 lignes et
deux colonnes.
Cellule 2a Cellule 2c
Cellule 1
Cellule 2b Cellule 2d
Exercice 8 : Les liens / Images

Faites un lien vers la page http://www.commentcamarche.com/en
utilisant une image de votre choix de la bibliothèque. Ajouter l’attribut
BORDER=0 dans l’étiquette de l’image.
112
L’image entrer.gif se trouve dans le répertoire Commun/IST3/Html/.

Vous devez le copier dans le même répertoire que votre fichier htm et
utiliser une adresse relative. Enregistrez le travail sous le nom Exer-
cice8.htm.
Indice : Dans les exemples données en classe le lien était toujours du
texte, au lieu du texte, le lien est une image. Vous devez donc placer
l’image...
Exercice 9 : Les cadres 1

Faites 3 document HTML nommé bleu.htm, vert.htm et rouge.htm
dont l’arrière plan est de couleur bleu, vert et rouge respectivement.
Note à propos des couleur : Bleu ! #0000FF Vert ! #00FF00 Rouge
!#FF0000
Écrivez le code qui suit dans le fichier Exercice9.htm
<HTML>
<HEAD>
<TITLE>Cadre1</TITLE>
</HEAD>
<FRAMESET COLS=”33%,33%,34%”>
<FRAME SRC=”bleu.html”>
<FRAME SRC=”vert.html”>
<FRAME SRC=”rouge.html”>
</FRAMESET>
</HTML>

Bleu
Vert
Rouge
Dans le cadre de gauche ! Trois liens dirigés vers les pages bleu.html,
vert.html et rouge.html
Lorsqu’un lien est activé, la page doit s’ouvrir dans le cadre de droit
Page Web bleu.html, vert.html et rouge.html ! Page dont l’arrière plan
est de couleur bleu, vert et rouge respectivement.

Modifiez l’exercice 10 afin d’ajouter un cadre horizontal pour afficher
un titre
Titre
Couleurs Pages
113
Exercice 11 :
1.Que fait le code suivant :
<HTML>
<HEAD>
<TITLE>tableau 1</TITLE>
</HEAD>
<BODY>
<CENTER>
<TABLE BORDER>
<CAPTION ALIGN=top> PREMIER TABLEAU</CAPTION>
<TR>
<TD>ligne 1 ; cellule 1</TD>
</TR>
<TR>
</TR>
</TABLE>
</CENTER>
<BODY>
<HTML>
2. Quels sont les informations contenues dans ce code ?
3. Quels sont les attributs utilisés dans ce code HTML ?
Exercice 12 :
1. Que fait le code suivant :
<HTML>
<HEAD><TITLE>tableau 2</TITLE></HEAD>
<Body>
<TABLE BORDER=8 CELLPADDING=10>
<CAPTION ALIGN=bottom>DEUXIEME TABLEAU
</CAPTION>
<TR>
Remarque
<TH COLSPAN=5>LETTRES</TH>
</TR>
<TR>
<TD>Aa</TD><TD>Bb</TD><TD>Cc</TD><TD>Dd</TD><TD
>Ee</TD>
</TR>
<TR>
<TD>Ff</TD><TD>Gg</TD><TD>Hh</TD><TD>Ii</TD><TD
>Jj</TD>
</TR>
</TABLE>
<BODY>
<HTML>
2. Quels sont les informations contenues dans ce code ?
3. Quels sont les attributs utilisés dans ce code HTML ?
114
Chapitre
PRODUIRE UNE FEUILLE DE STYLE
3
“Sous la forme imprimerie, la pensée est plus impérissable que jamais ; elle est vola-
tile, insaisissable, indestructible. ”
Victor Hugo
La mise en forme d’un document

Lors de la rédaction de votre demande de stage pour une entreprise
en vous servant d’un logiciel de traitement de texte, vous utilisez plus-
ieurs options du logiciel pour bien présenter votre demande.
1. Utilisez-vous la même police dans tout votre document ?
2. Quel est l’objectif visé en utilisant ces options ?
Il est clair que lors de la rédaction d’un document en utilisant un logiciel
de traitement de texte on suit deux procédées : la première consiste à
saisir le texte et la seconde concerne la mise en forme de ce dernier. C’est
cette deuxième partie qui nous intéresse et qui est l’objet de ce chapitre
dans le cadre de la création des pages.
Pré-requis
* Manipuler le HTML
* Utiliser le HTML
* Créer une page HTML
Compétences
• Séparer le code de la mise en forme

• Construire une feuille de style
• Intégrer une feuille de style à une ou plusieurs pages HTML
Sommaire
I INTRODUCTION AUX FEUILLES DE STYLE...........................117
II. ATTRIBUTS ET PROPRIETES DE MISE EN FORME.................118
III CREATION DES FEUILLES DE STYLE...................................121
IV JOINDRE LE FICHIER DE STYLE ET LES PAGES HTML.......125
V INSERER DES COMMENTAIRES DANS UNE FEUILLE..........126
VI LISTE DES PROPRIETES........................................................127
VII APPLIQUER UN STYLE...........................................................131
Résumé...........................................................................................137
Exercices........................................................................................138
116
I- INTRODUCTION AUX FEUILLES DE STYLE

Dans la rédaction des pages Web que nous avons écrites jusqu’ici,
il est clair que nous ne pouvons pas bien percevoir l’importance de sé-
parer le code de la mise en forme. Or cette séparation est très importante
lorsque le code devient vaste, surtout pour la maintenance de nombreux
sites, qui devient sur le plan pratique un casse-tête.
Dans un logiciel de traitement de texte, faire la mise en forme de
notre demande de stage consistera à mettre une partie du texte en gras,
italique, souligné… qui sont pour le logiciel un ensemble de style à ap-
pliquer au texte. Si jusqu’ici, certaines balises et attributs nous ont per-
mis d’effectuer certaines mises en forme, il reste que c’est très lourd de
les utiliser à chaque fois.
Séparer le code de la mise en forme en regroupant ces attributs de
mise en forme dans un document différent serait un atout pour la main-
tenance d’un site. C’est ainsi que tous ces styles peuvent être mis dans
un seul document qu’on appellera feuille de style qui est l’objet de
notre chapitre. Dans ce chapitre, nous présenterons premièrement les
attributs et balises de mise en forme du HTML, la création d’une feuille
de style et nous terminerons par les propriétés d’une feuille de style.
J’apprends /cours
Les feuilles de style en cascade (CSS) constituent un outil fantas-

tique pour la présentation de vos sites Web. Elles peuvent faire gagner
beaucoup de temps, et elles permettent de créer des sites Web de façon
entièrement nouvelle. CSS est un plus pour quiconque s’occupe de cré-
ation Web.
Les CSS (Cascading Style Sheets) peuvent constituer le point de
référence du formatage (couleurs et apparence du texte, des liens, et
de certains éléments de la page html) de tout le site web. Si votre site
comporte plus d’une centaine de pages HTML, il serait fastidieux de les
modifier une à une, si vous décidez de changer la couleur de vos liens
sur votre site ! Les CSS vous permettent une maintenance extrêmement
simple...
CSS est un langage de style qui définit la présentation des docu-
ments HTML. Par exemple, CSS couvre les polices, les couleurs, les
marges, les lignes, la hauteur, la largeur, les images d’arrière-plan, les
positionnements évolués et bien d’autres choses.
HTML peut être utilisé pour la présentation des sites Web. Mais
CSS offre plus d’options et se montre plus précis et sophistiqué. CSS est
pris en charge par tous les navigateurs actuels.
117
II- ATTRIBUTS ET PROPRIETES DE MISE EN FORME
Les attributs s’inscrivent toujours au sein de la balise ouvrante, et ils
sont suivis par un signe égal et la valeur de l’attribut entre des guil-
lemets. Applique à la balise h2 un fond rouge
On obtient :
<html>
<head>
</head>
<body style=”background-color:#ff0000;”></body>
</html>
J’apprends /cours
Comme vous le savez, les éléments structurent le document HTML
et indiquent au navigateur comment présenter le site Web (par exemple,
<br /> dit au navigateur de faire un saut de ligne). Certains éléments
peuvent recevoir plus d’information. Cette information supplémentaire
est appelée un attribut.
On peut appliquer plusieurs attributs à la plupart des éléments.
Vous utiliserez souvent des attributs dans des balises comme « body »
et rarement, par exemple, dans une balise « br » puisqu’un saut de ligne
ne s’ajuste normalement pas.
Tout comme pour les éléments, il y a beaucoup d’attributs diffé-
rents. Certains attributs sont taillés sur mesure pour un seul élément
particulier tandis que d’autres s’utilisent avec plusieurs éléments diffé-
rents. Et vice versa : certains éléments peuvent uniquement contenir un
seul type d’attribut tandis que d’autres peuvent en contenir plusieurs.
Remarque
1. Voici quelques exemples :
Blanc : #ffffff Bleu : #0000ff
Noir : #000000 (des zéros) Vert : #00ff00
Rouge : #ff0000 Jaune : #ffff00
2. Un code de couleur hexadécimal se compose d’un caractère « # »
et de six chiffres ou lettres. Vous pouvez également utiliser les noms
anglais des couleurs les plus courantes, à savoir “white”, “black”,
“red”, “blue”, “green” et “yellow” ( signifie : blanc, noir, rouge, bleu,
vert et jaune).
118
3. Quelques balises et attributs ont une orthographe américaine,

par exemple, « color » et non « colour ». Il faut faire attention à uti-
liser la même orthographe que la nôtre, sinon les navigateurs ne
pourront pas comprendre votre code. Également, n’oubliez jamais
le guillemet final de l’attribut.
Je pratique
Appliquer à un fichier HTML les mises en forme suivantes :
1. fond la page couleur verte
2. Ecriture du texte couleur Bleue
Définition d’un style
Appliquer le style suivant aux liens hypertextes (balise <A>), c’est-
à-dire avec une police Verdana de taille 18 pixels, en gras et de
couleur jaune.
On obtient :
A {
font-family: Verdana;
font-size: 18px;
font-style: bold;
color: yellow
}
J’apprends /cours
La définition de base d’un style est simple :
balise { propriété de style: valeur; propriété de style: valeur }
La définition d’un style se fait à l’aide de règles en texte simple per-

mettant de décrire l’aspect des éléments de la page. Une règle CSS est
caractérisée par deux principaux éléments :
♦♦ Un sélecteur de balises, permettant de préciser à quelles balises
du document le style s’applique ;
♦♦ Une déclaration de style, définie entre accolades, permettant de
119
préciser le style à appliquer aux balises sélectionnées. La déclaration est

elle-même constituée :
●●d’une ou de plusieurs propriété(s), suivie du caractère « : » (double
point),
●●d’une ou plusieurs valeur(s) associée(s) à chaque propriété, en-
tourée de guillemets s’il s’agit de plusieurs mots ou séparés par des
virgules s’il y en a plusieurs, suivie d’un point virgule.
La syntaxe est ainsi la suivante :
Je pratique
Dire pour chaque cas en deux phrases ce que fait les codes suivants :
1.
2.
H3 { font-family: Arial; font-style: italic }
Remarque
♦♦ Les feuilles de style portent sur des balises principalement et
quelques autres éléments comme par exemple
A:link pour un lien non-visité et A:visited pour un lien visité.
120
Comme balises souvent utilisées avec des feuilles de style, on peut

citer les en-têtes Hn, P, BODY...
♦♦ Les propriétés de style sont entourées par des “{“ et pas des [ ou
des parenthèses.
♦♦ Le couple “propriété de style/valeur” est séparé par un double-
point (:).
♦♦ Chaque couple “propriété de style/valeur” est séparé par un
point-virgule (;).
♦♦ Il n’y a pas de limite pour le nombre de couples “propriétés de
style/valeur”.
♦♦ L’espace entre propriétés de style et valeur n’est pas obligatoire
mais aide fortement à la lisibilité du code source.
♦♦ Pour la lisibilité toujours, vous pouvez écrire vos styles sur plu-
sieurs lignes
H3 {font-family: Arial;
font-style: italic;
font-color: green}
♦♦ On peut attribuer plusieurs valeurs à une même propriété. Dans
ce cas, on séparera les différentes valeurs par des virgules.
H3 {font-family: Arial, Helvetica, sans-serif}
♦♦ On peut attribuer un même style à plusieurs balises (séparées
par des virgules).
H1, H2, H3 {font-family: Arial; font-style: italic}
III- CREATION DES FEUILLES DE STYLE
Beaucoup de propriétés des CSS sont similaires à celles de
HTML. Si vous avez l’habitude d’utiliser HTML pour la présentation,
vous ne serez pas perdu. Voyons un exemple concret avec ce code qui
permet de changer le fond d’une page:
Avec HTML, on écrit:
<body bgcolor=”#FF0000”>
Avec CSS, on obtient le même résultat en écrivant dans un fich-

ier CSS:
body { background-color: #FF0000; }
Ainsi, si on décide de définir la couleur du fond de son site dans une
121
feuille de style externe, le jour où l’on souhaitera changer la couleur

de fond sur toutes les pages du sites, il suffira de changer ce petit
bout de code dans le fichier .css !
1. Styles internes
Il faut maintenant incorporer les styles dans le document Html.
Commençons par le plus simple, soit l’incorporation à l’intérieur d’une
page. D’où le titre “Styles internes”.
a. A l’intérieur des balises <HEAD></HEAD>

Cette façon de procéder est de loin la plus commune et la plus
logique. D’abord parce que les balises HEAD contiennent des informa-
tions pour le browser et les feuilles de style appartiennent à celles-ci.
Ensuite parce que l’on rejoint ainsi l’essence même des feuilles de
style qui est de séparer les éléments de mise en forme du contenu.
<HTML>
<HEAD>
<STYLE type=”text/css”>

</STYLE>
</HEAD>
<BODY> ... </BODY>
<HTML>
Remarque
♦♦ La balise <STYLE> avertit le navigateur que l’on va utiliser des
feuilles de style.
♦♦ L’attribut type=”text/css” informe que ce qui suit est du texte et
qu’il s’agit de cascading style sheets (css).
♦♦ Pour l’instant, il s’agit de la seule possibilité mais on peut prévoir
à l’avenir d’autres versions de ce “langage”.
♦♦ La balise Html de commentaires  empêche que les brows-
ers qui ne connaissent pas les feuilles de style, tentent d’interpréter
ces instructions. Les informations à l’intérieur des tags de commen-
taires seront ignorées par ces browsers.
♦♦ Pour vos propres commentaires à propos des feuilles de style, on
utilisera la convention désormais classique (C, C++, Javascript...)
de /* commentaires */.
122
b. A l’intérieur des balises <BODY></BODY>

On peut aussi utiliser, au coup par coup, les feuilles de style dans
le corps (BODY) du document. Cette façon de faire nous paraît illogique
et peu conforme à l’esprit des feuilles de style qui est de définir un style
déterminé valable pour la globalité du document. Mais elle existe pour
quelques utilisations spécifiques...
<HTML>
<BODY>
<H1 style=”font-family: Arial; font-style: italic”> blabla </H1>
</BODY>
</HTML>
Remarque
♦♦ Le style Arial, italique n’affectera que cette seule balise H1.
♦♦ La syntaxe est légèrement différente de la précédente.
♦♦ L’écriture : <STYLE type=”text/css”>H1 { “font-family: Arial;
font-style: italic” }</STYLE> fonctionne aussi.
2. Styles externes
Le principe des feuilles de style consiste à regrouper dans un même
document des caractéristiques de mise en forme associées à des groupes
d’éléments. Il suffit de définir par un nom un ensemble de définitions et
de caractéristiques de mise en forme, et de l’appeler pour l’appliquer à
un texte. Il est ainsi possible de créer un groupe de titres en police Arial,
de couleur verte et en italique.
La méthode recommandée pour installer une feuille CSS est celle
qui permet d’appeler le fichier css externe à partir de la page web.
Une feuille de style externe est simplement un fichier texte ayant
l’extension .css que vous pouvez placer à la racine de votre site ou dans
un dossier spécialement créé.
Définir une présentation de style valable pour plusieurs pages et
même pour toutes les pages d’un site. Ce qui est possible, en créant
une page externe qui regroupera toutes les feuilles de style, et en reliant
chaque page à cette page de style.
- On crée d’abord, dans le répertoire du site, un fichier avec
l’extension .css soit style.css qui contiendra toutes les feuilles de style.
- Ensuite, on crée une page normale soit page.htm (bien entendu
dans le même répertoire que le fichier style.css).
- Il ne reste plus qu’à créer un lien entre les deux fichiers. Comme
la boite postale de votre établissement qui est le lien entre votre étab-
lissement et vos correspondants.
123
3. Procédure de Création d’un fichier de style externe

Comme je viens de vous le dire, le plus souvent on écrit du code
CSS dans un fichier spécial ayant l’extension .css (contrairement aux
fichiers HTML qui ont l’extension .html). C’est la méthode la plus pra-
tique et la plus flexible. Ca nous évite de tout mélanger dans un même
fichier.
Dans votre explorateur de fichiers, vous devriez les voir placés côte à
côte. D’un côté le .html, de l’autre le .css :
Enregistrez le fichier en lui donnant un nom qui se termine par

.css, comme style.css. Placez ce fichier .css dans le même dossier que
votre fichier .html.
Dans Notepad++, vous devriez voir quelque chose comme ça :
124
<html>
<head>
<meta charset=”utf-8” />
<link rel=”stylesheet” href=”style.css” />
<title>Premiers tests du CSS</title>
</head>
<body>
<h1>Mon super site</h1>
<p>Bonjour et bienvenue sur mon site !</p>

<p>Pour le moment, mon site est un peu <em>vide</em>. Patientez
encore un peu !</p>
</body>
</html>
Le code : CSS
p
{
color: blue;
}
IV- JOINDRE LE FICHIER DE STYLE ET LES PAGES HTML
Dans le fichier HTML précédent, nous avons le code suivant :
<html>
<head>
<title>Premiers tests du CSS</title>
</head>
<body>
<h1>Mon super site</h1>
<p>Bonjour et bienvenue sur mon site !</p>
<p>Pour le moment, mon site est un peu <em>vide</em>. Pa-
tientez encore un peu !</p>
</body>
</html>
1. Quel est l’élément nouveau de ce code?

2. Que représente cette ligne pour cette page?
Solution
1. L’élément nouveau est la ligne suivante :
2. Cette ligne permet de faire un lien entre la page HTML et la page
CSS
125
Remarque
* La balise <LINK> avertit le browser qu’il faudra réaliser un lien.
* L’attribut rel=stylesheet (sans s et sans guillemets) précise
qu’il y trouvera une feuille de style externe.
* L’attribut type=”text/css” précise que l’information est du texte
et du genre cascading style sheets (css).
* L’attribut classique de lien href=” ... “ donne le chemin d’accès
et le nom du fichier à lier.
Je pratique
Cours Exo TP
HTML CSS
Soit l’arborescence ci-dessus, on a un fichier style.css dans le

répertoire CSS, et notre page html page.html sur laquelle on doit ap-
pliquer le style se trouve dans le répertoire HTML.
Ecrire la balise qui va permettre de joindre les deux documents.
V- INSERER DES COMMENTAIRES DANS UNE FEUILLE

Comme en HTML, il est possible de mettre des commentaires.
Les commentaires ne seront pas affichés, ils servent simplement à in-
diquer des informations pour vous, par exemple pour vous retrouver
dans un long fichier CSS.
D’ailleurs, vous allez vous en rendre compte, en général le fichier
HTML est assez petit, et la feuille CSS assez grande (si elle contient
tous les éléments de style de votre site, c’est un peu normal). Notez
qu’il est possible de créer plusieurs fichiers CSS pour son site si vous
ressentez le besoin de séparer un peu votre code CSS (en fonction des
différentes sections de votre site par exemple).
126
Donc, pour faire un commentaire, c’est facile ! Tapez /*, suivi de

votre commentaire, puis */ pour terminer votre commentaire.
Vos commentaires peuvent être écrits sur une ou plusieurs lignes.
Par exemple :
/*
style.css
---------
Par M. GUENTANG
*/
p
{
color: blue; /* Les paragraphes seront bleus */
}
VI- LISTE DES PROPRIETES

1. Les styles de police
Propriétés Signification Valeurs possibles Exemples
Polices de caractères.
On peut mettre une
liste de police dans
l’ordre de préférence. BODY {font-family :
Arial, Verdana, Comic Sans,
Les noms des polices arial;}
Serif, sans-serif, Cursive,
font-family doivent dans ce cas P{font-family: Cursive ,
Fantasy, Monospace , etc.
être séparées par des helvetica;}
virgules.
Taille absolue
xx-small, x-small, small, me-
dium , large, x-large, xx-large
valeur numérique en points
(pt), en cm.
Taille relative
Smaller, larger : par rapport à
la taille courante (parent) BODY {font-size : 18pt
Définit la taille de la Longueur (em) ;}
police (taille absolue, définit la taille par le facteur P { font-size : smaller; }
font-size taille relative, longueur d’échelle de la largeur d’un m PRE { font-size : 2em; }
ou pourcentage) (largeur de la lettre m) P { font-size : 300%; }
Pourcentage multiplie la taille
de la police courante (parent)
par un pourcentage
Définit le style
font-style normal, italic, oblique P { font-style : italic ;}
d’écriture
- normal, bold, bolder, lighter
- valeur numérique (multi-
ple de 100) entre 100 et 900,
avec 400 pour normal, 500
pour moyen, 700 pour gras.
bolder et lighter augmentent
Définit le poids (épais-
ou diminuent le poids de 100
seur) de la police de BODY {font-weight :
font-weight par rapport au poids courant
caractères bold; }
(parent) : par exemple, de 200
à 300 (bolder) ou de 300 à
200 (lighter)
127
Définit les petites BODY {font-variant :

normal, small-caps
font-variant majuscules small-caps ;}
Spécifie globalement
(en une seule fois)
L’ordre des valeurs est le suiv-
toutes les propriétés de BODY { font : normal
ant : font-style, font-variant,
font la police. small-caps
font-weight, font-size,
Attention : pas de vir- bold 14pt
font-family
gule ntre les valeurs, arial, verdana, sans-
sauf pour les polices serif;}
s’il y en a plusieurs.
Définit le style
font-style normal, italic, oblique P { font-style : italic ;}
d’écriture
- normal, bold, bolder, lighter
- valeur numérique (multi-
ple de 100) entre 100 et 900,
avec 400 pour normal, 500
Définit le poids (épais- pour moyen, 700 pour gras.
BODY {font-weight :
font-weight seur) de la police de bolder et lighter augmentent
bold; }
caractères ou diminuent le poids de 100
par rapport au poids courant
(parent) : par exemple, de 200
à 300 (bolder) ou de 300 à
200 (lighter)
2. Les styles de texte

définit l’alignement du
left ou center ou right ou
texte left ou center ou
text-align justify. H1 {text-align: center}
right ou justify
définit un retrait dans
la première ligne d’un
bloc de texte sou-
text-indent
vent utilisé avec <P>, inches (in) ou en centimètres
P {text-indent: 1cm}
n’oubliez pas dans ce (cm) ou en pixels (px)
cas </P>.
soit barré, clignotant, etc.
t e x t - d e c o r a - définit une décoration A:visited {text-decora-
blink ou underline ou line-
tion du texte tion: blink}
through ou overline ou none
(majuscule, minuscule) up-
percase (met les caractères en
majuscules) ou lowercase (met
text-transform définit la casse du tex-
les caractères en minuscules) P {text-transform: up-
te
ou capitalize (met le premier percase}
caractère en majuscule)
Blanc : #ffffff
Noir : #000000
définit la couleur du
Color Rouge : #ff0000
texte par exemple en H3 {color: #000080}
Bleu : #0000ff
hexadécimal
...
points (pt), inches (in), cen-
définit l’espace entre
timètres (cm), pixels (px)
word-spacing les lettres spécifié en P {letter-spacing: 2pt}
ou pourcentage (%)
définit l’interligne soit en points (pt), inches (in), cen-
line-height l’espace entre les lignes timètres (cm), pixels (px) ou
P {line-height: 10pt}
du texte pourcentage (%)
128
détermine la longueur en points (pt), inches (in), cen-

d’un élément de texte timètres (cm), pixels (px) ou
Width H1 {width: 200px}
ou d’une image pourcentage (%)
détermine la hauteur en points (pt), inches (in), cen-
d'un élément de texte timètres (cm), pixels (px) ou
Height H1 {heigh: 100px}
ou d'une image pourcentage (%)
espace ou blanc nor- blanc normal ou pre ou
white-space PRE {white-space: pre}
mal ou pre ou nowrap nowrap
3. Les arrière-plans
Blanc : #ffffff
la couleur de l’arrière-
Noir : #000000
plan couleur (par ex-
background- Rouge : #ff0000 H1 {background-color:
emple en hexadécimal)
color Bleu : #0000ff #000000}
ou transparent
...
définit l’image de
extension de type : .gif, .jpg, BODY {background-im-
b a c k g r o u n d - l’arrière-plan URL de
.png ... age: image.gif}
image l’image
plan repeat ou no-repeat
ou repeat-x (x = nombre de
définit la façon de ré- P {background-image:
background- répétitions horizontales) ou
péter l’image d’arrière- image.gif; background-
repeat repeat-y (y = nombre de répé-
plan repeat: repeat-4}
titions verticales)
spécifie si l’image BODY {background-
d’arrière-plan reste fixe image: image.gif; back-
background-
avec les déplacements scroll ou fixed ground-attachement:
attachment
de l’écran fixed}
spécifie la position de {top ou center ou bottom ,
BODY {background-
l’image d’arrière-plan left ou center ou right} ou en
background- image: img.gif; back-
par rapport au coin points (pt), inches (in), cen-
position ground-position: right
supérieur gauche de la timètres (cm), pixels (px) ou
top}
fenêtre {1, 2} pourcentage (%)
raccourci pour les dif- repeat ou no-repeat ou re-
P {background: image.gif
Background férentes propriétés peat-x ou repeat-y, scroll ou
fixed repeat}
d’arrière-plan fixed
4. Les marges
détermine la valeur de
margin-top en unité de longueur ou auto { margin-top: 5px }
la marge supérieure
margin-right en unité de longueur ou auto { margin-right: 5px }
la marge droite
m a r g i n - b o t - détermine la valeur de
en unité de longueur ou auto { margin-bottom: 5px }
tom la marge inférieure
margin-left en unité de longueur ou auto { margin-left: 5px }
la marge gauche
regroupe les différentes
Margin
propriétés de la marge
129
5. Les bords et les “enrobages”

b o r d e r - t o p - donne l’épaisseur du thin ou medium ou thick ou H3 {border-top-width:
width bord supérieur spécifié par l’auteur thin}
border-right- donne l’épaisseur du thin ou medium ou thick ou H3 {border-right-width:
width bord droit spécifié par l’auteur medium}
border-bottom- donne l’épaisseur du thin ou medium ou thick ou H3 {border-bottom-
width bord inférieur spécifié par l’auteur width: thick}
b o r d e r - l e f t - donne l’épaisseur du H3 {border-left-width:
width bord gauche scroll ou fixed 0.5cm}
regroupe les différentes
propriétés de border-
border-width
width
repeat ou no-repeat ou re-
détermine la couleur H3 {border-color: yel-
peat-x ou repeat-y, scroll ou
border-color de la bordure low}
fixed
none ou solid ou dotted ou
détermine le style du {border-style: solid
dashed ou double ou groove
border-style trait de la bordure dashed}
ou ridge ou inset ou outset
regroupe toutes les
Border
propriétés des bords
valeur de remplissage en points (pt), inches (in), cen-
padding-top haut entre l’élément et timètres (cm), pixels (px) ou
H3 {padding-right: 3px}
le bord pourcentage (%)
padding-right droite entre l’élément timètres (cm), pixels (px) ou
H3 {padding-right: 3px}
et le bord pourcentage (%)
padding-bot- H3 {padding-bottom:
bas entre l’élément et timètres (cm), pixels (px) ou
tom 3px}
le bord pourcentage (%)
padding-left gauche entre l’élément timètres (cm), pixels (px) ou
H3 {padding-left: 3px}
et le bord pourcentage (%)
regroupe les diffé-
Padding rentes propriétés de
remplissage
6. Les listes
disc ou circle ou square
détermine le type de
decimal ou lower-roman ou OL {list-style-type:
list-style-type puces ou de numérota-
upper-roman ou lower-alpha square}
tion
ou upper-alpha
permet de remplacer
list-style-im- OL {list-style-image: im-
les puces par une im- url ou none
age age.gif}
age
spécifie si les puces
list-style-posi- UL {list-style-position:
sont à l’intérieur ou à inside ou outside
tion inside}
l’extérieur du texte
regroupe toutes les
list-style
propriétés de liste
130
VII- APPLIQUER UN STYLE
Je pratique
1- Les éléments class et ID
On peut redéfinir l’utilité d’une balise, mais si vous voulez que
cette balise ne soit pas limitée aux seules feuilles de style, alors
l’élément class doit être utilisé. L’élément ID (identifiant) peut l’être
aussi, sa différence avec class se situe au niveau de l’utilisation. En
effet, on opte pour l’utilisation d’une ID de préférence lors d’un script
Javascript.
Exemple avec une class :
<html>
<head>
<style type=”text/css”>

</style>
</head>
</body>
<h2 class=”test”>Titre défini avec une class de nom test</h2>
<h2>Titre normal de niveau 2</H2>
<body>
<html>
2- A tous les éléments de la page.

Le sélecteur universel * agit sur tous les éléments Html. Pour
définir par exemple une couleur rouge par défaut:
* { color: #ff0000; }
Les éléments susceptibles d’avoir une couleur d’avant-plan,
comme les paragraphes de texte, les titres, les bordures... seront
rouges, sauf si une autre couleur leur est spécifiquement attribuée.
3- A toutes les instances d’un élément.

Pour que le texte des paragraphes soit par exemple en bleu:
p { color: #0000ff; }
Le contenu de toutes les balises <p> sera bleu, sauf si une autre
couleur est localement plus spécifiquement attribuée.
131
4- A certaines instances d’un élément.

Pour que le texte de certains paragraphes seulement soit par
exemple en vert, on définit la classe .vert:
p.vert { color: #008000; }
Le contenu de toutes les balises <p class=”vert”> sera vert. Le contenu
des balises <p> restera bleu.
5- A un ensemble d’éléments successifs.

Pour que le texte d’un titre et des paragraphes qui le suivent
soient gris, on définit la classe .gris:
.gris { color: #808080; }
Ce style s’appliquera aux éléments bornés par l’élément div:
<div class=”gris”>
<h1>...</h1>
<p>...</p>
<p>...</p>
</div>
Ou définis par:
<h1 class=”gris”>...</h1>
<p class=”gris”>...</p>
<p class=”gris”>...</p>
6- A une partie de contenu de paragraphe.

Pour que certains mots d’un paragraphe soient gris, on applique
la classe .gris à l’élément span :
<p>...<span class=”gris”>ceci sera en gris</span>...</p>
7- A un élément directement ou indirectement contenu dans

un autre élment.
Pour que le contenu de l’élément em soit en rouge seulement
dans les titres h2, on définit la règle:
h2 em { color: #ff0000;}
Qui s’appliquera aussi bien à:
<h2>...<em>en rouge</em>...</h2>
qu’à: <h2>...<code><em>...</em></code>...</h2>
8- A un élément directement contenu dans un autre élé-

ment.
Pour que le contenu de l’élément em soit en rouge dans un para-
graphe, sauf dans les citations qu’il contient, on écrira:
p>em { color: #ff0000;}
Qui s’appliquera à : <p>...<em>en rouge</em>...</p>
mais pas à <p><q><em>...</em></q></p>
132
9- A un élément suivant un autre élément.

Pour que le paragraphe suivant une image soit rouge, on écrira:
img + p { color: #ff0000;}
Qui s’appliquera à: <img>...</img><p>en rouge</p>
10- A différents éléments simultanéement.

Pour que les titres de tous niveaux soient rouge, on écrira:
h1,h2,h3,h4,h5,h6 { color: #ff0000;}
11- Couleurs, bordures et arrières-plans

Les couleurs sont spécifiées à l’aide des Mots-clé Html ou du
modèle de couleur RGB.
Couleur et image d’arrière-plan.
Pour que l’arrière-plan d’un élément soit blanc:
background-color: #ffffff;
Pour qu’une image occupe l’arrière-plan d’un élément:
background-image: url(“...url de l’image...”)
Pour que l’image d’arrière-plan ne se répète pas dans l’élément:
background-repeat: no-repeat;
Pour que l’image d’arrière-plan soit centrée dans l’élément:
background-position: center;
Couleur d’avant-plan.
Pour que l’avant-plan d’un élément soit noir:
color: #000000;
Bordures.
Pour que l’élément ait une bordure noir et continue de 5
pixels d’épaisseur:
border: 5px solid #000000;
Pour que la bordure soit en pointillé:
border: 5px dotted #0000ff;
Pour que la bordure donne une impression de relief:
border: 5px groove #0000ff;
Taille, Alignement et Positionnement

Largeurs, hauteurs.
Pour spécifier la largeur d’un élément (ici 250px):
width: 250px;
Pour spécifier la hauteur d’un élément (ici 250px):
height: 250px;
133
Marges, espacement
Pour spécifier la largeur d’une marge autour d’un élément (ici
25px):
margin: 25px;
Pour spécifier la largeur de l’espacement autour d’un élément
(ici 25px):
padding: 25px;
Alignement du texte:
Pour centrer un texte:
text-align: center;
Pour aligner un texte à gauche:
text-align: left;
Pour aligner un texte à droite:
text-align: right;
Positionnement des éléments:

Pour centrer horizontalement un élément dans la page (ici avec
une largeur de 70% de celle-ci):
margin-left: 15%;
margin-right: 15%;
Pour extraire un élément du flux normal et le positionner à
gauche:
float: left;
Pour extraire un élément du flux normal et le positionner à droite:
float: right;
Remarque
Le support de la position flottante étant imparfait dans de nombreux navigateurs,
il est souvent préférable de spécifier les largeurs du conteneur (width: 100%) et de
l’élément flottant.
Pour empêcher un élément flottant de déborder vers le

bas sur le contenu qui le suit, le faire suivre d’un élément <div
class=”spacer”> </div> doté de la propriété:
.spacer { clear: both; }
Ou mieux, utiliser un élément <hr /> doté de la propriété:
hr { clear: both; visibilty: hidden; }
Il ne sera visible que dans les navigateurs non-graphiques pour
lesquels il contribuera à structurer visuellement la page, la rendant
plus accessible et plus agréable à consulter...
134
Pour extraire un élément du flux normal et le positionner de

manière absolue dans la fenêtre du navigateur (ici, à 25 px des bords
haut et droit):
position: absolute;
right: 25px;
top: 25px;
Pour extraire un élément du flux normal et le positionner de
manière fixe dans la fenêtre du navigateur (ici, à 25 px des bords haut
et droit):
position: absolute;
position: fixed;
right: 25px;
top: 25px;
Remarque
position: absolute; est redondant, mais avec cette syntaxe, les navi-
gateurs tels Ie qui ne supportent pas la position fixe s’en tiendront à
un positionnement absolu...
Typographie
Pour spécifier une police de caractères (ici type arial):
font-family: arial, verdana, helvetica, sans-serif;
Remarque
Les noms de police composés doivent être placé entre guillemets:
“Times New Roman”.
Pour spécifier une taille de caractères (ici 1em):

font-size: 1em;
Remarque
Les tailles relatives (em) sont préférables aux tailles absolues (pixels)
car elles s’adaptent aux réglages personnels des utilisateurs et sont
ainsi plus accessibles...
Pour spécifier une hauteur de ligne (ici 1.5em):

line-height: 1.5em;
Pour spécifier une mise en italique:
font-style: italic;
135
Pour spécifier une mise en gras:

font-weight: bold;
Pour spécifier un soulignement:
text-decoration: underline;
Pour barrer un texte:
text-decoration: line-through;
Pour forcer l’affichage du texte en capitales:
text-transform: uppercase;
Formats d’hyperliens
Pour définir la couleur par défaut des hyperliens (ici, bleu):
a { color: #0000ff; }
Pour définir des hyperliens non soulignés:
a { text-decoration: none; }
Pour définir la couleur des hyperliens visités (ici, violet):
a:visited { color: #800080; }
Pour définir la couleur des hyperliens survolés (ici, violet):
a:hover { color: #800080; }
Pour définir la couleur des hyperliens activés (ici, violet):
a:active { color: #800080; }
136
Résumé
●● CSS (Cascading Style Sheets) peuvent constituer le point de ré-
férence du formatage (couleurs et apparence du texte, des liens, et
de certains éléments de la page html) de tout le site web.
●● Une feuille de style css se présente dans un fichier au format
.css. Le but de cette feuille est de séparer la structure d’un docu-
ment de ses styles de présentation. Il est par exemple possible de ne
décrire que la structure d’un document HTML, et de décrire toute la
mise en forme dans une feuille de style CSS à part.
●● Cette séparation apporte beaucoup de bénéfices, permettant de
changer de présentation quand on veut, et de réduire la complexité
d’un document HTML.
●● un attribut est une information supplémentaire qui se trouve
dans une balise.
●● La définition de base d’un style est simple :
balise { propriété de style: valeur; propriété de style: valeur }
●● Une règle CSS est caractérisée par deux principaux éléments :
♦♦Un sélecteur de balises, permettant de préciser à quelles balises
du document le style s’applique ;
♦♦Une déclaration de style
●● Trois méthodes différentes sont possibles pour intégrer les feuilles
de styles en html :
♦♦L’instruction style en tant qu’élément :
<style type=”text/css”>
♦♦L’élément link pour établir un lien vers une feuille de style ex-
terne (fichier texte avec l’extension .css) :
<link title=”test” type=”text/css” rel=”stylesheet” href=”mafeuille.
css”>
♦♦L’instruction style en tant qu’attribut :
<p style=”font-size: 12pt; color: green”>
La balise <LINK> avertit le browser qu’il faudra réaliser un lien.
♦♦L’attribut rel=stylesheet (sans s et sans guillemets) précise qu’il
y trouvera une feuille de style externe.
♦♦L’attribut type=”text/css” précise que l’information est du texte
et du genre cascading style sheets (css).
♦♦L’attribut classique de lien href=” ... “ donne le chemin d’accès
et le nom du fichier à lier.
137
Exercices
1 - Que veut dire CSS ? :
a- Cascading Style Sheets
b- Computer Style Sheets
c- Colorfull Style Sheets
2 - Quel est le code HTML correct définissant un CSS externe ? :

a- <stylesheet>mon_style</stylesheet>
b- <link rel=”stylesheet” type=”text/css” href=”mon_style.css”>
c- <stylesheet>mon_style.css</stylesheet>
3 - Quelles balises HTML définissent un attribut de style interne ? :

a- <css> </css> b- <script> </script> c- <style> </style>
4 - Où place-t-on les déclarations de feuilles de style ? :

a- Au début du document b- A la fin du document
c- Entre les balises <body> d- Entre les balises <head>
5 - Comment défini-t-on un style local en ligne ? :

a- style b- font c- class
6 - Peut-on définir autrement un style local en ligne ? :

a- Vrai b- Faux c- Je ne sais pas
Remarque
7 - Définition d’un commentaire en CSS. :
a- // ceci est un commentaire
b- /*Ceci est un commentaire*/
c- 
8 - Quelle est la déclaration de style correct ? :

a- {p color : blue;} b- p {color : blue;} c- p : color : blue
9 - Quelle est la règle de style qui permet de définir la couleur d’arrière-

plan d’un élément HTML :
a- color: b- bgcolor: c- background-color:
10 - Comment définit-on la couleur du texte d’un élément :

a- text-color= b- text-color: c- fgcolor: d- color:
138
Exercices
Exercice 1 :
Lancez Bloc-notes (ou votre éditeur de texte habituel) et créez deux
fichiers, un fichier HTML et un fichier CSS, avec les contenus suiv-
ants :
default.html
<html>
<head>
<title>Mon document</title>
<link rel=”stylesheet” type=”text/css” href=”style.css” />
</head>
<body>
<h1>Ma première feuille de style</h1>
</body>
</html>
style.css
body {
background-color: #FF0000;
}
Placez maintenant les deux fichiers dans le même dossier CSS. Songez
à sauvegarder les fichiers avec les bonnes extensions (respectivement
« .html » et « .css »)
Ouvrez « default.html » à l’aide d’un navigateur et constatez le fond
rouge de la page.
Exercice 2 :
Récupérez les fichiers default.html et style.css du dossier CSS.
Ajouter le texte suivant dans le body :
“Pour entrer en première TI : il faut avoir son BEPC ou un équiva-

lent en économie”
le mettre dans l’entête H3
Au fichier default.html.
· Modifiez le fichier style.css en faisant en sorte que :
- le texte soit en bleu
- le fond redevient blanc
- le texte qui se trouve dans l’entête h3 soit en rouge, caractère
gras, et centré
139
Exerice 3 :
Cours Exo TP
HTML CSS
Donner pour chacun des cas suivants la syntaxe de la balise qui per-
met de faire le lien entre un fichier .html et un fichier .css
Lieu du fichier Lieu du fichier
Syntaxe
.html .css
cours cours
TP HTML
HTML CSS
Exo TP
Exercice 4 :
Que fait chacun des codes suivants dans un fichier css:
1.
BODY {font-family :arial;}
P{font-family: Cursive , helvetica;}
2. Remarque
BODY {font-size : 18pt ;}
P { font-size : smaller; }
3.
PRE { font-size : 2em; }
P { font-size : 300%; }
4.
P { font-style : italic ;}
BODY {font-weight : bold; }
5.
BODY {font-weight : bold; }
140
Exercice 5 :
Ecrire une feuille de style qui permet d’obtenir une page contenant les
mises en forme suivantes :
• un fond blanc,
• une police de caractère par défaut Verdana noire,
• un titre de premier niveau bleu marine centré,
• un titre de deuxième niveau rouge décalé de 15 pixels,
• des liens passant du vert au gris avec un petit effet rouge non
souligné au passage de la souris.
Exercice 6 :
• un fond d’écan rose,
• une police de caractère par défaut Bookman Old Style,
• un titre de premier niveau bleu marine positionné à gauche,
• un titre de deuxième niveau rouge décalé de 25 pixels,
• des liens passant du vert au Jaune avec un petit effet gris non
souligné au passage de la souris.
Exercice 7 :
Ecrire une feuille de style qui permet d’obtenir une page contenant la
mise en forme suivante :
• un fond d’écan avec une image de votre choix, qui se repète 2
fois verticalement et 3 horizontalement.
Exercice 8 :
Ecrire une feuille de style qui permet d’obtenir une page contenant la
mise en forme suivante :
• un fond d’écan avec une image de votre choix, qui se position-
nera au coin superieur.
Exercice 9 :
Ecrire une feuille de style qui permet d’obtenir une page contenant
laes mises en forme suivantes :
• définit une interligne de 15pt.
• définit les lettres du fichier comme étant toutes des majuscules
Exercice 10 :
• définit une couleur de code hexadécimal : #000080.
• définit la décoration du texte de la page comme etant barré
141
Chapitre
PROGRAMMER EN JAVASCRIPT
4
“ Si debugger, c’est supprimer des bugs, alors programmer ne peut être que les ajou-
ter ”
Edsger Dijkstra
La programmation
Informatiser un problème du monde réel est un long procéssus qui
débute par l’algorithme et s’achève par un procédé qui nécéssite l’outil in-
formatique. Ce procédé transforme les instructions écrites en algorithme
en instructions compréhensibles par l’ordinateur : en faisant usage d’un
langage dit langage de programmation.
En progarammation Web, il est important de pouvoir échanger des
informations c’est dans cette optique qu’il serait important de savoir
- Qu’entendez-vous par langage de programmation ?
- A quoi peut servir un langage tel que le JavaScript en progarmma-
tion Web ?
- Où et quand utilise-t-on le langage JavaScript ?
Pré-requis
* Manipuler le HTML
* Utiliser le HTML
Compétences
• Créer des pages Web statiques intégrant du JavaScript
Sommaire
I. INTRODUCTION AU LANGAGE JAVASCRIPT .........................144

II. LE FORMALISME DE BASE DU JAVASCRIPT..........................146
III. LES OBJETS JAVASCRIPT.......................................................147
IV. LES VARIABLES.......................................................................152
V. LES OPERATEURS PREDEFINIS..............................................155
VI. LES ENTREES/SORTIES EN JAVASCRIPT..............................157
VII. LES STRUCTURES DE CONTROLE .........................................158
VIII. LES FONCTIONS EN JAVASCRIPT..........................................164
IX. LA GESTION DES EVENEMENTS EN JAVASCRIPT ................166
X. LES FORMULAIRES EN JAVASCRIPT......................................171
XI. LES COOKIES...........................................................................178
Résumé.............................................................................................180
Exercices...........................................................................................181
143
I- INTRODUCTION AU LANGAGE JAVASCRIPT

Le Javascript est une extension du langage HTML qui est incluse
dans le code. Ce langage est un langage de programmation qui permet
d’apporter des améliorations au langage HTML en permettant d’exécuter
des commandes.
Un script est une portion de code qui vient s’insérer dans une page
HTML. Le code du script n’est toutefois pas visible dans la fenêtre du
navigateur car il est compris entre des balises (ou tags) spécifiques qui
signalent au navigateur qu’il s’agit d’un script écrit en langage JavaS-
cript.
Les balises annonçant un code Javascript sont les suivantes:
<SCRIPT language=”Javascript”>
Placez ici le code de votre script
</SCRIPT>
Un exemple de Javascript
Comme très généralement dans les documents de reférence du
Javascript on va faire afficher une boite de dialogue suite au charge-
ment d’une page HTML. Dans ce cas le script est totalement inutile voire
ennuyeux pour vos visiteurs.
Cet exemple montre ce que l’abus de Javascript peut donner. Il
faudra apprendre à se servir du Javascript avec modération.
Voici la page HTML correspondante:
<HTML>
<HEAD>
<TITLE> Voici une page contenant du Javascript</TITLE>
</HEAD>
<BODY>

</SCRIPT>
</BODY>
</HTML>
1- Créez un répertoire appelé TpJavaScript. Ce répertoire sera utilisé
pour sauvegarder tous vos fichiers d’activités d’intégration.
2- Créez un programme HTML qui permet d’afficher le maximum de
3 entiers a, b et c.
3- Sauvegardez ce fichier dans le répertoire TpJavaScript, sous le
nom tpjs1.html
144
J’apprends /cours
●● Pour résoudre ce problème nous avons besoin de déclarer les vari-

ables a, b et c (les variables sur lesquelles porte la comparaison) et
une variable max qui recevra la valeur maximale. Ceci n’est pas per-
mis par le HTML.
●● De même on aura besoin d’une structure conditionnelle, qui n’est
pas aussi gérée par le langage HTML.
1- Les limites du langage HTML

Le langage HTML présente les limites suivantes :
♦♦ Absence des structures de contrôle algorithmiques (conditionnelles
et itératives).
♦♦ Un langage sans aucune logique de programmation procédurale
(notion de sous programmes, variables, opérateurs prédéfinies …).
♦♦ Absence de prise en charge d’événements, à l’exception de
l’événement clic.
♦♦ Aucune communication avec la plate forme d’exécution (date sys-
tème, type du navigateur utilisé, etc.)
♦♦ Absence de possibilité d’interfaçage avec les bases de données.
♦♦ Absence de mécanisme permettant de rendre le code source inac-
cessible pour l’utilisateur final (en HTML, pour pouvoir visualiser le
code, il suffit d’utiliser l’option affichage code source du navigateur).
2- Les solutions proposées

Pour pallier à ses limites, deux solutions sont utilisées :
♦♦ L’utilisation des langages côté client (JavaScript ou VbScript) : ce
sont des langages qui permettent d’ajouter des fonctionnalités omises
par le langage HTML, (les fonctionnalités qui concernent la connex-
ion aux bases de données et l’accessibilité au code ne sont pas sup-
portées par ces langages). L’avantage majeur de cette solution est le
fait de pouvoir exécuter le code écrit avec ces langages (JavaScript ou
VbScript) sans avoir besoin d’une installation particulière ; il suffit
d’avoir un navigateur web. Le JavaScript est le plus utilisé vu sa com-
patibilité avec les différents navigateurs.
♦♦ L’utilisation des langages côté serveur tels que ASP, PHP, Cold Fu-
sion. Ces langages permettent d’avoir les mêmes fonctionnalités que
les langages côté client plus la possibilité de se connecter à des bases
de données et le verrouillage du code source.
145
Remarque
Les avantages de l’utilisation d’un langage de programmation côté
client par rapport à un langage de programmation côté serveur :
●● Exécution plus rapide (surtout pour les pages sollicitées fréquem-
ment).
●● Coût d’hébergement moins cher, en effet l’exécution d’un script
côté serveur fait appel aux ressources matérielles du serveur
d’hébergement.
●● Certaines fonctionnalités nécessitent un traitement côté client,
d’où l’obligation de faire recours à un langage de programmation
côté client, exemple : la date système du client, la gestion de la fenê-
tre de navigation, etc.
3- Historique du langage JavaScript

JavaScript a été initialement développé par Netscape et s’appelait
alors LiveScript. Adopté à la fin de l’année 1995, par la firme Sun (qui a
aussi développé Java), il prit alors son nom de JavaScript.
JavaScript n’est pas propre au navigateur de Netscape. Microsoft
l’a d’ailleurs aussi adopté à partir de la version 3 du navigateur Internet
Explorer.
JavaScript est un langage de scripts qui, incorporé aux balises
HTML, permet d’améliorer la présentation et l’interactivité des pages
Web.
Ces scripts sont gérés et exécutés par le navigateur lui-même sans
faire appel aux ressources du serveur. Ces instructions seront donc
traitées en direct et surtout sans retard par le navigateur.
II- LE FORMALISME DE BASE DU JAVASCRIPT
1- Créez un fichier et y tapez le code ci-dessous.
2-Enregistrez le fichier sous le nom tpjs2.html. Balises
<HTML> HTML
<HEAD>
<TITLE>Mon premier code JavaScript</TITLE>
</HEAD>
<BODY>
Début du
texte en HTML script
Script
<SCRIPT LANGUAGE=”JavaScript”>
alert(“Bienvenue”);
//alert permet d’afficher une fenêtre message.
</SCRIPT>
146
Balises
un autre texte en HTML HTML
</BODY>
</HTML>
1- Les délimiteurs du JavaScript

Dans la logique du langage HTML, il faut signaler au navigateur
par une balise, que ce qui suit est un script et que c’est du JavaScript.
C’est la balise <SCRIPT LANGUAGE=”JavaScript”>.
De même, il faudra informer le navigateur de la fin du script. C’est
la balise </SCRIPT>.
2- Les commentaires
Tout ce qui est écrit entre le // et la fin de la ligne, représente un
commentaire et il sera ignoré pendant l’exécution.
// commentaire
Il est aussi possible d’inclure des commentaires sur plusieurs
lignes avec le code
/* commentaire sur
plusieurs lignes */
III- LES OBJETS JAVASCRIPT

1- Les objets JavaScript et leurs hiérarchies
Les différentes fonctionnalités offertes par JavaScript sont accessi-
bles à travers un ensemble d’objets intrinsèques prédéfinis. Les objets
JavaScript peuvent être répartis en deux catégories :
-- Les objets d’interface : Ils permettent de gérer les aspects visu-
els des différents contrôles graphiques pouvant se trouver au niveau
d’une interface. On peut citer comme Exemple : l’objet window, docu-
ment, button, radio, checkbox…etc.
-- Les objets des propriétés et des fonctions prédéfinies : Ils per-
mettent de fournir les différentes ressources requises pour la pro-
grammation.
Ces objets sont : L’objet string, math, date, navigator, array, et ob-
ject.
a- La hiérarchie des objets d’interface
JavaScript divise une page web en objets. Il permet d’accéder à ces
objets, d’en retirer des informations et de les manipuler.
Chaque page Web s’affiche dans une fenêtre, c’est l’objet fenêtre
(window). Dans chaque fenêtre, il y a un document HTML, c’est l’objet
document. Autrement dit l’objet window contient l’objet document,
qui lui même peut contenir d’autres objets. Schématiquement, on peut
représenter une partie de la hiérarchie des objets d’interface JavaScript
comme suit :
147
--
--
--
--
--
--
--
--
--
--
--
--
--
--
Figure 4-1 : Une partie de la hiérarchie des objets d’interface en JavaScript
b- Les propriétés des objets

Les objets JavaScript ont des propriétés qui permettent de décrire
des caractéristiques rattachées à ces objets.
Pour accéder à une propriété, il faudra donner le chemin complet
de l’objet en allant du contenant le plus extérieur de l’objet à l’objet ré-
férencé.
En JavaScript, pour accéder aux propriétés, on utilise la syntaxe :
nom_de_l’objet.nom_de_la_propriété
Exemple :
Dans le cas des boutons radio, une des propriétés est la sélection
(checked=TRUE) ou la non-sélection (checked=FALSE).
Pour tester la propriété de sélection, on peut écrire :
if(window.document.form.radio[0].checked)
Remarque
♦♦ L’objet window occupe la première place dans la hiérarchie, il
est repris par défaut par JavaScript et devient donc facultatif.
♦♦ Pour la syntaxe radio[0], 0 désigne qu’il s’agit de la première
case d’option retrouvée dans la page Web.
c- Les méthodes des objets

A chaque objet JavaScript, le langage a prévu un ensemble de mé-
thodes (ou fonctions dédiées à cet objet) qui lui sont propres.
Par exemple, à l’objet document, JavaScript a
dédié la méthode “écrire dans le document”, c’est la méthode write().
148
1- Créez un fichier HTML, où vous tapez, entre <BODY> et </BODY>,
le code suivant :
document.write(“votre texte”);
x=2 ;
document.write(x);
document.write(“le contenu de la variable x est : “ + x);
document.write(“<br><b> le contenu de la variable x est : </b> “);
document.write(“<font color=’red’>” + x + “</font>”);
2- Sauvegardez le fichier sous le nom tpjs3.html.
J’apprends /cours
●● L’opérateur “+” : joue le rôle de concaténation lorsqu’il est utilisé

avec la méthode write.
●● Il est possible de générer du code HTML lors de l’utilisation de la
méthode write, dans ce cas le code sera exécuté et non pas affiché.
●● Dans le cas où le code HTML contient des guillemets (“), et pour
ne pas risquer de les confondre avec les guillemets (“) de write, il sera
judicieux de transformer les “ du HTML par apostrophes (‘).
2- Les différents emplacements du code JavaScript
L’objectif est de créer une page Web, dont le contenu est décrit par
l’imprime écran suivant :
Figure 4-2 : Les différents emplacements du code JavaScript
149

1- Créez un fichier et y tapez le code suivant :
<HTML>
<HEAD>
<TITLE>Les différents emplacements du code JavaScript</TITLE>
function fermer()
{
window.close();
}
</SCRIPT>
</HEAD>
<BODY>
function msg()
{
document.write(‘ou en passant la souris au-dessus de’);
}
</SCRIPT>
vous pouvez fermer cette fenêtre en cliquant
<A HREF=”” onClick=”fermer()”> ici </A>
<BR>
msg();
</SCRIPT>
<A HREF=”” onMouseOver=”fermer()”> cela </A>
</BODY>
</HTML>
2- Enregistrez le fichier sous le nom tpjs4.html puis le testez

3- Créez avec le bloc-notes, dans le même répertoire, un fichier nom-
mé lib.js
4- Enlevez les deux fonctions fermer() et msg() du fichier tpjs4.html,
pour les mettre dans le fichier lib.js
5- Dans le fichier tpjs4.html, ajoutez à la partie entête :
<SCRIPT LANGUAGE=”JavaScript” SRC=”lib.js”> </SCRIPT>
6- Enregistrez les deux fichiers et testez de nouveau le fichier tpjs4.
html.
J’apprends /cours
●● Il est possible de mettre plusieurs scripts JavaScript dans une

même page Web, que ce soit dans la partie <BODY> et </BODY> ou
<HEAD> et </HEAD>. Ce dernier emplacement est utilisé pour la
déclaration des fonctions.
●● Les différentes solutions permettant l’insertion du code JavaScript
dans une page Web sont :
150
-- La première consiste à insérer des instructions JavaScript entre

<SCRIPT>....</SCRIPT> dans la partie <BODY> et </BODY> ;
-- La seconde consiste à déclarer des fonctions puis les appeler entre
<BODY> et </BODY> ;
-- La troisième consiste à utiliser un des gestionnaires d’évènements,
rattachés aux balises HTML, pour appeler des fonctions préalable-
ment définies.
●● La déclaration de fonctions JavaScript peut se faire :
-- Entre <HEAD> et </HEAD>
-- Entre <BODY> et </BODY>
-- Dans un fichier texte externe, avec l’extension .js, à inclure par la
suite dans les fichiers HTML.
a. Dans la balise script

Le code Javascript peut être inséré où vous le désirez dans votre
page Web, vous devez toutefois veiller à ce que le navigateur est entière-
ment chargé votre script avant d’exécuter une instruction.
En effet, lorsque le navigateur charge votre page Web, il la traite
de haut en bas, de plus vos visiteurs (souvent impatients) peuvent très
bien interrompre le chargement d’une page, auquel cas si l’appel d’une
fonction se situe avant la fonction dans votre page il est probable que
cela génèrera une erreur si cette fonction n’a pas été chargée.
Ainsi, on place généralement le maximum d’éléments du script
dans la balise d’en-tête (ce sont les éléments située entre les balises
<HEAD> et </HEAD>). Les évènements Javascript seront quant à eux
placés dans le corps de la page (entre les balises <BODY> et </BODY>)
comme attribut d’une commande HTML...

</SCRIPT>
L’argument de la balise <SCRIPT> décrit le langage utilisé. Il peut
être “JavaScript” “JavaScript1.1”
“JavaScript1.2”.
On peut ainsi (en passant un argument différent de “JavaScript”)
utiliser d’autres langages de programmation que celui-ci (par exemple le
VbScript).
Pour utiliser différentes versions de JavaScript tout en conservant
une certaine compatibilité, il suffit de déclarer plusieurs balises SCRIPT
ayant chacune comme paramètre la version du JavaScript correspon-
dante.
151
b. Dans un fichier externe

Il est possible de mettre les codes de JavaScript en annexe dans
un fichier (à partir de Netscape3.0 uniquement). Le code à insérer est le
suivant:
<SCRIPT LANGUAGE=Javascript SRC=”url/fichier.js”> </SCRIPT>
Où url/fichier.js correspond au chemin d’accès au fichier contenant
le code en JavaScript, sachant que si celui-ci n’existe pas le navigateur
exécutera le code inséré entre les 2 balises.
c. Grâce aux évènements

On appelle évènement une action de l’utilisateur, comme le clic
d’un des boutons de la souris. Le code dans le cas du résultat d’un évé-
nement s’écrit:
<balise eventHandler=”code Javascript à insérer”>
eventHandler représente le nom de l’événement.
Je pratique
1. De combien de manière peut-on insérer le code JavaScript

dans une page HTML ?
2. Cier les différentes manières d’insérer du code JavaScript
3. Où est-ce qu’on insère les fonctions de JavaScript?
IV- LES VARIABLES
1- Créez un fichier et y tapez le code donné ci-dessous.
2- Enregistrez le fichier sous le nom tpjs5.html, puis le tester.
<HTML>
<HEAD>
<TITLE> Les variables en JavaScript</TITLE>
var x=2;
y=3;
function test()
{ x=22 ;
var y=33;
}
</SCRIPT>
</HEAD>
152
document.write(“La valeur de x est de : “ + x +” Alors que la valeur de y est
de : “ + y);
test();
document.write(“<br>La valeur de x est de : “ + x +” Alors que la valeur de y
est de : “
+ y);
</SCRIPT>
</BODY>
</HTML>
J’apprends /cours
Une variable est un objet repéré par son nom, pouvant contenir
des données, qui pourront être modifiées lors de l’exécution du pro-
gramme.
En JavaScript, les noms de variables peuvent être aussi long que
l’on désire, mais doivent répondre à certains critères:
· un nom de variable doit commencer par une lettre (majuscule ou
minuscule) ou un “_”
· un nom de variables peut comporter des lettres, des chiffres et les
caractères _ et & (les espaces ne sont pas autorisés!)
· Les noms de variables ne peuvent pas être les noms suivants (qui
sont des noms réservés)
♦♦ La déclaration de variables
Les variables peuvent se déclarer de deux façons :
* Soit de façon explicite. On indique à JavaScript que ceci est une
variable.
La commande qui permet de déclarer une variable est le mot var. Par
exemple :
var Numero = 1
var Prenom = “Crésus”
* soit de façon implicite. On écrit directement le nom de la vari-
able suivi de la valeur que l’on lui attribue et JavaScript s’en accom-
mode.
Par exemple :
Numero = 1
Prenom = “Crésus”
♦♦ La visibilité des variables

Les variables déclarées tout au début d’un script, en dehors et avant
toute fonction, seront toujours globales, qu’elles soient déclarées de
façon implicite ou explicite. On pourra donc les exploiter partout dans
le script.
153
Dans une fonction, une variable déclarée par le mot clé var aura
une portée limitée à cette seule fonction. On ne pourra donc pas
l’exploiter ailleurs dans le script. D’ou son nom de locale. Par contre,
toujours dans une fonction, si la variable est déclarée contextuelle-
ment (Sans utiliser le mot var), sa portée sera globale.
Remarque
* Les noms de variables sont sensibles à la casse (le Javascript
fait la différence entre un nom en majuscule et un nom en minus-
cules), il faut donc veiller à utiliser des noms comportant la même
casse!
* JavaScript utilise 4 types de données :
Types Description
Des nombres Tout nombre entier ou avec virgule exemple: 20 ou 3.14
Des chaines Toute suite de caractères comprise entre guillemets
de caractères exemple: “suite de caractères”
Des booléens Les mots true (pour vrai) et false (pour faux)
Le mot null Mot spécial qui indique l’absence d’une valeur
* Notons qu’il ne faut pas déclarer le type de données d’une vari-

able.
1- Créez un fichier et y tapez le code donné ci-dessous.
<HTML>
<BODY>
b = prompt(“saisissez une valeur”);
if(isNaN(b))
{ alert(“conversion impossible”);}
else
{
b = Number(b);
b=b+1;
document.write(“<BR>la valeur de b est :” + b);
}
</SCRIPT>
</BODY>
</HTML>
2- Enregistrez le fichier sous le nom tpjs5.html puis le tester.
154
J’apprends /cours
Conversion de types
♦♦ La fonction isNaN (is Not a Number) est une fonction booléenne
permettant de vérifier si le contenu d’une variable donnée en paramé-
tre est numérique ou non; elle retourne la valeur FALSE si la conver-
sion est possible ou la valeur TRUE dans le cas contraire.
♦♦ Alert et Prompt sont deux méthodes de l’objet window permettant
respectivement l’affichage et la saisie dans des boites de dialogue.
Remarque
* Il existe des fonctions de conversion de type : String et Number,
qui permettent de spécifier explicitement la conversion à effectuer.
var a = String(21.34); => a = “21.34
var b = Number (“12.56”) => b = 12.56
* la fonction eval : x=eval(variable) évalue une chaîne de caractère
sous forme de valeur numérique. On peut stocker dans la chaîne
des opérations numériques, des opérations de comparaison, des
instructions et même des fonctions.
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.
V- LES OPERATEURS PREDEFINIS

Dans les exemples suivants, la valeur initiale de x est toujours
égale à 11
1- Les opérateurs de calcul
Signe Nom Signification Exemple Résultat

+ Plus Addition x+3 14
- Moins Soustraction x-3 8
* Multiplié par Multiplication x*2 22
/ Divisé par division x/2 5,5
% Modulo reste par la division de x%5 1
= A la valeur Affectation x=5 5
155
2- Les opérateurs de comparaison
Signe Nom Exemple Résultat

== Egal x ==11 True
< Inférieur x<3 False
<= Inférieur ou Egal x<=11 True
> Supérieur x >11 False
>= Supérieur ou Egal x>=11 True
3- Les opérateurs associatifs

Ce sont les opérateurs qui réalisent un calcul dans lequel une vari-
able intervient des deux côtés du signe = (ce sont donc en quelque sorte
également des opérateurs d’attribution).
Dans les exemples suivants x vaut toujours 11 et y aura comme
valeur 5.
Signe Nom Signification Exemple Résultat

+= Plus égal x=x+y x+=y 16
-= Moins égal x=x-y x- = y 6
* Multiplié égal x=x*y x*=y 55
/ Divisé égal x=x/y x /= y 2.2
4- Les opérateurs logiques

Aussi appelés opérateurs booléens, ces opérateurs servent à véri-
fier deux ou plusieurs conditions.
Signe Nom Exemple

&& ET (Condition 1) && (Condition 2)
|| OU (Condition 1) || (Condition 2)
! NON ! Condition
5- Les opérateurs d’incrémentation

Ces opérateurs vont augmenter ou diminuer la valeur de la varia-
ble d’une unité. Ce qui sera fort utile, par exemple, pour mettre en place
des boucles. Dans les exemples x vaut initialement 3.
Signe Nom Exemple Résultat

x++, ++ x Incrémentation y = x++; y=3 et x=4
(x++ est le même que z = ++x; z=5 et x=5
x=x+1)
x-- , -- x Décrémentation y = x--; y=3 et x=2
(x-- est le même que x=x- z = --x; z=1 et x=1
1)
156
VI- LES ENTREES/SORTIES EN JAVASCRIPT
Créez un fichier HTML nommé tpjs7.html permettant d’échanger deux
entiers donnés a et b.
Solution
<HTML>
<HEAD><TITLE>entrée sortie</TITLE></HEAD>
<BODY>
<script language=”javascript”>
var a= Number(window.prompt(“a = “,””));
var b= Number(window.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>
</HTML>
J’apprends /cours
Dans le langage JavaScript, les opérations d’Entrées/Sorties sont

effectuées comme suit :
♦♦ L’entrée (lecture) : elle est faisable soit avec la méthode prompt de
l’objet window, soit à l’aide d’objets graphiques du formulaire HTML.
♦♦ La sortie : elle 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
graphiques du formulaire HTML.
♦♦
Syntaxes :
L’entrée :
nom_variable = prompt(“texte de la boite d’invite”,”valeur par défaut”) ;
La sortie :
document.write(“message” + nom_variable) ;
Alert(“message” + nom_variable) ;
Exemples
A=prompt(“Donner votre age “,””) ;
document.write(“Votre moyenne en TI est = “+M) ;
alert(“Votre moyenne en TI est = “+M) ;
N.B : Les Entrées/Sorties à l’aide des objets graphiques des formu-

laires seront traitées ultérieurement.
157
VII- LES STRUCTURES DE CONTROLE

1- Les structures conditionnelles
a- La structure IF
1- Créez le fichier tpjs8.html, dans votre répertoire de travail et
dont le contenu est donné ci-dessous :
<HTML>
<HEAD>
<TITLE>la structure IF</TITLE>
</HEAD>
<BODY>
var a= window.prompt(“Entrez un premier entier :”,””);
var b= window.prompt(“Entrez un deuxième entier :”,””);
var c= window.prompt(“Entrez un troisième entier :”,””);
if (Number(a)>Number(b)) m=a; else m=b;
if (Number(c)>Number(m)) m=c;
alert(“le maximum de “+a +” , “+b +” et “+c +” est = “+m);
</script>
</BODY>
</HTML>
2- Déduisez le rôle du script
J’apprends /cours
Dans ce script, on trouve deux structures conditionnelles simples
; l’une est réduite et l’autre est complète qui s’appliquent avec les syn-
taxes suivantes :
La forme réduite :
if (condition vraie)
{une ou plusieurs instructions;}

La forme complète :
if (condition vraie)
{instructions1;}
else
{instructions2;}
Remarque
♦♦ Dans le cas ou il n’y a qu’une instruction, les accolades sont
facultatives.
♦♦ Il est possible d’imbriquer des structures conditionnelles (la
forme généralisée)
158
♦♦ Une autre syntaxe pour exprimer une condition :

(expression) ? instruction1 : instruction2
Si l’expression entre parenthèse est vraie, l’instruction1 est exécu-
tée.
Si l’expression entre parenthèses est fausse, c’est l’instruction2 qui
est exécutée.
Je pratique
Réécrivez ce même script en utilisant la structure conditionnelle
généralisée.
Solution
<HTML>
<HEAD>
<TITLE>Structure généralisée</TITLE></HEAD>
<BODY>
<script language=”JavaScript”>
var a= window.prompt(“Entrez un entier :”,””);
var b= window.prompt(“Entrez un autre entier :”,””);
var c= window.prompt(“Entrez un dernier entier :”,””);
if ((Number(a)>Number(b)) && (Number(a)>Number(c))) m=a;else
if ((Number(b)>Number(a)) && (Number(b)>Number(c))) m=b;else m=c;
alert(“le maximum de “+a +” , “+b +” et “+c +” est = “+m);
</script>
</BODY>
</HTML>
b- La structure SWITCH
Dans votre répertoire de travail, créez un fichier HTML nommé tpjs9.
html, qui comporte un script permettant de lire le numéro d’un mois
et la valeur d’une année puis de déterminer le nombre de jours de ce
mois ; (sans utiliser la structure conditionnelle généralisée).
<HTML>
<HEAD>
<TITLE>Switch</TITLE>
</HEAD>
<BODY>
var m= window.prompt(“Entrez le numéro du mois :”,””);
var a= window.prompt(“Entrez la valeur d’année “,”20”)
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;
}
alert(“le nombre des jours du mois n° “ + m +” est = “ +j);
</script>
</BODY>
</HTML>
159
J’apprends /cours
Dans le script on utilise une structure permettant d’exécuter un bloc

d’instructions selon l’appartenance du résultat d’une expression à un
domaine : c’est la structure switch qui s’applique avec la syntaxe suiv-
ante :
switch(expression)
{
case v1:
Bloc1;
break ;
case v2 :
Bloc2;
break;.....
default :
Bloc_n;
break;}
Remarque
♦♦ L’instruction 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écu-
té.
♦♦ La clause default (Bloc_n) est facultative.
2- Les structures itératives

a- La structure For
html comportant un script 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

La somme des diviseurs de 6 (sauf 6) est 1+2+3= 6, donc 6 est un
nombre parfait.
Solution
160
<HTML>
<HEAD>
<TITLE>La structure FOR</TITLE>
</HEAD>
<BODY>
<script Language=”javascript”>
for(n=2; n<=1000; n++)
{
s=1;
for(i=2 ;i<=n/2; i++)
if(n%i==0) s+=i;
if (s==n) document.write (n+”<br>”);
}
</script>
</BODY>
</HTML>
J’apprends /cours
Dans le fichier tpjs10.html, on a besoin d’utiliser une structure qui

permet de répéter l’exécution d’un bloc d’instructions un certain nom-
bre de fois connu d’avance ; c’est la structure for qui s’applique avec
la syntaxe suivante :
switch(expression)
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 +/-1)
b- La structure DO ...WHILE
html, comportant un script permettant d’afficher tous les nombres
premiers compris entre deux entiers a et b (a>1 et a < b et b< 1001).
Sachant qu’un nombre N est dit premier, s’il n’est divisible que par 1
et par lui même.
Solution
<HTML>
<HEAD><TITLE>La structure DO</TITLE></HEAD>
<BODY>
161
var a , b;
do{
a=prompt(“donner un entier”,””);
b=prompt(“donner un autre entier”,””);
x=Number(a);
y=Number(b);
} while(x<2 ||x>=y ||y>=1000);
for(n=x;n<=y;n++)
{i=1;
do{
i=i+1;
} while(n%i!=0 && i<=n/2);
if (i>n/2) document.writeln(n);}
</script>
</BODY>
</HTML>
case “2”: if (a%4==0) j=29; else j=28;
}
alert(“le nombre des jours du mois n° “ + m +” est = “ +j);
</script>
</BODY>
</HTML>
J’apprends /cours
Dans cette activité, on a besoin d’une structure itérative permettant de

répéter l’exécution des instructions tant que la condition est vérifiée ;
c’est la structure do... while qui s’applique avec la syntaxe suivante :
do
{
instructions
} while (condition(s))
Remarque
L’équivalent en langage Pascal de la structure do...while 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é).
c. La structure WHILE
html qui comporte un script permettant de calculer le PGCD de deux
entiers donnés a et b, tels que (a>1 et b>1), en utilisant la méthode
des différences.
162
Solution
<HTML>
<HEAD><<TITLE> La structure while </TITLE>
</HEAD>
<BODY>
var a , b;
do
{
a=prompt(“donner un entier”,””);
b=prompt(“donner un autre entier”,””);
x=Number(a);
y=Number(b);
} while(x<1||y<1);
while (x!=y)
if (x>y)
x-=y;
else
y-=x;
alert(“le pgcd de “+a+” et “+b+” est = “ + x);
</script>
</BODY>
</HTML>
J’apprends /cours
Dans le script on a utilisé une structure itérative caractérisée par un

nombre de répétitions inconnu d’avance et peut être au moins égal à 0
(lorsque A=B) ; c’est la structure while, qui s’applique avec la syntaxe
suivante :
while (condition(s))
{
instructions
}
Je pratique
1. Donner la syntaxee de la structure condition IF
2. Donner la syntaxe des structures itératives FOR, DO.. WHILE
3. Ecrire un Script qui permet de récuperer 10 nombres réel et

donne la somme et la moyenne de ces nombres en utilisant les bou-
cles suivantes :
a- FOR
b- DO.. WHILE
c- WHILE...
163
VIII- LES FONCTIONS EN JAVASCRIPT
1- Ouvrez le fichier tpjs13.html, se trouvant dans votre réper-
toire de travail et dont le contenu est donné ci-dessous
2- Déduisez le rôle de ce script.
<HTML>
<HEAD>
<TITLE>Les fonction en JavaScript </TITLE>
</HEAD>
<BODY>
function pgcd(a,b)
{
while (a!=b)
{
if (a>b) a-=b;else b-=a;
}
return a;
}
var n , m;
do
{
n=prompt(“donnez un entier”,””);
m=prompt(“donnez un autre entier”,””);
} while(n<1||m<1);
var k=pgcd(n,m);
document.write(“le PGCD de “+n+” et “+m+” = “+k);
</script>
</BODY>
</HTML>
J’apprends /cours
♦♦ La définition de la fonction est faite dans la partie entête, son appel

est fait dans la partie corps
♦♦ En JavaScript, il existe deux types de fonctions :
- Les fonctions prédéfinies en JavaScript; on les appelle “méth-
odes”. Elles sont associées à un objet bien particulier comme c’était le
cas de la méthode Alert() avec l’objet window.
- Les fonctions déclarées par le programmeur selon les besoins
de l’application.
♦♦ Pour déclarer ou définir une fonction, on utilise la syntaxe suiv-
ante :
function nom_de_la_fonction(arguments)
{... code des instructions ...
[ return nomvaraible]
}
164
♦ ♦ Appel de fonction

Pour exécuter une fonction, il suffit de faire appel à elle en écrivant son
nom (une fois de plus en respectant la casse) suivie d’une parenthèse
ouverte (éventuellement des arguments) puis d’une parenthèse fermée:
Nom_De_La_Fonction();
Remarque
♦♦ le mot clé function est suivi du nom que l’on donne à la fonction
♦♦ le nom de la fonction suit les mêmes règles que les noms de vari-
ables :
♦♦ le nom doit commencer par une lettre
♦♦ un nom de fonction peut comporter des lettres, des chiffres et les
caractères _ et & (les espaces ne sont pas autorisés!)
♦♦ le nom de la fonction, comme celui des variables est sensible à la
casse (différenciation entre les minuscules et majuscules)
♦♦ Il ne faut pas oublier de refermer les accolades
♦♦ Le nombre d’accolades ouvertes (fonction, boucles et autres
structures) doit être égal au
♦♦ nombre de parenthèses fermées!
♦♦ La même chose s’applique pour les parenthèses, les crochets ou
les guillemets!
♦♦ 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.
♦♦ Une variable déclarée dans une fonction par le mot clé var aura
une portée limitée à cette fonction contrairement à une variable dé-
clarée contextuellement (sans utiliser le mot var), qui aura une por-
tée globale.
♦♦ Il est possible de définir des fonctions sans l’utilisation de la
clause return (sans retour) : on retrouve ainsi l’équivalent d’une
procédure.
♦♦ Il est possible de déclarer une fonction dans la partie entête de la
page Web ; C’est-à-dire entre <HEAD> et </ HEAD>.
Je pratique
En vous servant du même script, écrivez une fonction qui calcule :
1. Le produit de deux variables
2. La somme de deux variables
165
IX- LA GESTION DES EVENEMENTS EN JAVASCRIPT

Le JavaScript offre la possibilité d’utiliser plusieurs événements,
contrairement au HTML qui se contente de l’unique évènement clic.
La programmation des événements se fait par l’association à chaque
événement une action à travers la syntaxe suivante :
< nombalise OnEvénement =”fonction()”>
Où OnEvénement représente un attribut, associé à une balise HTML
(nombalise), destiné à la gestion des événements.
1- onclick
1- Créez un fichier tpjs14.html, permettant de calculer le cube d’un
entier saisi dans une zone de texte en cliquant sur un bouton ou un
lien hypertexte, conformément à l’imprime écran ci-dessous :
Figure 4-3 Utilisation de l’événement OnClick

<HTML>
<HEAD>
<TITLE>On click</TITLE>
function cube()
{
var r=document.formulaire.saisie.value*
document.formulaire.saisie.value*document.formulaire.saisie.value;
alert(“Le cube de “ + document.formulaire.saisie.value + “ = “ + r);
}
</script>
</HEAD>
<BODY>
<FORM name=”formulaire” >
<INPUT type=”text” name=”saisie” size=”3” >
<INPUT type=”button” value=”Calculez le cube” onClick=”cube()”>
<A href=”#” onclick=”cube()”>Calculez le cube</A>
</FORM>
</BODY>
</HTML>
166
J’apprends /cours
♦♦ Lorsqu’on clique sur le bouton calculer le cube il s’affichera le

cube du nombre existant dans la zone de saisie; donc on peut exé-
cuter la fonction cube à l’aide d’un clic (l’événement Onclick)
♦♦ L’événement Onclick peut être utlisé avec les boutons (<INPUT
type=”button”>), et les liens hypertextes (<A href>).
Remarque
Il est possible de programmer l’événement OnClick avec les objets
de types :
- Case à cocher (<INPUT type = “checkbox”>),
- Case d’options (<INPUT type = “radio”>) et
- Zone de liste (<SELECT>).
2. OnFocus
L’événement onFocus survient lorsqu’un champ de saisie est
prêt à recevoir ce que l’utilisateur à l’intention de taper au clavier
(c’est à dire quand la zone a le focus).
3. OnBlur
L’événement onBlur a lieu lorsqu’un champ de formulaire perd
le focus. Cela se produit quand l’utilisateur ayant terminé la saisie
qu’il effectuait dans une case, et clique en dehors du champ ou utilise
la touche “Tab” pour passer à un autre champ.
1- Créez un fichier tpjs15.html, composé de deux zones de saisie, et
offrant les fonctionnalités suivantes:
- Lorsque le curseur se trouve dans la première zone le message : Sai-
sissez votre nom et prénom est affiché dans la barre d’état.
- Lorsque le curseur quitte la première zone : le contenu de la barre
d’état se transforme en *** et le texte saisi est mis en majuscule.
-
Au fur etb-à La
mesure que leDO
structure texte est saisi dans la première zone, la
...WHILE
deuxième zone indique le nombre de caractères tapés.
167
Figure 4-4 Utilisation des événements OnFocus, OnChange, OnKeyUp et OnBlur
<HTML>
<HEAD><TITLE> onfocus***onchange***onblur***onkeyup</TITLE>
function majuscule()
{
np=document.f1.znp.value;
npmaj =np.toUpperCase();
document.f1.znp.value=npmaj;
}
function affbarre(msg)
{ window.status=msg; }
function longueur()
{
document.f1.nc.value=np.length+1;
}
</script>
</HEAD>
<BODY>
<FORM name=”f1”>
NOM ET PRENOM : <INPUT type=”text” name=”znp” OnFocus=”affbarre(‘Saisissez
votre nom et prénom’)” onchange=”majuscule()” onblur=”affbarre(‘***’)”
onkeyup=”longueur()”>
Nombre de caractères tapés :<INPUT type=”text” name=”nc” size=”3” value=”0”>
</FORM>
</BODY>
</HTML>
Remarque
Les événements OnFocus et OnBlur s’utilisent aussi avec les balises
:
- <INPUT type =”checkbox”>,
- <INPUT type = “RADIO”>,
- <INPUT type =”button”>,
- <TEXTAREA> et
- <SELECT>
168
4. OnChange
L’évènement OnChange ressemble à l’événement OnBlur mais
avec une petite différence. Non seulement la zone de texte doit avoir
perdu le focus mais aussi son contenu doit avoir été modifié par
l’utilisateur.
Remarque
L’événement OnChange s’utilise aussi avec les balises
- <TEXTAREA> et
- <SELECT>.
5. OnKeyUP
L’évènement OnKeyUp est déclenché au cours de la saisi d’une
zone de de texte lorsque l’utilisateur relâche une touche.
Remarque
L’événement OnKeyUp s’utilise aussi avec la balise <TEXTAREA>.
6. OnLoad et onUnLoad
L’événement OnLoad survient lorsque la page a fini de se char-
ger. A l’inverse, OnUnLoad survient lorsque l’utilisateur quitte la
page.
Remarque
Les événements onLoad et onUnload sont utilisés sous forme
d’attributs de la balise <BODY> ou <FRAMESET>.
7. OnMouseOver et OnMouseOut
L’événement OnMouseOver se produit lorsque le pointeur de la
souris passe au dessus d’un lien ou d’une image sans cliquer.
Remarque
L’événement OnMouseOut, généralement associé à un OnMouseOver,
se produit lorsque le pointeur quitte la zone sensible (lien ou image).
169
1- Créez un fichier tpjs16.html, composé d’une image (e1.gif) et un
objet texte(MANUEL TIC) avec les fonctionnalités suivantes :
- Au chargement de la page un message de bienvenue est affiché, de
même un message d’au revoir est affiché lorsqu’on la quitte.
- Deux messages sont affichés lorsqu’on survole et on quitte le lien
hypertexte
(MANUEL TIC)
- Lorsque l’image e1.gif est survolée, elle est remplacée par une autre
image e2.gif.
Figure 4-5 Utilisation des événements OnLoad, OnUnLoad, OnMouseOver et OnMouseOut
Solution
<HTML>
<HEAD>
<SCRIPT LANGUAGE=’Javascript’>
function bienvenue()
{alert(“Bienvenue à cette page”);}
function au_revoir()
{alert(“Au revoir”);}
function activer()
{document.images[“img1”].src=”E2.gif”;}
function desactiver()
{document.images[“img1”].src=” E1.gif”;}
</SCRIPT>
<BODY OnLoad=”bienvenue();” OnUnload=”au_revoir();”>
<A href =”#” OnMouseOver=”activer();” OnMouseOut =”desactiver();”>
<IMG src =”E1.gif” name=”img1” width=100 height=50 border=0>
</A>
<P><A href =”#” OnMouseOver=”alert(‘BONNE CHANCE’)”
OnMouseOut=”alert(‘BON TRAVAIL’)”>MANUEL TIC</A>
</P>
</BODY>
</HTML>
170
X- LES FORMULAIRES EN JAVASCRIPT

Il est question dans cette partie d’appliquer à un formulaire vu en
HTML les évènements qui vont le rendre interactif
1- Le contrôle zone de texte
On veut créer un fichier HTML nommé tpjs17.html comportant un
script qui permet de lire un entier dans une zone de saisie puis
d’afficher son carré dans une autre zone.
Solution
<HTML>
<HEAD>
<TITLE> zone de saisie</TITLE>
<SCRIPT language =”JavaScript”>
function afficher()
{
var N =document. f2.input.value;
document.f2.output.value =N*N;
}
</SCRIPT>
</HEAD>
<BODY>
<FORM name =”f2”>
L’entier donné :
<INPUT type =”text” name =”input” value =”” >
<BR> <BR>
<INPUT type =”button” name =”bouton” value =”Calculer le carré”
onClick=”afficher()”>
<BR>
<BR>
L’entier résultat : <INPUT type =”text” name =”output” value =”” >
</FORM>
</BODY>
</HTML>
J’apprends /cours
♦♦ On peut affecter le contenu d’une zone de saisie à une variable à

l’aide de la syntaxe suivante :
Nomvariable= document.nomformulaire.nomzonedesaisie.value ;
♦♦ Comme on peut modifier la valeur d’une zone de saisie avec la syn-
taxe suivante :
document.nomformulaire.nomzonedesaisie.value=expression ;
Avec : nomformulaire : le nom du formulaire (l’attribut name de
<FORM>)
171
nomzonedesaisie : le nom d’une zone de texte ( l’attribut name

de <INPUT type = “text”>
Remarque
Les objets zones de texte cryptées (<INPUT type = “PASSWORD”
>) et zones de texte multi lignes (<TEXTEREA >) sont traitées en
JavaScript de la même façon que les zones de saisie (<INPUT type
= “text” >)
2- Les boutons radio
Réalisez un fichier HTML nommé tpjs18.html qui comporte un script
JavaScript permettant de donner en entrée le signe du discriminant
d’une équation de second degré pour afficher le nombre de solutions
possibles.
Solution
<HTML>
<HEAD>
<TITLE>Bouton radio</TITLE>
<SCRIPT language=”JavaScript”>
function choisir()
{
if (document.f3.choix[0].checked)
{alert(“Il y a : “ + document.f3.choix[0].value+” solutions”) };
{alert(“Il y a :” + document.f3.choix[1].value+” solution”) };
{alert(“Il y a : “ + document.f3.choix[2].value+” solution”) };
}
</SCRIPT>
</HEAD>
<BODY>
<H3>Le signe du descriminant d’une équation de second degré</H3>
<FORM NAME=”f3”>
<INPUT TYPE=”radio” NAME=”choix” VALUE=”2”>Strictement positif<BR>
<INPUT TYPE=”radio” NAME=”choix” VALUE=”1”>Nul<BR>
<INPUT TYPE=”radio” NAME=”choix” VALUE=”0”>Strictement Négatif<BR>
<INPUT TYPE=”button”NAME=”but” VALUE=”Le nombre des solutions réelles?”
onClick=”choisir()”>
</FORM>
</BODY>
</HTML>
172
J’apprends /cours
♦♦ Pour vérifier l’état d’une case d’option (cochée ou non), on utilise

la propriété checked qu’on peut affecter à une variable booléenne, à
l’aide de la syntaxe suivante :
nomvariable = document.nomf.nomcase[indice].checked
♦♦ On peut récupérer la valeur d’un bouton radio à l’aide de la pro-
priété value, en utilisant la syntaxe suivante :
nomvariable = document.nomf.nomcase[indice].value
♦♦ On peut récupérer le nombre d’option dans un groupe de cases
d’options à l’aide de la propriété length, en utilisant la syntaxe suiv-
ante :
nomvariable = document.nomf.nomcase.length
avec :
- nomf : le nom du formulaire
- nomcase : le nom du groupe cases d’options
- indice : l’indice de la case au niveau du groupe.
Remarque
●● Les boutons radio sont utilisés pour sélectionner un seul choix,
parmi un ensemble de propositions.
●● L’indice des boutons radio commence à partir de la valeur 0.
3- Les boutons case à cocher (checkbox)
Réalisez un fichier HTML nommé tpjs19.html qui comporte un script
JavaScript permettant à un utilisateur de sélectionner les nombres
premiers parmi la liste des nombres suivants : 209, 223, 517, 647,
751.
Solution
<HTML>
<HEAD>
<TITLE>Checkbox</TITLE>
function reponse()
{
if ((document.f4.check1.checked) == false &&
(document.f4.check2.checked) == true &&
(document.f4.check3.checked) == false &&
173
(document.f4.check4.checked) == true &&

document.f4.check5.checked)==true)
{ alert(“C’est la bonne réponse! “)
}
else
{alert(“Désolé, continuez à chercher.”)}
}
</SCRIPT>
</HEAD>
<BODY>
<h3>Quels sont les nombres premiers parmi ces cinq entiers:</h3>
<FORM name=”f4”>
<INPUT type =”checkbox” name =”check1” value =”1”>209 : <BR>
<INPUT type =”checkbox” name=”check2” value =”2”>223 : <BR>
<INPUT type =”button” name =”but” value =”Rèponse” onClick=”reponse()”>
</FORM>
</BODY>
</HTML>
J’apprends /cours
♦♦ Contrairement aux boutons radio, les cases à cocher sont utilisées

pour sélectionner un ou plusieurs choix
♦♦ Pour vérifier si une case est cochée ou non, on utilise syntaxe :
nomvariable = document.nomf.nomcase.checked
♦♦ Pour récupérer la valeur d’une case à cocher, on utilise syntaxe :
nomvariable = document.nomf.nomcase.length
avec :
- nomf : le nom du formulaire
- nomcase : le nom de la case à cocher d’options
4 - Liste de sélection
Réalisez un fichier HTML nommé tpjs20.html qui comporte un
script JavaScript permettant de créer un carnet d’adresses Email au
format Web. Pour se faire, on utilisera 3 boutons, permettant respec-
tivement l’ajout, la suppression et la recherche d’un contact, con-
formément à l’imprime écran suivant :
174
Figure 4-6 : Un carnet d’adresse E-mail en JavaScript

Solution
<HTML>
<HEAD>
<TITLE>CARNET D’ADRESSES</TITLE>
<script language = “javascript”>
function ajout()
{
adr=document.f1.znp.value;
var taille = document.f1.carnet.options.length;
var nouveau = true;
if (taille != 0){
for (i = 0; i < taille; i++){
elt = document.f1.carnet.options[i].text;
if (elt == np) {
nouveau = false;
alert(“contact déjà existant”);
break;
}
}
}
if (nouveau)
{
nelt= new Option(np, adr);
document.f1.carnet.options[taille] = nelt;
}
}
//*****************************************
function sup()
{
sel=document.f1.carnet.options.selectedIndex;
if (sel == -1)
alert(“veuillez sélectionner un élément SVP”);
else { document.f1.carnet.options[sel] = null; }
}
//*****************************************
175
function adr()
{
sel=document.f1.carnet.options.selectedIndex;
if (sel == -1)
alert(“veuillez sélectionner un élément SVP “);
else {
np=document.f1.carnet.options[sel].text;
adr=document.f1.carnet.options[sel].value;
alert(“L’adresse mail de “ + np + “ est :”+adr);
}
}
</SCRIPT>
</HEAD>
<BODY>
<DIV align=”center”>
<FONT face=”Arial” color=”#3333FF” size=”4”>CARNET D’ADRESSES </FONT>
</DIV>
<FORM name =”f1” >
Nom et Prénom :<input name=”znp” type=”text” >
<BR>Adresse E-mail :<input name=”zadr” type=”text” >
<TABLE> <TR>
<TD> <INPUT type=”button” onClick=”ajout()” value=”Ajouter”></TD>
<TD> <INPUT type=”button” onClick=”sup()” value=”Supprimer”></TD>
<TD> <INPUT type=”button” onClick=”adr()” value=”Retrouver Adresse mail”></TD>
</TR></TABLE>
<SELECT name=”carnet” size=”5”> </SELECT>
</FORM>
</BODY>
</HTML>
J’apprends /cours
♦♦ En JavaScript, la gestion des listes déroulantes se fait à travers

un objet options (un tableau contenant les différents éléments de la
liste).On y accède à travers la syntaxe : document.nomf.nomliste.op-
tions avec :
- nomf : le nom du formulaire ( l’attribut name de <FORM>)
- nomliste : le nom de la liste déroulante ( l’attribut name de
<SELECT>)
♦♦ Les propriétés JavaScript de l’objet options sont :
- length : retourne le nombre d’éléments d’une liste déroulante.
- selectedIndex : permet de retourner l’indice de l’élément sélec-
tionné dans une liste déroulante à sélection unique.
NB1 : L’indice d’une liste déroulante commence à partir de 0.
NB2 : Pour une liste déroulante à sélection multiple, selectedIndex
retourne l’indice, uniquement, du premier élément sélectionné. Dans
de tel cas, il serait plus judicieux d’utiliser les propriétés des éléments
de l’objet options.
♦♦ Les propriétés JavaScript des éléments d’un objet options sont :
- selected : renvoie true si l’option est sélectionnée, false sinon.
176
- text : renvoie le texte de l’élément sélectionné.

- 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.nomf.nomliste.options[taille] = nomvariable;
avec :
- nomf : le nom du formulaire.
- nomliste : le nom de la liste déroulante.
- 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.
♦♦ La suppression d’une option, se fait à travers la syntaxe :
document. nomf.nomliste.options[i] = null;
avec :
- nomf : le nom du formulaire.
- nomliste : le nom de la liste déroulante.
- i : la position de l’élément à supprimer de la liste.
Je pratique
Créez un fichier HTML qui permet de remplir un formulaire par le
nom, le prénom, l’adresse Email, l’âge et les deux boutons de confir-
mation et d’annulation, le contrôle de la saisie est obligatoire :
- Le nom, le prénom : doivent être non vide.
- L’adresse Email doit être non vide et comportant le caractère @
- L’âge doit être un nombre >0
La validation doit appeler le fichier “sauvegarder.HTML” (existant
dans le même répértoire que le formulaire), qui affichera le message “
Merci pour votre visite”.
Indice:
function verif_f() if(chkZ == -1) { alert(“Cette infor-
{ if(document.f.nom.value == “”) { mation n’est pas un nombre!”);
alert(“Veuillez entrer votre nom!”); return false; }}
return false;}
if(document.f.prénom.value == “”) {
alert(“Veuillez entrer votre prénom!”);
return false; }
if(document.f.courriel.value == “”) {
alert(“Veuillez entrer votre adresse électronique!”);
return false; }
if(document.f.courriel.value.indexOf(‘@’) == -1) {
alert(“Ce n’est pas une adresse électronique!”);
return false; }
var chkZ = 1;
for(i=0;i<document.f.age.value.length;++i)
if(document.f.age.value.charAt(i) < “0”
|| document.f.age.value.charAt(i) > “9”)
chkZ = -1;
177
XI- LES COOKIES

1. A quoi servent les cookies ?
Dans certains supermarchés, pour fidéliser leurs clients les ges-
tionnaires ont mis sur pied une carte de fidélité qui permet d’identifier
les meilleurs clients de leur supermarché.
Grace à cette carte, les gestionnaires peuvent identifier si un cli-
ent précis est un client fidèle ou non.
J’apprends /cours
Les cookies sont très utilisés, par tous les sites commerciaux et
par de plus en plus de sites personnels. La raison est simple. Un cookie
permet de stocker de manière permanente des informations sur le poste
du visiteur, informations qui pourront être récupérées lors des futures
visites.
Un cookie est un petit fichier très simple, enregistré sur le disque
dur de l’ordinateur d’un internaute à la demande du serveur gérant le
site Web visité. Il contient des informations sur la navigation effectuée
sur les pages de ce site. L’idée originelle est de faciliter l’utilisation ulté-
rieure du site par la même personne. Il sert à reprendre les préférences
choisies par un utilisateur lors de la visite.
Remarque
Voyons quelques unes des principales informations stock-
ées dans les cookies :
Le nombre de visites, la date de la dernière visite,...
Un identifiant et un mot de passe pour une reconnaissance au-
tomatique du visiteur
Une liste de mots-clés utilisés dans les moteurs de recherche
pour cibler les publicités à afficher
Une liste de paramètres de préférences de navigation pour per-
sonnaliser la page présentée.
Des informations à transférer d’une page à l’autre du site.
178
2. Comment STOCKER des informations ?

Le type d’informations à stocker n’a aucune influence sur le
code.
Voici la fonction qui permet de stocker une information dans un
cookie
function SetCookie (name, value)
{
var argv=SetCookie.arguments;
var argc=SetCookie.arguments.length;
var expires=(argc > 2) ? argv[2] : null;
var path=(argc > 3) ? argv[3] : null;
var domain=(argc > 4) ? argv[4] : null;
var secure=(argc > 5) ? argv[5] : false;
document.cookie=name+”=”+escape(value)+((expires==null)? “” : (“;
expires=”+expires.toGMTString()))+ ((path==null) ? “” : (“; path=”+path))+
((domain==null) ? “” : (“; domain=”+domain))+ ((secure==true) ? “; secure” :
“”);
}
La valeur à stocker est associée à un nom de cookie.
La date d’expiration permet de définir la longévité du cookie.
Si elle est omise, le cookie est détruit à la fermeture du navigateur.
Le path indique simplement d’où vient le cookie.
Le nom de domaine permet d’identifier le cookie parmi tous
ceux stockés sur la machine.
La variable secure indique si l’accès au cookie est protégé.
Exemple : Pour stocker la valeur Arthur dans la variable prenom il

suffit d’appeler la fonction comme ceci :
var pathname=location.pathname;
var myDomain=pathname.substring(0,pathname.lastIndex-
Of(‘/’)) +’/’;
var date_exp = new Date();
date_exp.setTime(date_exp.getTime()+(365*24*3600*1000));
// Ici on définit une durée de vie de 365 jours
SetCookie(“prenom”,”Arthur”,date_exp,myDomain);
179
Résumé
♦JavaScript
♦ est un langage de programmation côté client permet-
tant d’améliorer l’interactivité des pages Web, en faisant recours à
des structures de contrôle et des évènements.
♦Les
♦ programmes en JavaScript sont notés directement dans le
fichier HTML ou dans des fichiers séparés. Ils sont interprétés en
temps réel par le navigateur Web.
♦Un
♦ script peut être inclu de plusieurs façon dans une page HTML:
●●Grâce à la balise <SCRIPT>
●●En mettant le code dans un fichier
●●Grâce aux événements
♦♦ Le script d’une fonction est souvent défini dans l’entête entre les
balises <HEAD> et </HEAD>.
♦♦ Le langage Javascript divise une page Web en objets, et pour
chaque objet il y a des propriétés et des méthodes.
♦♦ Contrairement au langage HTML ; JavaScript offre la possibilité
d’utiliser plusieurs événements.
♦♦ La programmation des événements se fait à travers l’utilisation
d’attributs, désignant des évènements, au niveau des balises HTML.
♦♦ JavaScript est doté de toutes les ressources nécessaires pour gé-
rer les différents objets graphiques des formulaires HTML.
♦♦ Un cookie est un fichier de texte qui contient une chaîne de cara-
ctères contenant les informations concaténées.
♦♦ Il ne faut pas confondre les balises de commentaires du langage
HTML (destinées à masquer le script pour certains browsers) et les
caractères de commentaires Javascript (permettant de documenter
son script)!
180
Exercices
1 - Le langage JavaScript est un langage :

a- compilé par le serveur
b- compilé par le navigateur
c-interprété par le navigateur
2 - Pour intégrer du code JavaScript dans une page Web,

a- j’insère le code JavaScript via un éditeur de texte
b- j’ouvre ma page Web avec un navigateur
c- j’utilise nécessairement un traitement de texte
3 -Pour déclarer le début du code JavaScript, j’écris la ligne suivante :

a- function tralala()
b- <SCRIPT language=”javascript”>
c- <SCRIPT language=”javascript”/>
4 - L’écriture msg=”PREMIERE”; est :

a- une comparaison b- une affectation c- incorrecte
5 - L’écriture function demo() signifie :

a- cette écriture n’est pas correcte
b- déclarer une fonction dont le nom est demo.
c- déclarer une fonction dont le nom Remarque
est demo()
6 - L’écriture var msg = “Une introduction”; permet de :

a- initialiser ma variable msg
b- déclarer et initialiser la variable msg
c- déclarer et initialiser la variable var
7 - L’écriture ind++; désigne :

a- une pré-incrémentation
b- une post-incrémentation
c- cette écriture n’est pas correcte
8 - L’écriture document.write(“<B>”+”Programmation”+”</B>”); per-

met d’écrire dans la :
a- barre d’état du navigateur
b- page courante le mot Programmation en caractères gras
c- page courante le mot Programmation encadré par deux B
181
9 - L’écriture document.write(12*3); permet d’écrire :

a- 12*3 dans la page courante
b- 12 fois le chiffre 3
c- la valeur 36 dans la page courante
10 - Pour déclarer une fonction personnalisée, j’utilise le mot :

a- Fonction b- Function c- Sub_function
11 - J’ai créé une fonction personnalisée nommée ristourne, utilisant

un seul argument.
Pour utiliser cette fonction dans une page Web, pour la valeur 5000,
j’écris :
a- document.write(function ristourne(5000));
b- document.write(ristourne(5000));
c- ristourne(5000);
12 - L’écriture var msg ; permet de :

a- initialiser la variable msg
b- déclarer la variable msg
c- déclarer la variable var
13 - J’ai créé une fonction dans une page Web donnée. Je souhaite
exploiter cette fonction dans une autre page Web.
Pour résoudre le problème rapidement, je peux :
a- retaper le code de la fonction
b- couper le code de la première page et le coller dans l’autre page
c- copier le code de la première page et le coller dans l’autre page
14 - Dans l’écriture while (lafin==false), indique que le traitement est

répété :
a- au moins une fois
b- tant que la variable lafin vaut false
c- tant que la variable lafin vaut true
15 - Dans l’écriture for (ind = 1; ind<=max;ind++), ind désigne :

a- une fonction
b- une variable initialisée à max
c- la variable compteur
16 - Dans l’écriture for (ind = 1; ind<=max;ind++), max désigne :

a- la valeur qui ne sera jamais atteinte
b- la dernière valeur qui sera exploitée par le contenu de for
c- une fonction
182
17 - Je souhaite tester la valeur de la variable code afin de voir si son

contenu est albatros. J’écris la ligne suivante :
a- if code=”albatros”
b- if (code=”albatros”)
c- if (code==”albatros”)
18 - Je souhaite vérifier si le contenu de la variable code est compris

entre 1 et 4, inclusivement (nbr. entier, déjà vérifié)
Pour y arriver, j’utilise l’écriture suivante :
a- If (code > 1 || code < 4) {
b- If (code >= 1 || code <= 4){
c- If (code >= 1 && code <= 4){
19 - La ligne var mois = new Array (“janvier”,”février”,”mars”); permet

de déclarer :
a- les variables janvier, février et mars
b- le tableau mois
c- le tableau mois et initialiser le tableau mois avec les mots janvier,
février et mars
20 - Soit la condition !(inf>=2 && sup <=3). Choisissez la forme qui a

la même signification :
a- (inf >=2 ||sup <=3)
b- (inf <2 ||sup > 3)
c- (inf <=2 && sup >= 3)
21 - Dans l’écriture Function mafonc (znom), znom désigne :

a- l’argument formel de la fonction
b- la valeur reçue par la fonction
c- le résultat renvoyé par la fonction
22 - A quoi sert la boucle suivante ?

for (cpt=1;cpt<6;cpt++){
}
a- écrire le contenu de cpt dans la page Web
b- compter de 1 à 5
c- compter de 1 à 6
23 - Dans l’écriture document.write (“Taille du tableau : “ + mois.

length + “<br>”); , length :
a- identifie une variable
b- désigne le nombre d’éléments du tableau mois
c- désigne le nombre d’éléments initialisés du tableau mois
183
24 - La structure suivante permet d’écrire...

for (cpt=1;cpt<=6;cpt++){
document.write(cpt);
}
a- 6 fois le mot cpt
b- les valeurs 1, 2, ..., 6 verticalement
c- les valeurs 1, 2, ..., 6 horizontalement
25 - L’instruction var resul=new Array(10); définit un tableau de :

a- 11 éléments toujours du même type
b- 11 éléments (types quelconques)
c- 10 éléments
26 - L’écriture if (membre) signifie : si la variable membre vaut...

a- 1 Alors ...
b- une valeur numérique non nulle
c- quelque chose différent de undefined;
27- L’instruction var px = window.event.x; permet de :

a- connaître la position du point d’insertion
b- stocker la position du curseur
c- stocker la position en x du curseur de la souris
28- L’instruction on_off = ref1 == ref2; affecte à la variable on_off la

valeur : (ref1 vaut 3 et ref2 vaut 4)
a- -1 b- false c- true
29- L’écriture cpt = cpt - 1; signifie :

a- cette écriture n’est pas correcte
b- comparer cpt et cpt+1
c- décrémenter cpt de 1 unité
30- Soit l’écriture while( limite!=10). Elle signifie répéter tant que lim-
ite
a- est supérieure à 10
b- est différente de 10
c- n’est pas inférieure à 10
31 - La boucle for( ind = 1;ind<=10;ind=ind+3) permet d’affecter, dans

la boucle, à ind les valeurs suivantes :
a- 1, 2, 3, ..., 10
b- 1, 4, 7, 10, 13
c- 1, 4, 7, 10
184
Exercices
Exercice 1 :
Calcul d’une moyenne de 4 nombres : afficher les quatre valeurs sur
la page ainsi que le résultat
du calcul.
Exercice 2 :
Demander à l’utilisateur d’entrer dix noms via la méthode window.
prompt(), stocker ces valeurs
dans un tableau, afficher ce tableau sur la page, trier le tableau et af-
ficher sur la page le tableau
trié.
Exercice 3
Ecrire le code d’un fichier HTML, nommé calculatrice.html, permettant
de créer une calculatrice avec les 4 opérateurs de base et d’afficher le
résultat dans une boite d’information.
Prévoir les différentes routines de contrôle nécessaires au bon dé-

roulement du programme.
Exercice 4
1- Ecrire un script permettant de générer un tableau composé de 7
cellules avec les caractéristiques suivantes :
- Chaque cellule possède une couleur de fond, soit rouge ou bleu
d’une façon alternative, en commençant par le rouge.
- Le contenu de chaque cellule est la chaîne de caractères “TIC” écrite
dans chaque cellule avec une dimension de police différente allant de
1à 7.
2- Transformer ce script en une fonction à appeler entre <BODY> et
</BODY>.
185
Exercice 5
Vous disposez de 4 images avec les noms respectifs I1.jpg, I2.jpg,
I3.jpg et I4.jpg enregistrées dans le même répertoire.
On vous demande de donner le code d’un document HTML permet-
tant d’afficher les 4 images sous forme d’une matrice composée de 2
lignes et 2 colonnes (de gauche à droite, 1ère ligne : I1 I2, 2ème ligne:
I3,I4) puis de programmer les fonctionnalités suivantes :
- Si l’utilisateur passe le curseur au-dessus de l’image I1, vous rem-
placez l’image I2 par l’image I4. De même, si l’image I2 est survolée
par le curseur de la souris vous substituez l’image I1 par l’image I3.
- Si l’utilisateur clic sur l’image I3, une rotation à droite des diffé-
rentes images est effectuée (remplacer l’image I1 par I3, I2 par I1, I2
par I1, I4 par I2 et I3 par I4).
Exercice 6
On se propose de développer un formulaire HTML composé d’une zone
de texte, de trois objets liste déroulante et d’un bouton de type submit
conformément à l’imprime écran suivant :
1- La zone de texte sera crée avec du code HTML, alors que les trois
listes seront générées avec du code JavaScript, en utilisant trois vari-
ables à visibilité globale, qu’il faut déclarer au préalable, et qui con-
tiennent respectivement les numéros des jours d’un mois (de 1 à 31),
les mois de l’année (de Janvier à Décembre) et les années (de 1975
jusqu’ à cette année).
Donnez le code HTML et JavaScript permettant de trouver cette inter-
face.
NB1 : on vous demande d’avoir une programmation modulaire.
NB2 : un clic sur le bouton envoyer devra faire appel à un fichier, se
trouvant dans le même répertoire que le formulaire et ayant comme
nom sauvegarder.html.
186
Exercice 7
1- Ecrivez un programme JavaScript permettant d’ouvrir une fenêtre
du navigateur lorsqu’un bouton est activé. La fenêtre à ouvrir con-
tient un bouton permettant de la fermer lorsqu’on clique dessus.
2- Réécrivez le programme de la 1ère question, afin d’implémenter la

fonctionnalité suivante : sans intervention de l’utilisateur, la nouvelle
fenêtre se ferme de façon automatique après 4 secondes. En cliquant
sur le bouton, l’utilisateur interrompt prématurément le compteur et
ferme la fenêtre. Avec ce système, on est certain que la nouvelle fenê-
tre sera fermée.
Exercice 8
Reprenez le formulaire livre d’or de l’exercice numéro 4 de la partie
HTML, afin d’ y
ajouter une fonction JavaScript contrôle(), à appeler suite au clic sur
le bouton valider et permettant de vérifier la validité des données sai-
sies en appliquant les règles suivantes :
- Le champ nom et prénom est un champ à saisie obligatoire.
- Le champ nom et prénom ne doit pas commencer par un chiffre.
- Les propriétés genre, navigateur(s) utilisé(s) et remarques ou sug-
gestions doivent être définies.
- Pour la propriété pays, la 1ère valeur n’est pas valide.
La fonction contrôle() doit permettre de bloquer l’appel du fichier
valider.html en cas où une des règles de validité n’est pas vérifiée.
1- Donnez une 1ère version de la fonction contrôle()qui devra afficher
un message décrivant la 1ère erreur rencontrée.
2- Donnez une 2ème version de la fonction contrôle() qui doit afficher
un message récapitulatif de toutes les erreurs rencontrées.
Exercice 9
1- Ecrivez le code d’un fichier HTML, nommé album.html, permettant
de créer un album composé de huit photos timbres. Chaque clic sur
187
une image vignette ouvre une nouvelle fenêtre contenant la même im-
age agrandie. Cette dernière fenêtre se ferme automatiquement après
15 secondes.
NB1 : On suppose que toutes les images sont enregistrées dans un
répertoire nommé album photos, se trouvant dans le même répertoire
que le fichier album.html.
2- Ecrivez le code d’un fichier HTML, nommé défilement.html, per-
mettant de sauvegarder la liste des images du répertoire album pho-
tos dans un tableau JavaScript.
Les boutons suivant et précédent permettent respectivement de pas-
ser à l’image suivante et précédente dans la liste.
Remarque
188
Projet 1
REALISER ET PUBLIER UN SITE WEB
STATIQUE
La réalisation d’un site consite à la construction d’un site Web c’est-

à-dire créer le code HTML, y joindre les feuilles de styles pour la mise
en forme du site web et enfin intégrer le JavaScript enfin d’exécuter un
certain nombres de commandes. Quant à sa publication, il est question
de le rendre accéssible aux grands publics via le réseau Internet c’est-
à-dire le mettre dans une machine donc on aura l’accès de n’importe
quel endroit du globle terrestre à partir d’Internet.
La première étape a été developpée tout au long du module, il est
question ici de donner quelques éléments et concepts qui permettent
de rendre publique votre site web.
Compétences
• Réaliser un site Web statique
• Embellir les pages du site avec les objets d’enrichissement de
page Web
• Dessiner le diagramme de navigation du site
• Publier le site
Sommaire
STRUCTURE D’UN SITE........................................................191

NOM DE DOMAINE ET HEBERGEMENT DE SITE.......................193
ETUDE DE CAS.....................................................................196
190
STRUCTURE D’UN SITE WEB

Sans une structure fonctionnelle, votre site sera un échec même
si le contenu en est pertinent et bien rédigé.
“La chose la plus importante à considérer lorsqu’on prépare le design
d’un site Web, c’est la satisfaction des utilisateurs. La facilité avec
laquelle ils trouveront ce qu’ils recherchent déterminera la fréquence
avec laquelle ils reviendront sur le site. Eviter de frustrer les inter-
nautes est l’objectif principal du design. Et au bout du compte, savoir
structurer l’information qu’on présente est la base fondamentale d’une
expérience réussie sur le Web.” (Valérie Casey, professeur de Web De-
sign à l’Université de San Francisco)
Le but est de fournir à l’usager l’information qu’il souhaite en un
minimum d’étapes et donc un minimum de temps. Pour autant que
des normes strictes existent en la matière, on parle de la “règle des 3
clics” selon laquelle toute information de votre site doit être disponible
en maximum 3 clics de souris. Il faut donc hiérarchiser l’information
selon une structure efficiente pour minimiser la navigation vers
l’information.
Voici pour cela quelques exemples de modèles de diagramme de
navigation :
o Le modèle linéaire : il permet d’observer une logique de
suite du récit au classement alphabétique ou chronologique. Les pag-
es sont liées entre elles par des boutons « suivant » ou « précédent ».
o Le modèle hiérarchique : il consiste à appliquer une
démarche hiérarchique ou par menu ; la navigation y est intuitive,
l’utilisateur comprend bien la structuration du site car il est habitué
à ce genre d’organisation. Toutefois l’information doit être disponible
et clairement organisée.
o Le modèle en toile d’araignée : il s’agit ici d’un réseau de
documents peu ou pas structurés mais relié entre eux par des liens
hypertextes. Le navigateur peut ainsi aller d’un document à l’autre en
cheminant au hasard des liens car l’entrée peut se faire de n’importe
quel bout, il n’y a pas de vue d’ensemble.
1. Structure séquentielle
Le moyen le plus simple d’organiser l’information est la façon
séquentielle C’est en quelque sorte le retour au livre avec sa narration
linéaire : chapitre 1, chapitre 2, chapitre 3...
191
2. Structure hiérarchisée
La structure hiérarchisée est une des meilleures façons
d’organiser des blocs d’information complexes.
Ce schéma d’organisation s’adapte particulièrement bien au site
Web car les différents thèmes dépendent ainsi d’une seule et unique
page soit la page d’index ou page d’accueil [homepage]. En outre les
utilisateurs sont souvent familiarisés avec les diagrammes hiérar-
chisés comme les organigrammes et trouveront la métaphore facile-
ment compréhensible pour les aider dans leur navigation.
Cette organisation hiérarchisée en blocs d’information indépendants

nécessite cependant un gros travail d’analyse préalable de votre con-
tenu (notions pré-requises, doublons d’information...) car cette struc-
ture hiérarchisée ne sera efficiente que si vous avez soigneusement
organisé l’information disponible.
3. Structure en réseau
Ces mini Webs fonctionnent bien pour des petits sites destinés à
des utilisateurs hautement qualifiés en quête d’enrichissement ou de
perfectionnement plutôt qu’à la compréhension basique d’un sujet.
On travaillera ici les associations d’idées et le libre cours de la pen-
sée. Chaque visiteur parcourra votre site de façon unique selon ses
propres intérêts et sa propre démarche vers l’information sans avoir
l’impression d’être dirigé.
Ce type de structure exploite la pleine puissance des liens vers
des informations à l’intérieur du site et vers des informations située
dans d’autres sites Internets.
192
Cette structure en réseau se révèle cependant ardue à mettre en

place et finalement peu pratique surtout pour les internautes novices
dans le sujet traité. Ceux-ci auront alors l’idée d’un site confus, dif-
ficilement exploitable.
NOM DE DOMAINE ET HEBERGEMENT DE SITE
La réalisation d’un site consite à la construction d’un site Web
c’est-à-dire créer le code HTML, y joindre les feuilles de styles pour
la mise en forme du site web et enfin intégrer le JavaScript enfin
d’exécuter un certain nombres de commandes. Quant à sa publica-
tion, il est question de le rendre accéssible aux grands publics via le
réseau Internet c’est-à-dire le mettre dans une machine donc on aura
l’accès de n’importe quel endroit du globle terrestre à partir d’Internet.
La première étape a été developpée tout au long du module, il est
question ici de donner quelques éléments et concepts qui permettent
de rendre publique votre site web.
Prennons le cas de la discipline sportive que l’on pratique dans
tous les établissements, dans chaque établissement il existe les équi-
pements pour pratiquer les différentes disciplines de sport à savoir le
football, le basket, la gymnastique, le saut... Or nous savons tous que
compte tenu du nombre de classes d’un établissement, il serait im-
possible que toutes les classes fassent par exemple le sport au même
moment, c’est ainsi que pour mieux gérer le partage des différents
équipements nous devons éffectuer un système de rotation des équi-
pements or ces équipements appartiennent tous à l’établissement.
A l’exemple des équipements de sport d’un établissement qui
sont accéssibles par toutes les classes de l’établissement, notre site
web doit être aussi accéssible au grand public mais ici, il n’existe au-
cune restriction quant à la quantité de pages web.
Pour rendre public un site web, il faut procéder en deux étapes :
- Acheter du nom de domaine et
- Choisir un l’hébergeur
Le nom de domaine et l’hébergement sont les deux éléments qui per-
mettent d’avoir un site Internet accéssible à toute le monde sur Inter-
net.
- Le nom de domaine est un nom qui permet d’identifier de manière
unique un site Web.
- L’hébergement est l’espace où sont stockées les fichiers faisant
tourner le site Internet.
1. Un nom de domaine
C’est un nom alphabétique associé à une extension. L’adresse
193
du site de votre entreprise prend la forme de : www.votre-nom-de-

domaine.extension.
Exemple avec http://www.technologieinformation.cm
• Le nom choisi est technologieinformation
• Le nom de domaine est technologieinformation.cm
• L’extension est cm
Comme nom de domaine, nous pouvons citer : cm, org, com, fr, ...
Devant la profusion des noms de domaines qui se sont crées, il
devient de plus en plus difficile de trouver un nom de domaine.
Le nom de domaine est l’un des premiers éléments de référence-
ment de votre site. Pour avoir un bon nom de domaine il faut :
• Choisir un nom de préférence court, facile à mémoriser et re-
flétant le contenu du site que vous allez créer. En bref il s’agira soit :
votre nom soit le nom votre entreprise, soit un nom suggérant votre
activité, soit les deux.
• Mettre le nom en minuscules, Les accents et les majuscules
sont interdits.
• Choisir Les chiffres de 0 à 9
• Utiliser les caractères tels que : le tirets “-” pour separer des
mots dans un nom de domaine. Pas d’undescore “_”
Il existe de nombreux sites qui proposent l’achat de noms de do-
maines. camtel.cm, online.net, ovh.com, gandi.net…
Ces sites sont tenus par des “registrar” qui sont des organismes
accrédités par les autorités compétentes en matière d’attribution et de
gestion des noms de domaines Internet. Les domaines sont des loca-
tions à renouveler, selon les cas tous les ans ou tous les dix ans.
Le registrar est supposé prévenir l’administrateur du site avant le
terme de la location. Le plus souvent le registrar fournit une solution
complète (nom de domaine + hébergement du site).
2. Herbegement d’un site Web

L’hébergement d’un site est l’espace de stockage où se trouve-
ront les fichiers de votre site Internet. Vous devez savoir qu’elle sera
l’utilité finale de votre site.
- Un simple site qui ne nécessite pas une grande capacité de stockage.
- Un site Web mais aussi un espace ou vous pourrez stocker ou en-
voyer des fichiers lourds (vidéos, images en haute définition…).
En fonction de votre choix les coûts vont variés.
Vous allez maintenant héberger votre site sur un serveur web c’est-à-
dire un ordinateur qui met à la disposition d’autres ordinateurs des
ressources par l’intermédiaire d’un réseau. Votre site Internet sera
visible par tous les internautes.
194
Il existe 2 types de services pour mettre son site Internet en ligne. Les
hébergeurs gratuits et payants.
♦♦ Gratuit : Vous êtes limités à plusieurs niveaux.

- L’adresse pour accéder à votre site sera de la forme :
http://MonSitePerso.HebergementGratuit.com
- Vous avez plusieurs restrictions sur l’utilisation du serveur (capacité
des données, utilisation de certains paramètres...)
♦♦ Payant : Entre 10 000 et 45 000 Fcfa/an, vous pourrez avoir un

hébergement chez l’hébercheur professionnel de notre pays.
- L’adresse pour accéder à votre site sera de la forme :
http://www.MonSitePerso.com, http://www.MonSitePerso.cm,
http://www.MonSitePerso.org
- Vous aurez moins de restrictions (site rapide, capacité des données
importantes...)
195
ETUDE DE CAS
Je pratique Réaliser et publier un site web statique.

Monsieur le proviseur de votre lycée aimerait doter son établissement
en fin d’année d’un site web qui pourra être visité n’importe où et
n’importe quand grâce à internet. Voulant s’assurer que le travail sera
bien fait et sachant que vous êtes en série TI et donc par conséquent
plus aptes que les autres élèves à le satisfaire, il vous confie ce projet
tout en vous précisant que ce site doit permettre au personnel ensei-
gnant et administratif ainsi qu’aux élèves de consulter les notes et
les informations quotidiennes, hebdomadaires, mensuels et trimestri-
elles concernant les activités et le fonctionnement du lycée de même
que le déroulement et suivi des cours. Vous devez savoir que :
1. Pour la conception et la réalisation du site le cours sur la pro-
grammation des pages web statiques avec HTML pourra vous per-
mettre de créer votre portail et ses différentes pages.
2. Pour embellir les pages du site avec les objets d’enrichissement
(images, vidéo, son, etc.) de pages web vous vous servirez des no-
tions apprises lors du cours sur la production des feuilles de style
3. Pour dessiner le diagramme de navigation du site vous devez
savoir à priori que les visiteurs de votre site à l’image de tous les
internautes ne lisent pas l’intégralité des pages, ils utilisent le plus
souvent des liens pour naviguer entre les pages. Aussi le contenu
des pages doit permettre une lecture transversale et l’interface de
navigation doit permettre au visiteur de savoir à tout moment : où
il est; où il est allé; où il peut aller. Une visualisation globale de vo-
tre site sera donc indispensable pour une construction cohérente
et la clarté des liens ; cette structuration simple et efficace du site
permettra à l’usager de se créer un modèle mental de l’organisation
et lui facilitera la recherche ainsi que l’accès à l’information. Il vous
est donc recommandé de structurer l’accès à l’information en uti-
lisant un maximum de trois niveaux de sous menus.
196
Module 2
INFOGRAPHIE
COMPETENCES
• Définir et comprendre l’utilité de l’infographie dans la société.
• Connaître les outils de l’infographie
• Retoucher une image
• Créer des boutons et des animations
CHAPITRE 5 : PRESENTATION DE L’INFOGRAPHIE......................................198
CHAPITRE 6 : CREATION DES TEXTES AVEC EFFETS.................................217

CHAPITRE 7 : RETOUCHE D’UNE PHOTO ET CREATION DE BOUTON............231
CHAPITRE 8 : CREATION DES ANIMATIONS.................................................249
Chapitre
PRESENTATION DE L’INFOGRAPHIE
5
« Ne soyez pas prisonnier des dogmes qui obligent à vivre en obéissant à la
pensée d’autrui. »
Steve Jobs
Lors de la semaine de la jeunesse, le club informatique veut faire la

projection vidéo d’un article présentant les différentes activités culturelles
menées par les élèves tout au long du premier trimestre de cette année. Le
responsable s’adresse à vous, élève de 1ére TI pour vous demander de faire la
réalisation de cet article.
A quelle branche de l’informatique allez-vous faire appel pour concevoir et
réaliser cet article ?
Pré-requis
* Etre capable d’utiliser un ordinateur.

* Etre à mesure de capturer une image à partir d’un appareil numéri-
que.
Compétences
• Définir et comprendre l’utilité de l’infographie dans la société.

• Connaître les outils de l’infographie
Leçons / Sommaire
Introduction......................................................................................200
I- L’infographie : qu’est ce que c’est ?..................................................201
II- A quoi cela sert-il ?...........................................................................203
III- Le matériel qu’il utilise.....................................................................205
IV- Activités basées sur Photoshop........................................................211
Résumé.....................................................................................................215
exercices...................................................................................................216
199
Exemple 1
Pendant l’entretient avec le responsable du club informatique,
vous demandez à combien d’aspect de l’informatique vous aurez besoin
de toucher pour faire face à ce Challenge ?
vous lui avez posé la question et il vous a répondy que vous trou-
verez dans un seul domaine de l’informatique les outils pour rédiger cet
artcle, y inclure les photos et même les animations entre autre.
vous avez besoin de nopmbreuses informations, où allez vous les

trouver?
suivez ce cours!
J’apprends /cours
Introduction
Une communication faite à l’adresse d’un grand public, nécessite

l’usage des artifices et des stratégies qui ne sont pas forcément requis
dans un dialogue restreint. Mais qui auraient pour but de rendre le
message le plus court et le plus expressif possible.
C’est ainsi que les peintures furent créées pour faire des distinc-
tions entre les textes, et que les images révélatrices furent de plus en
plus employées pour remplacer de longues phrases.
En 1950, après l’arrivé du numérique, les premiers dessins sont
faits par ordinateur dans l’Etat du Massachussetts, ensuite les avancées
spectaculaires de l’informatique, conduisent à la création des logiciels
de traitement d’image qui offraient aux profanes, les technologies alors
réservées aux professionnels de la photographie.
En 1974, naquît le terme infographie, qui résultait d’une liaison
entre les mots « informatique » et « graphisme ». C’est la réalisation
des graphismes par le billet de l’ordinateur. Le concept d’infographie
n’est facilement appréhendable qu’à travers sa définition, son utilité et
la maîtrise de ses outils.
200
I- L’INFOGRAPHIE: QU’EST CE QUE C’EST ?
Exemple 1
Alors que vous parlez de votre projet avec votre camarade sur le
chemin de la maison, le sérigraphe de votre quartier vous interpelle en
vous disant que vous ne pouvez pas utilisez l’ordinateur pour mettre en
exergue un message sur une plaque comme il le fait.
La réponse est SI, Il existe une partie de l’informatique appelé INFOG-

RAPHIE, qui est la réunion entre les termes INFORMATIQUE et GRA-
PHISME c’est-à-dire que cette discipline réalise les œuvres de natures
graphiques à l’aide de l’outil informatique.
Mécanisme
l’informatique est la science qui traite l’information à l’aide de l’ordinateur,

et Le graphisme est une discipline qui consiste à créer, choisir et utiliser
des dessins, caractères typographiques, photos, couleurs, etc. (appelés
éléments graphiques) pour élaborer un objet dont chaque élément aura
un symbolisme contribuant au sens général du message final.
Voici le schéma qui explique cette relation
201
Remarque
l’infographie c’est l’ensemble de techniques permettant de créer et

de manipuler des images synthétiques, Cela revient en d’autres termes, à
dessiner ou créer de l’information visuelle à l’aide des supports informa-
tiques, dans le but de transmettre un message ou pour sa propre culture
Schéma descriptif :
202
Application : Bleuir l’image pour donner l’impression qu’elle est vue

de nuit.
Jour Nuit
Exemple 2
Si l’infographie se contente de produire des textes, les images et
autre par le billet de l’ordinateur, en quoi est qu’il peut condenser un
texte comme le fait le sérigraphe ?
La capacité à mettre en évidence un message en peu de mot.
En effet, l’infographie possède des outils pour rendre les certaines

parties du texte plus flamboyantes que les autres, ce qui permet de les
mettre en évidence et de faire passer un message sans avoir besoin de
trop d’écrire.
Cette transformation de l’information est faite dans un but pré-
cis, d’où la nécessité de savoir quels sont les domaines d’application de
l’infographie.
Je pratique
1. Définir les termes suivants : Infographie, Informatique, Graphisme,
Information.
2. Citer trois constituant de l’information.
3. de quoi traite cette partie ?
II- A QUOI SERT L’INFOGRAPHIE ?
Exemple1:
dans la suite de la discussion avec le sérigraphe; celui ci affirme
que c’est inutile de faire toutes ces représentations virtuelles des outils
de graphisme dans le seul but de faire des transformations qui ne sorti-
ront jamais de la machine.
203
mais non, ces transformations ne sont pas faites pour orner l’intérieur
des disque dur.
1-Des spécialistes de divers domaines, utilisent l’image pour illustrer au

mieux leurs observations et expliquer leur point de vue.
•En pédagogie : les livres scolaires et les enseignants usent des trans-
formations progressives d’images pour faciliter la compréhension des
notions abordées.
•Dans la médecine : la possibilité de faire des radio ou des vision 2d,
3d ou 4d par ordinateur, de l’intérieur de notre corps, facilite la lo-
calisation du mal (diagnostique), ainsi que son éradication (traitement)
et du même coup, réduit les risque d’arbitraire (précision). en plus les
praticiens peuvent prouver en cas de l’itige que l’opération était néces-
saire.
•Dans la biométrie qui facilite l’identification, l’infographie intervient
dans la reconnaissance (des parties du corps humain empreintes digi-
tales, visage, iris, style d’écriture du scripteur…) à des fins sécuritaires.
les policiers utilisent ses empruntes pour justifier leurs accusations.
•L’astronomie : la représentation des étoiles, des météorites et autres
astres, ainsi que leur distinction dans l’espace qui les entoure est ren-
due possible par les logiciels de coloration, car ces astres sont parfois
si éloignés que l’on ne peut que simuler leur aspect.
2- le traitement d’image en vue de créer des décors magnifiques et

parfois idéaliste est récurrent dans les divertissement et dans d’autres
domaines de la vie.
• En publicité: l’infographie est utilisé pour concevoir les affiches, dé-
pliants publicitaires, flyers, cartes de visites qui permettent d’informer
le public de la tenu des évènements.
•Dans la presse : la mise en évidence des titres, la variété du niveau
d’importance entre les nouvelles dans les journeaux, magasines et au-
tres catalogue.
•Dans les jeux vidéo l’on utilisent l’infographie pour la création des
effets spéciaux, des mondes futuristes et des interfaces imaginaires…
•Dans la vidéosurveillance: qui existe déjà dans plusieurs de nos

ministères et grandes écoles, est basée sur la détection de mouvements
et la reconnaissance automatique des incidents rendus les prévisions
possibles par les techniques de décomposition de l’image existant en
infographie.
204
•Dans l’architecture: la reproduction virtuelle des bâtiments, simplifie

l’établissement des maquettes et donc la précision des choix et des
•Dans les transports : la conception des cartes est faite à base des
logiciels qui génèrent une carte selon les données introduites. Mais les
effets distinctifs des réseaux routiers, aériens … ainsi généré sont réali-
sés par infographie.
Remarque
L’infographie s’adapte aussi bien au support papier que vidéo (web,

publicité, jeux, animations...).

Je pratique
1. Définir les termes suivants : Carte mère, processeur, Disque dur,
Mémoire vive
2. Citer quatre exemples de lecteurs.
3. Que représente cette partie ?
III- QUEL EST LE MATERIEL QU’IL UTILISE?
Exemple:
le sérigraphe vous demande cette fois:
comme on a transformer la couleur que j’utilise en outils de coloriage et
palette de couleur dans ton ordinateur, on prend tout cela où, mon frère
a un odinateur et cet ordinateur ne fait pas ce que tu prétend.
Réponse: les outils d’infographie sont contenu dans un logiciel qu’on

doit généralement acheté ou téléchargé sur internet.
1- Ils ne peuvent pas fonctionnés sur un ordinateur possédant

n’importequel propriétés (matériel HARDWARE).
205
il faut:
- Un ordinateur desktop d’au moins 40 gigas de disque, 512 mégas de
rame et un processeur 2.0 ou un lap top.
- Un écran d’au moins 15 puces.
- Il pourra utiliser la souris au lieu d’une tablette graphique qui aug-
mente la précision,
- de même le disque dur externe sera remplacé par une clé USB pour le
transport de données.
- Quelques CD/DVD (bientôt blu-ray) pour le stockage des données
crées si ceux-ci deviennent important, si non le disque dur sera suf-
fisant.
2- les logiciels d’infographies sont spécifiés soient pour la mise en

page, soit pour le dessin(bitmap ou vectoriel)
- Les logiciel de mise en page sont ceux qui réalisent le traitement de

texte, la conception des graphiques et toute la présentation visuelle de
l’œuvre.
* parmis eux, il ya les logiciels propriétaires ou payants (
QuarkXPress, en version 7.0 (Mac/Windows);
InDesign, en version CS3 (Mac/Windows/Linux*).
Adobe PageMaker, en version 7 (Mac/Win).
Adobe FrameMaker (documents techniques) (Mac/Win/Solaris).
Microsoft Publisher, en version 2003 (Win/Linux*).
PagePlus 11, le studio de création graphique, [Windows].
(*) à condition d’utiliser CrossOver Office ou WINE.
* et les logiciel libres, ou téléchargeables gratuitement sur internet.

Scribus , en version 1.3.x, (Linux, MacOSX, Windows).
LyX (surcouche graphique wysiwyg de TeX) (Linux).
Le module Draw de OpenOffice.org, (Linux, Windows,...).
Passepartout, un logiciel complet de prépresse. (X11)
- Logiciel de dessin bitmap traitant des images constituées de pixels

et les logiciel de dessin vectoriel traitant des images qui sont des
représentations d’entités géométriques telles qu’un cercle, un rectangle
ou un segment.
* les logiciels propriétaires
Les logiciels de dessin vectoriel existent indépendamment de ceux de
dessin bitmap et inversement, mais pour limiter les coûts, il vaut mieux
utiliser un logiciel multifonctionnel :Adobe Photoshop, en version CS3.
(Mac/Win/Linux*). (*) à condition d’utiliser CrossOver Office ou Wine.
206
3- Eléments de l’interface d’utilisation d’un logiciel d’infographie
L’interface d’un logiciel d’infographie dispose de différentes parties en

fonction de son niveau de performance. Voici les éléments que l’on
retrouve généralement:
- La Barre de titre : cette barre contient le nom du logiciel et le nom
du document en cours de création (dans certains types d’affichage,
ceci n’est pas toujours le cas).
- La Barre des menus : cette barre présente une série de boutons
qui nous permettra entre autres d’ouvrir, enregistrer, fermer, éditer
ou modifier un document.
- La Barre d’options des outils : les fonctionnalités de cette barre
permettent de définir une ou plusieurs options spécifiques aux outils
de notre logiciel afin de les paramétrer.
- La Boîte à outils : cette fenêtre constitue notre stock d’outils, au-
trement dit la trousse dans laquelle on trouve les outils tels que paire
de ciseaux, pinceaux, crayons de couleur, gomme, etc.
- Les Palettes flottantes : ce sont des petites fenêtres que l’on dis-
pose à l’intérieur de l’espace de travail et à partir desquelles nous au-
rons accès à la majorité des fonctionnalités dont nous disposons (ceci
n’est valable qu’avec le logiciel Photoshop. Parmi elles, on peut citer
l’historique, les calques, les couleurs, le navigateur etc.
- La zone de travail : c’est la feuille sur laquelle l’infographe dess-
ine. Il s’agit d’un élément à part entière qui compose l’espace de
travail, au même titre que la boîte à outil.
- L’espace de travail : il peut être comparé à un bureau de travail

réel. Il s’agit de l’espace dans lequel sont disposés la boîte à outils, la
zone de travail et les palettes flottantes.
4- Présentation des outils de l’infographe
Nous présentons ici les outils qu’on retrouve dans ADOBE Photoshop.
Cette liste n’est qu’à titre indicatif, il ne s’agit aucunement d’une liste
exhaustive des outils de Photoshop.
207
Remarque
1- pour des ordinateurs de plus petite capacité, (206 méga de rame)
utilisez Photoshop 7 qui pèse beaucoup moins, mais possède les
mêmes propriétés, sauf que pour les animations, il faudra basculer
dans Photoshop Image ready.
2 La plupart de ces logiciels existe en version limitée dans le temps
(LE Limited Edition), en Général 30 jours et sont offerts sur les
CD-ROM accompagnant les revues d’informatique. Sinon rapprochez
vous des professionnels de la photo.
* les logiciel libres

Photo Impact de U-Lead, qui est un logiciel libre Livré gratuitement
(version 3.0 SE) par CANON avec son PowerShot 600 et AGFA avec ses
scanners SnapScan, il coûte 1300 F pour la version complète (la 4.0) et
dispose des fonctionnalités et de l’ergonomie d’un produit professionnel.
5- Les formats de fichiers :
Il existe aujourd’hui une multitude de formats de fichiers, que ce soit

pour le texte aussi bien que pour l’image. Le monde graphique en utilise
certains, nous allons en détailler les principaux en ten tant de mettre en
avant leurs avantages et inconvénients.
Format Compression Dimensions maximales Nombre de couleurs

maximal
BMP (BitMaP) aucune / RLE 65 536 x 65 536 16 777 216

GIF(GraphicInterchange Format LZW 65 536 x 65 536 256
IFF aucune / RLE 65 536 x 65 536 supérieur à 16 777 216
JPEG(Joint Photographic Expert JPEG 65 536 x 65 536 supérieur à 16 777 216
Group prononcez jipègue ou en an-
glaisdjaypègue)
PCX aucune / RLE 65 536 x 65 536 16 777 216
PNG(Portable Network Graphics, ou RLE 65 536 x 65 536 supérieur à 16 777 216
format Ping)
TGA aucune / RLE 65 536 x 65 536 supérieur à 16 777 216
TIFF/TIF(Tagged Image File Format) Packbits / CCITT 232-1 supérieur à 16 777 216
G3&4 / RLE / JPEG /
LZW / UIT-T
208
6- éléments qu’on trouve généralement dans une interface de

logicield’infographie.
NOMS RÔLES OPTIONS
Outils de sélection
Outil rectangle de sélection Permet de sélectionner une zone de Style : normal, fixe
Outil ellipse de sélection forme rectangulaire ou circulaire Contour progressif
Outil lasso Permet de sélectionner une zone ma- Type de sélection

Outil lasso polygonal nuellement par un cliquer-glisser Contour progressif
Outil lasso magnétique
Outil sélection rapide Sélectionner une zone de même Forme de la sélection

Outil baguette magique couleur Type de la sélection
Outil tranche Séparer un objet ou une image en Style : normal, fixe

Outil sélection tranche plusieurs parties distinctes
Outils de correction
Outil correcteur de tons direct Permet d’apporter les corrections Forme, Mode, Source ;
diverses à
Outil correcteur un objet Taille de la pupille, Taux
Outil pièce Permet de corriger l’effet œil rouge sur d’obscurcissement
Outil œil rouge une photo
Outil tampon de duplication Permet de reproduire une zone précise Forme, Mode, Opacité, Flux, Motif
Outil tampon de motif d’une image ou un motif dans une
autre zone de la même image
Outil gomme Permet d’effacer une partie de l’image Forme, Mode, opacité, Flux
Outil gomme d’arrière plan
Outil gomme magique
Outil goutte d’eau Permet de rendre une image plus ou Forme, Mode, Intensité
Outil netteté moins nette ou floue
Outil doigt
Outil densité – (moins) Permet d’améliorer la densité d’une Forme, Mode, Flux
Outil densité + (plus) image
Outil éponge
Outils de forme
Outil rectangle Permet de dessiner des formes par- Calque de forme
Outil rectangle arrondi ticulières dans la zone de travail Tracés
Outil ellipse Pixels de remplissage
Outil polygone Style
Outil forme personnalisée Couleur
Outils de texte
Outil texte Permet de saisir un texte au clavier Orientation, type police, taille police,
alignement, la couleur, effets, style
Outil annotations Permet de faire des annotations sur Auteur
un objet Taille, Couleur
209
outils de oeinture
Outil dégradé Permet de faire de remplir un Mode, Opacité, Dégradé, Tolé-
Outil pot de peinture objet avec une couleur particu- rance, couleur
lière ou un motif
Outil pipette Permet de prélever une couleur Taille
Outil échantillonnage de particulière
couleur
Outils de dessin à main levée

Outil pinceau Permet de peindre ou de dess- Forme, Mode, Limites, Tolé-
Outil remplacement de couleur iner avec une couleur particu- rance
Outil crayon lière
Outil Zoom
Outil zoom Permet de réduire ou d’agrandir
tout ou une partie d’un objet ou
une image
Outil de déplacement
Outil déplacement Permet de déplacer un objet, Groupe ou calque
image ou texte sur la zone de
travail

Remarque
utilisez ces informations générales pour vous faire une idée
claire d’un logiciel d’infographie, car nous ne vous en mon-
trerons pas plus.
en fait, faites vous la représentation qui convient le mieux à
votre logique.
Je pratique
1. Définir les termes suivants : logiciel de mise en page, bitmap, vec-
toriel, extention de fichier.
2. Citer cinq d’extentions de fichier avec leur signification.
3. Citez cinq outils d’un logiciel d’infographie
3. de quoi on parle dans cette partie?
210
IV- ACTIVITES SUR UN LOGICIEL D’INFOGRAPHIE
Exemple 1:
ayant bien compris quels sont les outils d’inforgraphie, le sérigraphe est
intéressé par ces produits. comment fait=on pour entrer en possession
d’un logiciel d’infographie? il est prêt à en Sacheter si nécessaire.
Réponse: par le téléchargement.
1- Télécharger et installer un logiciel d’infographie.
Il est impératif pour un élève de 1ère Ti de connaitre le téléchargement

et l’installation de logiciel. Aussi nous contentons nous de faire un rap-
pel.
Entrer le nom du logiciel dan la barre d’adresse ;

Choisissez dans la page d’adresse, la page de téléchargement qui
présente les indications les plus spécifiques à votre sujet ;
Le téléchargement terminé, enregistrer dans un support (clé USB),
en vu de le porter à votre ordinateur. si vous êtes sur
Votre poste, lancer l’installation en double cliquant sur l’icône présent
dans le dossier de téléchargement.
Remarque
Avant de télécharger le logiciel, vérifiez qu’il est dans une ver-
sion rentrant dans vos moyens :
version d’essaie qui pourrait allé à un élève s’il n’a pas les moyens.
ou version complète pour notre sérigraphe, qui a des moyens d’en
acheter.
au moment de l’installation, veuillez à cocher la case qui crée un
raccourci du logiciel sur le bureau.
Exemple 2:
une fois que vous avez réussi à procurer le logiciel d’infographie à votre
ami le sérigraphe, il affirme que chaque fois qu’il ouvre le logiciel, il ne
sait pas quoi faire.
En fait, les logiciels d’infographie travaille avec des documents qu’on
211
ouvre à partir de lui, il va faloir lui apprendre à utiliser le logiciel.
2- utilisation d’un logiciel d’infographie:

il existe un outil qui est indispensable dans un tel logiciel, il s’agit du
calque.
2-1 La notion de calque
Le calque est une fine toile virtuelle sur laquelle l’on inscrit une image,
une dessin ou une écriture, mais ce qui rend le calque très intéressant
et indispensables pour les logiciels de création d’image, c’est qu’un ob-
jet peut avoir ses éléments constitutifs placé sur un plusieurs calques
différents, de manière à ce que seule la superposition verticale de ces
calques, permette de voir l’objet en entier.
Voici l’image d’une superposition de 4 calques :
On peut effectuer de multiples opérations sur les calques. On a

par exemple la création, l’affichage, la suppression, le déplacement,
la définition comme arrière plan, la copie, du calque ou de son con-
tenu. On peut également verrouiller un calque, le rendre visible ou
invisible, changer son opacité ou le fusionner avec les autres calques.
On distingue plusieurs types de calque : calque image, calque d‘arrière
plan, calque texte, calque de forme, calque de réglage, calque de rem-
plissage.
2-2 importer une image dans Photoshop
Avant d’arriver à importer une image dans un logiciel de traitement

d’image, il faut d’abord l’ouvrir, y créer le document qui contiendra la
photo.
- Double cliquez sur l’icône du logiciel préalablement créé sur le

bureau ou suivez le chemin démarrer - tous les programmes – nom-
logiciel et il va s’ouvrir;
.
212
- Dans le menu fichier, cliquez sur Nouveau, nommer le document

que vous êtes entrain de créer et choisissez par la suite les paramètres
des dimensions que vous attribuez à la zone de travail (largeur, hauteur,
résolution, mode, contenu de l’arrière plan etc.), et appuyez sur OK pour
valider ;
- Pour importer une image à partir d’un dossier, il suffit de cliquer
sur Fichier, puis sur Importer. Sélectionner une image dans l’un de
vos dossiers dans la fenêtre qui s’ouvre et valider en cliquant sur Im-
porter. Votre image va s’afficher dans la zone de travail de votre logiciel
d’infographie.
si vous voulez ouvrir une image à partir d’un répertoire de la machine,
dans Fichier, cliquez sur Ouvrir et dans l’interface qui s’ouvre, choisir
le répertoire parent contenant votre fichier image, une fois à l’intérieur,
faites un click sur votre fichier et cliquez ensuite sur Ouvrir.
2-3- Enregistrer un document après le travail
Pour enregistrer votre document il faut, cliquer sur Fichier puis

sur Enregistrer ou enregistrer sous.
Dans la fenêtre qui s’ouvre, entrer le nom du document, le format
de fichier, le répertoire de destination et valider avec le bouton ‘’EN-
REGISTRER’’
L’enregistrement se fait sous forme d’un projet qui pourra être modifié
plus tard si l’on le souhaite se fait avec l’extension ‘‘.PSD*’’ ou ‘‘*.PDD*’’
3- Insérer un élément dans une page web
Il existe de nombreuses méthode d’insertion d’un élément (images, bou-

tons, graphique, texte, etc.) dans une page web à partir de Photoshop-
CS3 ; nous vous proposons les méthodes les plus simples dont l’une
consiste à un enregistrement et l’autre à une exportation.
3-1- Méthode par enregistrement

Au moment de l’enregistrement, cliquer sur Fichier, puis sur En-
registrer pour le web et les périphériques. La fenêtre qui s’ouvre offre
des options de présentation de votre élément dans la page web.
Faites vos choix et valider en cliquant sur Enregistrer.
Puis Enregistrer normalement votre document et donner le nom
du fichier html qui contiendra vos éléments. Un dossier ‘’images’’, con-
tenant les boutons, images ou autres est créé automatiquement dans le
répertoire où ils ont été enregistrés.
213
3-2-Méthode 2, par exportation
Cliquer sur Fichier, puis sur Exporter et après sur Zoomify ou sur
le bouton prévu pour le type exportation sur internet.… Une fenêtre
nommée d’exportation s’ouvre vous permettant de fixer les caractéris-
tiques de votre élément et la manière dont elle sera présentée dans la
page web.
Faire les modifications nécessaires :
Sélectionner un dossier de sortie
Donner un nom
Ajuster la qualité, c’est à direconstater si votre document est volu-
mineux ou pas,
Ajuster l’affichage dans le navigateur web c’est à dire cocher sur
un bouton: afficher dans le navigateur web, si celui ci est visible.
A la fin, valider en cliquant sur O.K.
Je pratique
1. Définir les termes suivants : Téléchargement, bitmap, vectoriel,
extention de fichier.
2. Citer cinq d’extentions de fichier avec leur signification.
3. Citez cinq outils d’un logiciel d’infographie
3. de quoi on parle dans cette partie?
214
Résumé
Aux sortir de ce chapitre présentatif du concept d’infographie, nous
retenons que c’est une science illustrative qui a pour but de faciliter
la compréhension du monde par le billet des transformations appor-
tées aux images, aux écrits, et aux sons. Elle a donné naissance à plu-
sieurs métiers, exercés par des variétés d’infographiste. Elle possède
ses outils propres, ses types de fichier et pénètre dans de nombreux
domaines de la vie. La créativité qu’elle implique, est une source de
passion qui est en grande partie à l’origine de l’engouement de tants
de profane envers cette discipline.
215
Questions à Choix Multiple

1 l’infographie c’est:
a- la science qui étudie les images, les dessins, les animations pour
distraire l’homme.
b- une partie du graphisme qui permet de créer et de manipuler des
images synthétiques, Cela revient en d’autres termes, à dessiner ou
créer de l’information visuelle à l’aide des supports informatiques,
c- c’est un domaine de l’informatique.
2- dans le logiciel d’infograpie, la main du graphiste est remplacée

par:
a- le calque.
b- Le crayon.
c- l’outil de sélection.
3-l’outils de correction est la transformation virtuelle de:

a- le crayon.
b- la règle.
c- la gomme.
4- quelle est la différence entre enregistrement et expotations?

a- l’enregistrement arrive après l’exportation et l’exportation n’est pas
possible sur cetains logiciels moins avancés..
b- l’enregistrment permet de mettre le fichier sur internet.
c- l’enregistrment permet de sauvegarder le fichier dans un repertoire
tandis que l’exportation conssite afficher le fichier sur internet.
5- selon vous l’outil laso est:

a- une corde qui permet d’attraper les images pour les traiter.
b-une corde qui permet d’attraper les outils pour les utiliser.
c- permet de sélectionner une zone manuelleme.
6- un calque est:
a- une fine image transparente sur laquellle l’on peut poser un dess-
sin une écriture , en différentes étapes.
b- une fine matière transparente sur laquelle l’on peut poser un des-
sin, une écriture pour mieux la transformer.
c- un papier transparent
216
Chapitre
CREATION DES TEXTES AVEC EFFETS
6
“ C’est la personne humaine, libre et créatrice qui façonne le beau et le sublime,
alors que les masses restent entrainées dans une ronde infernale d’imbécillité
et d’abrutissement. ”
Albert Einstein
Dans le cadre de la projection vidéo d’un article présentant les différentes

activités culturelles menées par les élèves de cette année là, il vous ait demandé
de titrer cet article, d’écrire une introduction, un corps comportant entre autre,
les noms de chaque club existant dans l’établissement, écrits avec beaucoup de
recherche et d’effets transformant.
Réaliser quelques transformations.

Pré-requis
* Saisir et sélectionner un texte

* Savoir ouvrir et fermer l’application un logiciel d’infographie ;
* Connaître et naviguer dans l’interface d’un logiciel d’infographie ;
* Manipuler les calques
Compétences
• Déformer un texte ;
• Modifier la couleur, la taille, l’orientation d’un texte ;
• Ajouter et affiner des effets au texte ;
Leçons / Sommaire
INTRODUCTION.......................................................................................................219
I- LES MODIFICATIONS QUE PEUVENT SUBIR UN TEXTE..................................219
II- MISE EN EXERGUE DANS UN LOGICIEL D’INFOGRAPHIE : PHOTOSHOP.......222
Résumé...................................................................................................................228
Exercices.................................................................................................................229
218
Exemple:
Dans le cadre de la réalisation de votre article, vous êtes amené
concevoir des textes avec les spécificités de l’infographie, qu’est ce que
l’infographie peut apporter de particulier à la mise en forme ?
Vous avez de nombreuses questions, ce cours peut vous aidez à y

répondre
Suivez le !
J’apprends /cours
Introduction
Les modifications que peuvent subir les textes sont nombreuses,

même si souvent, il est trop voyant de transformer un texte de 10 ligne,
de manière à le rendre plus évident ; il peut contenir en outre des élé-
ments important que l’on souhaiterait mettre en exergue. Contraire-
ment aux techniques de mise en forme que proposent les logiciels de
traitement de texte, les techniques de transformation d’un texte que l’on
trouve dans des logiciels d’infographie sont plus spectaculaires et so-
phistiquées. De manière générale, elles portent sur la forme, la couleur,
la taille mais aussi les effets.
I- LES MODIFICATIONS QUE PEUVENT SUBIR UN TEXTE
J’apprends /cours
Exemple:
sacahant que vous aurez à transformer du texte dans un logiciel
d’infographie, vous vous demandez qu’elles sont les types de modifica-
tions qu’un texte peut subir?
Réponse:
219
I-1- Quelques parties du texte pouvant être transformées
En principe, toutes les parties d’un texte peuvent être modifiées pour leur
donner un effet plus spectaculaire, mais le plus souvent, nous avons :
Les titres : étant la partie avant-garde de tout texte, il est nécessaire

qu’ils attirent l’attention, pour qu’il soit ensuite focalisé sur le contenu.
Les mots clés : sont les mots que l’on doit retenir, très souvent, ils sont
en gras mais l’infographie propose d’autres méthodes possibles de mise
en exergue.
Les remarques : permettant une meilleure compréhension de la situa-
tion exposée, elles méritent d’être rapidement détectables.
Les énumérations : les puces de plus en plus spectaculaires peuvent

être crées.
Les citations : toujours comprises entre guillemets, il peut arriver né-

anmoins que l’auteur décide de les mettre particulièrement en évidence.
Les commentaires : présents sans un texte ou expliquant une image,

elles
sont susceptible de modification pour créer ou parfaire un contexte.
Les paragraphes : il peut arriver qu’un paragraphe entier ou même

plusieurs bénéficient de coloration, ou d’effets transformant pour les
dénoter du reste des écris (Chaînage du texte entre plusieurs blocs).
I-2- Les transformations classiques que l’on rencontre en infogra-

phie
Les transformations que peut subir un texte ne sont pas les mêmes
dans tous les logiciels d’infographie, certains sont plus performants que
d’autres en terme de choix proposés. De manière récurrente, un teste
peut y être déformé, sa couleur changée, ses angles et ses contours
ajustés et enfin des effets lui sont ajoutés et affinés.
- La déformation du texte :
Il existe plusieurs types de déformation possibles du texte, on peut

l’arrondir, le transformer en cercle, en poisson et autre.
220
- Changement de la couleur du texte :

dans ces logiciels, une palette de couleurs est présentée, dans
laquelle la couleur convenant le mieux au besoin est choisie. Afin de
pouvoir manipuler correctement des couleurs et échanger des informa-
tions colorimétriques il est nécessaire de disposer de moyens permet-
tant de les catégoriser et de les choisir.
On appelle ainsi «espace de couleurs» la représentation mathématique
d’un ensemble de couleurs. Il en existe plusieurs, parmi lesquels les
plus connus sont :
• Le codage RGB (Rouge, Vert, Bleu, en anglais RGB, Red, Green,
Blue).
• Le codage TSL (Teinte, Saturation, Luminance, en anglais HSL,
Hue, Saturation, Luminance).
• Le codage CMYK.
• Le codage CIE.
• Le codage YUV.
• Le codage YIQ.
- ajuster les angles et les contours d’un texte
il s’agit d’attribuer au texte des forme que l’on peut remplir en-
suite.
- ajouter les effets au texte et affiner ces effets
Ici il faut rendre le texte attirant par les différents allongements de celui
ci accompagnés des couleurs saillantes.
Exemple : bruler le texte.
Remarque
ce rescencement n’est pas exauscif, car selon le logiciels de mise
en page et même sellon ceux de l’infographie, il existe des maodiffica-
tions qui sont propres à certains d’entre eux. nous n’avons parler que
de ceux qu’on rencontre régulièrement dans la plupart des logiciels.
221
Je pratique
1. Définir les termes suivants : texte, création, transformations, dé-

formation.
2. Citer quatre exemples de transformations que le texte peut subir.
3. De quoi on parle dans cette partie ?
II- MISE EN EXERGUE DANS UN LOGICIEL D’INFOGRAPHIE
J’apprends /cours
Exemple:
comment fait-on pour transformaer un texte?
quels sont les outils qui sont généralement utilisés?
II-1- Création du texte dans Photoshop
- présentation de la barre d’option de l’outil de texte
Vous pouvez créer du texte vertical ou horizontal à tout emplacement

sur une image. En fonction de la manière dont les outils de texte sont
utilisés, vous pouvez entrer un texte de point ou un texte de paragraphe.
Le texte de point permet de saisir un mot ou une ligne de caractères,
alors que le texte de paragraphe permet de saisir et de mettre en forme
le texte avec un ou plusieurs paragraphes. L’icône de l’outil texte est la
suivante
il s’agit généralement d’une figure portant des petits boutons qui

indiquent chacun, soit comment orienter le texte (verticale, horizontale);
comment aligner le texte (gauche, centre ou droite) ainsi que le style , la
taille, la police…
Lors de la création d’un texte, il faut au préalable créer un nouveau
document ou ouvrir un document existant sur lequel le texte sera saisit.
Une fois un document ouvert, on procède comme suit :
222
Sélectionnez l’outil Texte Horizontal ou vertical dans la palette

d’outils Cliquez dans la zone de travail du document puis saisir le
texte.
Remarque
Onpeut
On peutégalement
égalementinsérer
insérerun
un texte
textesur
surune
uneimage
image
II-2- Transformation du texte dans un logiciel d’infographie
- présentation de la palette caractère

La palette de caractère renferme un ensemble d’options permettant
d’effectuer un ensemble d’opérations sur un texte tel que changer la
couleur, la taille, l’orientation… Il se présente comme sous forme d’une
surface comportant les outils de traitement de texte.
voici une image un peu approchante:
palette caractère
Déformation du texte
La déformation d’un texte consiste à lui appliques une forme particu-
lière prédéfinie dans le logiciel. Cette opération est très utilisée dans la
mise en forme des textes,
223
- la réalisation des cartes de vœux, des publicités, la création des log-

os, … A cet effet, on peu utiliser aussi bien les logiciels de traitement
d’image (Photoshop, Paint …) que les logiciels de traitement de texte
(Word, OpenOffice …). Photoshop propose plusieurs types de déforma-
tion (cisaillement, contraction, cordonnées polaires, dispersion, lueur
diffuse, océan, onde, ondulation, sphérisation, tourbillon verre zigzag….)
Quelques styles de déformation :
- Océan : permet de donner aux écrits, une forme atténué, car les
lettres sont parsemées de petits espaces blancs qui leurs donnent un
style brisé. Exemple :
Présentation des clubs de l’établissement :
- Sphérisation
club musique :
- cisaillement qui donne au texte une forme en dents de scie.

Coopérative :
224
Procédure de déformation
Après la création du texte, on peut lui appliquer l’une des défor-
mations ci-dessus citées, il existe 3 méthodes pour le faire :
1ière méthode :
Faire un clic droit sur le texte saisit.
Choisir déformé le texte… dans le menu contextuel. Une fenêtre
s’ouvre ayant pour nom Déformer le texte
Choisissez un style de déformation dans le menu déroulant Style
et cliquez sur OK.
2ième méthode:
Cliquez d’abord sur le menu Calque de la barre de menu ensuite
sur Texte et enfin sur Déformer le texte. On obtient la même fenêtre que
plus haut.
et validez sur OK.
3ième méthode:
Cliquez sur l’outil créer un texte déformé sur la barre d’option de
l’outil Texte
et cliquez sur OK.
- Changement de la couleur, du style ou de la taille du texte :
Lorsque l’on saisie le texte, il utilise par défaut la couleur du premier

plan. Mais l’on peut modifier la couleur du texte avant ou après sa sai-
sie. Voici la procédure :
Sélectionnez le texte sur lequel on veut appliquer des modifica-
tions
Cliquez sur l’onglet Caractère pour amener la palette Caractère
en premier plan ; Si cette palette n’est pas ouverte choisissez le menu
Fenêtre ¬ puis Caractère.
choisir la taille, la famille de police suivit de son style, la couleur et
bien d’autres paramètres selon ce qu’on veut faire.
Dans tous les logiciels, la couleur de premier plan est mise dans un re-
ceptacle différent de celui destiné à contenir la couleur d’arrière plan.
ainsi, avant de sélectionner une couleur à appliquer, il faut spécifier le
receptacle correspondant.
225
Procédure à suivre
Étape 1 : Écrire le mot Coopérative dans la zone de travail d’un nou-

veau document.
Étape 2 : Faire un clic droit sur le texte, choisir déformé le texte… dans
le menu contextuel. On obtient la fenêtre ci-dessous
Étape 3 : Choisir le style de déformation Ondulation dans le menu dé-

roulant Style et valider.
Étape 4 : Ouvrir la palette de caractère
Étape 5 : Sélectionner les trois premières lettres du mot, cliquer sur
l’option couleur et choisir la couleur Rouge puis dérouler l’option taille
et choisir 60pt. Sélectionner les trois lettres suivantes leur appliquer
couleur bleu et taille 30pt. Sélectionner les trois lettres suivantes leur
appliquer couleur verte et taille 48pt et le reste des lettres en couleur
noir avec une taille 36pt. Le résultat obtenu en fin de compte est :
- Ajuster les angles et les contours, ajouter les effets au texte et les
affiner.
Après avoir crée un texte on peut vouloir ajuster ses angles et ses con-
tours, on peut également vouloir lui ajouter des effets. Tout ceci dans le
but de rendre ce texte plus beau ou beaucoup plus présentable. Pour ce
faire nous allons procéder de la manière suivante, ceci après avoir crée
le texte:
Sélectionnez le menu Calque > Style de calque > Biseautage et es-
tampage ou contour. La fenêtre obtenue présente un choix de motif, de
style (ombre, contour, texture, etc. …), d’échelle, de type... dès que vous
avez choisis les paramêtres qui vous conviennent, validez.
Procédure de créations du texte en ajustant les contours

Étape 1 : Ecrire le texte club informatique
Étape 2 : Sélectionnez le menu Calque, Style de calque, contour… Vous

allez obtenir une fenêtre semblable à celle que nous vous avons décrite
quelques lignes plus tôt.
226
Étape 3 : Au centre dans le cadre intitulé structure, mettre la taille à 5,

position extérieur, mode de fusion normal, sera le suivant :
opacité 100%, type de remplissage motif (dérouler la liste déroulante
qui s’y trouve et choisir un motif qui vous convient) et échelle 100% et
valider sur OK. Le résultat: club informatique
Remarque
Toutes ces modifications peuvent être apportées à partirde la

palette d’outil.
Je pratique
1. Définir les termes suivants : ajustement de contour, menu calque,

style de déformation, palette.
2. décrire les procédures de déformation du texte..
3. De quoi on parle dans cette partie ?
227
Résumé
Les transformations que l’on peut appliquer à un texte visent
à le rendre plus évident, par rapport aux autres éléments que con-
tient la page ou alors elles ont pour but de le faire rentrer dans la
logique existante et de ce fait assurer la continuité de la cohérence du
message. Ces transformations sont presque de mêmes types dans la
plupart des logiciels d’infographie. Mais la recherche est nécessaire
pour agrandir la sphère de ses connaissances. En outre, les pratiques
humaines allient très souvent l’image à l’écriture dans une œuvre in-
fographique.
228
Question à Choix Multiples
1- le cisaillement est
a- un effet du texte
b- un style du texte
c- une déformation de texte
2- la palette caractère
a- décrit les caractèristiques habituel du texte (taille, polyce...)
b- présente les boutons de l’alphhabet pour permettre l’écriture
c- présente des éléments dont il faut étudier les implications sur le
texte.
3- quels sont les types de couleurs que vous reconnaissez

a- RBV
b- IBL
c- TSL
laquelle avez vous reconnue, qu’est ce que cela signifie?
4- qu’elle est la différence entre ondulation et sphérisation du texte:

a- onduler c’est tournoyer et sphérisation c’est avoir la forme d’une
sphère.
b- sphérisation c’est une déformation du texte et ondulation c’est un
style de forme que l’on applique au texte.
c- il n’ya aucune différence
5- en quoi consiste l’ajustement des contours du textes?

a- rendre les contours rond;
b- améliorer la form des contours du texte
c- donner au texte, une taille de sa position extérieur ou intérieure,
lui donner un mode, un pourcentage d’opacité, un type de remplis-
sage et une échèle.
6- bruler le texte c’est:

a- une déformation du texte;
b- un style de forme du texte;
c- une effet du texte
229
7- les transformations classiques que l’on rencontre en infographie

sont:
a- la forme, la couleur et l’apparence
b- la déformation, la couleur et les manifestations,
c- la déformation, la coloration et l’aspect.
8- On peut transformer sur un texte:

a- son orthographe
b- son effet
c- sa forme
9- pour appliquer une déformation au texte, il ya trois méthodes:

a- Quant il ya déja le texte, quand il n’ya pas encorele texte, quand le
texte est dans le calque.
b- On commence par le texte, on commence par le calque, on com-
mence par l’a boîte à outil.
c- Quand on a bsesoin du calque, quant on a besoin des outils, quand
le texte doit être crée.
10- donnez 4 raisons pour lesquelles on peut transformer un texte.
230
Chapitre
RETOUCHE D’UNE PHOTO ET CREATION DE BOUTON
7
« Ne laissez pas le brouhaha extérieur étouffer votre voix intérieure. »
Steve Jobs
Dans l’article que vous devez créer, il vous est demandé d’intégrer les photos
désignant l’activité de chaque club, agrémentées par une touche personnelle,
pour les rendre particulièrement expressives. Plusieurs photos présentent des
imperfections. Comment allez-vous procéder pour les réparer ? Quels types
d’améliorations pouvez-vous apporter à ces photos ? En plus l’on vous a de-
mandé de créer des boutons et un logo pour l’évènement. En fin créer un docu-
ment d’annonce, qui fera la publicité de votre projection. Comment allez-vous
faire cela ?
Pré-requis
* Ouvrir un fichier image

* Connaitre quelques palettes et outils d’un logiciel d’infographie
Compétences
* Modifier ou truquer une photo (ajouter du texte, changer l’arrière plan)

* Extraire une partie d’une photo
* Fusionner plusieurs photos
* Créer des boutons
* Créer des objets complexes (logos, décors) de PAO.
Leçons / Sommaire
INTRODUCTION .......................................................................................233
I- ANOMALIES ET MODIFICATIONS POSSIBLES SUR UNE PHOTO........233
II- PARAMÈTRES DE LA CRÉATION DES BOUTONS ..............................236
III- ADAPTATION DANS UN LOGICIEL D’INFOGRAPHIE : PHOTOSHOP..237
Résumé......................................................................................................247
Execices.....................................................................................................248
232
Exemple 1
dans l’esprit de réaliser votre projet, vous vous dites que vous-
allez devoir faire des photos des membres des clubs pour les intégrer à
l’article.
comment procèderez-vous?
vous avez besoin d’informations et vous ne savez pas où

les trouver, suivez ce cours.
J’apprends /cours
Introduction
Une photo est une image résultant d’une capture
spontanée d’un aspect du monde et un bouton est élément
graphique que propose les logiciels de conception d’image
pour permettre de masquer des informations. Modifier
une photo dans le but de la réparer ou de la transformer,
nécessite de l’introduire dans un logiciel d’infographie. De
manière générale, quelles sont les anomalies que peuvent
présenter une photo ? De même, lorsque l’on veut faire
des mutations, de quel chois de transformation disponi-
ble dans les logiciel d’infographie avons-nous ? en ce qui
concerne les boutons, comment les crée t – on en infogra-
phie ? enfin comment réalise t - on ces différentes opéra-
tions dans un logiciel précis ?
I- ANOMALIES ET MODIFICATIONS POSSIBLES SUR UNE

PHOTO :
Exemple1:
vous faites des photos des membres des clubs ex-
istant dans votre établissement et malheureusement pour
vous, ces photos possèdent des imperfections.
233
comment allez vous pouvoir réaliser votre article avec des mauvaises
photos?
un camarade un peu en avance sur vous apprend qu’un logiciel
d’infographie est susceptible de réparer beaucoup de problème de pho-
tos.
ah bon beaucoup, quels sont les types de problèmes qui peuvent affec-
tées une photos?
qu’elle est la méthode pour les réparer?
I-1- Anomalies possibles

Les anomalies les plus récurrentes sont :
les Yeux rouges : En l’absence de flash équipé du dispositif spé-
cial déjà étudié, il arrive que les portraits en lumière artificielle présen-
tent un défaut caractéristique : les pupilles font ressembler le sujet à
un lapin albinos. Les logiciels disposent de fonctions qui supprime ce
défaut de façon automatique.
La modification se fait en passant plusieurs fois l’outil sur la zone
représentant la pupille. La couleur devient plus opaque à chaque pas-
sage, ce qui permet un dosage très fin.
De manière générale, cette modification demande pour être efficace, que
l’image possède une définition d’au moins 800 X 600, en 150 Dpi. En
deçà, les pixels constituant les yeux sont trop peu nombreux et le résu-
ltat paraît “colorié”, donc pas très naturel.
la profondeur de champ : Les appareils à focale fixe possèdent

une grande profondeur de champ, se traduisant par une netteté éten-
due. Cette netteté, avantageuse en termes de latitude de mise au point,
peut s’avérer un inconvénient quand on désire renforcer l’intérêt d’un
sujet ou l’isoler d’un fond disgracieux.
Une fois encore, l’infographie vient à notre secours par l’application d’un
filtre de flou sur la zone excluant le sujet principal.
Les filtres sont nombreux et variés. La plupart des logiciels en offre une
vaste palette qui peut encore être agrandie par l’ajout de modules ex-
ternes (les fameux “Plugs In” dans Photoshop).
La présence des impuretés ou des traces disgracieuses. Que
les logiciels d’infographie permettent de recouvrir, d’effacer ou même de
retirer, comme nous le verrons dans le paragraphe consacré aux modi-
fications.
234
I-2- Modifications possibles
Les modifications que l’on trouve dans les logiciels les plus performants
sont :
Ajouter du texte à une image
C’est une fonction dont l’utilisation est facilement compréhensible, car
bien qu’une image valle mieux qu’un long discours, il arrive qu’un peu
d’écriture soit nécessaire pour préciser la situation que décrit l’image.
Retoucher une image.
Très utile en photographie numérique où la qualité brute des images
peut être, malgré les gros progrès réalisés sur les appareils actuels, en-
core améliorée, Les opérations de retouche obéissent toujours au même
cycle :
- ouverture d’un fichier ;

- modification de l’image
- et sauvegarde du fichier transformé.
Pour effectuer les retouches, les logiciels mettent à la disposition de
l’utilisateur toute une panoplie d’outils, de réglage et de commandes
spéciales. Les différentes fonctions se retrouvent dans toutes les ap-
plications graphiques parfois sous des formes variées mais exécutent
toujours la même tâche.
Déformer une image

Cette fonction permet de transformer une photo pour lui donner un as-
pect comique et méconnaissable à première vue, c’est elle qui est utilisée
dans les jeux comme la recherche des erreurs, et parfois la caricature.
Le trucage de l’image, (ajout ou retrait d’un objet d’une image)
Ajouter un objet dans une image cette fonction est importante entre au-
tre pour corriger les erreurs qu’une image peut contenir. Parfois, il suffit
de colorier l’anomalie ou le la gommer.
Extraire un objet dans une image
Remplacer le fond d’une image

Lorsqu’il ya dans une image un fond disgracieux ou indésirable, il est
facile à l’aide des calques et des outils de sélection, de découpage et de
copie, de changer son arrière plan ou de l’améliorer par endroit.
235
Remarque
les anomalies ne peuvent pas être citées de manière exaustive,
mais les plus récurentes ont été abordées dans ce paragraphe. à vous
maintenant d’enrichir vos connaissances.
Je pratique
1. Définir les termes suivants : réparations, yeux rouges, retouche
calque, fond
2. Citer quatre exemples d’anomalies que peut avoir une photo.
3. de quoiActivité
parlait d’intégration
cette partie.
II- PARAMETRES DE LA CREATION DES BOUTONS ET DES

LOGOS:
Exemple:
vous savez comment procéder pour réparer une photo, doréna-

vant. vous entre autre, vous vous demandez comment vous réusireze à
créer des boutons dans votre article.
qu’est ce que c’est que des boutons?

pourquoi devrais t-on les créer?
II-1 définition de bouton et de logos
II-1-1- Les boutons

Les boutons peuvent être définis comme des images significatives dans
ce sens qu’elles portent des textes ou des icones ayant un sens précis.
Les boutons sont conçus dans le but de faciliter la navigation dans les
pages web c’est-à-dire les sites web.
236
II-1- 2- Les logos

Les logos sont des images conçues dans le but de représenter une or-
ganisation, une association, une marque, …
Il est à noter que la créativité n’a pas une formule, c’est à force de con-
cevoir des boutons, des logos, des images que l’on finit par développer
cet aspect de la créativité.
III- ADAPTATION DANS UN LOGICIEL D’INFOGRAPHIE
Exemple1:
vous vous demandez comment appliquer toutes ces connaissances

si l’on ne pratique pas,
voici une méthode générale de retouche des images. après ce cours,

avec un peu de volonté, vous n’aurez plus besoin d’envoyer vos photos
au loboratoire.
III-1- Activités de modification des images
III-1-1 Ajouter du texte à une image
Pour réaliser ce travail, lançons l’application et suivons le protocole ci-

après.
Faire un clic droit sur l’outil texte que vous trouverez dans tous
leslogiciels, en faisant un effort d’attention.
Choisir une option de saisie de texte (horizontale ou verticale). Au-
tomatiquement un calque se crée et vous pouvez saisir votre texte.
Saisir le texte
On obtient le résultat suivant :
237
Je pratique
1. reprendre ctte activité en écrivant le mot danseuses verticalement
et à droite de l’image.
III-1-2 Retoucher une image à l’aide de l’outil Correcteur
Le procédé ou protocole de retouche d’une image à l’aide de l’outil Cor-

recteur est le suivant :
Lancer l’application logiciel d’infographie
Ouvrir l’image que vous voulez retoucher. Nous obtenons notre
image comme suit :
Cliquer sur l’outil Correcteur après avoir agrandit ou non, mais un

agrandissement permet de mieux voir l’anomalie à réparer.
Sélectionnez l’outil pièce et utilisez-le pour quadriller l’espace à

colorier.
Une boîte à motif s’ouvre dans la barre d’outils, cliquez sur la flèche à
gauche et faire glisser, pour dérouler la liste des motifs et choisir celui
que vous voulez appliquez sur l’espace à recouvrir. Nous choisissons ici
le motif Marron.
238
cliquer sur utiliser le motif.
On obtient le résultat ci-après
Je pratique
1. Application : Retoucher une image, mais cette fois utiliser l’outil
correcteur.
III-1-3 Déformer une image
Avec cette activité, c’est facile de faire carrière dans la caricature et de-
venir un bon caricaturiste. On va se charger de déformer l’image sui
vante. Le protocole est le suivant :
239
* Lancer le logiciel d’infographie.

* Ouvrir l’image du chat dans Photoshop.
* Déverrouiller le calque s’il est verrouiller en faisant : clic droit sur le
calque/convertir en objet dynamique.
* Faire Edition/transformation/déformation. On peut également faire
des transformations en utilisant la transformation personnalisée. Vous
observez que sur l’image il ya une grille de transformation.
* Dans la barre d’options, choisissez une déformation (poisson dans
notre cas). Vous pouvez vous amuser à faire différentes modifications.
* Enregistrer le résultat comme une image en faisant Fichier/enreg-
istrer sous. Dans la boite de dialogue qui s’ouvre spécifier le nom et le
format de l’image.
On obtient l’image ci-contre :
Je pratique
1. Application : Ouvrir une image et la déformer à votre guise
III-1-4 Ajouter un objet dans une image
Cette activité est très intéressante dans la mesure où elle vous permet
de truquer des images. Pour le faire il faut utiliser l’objet calque. Pour
une meilleure organisation, chaque calque doit contenir un seul objet.
Puis il faudra superposer les calques dans le bon ordre pour obtenir
l’image voulue.
Elle peut également vous servir pour modifier l’arrière plan ou le décor
d’une image.
Donnons nous comme travail d’ajouter au pied de notre précédente im-
age « lumière », le chat suivant:
qui a été préalablement déformé
240
On suppose au départ que vous avez l’image du chat déformé dans

un calque que vous nommez chaton. La procédure est la suivante :
* Déverrouiller les calques. On le fait dans le but de pouvoir déplacer

les calques
* Créer un nouveau calque en faisant : Calque/nouveau/calque
* Dans la fenêtre qui s’ouvre, inscrire juste le nom du calque : lumière
* Dans la palette calque cliquer sur le calque nommé lumière. Ceci
vous permet de vous situer dans ce calque que vous pouvez considérer
comme une feuille de dessin pour faire des modifications
* Il faut maintenant inscrire l’image de lumière en faisant simplement
: fichier/importer. La boite de dialogue qui s’affiche vous permet de re-
chercher l’image de lumière sur la base que vous connaissez le chemin
d’accès absolu.
* Dans la palette calque, glisser le calque lumière en dessous de celui
de chat à tel enseigne qu’en parcourant les calques de bas en haut, on
ait lumière, chaton
* Ajuster enfin les images sur les calques pour obtenir le résultat ci-
dessous
* Enregistrer le résultat.
Je pratique
1. Application : Refaire cette activité en ajoutant deux objets de votre
choix dans l’image.
III-1-5 Extraire un objet dans une image
Cette activité montre comment on peut retirer d’une image un ob-

jet particulier qui nous intéresse: le modifier.
241
l’insérer dans d’autres images, le conserver, L’extraction d’un objet de

son arrière plan peut se faire à l’aide de l’outil baguette magique ou
sélection rapide ou à partir du filtre Extraire. On peut également ex-
traire un élément dans une image en utilisant l’outil gomme d’arrière
plan, l’outil gomme, l’outil gomme magique pour effacer de l’image tout
élément différent de celui que l’on recherche.
Protocole d’extraction d’un objet dans une image en utilisant

l’outil baguette magique.
Soit à extraire le plateau des bras de la mère (en omettant les mains)
dans l’image suivante :
Lancer l’application logiciel d’infographie et Ouvrir l’image. Dans

votre cas, vous choisirez une image qui vous convient.
Dans la palette d’outil, choisir l’outil sélection rapide.
à l’aide de cliquer-glisser, sélectionner avec délicatesse le plat de
tarte, On peut constater que la sélection n’est pas exactement celle dé-
sirée ; on peut améliorer la sélection en utilisant les outils de sélection
rapide.
copier la sélection et la coller dans un nouveau calque.
Dans notre cas on obtient l’image ci-contre :
Je pratique
1. Application : Refaire cette activité en utilisant l’outil baguette
magique.
242
III- 2- Activités de création de bouton dans Photoshop
Un protocole de création d’un bouton est le suivant :

Lancer l’application Photoshop et créer un nouveau fichier en fai-
sant : fichier/nouveau
Dans la boite de dialogue qui s’ouvre, spécifier le nom et les dimen-
sions du bouton
Cliquer sur l’outil forme outil Rectangle arrondi dans la palette
d’outil matérialisé par
Dessiner dans la zone de travail le bouton
Choisir dans la palette style un style approprié. Dans cet exemple
nous choisissons le style coucher du soleil
On peut y ajouter du texte. Il suffit simplement de cliquer sur l’outil
texte spécifié par , puis cliquer sur le bouton et saisir. Les modifications
de style et forme peuvent être apportées au texte saisi. Pour le faire, voir
le chapitre créer les textes avec effet
appuyez
Voici un exemple de bouton :
Je pratique
1. Application : Refaire un bouton en utilisant un contour rectangu-
laire, et le message arrêter.
III-3- Activités de création des logos dans Photoshop

Les logos sont des images conçues dans le but de servir de symbole
à une organisation, une association, une marque, une entreprise ou
même un évènement (congrès, conférence…) ils sont généralement com-
posé de graphismes, d’images et d’écriture.
Il existe plusieurs outils qui permettent la création d’images à l’instar de
l’outil crayon, l’outil de Recadrage, l’outil gomme, l’outil forme,…
Pour créer un logo, il faut avoir une bonne dose de créativité, connaître
l’orientation des activités ce celui qui en a besoin et le public à qui il sera
adressé.
Voici un exemple de logo.
243
La palme a été faite par le pinceau, les autres matériels ont déjà été
utilisés dans ce cours.
Je pratique
Application: trouvez comment ce logo a été fait. à votre tour créez un
logo pour une société de vente de volaille sous toutes les formes.
III-4- Améliorer la production des documents de PAO (bande-

role d’affichage)
Dans cette partie nous allons montrer un document de publicité d’un

évènement. Cette façon de faire n‘est pas standard. Nous allons produire
le document que vous allez afficher à l’entré de l’établissement et peu
être ailleurs pour faire savoir que votre projection aura lieu et quand.
procédure de création d’un papier d’annonce
Étape 1 : Lancer l’application Photoshop et ouvrir un nouveau dossier

de 600 pixels de hauteur et de 300 pixels de largeur.
Étape 2 : remplissez l’arrière plan du papier par la procédure sélec-

tion du fond /édition/remplir et chois de la couleur ou du motif préfé-
ré. Vous pouvez aussi Importer une image pour le fond. Pour cela on
procède comme suit : fichier/ importer/ choisir le dossier dans lequel se
trouve votre image et choisir l‘image qui vous convient et valider sur OK.
Une fois l‘image importé, l‘étendre sur toute la zone afin de tout couvrir
le fond puis double cliquer dessus pour valider. Après avoir importé une
image
un nouveau calque est automatiquement créer. Voir l‘image
du motif que nous avons choisi :
Étape 3: Importer une autre image significative par rapport à l‘évènement.

Procéder de la même manière qu‘à l‘étape 2 pour importer l‘image. Une
fois l‘image importer le redimensionner afin qu‘il n‘occupe qu‘une petite
zone à gauche de la carte puis double cliquer. Un nouveau calque est
créé. Voir l‘image ci-dessous :
244
Étape 4 : Importer successivement une ou deux autres images signifi-

catives par rapport à l‘évènement. Procéder de la même manière qu‘à
l‘étape 2 pour importer l‘image. Une fois l‘image importer, redimension-
ner le afin qu‘il n‘occupe qu‘une petite zone à gauche, à droite ou dans
un coin de la carte puis double cliquer. Un nouveau calque est créé. Voir
les images ci-dessous :
Étape 5 : saisissez le message d‘invitation proprement dit. Vous pou-

vez saisir le mot suivant «le club informatique avec l’aide des élèves
de Iére TI vous invitent à vous rendre nombreux à la salle informatique,
le 11 février 9h :10, pour assister à la projection d’un documentaire sur
la bonne marche des clubs dans notre établissement) » dans un autre
calque avec une taille de police plus petite que celle du mot « Invitation ».
Etape 6 : importer quelques textes révélateurs que vous avez travaillés

à l’avance, de la même manière qu’avec une photo. Comme ce mot :
Voici la bande qui va annoncer à tous vos camarades et à tous les en-
cadreurs la venue de la présentation du documentaire que vous avez
réalisé tout au long de ces chapitres :
245
Je pratique
1. Application : Refaire une bande d’annonce.
246
Résumé
Retoucher les images ou des photos c’est leurs apporter des modifica-
tions visant à les rendre plus belles et plus expressives.la fabrication
des boutons et des logos quant à elle, nécessite de la créativité et de
l’application. Notons cependant que la création des logos vise à don-
ner le message le plus positif possible d’une structure qui recherche
de la publicité. Celle des boutons est faite dans l’optique de permettre
la manipulation des animations créées par ordinateur. Voyons donc
en quoi consiste la création de ces animations.
247
1- définir
image, bouton, logos, retouche de photo, calque.
2- Décrit la procédure d’ouverture d’un fichier image dans Photo-
shop.
3- Citez les types de retouche que Photoshop permet de faire sur
les images
4- Qu’elle type de retouche d’image utilise les outils tels que le
lasso, la baguette magique et la gomme ?
5- Décrire la procédure d’extraction d’un élément dans une image.
6- Décrire la procédure d’ajout d’un élément dans une image, quels
sont les outils qu’elle utilise ?
7- Créez le logo du club de Mathématiques de l’établissement.
qu’est ce qui représente les matthématiques ?
8- A quoi servent les boutons ?
9- Sous quelle extension sont enregistrés les fichiers images trans-
formés dans Photoshop ?
10- Ya t-il une procédure standart de fabrication de logos, si oui
décrivez là, sinon décrivez la votre.
248
Chapitre
CREATION DES ANIMATIONS
8
« L’innovation, c’est une situation qu’on choisit parce qu’on a une passion brû-
lante pour quelque chose. »
Steve Jobs
Dans le cadre de la création d’un article numérique énoncé ci-dessus, le

responsable du club informatique précise que cet article devra contenir une
petite animation de 2 minutes, montrant une scène qui prouve le dynamisme
des élèves de votre établissement. C’est quoi une animation ? Quel logiciel allez-
vous utiliser pour créer l’animation ? Quel sont les étapes de la conception
d’une animation ? Concevez et réalisez cette animation.
Pré-requis
* Décrire l’interface d’un logiciel d’infographie

* Savoir manipuler les outils de la boîte à outil
* Savoir manipuler les calques
Compétences
• Citer quelques logiciels permettant de réaliser des animations ;

• Citer les étapes de conception d’une animation ;
• Appliquer ces étapes dans un logiciel d’infographie ;
Leçons / Sommaire
INTRODUCTION.........................................................................................................251
I- NOTION D’ ANIMATION.......................................................................................251
II- CRÉATION D’UNE ANIMATION DANS UN LOGICIEL D’INFOGRAPHIE.............254
Résumé.....................................................................................................................262
Exercices...................................................................................................................263
250
Exeemple:
Dans la continuité de la réalisation de votre article, vous appren-

nez que vous devez réaliser un animation.
comment allez vous vous y prendre?
vous aves besoin d’informations et vous ne savez pas où les trouver,

cela tombe bien, vous avez un cours sur la réalisation des animations,
suivez ce coours!
J’apprends /cours
Introduction
L’animation consiste à donner l’illusion du mouvement à l’aide
d’une suite d’images. Ces images peuvent être dessinées, peintes, pho-
tographiées, numériques, etc. En infographe, l’animation est la partie
du processus de création graphique qui consiste à faire se mouvoir les
différents objets créés lors de l’étape de la modélisation en 3D ou bien
du dessin en animation classique. Le film d’animation est une technique
élaborée à partir d’images dessinées, d’images créées par ordinateur ou
de photographies qui sont “ montées “ dans une suite logique permet-
tant une impression d’activité et de mouvement. Ce processus répond
au principe de la représentation de chaque phase du mouvement et
du temps de passage des images. Dans ce chapitre nous étudierons
globalement la notion d’animation et ensuite nous étudierons les condi-
tions de leur réalisation dans un logiciel d’infographie
I- NOTION D’ANIMATION
Exemple:
vous vous faites à l’idée de créer des animations,

mais qu’est ce que c’est que une animation?
avec quoi réalise t’on une animation?
251
comment fait-on?
réaliser une animation est en effet très amusant, il suffit de savoir de
quoi il s’agit.
I-1- Historique de l’animation
L’animation a commencé à exister bien avant le cinéma. Le folio-

scope qui donne l’illusion de mouvement lorsqu’on le feuillette, est l’une
des premières méthodes d’animation. Il faut attendre le XIXe siècle pour
voir l’apparition d’appareils optiques (appelés jouets optiques) qui per-
mettent de voir des suites d’images animées. La première projection de
dessin animé fut réalisée par Émile Reynaud, qui eut lieu le 28 octobre
1892 au musée Grévin, soit 3 ans avant la séance du cinématographe
des Frères Lumière.
I-2- Eléments constitutifs d’une animation
Quelles que soient les techniques utilisées, le principe de création

d’animation est toujours le même : le mouvement est décomposé en une
succession d’images fixes dont la vision à une fréquence donnée donne
l’illusion du mouvement continu. Deux aspects sont importants :
Image par image : il faut représenter chacune des phases du mou-

vement réalisées et enregistrées image par image, quel que soit le système
de représentation choisi, quel que soit le moyen d’acquisition employé,
quel que soit enfin le procédé de restitution visuelle de l’animation.
Fréquence de restitution : les images sont restituées à une

fréquence régulière suffisante pour que le cerveau et l’inertie des phé-
nomènes entrant dans la vision, dont la persistance rétinienne, jouent
leurs rôles dans l’illusion. En cinéma la fréquence minimale était établie
à 12 images/seconde. Mais pour éviter un papillotement désagréable la
fréquence de 16 images/seconde s’imposa comme un minimum.
Pour économiser des images, il est possible de dupliquer chaque image.
La saccade sera perceptible ou non selon le contenu de l’image, la dif-
férence entre deux images qui se suivent.
I-3- Logiciels d’animation
Il existe différents logiciels, visant à la création d’animations. Cer-

tains permettant la création d’animations 2D ; et d’autres, nécessitant
plus d’expérience, liés à la création d’animations 3D.
252
Remarque
Il existe des logiciels qui ne sont utilisés que pour un usage ciné-
matographique, et sont souvent des logiciels très coûteux. Ils servent
(pour des professionnels) à faire des films d’animation comme ceux
de Disney par exemple, ou simplement à ajouter des effets spéciaux
Exemple de logiciels
Beneton Movie GIF Logiciel complètement gratuit d’animation GIF.

Anime Studio (anciennement Moho) Logiciel, au prix abordable
pour le grand public, spécialisé en animation 2D incluant quelques
fonctionnalités 3D.
ToonBoom Logiciel spécialiste en animation 2D utilisé par Warner
Bros et Disney.
http://www.toonz.com/index.htm utilisé par les Studio Ghibli.
Macromedia Flash Logiciel de 2D, de très bonne qualité, pouvant
aller jusqu’à des animations très poussées.
Swift 3D Logiciel de 3D particulièrement.
laCartoonerie.com Site Internet proposant en ligne tous les outils
(2D + personnages en 3D) pour créer facilement puis diffuser son ani-
mation gratuitement.
ktoon Logiciel libre d’animation sous linux
Je pratique
1. Définir les termes suivants : Animation, image, le procédé image
par image, Fréquence de restitution.
2. Citer quatre oeuvres d’animation que vous connaissez.
3. de quoi traite cette partie?
253
II- CREATION D’UNE ANIMATION DANS UN LOGICIEL

D’INFOGRAPHIE
Exemple:
voila que vous ête renseignez sur ce que c’est que l’animation, mais
savez-vous avec quel outil spécifique l’on réalise les animations dans les
logiciels,?
le matériel d’animation de l’infographe est contenu dans la palette

d’animation.
II-1- Outils de création d’animation : la palette d’animation
La palette d’animation est la boite d’outils qui permett de créer, d’afficher

et de définir des options pour les images d’une animation. Dans Pho-
toshop. L’accessibilité à cette palette et ses outils obéit au processus
suivant :
Pour l’afficher : Choisissez Fenêtre > Animation. Une coche indique
que la palette est activée.
pour utiliser son menu : Cliquez sur le bouton dans le coin supé-
rieur droit de la palette pour accéder aux commandes de manipulation
des animations.
Pour modifier la taille des vignettes d’animation : Choisissez Op-
tions de palette dans le menu de la palette Animation, sélectionnez une
taille de vignette, puis cliquez sur OK.
II-2- Les opérations proposées par la palette d’animation
Il y en a 5, la définition de la boucle, la définition d’un délai de l’image,

la sélection et l’ajout de l’image et enfin la réorganisation et suppression
de l’image.
- Définition de la boucle
La boucle est une option qui permet de spécifier combien de fois une
séquence d’animation sera répétée. Pour spécifier une boucle :
¥ Cliquer sur la case de sélection de l’option de boucle dans le
coin inférieur gauche de la palette Animation.
¥ Sélectionner une option de boucle : Une fois, Toujours ou Autre
254
- Définition d’un délai pour les images
On peut définir un délai (temps pendant lequel est affichée une

image) pour une ou plusieurs images dans une animation. Le délai est
affiché en secondes. Pour définir un délai il faut :
¥ Sélectionnez une ou plusieurs images.
¥ Dans la palette Animation, cliquer sur la valeur Délai, sous
l’image sélectionnée, pour afficher le menu contextuel.
¥ Spécifier le délai en Choisissant une valeur dans le menu contex-
tuel, puis cliquer sur OK.
- Sélection d’images
Avant de travailler sur une image, il faut la sélectionner en tant

qu’image active. Le contenu de l’image activée apparaît dans la fenêtre
du document. On peut sélectionner plusieurs images, contiguës ou non,
afin de les modifier ou de leur appliquer des commandes en tant que
groupe.
Pour sélectionner une image, il suffit de cliquer dessus dans la palette
Animation ou dans la palette Calque.
Pour sélectionner plusieurs images contiguës, cliquez sur une seconde
image tout en maintenant la touche SHIFT enfoncée. La seconde image
et toutes les images entre la première et la seconde sont ajoutées à la
sélection.
Pour sélectionner plusieurs images non contiguës, cliquez sur les im-
ages supplémentaires à ajouter à la sélection tout en appuyant sur la
touche CTRL.
- Réorganisation et suppression des images
On peut changer la position des images dans une animation et

inverser l’ordre des images contiguës sélectionnées, supprimer des im-
ages sélectionnées ou l’animation entière.
Pour changer la position d’une image :
¥ Sélectionner l’image à déplacer dans la palette Animation
¥ Faire glisser la sélection vers la nouvelle position.
Pour inverser l’ordre des images contiguës :
¥ Sélectionner les images contiguës à inverser.
¥ Choisir Inverser les images dans le menu de la palette Animation.
Pour supprimer des images sélectionnées :
Dans la palette Animation, utiliser l’une des méthodes suivantes :
¥ Faire glisser l’image sélectionnée vers le bouton Corbeille.
255
¥ Sélectionner Supprimer une image dans le menu de la palette.

¥ Cliquer sur le bouton Corbeille, puis sur Oui pour confirmer la
suppression.
Pour supprimer une animation entière :
Sélectionner Supprimer l’animation dans le menu de la palette
d’animation.
- Ajout d’images
La première étape de la création d’une animation consiste à ajou-

ter des images. Si une image est ouverte, la palette Animation l’affiche
comme première image d’une nouvelle animation. Chaque image qu’on
ajoute débute comme duplication de l’image précédente. Modifier en-
suite l’image en utilisant la palette Calque. Pour ajouter une image à
une animation, on dispose de plusieurs options :
¥ Dans la palette Animation, cliquer sur le bouton Duplication des
images sélectionnées
¥ Dans le menu de la palette, choisir Nouvelle image.
Remarque
On peut utiliser la commande Trajectoire pour ajouter ou
modifier automatiquement une série d’images entre deux images ex-
istantes.
Les fonctionnalités des différentes palettes d’un logiciel
d’infographie dépendent de la performance de celui-ci. On ne retrouve
pas forcément tous ces boutons dans les logiciels d’infographie.
256
Je pratique
1. Définir les termes suivants :Palette d’animation, sélection d’image,
boucle, delai pour les images.
2. Citer quatre opération qu’on peut faire dans la palette d’animation.
3- Processus de création d’animation
Exemple:
animer l’image d’un cheval de manière à donner l’illusion de son
déplacement à travers un paysage.
Étape 1 : ouvrir une image qui servira d’arrière plan covenant à

l’animation que vous voulez faire, dans ce cas, voici l’image choisie.
Voici le cheminement : fichier/ouvrir/choix de l’image dans l’interface

ouverte/ouvrir.
Étape 2 : faire des dessins à l’aide du crayon ou chercher sur internet

une bande dessinée à qui vous pourrez emprunter quelques person-
nages. Voici notre image.
257
Étapes 3: il faut que vous ayez la représentation de votre personnage

dans toutes les positions intermédiares du mouvement, qu’on veut lui
donner l’illusion de faire.
Voici une série d’image :
Étape 4: créer un nouveau calque et importer dans celui ci la première

image du cheval. Dans le cas où vous avez dessinez, sélectionner le des-
sin, dans fichier/copier et sélectionnez dans l’image de fond l’espace où
vous voulez mettre l’image et dans fichier, cliquez su coller dedans.
Répéter la manœuvre précédente en important toutes les images,

les unes après les autres. Veillez à ce qu’elles occupent des positions
successives sur l’image finale bien qu’elles aient chacune leur calque,
de manière à ce que l’une ne cache pas l’autre.
Étape 6 : Affichez le panneau Animation en allant dans le menu Fenê-

tre/ Animation. Si cette dernière commande n’apparaît pas, c’est qu’il
faut d’abord sélectionner la commande Afficher toutes les commandes,
258
située en bas du menu déroulant du menu Fenêtre. Si vous tra-

vaillez dans Photoshop 7, basculez dans Adobe Image Ready. La palette
d’animation s’ouvre avec comme première image, l‘image de la zone de
travail (les images alignées d’un cheval).
Étape 7: pour simuler le déplacement du cheval, cette phase est indis-

pensable :
Rendez invisible les calques de toutes les images du cheval, sauf la

première et le calque de fond. Vous obtenez ceci :
Dans la palette d’animation, cliquez sur le bouton« reproduit l’image

sélectionné » situé au bas de la palette, la même image se crée à côté
de la première (dans la palette d’animation).
Sur l’image originale, placé le sélecteur rectangulaire, cliquez dans
la barre de menu, image/dupliquer, cliquez sur OK dans l’interface qui
se crée. une image comme celle là se crée à côté de la première.
Sélectionnez la nouvelle image et dans le calque, rendez invisible,
le calque de la première image de cheval et rendez visible celle de la
deuxième image. la première image est là et puisque on a rendue visible
le calque de la seconde image, elle est aussi déja visible dans la nouvelle
fenêtre issue de la duplication. voici ce que devient le début du mouve-
ment de notre cheval:
259
Revenez dans la palette où c’est la deuxième image qui est main-

tenant sélectionnée, faite la même manœuvre que ci-dessus et une fois
la troisième image apparu dans la palette, remonter sur la deuxième
image originale précédemment créée pour la dupliquer, cela fait, placée
sur la troisième image originale (nouvellement créée) pour rendre invis-
ible le calque précédent et rendre visible le sien. Faite cette opération
pour toutes les images l’une après l’autre dans la palette et pour les i
mages originales, jusqu’à obtenir le résultat suivant :
Etape 8 : cliquez sur « une fois » situé à base de la patte d’animation

et choisissez autre pour définir le nombre de boucle à 4 et le délai
d‘apparition de chaque image à 1 seconde. Validez.
Tester l‘animation en cliquant sur le bouton de lecture.
Étape 9: Enregistrer le document tout d‘abord comme un projet modifi-

able avec l‘extension .PSD ou .PDD ; pour importer l‘animation sur le
web, faire Fichier > Enregistrer pour le web et ses
périphériques. Dans la fenêtre qui s‘ouvre, s‘assurer que l‘extension est
.gif et valider. Votre fichier sera publier sur l’adresse URL que vous au-
rez entrez.
260
Remarque
à la fin de la réalisation, toutes les images à réalisées sont
aligneées les unes après les autre, dans l’ordre de leur apparition au
moment de l’animation.
lorsque l’on appuie sur play, les images sont lues les unes après
les autres, donnant l’impression que le cheval cours.
Je pratique
1. Définir les termes suivants :Reproduire, dupliquer, lecture, rendre
visible, rendre invisible.
2. Citer quatre opération qu’on peut faire dans la palette d’animation.
261
Résumé
Une animation est une séquence d’images affichées dans le temps
Chaque image diffère très légèrement de la précédente, créant une illu
sion de mouvement lorsque les images sont visualisées en succession
rapide. L’animation se fait à partir des palettes animation et calque.
La palette animation offre diverses opérations parmi lesquelles :
Définition de la boucle et du délai d’apparition des images ;
La sélection de la fréquence d’apparition, la ré-
organisation, l’ ajout, la suppression d’images
La palette des calques facilitent la manipulation des
calques. Les calques sont des couches transparentes su-
perposées. L’image est déposée sur un calque. Ces derni-
ers permettent de travailler sur un objet sans altérer les autres.
Le montage d’une animation nécessite une bonne conception au départ.
262
Exercice 1: quelques questions:
1- définir : animation, importer, calque, arrière plan, extension de

fichier
2- Dans quel but peut être faite une animation ?
3- Quelles sont les palettes qui permettent de faire une animation?
4- Citer 05 boutons de la palette d‘animation
5- Donner deux opérations qu‘on peut effectuer dans la palette
d‘animation
Exercice2: les calques.

3. A quoi sert la palette des calques ?
4. Définir et donner le rôle d‘un calque.
EXERCICE 3 : les animations

1. Écrire le mot suivant EXAMEN dans la zone de travail en plaçant
chaque lettre du mot dans un calque différent.
2. Appliquer une couleur différente à chaque lettre du mot.
3. Appliquer des effets à chaque calque contenant une lettre.
4. Ouvrer la palette d‘animation , insérer les différentes lettres et
monter une animation faisant apparaître de façon progressive chaque
lettre du mot.
5. Enregistrer le document comme un projet et ensuite comme un
fichier inséré dans une page web.
EXERCICE 4: les images

1- qu’est ce qu’une image?
2- de quoi est constituer une image?
3- combien de type d’images existe -t-il?
EXERCICE 5: les logos et les boutons

1- à quoi servent les boutons?
2- dans qu’elles circonstances les logos sont-ils utilisés?
3- qu’els autre objet pouvant être réalisé par un logiciel d’infographie
dans le but de faire la publicité, peut-tu citer?
263
Projet 2
CREATION D’UN PROSPECTUS ANNONCANT
L’OUVERTURE D’UN CENTRE CULTUREL
Votre oncle vient de créer un centre culturel proposant des services de Cyber café,
photocopie, téléphone international et national, librairie accessible par abonnement
à différents prix, pour les élèves, les étudiants, les enseignants et les autres. Voulant
profiter des connaissances de son neveux, qui fait première TI, il vous demande de
lui réaliser un prospectus présentant tous les services qu’il offre de manière à attirer
le public. Ces prospectus seront distribués un mois avant la date d’ouverture de son
centre.
Pré-requis
* Avoir déjà vu à quoi ressemble un prospectus

* Avoir une idée des éléments que l’onprésente généralement
sur prospectus
* Avoir un sens pratique minimum
Compétences
• Penser entièrement un projet et le réaliser

• Un esprit de créativité exercé
• Cultiver la créativité d’entreprise
• Connaître la structure de réalisation d’un prospectus
Leçons / Sommaire
I- DÉFINIR LE CAHIER DES CHARGES.................................266

II- COURS DE FORMATION D’UN PROSPECTUS...................267
265
I- DEFINIR LE CAHIER DE CHARGE
Etablir le cahier des charges, c’est se poser toutes les bonnes questions
sur le projet lui-même et sur les outils que l’on va être amené à utiliser.
1- Identifier les besoins :

Qu’est ce que votre oncle vous demande de faire ? créer un pro-
spectus qui présente, explique et met en valeur, les services qu’offre son
centre.
Dans quel but ? lui permettre d’attirer la clientèle.
Vous devez donc déterminer la structure du document : Vous devrez

ensuite définir la manière dont l’information sera répartie et condensée
de manière à donner un maximum d’information aux éventuels clients,
sur une seule face d’un bout de papier.
Elaborer la charte graphique : Vous devrez ensuite définir l’aspect du

bout de papier : mise en page, typographie, titre, texte et emplacement
des éléments graphiques.
Rechercher les ressources : Réunir tous les éléments dont vous aurez
besoin pour réaliser le document : textes, illustrations, fonds d’écran,
etc.
2- La conception :
Concevoir et rédiger les textes : Avant d’entamer la réalisation de
la page, vous recenser les informations qui doivent être connues par le
public, les classer, sélectionner les plus importantes.
Préparer les images : Vous devrez également préparer les images que
vous Souhaitez intégrer dans votre document, de manière à ce qu’il ait
un poids raisonnable et soient de bonne qualité.
3- La réalisation :
Réaliser la pages : Réaliser une page modèle, la présenter à votre
oncle et, après modification, la créer en utilisant un logiciel d’infographie.
(Photoshop ou Photo Impact, qui est libre et téléchargeable sur internet)
266
4- Tester le prospectus :
Il vous faudra ensuite le faire voir à une ou plusieurs personnes à

qui il est censé être adressé pour voir si l’on comprend aisément ce que
vous exprimez.
Vérifier qu’il ne contient pas d’erreur.
5- la Publication
Partager le prospectus à toute personne que vous rencontrer, en

n’oubliant pas de cibler de manière stratégique, les parents qui ont
beaucoup d’enfant, les enseignant, les étudiants, puisqu’ils auront
des prix avantageux !
Recueillir les impressions : La dernière étape consistera à surveiller
leurs capacité à convaincre, afin d’assurer la réussite du lancement du
centre.
II- METHODE DE PRODUCTION D’UN PROSPECTUS
Il est identique à la procédure de fabrication d’une banderole d’affichage,

réalisé dans le chapitre 3 de ce module. notamment dans le sous titre:
III-4-Améliorer la production des documents de PAO (banderole
d’affichage)
les 5 étapes de de cette réalisation dans un logiciel d’infographie, y sont

décrites pas à pas.
il ne vous restera qu’ à ajouter les paramêtres liès au prix de quelques
services dans le méssages écris.
Je pratique
Réalisez donc sur la base de ce travail, un prospectus d’annonce
d’ouverture d’un commerce.
267
Module
CONNAISSANCE DE L’NVIRONNEMENT DE L’ORDINATEUR
4
COMPETENCES
- Identifier les composants d’un ordinateur

- Monter les composants d’un ordinateur
- Installer un système d’exploitation
- Entretenir un ordinateur
CHAPITRE 9 : LES ÉLÉMENTS DE BASE DE L’ORDINATEUR............268

CHAPITRE 10 : LE MONTAGE D’UN ORDINATEUR..............................297
CHAPITRE 11 : INSTALLATION D’UN SYSTÈME D’EXPLOITATION......327
CHAPITRE 12 : ENTRETIEN D’UN ORDINATEUR.................................359
Chapitre
LES ÉLÉMÉNTS DE BASE DE L’ORDINATEUR
9
“ Les machines un jour pourront résoudre tous les problèmes, mais jamais au-
cune d’entre elles ne pourra en poser un ! ”
Albert Einstein
L’utilisation de l’outil informatique est de nos jours de plus en plus

vulgarisé. Aussi les ordinateurs se retrouvent dans presque toutes les struc-
tures de la société. Ces outils de traitements de l’information deviennent
donc indispensables pour la gestion des données. Il est donc interressant
de s’appesentir sur les constituants de cette technologie, qui accompagne
les Hommes au quotidien.
Pré-requis
* Savoir lire et Maitriser les unités de mésure en informatique;

* Connaître l’histoire de l’informatique ;
* Ëtre curieux afin d’aller à la découverte de l’architecture d’un ordi-
nateur;
* Avoir l’esprit ouvert;
Compétences
• Identifier les éléments de base de l’ordinateur

• Identifier les différents composants de l’ordinateur et comprendre leur
fonction
• Identifier les types de périphériques
• Distinguer les différents ports de connexion et leurs fonctions
• Identifier les ports et connecteurs pour les périphériques
Leçons / Sommaire
I. LA STRUCTURE DE L’ORDINATEUR.....................................................271
II. CATÉGORISATION DES TYPES DE PÉRIPHÉRIQUES...........................282
III. LOGICIELS ET DOMAINES D’APPLICATION DE L’INFORMATIQUE ......286
Résumé..................................................................................................290
Exercices................................................................................................392
270
Vos parents décident de doter chaque enfant d’’un ordinateur per-

sonnel pour réaliser des tâches selon les aspirations et convenances de
chacun. Les appareils ainsi achetés, sont livrés en l’état de sortie d’usine.
Il vous est demandé de procéder à leur première mise en marche.
A partir de ce problème, des préoccupations se posent à la

suite de quelques constats :
• Une démarche pour résoudre le problème est proposée ;
• Rédiger la méthode ou le processus qui permet de résoudre le
problème
ETAPE 1
Ainsi, pour procéder à la mise en marche des nouveaux appareils
ou pour procéder à l’ajout ou au retrait d’un composant, il est d’abord
primordial de connaître les composants physiques de bases d’un ordi-
nateur.
I. LA STRUCTURE DE L’ORDINATEUR
J’apprends /cours
L’informatique, contraction des mots information et automa-
tique, est la science du traitement de l’information. Apparue au milieu
du 20ème siècle, elle a connu une évolution extrêmement rapide. La
mise en œuvre de ces systèmes s’appuie sur deux modes de réalisa-
tion distincts, le matériel et le logiciel. Le matériel (hardware) corre-
spond à l’aspect concret du système : unité centrale, mémoire, organes
d’entrées-sorties, etc.
I.1) Le boîtier
C’est la grande boîte qui contient l’unité centrale. On a :
271
* Le boîtier horizontal (Desktop) : il permet de poser le moniteur dessus
Figure 9.1 : Le boîtier horizontal (Desktop)
* Le boitier vertical : on a la mini tour, la tour
Figure 9.2 : Exemples de boitier vertical

L’unité centrale est composée par le microprocesseur qui est chargé
d’interpréter et d’exécuter les instructions d’un programme, de lire ou de
sauvegarder les résultats dans la mémoire et de communiquer avec les
unités d’échange. Toutes les activités du microprocesseur sont cadencées
par une horloge.On caractérise le microprocesseur par :
– sa fréquence d’horloge : en MHz ou GHz
– le nombre d’instructions par secondes qu’il est capable d’exécuter : en
MIPS
– la taille des données qu’il est capable de traiter : en bits
I. 2) La carte mère
Il s’agit de l’élément constitutif principal de l’ordinateur (en anglais
« mainboard » ou « motherboard ».La carte mère est le socle permettant la
connexion de l’ensemble des éléments essentiels de l’ordinateur.
C’est donc l’un des principaux composants du PC. C’est sur elle que
tous les autres éléments viennent se connecter : alimentation, processeur,
Bios, mémoire, cartes d’extension, disques, clavier, souris, modem, impri-
mante.
272
Figure 9.3 : L’architecture de la carte mère
I. 3) Le ventilateur
Le ventilateur est influencé par la forme du boîtier.
Figure 9.4: vue d’un ventilateur Figure 9.5: ventilateur installé
I. 4) L’Alimentation
C’est l’un des composants les plus importants de tout PC, car c’est
elle qui fournit aux différents éléments de la machine l’électricité dont
ils ont besoin pour fonctionner.
Ses rôles sont :
-Convertir le courant électrique en courant compatible avec le circuit
électrique de l’ordinateur.
-Veiller à ce que l’ordinateur dispose du courant adéquat pour fonction-
ner.
273
Figure 9.6 : Les boitiers d’Alimentation
I. 4) Les bus
Un bus est un ensemble de fils qui assure la transmission du même
type d’information. On retrouve trois types de bus véhiculant des in-
formations en parallèle dans un système de traitement programmé de
l’information :
- un bus de données : bidirectionnel qui assure le transfert des informa-
tions entre le microprocesseur et son environnement, et inversement. Son
nombre de lignes est égal à la capacité de traitement du microprocesseur.
- un bus d’adresses: unidirectionnel qui permet la sélection des informa-
tions à traiter dans un espace mémoire (ou espace adressable) qui peut
avoir 2n emplacements, avec n = nombre de conducteurs du bus d’adresses.
- un bus de commande: constitué par quelques conducteurs qui assurent
la synchronisation des flux d’informations sur les bus des données et des
adresses.
Figure 9.7 : schéma logique des bus
274
Remarque
●● Tous les bus « internes » (PCI, IDE, AGP) vont être amenés à disparaî-
tre très rapidement et seront remplacés par des bus série :
●● Le Serial Ata, remplaçant du bus IDE, présente des débits de 150
Mo/s qui passeront bientôt à 300 Mo/s dans la prochaine révision du
bus. Il permet de connecter des disques durs ou des lecteurs optiques.
●● Le PCI Express, remplaçant des bus PCI et AGP, permet d’atteindre
des débits de 250 Mo/s dans sa version de base qui peuvent monter
jusqu’à 8Go/s dans sa version x16 destinée à des périphériques néces-
sitant des bandes passantes très élevées (application graphique).
●● Les bus de connexions filaires tendent à être remplacés par des sys-
tèmes de communications sans fils. A l’heure actuelle, il existe :
●● le Bluetooth qui offre actuellement un débit de 1 Mb/s pour une por-
tée d’une dizaine de mètre et qui va servir à connecter des périphériques
nécessitant des bandes passantes faibles (clavier, souris, etc…).le WIFI
(WIreless FIdelity Network) qui permet de connecter des ordinateurs en
réseau. La dernière révision permet des débits de 54 Mb/s.
Figure 9.8 : schéma logique des bus Figure 9.9 : schéma logique des bus
I.5) Processeur
a. Définition du rôle du processeur et de ses caractéristiques
Un Processeur ou microprocesseur: c’est l’élément clé de l’ordinateur et
à la base de tous les calculs. Il résulte de l’intégration sur une puce de
fonctions logiques combinatoires (logiques et/ou arithmétique) et séquen-
tielles (registres, compteur, etc.).
275
Il est capable d’interpréter et d’exécuter les instructions d’un pro-

gramme. Son domaine d’utilisation est donc presque illimité. Un proces-
seur est scindé en trois parties :
- l’unité logique qui assure les opérations de type logique
- l’unité arithmétique qui réalise les opérations mathématiques
- l’unité de commande et de contrôle qui contrôle de fonctionnement de
l’ordinateur. Le processeur est caractérisé par:
-Sa fréquence qui est la vitesse d’horloge d’un ordinateur, exprimée en
nombre de cycles par seconde. Elle s’exprime en Mégahertz (MHz)
-Sa marque : PENTIUM, Celeron, Cyrix, AMD (Advanced Micro Designs)
Dans le monde des PC, les principaux fabricants sont : INTEL, IBM,
CYRIX, AMD, TEXAS INSTRUMENT…
Figure 9.10 : schéma logique des bus

b. Performances d’un microprocesseur
On peut caractériser la puissance d’un microprocesseur par le
nombre d’instructions qu’il est capable de traiter par seconde. Pour
cela, on définit : le CPI (Cycle Par Instruction) qui représente le nombre
moyen de cycles d’horloge nécessaire pour l’exécution d’une instruction
pour un microprocesseur donné.
Le MIPS (Millions d’Instructions Par Seconde) qui représente la puis-
sance de traitement du microprocesseur.
c. L’horloge
L’horloge de l’Unité Centrale est un métronome électronique qui
lance des “tops” à intervalles de temps réguliers qui donnent la ca-
dence à laquelle travaille l’ordinateur et permettent à l’ensemble des
composants de l’Unité Centrale de se synchroniser. Plus les tops sont
rapprochés, plus l’ordinateur est rapide. La fréquence de l’horloge se
compte en nombre de tops par secondes, dont l’unité de mesure est le
Hertz, ou plutôt le Mega-Hertz MH (1MH = 106 Hertz). En 2001 sont sor-
ties les premières puces cadencées à 1 Giga-Hertz (soit 109 Hetz).
276
d. Notion d’architecture RISC et CISC

Actuellement l’architecture des microprocesseurs se composent de deux
grandes familles : L’architecture CISC (Complex Instruction Set Com-
puter) ET L’architecture RISC (Reduced Instruction Set Computer).
Le choix dépendra des applications visées. En effet, si on diminue le
nombre d’instructions, on crée des instructions complexes (CISC) qui
nécessitent plus de cycles pour être décodées et si on diminue le nom-
bre de cycles par instruction, on crée des instructions simples (RISC)
mais on augmente alors le nombre d’instructions nécessaires pour réal
iser le même traitement.
I.6) Les CHIPSETS
Le chipset peut être défini comme un ensemble de circuits (Chip
Set) intégrés situés sur la carte mère qui exécutent les fonctions les plus
essentielles d’un système informatique.
Le chipset est constitué de deux composants : La puce NORTH
BRIDGE et La puce SOUTH BRIDGE.

Figure 9.11 : présentation des CHIPSETS
I. 7) Les mémoires
a. Identification des types de mémoires
Une mémoire est un circuit à semi-conducteur permettant
d’enregistrer, de conserver et de restituer des informations (instructions
et variables). C’est cette capacité de mémorisation qui explique la poly-
valence des systèmes numériques et leur adaptabilité à de nombreuses
situations. Les informations peuvent être écrites ou lues. Il y a écriture
lorsqu’on enregistre des informations en mémoire, lecture lorsqu’on ré-
cupère des informations précédemment enregistrées.
Figure 9.12 : Présentation d’exemples de barrettes de RAM
277
i. Les mémoires vives (RAM)

Une mémoire vive sert au stockage temporaire de données. Elle doit
avoir un temps de cycle très court pour ne pas ralentir le microproces-
seur. Les mémoires vives sont en général volatiles : elles perdent leurs
informations en cas de coupure d’alimentation. Certaines d’entre elles,
ayant une faible consommation, peuvent être rendues non volatiles par
l’adjonction d’une batterie. Il existe deux grandes familles de mémoires
RAM (Random Acces Memory : mémoire à accès aléatoire) :
Les SRAM : RAM statiques et Les DRAM : RAM dynamiques
ii. Les mémoires mortes (ROM)

Pour certaines applications, il est nécessaire de pouvoir conserver des in-
formations de façon permanente même lorsque l’alimentation électrique
est interrompue. On utilise alors des mémoires mortes ou mémoires à
lecture seule (ROM : Read Only Memory). Ces mémoires sont non vola-
tiles. Ces mémoires, contrairement aux RAM, ne peuvent être que lue.
L’inscription en mémoire des données reste possible mais est appelée
programmation. Suivant le type de ROM, la méthode de programmation
changera. Il existe donc plusieurs types de ROM :
• ROM : Elle est programmée par le fabricant et son contenu ne peut
plus être ni modifié, ni effacé par l’utilisateur.
• PROM : (Programmable ROM) C’est une ROM qui peut être pro-
grammée une seule fois par l’utilisateur La programmation est réalisée
à partir d’un programmateur spécifique.
• EPROM: (Erasable Programmable ROM) est une PROM qui peut être
effacée.
• EEPROM : (Electically EPROM) est une mémoire programmable et
effaçable électriquement.
• FLASH EPROM: La mémoire Flash s’apparente à la technologie de
l’EEPROM. Elle est programmable et effaçable électriquement comme
les EEPROM.
b. Caractéristiques d’une mémoire

-La capacité : c’est le nombre total de bits que contient la mémoire.
Elle s’exprime aussi souvent en octet.
-Le format des données : c’est le nombre de bits que l’on peut mé-
moriser par case mémoire. On dit aussi que c’est la largeur du mot mé-
morisable.
-Le temps d’accès : c’est le temps qui s’écoule entre l’instant où a
été lancée une opération de lecture/écriture en mémoire et l’instant où la
première information est disponible sur le bus de données.
-Le temps de cycle : il représente l’intervalle minimum qui doit sé-
parer deux demandes successives de lecture ou d’écriture.
278
-Le débit : c’est le nombre maximum d’informations lues ou écrites

par seconde.
-Volatilité : elle caractérise la permanence des informations dans
la mémoire. L’information stockée est volatile si elle risque d’être altérée
par un défaut d’alimentation électrique et non volatile dans le cas con-
traire.
c. Critères de choix d’une mémoire
Les principaux critères à retenir sont :
-Capacité
-Vitesse
-Consommation
-Coût
d. Notion de hiérarchie mémoire
Une mémoire idéale serait une mémoire de grande capacité, capable
de stocker un maximum d’informations et possédant un temps d’accès
très faible afin de pouvoir travailler rapidement sur ces informations.
Mais il se trouve que les mémoires de grande capacité sont souvent très
lente et que les mémoires rapides sont très chères.
Figure 9.13 : Présentation schématique des hiérarchies mémoire

• Les registres sont les éléments de mémoire les plus rapides. Ils sont
situés au niveau du processeur et servent au stockage des opérandes
et des résultats intermédiaires.
• La mémoire cache est une mémoire rapide de faible capacité desti-
née à accélérer l’accès à la mémoire centrale en stockant les données
les plus utilisées.
• La mémoire principale est l’organe principal de rangement des in-
formations. Elle contient les programmes (instructions et données) et
est plus lente que les deux mémoires précédentes.
279
• La mémoire d’appui sert de mémoire intermédiaire entre la mé-

moire centrale et les mémoires de masse. Elle joue le même rôle que la
mémoire cache.
• La mémoire de masse est une mémoire périphérique de grande ca-
pacité utilisée pour le stockage permanent ou la sauvegarde des infor-
mations. Elle utilise pour cela des supports magnétiques (disque dur,
ZIP) ou optiques (CDROM, DVDROM).
Remarque : Les disques durs, disquettes, CDROM, etc. sont des périphé-
riques de stockage et sont considérés comme des mémoires secondaires.
I. 8) LES PORTS I/O

Elles permettent d’assurer la communication entre le microproces-
seur et les périphériques. (Capteur, clavier, moniteur ou afficheur, im-
primante, modem, etc…).On distingue :
a. Le port série
L’interface série asynchrone a été la première à proposer une com-
munication de système à système. Le terme asynchrone sous−entend
qu’il n’y a aucune synchronisation ou signal d’horloge pour rythmer le
transfert. Le terme d’interface série décrit la méthode utilisée pour l’envoi
des données bit par bit, à la file indienne. Les usages les plus courants
du sériel sont : les modems ; les traceurs ; la souris.
Les prises séries : Il existe deux types de prises séries: la DB9 et la
DB25. Ces deux prises sont à pins et sont de forme trapézoïdale. La DB9
possède 9 pins, elle est généralement utilisée pour la connexion d’une
souris ou d’un modem. La DB25 possède 25 pins. Un PC est générale-
ment vendu avec 2 prises sérielles, le COM1, généralement une DB9 et
le COM2 de type DB9 ou DB25. En fait, le PC supporte jusqu’à 4 COM.
b. Le port parallèle
Le port parallèle d’un PC est basé sur un transfert de type parallèle.
C’est−à−dire que les 8 bits d’un octet sont envoyés simultanément. Ce
type de communication est nettement plus rapide que celui d’un port
série. Le principal défaut de ce type de port est que de longs câbles ne
peuvent être utilisés sans l’adjonction d’un amplificateur de signal en
ligne.
c. Le port USB
Ce nouveau port se présente sous la forme de deux petites prises
à l’arrière du PC. Universal Serial Bus permet de gérer les périphériques
externes comme un réseau. Les périphériques sont reliés entre eux par
un mince câble unique. Ce dernier ne se contente pas de permettre aux
données de circuler, il va jusqu’à fournir l’alimentation électrique de
chaque composant.
280
d. LES DMA (Direct Memory Access)

Le DMA est un canal utilisé pour les transferts de données à haute
vitesse. Il est souvent désigné sous le nom de canal d’accès direct à
la mémoire. Il va être utilisé avec les composants nécessitant de gros
transfert de données à la plus haute vitesse possible.
Figure 9.14 : Vues des différents ports d’entrée et sortie

• Sortie TV
Je pratique
Definir et donner les rôles des composants suivants :
1) BUS
2) MEMOIRE
3) RAM
4) PORTS I/O
5) LA CARTE MÈRE
6) BOITIER ET UNITE CENTRALE
7) CHIPSET
8) VENTILLATEUR
9) PROCESSEUR
10) ALIMENTATION
11) HORLOGE
281
II. CATÉGORISATION DES TYPES DE PÉRIPHÉRIQUES
ÉTAPE 2:
Après avoir analysé la constitution interne d’un ordinateur, nous
nous interressons maintenant à sa partie physique externe. Aussi, le
problème ici est de savoir comment faire entrer,sortir et stocker des
informations de l’environnement interne de l’ordinateur par des utilisa-
teurs.
J’apprends /cours
Un périphérique informatique est un terme générique donné aux

composants de matériel informatique assurant les communications en-
tre l’unité centrale de l’ordinateur et le monde extérieur. On distingue
quatre types de périphérique :
II.1) Les périphériques d’entrée
Les périphériques d’entrée permettent d’entrer l’information dans
l’ordinateur. On peut citer :
* Le Clavier Périphéri-
que d’entrée comprenant
une centaine de touches.
C’est le principal moyen
de communication avec
l’ordinateur.
Figure 9.15 : Vues d’un clavier
* La Souris c’est un périphérique fort
utile pour sélectionner ou actionner des
éléments à l’écran ou pour dessiner.
Dispositifs de pointage.
Figure 9.16 : Vue d’une souris

* Scanneur Périphérique d’entrée, il est comparable à un photocop-
ieur. Mais, au lieu de produire une copie sur papier, le scanneur con-
vertit l’image en fichier informatique. Vous pouvez ensuite la modi-
fier, l’enregistrer sur le disque dur, l’insérer dans un document ou
l’envoyer en pièce joint dans un courrier électronique
282
* Webcam Périphérique d’entrée, c’est une caméra vidéo que l’on place
généralement au-dessus du moniteur et souvent maintenant intégrée
aux ordinateurs portables. Elle peut enregistrer des films ou des images
fixes, et les communiquer via Internet.
* Appareil photos Périphérique d’entrée, l’appareil photo numérique
vous permet d’envoyer vos photos sur votre ordinateur à l’aide d’un câble
USB ou d’un lecteur de cartes mémoires intégré à l’ordinateur.
* Microphone Périphérique d’entrée, le microphone vous permet
d’enregistrer un texte ou un son mais également d’effectuer une conver-
sation audio à l’aide d’un logiciel de messagerie instantanée.
* Caméscope Périphérique d’entrée, le caméscope numérique vous per-
met d’envoyer vos films à l’aide d’un câble.
Remarque
Notons qu’en fonctions de certaines applications on peut voir appa-
raître des périphériques appropriés permettant de mieux interagir avec le
programme et d’atteindre au mieux une satisfactions par rapport aux ob-
jectifs du dit logiciel. On peut citer comme exemples les joysticks pour les
jeux vidéo, des dispositifs de conduite pour les logiciels d’apprentissage
automobile etc.
II.2)Les périphériques de sortie

Les périphériques de sortie permettent de sortir l’information de
l’ordinateur. On peut citer :
• Le Moniteur: Périphérique de sortie arborant un bel écran. Ap-
pelé aussi tout simplement « écran ».C’est le lien visuel qui permet à
l’utilisateur et à l’ordinateur de communiquer entre eux. On distingue :
- Les écrans à tube cathodique (CRT)
- Les écrans à cristaux liquides (LCD)
- Les écrans plasmas
Figure 9.17 : Vues des moniteurs
283
Les critères des moniteurs sont :

- La taille d’un écran : exprimé en pouce (un pouce = 2,54 cm) qui dé-
signe la longueur de la diagonale.
- La résolution d’affichage : désigne la quantité de détails que le mo-
niteur est capable de restituer. Elle s’exprime en Pixels à l’aide de deux
éléments verticaux et horizontaux. Plus le nombre de pixel est élevé,
plus l’image est détaillée. (640x480 pixels ; 800x600 pixels ; 1024x768
pixels ; 1280x1024 pixels)
• Imprimante, c’est grâce à elle que vous pouvez obtenir une « sortie
imprimante » de vos textes et de vos images
• Enceintes, baffles ou Haut-parleurs , sans elles, le PC n’émettrait

que des bips. Parfois intégrées à l’unité centrale ou au moniteur, les
enceintes restituent le son.
II.3)Les périphériques d’entrée-sortie

Les périphériques d’entrée-sortie permettent des communications bidirec-
tionnelles. On peut citer :
Carte réseau servent à communiquer avec d’autres ordinateurs.
Lecteur de disquettes
Lecteurs graveurs de DVD-CD périphériques permettant d’effectuer des
opérations de lecture et écriture.
Clé USB modem périphériques permettant de se connecter à Internet
à travers le réseau téléphonique.
II.4)Les périphériques de stockage

Les périphériques de stockage sont les mémoires de masse permettant
de garder les informations de manière permanente. Ce sont souvent des
unités de grande capacité, car les ordinateurs se caractérisent par la ca-
pacité de stocker une quantité considérable d’informations : la taille des
plus grandes bases de données d’entreprises s’exprime en téraoctets.
On peut citer :
- le disque dur est un ensemble de disques magnétiques rigides superpo-
sés liés par un axe central.
- les clés USB (Universal Serial Bus) ;
- les disques optiques (CD, DVD, Blu-Ray, etc.) ;
- les cartes mémoires ;
- les cassettes magnétiques.
284
Je pratique
1) Citer les périphiques d’entrées que vous connaissez
2) Citez les périphériques de sortie que vous connaissez
3) Citez les périphériques de stockage que vous connaissez
4) Ya-t-il des périphériques qui jouent plusieurs rôles?

Si oui lesquels
5) Définir phéripherique ?
6) Donner la différence entre un péripherique d’entrée et un périph-

erique de sortie
7) Connaissant très bien votre corps humain, quel peut être d’après
vous :
a) les organes qui peuvent être considérés comme péripheriques

d’entrée ?
b) les organes qui peuvent être considérés comme péripheriques de

sortie ?
c) les organes qui peuvent être considérés comme péripheriques

d’entrée-sortie ?
d) les organes qui peuvent être considérés comme péripheriques de

stockage?
285
III. LOGICIELS ET DOMAINES D’APPLICATION DE L’INFORMATIQUE
ÉTAPE 3:
Après avoir étudié les constituants de base permettant à un ordi-
nateur de traiter des informations et les périphériques facilitant les flux
d’informations, il vous est demandé d’identifier les voies et moyens per-
mettant aux utilisateurs de communiquer avec le processeur pour réso-
udre des tâches.
III.1. DÉFINITION D’UN LOGICIEL
Un logiciel est un ensemble de programmes exécutés par ordinateur pour
effectuer une tache bien déterminée. On distingue entre deux types de
logiciels :
•Logiciels de base. et •Les Logiciels d’application.
III.2. LES TYPES DE LOGICIELS

III.2.1. Logiciels de base
Ce sont des logiciels indispensables au fonctionnement de
l’ordinateur.
• BIOS (Basic Input/Output System) : est une série de programmes
incorporés à une ou plusieurs puces de mémoire et qui est la première
chose que l’ordinateur charge lorsqu’il est mis sous tension. Il est com-
posé de 4 éléments importants :
-POST (Power-On Self Test) vérifie si tous les composants matériels fonc-
tionnent correctement.
-Setup BIOS : c’est un programme d’installation et de configuration du sys-
tème, il permet de paramétrer les options de la carte mère et du Chipset et
de controler les paramètres de gestion de l’énergie.
-Chargeur d’amorce : est un programme qui parcourt les lecteurs de disque
à la recherche d’un secteur d’amorçage maître.
-BIOS (Système d’E/S de base) : il intègre une série de pilotes servant
d’interface de base entre le SE et le matériel.
Le BIOS (Basic Imput / Output System) se compose de deux éléments :
◊ Un circuit DIP ou une mémoire flash contenant la partie logicielle
◊ Un circuit CMOS (Complementary Metal Oxyde Semiconductor) dans
lequel sont sauvés les paramètres. Celui−ci doit impérativement toujours
être maintenu sous tension à l’aide d’une pile ou d’un accumulateur. S’il
n’est plus alimenté, toutes les valeurs qu’il contient sont irrémédiable-
ment perdues.
286
La partie logicielle nous permet de configurer les différents éléments

hardware qui composent le PC. On y règle :
- la date et l’heure,
- le type de(s) disque(s) dur(s),
- le type de(s) lecteur de disquette,
- le type d’affichage.
Le système d’exploitation d’un ordinateur ou d’une installation in-

formatique est un ensemble de programmes qui remplissent deux grandes
fonctions :
-Gérer les ressources de l’installation matérielle en assurant leurs
partages entre un ensemble plus ou moins grand d’utilisateurs ;
-Assurer un ensemble de services en présentant aux utilisateurs une

interface mieux adaptée à leurs besoins que celle de la machine physique.
Les finalités du système d’exploitation sont:

-Gestion des informations : stockage, recherche protection ;
-Gestion des ressources matérielles et logicielles : optimisation, sécu-
rité, exécution des applications, partage entre usager ;
-Assurer une sécurité vis à vis du matériel et personnel ;
-Rendre compte de l’activité de la machine.
-Fournir une interface entre l’ordinateur et l’utilisateur ;
-Gérer les entrées/sorties en contrôlant l’accès aux programmes
-Gérer les fichiers en organisant la structure des supports de stock-
age ;
-Gérer les erreurs lors de l’exécution d’une opération.
-Gérer l’espace mémoire alloué à chaque application
Remarque
On distingue plusieurs types de systèmes d’exploitation :
• Systèmes Multitâches : Gèrent simultanément l’exécution de plusieurs
programmes. Exple : MS Windows, Unix/Linux, MAC/OS X, VMS
• Systèmes Mono-tâches : Gèrent l’exécution d’un programme à la fois.
Exple : MS DOS
• Systèmes Multi-Utilisateurs : Gèrent simultanément les travaux de
plusieurs utilisateurs Exple : Windows NT/2000, Windows XP, Windows
7, UNIX/LINUX, MAC/OS X.
• Systèmes Mono-Utilisateurs : Gèrent les travaux d’une plusieurs uti-
lisateurs Exple : MSDOS, Windows3.1, Windows95/98/Me
287
III.2. 2. Logiciels d’application

Ce sont des logiciels qui fonctionnent en présence d’un système
d’exploitation.On distingue :
-Les Texteurs : qui sont de logiciels de traitement de texte. Ils permettent
de réalisé des documents Word (.doc), des pages web (.html ou .xml), des
documents imprimé (.rtf), … . Exemples : Word, Writer, …
-Les Tableurs : qui sont des logiciels de gestion des tableaux. Ils permettent
de créer des Classeurs Excel (.XLS), Exemples : Excel, Loutis, Calc …
Les navigateurs : qui sont des logiciels conçus pour consulter le World
Wide Web, l’ensemble des sites web, pour lire des pages web technique-
ment. Exemple: Internet explorer, Mozilla Firefox, Opera….
Les lecteurs multimédia : qui sont des logiciels conçus pour lire les fich-
iers son ou vidéos de types (.MP3, .RM, .RAM, .MPEG, .WAV, .AVI, …) Ex-
emples: Real Player, Windows Media Player, VLC multimédia,…..
Logiciels de traitements d’image : logiciels d’édition, de modification des
images et de création des dessins. Exemples : Paint, PhotoFilter, Photo-
Shop, … .
Les logiciels de création des animations : permettent de créer des im-
ages animée (.GIF) ,de jeux flashes(.SWF), des pages web animés (.HTM),
…. Exemples : Flash, Gimps, … etc.
Les logiciels de création des diaporamas : permettent de réalisé des ani-
mations destinées à être présentée devant un groupe. Ces animations son
des diaporamas de type (.ppt, .pps, …) : Le logiciel PowerPoint.
Les logiciels de traitement de vidéo (Windows Movie Maker, Meeve,
PoweDVDCréator, ….)
Les logiciels de gestion des bases de données (SQL, ACSSES, ORACLE)
Les logiciels de messagerie électronique : permettent de communiquer
entre deux utilisateurs. Exemples : MSN, YAHOO MESSENGER, NetMeet-
ing, … .
Les antivirus : Permettent de détecter et supprimer les mauvais pro-
grammes. Exemple : Avast, AVG, Panda, Norton, Kaspersky, McAfee …
On peut les regrouper selon les catégories suivantes :

1. Logiciels de bureautique:
* Bouquet Microsoft office (Word, Excel, PowerPoint…).
* Bouquet Open Office (Writer, Calc...).
2. Logiciels pour le multimédia:
* Dessins et animations (Adobe Photoshop, Paint Shop, Macromedia
Flash…)
* Montage vidéo (Pinnacle, Ulead, Magix …).
* Audio + Vidéo (Windows Media Player, Real Player, Winamp, Jet au-
dio …)…
288
3. Logiciels pour Internet:

* Logiciels de navigation (Internet Explorer, Google Chrome, Firefox…).
* Logiciels de communication (MSN, Skype, Yahoo Messenger…).
* Outils de création de sites Web : Frontpage, Dreamweaver...
4. Logiciels de sécurité
III. 3. Domaines d’application de l’informatique

Il existe de nombreux domaines d’utilisation de l’outil informatique dont
voici les principaux :
- Le domaine d’administration
- Le domaine industriel
- Le domaine scientifique et d’ingénierie
- Les domaines de la téléphonie, des communications et des médias
- Le domaine de l’éducation
Je pratique
1) DEFINIR :
a) BIOS,
b) SYSTEME D’EXPLOITATION,
c) LOCIGIELS D’APPLICATION
2) Quels sonts les domaines d’application de l’informatique et comment

peut donc repertorier les différents logiciels d’pplication?
3) Citer pour chacun des logiciels d’pplication suivants des exemples:

a) Logiciels pour Internet
b) Logiciels de sécurité
c) Logiciels de bureautique
d) Logiciels pour le multimédia:
289

Résumé
Pour traiter une information, un microprocesseur seul ne suffit

pas, il faut l’insérer au sein d’un système minimum de traitement
programmé de l’information. John Von Neumann est à l’origine d’un
modèle de machine universelle de traitement programmé de
l’information (1946). Cette architecture sert de base à la plupart
des systèmes à microprocesseur actuel. Elle est composé des élé-
ments suivants :
une unité centrale
une mémoire principale
des interfaces d’entrées/sorties
Les différents organes du système sont reliés par des voies de com-
munication appelées bus.
Figure 9.18 : Schéma logique des liaisons d’un ordinateur
290
L’unité centrale est composée par le microprocesseur qui est chargé

d’interpréter et d’exécuter les
instructions d’un programme, de lire ou de sauvegarder les résul-
tats dans la mémoire et de
communiquer avec les unités d’échange. Toutes les activités du mi-
croprocesseur sont cadencées par une horloge.
On caractérise le microprocesseur par :
– sa fréquence d’horloge : en MHz ou GHz
– le nombre d’instructions par secondes qu’il est capable d’exécuter
: en MIPS
– la taille des données qu’il est capable de traiter : en bits
La mémoire principale contient les instructions du ou des pro-
grammes en cours d’exécution et les données associées à ce pro-
gramme. Physiquement, elle se décompose souvent en :
– une mémoire morte ( ROM = Read Only Memory ) chargée de
stocker leprogramme. C’est une mémoire à lecture seule.
– une mémoire vive ( RAM = Random Access Memory ) chargée
de stocker lesdonnées intermédiaires ou les résultats de calculs.
On peut lire ou écrire Les interfaces d’entrées/sorties permettent
d’assurer la communication entre le microprocesseur et les péri-
phériques. (capteur, clavier, moniteur ou afficheur, imprimante,
modem, etc…).
Un bus est un ensemble de fils qui assure la transmission du même
type d’information. On retrouve trois types de bus véhiculant des
informations en parallèle dans un système de traitement program-
mé de l’information :
Une mémoire est un circuit à semi-conducteur permettant
d’enregistrer, de conserver et de restituer des informations (instruc-
tions et variables). C’est cette capacité de mémorisation qui explique
la polyvalence des systèmes numériques et leur adaptabilité à de
nombreuses situations. Les informations peuvent être écrites ou
lues. Il y a écriture lorsqu’on enregistre des informations en mé-
moire, lecture lorsqu’on récupère des informations précédemment
enregistrées
291
Exercices
Exercice 1.On parle le plus souvent de “PC”.Que signifient ces
2 lettres?
a) Pour communiquer b) Portatif compatible c) Petit computer
d) Personal computer
Exercice 2. Qu’est-ce qu’un ordinateur ?
a) Un appareil électronique de traitement de l’information construit
autour d’un microprocesseur
b) Un appareil qui traite les informations sous forme numérisée
c) Tout appareil capable d’effectuer des calculs
d) Un appareil comportant au moins une unité d’entrée, une mé-
moire de stockage, une unité de commande, une unité de traite-
ment et une unité de sortie.
Exercice 3.Une carte mère sert à
a) Déterminer les caractéristiques d’un micro-ordinateur
b)Lier tous les composants du PC, de la mémoire aux cartes
d’extension, en passant par les lecteurs de disques.
c)Connecter plusieurs ordinateurs en réseau autour d’une unité
centrale appelée encore unité mère.
Exercice 4. La carte mère détermine le type des autres com-
posants. a) Vrai b) Faux
Exercice 5. A quoi sert la pile située sur la carte mère ?
a) A maintenir le BIOS sous tension de manière permanente
b) A conserver le paramétrage du BIOS
c)A conserver la liste de tous les mots de passe utilisés par
l’ordinateur
Exercice 6. Qu’est-ce qu’un processeur ?
a)Unité fonctionnelle de l’ordinateur, capable d’interpréter des
commandes et d’exécuter des instructions.
b) Support logique de tout processus exécuté par l’ordinateur
Exercice 7. Que représente la fréquence d’un processeur ?
a) Le nombre d’additions qu’il peut effectuer en une minute.
b)Le nombre de bits qu’il compte par seconde.
c)Le nombre d’opérations qu’il peut effectuer par seconde.
Exercice 8. La fréquence du processeur est mesurée en MHz.
Un MHz équivaut à :
a) cycles par seconde. b) 10.000 cycles par seconde.
c) 100.000 cycles par seconde. d) de cycles par seconde.
Exercice 9. Plus la fréquence est élevée, moins le processeur
sera rapide. a) Vrai b) Faux
292
Exercice 10 : Qu’est ce qu’un microprocesseur ?

1. un petit ordinateur 2. un coeur artificiel
3. un enregistreur de son 4. un circuit électronique
Exercice 11 : Les différents éléments d’un ordinateur (mémoire,
processeurs, périphériques,...) sont reliés par :
a) des registres b) des pointeurs c) le système
d’exploitation d) des bus
Exercice 12. Qu’est-ce qu’un bus ?
a) C’est un câble qui relie le lecteur de CD à la carte mère.
b) C’est la nappe sur laquelle est connecté le lecteur de disquette.
c) C’est l’ensemble des liaisons électroniques permettant la circula-
tion des données entre le processeur,la mémoire vive et les cartes
d’extension.
Exercice 13. Un bus est :
a) Le connecteur qui relie les différents composants d’un micro-
ordinateur
b) Un système de gestion décentralisé par grande division d’une
entreprise (Business Unit System)
c) PDA doté de capacités téléphoniques
d) Une unité de mesure de la vitesse de rotation d’un DVD-ROM
Exercice 14. Quel est le débit théorique de transfert de données
d’un bus PCI de 64 bits ?
a) 64Mo/s b) 128Mo/s c) 132Mo/s d) 264Mo/s
Exercice 15. La largeur du bus de données des micro-ordina-
teurs actuels est :
a) De 15 ou 25 broches b)Généralement de 8 à 16 bits
c) Souvent de 32 ou 64 bits d) D’environ 16 microns
Exercice 16. 23. Un port est :
a) Le dispositif permettant de connecter un serveur à Internet
b) Le point de connexion d’un périphérique au bus d’un micro-or-
dinateur
c) Un ordinateur destiné à réguler le flux des données d’un réseau
d) Une interface pour les périphériques d’un ordinateur
Exercice 17. Qu’est-ce qu’un Chipset ?
a) Ensemble de circuits électroniques intégrés à la carte mère, qui
établit le dialogue entre le processeur et les périphériques.
b) Ensemble des indications permettant d’identifier un composant
de la carte mère.
c) Ensemble de circuits qui définit l’intelligence et les possibilités de
la carte mère.
293
Exercice 18. Le “chipset” est un élément important :

a) De la carte mère b)de la RAM c)du BIOS d) du processeur
Exercice 19. Le “slot 1” et le “socket 7” sont des connecteurs :
a) pour cartes graphiques b) pour relier des PC de périphériques
c) Pour les processeurs
20 : Dans les équipements informatiques les données sont représen-
tées par un signal électrique de la forme :
a) analogique b) numérique c) alphanumérique
d) alphabétique
Exercice 21 :Lequel de ces périphériques n’est pas un périphérique
de saisie ?
1. le clavier standard 2. la souris standard 3. l’écran standard 4. le
scanner
22. Quelle est la signification du mot RAM ?
Read Access Memory /Random Access Memory /Read Active Memory
Parmi les mémoires suivantes quelles sont celles qui sont volatiles
?:
a) RAM b) ROM c) EPROM d) mémoire cache
Exercice Exercice 23 : Quelle affirmation est fausse ?
1. La RAM stocke des informations de manière temporaire
2. La ROM peut être lue, mais son contenu ne peut être effacé
3. La mémoire cache est un CD-Rom
Exercice 24.L’accès à la mémoire RAM est plus rapide que l’accès
au disque dur
1. Oui 2. Non 3. Non sauf si la capacité de la RAM est inférieure à 256
Mo 4. oui à condition que le disque dur sera d’une marque dépassée
25. Qu’est ce qu’un téra-octet ?
a) 109 octets b) 1012 octets c) 1015 octets d) 1016 octets
Exercice 26. Il est possible de modifier la fréquence d’une carte
mère par
a) Un jumper (cavalier) b) Une carte d’extension
c) Une barrette de mémoire supplémentaire
La fréquence des microprocesseurs est aujourd’hui de l’ordre du
: a) tetrahertz b) gigahertz c) kilohertz d) mégahertz
La capacité de stockage d’un DVD est :
a) De 650 Mo b) De 4.7 GO c) De 1.44 d) De 1024 octets
Un méga-octet (Mo) vaut :
1. 1000 Ko 2. 1 048 576 octets 3. 1 000 000 octets 4. 1024 octets
Le CD-Rom est un dispositif
a) réinscriptible b) Non réinscriptible c) Effaçable
Exercice 27. Parmi les noms suivants, lequel ne correspond pas à un
type de bus ?
a) ISA b) AGP c) AMD d) PCI
294
Exercice 28. Le Disque dur est un élément de base d’un PC en:

=HARDWARE =SOFTWARE =AUTOMATISME =ROBOTIQUE
Exercice 29 : Lequel de ces éléments n’est pas une mémoire de
masse
1. Un disque dur 2. Un CD-ROM
3. La disquette 4. L’imprimante
Exercice 29 :
ABOLO est devant une machine qu’il souhaite l’acheter.
1. Comment il peut savoir la fréquence du processeur.
2. Comment il peut savoir la taille de la mémoire vive.
3. Comment il peut savoir la taille du disque dur.
4. Comment il peut savoir la taille de l’écran.
Exercice 30 :Un ami veut assembler un ordinateur, il vous de-
mande de lui citez les principales caractéristiques pour l’achat des
périphériques suivants :• Processeur• Disque Dur • Carte
Mère
30. La mémoire cache :
a) peut être volatile ou non b) est moins rapide que la RAM
c) est munie d’un capuchon ZIF
d) peut être interne ou externe au processeur
Exercice 31: La mémoire cache est :
1. Une mémoire que l’on ne peut pas voir
2. Une mémoire de grande capacité
3. Une mémoire à accès rapide
4. Une mémoire en lecture seule
Exercice 32 . Une imprimante sert à :
a) Envoyer un fax b) Scanner un document
c) Imprimer un document
Exercice 33. Qu’est ce qui n’est pas dans l’unité centrale ?
a) Le processeur b) Le scanner
c) La mémoire vive d) La carte mère
34. Un octet correspond à :
a) 1024 kilos byte b) 1024 bits
c) 8 Bytes d) 8 bits
Exercice 35. La mémoire Vive est :
a) Permanente en Lecture seule b)Rapide en lecture / écriture
c) Permanente en écriture d)Permanente en lecture/écriture
Exercice 36. Les Eléments constitutifs d’un micro processeur
sont :
a) Horloge. b) Unité d’implantation. c) Unité d’exécution.
d) Unité de gestion de bus.
295
Exercice 37.
Word est … a. Un logiciel de traduction. b. Un logiciel de
géolocalisation. c. Un logiciel de traitement de texte.
Le logiciel permettant d’afficher des pages web sur votre ordi-
nateur s’appelle :
a)Un surfeur b)Un serveur web c)Un navigateur d)Un intranet
4. Le tableur est … a. Un logiciel de création de tableaux
de calculs. b. Un logiciel de création de peintures à partir de
photos. c. Un logiciel de traitement de texte.
Exercice 38. Le graveur DVDROM permet de :
= Lire un VCD
= Graver des données
= Graver des films minidvd
= lire des DVDROM
= lire un CD audio
= lire un CD MP3
Exercice Exercice 39. Le micro portable possède les mêmes
éléments de base qu’un PC:
= Vrais = Faux = Bus de donné
Exercice 40. Quel périphérique ci-dessous n’est pas un péri-
phérique d’entrer ?
a) La souris b) L’écran
c) Le clavier d) Le lecteur de disquette
296
Chapitre 10
MONTAGE D’UN ORDINATEUR
« La théorie, c’est quand on sait tout et que rien ne fonctionne. La pratique, c’est
quand tout fonctionne et que personne ne sait pourquoi. Ici, nous avons réuni théorie
et pratique: Rien ne fonctionne... et personne ne sait pourquoi ! »
Albert Einstein
On constate depuis une décennie que l’informatique a envahi tous les

domaines de la vie courante. Pratiquement, tout problème est totalement
ou en partie informatisé. Partout dans le monde, à tous les niveaux et dans
chaque secteur d’activité, les outils informatiques sont présents et effective-
ment utilisés.
Pré-requis
* Il faut savoir lire et écrire, car ce sont là les notions fondamentales

pour lire les prescriptions liées au matériel
Compétences
• Identifier, démonter et remonter des composants d’un Pc en toute sécurité
• Identifier les éléments de base De l’ordinateur
• Identifier les différents composants et comprendre leur fonction
• Découverte de l’architecture d’un ordinateur Pc
• Distinguer les différents ports de connexion et leurs fonctions
• Être capable de démonter et remonter un composant en toute sécurité
• Identifier les ports et connecteurs pour les périphériques
Leçons / Sommaire
I. LES PRÉCAUTIONS À PRENDRE.....................................................300

II. LES ÉTAPES DU MONTAGE............................................................302
Résumé....................................................................................................318
Exercices..................................................................................................323
298
Exemple 1
Vos parents decident d’acheter de nouveaux ordinateurs à la
maison,dans le soucis de renouveler le parc informatique. En deballant le
materiel informatique vous tomber sur le mode d’emploie qui vous indique
la procédure à suivre pour une première utilsation, il vous est demandé
d’assembler tous les composants.
Exemple 2
Votre voisin,un peu curieux s’est mis à démonter son ordinateur a
fin de découvrir la façon celui-ci est confectionné. Au bout d’un certain
moment il s’en mêle les pédales et n’arrive plus à remonter son appareil. Il
vient vous voir et vous demande de lui donner un coup de main
Exemple 3
suite à une invasion de souris dans votre domicile, votre maman de-
cide de deposer des raticides afin d’exterminer ces bestioles.au bout d’un
moment l’une d’entre elle parvient à se refugier au sein de l’unité centrale
de votre ordinateur. comment procédez vos pour la retriuver et l’en extirp-
er?
A partir de ces quelques exemples, des préoccupations se posent à la suite

de quelques constats :
• Une démarche pour résoudre le problème est proposée dans le manuel
d’ulisation;

• Rédiger la méthode ou le processus qui permet de résoudre le problème
Questions
• Quels sont d’après vous les principales parties d’un ordinateur ?
• quels sont les outils nécéssaires pour démonter un ordinateur?
• comment connecter un périphérique à un ordinateur?
• comment entretenir un ordinateur?
299
I. LES PRECAUTIONS À PRENDRE
J’apprends /cours
1. PRÉPARER LE BOÎTIER
Lorsque l’on se prépare à installer un PC, il faut vérifier que l’on pos-
sède un tournevis cruciforme, les vis dont on aura besoin, ainsi que les
différents câbles et connecteurs.
Il existe tout de même quelques règles simples à respecter :
• Ne jamais visser à fond !
• Ne jamais forcer !
La première étape consiste à ouvrir entièrement le boîtier, puis de le
placer à plat sur une surface large où vous aurez suffisamment de place
pour travailler confortablement, et enfin de retirer tous les caches en plas-
tique des baies à l’avant du PC.
N.B. Un boîtier est généralement fourni avec un câble d’alimentation et un
ensemble de vis. Les vis avec un petit pas de filetage s’installent générale-
ment sur les lecteurs de disquettes et CD, alors que les vis avec un gros
pas de filetage permettent de fixer les disques durs.
2. PRÉCAUTIONS À PRENDRE AVANT DE MONTER UN PC

Le montage d’un ordinateur de bureau ne se fait pas en deux min-
utes ni en faisant autre chose : il faut être concentré sur son montage pour
éviter toute erreur qui pourrait détruire votre matériel. Il est nécessaire
avant toute chose de consulter attentivement son manuel afin de repérer
les différents connecteurs.
- Disposez d’un plan de travail relativement grand et d’un éclairage suf-
fisant.
- Munissez-vous d’un tournevis cruciforme
- Avant toute manipulation sur le matériel, Il faut s’assurer d’avoir débran-
ché le cordon d’alimentation du PC,puis déchargez-vous de toute électricité
statique qui pourrait détruire les composants électroniques des différentes
cartes (par exemple: en touchant une partie métallique reliée à la masse :
radiateur, etc...). Evitez les vêtements en laine.
- Une ERREUR (inversion de connecteurs par exemple) peut entraîner des
DEGATS IRREVERSIBLES sur le matériel;
- Munissez-vous d’un tournevis (électrique) cruciforme;
- des gants et des pansements ( les arêtes de boîtiers sont parfois coupantes).
-Organiser un espace de travail dégagé suffisant pour déposer le boîtier
300
-Prévoir de une à deux heures pour un premier montage

-insérez une serviette ou autre accessoire entre la table et la carte mère,
afin de ne pas abîmer les soudures de l’autre coté de la carte
Figure 10.1 : Outils nécéssaires au montage
Un ordinateur de type PC peut être monté en assemblant des élé-

ments matériels de différents constructeurs, afin d’obtenir un ordinateur
conforme à ses besoins. Les éléments constitutifs éssentiels de l’ordinateur
à assembler sont les suivants :
•Le boîtier: châssis métallique accueillant les éléments internes de
l’ordinateur. La plupart du temps il est fourni avec son alimentation élec-
trique et un jeu de vis, connecteurs et nappes ainsi que le lecteur de dis-
quettes.
•La carte mère : grande carte imprimée permettant de connecter un pro-
cesseur, de la mémoire vive, des disques durs et lecteurs de CD/DVD, et
proposant un jeu de connecteurs d’extension. La carte mère est une carte
maîtresse, prenant la forme d’un grand circuit imprimé possédant des con-
necteurs pour le processeur, la mémoire vive, des cartes d’extension., le
manuel de la carte mère est une lecture très intéressante.
• Le processeur , circuit intégré principal de l’ordinateur, véritable cer-
veau de l’ordinateur chargé des principaux calculs.
• Les barrettes de mémoire vive,
• Les périphériques de stockage tels que les disques durs, les lecteurs ou
graveurs de CD-ROM et DVD-ROM.
•Les cartes d’extension ,permettant d’étendre les fonctionnalités et per-
formances de l’ordinateur.
301
II. LES ÉTAPES DU MONTAGE
INTRODUCTION
La carte mère est un peu comme la colonne vertébrale du PC. Tous
les composants se montent directement dessus ou s’y connectent.
L’illustration suivante montre la topologie d’une carte mère comme
les cartes mères récentes qui comportent une connectique comparable.
Figure 10.2 : Topologie d’une carte mère
302
J’apprends /cours
II.1-MONTER LE PROCESSEUR
La première étape du montage est la fixation du processeur ; c’est aussi
la partie la plus délicate.
II.1.1 Sur un Socket ZIF (Zero Insertion Force)
Lors de l’installation d’un processeur sur Socket ZIF, il faut veiller à lever
la petite manette, située sur la tranche du Socket, insérer le processeur
délicatement en s’assurant que la « marque » située dans un coin du
processeur coïncide à la marque sur le support (reportez vous à la docu-
mentation de votre carte mère). Une fois le processeur installé, il suffit
de rabaisser la manette. Le processeur et le support sont dotés de dé-
trompeurs de sorte qu’il soit possible de monter l’ensemble uniquement
dans une seule position.
Figure 10.3 : Présentation d’un Socket

II.1.2 Sur un Slot
Le montage d’un CPU sur Slot est tout aussi simple : il faut install-
er le rail de fixation accompagnant la carte mère. Le processeur s’insère
ensuite très facilement comme une carte d’extension (seul un sens de
montage est possible).
303
Remarque
* Si la force nécessaire pour fermer le support semble excessive, exam-
iner le montage.
* N’hésitez pas à consulter le chapitre consacré au montage du proces-
seur dans le manuel de la carte mère.
* En cas difficultés, retirer le processeur pour vérifier le mécanisme de
fermeture du support.
II.1.3 MONTAGE DU SYSTÈME DE REFROIDISSEMENT : « VENTI-
RAD »
Pour les processeurs montés sur supports ZIF, il est absolument in-
dispensable d’installer un radiateur ainsi qu’un ventilateur qui n’est pas
nécessairement fournis avec le processeur. La plupart du temps ces deux
composants sont vendus en un seul bloc appelé « ventirad ». En l’absence
de radiateur, le processeur brûlera dans les quelques secondes suivant
la mise sous tension de l’ordinateur. Il est conseillé d’étaler une goutte de
pâte thermique (graisse de silicone) sur la partie du processeur qui sera
en contact avec le radiateur, afin d’augmenter la surface de contact entre
le processeur et le dissipateur de chaleur et ainsi améliorer la dissipation
de la chaleur. La plupart des ventirads possèdent déjà une fine couche
de pâte thermique, il n’est alors pas nécessaire d’en rajouter. Emboîtez
l’une des pinces du radiateur sur le connecteur du connecteur ZIF et en-
clenchez doucement la deuxième. Le radiateur doit être centré correcte-
ment et être en contact avec le processeur sur toute sa surface.
Figure 10.4 : Présentation de l’endroit où placer le système de refroidisse-

ment
304
La pâte thermique est toujours livrée avec les systèmes de refroidissement.

Déposez l’équivalent de 4 ou 5 grains de riz de pâte sur le processeur. Pas
besoin d’étaler la pâte, la pression du radiateur sur le processeur s’en
chargera parfaitement.
Figure 10.5 : Installation d’un ventillateur

Placez le radiateur sur le
processeur et puis intro-
duisez la plaquette de fixa-
tion. Il reste à la visser au
support déjà monté sur la
carte mère avec les deux
vis à ressort. Il faut serrer
jusqu’à ce que les vis arrive-
nt à leur butée. Les ressorts
se chargent de maintenir la
force de serrage optimale…
Figure 10.6 : Ventillateur monté sur une carte mère
La dernière étape consiste à monter le ventilateur. Attention à bien

l’orienter de manière à ce que le flux d’air soit dirigé vers l’arrière du boî-
tier (montage vertical) ou vers le haut (montage horizontal). N’oubliez pas
de brancher le ventilateur sur la prise « CPU Fan » ! Rangez les fils du ven-
tilateur pour éviter qu’ils ne touchent les pales et qu’ils entravent le moins
305
Il est notamment important de veiller au sens de montage du ra-

diateur : le décrochage sous la partie inférieure du radiateur doit être au
niveau de la partie émergente du Socket. D’autre part, veillez à ne pas forc-
er car la partie centrale du processeur (en silicium) est fragile et la moin-
dre fêlure l’endommagera de façon irréversible. Enfin, branchez le câble
d’alimentation du ventilateur sur le connecteur prévu à cet effet sur la
carte mère. Il peut être utile d’arranger le câble d’alimentation du ventila-
teur de manière à ne pas risquer de gêner la rotation des pâles.
Figure 10.7 : Présentation du sens d’installation d’un ventillateur

II.2.-INSTALLATION DE LA RAM
II.2.1 PRÉSENTATION
D’une manière générale il n’est pas possible d’enficher des barrettes
mémoire d’un type non supporté par la carte mère car chaque type de mé-
moire possède un ou plusieurs détrompeurs empêchant son insertion dans
un emplacement non adapté.

Figure 10.8 : Présentation des détrompeur d’une RAM
B.2 DDR, SDRAM ou RamBus

Les barrettes de mémoire DDR, SDRAM ou RAMBUS peuvent être installées
seules dans les emplacements de mémoire. Il n’est toutefois pas conseillé
d’installer des barrettes de mémoire de type (et de marque) différents,
306
car :
· des incompatibilités peuvent exister ;
· l’ordinateur sera bridé par la vitesse
de la mémoire la plus lente.
Pour insérer de la mémoire DDR, Ram-
Bus ou SDRAM, il suffit d’écarter les
fixations pivotantes situées de part et
d’autre du connecteur, de placer la bar-
rette verticalement sur son emplace-
ment en prenant soin de vérifier qu’elle
est dans le bon sens (un ou plusieurs
détrompeurs au milieu des broches
empêche de l’enficher dans le mauvais
sens).
Figure 10.9 : Installation d’une RAM

Appuyez fermement mais sans forcer. Les deux verrous présents de
chaque côté doivent se fermer automatiquement.
Figure 10.10 : Repère du lieu de fixation de la RAM
une encoche sur les barrettes de mémoires et un bossage dans le slot.

Il est impossible de monter la barrette dans le mauvais sens ou d’installer
une mémoire incompatible.
Ouvrez les loquets blancs des banques de mémoire puis insérez la
barrette verticalement. Vérifiez si l’encoche est bien face au bossage puis
enfoncez le module dans son logement. Les loquets de verrouillage se fer-
meront dans la foulée…
II.3.MONTAGE DANS LE BOITIER
II.3.1 FIXATION DE LA CARTE MÈRE DANS LE BOITIER
La carte mère se visse dans le boîtier. Des petits ergots, appelés en-
tretoises, sont en général fournis pour maintenir un espace entre la carte
et le boîtier. Les entretoises sont habituellement des ergots en plastique à
« clipser » au fond du boîtier ou bien des supports métalliques à visser.
307
Les cartes mères ont toutes une connectique différente à l’arrière.

Elles sont donc livrées avec une « back plate » adaptée. La première chose à
faire est donc de retirer la plaquette générique fournie avec le boîtier pour
monter celle spécifique à la carte mère.
Il faut ensuite visser les entretoises hexagonales qui assurent la fixa-
tion de la carte mère au boîtier. Une petite clé adaptée est livrée… Assurez-
vous de monter les entretoises selon la disposition des trous de fixation
sur la carte mère. Leur emplacement est standardisé mais parfois il existe
deux positions différentes. Déposez la carte mère dans le boîtier en vérifiant
soigneusement qu’aucune patte métallique de la « back plate » n’entre dans
les connecteurs de la carte mère. Soyez surtout attentifs aux ports Ethernet
et Firewire !
Figure 10.11 : Repère du lieu de fixation de la RAM sur la carte mère

Serrez très faiblement dans un premier temps la vis numéro 5 de
l’illustration. Vous disposez ainsi directement d’un bon centrage de la carte
mère et d’une certaine latitude pour son alignement. Vissez ensuite une
vis d’un coin puis toutes les autres... N’oubliez pas de finir le serrage de la
première vis. Il n’est pas nécessaire de serrer excessivement les vis de fixa-
tion de la carte mère…
308
L’étape suivante consiste à brancher les boutons de mise sous ten-

sion, reset et les leds. Il n’y a pas de sens de branchement pour les prises
des boutons. Par contre, il y en a un pour les leds. Les fils de couleurs
sont « le + » tandis que le blanc est la masse. La description des broches se
trouve directement sur le circuit imprimé mais elle n’est pas toujours des
plus lisibles. Il est préférable de regarder dans le manuel de la carte mère.
En cas d’erreur, pas de panique, les leds ne s’allument tout simplement
pas. Il suffit d’inverser le branchement…
Notre boîtier dispose de ports USB et de connecteurs audio en façade.
Les prises sont généralement standardisés (c’est le cas de notre Lian Li et
de la carte mère DP55KG) mais ce n’est pas toujours le cas... Soyez donc
prudents ! Une erreur de montage de ces prises (USB et Firewire) peut en-
dommager la carte mère et le périphérique. Les documentations du boîtier
et de la carte mère reprennent l’assignation des broches.
309
Une fois la carte mère alignée sur les entretoises, et ayant ses ports
d’entrée-sortie alignés avec les ouvertures du boîtier, la carte mère doit être
vissée afin de la fixer au fond du boîtier. La carte mère doit ensuite être reliée
à l’alimentation du PC. Ce connecteur doit être branché à l’emplacement
prévu sur la carte mère (se référer au manuel). Enfin, de nombreux autres
composants doivent être reliés à la carte mère Enfin des
broches contiguës présentes sur la carte mère permettent de relier les con-
necteurs du panneau avant du boîtier (haut-parleur, bouton de mise sous
tension, témoins lumineux, etc.). Il est recommandé de se référer au ma-
nuel de la carte mère pour connaître leur emplacement, même si les noms
sont parfois gravés sur la carte (SPK=speaker, etc.). Voici une liste non
exhaustive de ces composants :
Les cartes d’extensions

Les slots d’extension sont des réceptacles dans lesquels il est possible
d’enficher des cartes d’extension. Il n’y a aucune crainte à avoir : il n’est
pas possible de se tromper dans la mesure où chacun de ces types de cartes
a un emplacement de taille différente. Pour installer une carte d’extension,
il suffit de retirer le cache correspondant sur le boîtier, puis d’enficher
l’arrière de la carte, de rabaisser doucement l’avant, enfin de la visser.
Dans la mesure du possible, il est conseillé de laisser un emplacement de
libre entre les cartes afin de leur permettre d’évacuer plus facilement la
chaleur.
II.3.2 MONTAGE DE L’ALIMENTATION
Le Lian Li PC-8N est livré sans alimentation. Ce type de boîtier est
très intéressant quand on dispose déjà d’un bon bloc ou quand on a choisi
un modèle précis adapté à sa configuration. Nous avons utilisé une Corsair
VX650 équipée d’une connectique très complète et parfaitement adaptée
à une machine puissante.L’installation de l’alimentation est très simple. Il
suffit de dévisser son support de l’arrière du boîtier, fixer les 4 vis au bloc
d’alimentation et remonter l’ensemble…
310
Figure 10.14 : Schéma de montage de l’alimentation
La carte mère a deux prises d’alimentation : une principale avec 24

broches et une secondaire avec 8 broches. Il faut bien entendu les branch-
er toutes les deux ! En raison de leur forme, il est impossible de procéder
à un mauvais branchement.
II.3.3)MONTAGE DES PÉRIPHÉRIQUES SATA

Les disques durs, les SSD, les graveurs DVD, les lecteurs et graveurs
Blu-ray utilisent à présent tous l’interface SATA. Exit donc les larges nap-
pes encombrantes et place à des câbles de moins d’un centimètre de large.
Mais ce n’est pas tout ! Il n’y a plus de notion de maître et d’esclave étant
donné que chaque périphérique SATA se connecte directement à la carte
mère… Les câbles SATA n’ont pas de « sens » : n’importe quelle extrémité
peut aller sur le périphérique ou la carte mère. Il y a par contre un dé-
trompeur pour que le brochage soit respecté. Impossible de faire une er-
reur de montage ! Pareil pour les connecteurs d’alimentation SATA…
Le branchement de tous les périphériques SATA se fait de la même
manière : connexion d’une prise d’alimentation et d’un câble SATA (avec
l’autre extrémité directement connectée à la carte mère). La carte mère In-
tel DP55KG a 8 ports SATA 3 Gbps. Même si l’ordre de branchement n’a
pas impact sur les performances, il est conseillé d’utiliser les ports selon
leur numérotation : de 0 à 7. En effet, certains systèmes d’exploitation at-
tribuent les lettres de lecteurs selon l’ordre de branchement.
311
Exemple :
* Port SATA 0 : SSD pour l’OS, les programmes courants et les données (C
:)
* Port SATA 1 : disque dur pour les applications peu utilisées et les don-
nées temporaires (D :)
* Port SATA 2 : disque dur de sauvegarde des données importantes (E :)
* Port SATA 3 : graveur DVD (F :)
* Port SATA 4 : lecteur Blu-ray (G :)
I.3.3.a) BRANCHEMENT DES PÉRIPHÉRIQUES
Les disques durs et l’ensemble des éléments internes (lecteur de dis-
quettes, lecteurs ou graveurs de CD-ROM/DVD-ROM) peuvent être montés
dans n’importe quelle baie interne. Néanmoins la disposition de ces élé-
ments peut dépendre des contraintes suivantes :
· la longueur et la disposition des câbles et nappes ;
· la température de certains périphériques ;
· l’accès aux périphériques. Il est préférable de mettre les éléments les plus
souvent utilisés à portée de main, par exemple les lecteurs ou graveurs de
CD-ROM/DVDROM
sur la baie la plus proche.
II.3.3.b) BRANCHEMENT DES DISQUES

La carte mère comporte en général deux connecteurs IDE :
· Le 1er connecteur est appelé connecteur primaire (primary device control-
ler) ;
· Le second est appelé connecteur secondaire (secondary device controller).
Chacun de ces connecteurs permet de brancher deux périphériques
IDE sur une même nappe, soit un maximum de quatre équipements IDE. Il
est possible de connecter des périphériques supplémentaires (pour dépasser
la limite des 4 équipements IDE) en installant une carte d’extension appelée
contrôleur IDE. Dans la mesure où deux périphériques peuvent se retrouver
sur une même nappe IDE, il est nécessaire de signaler à l’ordinateur lequel
des deux est prioritaire, ou plus exactement
lequel est maître (master), lequel est esclave (slave). Pour ce faire, il est
nécessaire de configurer les périphériques IDE à l’aide de cavaliers (jump-
ers) situés au dos du périphérique (à côté du connecteur IDE). Générale-
ment un petit schéma situé sur le périphérique explique les positions du
ou des cavaliers pour le placer en maître (M) ou en esclave (SL). A noter que
vous trouverez parfois l’abréviation CS (câble select), permettant de
définir automatiquement le disque maître et l’esclave lorsque les deux
disques possèdent cette option et qu’elle est supportée par la carte mère.
De plus, il est conseillé de mettre sur la même nappe des périphéri-
ques de même type car la vitesse de transfert du bus s’adapte au périphé-
rique
312
le plus lent de la nappe. Ainsi, il est recommandé de mettre les disques

sur une nappe et les lecteurs de CD-ROM et graveurs IDE sur la sec-
onde. L’ordinateur va démarrer (booter) par défaut sur le premier disque
situé sur le premier canal IDE. L’ordre de priorité est le suivant :
· IDE1 - Master (Maître,)
· IDE1 - Slave (Esclave),
· IDE2 - Master,
· IDE2 - Slave.
REMARQUE IDE : intelligent drive electronic est une norme de connexion

de périphériques où un contrôleur ne peut piloter que deux périphérique
au pllus dont l’un est toujours prioritaire par rapport à l’autre(maître et
esclave)
Les configurations conseillées sont les suivantes :
Lors du branchement des périphériques IDE, il est important de

vérifier que la bande rouge sur la nappe est bien du côté de la broche n°1
:
· au niveau de la carte mère :
Figure 10.15 : Nappe de connexion du disque dur
· au niveau du (des) disque(s)

dur(s) (généralement du côté de
l’alimentation) :
Figure 10.16 : Nappe de connexion du disque dur

Les autres périphériques IDE (lecteurs ou graveur de CD-ROM / DVD-
ROM) se branchent généralement selon ce même principe. Le lecteur de
disquettes (noté FDC, pour Floppy Disk Controller) se branche grâce à
une nappe moins large que les nappes IDE des disques durs, sur le con-
necteur de la carte mère prévu à cet effet.
313
II.3.3.c) MONTAGE DE LA CARTE GRAPHIQUE

Les cartes graphiques performantes sont très encombrantes. Elles
pren nent deux slots et peuvent être très longues. Pour l’installer , démon-
tez le braquet en vis-à-vis du port PCI-Express 2.0 16x et celui directement
en dessous. Basculez le loquet blanc du slot et insérez la carte dans le port
jusqu’à ce que la carte soit verrouillée. Il reste à fixer la carte au boîtier avec
les deux vis des braquets.
Les cartes graphiques puissantes demandent plus de puissance que celle
délivrable . Il faut impérativement brancher les deux connecteurs PCI-Ex-
press. Si vous oubliez, la carte émettra un sifflement strident au démarrage

Figure 10.17 : Connectiques de la carte graphique
II.3.3.d) Montage des cartes PCI Express
Les cartes mères embarquent une carte son avec une connectique
complète, une ou deux puces réseau Ethernet 1 Gpbs, jusqu’à 8 ports USB,
des connecteurs eSATA, etc. Il n’est donc pas souvent nécessaire d’ajouter
une carte d’extension…
L’installation d’une carte PCI ou PCI-Express est comparable à celle de la
carte graphique : démontage du braquet, insertion de la carte dans le slot
et serrage avec la vis.
Figure 10.18 : Fixation d’une carte PCI
314
II.3.3.e) CONNEXION DES PÉRIPHÉRIQUES ET BRANCHEMENT

Le montage touche à sa fin. Le branchement des périphériques se fait
en un tournemain. Depuis que les souris et claviers sont en USB, il n’y a
aucune restriction pour leur branchement. Il en va de même pour les en-
ceintes. Anciennement, la prise verte était dédiée à la sortie audio stéréo.
A présent, vous pouvez brancher n’importe quoi n’importe où, la puce audio
et son pilote détecteront ce qui a été branché et/ou un assistant demandera
de préciser ce qui a été branché…Difficile de faire plus simple!
Les cartes graphiques ont souvent deux sorties DVI. Vous pouvez utiliser
une comme l’autre… Une fois la prise branchée, serrez les vis afin d’assurer
une connexion optimale.
Enfin, il reste à brancher l’alimentation, mettre son interrupteur sur
ON ou 1 et à presser le bouton de démarrage… A moins de vouloir utiliser
des réglages précis, il n’est pas nécessaire de passer dans le setup du BIOS.
Par défaut, le démarrage se fait sur les périphériques amovibles, les unités
optiques puis les disques durs. Il suffit donc de mettre le CD ou le DVD de
l’OS dans le lecteur dès la mise sous tension…
Figure 10.19 : Présentation des connectiques d’entrées/sorties

Conclusion
Le montage d’un PC est aujourd’hui plus que jamais à la portée de tous.
Quelques conseils :
* Pensez à mettre le CD ou le DVD de la carte mère dans le lecteur après
l’installation du sys-
tème d’exploitation. Il contient parfois des logiciels offerts ou des informa-
tions importantes.
* Visitez les sites des constructeurs pour voir si de nouveaux pilotes ou
BIOS sont disponibles.
315
* Après avoir installé le système d’exploitation, pensez à faire les mises à

jours.
* Si les tests sont passés avec succès, vous pouvez installer tous vos pro-
grammes habituels…
Figure 10.20 : Unité centrale montée
316
Je pratique
1) Qu’est ce qu’un slot?
2) Quels sonts les composants ayant besoin des slots?
3) Comment se monte plusieurs disques dur sur un ordinateur?
4) Comment sont pris en charge les périphériques dans un ordinateur?
5) Quelles sont les précautions à prendre avant de monter un ordina-

teur?
6) Quels sont les outils nécéssaires au montage de l’ordinateur?
317
Résumé
introduit en 1981 lor-
sque la firme IBM (Inter-
nal Business Machines)
a commercialisé pour la
première fois un ordina-
teur personnel destiné à
une utilisation familiale.
Depuis, les domaines
d’application du PC ont
énormément évolué….
De la gestion de produc-
tion à la gestion de sys-
tèmes d’acquisition, en
Figure 10.21 : Ordinateur monté
passant par la reconnaissance de forme ou le traitement de l’image,
ses domaines d’utilisation sont extrêmement riches et variés. Pour
cela, le PC est défini par une architecture minimale laissant la lib-
erté à chacun de rajouter les périphériques d’entrée/sorties néces-
saires à l’utilisation visée, qu’elle soit familiale ou professionnelle.
Un PC est composé par une unité centrale associée à des périphé-
riques (clavier, moniteur, carte d’acquisition, etc…)
L’unité centrale.Elle est composée par :
La carte mère,Le microprocesseur,La mémoire,La carte vidéo et Les
périphériques internes de stockage
La carte mère est l’un des éléments essentiels d’un ordinateur. Elle
assure la connexion physique des différents composants (processeur,
mémoire, carte d’entrées/sorties, ...) par l’intermédiaire de différents
bus (adresses, données et commande). Plusieurs technologies de bus
peuvent se côtoyer sur une même carte mère. La qualité de la carte
mère est vitale puisque la performance de l’ordinateur dépend énor-
mément d’elle. On retrouve toujours sur une carte mère :
●● le chipset : c’est une interface d’entrée/sortie. Elle est constituée
par un jeu de plusieurs composants chargé de gérer la communica-
tion entre le microprocesseur et les périphériques. C’est le lien entre
les différents bus de la carte mère.
318
●● le BIOS (Basic Input Ouput Service) : c’est un programme respon-

sable de la gestion du matériel : clavier, écran, disques durs, liaisons
séries et parallèles, etc... Il est sauvegardé dans une mémoire morte
(EEPROM) et agit comme une interface entre le système d’exploitation
et le matériel.
●● ’horloge : elle permet de cadencer le traitement des instructions
par le microprocesseur ou la transmission des informations sur les
différents bus.
●● les ports de connexion : ils permettent de connecter des périphé-
riques sur les différents bus de la carte mère. Il existe des ports « in-
ternes » pour connecter des cartes d’extension (PCI, ISA, AGP) ou des
périphériques de stockage (SCSI, IDE, Serial ATA) et des ports « ex-
ternes » pour connecter d’autres périphériques (série, parallèle, USB,
firewire, etc …)
●● Le socket : c’est le nom du connecteur destiner au microproces-
seur. Il détermine le type de microprocesseur que l’on peut connecter.
Architecture d’une carte mère
Figure 10.22 : Vue de l’architecture d’une carte mère
319
Figure 10.23 : Architecture d’une carte mère

Le microprocesseur est bien entendu l’élément essentiel du PC.
Nous avons vu que les performances d’un microprocesseur étaient
liées à son architecture et sa fréquence de fonctionnement.Pour
connaître les performances d’un microprocesseur, il ne faut donc
pas se fier à la seule valeur de sa fréquence de fonctionnement. Il
faut prendre en compte toutes les caractéristiques liées à son ar-
chitecture et ne pas oublier de l’entourer d’un chipset et d’une mé-
moire performants. La dernière chose à ne pas omettre lorsqu’on
choisit un microprocesseur est son système de refroidissement. En
effet, plus la fréquence augmente et plus la dissipation thermique
sera importante. Un microprocesseur mal refroidit peut entraîner
des dysfonctionnements au sein du PC voir même la destruction du
microprocesseur lui même.
320
La mémoire: La qualité et la quantité de mémoire d’un PC vont per-

mettre, au même titre que le microprocesseur, d’accroître les per-
formances de celui-ci. Si on dispose d’un microprocesseur perfor-
mant, encore faut-il que la mémoire puisse restituer ou sauvegarder
des informations aussi rapidement qu’il le désire. La fréquence de
fonctionnement de la mémoire est donc un paramètre essentiel.
De même, si on veut réduire le nombre d’accès aux périphériques
de stockage secondaire qui sont très lents (disque dur, CDROM,
etc…), il faudra prévoir une quantité mémoire principale suffisante.
Le rôle de la carte graphique est de convertir les données numé-

riques à afficher en un signal compréhensible par un écran . Alors
qu’à ses débuts, la carte vidéo se chargeait uniquement d’afficher
une simple image formée de points colorées (pixel), les derniers
modèles apparus se chargent d’afficher des images en 3D d’une
grande complexité. C’est donc un système à microprocesseur à elle
seule qui est composée par :Un GPU (Graphics Processor Unit), De
la mémoire vidéo, D’un dispositif de conversion analogique numéri-
que : RAMDAC et D’entrées/sorties vidéo
Les périphériques internes de stockage Ce sont les périphériques

de type mémoire de masse. On les appelle ainsi pour leur grande
capacité de stockage permanent. Ces périphériques sont dotés d’un
contrôleur permettant de les faire dialoguer avec le microproces-
seur.
321
Il conviendra d'abord de distinguer l'ordinateur lui-même de ses "pé-

riphériques", qui ne sont que des constituants annexes. Le coeur d'un
ordinateur est constitué :
de l'Unité Centrale (UC), ou "microprocesseur", appelé familière-
ment "puce" ;
des mémoires, parmi lesquelles on distingue plusieurs types : la
mémoire ROM (Read Only Memory : mémoire à accès en lecture seule) :
ensemble de bits dont l'état est fixé une fois pour toute, lors de la con-
struction de l'ordinateur. Elle sert à stocker des informations perma-
nentes (procédures de démarrage...) ; la mémoire RAM ou "mémoire vive"
(Random Access Memory : mémoire à accès aléatoire) : ensemble de bits
modifiables à volonté, où se trouvent stockées les données sur lesquelles
travaille l'ordinateur. Il ne faut pas comprendre aléatoire dans le sens
de "au hasard", mais par opposition à séquentiel ; cela signifie que l'on
peut avoir accès directement à tout endroit de cette mémoire (comme
les chansons dans un CD ou les chapitres dans un film en DVD), sans
avoir à la parcourir bit à bit (comme dans les cassettes audio ou vidéo).
Cette mémoire est volatile, c'est-à-dire qu'elle ne conserve les données
que tant que la machine est sous tension. La mémoire vive des meil-
leurs ordinateurs actuels atteint 1Giga-octet.les mémoires secondaires
ou auxiliaires : ce sont des dispositifs permettant de stocker des bits de
façon stable (qui reste fixée même si on éteint la machine) tout en étant
généralement modifiable. On peut inclure parmi elles les disques durs,
les disquettes, les bandes magnétiques, les clés USB... La capacité des
disques durs actuels se compte en Giga-octets.
Les autres composants sont donc : soit des périphériques d'entrée,

c'est-à-dire permettant à un utilisateur extérieur de fournir des infor-
mations (données/programmes) à la machine sous forme numérique
: souris, clavier, scanner, joystick, appareil photo numérique, came-
scope numérique... Ces dispositifs peuvent tous être conçus comme des
numériseurs puisqu'ils transforment un comportement (l'appui sur la
touche d'un clavier, le mouvement de la souris) ou un objet (une photo
analogique pour le scanner, un paysage pour les appareils de prise de
vue numérique !) en une suite de bits.
soit des périphériques de sortie, c'est-à-dire permettant de visu-
aliser ou de transmettre des données internes à l'extérieur : écran, im-
primante, IPod, vidéo-projecteur... A l'inverse des numériseurs, ces dis-
positifs traduisent des suites de bits en information interprétable par les
humains
322
Exercices
Exercice 1 :Associez chaque mot de la liste suivante avec une des défi-
nitions proposées :
a- Horloge b-Unité Centrale de Traitement c- Circuit intégré d-
RAM e-Système d’exploitation f-Registre g-Transistor h-Micropro-
cesseur i-Bus j-Carte Mère k-antémémoire l-Mémoire morte
1. Circuit spécialisé comportant une petite quantité de mémoire ultra

rapide pour rendre les informations fréquemment demandées immédi-
atement accessibles au processeur.
2. Petite mémoire contenue dans le microprocesseur destiné à stocker
de manière très temporaire un certain nombre d’informations comme
les résultats intermédiaires d’un calcul ou l’adresse de la prochaine in-
struction à exécuter.
3. Sorte de commutateur électronique servant à contrôler le passage du
courant électrique.
4.Principale carte de circuits imprimés dans un ordinateur.
5.Cristal de quartz vibrant à une fréquence déterminée, produisant des
signaux périodiques qui servent à synchroniser les tâches d’un micro-
processeur.
6.Type de mémoire volatile, lisible et réinscriptible, dont chaque cellule
est directement accessible.
7.Ensemble de circuits gravés sur une plaque de silicium.
8. Mémoire interne dont le contenu peut être lu mais non modifié.
9.Ensemble des lignes transportant les signaux qui permettent au mi-
croprocesseur de communiquer avec ses mémoires et ses périphériques.
10.Dispositif d’E/S du micro-ordinateur accessible par un programme
qui transporte simultanément les 8 bits d’un mot au travers d’un en-
semble de conducteurs.
11.Unité principale de traitement d’un ordinateur, généralement con-
tenue dans un circuit intégré unique.
12.Programme nécessaire à la gestion des ressources matérielles et
logiciels d’un ordinateur.
323
Associez chaque mot de la liste suivante avec une des définitions propo-
sées : Mot Définition Mot Définition
a- Horloge 5 b- unité centrale de traitement 11
c- Port parallèle10 d- RAM6
e- Système d’exploitation 12 f- Registre 1
g- Transistor3 h- Microprocesseurh
i- Bus 9 j- Carte Mère4
k- Antémémoire 2 l- Mémoire morte8
Exercice 2 :
Quelle est la signification des acronymes suivants :
- CPU - ZIF
- UAL - FDD
- RAM - LIF
- ROM
Acronymes Signification
CPU Central Processing Unit
UAL Unité Arithmétique et Logique
RAM Random Access Memory
ROM Read Only Memory
ZIF Zero Insertion Force
FDD Floppy Disk Drive
LIF Low Insrtion Force
Exercice 3 :
1) ATA et SATA : que signifient les lettres et à quoi cela sert-il ?
2) Qu’est ce que le DMA ? Expliquez le mécanisme.
3) Qu’est ce que la mémoire cache sur un disque dur et quelle est son
3.1) ATA et SATA : que signifient les lettres et à quoi cela sert-il ?
Le standard ATA (Advanced Technology Attachement) est une interface
qui permet la connexion de périphériques de stockage (HDD, CD ET
DVD). Le Serial ATA est un bus permettant la connexion en série de péri-
phériques de stockage haut débit. C’est le nouveau standard de connex-
ion des disques durs.
3. 2)Qu’est ce que le DMA ? Expliquez le mécanisme.

Direct Memory Access. C’est un mécanisme qui permet à un périphérique
de transférer des données de, ou vers la mémoire d’un ordinateur sans
passer par le processeur.
formances globales.
324
3. 3)Qu’est ce que la mémoire cache sur un disque dur et quelle est

son utilité ?
Mémoire cache (Mémoire tampon) : quantité de mémoire embarquée sur
le disque dur. La mémoire cache permet de conserver les données aux-
quelles le disque accède le plus souvent afin d’améliorer les per
Exercice 4 :
Quels sont liens physiques entre le processeur et la mémoire ?
Les Bus : bus d’adresses – bus Commandes – bus de données
Exercice 5 :
Comment effacer la mémoire CMOS du bios ?
En général il faut :- Mettre l’ordinateur hors tension.
- Déplacer ou retirer un cavalier sur la carte mère.
- Mettre sous tension une dizaine de secondes.
- Remettre hors tension.
- Remettre le cavalier dans sa position initiale.
Exercice 6 :
Parmi les propositions suivantes, quel programme n’est pas utile à
la protection de votre ordinateur lorsque vous naviguez sur internet ?
a. Un antivirus. b. Un back office. c. Un pare-feu.
Exercice 7 :
L’entretien des données du PC nécessite t-il de démonter entièrement
votre machine ?
a. Uniquement le panneau latéral pour nettoyer le(s) disques dur(s).
b. Non, l’entretien des données s’effectue via des programmes se
trouvant sur mon ordinateur.
c. Oui, il faut démonter entièrement l’ordinateur afin de nettoyer chaque
composant.
Exercice 8 :
Les cartes graphiques et les fonctions graphiques AGP sont différentes
sur le plan de :
a. Modularité b. Puissance de traitement= BIOS c.Mémoire vidéo
Exercice 9 :
Si l’on installe deux disques durs sur le même contrôleur, ils seront
définis da la façon suivante :
1- deux disques maîtres
2- deux disques esclaves
3- un disque maître et un disque esclave
325
Exercice 10 :
Par un lecteur de CD-ROM on peut :
1- lire et écrire les informations
2- écrire les informations seulement
3- lire les informations seulement
Exercice11 :
Les périphériques de sorties se connectent sur :
1- le port PS/2
2- les ports séries et parallèles
3- l’alimentation
Exercice 12 :
Formater un support de stockage veut dire :
1. Préparer ce support pour une première utilisation
2. Créer une série de dossiers sur ce support
3. Créer automatiquement des dossiers et des fichiers sur ce support
4. Copier le format du disque dur sur ce support
326
Chapitre
INSTALLATION D’UN SYSTEME D’EXPLOITATION
11
“Les logiciels propriétaires n’ont aucune éthique”
Richard Stallman
Description du système d’exploitation
Pour qu’un ordinateur soit capable de faire fonctionner un
programme informatique (appelé parfois application ou logiciel),
la machine doit être en mesure d’effectuer un certain nombre
d’opérations préparatoires afin d’assurer les échanges entre le
processeur, la mémoire, et les ressources physiques (périphéri-
ques).
Pré-requis
• Connaître les composants d’un ordinateur
• Savoir configurer le BIOS d’un ordinateur
• Savoir suivre les indications et les procédures d’installation d’une

application
Compétences
• Identifier un système d’exploitation et connaître son rôle dans un or-

dinateur
• Installer un système d’exploitation
• distinguer et comparer LINUX et WINDOWS
Leçons / Sommaire
I. DESCRIPTION ET ROLES DU SYSTEME D’EXPLOITATION......................330

II. LES TYPES DE SYSTEMES D’EXPLOITATION..........................................335
III. EXEMPLES DE SYSTEMES D’EXPLOITATION : WINDOWS ET LINUX.....337
Résumé..............................................................................................................355
Exercices............................................................................................................356
328
Exemple 1:
Après avoir acquis et montés les composants matériels d’un ordi-
nateur, il vous est demandé de rendre ce bien utile, pouvant faciliter le
traitement des opérations et des activités des Hommes?
Ainsi vous vous demandez comment interagir avec cet appareil
électrique et communiquer avec lui ?
Exemple 2 :
Vous remarquez que les composants d’un ordinateur peuvent
être différents selon leur constructeur et qu’ils existent plusieurs types
d’ordinateurs,ainsi auraient-ils le même langage machines?
Exemple 3 :
Selon les utilisateurs la communication avec un ensemble de ma-
tériel est-elle la même? Si par exemple, l’on souhaite :
• Partager les données
• Avoir plusieurs utilisateur sur un même machine
• Travailler et communiquer avec d’autres machines
• Etc...
329
I. DESCRIPTION ET ROLES DU SYSTEME D’EXPLOITATION
J’apprends /cours

INTRODUCTION
1. Description du système d’exploitation
Pour qu’un ordinateur soit capable de faire fonctionner un programme
informatique (Appelé parfois application ou logiciel), la machine doit être
en mesure d’effectuer un certain nombre d’opérations préparatoires afin
d’assurer les échanges entre le Processeur, la mémoire, et les ressources
physiques (périphériques).
Le système d’exploitation (noté SE ou OS, abréviation du terme an-
glais Operating System), est chargé d’assurer la liaison entre les ressources
matérielles, l’utilisateur et les applications (traitement de texte, jeu vidéo,
...). Ainsi lorsqu’un programme désire accéder à une ressource matérielle,
il ne lui est pas nécessaire d’envoyer des informations spécifiques au péri-
phérique, il lui suffit d’envoyer les informations au système d’exploitation,
qui se charge de les transmettre au périphérique concerné via son pilote.
En l’absence de pilotes il faudrait que chaque programme reconnaisse et
prenne en compte la communication avec chaque type de périphérique.
Le système d’exploitation permet

ainsi de “dissocier” les programmes et
le matériel, afin notamment de simpli-
fier la gestion des ressources et offrir à
l’utilisateur une interface homme-ma-
chine (notée «IHM») simplifiée afin de lui
permettre de s’affranchir de la complexité
de la machine physique.
Figure 11.1 : Fonction d’un SE
330
Figure 11.2 : Localisation logique d’un SE

2. Rôles du système d’exploitation
Les rôles du système d’exploitation sont divers :
• Gestion du processeur et Gestion de l’exécution des applica-
tions : le système d’exploitation est chargé de la bonne exécution des ap-
plications en leur affectant les ressources nécessaires à leur bon fonc-
tionnement. Il permet à ce titre de «tuer» une application ne répondant
plus correctement.: le système d’exploitation est chargé de gérer l’allocation
du processeur entre les différents programmes grâce à un algorithme
d’ordonnancement. Le type d’ordonnanceur est totalement dépendant du
système d’exploitation, en fonction de l’objectif visé.
Définition (Processus):C’est un programme en cours d’exécution
Chaque processus possède un espace d’adressage qui contient: le pro-
gramme executable, ses données,sa pile,un ensemble de registres dont( le
compteur ordinal, le pointeur de pile, d’autres registres matériels et infor-
mations nécessaires).
Les ordinateurs sont capables de faire plusieurs choses en même
temps.Le processeur bascule constamment d’un processus à
l’autre : multiprogrammation
Différence processus / programme: Création d’un nouveau processus.
Les Evénements conduisant à la création d’un nouveau processus sont :
Initialisation du système,Exécution d’un appel système de création de pro-
cessus par un pocessus en cours, Requête utilisateur sollicitant la création
d’un nouveau processus, Initiation d’un travail en traitement par lots.
La fin d’un processus est dû à: Arrêt normal (volontaire) (exit) , Arrêt
pour erreur (volontaire), Arrêt pour erreur fatale (involontaire),Le proces-
sus est arrêté par un autre processus,(involontaire) (kill) Un processus
peut prendre un de ces 3 états : En cours d’exécution (le programme uti-
lise le processeur) Prêt (exécutable, temporairement arrêté pour laisser un
autre processus) et Bloqué (ne peut pas s’exécuter tant qu’un évênement
externe ne se produit pas)
331
Le passage de En cours à Prêt et inversement est géré par l’ordonnanceur

de processus.
• Gestion de la mémoire vive : le système d’exploitation est chargé
de gérer l’espace mémoire alloué à chaque application et, le cas échéant,
à chaque usager. En cas d’insuffisance de mémoire physique, le système
d’exploitation peut créer une zone mémoire sur le disque dur, appelée «mé-
moire virtuelle». La mémoire virtuelle permet de faire fonctionner des appli-
cations nécessitant plus de mémoire qu’il n’y a de mémoire vive disponible
sur le système. En contrepartie cette mémoire est beaucoup plus lente.
La Gestion de la mémoire consiste en : L’Hiérarchisation de la mémoire
(cache, RAM, disque dur),Coordination de la manière dont sont utilisées
les différentes mémoires.
Le Rôle du gestionnaire de mémoire sera donc de: conserver la trace de la
mémoire en cours d’utilisation ou pas,d’allouer la mémoire aux processus
qui en ont besoin,de gérer le va-et-vient (swapping) entre mémoire princi-
pale et le disque Mémoire virtuelle.
La taille de l’ensemble formé par le programme, lesdonnées et la pile peut
dépasser la capacité de mémoiredisponible
Le SE conserve les parties de programme en cours d’utilisation dans la
mémoire principale, et le reste sur le disque
La mémoire virtuelle permet : d’augmenter le taux de multiprogrammation
,de mettre en place des mécanismes de protection de la mémoire et de
partager la mémoire entre processus
• Gestion des entrées/sorties : le système d’exploitation permet
d’unifier et de contrôler l’accès des programmes aux ressources matéri-
elles par l’intermédiaire des pilotes (appelés également gestionnaires de
périphériques ou gestionnaires d’entrée/sortie).Le SE assure:
la Communication Interface entre contrôleur et périphérique de très bas
niveau ,Le contrôleur possède des registres qui permettent la communica-
tion avec le processeur
l’écriture dans les registres : le SE ordonne au périphérique de délivrer des
données, d’en accepter ou d’effectuer une action donnée;
La lecture : le SE peut connaître l’état du périphérique, savoir s’il est capa-
ble d’accepter une nouvelle commande
Certains périphériques sont équipés d’un tampon de données que le
SE peut lire ou écrire on distingue deux catégories: les périphériques par
bloc où les informations sont stockées par blocs de taille fixe, chacun pos-
sédant sa propre adresse (e.g. :disque) et les périphériques par caractères
où l’information circule sous la forme d’un flot de caractères, sans aucune
structure de bloc (e.g. : clavier, imprimante, souris)
Ondisticgue deux parties dans une unité: un composant mécanique,
le périphérique (e.g. : disque) et un composant electronique, le contrôleur
de périphérique (e.g. : contrôleur IDE)
332
• Gestion des droits : le système d’exploitation est chargé de la sé-

curité liée à l’exécution des programmes en garantissant que les ressourc-
es ne sont utilisées que par les programmes et utilisateurs possédant les
droits adéquats.
• Gestion des fichiers : le système d’exploitation gère la lecture et
l’écriture dans le système de fichiers et les droits d’accès aux fichiers par
les utilisateurs et les applications.Le Disques divisés en partitions pouvant
contenir différents systèmes de fichiers :
Le Secteur 0 du disque = Master Boot Record (MBR) qui comprend la table
de partitions ; boot sur la partition marquée comme active. L’organisation
d’une partition varie fortement d’un système de fichiers à un autre ;
cependant,la présence d’un bloc de boot et souvent d’un superbloc qui
contient les informations sur le type de système de fichiers.
Différentes méthodes d’implantation des fichiers(allocation contigüe, listes
chaînées, ...).
• Gestion des informations : le système d’exploitation fournit un
certain nombre d’indicateurs permettant de diagnostiquer le bon fonc-
tionnement de la machine; Stockage à long terme d’informations. Il as-
sure: le l’enregistrement d’une grande quantité d’informations, le fait que
les informations soient conservées après la fin du processus qui les utilise
(persistance),Le fait que Plusieurs processus doivent pouvoir avoir accès
simultanément à une information.
Fichiers
I Mécanisme d’abstraction (l’utilisateur ne voit pas où et comment sont
stockées les informations) I Subdivision des fichiers par types en fonction
de leur nature I typage fort : le type de fichier est défini par son extension
(MS DOS) I typage déduit : les extensions des fichiers ne sont qu’indicatives,
le système détermine la nature du fichier par inspection du contenu (UNIX)
Figure 11.3 : Rôle d’un SE Figure 11.4 : Structure d’un Ordinateur
333
3. Composantes du système d’exploitation
Figure 11.5 : Constitution d’un SE

Le système d’exploitation est composé d’un ensemble de logiciels per-
mettant de gérer les interactions avec le matériel. Parmi cet ensemble de
logiciels on distingue généralement les éléments suivants :
• Le noyau (en anglais kernel) représentant les fonctions fondamentales
du système D’exploitation telles que la gestion de la mémoire, des proces-
sus, des fichiers, des entrées-sorties principales, et des fonctionnalités de
communication.
• L’interpréteur de commande (en anglais shell, traduisez «coquille»
par opposition au noyau) permettant la communication avec le système
d’exploitation par l’intermédiaire d’un langage de commandes, afin de per-
mettre à l’utilisateur de piloter les périphériques en ignorant tout des cara-
ctéristiques du matériel qu’il utilise, de la gestion des adresses physiques,
etc.
• Le système de fichiers (en anglais «file system», noté FS), permettant
d’enregistrer les fichiers dans une arborescence. Nommés aussi répertoires
ou dossiers.Le Système à repertoires hiérarchiques permet regroupement
logique des fichiers avec les notions de chemin d’accès,chemin d’accès ab-
solu (depuis la racine), chemin d’accès relatif (depuis le répertoire courant).
334
II. LES TYPES DE SYSTÈMES D’EXPLOITATION
J’apprends /cours
On distingue plusieurs types de sys-
tèmes d’exploitation, selon qu’ils sont
capables de gérer simultanément des
informations d’une longueur de 16
bits, 32 bits, 64 bits ou plus.
1. Système multitâches
Un système d’exploitation est dit «mul-
ti-tâche» (en anglais multithreaded)
lorsque plusieurs «tâches» (également
appelées processus) peuvent être
exécutées simultanément. Les appli-
cations sont composées en séquence
Figure 11.7 : Fonctionnement d’un SE sur un disque dur
d’instructions que l’on appelle «processus légers» (en anglais «threads»).
Ces threads seront tour à tour actifs, en attente, suspendus ou détruits,
suivant la priorité qui leur est associée ou bien exécutés séquentiellement.
Un système est dit préemptif lorsqu’il possède un ordonnanceur
(aussi appelé planificateur), qui répartit, selon des critères de priorité, le
temps machine entre les différents processus qui en font la demande.
Le système est dit à temps partagé lorsqu’un quota de temps est
alloué à chaque processus par l’Ordonnanceur. C’est notamment le cas
des systèmes multi-utilisateurs qui permettent à plusieurs utilisateurs
d’utiliser simultanément sur une même machine des applications diffé-
rentes ou bien similaires : le système est alors dit «système transaction-
nel». Pour ce faire, le système alloue à chaque utilisateur une tranche de
temps.
2. Système multi-processeurs
Le multiprocessing est une technique consistant à faire fonctionner plus-
ieurs processeurs en parallèle afin d’obtenir une puissance de calcul plus
importante que celle obtenue avec un processeur haut de gamme ou bien
afin d’augmenter la disponibilité du système (en cas de panne d’un proces-
seur). On appelle SMP (Symmetric Multiprocessing ou Symmetric Multi-
processor) une architecture dans laquelle tous les processeurs accèdent à
un espace mémoire partagé.Un système multiprocesseur doit donc être ca-
pable de gérer le partage de la mémoire entre plusieurs processeurs mais
également de distribuer la charge de travail.
3. Systèmes embarqués
Les systèmes embarqués sont des systèmes d’exploitation prévus pour
335
fonctionner sur des machines de petite taille, telles que des PDA (personal
digital assistants ou en français assistants numériques personnels) ou des
appareils électroniques autonomes(sondes spatiales, robot, ordinateur de
bord de véhicule, etc.), possédant une autonomie réduite. Ainsi, une cara-
ctéristique essentielle des systèmes embarqués est leur gestion avancée de
l’énergie et leur capacité à fonctionner avec des ressources limitées. Les
principaux systèmes embarqués «grand public» pour assistants numéri-
ques
personnels sont :
• PalmOS
• Windows CE / Windows Mobile / Window Smartphone
4. Systèmes temps réel

Les systèmes temps réel (real time systems), essentiellement utilisés dans
l’industrie, sont des systèmes dont l’objectif est de fonctionner dans un
environnement contraint temporellement. Un système temps réel doit ain-
si fonctionner de manière fiable selon des contraintes temporelles spéci-
fiques, c’est-à-dire qu’il doit être capable de délivrer un traitement correct
des informations reçues à des intervalles de temps bien définis (réguliers
ou non).
Voici quelques exemples de systèmes d’exploitation temps réel :
• OS-9.
• RT Linux (Real Time Linux).
• QNX.
• Vx Works.
Je pratique
1) Définition:
a) système d’exploitation
b) processus
c) programme
2) Quels sont les rôles d’un système d’exploitation ?
3) Comments est constitué un système d’exploitation ?
4) Quels sont les types de système d’exploitation ?
336
III-EXEMPLES DE SYSTEME D’EXPLOITAION
Figure 11.8 : Windows & linux
J’apprends /cours
3.1 CAS DE WINDOWS
3.1.1.Présentation et Historique
Le système d’exploitation Windows est inventé par la société améric-
aine Microsoft Corporation: entreprise d’informatique américaine, premi-
ère société mondiale d’édition de logiciels.Implantée à Redmond (à prox-
imité de Seattle, État de Washington), Microsoft possède Des filiales dans
plus de 60 pays.
Microsoft possède une gamme de produit diversifiée : système
d’exploitation et serveur, office et autres logiciels grand public et produits
liées à l’Internet. Bill Gates, cofondateur de Microsoft Corporation et di-
recteur de la firme jusqu’en janvier 2000, homme d’affaires américain,
président de Microsoft et principal architecte des logiciels de cette société,
leader mondial dans le développement de produits logiciels destinés aux
PC. Bill Gates est le cofondateur (1975) avec Paul Allen (Un camarade de
collège) de la société Microsoft. Le succès de cette entreprise a fait de B.
Gates l’un des acteurs les plus influents dans l’industrie informatique en
même temps que la personne la plus riche au monde.
3.1.2.Les différentes versions de Windows

-Interface graphique basée sur MS-DOS
-Windows 2.0 -windows 3.0 -windows NT 3.1 -windows 95
-windowsNT 3.51 -windows4.0 -Windows 98
-windows Milleniueum -windows 2000 -windows XP
-windows server 2003 -Windows Vista -windows server 2008
-Windows seven -Windows 8 windows server 2012
337
3.1.3.Installation pas à pas d’un système d’exploitation: Windows

Seven Professionnel
Insérez le DVD ROM bootable de démarrage de Windows Seven Pro-
fessionnel dans votre lecteur DVD ROM et démarrez votre PC. Si votre PC
ne démarre pas sur le CD ROM Appuyez sur n’importe quelle touche.
Figure 11.9 : Interface après introduction du CD

Cliquez sur Installer maintenant pour lancer l’installation. La fenêtre
suivante apparait:
Figure 11.10 : Interface pour lancer l’installation
338
Ensuite Cliquez sur Suivant :
Figure 11.11 : Interface pour valider le contrat d’utilisation

Puis Choisissez la seconde option: Personnalisée (option avancée).
Figure 11.12 : Interface pour choix d’option
339
Sélectionnez Espace non alloué sur le disque 0 puis cliquez sur Options de
lecteurs (avancées).
Figure 11.13 : Interface pour allocation d’espace dans le disque dur

Entrez un taille de 50000 Mo qui correspond à 50 GO puis cliquez sur Ap-
pliquer.
Figure 11.14 : Interface pour allocation d’espace dans le disque dur
340
Sélectionnez Disque 0 Partition 2 puis cliquez sur Suivant.
Figure 11.15 : Interface pour choix de partition du disque dur

L’installation démarre par la copie des fichiers sur le disque dur.
Figure 11.16 : Interface présentant l’installation du SE dans le disque dur
341
N’appuyez pas sur une des touches sinon au redémarrage votre PC va boot-
er sur le DVD et le système va relancer une autre procédure d’installation.
Figure 11.17 : Interface présentant la progression de l’installation
342
3.2.1 Présentation et Historique

L’histoire de Linux a commencé en 1991 avec le début du projet per-
sonnel d’un étudiant finlandais, Linus Torvalds, qui crée le noyau d’un
nouveau système exploitation.
Le système Linux est un système multi-utilisateurs et multi-tâches.
En tant que système d’exploitation, son rôle principal est donc d’assurer
aux différentes tâches et aux différents utilisateurs une bonne réparti-
tion des ressources de l’ordinateur (mémoire, processeur(s), espace disque,
imprimante(s), programmes utilitaires...) et cela sans intervention des uti-
lisateurs; il prend totalement en charge ces utilisateurs et lorsque les de-
mandes sont trop importantes pour être satisfaites rapidement, l’utilisateur
le ressent par un certain ralentissement (qui peut être effectivement im-
portant, voire insupportable...), mais le système (en principe) ne se bloque
pas. Linux est par ailleurs un système de développement et les utilisateurs
y ont à leur disposition un très grand nombre d’outils, pour la plupart as-
sez simples à utiliser, leur permettant d’écrire, de mettre au point et de
documenter leurs programmes (éditeurs, compilateurs, débogueurs, sys-
tème de traitement de textes...). Les utilisateurs ont ainsi à leur disposition
une boîte à outils bien garnie, le principal problème qui se pose à eux étant
de savoir ce qu’elle contient exactement et à quoi sert chacun de ces outils
!
3.2.2 Les différentes versions de LINUX
on peut citer :
- Debian,
- Ubuntu,
- Mandriva, ...
3. 2.3 Installation d’une version de LINUX
1- Le CD d’Ubuntu est un disque amorçable, ce qui signifie que vous pou-
vez démarrer l’ordinateur à partir de celui-ci. Insérez le CD dans le votre
lecteur et redémarrez l’ordinateur. Vous devriez voir l’invite suivante :
Figure 11.18 : Interface après l’sertion du CD d’UBUNTU
343
2- Sélectionnez « Start or install Ubuntu » en appuyant sur « Entrée »
3- Après quelques minutes, vous devriez vous retrouver dans l’environnement

« Live CD » qui est une version allégée d’Ubuntu vous permettant d’aller
directement surfer sur Internet, envoyer des courriels, utiliser la suite
bureautique OpenOffice. Vous pouvez en profiter pour explorer ce nouveau
système, mais lorsque vous êtes prêts, double-cliquez sur l’icône « Install ».
Figure 11.19 : Interface pour lancer l’installation

Configuration d’Ubuntu :
4- Choisissez la langue d’installation, puis cliquez sur « Avancer »
Figure 11.20 : Interface pour le choix de la langue

5- Sélectionnez votre emplacement géographique, ce qui servira à person-
naliser vos paramètres et ajuster l’heure en fonction du fuseau horaire
(cliquez sur la liste déroulante ou sur la carte géographique.) Ensuite, «
Avancer ».
344
Figure 11.21 : Interface pour choix de l’emplacement
6- Choisissez la disposition du clavier qui vous convient, puis « Avancer ».

Partitionnement du disque :
345
Figure 11.22 : Interface pour choix de la disposition du clavier

7- Nous voici rendus au partitionnement du disque.
a. Si votre disque dur comporte une seule partition avec Windows, et que
vous voulez garder les deux systèmes d’exploitation, cliquez simplement
sur « Guided – resize […] and use freed space »
b. Si vous voulez effacer complètement le disque dur et installer seulement
Ubuntu, cliquez sur « Assisté – Utiliser un disque entier » *attention,
vous perdrez toutes les données sur le disque dur ! Assurez vous de faire
une copie de sauvegarde de tous vos documents !
Figure 11.23 : Interface pour partitionnement du disque
346
c. Si vous avez déjà une partition de libre et que vous voulez l’utiliser pour
installer Ubuntu, ou si votre situation n’est pas dans les choix précédents,
cliquez sur le troisième choix : « Manual »
*** Si vous avez cliqué sur « Manual », suivez les instructions en annexe
avant
de continuer. Sinon, poursuivez
Compte utilisateur et fin de l’installation :
- Vous devez maintenant créer un compte d’utilisateur qui disposera des
droits nécessaires à la plupart des tâches administratives de votre nouveau
système Ubuntu.Remplissez le formulaire tel que demandé et appuyez sur
« Avancer ».
Une fois l’installation terminée, il est recommandé de créer d’autres
comptes d’utilisateurs avec des privilèges limités, ce qui amoindrira les
risques d’altérations du système d’exploitation, mais si vous êtes le seul
utilisateur, ce n’est pas obligatoire. utilisateur, ce n’est pas obligatoire.
Figure 11.23 : Interface pour entrer les paramètres personnels
347
- On vous demande ensuite de vérifier les informations suivantes. Nor-

malement, vous n’avez plus qu’à cliquez sur « Install ».
ou si votre situation n’est pas dans les choix d’utilisateurs avec des priv-
ilèges limités, ce qui amoindrira les risques d’altérations du système
d’exploitation, mais si vous êtes le seul Le processus d’installation peut
durer entre 30 minutes et 1h30 tout dépendant de l’appareil sur lequel
vous procédez à l’installation.
Figure 11.24 : Interface présentant l’installation d’Ubuntu

- Une fois l’installation terminée, cliquez sur « Redémarrer Maintenant » et
retirer le CD du lecteur.
Figure 11.25 : Interface pour redémarrer et retirer le CD
348
Vous avez maintenant un tout nouveau système d’exploitation libre, gra-

tuit, sécuritaire, développé par la communauté, et pour la communauté !
En résumé, on peut dire que le système est composé de :
un noyau assurant la gestion de la mémoire et des entrées-sorties de bas
niveau et l’enchaînement des différentes tâches ;
un (ou plusieurs) interpréteur(s) de langage de commandes; il existe
en effet différents langages de commandes nommés Shell, le plus connu
étant le Bourne Shell (du nom de son auteur), un autre étant le C-Shell
développé à l’université de Berkeley et le plus répandu actuellement étant
le Bash. Nous verrons dans ce tutoriel un cours de Bourne Shell et de
Bash. Il est important de noter que, quelle que soit la version du langage
de commandes utilisée, il s’agit d’un véritable langage de programmation
possédant des instructions et surtout des structures de contrôle de très
grande puissance ;
un système de messagerie assez complet (courrier, conversation en
temps réel, journal de bord) ;
un grand nombre de programmes utilitaires dont évidemment un com-
pilateur de langage C, des éditeurs, des outils de traitement de textes, des
logiciels de communication avec d’autres systèmes Linux (ou autres), des
générateurs d’analyseurs lexicaux et syntaxiques...
3.3Analyse des systèmes de sécurité proposé par les deux systèmes
Figure 11.26 : Comparaison Windows VS Linux

Quelques différences fondamentales entre Linux et Windows
1. Accès total vs pas d’accès
L’accès au code source est probablement la différence la plus signifi-
cative entre Linux et Windows. Le fait que Linux soit sous licence publique
GNU garantit que les utilisateurs (de tout type) peuvent avoir accès (et
droit de modification) au code jusqu’au noyau qui sert de fondement au
système d’exploitation Linux. Vous voulez jeter un coup d’œil au code de
Windows ? Impossible,vous ne verrez jamais le code qui constitue le sys-
tème d’exploitation Windows.
349
2. Liberté de licences contre restriction de licences

Avec l’accès au code, nous avons la différence entre les licences. Re-
gardons juste les aspects clés des licences (sans rentrer dans le jargon
juridique). Avec un système d’exploitation Linux à licence GPL, vous êtes
libre de modifier ce logiciel et de l’utiliser, même de le republier ou de le
vendre (tant que vous mettez le code à disposition). Également, avec la GPL,
vous pouvez télécharger une seule copie d’une distribution (ou application)
Linux et l’installer sur autant de machines que vous le souhaitez. Avec la
licence Microsoft,Vous êtes limité au nombre de licences que vous achetez,
donc si vous achetez 10 licences, vous ne pouvez légalement installer ce
système d’exploitation (ou cette application) que sur 10 machines.
3. Support en ligne assuré par des groupes d’utilisateurs vs sup-
port payant
Avec Linux, vous avez du support grâce à une énorme communauté,
via des forums, les moteurs de recherche, et plein de sites web spécialisés.
4.Administration
Sous Windows comme sous Ubuntu, il faut avoir un compte admin-
istrateur pour réaliser les tâches sensibles, c’est-à-dire celles qui sont sus-
ceptibles de modifier le comportement du système (installation de nouveaux
logiciels, création de connexions, modification des paramètres des fonctions
du système, …). A la mise sous tension du PC, il est conseillé de s’identifier
en tant qu’utilisateur et de recourir à la commande d’administration pour
réaliser ces tâches sensibles. Cette manière de procéder permet d’éviter que
des logiciels malveillants, préalablement installés à l’insu de l’utilisateur
lorsque celui-ci navigue sur Internet en tant qu’administrateur, ne vien-
nent insidieusement perturber le fonctionnement de l’ordinateur ou voler
des informations confidentielles.
Sous Windows, l’utilisateur dispose par défaut d’un compte administra-

teur. Il doit donc faire un effort pour, d’une part, créer un compte utilisa-
teur, puis, d’autre part, s’astreindre ensuite à l’utilisation systématique de
ce compte. Trop fréquemment, l’utilisateur se soustrait à ces contraintes,
ce qui peut poser des problèmes de sécurité.
Sous Ubuntu, l’utilisateur dispose par défaut d’un compte utilisa-

teur et, pour réaliser les tâches sensibles, il doit utiliser la commande
d’administration. Celle-ci lui demande son mot de passe, et ce mot de passe
reste valable pendant quelques minutes, afin de permettre à l’utilisateur
d’enchaîner plusieurs commandes avec une seule saisie. Cette méthode
apparaît comme un bon compromis entre sécurité et légèreté d’utilisation.
350
5.Les environnements de bureau

Windows : vous ne modifiez donc généralement l’apparence de Windows
que par l’utilisation de thèmes.
Ubuntu peut être « habillé » par différents environnement de bureau, ce
qui va bien plus loin que changer l’apparence (le thème) de votre OS : les
menus, raccourcis, applications sont différents… la manière d’utiliser le
système d’exploitation aussi. De plus, il existe aussi différents gestionnaire
de fenêtres pour Ubuntu? notamment Compiz qui permet des effets 3D.
En résumé, les habits sont à l’homme ce que l’environnement de bureau
est au système d’exploitation. Comme vous pouvez changer d’habits, vous
pouvez changer d’environnement de bureau selon vos envies.
6.Système de fichiers
Les données stockées par les ordinateurs peuvent provenir de
sources très variées : textes, formules mathématiques, images, etc.,
chacune correspondant à un mode de codage spécifique. Il ne saurait
pourtant être question de stocker toutes ces données “en vrac” dans la
(les) mémoire(s) des ordinateurs. De même que pour classer rationnel-
lement des documents papiers, on les range dans des pochettes et des
classeurs, le système d’exploitation gère la mémoire disponible à l’aide de
fichiers et de réperoires (on parle aussi de dossiers).
Un fichier sert à stocker des données de même nature (par exem-
ple : caractères provenant d’un texte ou fichier son contenant la version
numérisée d’une chanson). C’est une unité logique : un fichier ne corre-
spond pas à un espace mémoire réservé une fois pour toute, il n’a pas de
taille fixe prédéfinie et les données qu’il contient peuvent éventuellement
ne pas être contiguës en mémoire. Mais, pour l’utilisateur, la façon dont
le système d’exploitation gère les fichiers est invisible (les informaticiens
disent “transparente”). Tout est fait pour que l’utilisateur ait l’impression
que les fichiers qu’il visualise se présentent comme des suites de données
cohérentes.
Dans les systèmes Windows, les fichiers reçoivent un nom qui se termine
toujours par une “extension” de 3 lettres précédée d’un point. Ces 3 let-
tres permettent de repérer avec quel logiciel le fichier a été rempli : elles
indiquent donc indirectement le mode de codage des données stockées
dans ce fichier. Ainsi, un fichier “.txt” contient du texte, donc est codé
par une succession de bits correspondant à des codes ASCII, un fichier
“.exe” est un programme exécutable, codé sous formes d’instructions élé-
mentaires.
Les dossiers (ou répertoires), eux, sont plutôt à considérer comme
des boîtes ou des classeurs : ils ne contiennent pas directement des don-
nées, mais servent d’unités de rangement, pour recevoir soit des fichiers,
soit d’autres dossiers (ils peuvent aussi rester vides).
351
Les fichiers et les dossiers sont structurés dans la mémoire de

l’ordinateur de façon arborescente. c’est un arbre avec le tronc ou la ra-
cine en haut et les feuilles en bas...).Dans un tel arbre, les fichiers ne
peuvent figurer qu’au niveau des feuilles (puisqu’eux-mêmes ne peuvent
pas contenir d’autre fichier ou dossier). Les dossiers, eux, constituent les
noeuds intermédiaires et n’apparaissent au niveau des feuilles que quand
ils sont vides.
C’est le système d’exploitation qui gère toute cette organisation : il
permet par exemple d’ajouter, de déplacer, de supprimer, de recopier...
tout dossier ou fichier.
WINDOWS est capable de gérer les systèmes de fichier FAT, NTFS et HPFS.
FAT (File Allocation Table) est mieux adapté à des partitions de petites
tailles (~300Mb). Fat limite la taille maximum de la partition à 2Go. Il ex-
iste une nouvelle version de la FAT appelée FAT 32 qui vient de paraître et
qui repousse cette limite à quelques milliards de Go. FAT est un système
de fichier très mauvais en matière de sécurité. On ne peut pas faire d’audit,
pas de gestion des droits, mais une fonction Undelete est implémentée ce
qui permet de récupérer un fichier ou répertoire effacé par mégarde.
NTFS (New Technology File System) C’est un système non plus basé
sur une table mais sur une structure arborescente de type arbre binaire
(Btree). Ceci permet un accès aux fichiers beaucoup plus rapide qu’avec
FAT. La barrière des 2Go de partition n’existe plus puisqu’elle est mainten-
ant limitée à 16 milliard de Go. Ce qui est largement supérieur aux besoins
actuels du marché. En terme de sécurité NTFS permet d’associer des droits
(lecture, écriture, effacement etc.) à chaque fichier, groupes de fichiers ou
répertoires ainsi qu’a chaque utilisateur. Il permet de faire une audit sur
les fichiers ou répertoires, ce qui permet de savoir qui a effectué une opé-
ration sur un fichier (effacement, création, lecture...). NTFS possède égale-
ment des fonctions de tolérances de pannes et de RAID. Malheureusement
NTFS n’a pas de fonction Undelete. On ne peut pas formater une disquette
NTFS. NTFS n’est pas compatible avec FAT.
HPFS (High Performance File System) WINDOWS est capable de lire et
écrire sur ce type de partitions. C’est aussi une partition 32 bits qui com-
prend des fonctions de sécurité. Elle n’est absolument pas compatible avec
FAT ni même NTFS.
Ubuntu (Linux) peut utiliser quasiment tous les systèmes de fichiers. Le

principal étant l’EXT4.
Les deux systèmes d’exploitations organisent différemment les fichiers
dans la racine (C:\ ou /) .
352
Utilité Windows Ubuntu

Partition princi- La partition où vous avez Toujours “/”
pale installé Windows (géné-
ralement C:\)
Autres partitions A:\ D:\ E:\ F:\ … Par défaut, tout se trouve
dans /media/
Programmes Généralement C:\Pro- Exécutables : /bin/ & /usr/
gram Files\ bin & /usr/local/bin/
Fichiers supplémentaires : /
usr/
Dossiers person- C:\Users\ (Vista & 7) /home/
nels C:\Documents and Set-
tings\
Fichiers de C:\Documents and Set- /home/utilisateur/
l’utilisateur tings\utilisateur\
Regedit (éditeur de regis-
tre)
Configuration des C:\Mes Documents\ /home/utilisateur/ (sous
programmes (Win98) forme de fichiers cachés)
C:\Documents and Set- gconf (éditeur graphique de
tings\utilisateur\Mes configuration)
Documents\ (WinNT/XP)
C:\Users\utilisateur\
Documents\ (Vista & 7)
Bien entendu, ce sont les configurations de base, et vous n’êtes pas obligé
de mettre vos documents dans ces dossiers (et dans une certaine mesure,
certains programmes).
7. Programmes:Équivalences Windows/Ubuntu
Les applications disponibles sur Ubuntu sont rarement les mêmes
que celles disponibles sur Windows.
Installation de programmes
Sous Windows : il faut généralement télécharger puis lancer un exécut-
able « .exe ».
Sous Ubuntu : il suffit d’1 clic sur les liens que vous trouverez sur la
Documentation du site Ubuntu-fr. Il existe aussi un annuaire de logiciels
intégré (Logithèque Ubuntu) très pratique :
Mise à jour des programmes
Sous Windows : télécharger la nouvelle version sur internet, puis installer
la nouvelle et redémarer.
Sous Ubuntu : il suffit d’1 clic pour mettre à jour automatiquement tous
vos logiciels, vous gagnez beaucoup de temps !
353
8. Gestion des droits

Le systèmes de fichiers gère les droits utilisateurs. Ceux-ci se ré-
vèlent très pratiques. Les permissions pour les fichiers (ou des dossiers) se
présentent comme ceci :
Type Propriétaire Groupe (admin/ Autres
(root/utilisateur) plugdev/… )
Lecture x x x
Écriture x x
Exécution x
Ici par exemple, nous avons un fichier dont le propriétaire a tous

les droits, que le groupe peut lire et modifier, et que les “autres” peuvent
seulement regarder (Sans modifier le fichier).
9.Le montage de partitions et de périphériques

Une des particularités de Linux est le “montage” des partitions et périphé-
riques systèmes. En fait, toutes les partitions autres que “/” doivent être
“montées” dans un dossier. Par défaut, lors de l’installation de Ubuntu,
toutes vos partitions reconnues seront montées dans le dossier /media/.
L’interface graphique d’Ubuntu vous permettra de gérer facilement tout ce
qui concerne le montage de périphériques.
Je pratique
1) Quelles sont les versions que vous connaissez de Windows? de

LINUX ?
2) Sur quels points Windows et Linux sont-ils différents ?
3) Quelles sont les principales étapes à suivre pour installer une ver-
sion de Windows ?
4) Quelles sont les principales étapes à suivre pour installer une ver-
sion de Linux ?
354
Résumé
Parmi les logiciels les plus usuels, il en est un qui est devenu indis-
pensable à tous les ordinateurs actuels : c’est le système d’exploitation
ou système opératoire (traduction de “Operating System”). Le système
d’exploitation d’un ordinateur est en quelque sorte son gestionnaire
central, son chef d’orchestre. En tant que programme, il peut être écrit
en Assembleur (sinon, il est écrit dans un autre langage et compilé)
et est en permanence actif quand l’ordinateur est sous tension. En
fait, quand on allume un ordinateur, on provoque automatiquement
la recopie du système d’exploitation du disque dur vers la mémoire
centrale ; ce programme étant volumineux, c’est ce qui explique que le
“démarrage” d’une machine soit si long. Ses rôles principaux sont les
suivants :
●● fournir une “interface” entre l’ordinateur et l’utilisateur pour per-
mettre à ce dernier de donner des ordres à la machine (par exemple
: lire ou écrire des informations dans la mémoire, lancer une impres-
sion...) ou pour lui signaler les erreurs d’exécution ; cette interface
prend soit la forme d’un langage de commande (comme “MS-DOS”,
Shell) soit la forme d’objets graphiques à manipuler (fenêtres, men-
us...) ;
●● gérer les “ressources” de l’ordinateur, à savoir ses mémoires, son
microprocesseur et ses périphériques : les systèmes d’exploitation ac-
tuels, en effet, sont “multitâches” ; cela signifie qu’ils permettent à
plusieurs programmes de s’exécuter en même temps, et se chargent
de répartir l’occupation des ressources utilisées par chacun d’eux (par
exemple si deux programmes P1 et P2 sont lancés en même temps, le
système d’exploitation permettra à un petit bout de P1 de s’exécuter,
puis laissera la place à un petit bout de P2, puis de nouveau à un petit
bout de P1, etc., de sorte que l’utilisateur aura l’impression que P1
et P2 sont exécutés en parallèle, alors que le processeur est toujours
unique et séquentiel) ;
●● être indépendant du matériel, masquer les particularités de la ma-
chine en substituant aux ressources physiques des abstractions (par
exemple, la notion de fichier, sur laquelle nous reviendrons, est une
notion abstraite, indépendante de la nature du support sur lequel les
données de ce fichier sont réellement stockées) ;
●● contrôler les usagers en leur donnant des droits différents selon
leur statut (associés par exemple à différents mots de passe).
En résumé, le système d’exploitation est la couche logicielle de base
qui s’intercale toujours entre l’utilisateur et le matériel
355
Exercices

1. Les BIOS compatibles sont :
a. les BIOS qui ont la même carte marque de carte mère
b. les BIOS qui ont le même Chipset Master
c. les BIOS qui ont le même pays d’origine
d. Les BIOS qui ont la même marque
e. les BIOS qui ont les mêmes Socket de CPU
2. Le MSDOS est un :
a. système de programmation
b. système d’exploitation de tout le matériel du PC
c. Couche indispensable pour l’exécution des programmes de Windows ou
autres
d. est instable dans la RAM
e. Il gère les adresses RAM et disque au de la de 1Mo
f. est un ensemble de commandes créées par Microsoft avant l’arrivé du
Windows
3. Les fichiers systèmes sont :
a. au nombre de 02 ( Command.com et config.sys)
b. au nombre de 03 ( Command.com et IO.sys et MSDOS.sys)
c. au nombre de 05 ( Command.com et Config.sys et autoexec.bat et
DBLSPACE.BIN et Msdos.sys)
d. Constituent les éléments d’un boot sur un (disque: cdrom: disquette)
Exercice 4 :
1. Décrire les étapes pour installer Windows XP.
2. Installer Windows XP dans la machine de test.
Exercice 5 :
A quoi sert la pille de l’ordinateur.
6. La différence entre un système MSDOS et un System OS est :
= différence su le plan des FAT
= la protection = multitâche = serveurs = monopostes
Exercice 07 : Le logiciel qui assure le fonctionnement d’un ordinateur

est :
1- le logiciel d’application 2- le système d’exploitation
3- le microprocesseur
Exercice 08: Le SETUP est un programme qui permet de :
1- régler les paramètres du PC au démarrage
2- changer le système d’exploitation
3- installer les pilotes des périphériques
356
Exercice 9 : Trouvez l’intrus

1. Windows 95 2. Linux 3. Mac-OS 4. Office 97
Exercice 10 : Qu’est qu’un fichier ?
1. Une suite d’octets enregistrés sur un périphérique de masse
2. Un dossier sur le disque dur
3. Une extension de Word
4. Un protocole Internet
Exercice 11 : Comment arrêter convenablement un ordinateur fonc-
tionnant sous Windows
1. Eteindre l’ordinateur avec le bouton de l’unité centrale
2. Cliquer sur les boutons « Démarrer /Arrêter… »
3. Eteindre l’écran puis l’unité centrale
Exercice 12 :Un système d’exploitation multiutilisateur veut dire :
1. Plusieurs utilisateurs peuvent se succéder sur le même ordinateur
2. Un utilisateur peut lancer plusieurs fois le système
3. Plusieurs utilisateurs peuvent utiliser simultanément les ressources de
la machine
4. Plusieurs périphériques peuvent être mis en oeuvre simultanément
Exercice 13 : Un système multi-tâche veut dire
1. Le système peut exécuter simultanément plusieurs logiciels
2. Le système peut gérer des tâches
3. Le système peut stocker plusieurs logiciels
4. Le système a plusieurs barres de tâche
Exercice 14 : Windows XP est un système
1. Multi-tâche, multi-utilisateur
2. Multi-utilisateur mais pas multi-tâche
3. Multi-tâche mais pas multi-utilisateur
4. Ni multi-tâche, ni multi-utilisateur
Exercice 16 : Qu’est-ce qu’un raccourci clavier?
1. Un clavier plus petit
2. Une séquence de touches permettant de désactiver la souris
3. Un clavier avec des touches spéciales pour Windows NT
4. Une séquence de touches permettant d’exécuter directement des com-
mandes
Exercice 17 :Qu’est ce qu’un menu contextuel?
1. Le menu compagnon office
2. Un menu surgissant lorsque l’on clique avec le bouton droit de la souris
3. Un message d’erreur du menu
4. Un menu spécialisé pour le traitement du contexte
357
Exercice 18 : Le système d’exploitation MS-DOS est :

1- mono-tâche et mono-utilisateur
2- multitâche et multi-utilisateur
3- mono-tâche et multi-utilisateur
19. Une instruction, est l’opération élémentaire que le processeur

peut accomplir est composée de deux champs :
a) Le code opéré
b) Le code opérande
c) Le code opération
d) Le code opérationnel
20. Le nombre d’octets d’une instruction est :

a) Variable selon le type de donnée
b) Variable selon le type de contrôle
c) Variable selon le type de cache
d) Variable selon le type de bips
358
Chapitre
ENTRETIEN DE L’ORDINATEUR
12
“La connaissance s’acquiert par l’expérience, tout le reste n’est que de
l’information.”
Albert Einstein
Pour conserver notre environnement sain et nous préserver des maladies

nous sommes amener à conserver propre notre environnement que se soit à
la maison, au sein de l’établissement, dans notre salle de classe tout comme
les vêtements que nous portons. L’ordinateur nécessite aussi une prise ne
charge qui lui permettra d’avoir une durée de vie considérable.
Pré-requis
* Maitriser les composants matériels

* Maitriser les périphériques
* Maitriser les outils logiciels d’un ordinateur
Compétences
- Maintenir un ordinateur en état de fonctionnement

- Assurer le nettoyage des composants physiques
- Assurer les mises à jour des logiciels
- Assurer la sécurité des utilisateurs
Leçons / Sommaire
I. LE CAS DES ORDINATEURS DE BUREAU..................................................361

II. LE CAS PARTICULIER D’ENTRETIEN DES ORDINATEURS PORTABLES...363
Résumé...........................................................................................................368
Exercices.........................................................................................................369
360
I. LE CAS DES ORDINATEURS DE BUREAU
J’apprends /cours
Votre PC, une fois monté, ne demande pas d’entretien particulier.
Néanmoins,il faut veiller à prendre certaines précautions
1. Nettoyage et entretien de la ventilation:
L’ennemi numéro un du matériel informatique (outre les liquides, et
l’électricité statique) est la poussière; cette particule fine issue de l’usure
des matières...
La poussière s’immisce un peu partout, et se loge avec le temps dans
la ventilation de l’ordinateur, provoquant des surchauffes, réduisant ainsi
la durée de vie du matériel.
Celà représente 30 à 40% des ordinateurs (unité centrale et portable)
qui tombent en panne suite à une surchauffe, se traduisant le plus sou-
vent par un court-circuit au niveau de la carte mère, de la carte vidéo, de
l’alimentation , du circuit d’alimentation...
Figure 12.1 : Ventillateurs et processeurs obstrués par la poussière

Afin de garantir un niveau de refroidissement optimal pour les composants,
il est conseillé d’utiliser une bombe d’air comprimé pour nettoyer régulière-
ment les ventilateurs, radiateurs et filtres anti-poussière si le boîtier en est
équipé, ou un simple pinceau plat.
Attention : l’utilisation d’une bombe à air comprimé implique préala-
blement l’arrêt de l’ordinateur. L’air sortant de la bombe étant plus froid
que l’air ambiant, il se créé un phénomène de condensation très furtif pou-
vant provoquer des courts-circuits.
La plupart du temps il n’y a plus grand chose à faire, si ce n’est de
renouveler le matériel défectueux. Aussi le rôle d’un bon entretien est de
prévenir les problèmes avant que ceux ci ne surviennent,car trop de monde
négligent l’entretien / le nettoyage / et le dépoussiérage de leur ordinateur
fixe ou portable.
361
Le premier nettoyage de la ventilation devra avoir lieu au maximi-

mum deux ans aprés acquisition de l’ordinateur. Une fois ce délai passé,
vous exposerez votre matériel à des surchauffes...
Si l’entretien d’une unité centrale reste assez simple, et est à la portée
de tous... Il en est bien souvent tout autrement concernant les ordinateurs
portables, certains possèdent une trappe facilitant l’accès au ventilateur,
mais pour d’autres modèles, il faut désassembler une partie de l’ordinateur
avant de pouvoir avoir accès a la ventilation.
2. Nettoyage après chute d’un liquide:

Les liquides et les ordinateurs l’un a côté de l’autre ne font jamais bon mé-
nage...Lors d’une chute de liquide (cela arrive plus souvent que prévu) sur/
dans votre ordinateur portable, ou votre unité centrale; ce qu’il faut faire:
Arrêter l’ordinateur immédiatement (si celui-ci bien entendu n’est pas déjà
en court-circuit). (portable) le mettre en position de livre ouvert trackpad/
mousepad vers le bas. (portable) enlever la batterie, et surtout ne plus le
mettre sous tension. Amener l’ordinateur à un informaticien dans les plus
brefs délais (toujours en position livre ouvert trackpad/mousepad vers le
bas, lors du transport)...Afin que celui-ci puisse le désassembler et ainsi
pouvoir nettoyer toutes traces de liquides... et Le ou les court-circuits cau-
sés...
3. Nettoyage et entretien des systèmes d’exploitation:

Au fil du temps le système d’exploitation peux devenir lourd, voir
surchargé. Avec les nombreuses installations / désinstallations de
logiciel, des résidus de fichiers, de registre restent dans votre disque dur...
L’entretien logicielle a l’aide des séquences spécifiques ou des applications
appropriées,nettoiera et réglera les problèmes suivants: nettoyage des fich-
iers temporaires,base de registre,mises a jours récalcitrantes de windows
update, framework imprimante, tri dans les programmes se chargeant au
démarrage (icônes prés de l’heure)...
Un système d’exploitation entretenu, se traduit par un ordinateur
fonctionnant correctement (pratiquement comme au premier jour).
Ce qu’il ne faut pas faire: Passer le sèche cheveux et le remettre en marche
en pensant avoir séché/évaporé le liquide incriminé, surtout si vous ne le
démontez pas! Toujours est-il, cela reste une situation délicate, les chanc-
es de survie de votre ordinateur dépendront de:
La chute du liquide (jusqu’où celui-ci s’est répandu).
Le réflexe sur le moment d’éteindre l’ordinateur et de retirer sa batterie au
plus vite, ou pour une unité centrale de retirer le cordon d’alimentation.
362
Alors ne négligez plus l’entretien de votre matériel, faire entretenir

/ nettoyer / dépoussiérer son ordinateur, c’est s ‘assurer de la longévité
dans le temps de son matériel informatique.
II. LE CAS PARTICULIER D’ENTRETIEN DES ORDINATEURS PORTABLES
La plupart des utilisateurs ne prennent que peu soin de leurs ma-
chines, elles sont devenues un élément si familier. Ne privilégiez pas tou-
jours votre confort à celui de votre matériel, qui veut aller loin ménage sa
monture. Voici quelques conseils de base pour améliorer grandement la
durée de vie d’un ordinateur portable (OP).
1. L’AÉRATION
Problèmes:Les ordinateurs portables ne disposent
pas du même système de refroidissement qu'un PC
de bureau classique.
•Ils sont d'abord fait de plastique, qui a plutôt tend-
ance à garder la chaleur au lieu de la diffuser comme
le ferait de l'aluminium.
•Ils n'ont qu'un petit ventilateur, deux pour les plus
gros, qui ne suffisent pas pour évacuer la chaleur.
•Ils émettent la même énergie calorifique que n'importe
quel ordinateur.
•Leurs prises d'air sont souvent obstruées. Sur une
majorité des OP, l'entrée d'air est sous l'ordinateur,
Figure 12.2 : ventillateur et la sortie est sur la tranche de gauche ou de der-
rière.
Solutions
•Disposez votre OP sur une surface plane le plus souvent possible, et de
préférence surélevé, à l’endroit des prises d’air.
•Ne mettez jamais de manière prolongée votre ordinateur sur vos genoux
ou sur vos draps. Le faire risque d’obstruer l’entrée et/ou la sortie d’air.
•Astuce : Pour utiliser votre ordinateur sur une surface non-rigide et non-
plane (lit, canapé, genoux...), placez un carton rigide et fin découpé (de
type sous-main de bureau cartonné, par exemple les calendriers cartonnés
offerts par certaines banques) sous l’ordinateur. Ceci permettra d’éviter
d’obstruer les prises d’air. Évitez les cartons trop flasques du type cartons
ondulés.
Remarques :
• Cette astuce permet de conserver la santé de votre ordinateur lorsque
vous l’utilisez sur votre lit, mais pas la vôtre : attention à votre dos
• Ne le laissez pas au soleil, même l’écran fermé
363
cette astuce permet de conserver la santé de votre ordinateur lorsque vous

l’utilisez sur votre lit, mais pas la vôtre : attention à votre dos
•Ne le laissez pas au soleil, même l’écran fermé ! Évitez d’être sous une
fenêtre, en particulier les velux, qui ont un effet loupe redoutable
•Vous disposez ici des températures des processeurs.
2. TRANSPORT
Problèmes
•Les OP ne disposent pas de la solide coque
métallique des ordinateurs fixes : bien que
plus légers, ils sont plus vulnérables.
•Les OP sont constitués des même matériaux
que les ordinateurs fixes : ces composants ne
sont pas fait pour le transport quand ils fonc-
tionnent. Un choc, même minime, peut en-
dommager ces circuits et détruire (parfois vi-
olemment) l'ordinateur.
•Les OP n'ont que peu de pièces remplaça-
bles.
•Les sacs des OP ont une forme particulière,
Figure 12.3 : Transport de PC
donc attirent l'attention des voleurs.
Solutions
•Achetez de préférence une valise métallique pour le transport, et évitez
ces sacs à bandoulière de la forme exacte du PC. Aussi, si vous tenez aux
sacs, préférez les sacs à dos qui ne laissent pas deviner la présence de vo-
tre PC tout en offrant des protections plus résistantes sans hausse de prix.
•Je vous conseille, si vous avez des sacs de trop, de confectionner vous
même la housse avec de la mousse et un rembourrage maximal.
•Ne déplacez que très peu votre ordinateur lorsqu’il est en fonction ! Le
disque dur est un élément clé des machines, mais aussi un élément qui doit
faire preuve d’une grande précision. Les chocs et secousses dues au dé-
placement risquent de faire sauter l’aiguille (comme sur un tourne-disque)
et d’endommager vos données : c’est donc des problèmes logiciels que vous
aurez. De plus, le disque dur est constitué d’un disque tournant à haute
vitesse (généralement de 5400 à 7200 tours / minute). L’effet gyroscopique
d’un changement d’inclinaison du portable est alors très important sur
l’axe de rotation et risque de l’abimer. La restauration des données par une
entreprise spécialisée s’avèrera très coûteuse.
•Il faut aussi savoir que l’écran est un système à cristaux liquides : il est
donc aussi fragile que le reste. Ne posez rien dessus, et ne le laissez pas
sous tension (allumé) lorsque vous déplacez l’ordinateur.
364
•Si vous devez le déplacer, placez le en veille : le disque dur aura bien
moins de chance de sauter et l’écran sera éteint.
•Ne changez pas non plus le réglage de la gestion de l’énergie
3. UTILISATION
Problèmes
•Un ordinateur portable n’est pas un ordinateur fixe.
•La batterie s’usera.
Solutions
•Si l’on utilise l’ordinateur portable comme fixe, achetez une platine re-
froidissante. Elle jouera le rôle des ventilateurs absents à l’intérieur. Ça ne
prends pas beaucoup de place, et ce n’est pas excessivement cher pour le
service rendu.
•Connectez un clavier externe : éviter ainsi d’apposer les mains sur les
reposes mains de l’OP, et évitez l’accumulation de la chaleur (peau et or-
dinateur).
•Essayez la souris externe aussi : fini les traces sur le pavé tactile...
•Pour la batterie, : NE LA DÉBRANCHEZ JAMAIS. Alors oui, la batterie
va s’user. Doucement, dans un an, vous allez perdre 10% de sa capacité,
deux ans, 20%... mais l’ordinateur sera protégé: car si l’agence d’electricité
vous envoie un courant trop élevé (ne croyez pas que ce soit toujours au
millivolt près ! ), c’est directement les composants mère de votre OP qui
seront touchés. La batterie, outre son rôle de stockage, a un rôle de régula-
tion et de tampon des surcharges. Elle peut sauver la vie d’une machine.
Sur les ordinateurs fixes, le bloc d’alimentation équivaut à la batterie en
matière de protection et permet de délivrer un courant stable.
•Si vous avez de quoi investir, vous pouvez acheter un onduleur de ce type.
Il ne remplacera pas la batterie, mais (je pense) que vous pouvez prendre
le risque de la retirer afin de ne pas l’user : ces onduleurs sont efficaces.
•Comprenez aussi que le clavier est un accès direct au processeur et au-
tres parties primordiales : si vous veniez à renverser du liquide, votre or-
dinateur risque fort d’en souffrir. Les “mousses” nettoyantes ne sont pas
adaptées. Si vous veniez à mouiller le clavier, débranchez votre ordinateur,
retirez la batterie, et portez-le immédiatement en réparation.
4. LES ÉQUIPEMENTS À BANNIR DE LA PROXIMITÉ DES ORDI-

NATEURS
Lampe Plasma:Ce type de lampe est ABSOLUMENT à éviter près des OP, et
même des ordinateurs en général. En effet, elle émet un puissant rayonne-
ment électromagnétique (capable d’allumer un néon: faites en l’expérience!)
qui influe sur le traitement de l’information, et peut cause à
365
long terme des dommages irréparables. De plus, elle dépolarise les écrans
cathodiques, et les rends troubles. Distance Maximale Admise: 3-5 mè-
tres
Disques à plasma : Moins nocifs que les lampes, mais reste très dangereux
pour les mêmes causes. Les décharges électriques sont en surface, donc
bien plus exposées à envoyer un rayonnement. Cependant, l’ampérage et
le voltage n’étant pas importants, le risque est moindre.
A ne pas laisser à proximité des ordinateurs. D.M.A: 3-5 mètres.
Micro-ondes : Les micros-ondes, malgré leurs coques métalliques laissent

tout à fait passer un peu de leurs ondes. Ceci dit, ces ondes qui ont une
fréquence importante n’influent pas directement sur les principaux com-
posants, mais surtout sur tout les dispositifs d’émission - réception d’un
signal (antenne Wifi, Bluetooth...) D.M.A: 3-5 mètres
Aimants : Surtout des enceintes et/ou caissons de basses “artisanaux”.
En effet, ces “dispositifs” ne disposent pas de blindages antimagnétiques,
et l’aimantation influe beaucoup sur l’écran, mais aussi sur le signal (Wifi,
Bluetooth...) et le traitement informatique. D.M.A: 2-3 mètres
Ampoules “économies d’énergie”:Autant à bannir que les lampes plasm-

iques car presque aussi dangereuses (pour l’ordinateur comme pour vous).
Elles émettent de puissants rayonnements électromagnétiques capable
d’endommager l’ordinateur. C’est en particulier vrai si cette ampoule se
trouve dans votre lampe de bureau. D.M.A: 2-3 mètres.
Remarques
•Traitez votre ordinateur avec soin. Ne tentez pas de l’ouvrir et considérez
le comme quelque chose de précieux.
•Soyez conscient du miracle de la précision électronique.
•Ces règles sont les principales, mais beaucoup coulent de source. Les
suivre augmentera la durée de vie de votre OP.
•Ces machines sophistiquées ne sont pas des jouets.
•Le Software (logiciel) est toujours intimement lié au Hardware (matériel).
Consignes de sécurité
Veuillez vous conformer aux instructions suivantes pour utiliser votre
ordinateur confortablement et éviter tout problème de santé.
Environnement de l’ordinateur Assurez-vous que l’ordinateur :
• n’est pas exposé aux rayons du soleil et est éloigné de toute source
de chaleur ;est éloigné de tout champ magnétique ou de tout appareil
générant de l’électricité statique ;
366
est séparé de tout téléphone portable d'une distance d'au moins 30 cm ;

n'est pas installé dans un environnement poussiéreux ou humide ;
n'est pas posé sur un tapis ou toute autre surface susceptible de géné-
rer de l'électricité statique.
Câbles:
• Ne couvrez pas l'adaptateur secteur et ne posez rien dessus de sorte
qu'il puisse refroidir correctement lors de son utilisation.
• N'utilisez que l'adaptateur secteur fourni avec votre ordinateur.
Bien que d'autres adaptateurs paraissent similaires, leur utilisation
peut endommager votre ordinateur.
Nettoyage de l'ordinateur
• Ne vaporisez jamais de produit d'entretien directement sur l'écran
de votre système.
• Si vous renversez un liquide sur votre ordinateur portable, éteignez-
le immédiatement, débranchez l'adaptateur secteur, retirez la batterie
et assurez-vous qu'il est complètement sec avant de le rallumer. Si
nécessaire, attendez jusqu'au lendemain.
Précautions d'ordre sanitaire:
• Si vous travaillez ou que vous jouez plusieurs heures d'affilée, mé-
nagez-vous des pauses régulières. De temps en temps, détournez votre
regard de l'écran de votre ordinateur. Ne vous servez pas de votre ordi-
nateur si vous êtes fatigué.
• Agencez votre ordinateur de sorte que vous puissiez travailler dans
une position naturelle et détendue.
• Placez les accessoires que vous utilisez fréquemment de sorte qu'ils
soient facilement accessibles.
• Pour plus de confort et de sécurité, placez votre ordinateur en face
de vous. Assurez-vous que la hauteur du clavier et du pavé tactile vous
convienne. Une distance d'environ 45-70 cm doit séparer vos yeux de
l'écran.
• Lorsque vous utilisez votre ordinateur, sa face inférieure, son adap-
tateur électrique et l'air rejeté par ses orifices d'aération peuvent deve-
nir chauds. Évitez tout contact physique continu avec la face inférieure
de votre ordinateur et ne posez pas ce dernier sur vos genoux lorsqu'il
fonctionne.
• Assurez-vous également que les orifices et les grilles d'aération de
votre ordinateur ne sont jamais obstrués ou couverts. Ne posez pas
votre ordinateur sur une surface souple susceptible de bloquer les ori-
fices d'aération (notamment un tapis, une chaise ou un lit).
Certains troubles (mains, poignets, bras, cou, épaules, jambes et dos)
sont provoqués ou aggravés par des actions répétitives. Pour y remédier,
ne pliez pas vos poignets et laissez vos mains flotter au-dessus du
clavier lorsque vous effectuez de la saisie.
367
Résumé
L’entretien du PC est encore l’un des problèmes que rencontre bien
d’usager d’ordinateur;puisque d’abord vouée à la poussière. Le PC est
comme un corps humain qui nécessite la propreté sans laquelle il ne
pourra échapper aux pannes. C’est un élément capital qui exige de
la part de gestionnaire des PC une attention particulière car presque
l’ensemble de composants des PC est sensible à la poussière. dans
ce cas, ce gestionnaire doit adopter un certain nombre de précaution
dans l’entretien des PC :
o Réserver un espace convenable au PC, soit 1m2 par PC et choisir un
emplacement qui est moins exposé à la poussière.
o Couvrir votre PC d’une étoffe à la fin du travail et nettoyer chaque
jour votre PC au début du travail.
o Nettoyer au moins deux fois par mois l’UC en utilisant des étoffes
recommandées (le démontage et le montage de l’UC exigent un spé-
cialiste en la matière) ;
o Éviter de toucher les extrémités des circuits intégrés.
Lorsque vous voulez dépanner un PC ou quand vous utilisez un
PC, certaines normes sont indispensables au bon fonctionnement de
l’UC ; sinon, vous favorisez que votre PC tombe en panne ou trouve
d’autres pannes inconnues. C’est pour cela qu’il est exigé de suivre
scrupuleusement les principes suivants dans l’usage de l’UC :
o Utiliser un bracelet antistatique lors du démontage de votre UC ou
rendre à zéro le courant statique de votre corps en touchant sur cette
dernière ;
o Ne pas travailler sur votre PC avec une UC ouverte (boitier) ;
o Respecter la forme des UC selon le type de position qui lui est assi-
gné (vertical ou horizontal) pour éviter les courts-circuits de certains
composants de votre PC ;
o Éviter de placer un écran de plus de 17 pouces sur une UC.
o Ne placer des objets ni sur l’UC ni sur l’écran.
368
Exercices
1) En quoi consiste l’entretien des ordinateurs ?
2) Quels sont les préalables de sécurité à mettre en œuvre avant

d’effectuer l’entretien des ordinateurs ?
3) Quels sont les équipements à proximité des ordinateurs portables et

de bureau ?
4) Comment résoudre les problèmes d’aération des ordinateurs porta-

bles ?
5) Comment résoudre les problèmes de transport des ordinateurs porta-

bles?
6) Quelle est la différence entre l’entretien logiciel et l’entretien matériel

?
7) En quoi consiste l’entretien d’un système d’exploitation ?
8) Comment prévenir les accidents liés à l’utilisation d’un ordinateur ?
9) Comment réagir après le contact d’un ordinateur avec un liquide ?
10) Quels sont les outils de nettoyage des ordinateurs de bureau et des
ordinateurs portables ?
369
GLOSSAIRE
A d’information que subit une

Affectation consiste à attribuer image bitmap (faite de pix-
une valeur à une variable els) lorsqu’on lui applique des K
Attribut élément supplémen- transformations géométriques
taire permettant de donner plus (zoom, étirement, ...),afin de L
“traduire” ces formes en infor- Lecture permet à la machine
d’informations à ue balise. mations interprétables par la d’obtenir du texte
Animation est une séquence carte graphique.
d’images affichées dans le Lien externe est tout lien per-
temps. E mettant d’appeler une page
Ecriture : une succession de HTML à partir d’une autre page
lettre formant des mots, capa- HTML.
B bles de transmettre des idées Lien interne est tout lien per-
Balise est un élément spécial Expression est un ensemble de mettant de pointer un endroit
qui indique une action concer- valeurs, reliées par des opéra- précis dans la page, à partir
nant la mise en page, la mise teurs, et équivalent à une seule d’un autre endroit de la même
en forme ou la structure logique valeur page HTML.
d’un document. Lumière est une forme d’énergie
Bitmap (appelées aussi images issue de deux composantes
raster) sont des images pixel- F
lisées, c’est-à-dire un ensem- Fonction est un sous-pro-
ble de points (pixels) contenus gramme qui renvoie une valeur M
dans un tableau Modèle est Abstraction de la ré-
d’un seul type
C alité sur laquelle on peut opérer
Clé : information identifiant une
occurrence d’enregistrement. G
Concaténation : décomposition N
d’une information en plusieurs Nom de domaine est une
informations élémentaires. H adresse Internet qui permet
Conceptuel : premier niveau de d’accéder à un site web
la méthode. Niveau fonctionnel Hébergement est l’espace où
indépendant de l’organisation. sont stockées les fichiers fai-
Condition : circonstance ou sant tourner le site Internet O
proposition vraie ou fausse. Opérateur binaire est appliqué
HTML (HyperText Markup Lan- à deux opérandes
Toujours est toujours vrai. Ja- guage). C’est un langage de Opérateur unaire est appliqué
mais ne l’est jamais. Peut-être .. description de contenu et de
Contrainte : complément à un seul opérande
d’explication ou violence exer- structure
cée sur les individus, les rela-
tions et les pattes du modèle de
P
I Pixel est une abréviation de
données. Image : ensemble de traits et de PICtureELement). Le pixel
Contrainte d’intégrité fonc- couleurs constituant une forme représente ainsi le plus petit
tionnelle : patte de cardinalités ayant un sens ou non pour élément constitutif d’une image
minimale et maximale égales à l’esprit humain. numérique.
un. Infographie : c’est le domaine Pixellisation(en anglais alias-
de l’informatique concernant la ing) : c’est l’apparition de pix-
création et la manipulation des els dans une image suite à une
D images numériques. transformation géométrique
Définition le nombre de points Infographiste multimédia :
(pixel) constituant l’image, (notamment l’agrandissement).
est un graphiste qui est capable
c’est-à-dire sa “dimension in- Poids de l’image (en octets) :
par exemple, de mener un pro-
formatique” (le nombre de col- elle est égale au nombre de pix-
jet vidéo, un projet photo, un
onnes de l’image que multiplie els d’uneimage, que multiplie
projet WEB etc. le poids de chacun de ces élé-
son nombre de lignes).
Distorsion : c’est la perte J ments.
370
Q SGBD : Système de Gestion le niveau d’opacité des éléments

de Base de Données. Logiciel d’une image, c’est-à-dire la pos-
permettant de créer, modifier sibilité de voir à travers l’image
R ou consulter des informations des éléments graphiques située
Rayonnement monochro- dans une base (de données). 4 derrière celle-ci.
matique est un rayonnement types de SGBD sont normali-
comportant une seule longueur sés, hiérarchique, navigationnel
d’onde. ou réseau, relationnel et objet. U
Rayonnement polychroma- Site : lieu de traitement ou de
tique est un rayonnement qui stockage de données. Il peut
exister plusieurs sites de don- V
contient plusieurs longueurs Version complète : logiciel
d’onde. nées sur un micro-ordinateur
(tableur et gestion de fichiers). contenant toutes les capacités
Récursivité est une méthode existantes et exigeant l’achat de
algorithmique qui consiste à Son : le déplacement dans
l’espace des ondes sonores in- la licence.
appeler un sous-programme Version d’essai : logiciel offert
terprétables ou non par l’oreille
dans son propre corps. humaine. au téléchargement qui n’a pas
Registrar qui sont organ- Système de pilotage : système besoin d’une licence mais dont
isme accrédité par les au- de l’entreprise. l’accès est limité dans le temps
torités compétentes en matière Système Opérant : c’est la par-
d’attribution et de gestion des tie de l’entreprise qui exécute
noms de domaines Internet les tâches. W
Résolution : elle détermine par Système d’Information sert à
contre le nombre de points par stocker et traiter l’information WYSIWYG signifie, What You
unité de surface, exprimé en
points par pouce (PPP, en an- See is What You Get
glaisDPI pour Dots Per Inch); T
un pouce représentant 2.54 cm. TARGET Permet d’indiquer la Y
fenêtre d’affichage du fichier
défini comme valeur de la pro-
S priété ACTION Z
Schéma directeur : Plan de Transparence : c’est une cara-
développement informatique à ctéristique permettant de définir
moyen terme (5 ans).
371
REFERENCE BIBLIOGRAPHIQUE
• C. JAULT : Les bases de données relationnelles ou le libre accès aux informa-

tions. Les Editions d’organisation. 1986
• D. DURAND : La systémique. Collection Que sais-je ? PUF. 1979.
• LE MOIGNE, J.L. Les Systèmes d’information dans les organisations. Paris :PUF,
1973.
• Dictionnaire chinois-français des locutions et proverbes. Joint Publishing Co.
1980.
• MELESE,J. Approche systémique des organisations. Paris : Hommes et Tech-
niques, 1979
• H. TARDIEU, A. ROCHFELD, R. COLLETTI : La méthode Merise. Tome 1 princi-
pes et Outils. Les Editions d’organisation. 1983.
• H. TARDIEU, A. ROCHFELD, R. COLLETTI : La méthode Merise. Tome 2 dé-
marche et pratiques. Les Editions d’organisation. 1985.
• Y. TABOURIER : De l’autre côté de Merise. Les Editions d’organisation. 1986.
• Y. TABOURIER : Du modèle entité/relation vers un véritable réseau sémantique.
MBD n°9 1988.
372
Informatique en 1ère TI
Dans la même collection
• Le traitement de texte
• La Présentation Assisté par Ordinateur
• Le tableur en 4ème et 3ème
• Les réseaux Informatiques
• Internet pour débutants
• Informatique en Terminale TI
• Textbook for Advanced level ICT
• Les réseaux informatiques en Terminale

Livre 1ère TI

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

Livre 1ère TI

Transféré par

Droits d'auteur :

Formats disponibles

Collection Constellation

ENS - DITE - 2013

ATOUBA MINSE LEONCE DAVY

GUENTANG GUEGABA PIERRE FREDERIC

NGNABANG MARIE NOEL

ENS - DITE - 2013

L’introduction de l’informatique dans le système éducatif camerou-

TABLE DES MATIÈRES

MODULE 1 : ALGORITHMIQUE ET PROGRAMMATION WEB..........................7

CHAPITRE 2 : PROGRAMMER LES PAGES WEB STATIQUES HTML...................................79

CHAPITRE 3 : PRODUIRE UNE FEUILLE DE STYLE.........................................................115

CHAPITRE 4 : PROGRAMMER EN JAVASCRIPT................................................................142

PROJET 1 : REALISER ET PUBLIER UN SITE WEB STATIQUE...................189

CHAPITRE 6 : CREATION DES TEXTES AVEC EFFETS ..................................................217

CHAPITRE 7 : RETOUCHE D’UNE PHOTO ET CREATION DE BOUTON..............................231

CHAPITRE 8 : CREATION DES ANIMATIONS...................................................................249

PROJET 2 : REALISER UNE SEQUENCE PUBLICITAIRE..............................264

MODULE 3 : CONNAISSANCE DE L’ENVIRONNEMENT D’UN ORDINATEUR...268

CHAPITRE 10 : MONTAGE D’UN ORDINATEUR..................................................................297

CHAPITRE 11 : INSTALLATION D’UN SYSTEME D’EXPLOITATION..................................327

CHAPITRE 12 : ENTRETIEN D’UN ORDINATEUR.............................................................359

MODULE 1 : ALGORITHMIQUE ET PROGRAMMATION WEB.................................7

MODULE 3 : CONNAISSANCE DE L’ENVIRONNEMENT D’UN ORDINATEUR.......268

CHAPITRE 1 : PRATIQUER L’ALGORITHMIQUE...................................................8

CHAPITRE 2 : PROGRAMMER LES PAGES WEB STATIQUES HTML....................79

CHAPITRE 3 : PRODUIRE UNE FEUILLE DE STYLE..........................................115

CHAPITRE 4 : PROGRAMMER EN JAVASCRIPT.................................................142

* Il faut savoir lire et écrire, car ce sont là les notions fondamentales

Dans un vieux cahier de tante Maguy qu’elle considère comme son

♦♦ Mettez dans une assiette 1 Kg de noix de palme

Tout élève apprend à additionner deux nombres entiers positifs

A partir de ces quelques exemples, des préoccupations se posent

Pour chaque exemple, il serait indispensable de :

I- ETAPES DE RESOLUTION D’UN PROBLEME

contenu d’un programme en termes de données et d’actions.

Figure 1.1: Processus de programmation

Algorithme Surface_cercle L’en-tête

II- STRUCTURE GENERALE D’UN ALGORITHME

- L’en-tête : Algorithme +nom de l’algorithme

Exemple : algorithme permettant d’identifier l’utilisateur du programme

En-tête Algorithme CALCULPRIME

1) Déclaration des variables et constantes, et affectation de valeurs

♦♦ son nom (un identificateur unique).

Les valeurs attribuées aux variables peuvent être modifiées au cours de

2) Les différents types de constantes et variables

a) Les types booléens

2- Ces opérateurs sont NON (négation), Et (conjonction), OU (disjonction)

3- a- (88>66) ET (44<55) 3- b- (88>66) ET (66<55)

b- il suffit d’ajouter des parenthèses (a OU b) ET c.

b) Les types alphanumériques

ii- Le type chaîne de caractères

2- Une variable mois de type ANNEE_SCOLAIRE peut prendre comme

4- Les opérateurs applicables à ces valeurs sont :

c- Quels sont les bornes inférieure et supérieure du type premier_trimes-

2- a- Les bornes de Mois sont 1 et 12 prises comme valeurs entières.

e) Types énumérés : Les tableaux à une dimension

i. Déclaration d'un tableau

Tableau servant à contenir les notes de 5 élèves

ii- Le type tableau

Tableau de déclaration des objets

Tableau de déclaration des objets

2- Le contenu de chaque élément :

III- OUTILS EN ALGORITHME

ii- Les opérateurs logiques