Vous êtes sur la page 1sur 183

Document de conception technique Page 1

\ÇyÉÜÅSà|Öâx 1 ère
A
Enseignement Secondaire Général

Collection Arc- En- Ciel


DITE 2010-2012
1
PREFACE

Ce manuel d’informatique s’adresse aux élèves des classes de première littéraire de


l’enseignement secondaire général du Cameroun.
Ce livre basé sur l’approche par compétence voudrait que l’élève, principal acteur de sa
formation partage davantage ses expériences avec ses pairs afin de renforcer ses compétences.
Il poursuit un double objectif :
 Proposer un contenu d’enseignement adapté aux élèves de classe de première A en
conformité avec nouveau programme d’informatique publié par le MINESEC,
 Développer et renforcer chez l’élève d’une part une compétence cognitive relative aux
concepts et aux notions informatiques et d’autre part une compétence effective ou
transversale qui renvoie au savoir-faire.
Ce livre comporte trois parties bien distinctes :
 La première partie est consacrée à l’algorithmique et la programmation statique que l’élève
aborde pour la toute première fois.
 La seconde partie est consacrée à l’infographie. En classe de seconde, il a été question
d’initier l’élève à l’utilisation d’un logiciel de traitement d’images, d’un logiciel multimédia et
de publication assisté par ordinateur. En classe de première, il sera question de créer des
objets d’enrichissement de pages web, de réaliser des objets de publicité, des trucages et des
animations à l’aide des logiciels professionnels.
 La troisième partie est consacrée au projet informatique. Il s’agit pour l’élève de produire un
site web statique en intégrant les éléments développés dans les deux premières parties.
Chaque partie désignée par module contient un ensemble de chapitres qui sont abordés en une
ou plusieurs leçons. La situation problème en début de chaque chapitre vise à susciter chez l’élève
l’intérêt des leçons qui seront développées. Les pré requis en début de leçon rappellent les notions
indispensables pour la compréhension de la leçon, les objectifs généraux de la leçon présentent les
parties qui seront développées dans chaque leçon et un résumé qui synthétise le contenu de la leçon
abordée.
Les exercices placés à la fin de chaque leçon dans les rubriques « contrôle des connaissances »,
« exercices d’application » et « travail en groupe » visent à consolider les acquis des apprenants. Par
ailleurs, ces exercices doivent être abordés dans le cadre des travaux pratiques afin de renforcer
leurs capacités motrices.
Puisse ce livre être d’une très grande utilité pour tous les utilisateurs dans la quête du savoir, savoir-
faire et savoir-être non seulement en Informatique mais dans n’importe quel domaine !
Les auteurs

2
TABLE DES MATIERES

PREFACE ---------------------------------------------------------------------------------------------- 2

TABLE DES MATIERES --------------------------------------------------------------------------- 3

MODULE I :ALGORITHMIQUE ET PROGRAMMATION STATIQUE---------------- 7

CHAPITRE 1 : LES NOTIONS ELEMENTAIRES DE L’ALGORITHMIQUE ----------------------------------- 8


Leçon 1 : LES NOTIONS ÉLÉMENTAIRES D’ALGORITHME --------------------------------------------------------------------- 9
INTRODUCTION ----------------------------------------------------------------------------------------------------------------- 10
I. LES ÉTAPES DE RESOLUTION D’UN PROBLÈME --------------------------------------------------------------------- 10
II. LA NOTION D’ALGORITHME ------------------------------------------------------------------------------------------ 11
III. LES QUALITÉS D’UN BON ALGORITHME --------------------------------------------------------------------------- 12
Résumé --------------------------------------------------------------------------------------------------------------------------------- 13
Contrôle de connaissances -------------------------------------------------------------------------------------------------------- 13
Exercice d’application-------------------------------------------------------------------------------------------------------------- 13
Travail en groupe -------------------------------------------------------------------------------------------------------------------- 14
Leçon 2 : STRUCTURE GENERALE D’UN ALGORITHME ------------------------------------------------------------------------ 15
INTRODUCTION ----------------------------------------------------------------------------------------------------------------- 16
I. LES ELEMENTS CONSTITUTIFS D’UN ALGORITHME ---------------------------------------------------------------- 16
II. STRUCTURE D’UN ALGORITHME------------------------------------------------------------------------------------- 18
Résumé --------------------------------------------------------------------------------------------------------------------------------- 20
Contrôle de Connaissances ------------------------------------------------------------------------------------------------------- 20
Exercices d’application ------------------------------------------------------------------------------------------------------------ 21
Travail en groupe -------------------------------------------------------------------------------------------------------------------- 21
Leçon3 : LES INSTRUCTIONS SIMPLES --------------------------------------------------------------------------------------------- 22
INTRODUCTION ----------------------------------------------------------------------------------------------------------------- 23
I. LES PRINCIPALES INSTRUCTIONS SIMPLES --------------------------------------------------------------------------- 23
II. EXEMPLE D’UTILISATION DES INSTRUCTIONS SIMPLES DANS UN ALGORITHME --------------------- 25
Résumé --------------------------------------------------------------------------------------------------------------------------------- 25
Contrôle de connaissances -------------------------------------------------------------------------------------------------------- 25
Exercices d’application ------------------------------------------------------------------------------------------------------------ 26
Travail en groupe -------------------------------------------------------------------------------------------------------------------- 27
Leçon4 : LES STRUCTURES DE CONTROLE ---------------------------------------------------------------------------------------- 28
INTRODUCTION ----------------------------------------------------------------------------------------------------------------- 29
I. LES STRUCTURES ALTERNATIVES ---------------------------------------------------------------------------------------- 29
II. LES STRUCTURES ITERATIVES OU REPETITIVES ------------------------------------------------------------------ 31
Résumé --------------------------------------------------------------------------------------------------------------------------------- 33
Contrôle de Connaissances ------------------------------------------------------------------------------------------------------- 33
Exercices d’application ------------------------------------------------------------------------------------------------------------ 33
Leçon5 : LES NOTIONS DE FONCTION ET DE PROCEDURE ------------------------------------------------------------------- 34
INTRODUCTION ----------------------------------------------------------------------------------------------------------------- 35
I. LES PROCEDURES ------------------------------------------------------------------------------------------------------------- 35
II. LES FONCTIONS ----------------------------------------------------------------------------------------------------------- 37
résumé ---------------------------------------------------------------------------------------------------------------------------------- 39
Contrôle de connaissances -------------------------------------------------------------------------------------------------------- 39
Exercices d’application ------------------------------------------------------------------------------------------------------------ 39
Leçon 6 : LES TABLEAUX --------------------------------------------------------------------------------------------------------------- 41
INTRODUCTION ----------------------------------------------------------------------------------------------------------------- 42

3
I. NOTIONS DE BASE SUR LES TABLEAUX -------------------------------------------------------------------------------- 42
II. QUELQUES ALGORITHMES SUR LES TABLEAUX ----------------------------------------------------------------- 45
Résumé --------------------------------------------------------------------------------------------------------------------------------- 47
Contrôle de connaissances -------------------------------------------------------------------------------------------------------- 48
Exercice d’application-------------------------------------------------------------------------------------------------------------- 48

Chapitre II : PROGRAMMATION DE PAGES WEB STATIQUES HTML --------------------------------------- 49


Leçon1 : LA NOTION DE PAGE WEB STATIQUE ---------------------------------------------------------------------------------- 50
INTRODUCTION ----------------------------------------------------------------------------------------------------------------- 51
I. LA NOTION DE PAGE WEB STATIQUE ---------------------------------------------------------------------------------- 51
II. LES ÉLÉMENTS DE BASE POUR LA CRÉATION D’UNE PAGE WEB ------------------------------------------- 52
Résumé --------------------------------------------------------------------------------------------------------------------------------- 53
Contrôle de Connaissances ------------------------------------------------------------------------------------------------------- 53
Leçon2 : LA NOTION DE BALISES HTML ------------------------------------------------------------------------------------------- 54
INTRODUCTION ----------------------------------------------------------------------------------------------------------------- 55
I. DÉFINITION DE LA NOTION DE BALISE ET D’ATTRIBUTS ----------------------------------------------------------- 55
II. LES TYPES DE BALISES ET LEUR UTILISATION : -------------------------------------------------------------------- 57
Résumé --------------------------------------------------------------------------------------------------------------------------------- 64
Contrôle de Connaissances ------------------------------------------------------------------------------------------------------- 65
Travail en groupe -------------------------------------------------------------------------------------------------------------------- 65
Leçon3 : LA STRUCTURE DES DOCUMENTS HTML ------------------------------------------------------------------------------ 66
INTRODUCTION ----------------------------------------------------------------------------------------------------------------- 67
I. STRUCTURE D’UN DOCUMENT HTML ---------------------------------------------------------------------------------- 67
II. EXERCICE D’APPLICATION : MA PREMIÈRE PAGE WEB ------------------------------------------------------- 68
Résumé --------------------------------------------------------------------------------------------------------------------------------- 70
Contrôle de connaissances -------------------------------------------------------------------------------------------------------- 70
Travail en groupe -------------------------------------------------------------------------------------------------------------------- 71
Leçon4 : LES TABLEAUX ---------------------------------------------------------------------------------------------------------------- 72
INTRODUCTION ----------------------------------------------------------------------------------------------------------------- 73
I. IMPORTANCE DES TABLEAUX -------------------------------------------------------------------------------------------- 73
II. CRÉATION D’UN TABLEAU DANS UN DOCUMENT HTML ----------------------------------------------------- 73
III. UTILISATION DES ATTRIBUTS DE LA BALISE TABLE : ----------------------------------------------------------- 75
IV. LA MISE EN FORME D’UN TABLEAU ------------------------------------------------------------------------------- 78
Résumé --------------------------------------------------------------------------------------------------------------------------------- 79
Contrôle de connaissances -------------------------------------------------------------------------------------------------------- 79
Travail en groupe -------------------------------------------------------------------------------------------------------------------- 80
Leçon5 : LES FORMULAIRES ---------------------------------------------------------------------------------------------------------- 81
INTRODUCTION ----------------------------------------------------------------------------------------------------------------- 82
I. LES BALISES DE CRÉATION D’UN FORMULAIRE ET LEURS ATTRIBUTS ----------------------------------------- 82
II. INSERTION DE FORMULAIRE DANS UN DOCUMENT HTML --------------------------------------------------- 85
Résumé --------------------------------------------------------------------------------------------------------------------------------- 87
Contrôle de connaissances -------------------------------------------------------------------------------------------------------- 88
Travail en groupe -------------------------------------------------------------------------------------------------------------------- 88
Leçon 6 : LES LIENS HYPERTEXTES, LES IMAGES ET LES SONS --------------------------------------------------------------- 89
INTRODUCTION ----------------------------------------------------------------------------------------------------------------- 90
I. LIENS HYPERTEXTES --------------------------------------------------------------------------------------------------------- 90
II. INSERTION D’IMAGE ---------------------------------------------------------------------------------------------------- 91
III. INSERTION DU SON DANS UNE PAGE ------------------------------------------------------------------------------ 92
Résumé --------------------------------------------------------------------------------------------------------------------------------- 93
Contrôle de connaissances -------------------------------------------------------------------------------------------------------- 94
Exercices d’application ------------------------------------------------------------------------------------------------------------ 94

4
Chapitre III : PRODUCTION DES FEUILLES DE STYLE -------------------------------------------------------------- 95
Leçon1 : GENERALITES SUR LES FEUILLES DE STYLE --------------------------------------------------------------------------- 96
INTRODUCTION ----------------------------------------------------------------------------------------------------------------- 97
I. DEFINITION ET SYNTAXE D’UNE FEUILLE DE STYLE ---------------------------------------------------------------- 97
II. STYLES DE BASE PRE DEFINIS ----------------------------------------------------------------------------------------- 98
III. AVANTAGES DE L’UTILISATION DU CSS ---------------------------------------------------------------------------- 98
Résumé --------------------------------------------------------------------------------------------------------------------------------- 99
Contrôle de connaissances -------------------------------------------------------------------------------------------------------- 99
Leçon2 : MISE EN FORME D’UNE PAGE WEB ---------------------------------------------------------------------------------- 100
INTRODUCTION --------------------------------------------------------------------------------------------------------------- 101
I. APPLICATION D’UN STYLE ----------------------------------------------------------------------------------------------- 101
II. LES DIFFERENTS EMPLACEMENTS DE STYLE-------------------------------------------------------------------- 101
Résumé ------------------------------------------------------------------------------------------------------------------------------- 105
Contrôle de connaissances ------------------------------------------------------------------------------------------------------ 106
Travail en groupe ------------------------------------------------------------------------------------------------------------------ 106

MODULE II : INFOGRAPHIE ----------------------------------------------------------------- 107

Chapitre IV : CREATION DE BOUTONS ------------------------------------------------------------------------------------ 108


Leçon 1 : UTILISATION D’UN LOGICIEL DE CRÉATION DE BOUTON : CAS DE PHOTOSHOP ------------------------ 109
INTRODUCTION --------------------------------------------------------------------------------------------------------------- 109
I. QUELQUES RAPPELS SUR LES IMAGES ET SUR LE LOGICIEL PHOTOSHOP --------------------------------- 110
II. Notions de Boutons. -------------------------------------------------------------------------------------------------- 115
III. CREATION D’UN LOGO ------------------------------------------------------------------------------------------------ 116
Résumé ------------------------------------------------------------------------------------------------------------------------------- 118
Contrôle de connaissances ------------------------------------------------------------------------------------------------------ 119
Leçon 2 : DESSIN DE L’ARCHITECTURE D’UNE PAGE WEB ------------------------------------------------------------------ 120
I. STRUCTURE GENERALE D’UN SITE WEB ----------------------------------------------------------------------------- 121
II. Utilisation de du logiciel Photoshop pour dessiner l’architecture d’un site Web------------------- 122
Résumé ------------------------------------------------------------------------------------------------------------------------------- 123
Contrôle de connaissances------------------------------------------------------------------------------------------------------ 123

Chapitre V : CREATION DE TEXTES AVEC EFFETS ----------------------------------------------------------------- 124


Leçon 1 : TRANSFORMATION DES TEXTES -------------------------------------------------------------------------------------- 125
I. DEFINITION ET SAISIE DE TEXTE DANS PHOTOSHOP ------------------------------------------------------------- 126
II. APPLICATION DES COURBES A UN TEXTE ------------------------------------------------------------------------ 128
Résumé ------------------------------------------------------------------------------------------------------------------------------- 131
Contrôle de connaissances ------------------------------------------------------------------------------------------------------ 132
Travail en groupe ------------------------------------------------------------------------------------------------------------------ 132
Leçon 2 : PUBLICATION ASSISTEE PAR ORDINATEUR (PAO) CAS DE PUBLISHER 2003, 2007 --------------------- 133
INTRODUCTION --------------------------------------------------------------------------------------------------------------- 134
I. PRESENTATION SOMMAIRE DE PUBLISHER 2007 ---------------------------------------------------------------- 134
II. CARTE D’INVITATION ET DE VISITE ------------------------------------------------------------------------------- 135
III. CARTE DE VOEUX------------------------------------------------------------------------------------------------------- 137
IV. CREATION D’UN DIPLOME------------------------------------------------------------------------------------------- 139
Résumé ------------------------------------------------------------------------------------------------------------------------------- 140
Contrôle de connaissances ------------------------------------------------------------------------------------------------------ 140
Travail en groupe ------------------------------------------------------------------------------------------------------------------ 141

Chapitre VI : CREATION D’ANIMATIONS -------------------------------------------------------------------------------- 142


Leçon 1 : UTILISATION D’UN LOGICIEL D’ANIMATION : CAS DE GIF ----------------------------------------------------- 143

5
INTRODUCTION --------------------------------------------------------------------------------------------------------------- 144
I. PRESENTATION DU LOGICIEL ------------------------------------------------------------------------------------------- 144
II. CREATION D’UN GIF ANIME----------------------------------------------------------------------------------------- 145
Résumé ------------------------------------------------------------------------------------------------------------------------------- 150
Contrôle de connaissances ------------------------------------------------------------------------------------------------------ 151
Exercices d’application ---------------------------------------------------------------------------------------------------------- 151
Leçon 2 : INSERTION DES ANIMATIONS DANS UNE PAGE WEB ---------------------------------------------------------- 152
INTRODUCTION --------------------------------------------------------------------------------------------------------------- 153
I. RAPPEL DE L’INSERTION D’UNE IMAGE DANS UNE PAGE WEB ---------------------------------------------- 153
II. INSERTION D’UNE IMAGE ANIMEE DANS UNE PAGE WEB -------------------------------------------------- 155
Résumé ------------------------------------------------------------------------------------------------------------------------------- 156
Contrôle de Connaissances ----------------------------------------------------------------------------------------------------- 156
Exercices d’application ---------------------------------------------------------------------------------------------------------- 156

Chapitre VII : RETOUCHE D’UNE PHOTO -------------------------------------------------------------------------------- 157


Leçon 1 : RETOUCHE D’UNE PHOTO --------------------------------------------------------------------------------------------- 158
INTRODUCTION --------------------------------------------------------------------------------------------------------------- 159
I. RAPPELS SUR QUELQUES OUTILS DANS PHOTOSHOP ---------------------------------------------------------- 159
II. QUELQUES OPERATIONS SUR PHOTOSHOP -------------------------------------------------------------------- 160
Résumé ------------------------------------------------------------------------------------------------------------------------------- 167
Contrôle de Connaissances ----------------------------------------------------------------------------------------------------- 167
Exercices d’application ---------------------------------------------------------------------------------------------------------- 168

MODULE III : PROJET INFORMATIQUE ------------------------------------------------- 170

Chapitre VIII : REALISATION ET PUBLICATION D’UN SITE WEB STATIQUE ------------------------- 171
Leçon1 : REALISATION ET PUBLICATION D’UN SITE WEB STATIQUE ---------------------------------------------------- 172
I. LA NOTION DE SITE WEB STATIQUE ---------------------------------------------------------------------------------- 173
II. PRÉLIMINAIRES POUR LA RÉALISATION ET PUBLICATION D’UN SITE WEB STATIQUE ------------- 174
III. CAS D’APPLICATION : CREATION D’UN SITE WEB STATIQUE ---------------------------------------------- 176
Résumé ------------------------------------------------------------------------------------------------------------------------------- 179
Contrôle de connaissances ------------------------------------------------------------------------------------------------------ 179
Travail en groupe ------------------------------------------------------------------------------------------------------------------ 180

REFERENCES BIBLIOGRAPHIQUES ------------------------------------------------------ 181

6
`ÉwâÄx D
MODULE I :ALGORITHMIQUE ET PROGRAMMATION STATIQUE

ALGORITHMIQUE
ET
PROGRAMMATION STATIQUE

V{tÑ|àÜx D : Les notions élémentaires de l’algorithmique


V{tÑ|àÜx E : Programmation de pages web statiques HTML
V{tÑ|àÜx F : Production de feuilles de style

7
V{tÑ|àÜx D
CHAPITRE 1 : LES NOTIONS ELEMENTAIRES DE L’ALGORITHMIQUE

LES NOTIONS ELEMENTAIRES DE


L’ALGORITHMIQUE
_x†ÉÇ D : Notion élémentaire d’algorithme
_x†ÉÇ E M Structure générale d’un algorithme
_x†ÉÇ F : Les instructions simples
_x†ÉÇ G: Les structures de contrôle
_x†ÉÇ H: Les notions de fonction et de procédure
_x†ÉÇ I: La notion de tableau

Au quotidien, vous êtes sujets à de diverses situations qui s’apparentent


généralement à des problèmes et auxquels vous devez apporter des solutions. C’est
ainsi que si vous désirez vous offrir une omelette en guise de petit déjeuner, vous
devez exécuter une suite d’actions ou poser un certain nombre d’actes liés les uns aux
autres et dans un ordre donné.

8
MODULE1 : ALGORITHMIQUE ET PROGRAMMATION
Chapitre1 : les notions élémentaires de
STATIQUE
l’algorithmique

Leçon1 :
LES NOTIONS ÉLÉMENTAIRES
D’ALGORITHME

Pré requis  Aucun, ce cours s’adresse à des débutants.

Objectifs généraux de la leçon

L’élève à la fin de cette leçon devrait être capable de :


Leçon 1 : LES NOTIONS ÉLÉMENTAIRES D’ALGORITHME
 Énoncer les étapes de résolution d’un problème
 Définir la notion d’algorithme
 Donner les qualités d’un bon algorithme

9
INTRODUCTION
INTRODUCTION

L’homme fait face chaque jour à une multitude de problèmes auxquels il se doit de proposer
des solutions.la recherche de la solution à un problème est une démarche algorithmique, qui est loin
d’être figée ou universelle, dans la mesure où elle dépend de la perception et de la conception de
tout un chacun, cependant la solution reste unique.

I. LES ÉTAPES DE RESOLUTION D’UN PROBLÈME

La résolution d’un problème passe par quatre principales étapes à savoir :


 La compréhension du problème à résoudre, en s’appuyant sur le problème énoncé en début
de chapitre, il sera donc question de résoudre le problème qui est celui de faire une omelette.
 Le découpage du problème initial en sous problème, en partant de l’exemple ci-dessus cité, le
problème initial peut être découpé en assemblage des ingrédients, la préparation et la cuisson
de l’omelette.

Faire une omelette

Assemblage des Préparation Cuisson


ingrédients
 Déterminer pour chaque sous problème, les données en entrée, des opérations de
traitements et les données en sorties (résultat), en d’autres termes la résolution d’un problème ou sous-
problème revient à se poser les 3 questions de base qui sont les suivantes :
1) Quel est le résultat recherché ?
2) Comment obtenir ce résultat ?
3) Quelles sont les informations nécessaires à l’entrée ?
Ceci peut se schématiser comme suit :

Données Traitement Données


en entrée(3) des données(2) en sortie(1)

Exemple : Considérons la préparation et la cuisson d’une l’omelette comme l’un des sous-
problèmes à résoudre.
• Les données en entrées sont : le sel, les œufs, l’huile, le cube, le piment, la tomate,
l’oignon, la poêle, le four…
• Le traitement des données est la celle de la préparation et la cuisson de l’omelette.
• La donnée en sortie (résultat) est ici l’omelette

10
Poêle œufs tomate cube oignon piment four huile

Préparation et cuisson

Omelette

 Le regroupement de toutes les solutions des sous problèmes, pour avoir la solution
générale du problème tel qu’illustrée sur le schéma ci-dessous.

Problème à résoudre

Sous-problème 1 Sous-problème 2 Sous-problème 3

Solution Solution Solution


Sous-problème 1 Sous-problème 2 Sous-problème 3

Solution du problème

II. LA NOTION D’ALGORITHME

Le mot algorithme a pour origine AL KHWARIZMI, mathématicien arabe célèbre qui publia deux
(02) livres dont le premier fut traduit en latin trois siècles plus tard sous le titre d’ALGORITHMVS
d’où l’origine du mot. Mais c’est le mathématicien MARKOV qui donna par la suite au mot
algorithme son sens actuel. «Ensemble de règles précises qui définit un procédé de calcul destiné à
obtenir un résultat déterminé à partir de certaines données initiales».
De manière générale, les tâches que nous exécutons au quotidien obéissent à une logique dont la
finalité est d’aboutir à un résultat précis. La démarche que vous adopterez pour résoudre un
problème s’appellera l’algorithme de ce problème.

11
Un algorithme est un ensemble de règles opératoires rigoureuses, ordonnant à un processeur
(humain ou matériel) d’exécuter dans un ordre déterminé et en un temps fini, un nombre fini
d’opérations élémentaires selon une syntaxe bien définie. Ces opérations élémentaires sont
appelées instructions.
Un algorithme est une séquence d’instructions qui décrit comment résoudre un problème
particulier.
Un algorithme décrit une succession d’opérations qui, si elles sont fidèlement exécutées,
produiront le résultat désiré.

III. LES QUALITÉS D’UN BON ALGORITHME

L’intérêt de l’algorithmique réside dans la résolution optimale des problèmes c’est-à-dire elle
permet de gagner du temps et d’obtenir des solutions moins coûteuses. De ce fait, un algorithme
doit :
 être compréhensible : car un algorithme doit être lu et compris sans difficulté par une autre
personne que celui qui l’a écrit.
 être lisible : L’algorithme doit respecter une structure bien définie.
 être de haut niveau : Il ne doit pas faire appel à des notions techniques relatives à un langage
programmation particulier.
 être défini et précis : ce qui signifie que chaque expression doit être définie sans ambiguïté
 être concis : Un algorithme ne doit pas être long. Si c'est le cas, il faut décomposer le
problème en plusieurs sous-problèmes.
 être structuré : Un algorithme doit être composé de différentes parties facilement
identifiables.
 avoir des données d’entrée qui ont un champ d’application bien précis (Ex. nombre entier,
nombre réel ou caractère, etc...).
 Se terminer après un nombre fini d’opérations.
 posséder au moins un résultat.

12
e°áâÅ°
Résumé

La solution à un problème algorithmique est unique


Contrôle de connaissances
Pour résoudre un problème il faut le découper en sous-problème
Chaque sous-problème doit être traité indépendamment en prenant en compte les données en
entrée, le mécanisme de traitement et le résultat attendu
Exercice d’application
Un algorithme est une suite d’instructions ordonnées qui permet de résoudre un problème précis de
façon optimale.
La solution au problème est l’agencement des solutions de tous les sous-problèmes

VÉÇàܨÄx wx VÉÇÇt|áátÇvxá
1. Donnez les étapes de résolutions d’un problème
2. Qu’est-ce qu’un algorithme ?
3. Quelles sont les qualités d’un bon algorithme ?
4. Pour vous quel est l’intérêt de l’étude de l’algorithmique?

XåxÜv|vx wËtÑÑÄ|vtà|ÉÇ
Exercice: « Inscription au lycée General Leclerc »

A chaque rentrée scolaire au lycée de General Leclec, pour faire partir des effectifs, les anciens
élèves doivent s’acquitter des frais d’inscription, d’APE et des frais d’informatique.
Les nouveaux élèves quant à eux doivent fournir un dossier de recrutement qui contient les bulletins
scolaires de l’année précédente, une demande de recrutement et une photocopie de l’acte de naissance.
Après étude du dossier, l’établissement sort une liste des candidats retenus. Ces derniers s’acquitteront
également des mêmes frais anciens. L’établissement enregistre les noms dans sa
base de données et affiche les noms des élèves par niveau et par classe.
1. Quels sont les données en entrées ?
2. Quels sont les traitements ? Quels sont les résultats ?

13
Travail en groupe

gÜtät|Ä xÇ zÜÉâÑx
« Préparation du poulet DG »
Pour un poulet prêt à cuire, l’on aura besoin de : 1poulet entier, 6 doigts de plantains moyennement
mûrs, 4 tomates, 1 oignon, une gousse d’ail, 1 poivron vert, 3 cubes Maggi, 1 citron, 3 grosses
carottes, 1 pincée de poivre blanc, poivrejaune, anis vert, thym, persil, céleri, Huile raffinée, 1 piment
rouge.
Découpez le poulet en morceaux assez fins et mettez-le dans une casserole adaptée.
Emincez la moitié de l’oignon sur les morceaux de poulet. Ajoutez-y une pince de sel, thym,
ail, jus du citron et 2 verres d’eau. Couvrez la casserole et laissez macérer à feu moyen 20
mn. Pendant ce temps
Emincez le reste d’oignon. Mixez tomates, piment et anis vert. Coupez les carottes en petits
dés et hachez le poivron en fines lamelles.
Mettez de l’huile dans une casserole et laissez chauffer environ 1 minute.
Faites frire les morceaux de poulet, puis retirer les. Ajoutez ensuite dans la casserole les lamelles
d’oignon et de poivron, les carottes en dé. Laissez mijotez 3 minutes en remuant. Ajoutez la tomate
mixée. Laissez à nouveau mijoter 6 minutes. Incorporez à présent le poulet avec sa marinade.
Rallonger avec del’eau. Laissez mijoter 20 mn.
Epluchez les plantains. Coupez-les en dé ou rondelles. Faites-les frire dans de l’huile. En fin de
cuisson du poulet, ajoutez-y le plantain frit. Laisser à nouveau mijoter environ 5 minutes en
vérifiant l’assaisonnement.
Le poulet DG est prêt. Servez tiède, avec ou sans une garniture supplémentaire.
1. Quelles sont les données que l'on retrouve en entrées de ce problème ?
2. Donner quelques opérations de traitement que l’on retrouve dans ce
problème ?
3. Quelles informations peuvent-être considérées comme étant un résultat ou
une sortie de ce problème ?

14
MODULE1 : ALGORITHMIQUE ET PROGRAMMATION
STATIQUE
Chapitre1 : les notions élémentaires de
l’algorithmique
Leçon 2 : STRUCTURE GENERALE D’UN ALGORITHME

Leçon2 :
STRUCTURE GENERALE D’UN ALGORITHME

 Énoncer les étapes de résolution d’un problème


Pré requis  Définir la notion d’algorithme
 Donner les qualités d’un bon algorithme

Objectifs généraux de la leçon

L’élève à la fin de cette leçon devrait être capable de :

 Définir la notion de variable


 Définir la notion de constante
 Donner la structure générale d’un algorithme

15
INTRODUCTION
INTRODUCTION

Avant d’aborder la structure d’un algorithme, il convient de connaître qu’un algorithme


s’écrit suivant un certain langage appelé Langage de Définition Algorithmique(LDA).Par conséquent
ce langage utilise un vocabulaire et des règles de construction des phrases. Ainsi, les éléments
constitutifs d’un algorithme peuvent être classés en trois principales catégories : Les identificateurs,
les séparateurs et les commentaires.

I. LES ELEMENTS CONSTITUTIFS D’UN ALGORITHME

1-1 Les identificateurs


Les identificateurs servent à designer les différents « objets » manipulés par
l’algorithme .Comme objet nous pouvons avoir les variables, les constantes, les fonctions, etc.…pour
une structure algorithmique de base nous nous intéresserons aux variables et aux constantes.

 Les variables
On appelle variable est un objet dont le contenu peut changer au cours de l’exécution de
l’algorithme.

Exemple : Dans la cuisson d’une omelette, le plat est considéré comme un récipient (variable)
dans lequel on peut mettre des ingrédients par la suite y mettre l’omelette ou du pain.

 Les constantes

On appelle constante un objet dont le contenu reste invariant lors de l’exécution d’un
algorithme c’est-à-dire on ne peut le changer pendant l’exécution de l’algorithme.

Exemple :

Considérons dans la cuisson d’une omelette, un couteau et une fourchette sont des constantes
car ils ne changent pas l’exécution de l’algorithme.

De façon générale, un« objet » a trois caractéristiques à savoir :


son identificateur qui est le nom qui l’identifie.
Son type : Les types sont les caractéristiques des constantes et des variables utilisées
dans l’écriture d’un algorithme. On distingue cinq types de base :
 Entier : C’est un nombre négatif ou positif sans virgule.

16
Exemple d’entier : 20 ; 1 ;26.

 Réel : C’est un nombre négatif ou positif avec virgule ou pas.

Exemple de Réel : 1,8 ; 7,9 ; 45 ; -15,23.

 Booléen : C’est une donnée qui ne peut prendre que deux états.

Exemple de booléen : vrai ou faux ; 0 ou 1.

 Le caractère : C’est une donnée alphabétique, ou un symbole…

Exemple de caractère : a ; b ; c ; g ; + ; -.

 Chaine de caractères : c’est un assemblage de données alphabétique, numérique, un


symbole …

Exemple de chaine de caractères : ‘0B3a207Eg’

Sa valeur qui est l’information qui y est stockée ou contenue. Elle peut être un réel, un
booléen, un caractère ou une chaine de caractères.

Exemple de valeur : 20 ; a;

1-2 Les séparateurs


Dans le langage naturel, les mots sont séparés par un espace, un signe de ponctuation ou une
fin de ligne. Il en est de même pour le langage algorithmique dont les règles vont paraître naturelles.
Les caractères séparateurs comprennent tous les opérateurs (+, -, *, =, ==, < =, >=, <, >, etc.) ainsi que
les caractères dits de ponctuation : ( ) [ ] , . : etc.
1-3 Les commentaires
Les commentaires sont des textes explicatifs destinés au lecteur de l’algorithme et qui n’ont
aucun incident sur l’exécution de l’algorithme. Ils sont placés entre les symboles (/* */) et peuvent
apparaître à tout endroit de l’algorithme cependant, on se limitera à des emplacements propices à
une bonne lisibilité.
Les commentaires sont utilisés pour permettre une interprétation aisée de l’algorithme. Leur
utilisation est vivement conseillée. De ce fait, tout texte placé entre les symboles /* */ sera
considéré comme un commentaire.
Un commentaire peut s’étendre sur une ou plusieurs lignes.

Exemple : /* ceci est un commentaire */

17
II. STRUCTURE D’UN ALGORITHME

La structure d’un algorithme est un schéma qui illustre de façon générale les différentes
articulations ou parties du squelette d’un algorithme. On peut la représenter sous forme graphique
(Algorigramme ou Organigramme) ou sous forme littérale (notation algorithmique) dans laquelle les
mots clés sont soulignés et commencent par une lettre majuscule, ainsi que des instructions
terminées par un point-virgule (;).

NOTATION ALGORITHMIQUE

L’entête Algorithme « identificateur »nom de


l’algorithmique

Types

Liste des types

Constantes :

Les déclarations des types, constantes et variables Liste des constantes

Variables :

Liste des variables

Début

Instruction 1 ;
Instruction 2 ;
Le corps de l’algorithme
.

Instruction n

Fin Algorithme

2-1 L’entête

Cette partie permet tout simplement de donner un nom à notre algorithme. Ce nom
n’influence en rien le bon déroulement de l’algorithme. En générale il faut donner des noms
parlants aux algorithmes, ceci pour permettre au lecteur d’avoir une idée de ce que fait
l’algorithme.

18
2-2 les déclarations

C’est une liste exhaustive des objets utilisés et manipulés dans le corps de l’algorithme. Cette
liste est placée en dessous de l’entête.
De manière générale tous les objets manipulés dans l’algorithme doivent être déclarés
• déclaration de type
La déclaration de type se fait juste en les énumérant tout simplement.

Exemple: Entier, Réel, Caractère, etc.…

• déclaration de variable et constance

Les variables et les constantes peuvent être déclarés de manière générale comme suit :
Nom_variable : Type ; Nom_constante : Type

Exemple: Somme : Entier ; a : Réel ; ‘Nom’ : Caractère ; est_pair :


booléen ;‘09YI078’ : chaine de caractère ; etc.…

2-3 le corps

Dans cette partie de l’algorithme sont placées les tâches (instructions opérations …) à exécuter
par notre algorithme.

Exemple d’algorithme: On désire calculer la surface S d’un rectangle de longueur L et de largeur l.

Algorithme : surface_rectangle

Type : Réel
Variables: L, l : Réel ;
S : Réel ;
Début
S←0;
Ecrire (‘’Saisir la Longueur ‘’) ;
Lire (L) ;
Afficher (‘‘Saisir la Largeur ‘’) ;
Lire (l);
S ← L + l;
Afficher (‘’la surface du rectangle est :’’, S) ;
Fin

19
e°áâÅ°
Résumé

Contrôle Les
de variables sont comme des récipients, elles peuvent contenir des caractères, des
Connaissances
lettres, des nombres, des chaînes de caractères. Elles diffèrent des constantes dont
la valeur reste inchangée tout au long de l’algorithme.
Le nom d’une variable ne commence jamais par un chiffre.
Les variables comme les constantes peuvent être de type entier, réel, booléen,
caractère ou chaîne de caractères.
Toute variable, constante utilisée dans un algorithme doit être déclarée au début de
l’algorithme.
Les instructions dans un algorithme sont terminées par des points-virgules, sauf la
dernière.
Tous les mots clés sont soulignés et commencent par une lettre majuscule.
Le contenu d’une variable est écrasé lorsqu’on y met un nouveau contenu.
On ne lit pas le contenu d’une variable dans laquelle on a rien mis.

VÉÇàܨÄx wx VÉÇÇt|áátÇvxá
1. Quelles sont les différentes catégories d’éléments constitutifs d’un algorithme ?
2. Qu’est-ce qu’un identificateur ?
3. Quelles différences faites-vous entre une variable et une constante ?
4. Quelles sont les caractéristiques d’une variable ?
5. Qu’est-ce qu’un type d’objet ? Citez les différents types de base et proposez deux exemples de
votre choix à chaque fois.
6. Quels sont les différents types de base de variables ou constantes utilisés dans le langage
d’algorithme ?
7. Citez quelques séparateurs.
8. Quel est le rôle du commentaire dans un algorithme ?
9. Donnez les caractéristiques d’un mot clé dans un algorithme ?
10. Quelles sont les différentes parties d’un algorithme ?

20
Exercices d’application

XåxÜv|vxá wËtÑÑÄ|vtà|ÉÇ
Travail en groupe
Exercice 1:

Parmi les objets suivants, dites lesquels peuvent être considérés comme variables ou constantes :
Un sceau, Une marmite, de l’eau, du sucre, une bassine, des bonbons, un verre, une assiette du riz.

Exercice 2 :

Soit la suite d’instructions suivante : se lever ; se brosser les dents ; se laver ; prendre le chemin de
l’école. Ecrire un algorithme nommé « aller à l’école » qui donne la suite d’instructions à suivre pour aller
à l’école. Cet algorithme n’aura pas de partie déclaration.

gÜtät|Ä xÇ zÜÉâÑx
Soit à considérer les objets suivants : Un verre, un sachet, de l’eau, du lait, du sucre. On désire
écrire un algorithme qui permet de faire une tasse de lait pour le petit déjeuner.
Parmi les objets cités ci-dessus, dites ceux qui sont des variables et ceux qui sont des constantes. On
suppose que vous avez les instructions suivantes : tourner, bouillir de l’eau, verser de l’eau dans le verre,
verser du lait dans le verre, déchirer le sachet de lait, verser du sucre dans le verre. Mettez ces
instructions dans un ordre cohérent afin d’écrire un algorithme nommé préparation du lait qui permet de
faire une tasse de lait.

21
MODULE1 : ALGORITHMIQUE ET PROGRAMMATION
STATIQUE
Chapitre1 : les notions élémentaires de
l’algorithmique

Leçon3 :
LES INSTRUCTIONS SIMPLES

 Définir la notion de variable


Pré requis
 Définir la notion de constante
 Donner la structure générale d’un algorithme

Objectifs généraux de la leçon

L’élève à la fin de cette leçon devrait être capable de :

 définir les différentes instructions simples


 donner la syntaxe de chaque instruction simple

Leçon3 : LES INSTRUCTIONS SIMPLES

22
INTRODUCTION

Les instructions simples sont les tâches élémentaires, non décomposables pour le processeur. On
en distingue plusieurs à savoir l’affichage, l’affectation, la lecture ou la saisie des données et
l’incrémentation ou la décrémentation.

I. LES PRINCIPALES INSTRUCTIONS SIMPLES

1.1 L’affichage : ECRIRE


Cette fonction permet de communiquer un résultat ou un message à l’écran, on peut aussi
l’appeler instruction de sortie. La syntaxe est la suivante
Ecrire (‘‘ce qu’on veut afficher’’) ; ou Ecrire (‘‘ce qu’on veut afficher’’, nom_variable) ;

Exemple1 : écrire une instruction qui permet Exemple2 : écrire une instruction qui permet
d’afficher le message ‘‘bonjour’’ d’afficher le message ‘’la moyenne est : 12’’
Moy 12 ;
Ecrire (‘’bonjour’’) ;
Ecrire (‘’ la moyenne est :’’, Moy) ;
1.2 l’affectation
Cette instruction permet de mettre une valeur dans une variable. La syntaxe est la suivante :
Identificateur de la variable valeur à affecter ;

Exemple : écrire une instruction qui permet d’affecter la valeur 2 à la variable Somme.
Somme 2;
Exemple Quelles seront les valeurs des variables A et B après exécution des instructions
suivantes ?
Variables : A, B : Entier
Début
A←1;
B←A+3;
A←3;
Fin
Après l’exécution La valeur des variables est :
A←1 A=1 B=?
B←A+3 A=1 B=4
A←3 A=3 B=4

23
Remarque :

L’affectation de valeur à une variable peut être effectuée autant de fois que l’on
veut au cours d’un algorithme.
La valeur de la variable sera alors modifiée à chaque affectation.
La variable réceptrice d’une affectation doit être de même type que de la valeur à
affecter ou de type compatible.
Le type est dit compatible s’il est inclus dans le type de la variable réceptrice.

1.3 la lecture: LIRE

Elle permet d’entrer une donnée à partir du clavier, on peut aussi l’appeler instruction d’entrée.
La syntaxe est la suivante :
LIRE (identificateur de la variable) ;

Exemple : écrire une instruction qui permet de lire la variable


aurevoir
LIRE (aurevoir) ;

1.4 l’incrémentation et la décrémentation.

L’incrémentation consiste à augmenter la valeur d’une variable de 1 tandis que la


décrémentation consiste à diminuer de 1 la valeur d’une variable.

• La syntaxe de l’incrémentation est la suivante :

Identificateur de la variable identificateur de la variable + valeur à ajouter

Exemple : écrire un algorithme qui permet


d’incrémenter la valeur de la variable somme.
Somme Somme+1 ;

• La syntaxe de la décrémentation est la suivante :

Identificateur de la variable identificateur de la variable - valeur à ajouter

Exemple : écrire un algorithme qui permet de


décrémenter la valeur de la variable somme.
Somme Somme-1 ;

Remarque : il faut noter que la décrémentation et l’incrémentation modifie la valeur de


variable initiale

24
II. EXEMPLE D’UTILISATION DES INSTRUCTIONS SIMPLES DANS UN ALGORITHME

Ex Exemple : Ecrire un algorithme qui calcule la somme de 2 nombres réels et affiche le


résultat

Algorithme : Somme_Nombre
Variables: valeur_1, valeur_2 : Réel ;
Résultat : Réel ;
Début
Résultat ←0 ;
ECRIRE (‘’ la valeur du premier nombre réel ’‘) ;
LIRE (valeur_1) ; /* lire peut être remplacé par saisir*/
ECRIRE (‘‘la valeur du deuxième nombre réel’’) ;
LIRE (valeur_2);
Résultat ← valeur_1 + valeur_2 ;
ECRIRE (‘’le résultat de la somme est :’’, Résultat) ;
Fin

Résumé
e°áâÅ°
Contrôle de connaissances

Les instructions simples sont les tâches élémentaires, non décomposables pour le processeur.
Les instructions simples sont l’affichage, l’affectation, la lecture ou saisie des données, et
l’incrémentation/ décrémentation.
L’instruction de lecture se fait au clavier et celle d’écriture se fait à l’écran.
L’affectation à une variable veut dire tout simplement que cette variable prend la valeur qu’on y met.
La valeur de la variable sera alors modifiée à chaque affectation.
La décrémentation et l’incrémentation modifie la valeur de variable initiale.

VÉÇàܨÄx wx VÉÇÇt|áátÇvxá
1. Définir instruction simple.
2. Donnez les différentes instructions simples que vous connaissez.
3. Donnez la syntaxe de chaque instruction après l’avoir définie.
4. Donne un exemple dans chaque cas.

25
XåxÜv|vxá wËtÑÑÄ|vtà|ÉÇ
Exercices d’application

Exercice 1:
Quelles seront les valeurs des variables A, B et C après exécution des instructions suivantes ?
Variables : A, B, C : Entier ;
Début
A←5;
B←3;
C←A+B;
A←2;
C←B–A;
Fin

Exercice 2 :
Quelles seront les valeurs des variables A et B après exécution des instructions suivantes ?
Variables : A, B : Entier
Début
A←5;
B←A+4;
A←A+1;
B←A–4;
Fin

Exercice3 :
Que produit l’algorithme suivant ?
Variables : A, B, C : Caractères
Début
A ← "423" ;
B ← "12" ;
C←A+B;
Fin

26
Travail en groupe

gÜtät|Ä xÇ zÜÉâÑx
Plus difficile, mais c’est un classique absolu, qu’il faut absolument maîtriser :
Exercice 4:

Écrire un algorithme permettant d’échanger les valeurs de deux variables A et B, et ce quel que soit
leur contenu préalable.

Exercice 5:
Quel résultat produit le programme suivant ?
Variables val, double numériques
Début
Val ← 231 ;
double ← Val * 2 ;
Ecrire (‘’ valeur de Val = ‘’, Val) ;
Ecrire (‘’ valeur de double = ‘’, double) ;
Fin

Exercice 6:
Ecrire un programme qui demande un nombre à l’utilisateur, puis qui calcule et affiche le carré de ce
nombre.

Exercice 7:
Ecrire un programme qui lit le prix HT d’un article, le nombre d’articles et le taux de TVA, et qui fournit
le prix total TTC correspondant. Faire en sorte que des libellés apparaissent clairement.

27
MODULE1 : ALGORITHMIQUE ET PROGRAMMATION
STATIQUE
Chapitre1 : les notions élémentaires de
l’algorithmique

Leçon4 :
LES STRUCTURES DE CONTROLE

 définir les différentes instructions simples


Pré requis
 donner la syntaxe de chaque instruction simple

Objectifs généraux de la leçon

L’élève à la fin de cette leçon devrait être capable de :

 Donner les différents types de structures de contrôle.


 Donner la syntaxe de chacune de ces structures et être
capable de les utiliser.
 Identifier la structure de contrôle appropriée pour la
résolution d’un problème.
Leçon4 : LES STRUCTURES DE CONTROLE

28
INTRODUCTION
INTRODUCTION

Dans un algorithme les instructions sont exécutées de façon séquentielle, c’est-à-dire dans
l’ordre dans laquelle elles apparaissent. Ainsi un algorithme peut :
 Effectuer des choix en se comportant différemment suivant des circonstances.
 effectuer des boucles autrement dit répéter plusieurs fois un ensemble donné
d’instructions.
Les instructions de contrôle seront organisées en deux groupes : Les structures alternatives et les
structures itératives ou répétitives.

I. LES STRUCTURES ALTERNATIVES

Elles n’offrent que deux issues possibles à la poursuite de l’algorithme. Ces issues s’excluent
mutuellement c’est-à-dire si l’une des conditions est réalisée, l’autre ne s’exécute pas et vice-versa.
On distingue la structure alternative complète et la structure alternative réduite.
1-1 La structure alternative complète

Elle se présente sous la forme suivante :


Si (condition) alors action1 ;
Sinon action2 ;

Fin si

1. Si la condition est vérifiée, action 1 est exécutée.


2. Si la condition n’est pas vérifiée, action 2 est exécutée.
3. Ensuite on sort de la structure.

1-2 La structure alternative réduite


Elle se présente sous la forme suivante :

Si (condition) alors action ;

Fin si

1. Si la condition est vraie on exécute l’action,


2. si elle est fausse on quitte la structure sans exécuter l’action.

29
Exemple 1 : (structure alternative complète)
Si (j’étudie) Alors Je réussis à mon examen ;
Sinon Je le rate ;
Fin si
On suppose que «Je réussis à mon examen» et «Je le rate» sont des
opérations élémentaires
Exemple 2 : (structure alternative réduite)
Si (j’étudie) alors Je réussis à mon examen ;

Fin si

Exemple 2 : écrire un algorithme qui calcule d’une racine carrée


Algorithme : Racine_Carrée
Variables : x, r: Réel ;
Début

AFFICHER (‘‘Saisir le nombre x‘’) ;


SAISIR (x) ;
Si(x < 0) Alors Afficher (‘‘x est négatif’’);

Sinon r ← racine (x) ;

AFFICHER (‘’ valeur de r : ‘’,r) ;


FinSi

Fin

Remarque :

Condition est une expression dont la valeur de retour est un booléen (vrai ou
faux) ;
Les parenthèses entourant l’expression jouant le rôle de condition font partie de
la syntaxe de l’instruction et sont donc obligatoires ;
La syntaxe de cette instruction n’impose en soi aucun séparateur

30
II. LES STRUCTURES ITERATIVES OU REPETITIVES

La structure itérative ou boucle répète l’exécution d’une action. Sa forme dépend de la


connaissance qu’on a du nombre de répétition de l’action.

2.1 Le nombre de répétition de l’action n’est pas connu


On distingue deux structures de base :
• La structure répéter… jusqu'a
• La structure tant que… faire
2.1.1 la structure répéter… jusqu'a,
L’action est exécutée une première fois puis sa répétition se poursuit jusqu’à ce que la
condition soit vérifiée. Elle se présente sous la forme suivante :
Répéter
Action
Jusqu’à condition vrai
La sémantique d’exécution de cette instruction est la suivante :
1. Exécuter action
2. Evaluer condition
3. Si condition = vrai alors aller à la ligne 5 sinon exécuter action
4. Aller à la ligne 2
5. Sortir de la structure

Remarque :
L’action est exécutée au moins une fois.

2.1.2 la structure tant que … faire


Dans ce cas, on commence par tester la condition ; si elle est vérifiée, on exécute l’action.
Cette structure se présente sous la forme suivante :
Tant que condition faire
Action
Fin tant que
La sémantique d’exécution de cette instruction est la suivante :
1. Evaluer condition
2. Si condition = vrai alors exécuter action sinon aller à la ligne 4
3. Aller à la ligne 2
4. Sortir de la structure

Remarque :
L’action peut ne jamais être exécutée.

31
Exemple
Ecrire un algorithme qui demande à l’utilisateur un nombre
compris entre 1 et 3 jusqu’à ce que la réponse convienne.
Algorithme : nomb_compris
Variable N:Entier ;
Début
N←1;
TantQue N >= 1 et N <= 3
Ecrire ("Entrez un nombre compris entre 1 et 3") ;
Lire (N) ;
Si N < 1 ou N > 3 Alors
Ecrire ("Saisie erronée. Recommencez”) ;
Ecrire ("Entrez un nombre compris entre 1 et 3") ;
Lire (N) ;
FinSi
FinTantQue
Fin

2.2 Le nombre de répétition de l’action est connu


Dans cette structure, la sortie de la boucle d’itération s’effectue lorsque le nombre souhaité
de répétition est atteint. On utilise donc une variable (ou indice) de contrôle d’itération de la boucle
caractérisée par sa valeur initiale, sa valeur finale et son pas de variation. Cette instruction se
présente donc sous la forme suivante :
Pour indice allant de v1 à vp faire
Action
Fin pour

Exemple
Ecrire un algorithme qui demande un nombre de départ, et qui ensuite affiche les dix nombres
suivants. Par exemple, si l'utilisateur entre le nombre 17, le programme affichera les nombres de
18 à 27.
Algorithme : nomb_suite
Variables N, i : Entier
Début
Ecrire ("Entrez un nombre : ");
Lire(N);
Ecrire ("Les 10 nombres suivants sont : ");
Pour i allant de N + 1 à N + 10
Ecrire(i) ;
i ←i+1 ;
Fin pour
Fin

32
Résumé

e°áâÅ°
Contrôle de Connaissances

Exercices d’application
On distingue deux types de structure de contrôle : Les structures alternatives et les structures
itératives.
Les structures alternatives sont utilisées lorsqu’il existe plusieurs possibilités parmi lesquels une et
une seule doit être choisie en fonction de la condition donnée.
La condition est une expression dont le type de retour est un booléen.
Les structures itératives sont utilisées dans les situations où une même action est effectuée plusieurs
fois.
Les structures itératives dépendent du fait que le nombre d’itération soit connu ou pas.
Une condition ou une action peut ne pas être exécutée.

VÉÇàܨÄx wx VÉÇÇt|áátÇvxá
1. Donner les deux familles de structures de contrôle.
2. Précisez dans quels cas les utiliser.
3. Donner les deux types de structures alternatives et leur syntaxe.
4. Donner les deux types de structures itératives et leur syntaxe.

XåxÜv|vxá wËtÑÑÄ|vtà|ÉÇ
Exercice 1 :
Ecrire un algorithme qui demande un nombre à l’utilisateur, et l’informe ensuite si ce nombre est positif ou
négatif (NB : on laisse de côté le cas où le nombre vaut zéro).

Exercice 2 :
Ecrire un algorithme qui demande un nombre à l’utilisateur, et l’informe ensuite si ce nombre est positif ou
négatif (on inclut cette fois le traitement du cas où le nombre vaut zéro).

Exercice 3 :
Ecrire un algorithme qui demande un nombre de départ, et qui calcule la somme des entiers jusqu’à ce
nombre. Par exemple, si l’on entre 5, le programme doit calculer :
1 + 2 + 3 + 4 + 5 = 15
NB : on souhaite afficher uniquement le résultat, pas la décomposition du calcul

33
MODULE1 : ALGORITHMIQUE ET PROGRAMMATION
STATIQUE
Chapitre1 : les notions élémentaires de
l’algorithmique

Leçon5 :
LES NOTIONS DE FONCTION ET DE PROCEDURE

 Donner les différents types de structures de contrôle.


Pré requis
 Donner la syntaxe de chacune de ces structures et être
capable de les utiliser.
 Identifier la structure de contrôle appropriée pour la
résolution d’un problème.

Objectifs généraux de la leçon

L’élève à la fin de cette leçon devrait être capable de :

 Donner la différence entre une procédure et une


fonction.
 Ecrire des sous-programmes tout en respectant la
syntaxe d’utilisation des différents types de sous-
Leçon5 : programmes.
LES NOTIONS DE FONCTION ET DE PROCEDURE

34
INTRODUCTION
INTRODUCTION

L’écriture de l’algorithme de résolution d’un problème donné peut s’avérer être une tache
extrêmement fastidieuse comme nous l’avons relevé dans la leçon 1 de notre chapitre, d’où la
nécessité de diviser le problème que doit résoudre l’algorithme en sous-problème tout en précisant
leur enchainement. Cette méthode s’appelle « diviser pour mieux régner », elle vise à faciliter et
améliorer la conception des programmes leur fiabilité et leur clarté, car l’écriture d’un algorithme
engendre en général la prise en compte d’une grande quantité de détails, plus cette quantité de
détail est grande et plus le risque d’erreurs et de confusion est important. Il serait judicieux de noter
qu’une communication peut- être établie entre deux sous-problème ou sous-programme, on dira
qu’un sous-programme en appelle un autre, d’où la syntaxe de la notation algorithmique vue dans la
leçon 2 concernant la partie des déclarations des fonctions et des procédures. C’est ainsi qu’un sous-
problème peut s’écrire sous-forme de fonction ou de procédure.

I. LES PROCEDURES

1.1 Définition

Une procédure est un ensemble d’ordre accomplissant une tâche particulière, mais peut ne pas
afficher ou afficher plusieurs résultats.
1.2 Utilisation d’une procédure
L’utilisation des procédures se comporte deux aspects :
• Déclaration de la procédure : c’est la définition de la procédure.
• Appel de la procédure : c’est l’utilisation de la procédure dans une autre.
La syntaxe de déclaration d’une procédure est la suivante :
Procédure : nom_procédure (paramètre1 : type,…, paramètre n : type)

Exemple de déclaration de procédure


Procédure : Somme_Nombre (val_1 : Entier, val_2 : Entier)

Remarque :
Un paramètre est une variable d’entrée de la procédure.
Pour une procédure ayant plusieurs paramètres, ceux-ci sont séparés par des virgules.

35
1.3 Structure générale d’une procédure

La structure d’une procédure est la même que celle d’un algorithme car en informatique le
terme une procédure désigne la matérialisation d’un algorithme

Procédure «identificateur» (parametre1 : «type», parametre2 : «type», …)


Partie Déclaration (PD)
Type /*déclaration des constantes, des types et des variables*/
CONST
VAR
Sous-programme /*déclaration des fonctions et des procédures*/
Partie Instructions (PI) /*corps de la procédure*/
Début
.
.
Fin

Exemple de procédure sans appel


Procédure : Somme_Nombre (val_1 : Entier, val_2 : Entier)

Variable : Som : Entier ;

Début
Ecrire (‘’entrez votre premier nombre’’) ;
Lire (val_1) ;
Ecrire (‘’entrez votre deuxième nombre’’) ;
Lire (val_2) ;
Som val_1 + val_2 ;
Ecrire (‘’la somme est :’’, Som) ;
Fin

Exemple de procédure appelant une autre procédure:


Écrire une procédure qui calcule la moyenne de deux nombres en appelant la procédure qui
calcule la somme de deux nombre.
Procédure : moyenne_nombre (nomb_1 : Entier, nomb_2:Entier)
Variable : moyenne : Réel ; /*déclaration des variables*/
Procédure : Somme_Nombre (val_1 : Entier, val_2 : Entier)/*sous-procédure */
Début
Ecrire (‘entrez votre premier nombre’) ;
Lire (nomb_1) ;
Ecrire (‘entrez votre deuxième nombre’) ;
Lire (nomb_2) ;
moyenne Somme_Nombre (nomb_1, nomb_2) /2 ;
Ecrire (’’la moyenne de ces deux nombres est :’’, moyenne) ;
Fin
Finprocedure

36
II. LES FONCTIONS

2.1 Définition

Une fonction est un ensemble d’ordre accomplissant une tâche particulière. Elle peut prendre des
arguments, et en général, elle renvoie un seul résultat.

2.2 L’utilisation des fonctions


Elle se comporte deux aspects :
• Déclaration de la fonction : c’est la définition de la procédure
• Appel de la fonction : c’est l’utilisation de la fonction dans une autre procédure ou fonction
La syntaxe de déclaration d’une procédure est la suivante :

Fonction : nom_fonction (paramètre1 : type,…, paramètre n : type) : Type_resultat

Exemple de déclaration de procédure


Fonction : Somme_Nombre (a : Entier, b : Entier) : Entier

Remarque :

Un paramètre est une variable d’entrée de la fonction.


Pour une fonction ayant plusieurs paramètres, ceux-ci sont séparés par des virgules.
Type_resultat est le type du résultat que va renvoyer la fonction (Réel,…)

2.3 Structure générale d’une fonction

La structure d’une fonction est la même que celle d’une procédure

Fonction «identificateur» (parametre1:«type», parametre2:«type»,...) : Type_resultat


Partie Déclaration (PD)
Type /*déclaration des constantes, des types et des variables*/
CONST
VAR
Sous-programme /*déclaration des fonctions et des procédures*/
Partie Instructions (PI) /*corps de la procédure*/
Début
.
.
.
Fin

37
Exemple de fonction sans appel
Fonction : Somme_Nombre (val_1 : Entier, val_2 : Entier) : Entier

Variable : Som : Entier ;

Début

Som val_1 + val_2 ;

Retourner Som ;

Fin

Exemple de procédure appelant une fonction:

Écrire une procédure qui calcule la moyenne de deux nombres en appelant une fonction qui calcule la
somme de deux nombres
Procédure : moyenne_nombre (nomb_1 : Entier, nomb_2:Entier)
Variable : moyenne : Réel ; /*déclaration des variables*/
Fonction : Somme_Nombre (val_1 : Entier, val_2 : Entier) : Entier/*sous-procédure */
Début
Ecrire (‘’entrez votre premier nombre’’) ;
Lire (nomb_1) ;
Ecrire (‘’entrez votre deuxième nombre’’) ;
Lire (nomb_2) ;
moyenne Somme_Nombre (nomb_1, nomb_2) /2 ;
Ecrire (‘la moyenne de ces deux nombres est :’, moyenne) ;
Fin
Finprocedure

NOTATION ALGORITHMIQUE GENERALE

L’entête Algorithme « identificateur »nom de l’algorithmique

Types
Liste des types
Constantes :
Les déclarations des types, constantes et variables Liste des constantes
Variables :
Liste des variables
Fonctions :

Liste des fonctions


Les déclarations des fonctions et procédures Procédures
Liste des procédures

38
Début

Instruction 1 ;
Instruction 2 ;
Le corps de l’algorithme .
.

Instruction n
Fin

résumé
e°áâÅ°
Contrôle de connaissances
Une procédure ou une fonction est la matérialisation d’un algorithme en informatique

La différence entre une procédure et une fonction est qu’une procédure affiche des
résultats ou pas et une fonction renvoie obligatoirement un résultat.

Les instructions ‘’retourner’’ et ‘‘afficher’’ sont différentes dans la mesure où la syntaxe


de la déclaration d’une fonction l’oblige à retourner un résultat, tandis que dans la
procédure elle se fait à la demande de celui qui l’écrit avec l’instruction ‘‘afficher’’

Une fonction peut également appeler une autre fonction

VÉÇàܨÄx wx VÉÇÇt|áátÇvxá
1. Qu’est-ce qu’une procédure ?
2. Qu’est-ce qu’une fonction ?
3. Quelle est différence entre la fonction et procédure ?
4. Donner la syntaxe de déclaration d’une fonction, puis celle d’une procédure
5. Qu’entend t- on par appel de fonction ou de procédure ?
Exercices d’application
6. Donner un exemple dans chaque cas.

39
XåxÜv|vxá wËtÑÑÄ|vtà|ÉÇ
Exercice 1:

On désire additionner deux nombres a et b. pour cela on utilisera la fonction.


1) Quels seront les paramètres de cette fonction et leurs types?
On suppose que cette s’appelle additionner.
2) Donner la syntaxe complète de la déclaration de cette fonction.
3) Donner l’instruction qui permet de faire la somme de deux nombres.
4) Ecrire cette fonction. On utilisera l’opération primitive retourner valeur pour retourner la somme
de la fonction.
5) Ecrire une petite procedure dans lequel on appellera la fonction additionner qui fait l’addition de
5 et 6.

Exercice 2 :
Écrivez une fonction qui renvoie la somme de cinq nombres fournis en argument.

Exercice 3 :
Écrivez une procédure qui renvoie la somme de cinq nombres fournis en argument.

Exercice 4 :
Écrivez une fonction qui renvoie le nombre de voyelles contenues dans une chaîne de caractères
passée en argument. Au passage, notez qu'une fonction a tout à fait le droit d'appeler une autre
fonction.

40
MODULE1 : ALGORITHMIQUE ET PROGRAMMATION
STATIQUE
Chapitre1 : les notions élémentaires de
l’algorithmique

Leçon6 :
LES TABLEAUX

 Notions sur les variables


Pré requis  Notions sur les algorithmes
 notions sur les procédures et les fonctions

Objectifs généraux de la leçon


L’élève à la fin de cette leçon devrait être capable de :

 Définir la notion de tableau


 Donner les caractéristiques d’un tableau
 Donner l’intérêt de l’utilisation d’un tableau

Leçon 6 : LES TABLEAUX

41
INTRODUCTION
INTRODUCTION

Si nous voulons écrire un algorithme qui calcule le nombre de notes en informatique


supérieur ou inférieur à la moyenne des notes de la classe, il faudrait que la variable pourtant la
moyenne soit comparée à chacune des notes de la classe , car s’il ne s’agissait que de calculer la
moyenne des nombres, on utiliserait un algorithme similaire à celui vu dans la leçon 4, or nous avons
vu dans la leçon précédente que le contenu d’une variable était écrasée lorsqu’on y mettait un autre
et qu’une variable ne pouvait stocker qu’une et une seule valeur, ce qui implicitement nous
amènerait à créer autant de variable que de notes afin de comparer chacune à la moyenne.

Pour résoudre ce problème qui est celui de trouver une variable pouvant contenir toutes les
notes à la fois de manière permanente, afin de pouvoir comparer chacune des notes et enfin
calculer le nombre de notes supérieur ou inférieur à la moyenne des notes, nous ferons appel à une
structure de donnée appelée tableau .

I. NOTIONS DE BASE SUR LES TABLEAUX

1.1 Définition

Dans la terminologie informatique, un tableau est un ensemble fini et indexé d’objets de même
nature. En d’autres termes, un tableau est un ensemble d’éléments de même type désigné par un
identificateur unique et dans lequel chaque élément est repéré par une valeur entière nommée
Index indiquant sa position au sein de l’ensemble.

1.2 Caractéristiques d’un tableau

Objets indexés Ensemble fini Objets de même nature

On accède directement à On ne peut ni ajouter, ni Tous les objets d’un tableau sont de
chaque objet d’un tableau à enlever un index dans un même nature.
partir de son index tableau.

42
Exemple : cas de tableau

Objets indexés Ensemble fini Objets de même nature

Ensemble de chambres d’un Nombre de chambres


Numéro de chambre Chambre
hôtel de l’hôtel

Ensemble des salles de Nombre de salles de


Numéro de salle Salle de cours
cours d’un établissement cours

Ensemble des élèves d’une


Numéro d’ordre Effectif de la classe Elève
classe

Ensemble de malades en
Position dans le rang NON Malade
attente de consultation

1.3 Déclaration d’un tableau

Déclarer un tableau revient à donner :


• Le nom du tableau ;
• Le type de ses éléments ;
• Le nombre de ses éléments;
D’où la syntaxe :
Variable « identificateur» : tableau [IndiceMin, IndiceMax] de« type des éléments »

Exemple 1 Créer un tableau nommé T pouvant contenir des entiers de premier indice 1 et
de dernier indice 80
Types
Tab = Tableau [1..80] de Entier
Variable
T:Tab
Ou encore
Types
Entier
Variable
T: Tableau [1..80] de Entier

43
Exemple 2
Définir une structure de donnée permettant de représenter la situation suivante:
Le tour éliminatoire de la phase finale de coupe du monde comprend 32 équipes (de 23 joueurs
chacune). Les éliminatoires se font en poules de 4 équipes chacune.
Solution:
Types
Tour_éliminatoire = Tableau [1..8] de Poule,
Poule = Tableau [1..4] de Equipe,
Equipe = Tableau [1..23] de Joueur,
Joueur = …
Variables
T:Tour_éliminatoire
P : Poule
E : Equipe

1.4 Quelques opérations sur les tableaux

 Création
Variable T = Tableau [d..f] de Elément ;
Cette instruction permet de créer un tableau dont représente l’indice de début et f l’indice
de fin
 Affectation
T[i]  e ;
Cette instruction permet d’affecter un élément dans une position du tableau, où i est l’indice
de l’emplacement T[i] du tableau dans laquelle on veut mettre l’élément e
 Lecture
Lire T[i] ;
Cette instruction permet de consulter la valeur d’une position d’un tableau

1.5 Propriétés invariantes sur les tableaux

• la valeur d’une position dans laquelle on n’a rien affecté n’est pas définie.
• un tableau n’est défini qu’à l’intérieur de ses bornes.
• si T est un tableau dans lequel on a affecté e à l’indice i, alors la valeur de T à l’indice i est e.
• l’affectation d’une valeur à une position du tableau ne change pas les autres positions du
tableau.
• l’indice de début d’un tableau est inférieur ou égale à l’indice de fin du tableau.

44
Exemple : identifions les fautes
Types
Entier
Variables
U:Tableau [5..1] de Entier, /* le premier indice doit être inférieur ou égal au dernier indice */
T:Tableau [1..10] de Entier,V:Tableau [1..10] de Entier,W: Tableau [1..5] de Niveau, /* le type des éléments du
tableau n’est pas défini */
x:Entier,i:Entier
Début
xT[1] ; /* T[1] n’est pas défini */
i  0;
Tant quei ≤ 10 faire
i  i+1; /* T[11] n’est pas défini */
lire_clavier(T[i])/* la donnée tapée sur le clavier n’est pas forcément un entier */
Fin tant que
V  T/* n’est pas une opération permise pour les tableaux */
Fin

II. QUELQUES ALGORITHMES SUR LES TABLEAUX

2.1 Règles utiles

• Avant d’écrire un algorithme, prendre soin de définir les types d’objets à utiliser par
l’algorithme.
• Tout algorithme se formalise sous la forme d’une procédure. Lorsqu’on veut manipuler
directement le résultat de l’algorithme comme un objet, on transforme la procédure en
fonction.
• Toujours prendre soin de vérifier que les expressions écrites sont syntaxiquement et
sémantiquement correctes
• Il n’y a que deux opérations simple qu’on peut faire avec un tableau: l’affectation d’une
valeur à une position du tableau et la consultation de la valeur d’une position du tableau.
• Pour simplifier l’écriture des algorithmes, prendre les entiers comme index des tableaux.
• Respecter les propriétés des tableaux.
• On parcourt toujours un tableau pour faire quelque chose avec les éléments du tableau.

45
2.2 Algorithmes de parcours sur les tableaux
Parcours ascendant parcours descendant

Procédure parcours_ascendant(T:Tab, …) Procédure parcours_descendant(T:Tab, …)


… …
Variables Variables
i:Entier i:Entier
… …
Début procédure Début procédure
… …
pour i =1 à N faire i  N;
… tantque i ≥ 1 faire
traiter(T[i]); …
… traiter (T[i]);
fin pour ii – 1;
….. …
Fin procédure fin tant que
…..
Fin procédure

Exemple 1 : calculer la somme des éléments d’un tableau de nombres

Constante
N : Entier
Types
Tab = Tableau [1..N] de Nombre,
Nombre
Fonctionsomme_tableau(T:Tab): Nombre /* T:Tab « déclaration du tableau »*/
Variables
i:Entier ;
Som: Nombre ;
Début fonction
Som 0;
Pour i =1 à N faire
SomSom + T[i] ; /* traiter(T[i] */
Fin pour
Retourner Som ;
fin fonction

46
Exemple 2 : lire les éléments d’un tableau au clavier et les réécrire
dans l’ordre inverse

Constante
N : Entier
Types
Tab = Tableau [1..N] de Nombre,
Nombre
Procédurelire_tableau …..
Procédure inverse (variable T:Tab)
Variables
i:Entier,
Début procédure
lire_tableau(T);
écrire_écran(‘’voici la suite dans l’ordre inverse :’’)
pour i =N à 1 faire écrire_écran(T[i] fin pour
Fin procédure

Résumé

e°áâÅ°
Un tableau nous permet de contenir plusieurs données sans qu’elles soient écrasée les unes par
les autres
Un tableau est un ensemble fini et indexé d’objets de même nature
Un tableau n’est pas défini à l’extérieur de ses bornes, c’est-à-dire qu’il faut toujours s’assurer
qu’on reste à l’intérieur du tableau
contrôler les conditions d’entrée et de sortie des boucles de parcours.
Toujours définir le type d’éléments contenu dans un tableau
On ne peut affecter un tableau dans un autre tableau
On peut parcourir un tableau de manière ascendante ou descendante
Dans un tableau, les index des cases sont numérotés à partir de 1.

Il n’y a que deux opérations simple qu’on peut faire avec un tableau: l’affectation d’une valeur à
une position du tableau et la consultation de la valeur d’une position du tableau.

47
Contrôle de connaissances

VÉÇàܨÄx wx VÉÇÇt|áátÇvxá
Exercice d’application

1. Qu’est-ce qu’un tableau ?


2. Donner la syntaxe de déclaration d’un tableau.
3. Quel est l’intérêt de l’utilisation des tableaux ?
4. A quoi sert la déclaration de type dans un tableau ?
5. Donner les propriétés d’un tableau.
6. Citer quelques règles utiles d’utilisations des tableaux en algorithmique.

XåxÜv|vxá wËtÑÑÄ|vtà|ÉÇ
Exercice 1:
Ecrire un algorithme qui déclare et remplisse un tableau contenant les six voyelles del’alphabet latin.

Exercice 2:
Ecrire un algorithme qui déclare un tableau de 9 notes, dont on fait ensuite saisir les valeurs
parl’utilisateur.

Exercice 3 :
Ecrivez un algorithme calculant la somme des valeurs d’un tableau (on suppose que le tableau a été
préalablement saisi).

Exercice 4 :
Ecrivez un algorithme constituant un tableau, à partir de deux tableaux de même longueur
préalablement saisis. Le nouveau tableau sera la somme des éléments des deux tableaux de départ.
Tableau 1 :
4 8 7 9 1 5 4 6

Tableau 2 :
7 6 5 2 1 3 7 4

Tableau à constituer :
11 14 12 11 2 8 11 10

48
V{tÑ|àÜx E
Chapitre II : PROGRAMMATION DE PAGES WEB STATIQUES HTML

PROGRAMMATION DE PAGES WEB


STATIQUES HTML

_x†ÉÇ D : Notion de page web statique


_x†ÉÇ 2: La notion de balises HTML
_x†ÉÇ 3: Architecture des documents HTML
_x†ÉÇ 4: Les tableaux
_x†ÉÇ 5: Les formulaires
_x†ÉÇ 6: Les liens hypertextes, les images et les sons

49
MODULE1 : ALGORITHMIQUE ET PROGRAMMATION
Chapitre 2 : programmation de pages web
STATIQUE
statiques html

Leçon1 :
LA NOTION DE PAGE WEB STATIQUE

Pré requis  Notion d’internet.

Objectifs généraux de la leçon

L’élève à la fin de cette leçon devrait être capable de :


 Définir page web
 Citer les éléments de base pour la création d’une
page web

Leçon1 : LA NOTION DE PAGE WEB STATIQUE

50
INTRODUCTION
INTRODUCTION

L’image ci-dessous représente une des pages du site du ministère de la fonction publique du
Cameroun .on y retrouve sur cette page du texte, des images…
La présente leçon a pour objectif de présenter les éléments qui permettent de créer ces
types de fichiers.

I. LA NOTION DE PAGE WEB STATIQUE

Une page web (page sur la toile) est un document conçu pour être consulté à l'aide d'un
navigateur web. Le site web (de l'anglais web site) ou World wide Web (www) est un ensemble
cohérent de pages web liées entre elles par des liens hypertextes et organisées autour d’une page
centrale appelée page d’accueil.
Une page web est dite statique si elle est constituée d'un fichier texte contenant du code
HTML et éventuellement des images et des liens vers d'autres documents. De ce fait, un site
constitué de pages web statiques sera ainsi qualifié de site web statique.
Le HTML (pour HyperText Markup Language) est un langage informatique qui permet de
décrire le contenu d'un document (titres, paragraphes, disposition des images, etc.) et d'y inclure
des hyperliens.
Il s’agit d’un langage dit de « marquage » (de « structuration » ou de « balisage ») dont le
rôle est de formaliser l'écriture d'un document avec des balises de formatage. Les balises
permettent d'indiquer la façon dont doit être présenté le document et les liens qu'il établit avec
d'autres documents.

Un éditeur HTML (ou éditeur Web) est un logiciel conçu pour faciliter l'écriture de
documents HTML et de pages Web en général.
De ce fait, il importe d’avoir une idée sur les éléments de base qui interviennent dans la
création d’une page web.
51
II. LES ÉLÉMENTS DE BASE POUR LA CRÉATION D’UNE PAGE WEB

Pour créer une page web, nous avons besoin de :

• Un éditeur de texte ou éditeur Web comme défini ci-dessus est un logiciel conçu pour l’écriture
des documents HTML et des pages Web en général.
Le contenu qui sera affiché dans la page web doit être saisit dans un éditeur de texte.

Exemple : quelques éditeurs de texte

Pour créer un fichier html ou page web, il faut lors du tout premier enregistrement, ajouter
au nom du fichier l’extension « .html ». Cette extension indique que vous créez un fichier qui sera lu
par un navigateur Web.

Exemple : Aperçu d’un fichier html ou page web

. Ce fichier a pour nom le relief du cameroun.html

• Un navigateur web qui est l’élément clé pour la navigation au sein des pages web. Sa fonction de
base est de permettre la consultation des documents HTML disponibles sur les serveurs HTTP
(HyperText Transfer Protocol).

Exemple : quelques navigateurs web

Internet Explorer Mozilla Firefox


En plus d’internet et Mozilla nous avons Netscape et Safari qui sont également des
navigateurs web.

52
e°áâÅ° Résumé
Contrôle
Une page web est un document de Connaissances
conçu pour être consulté à l’aide d’un navigateur web. Le site web
est constitué de plusieurs pages web liées entre elles par des liens hypertextes et organisées
autour d’une page d’accueil.
Une page web est dite statique si elle est constituée d'un fichier texte contenant du code HTML et
éventuellement des images et des liens vers d'autres documents.
Le langage HTML permet de décrire le contenu d'un document (titres, paragraphes, disposition des
images, etc.) et d'y inclure des hyperliens.
Pour créer une page web, il faut d’abord saisir dans un éditeur de texte le code HTML qui va décrire
le contenu de la page, par la suite enregistrer le fichier sous l’extension ".html". pour visualiser la
page ainsi créée, il suffit juste de l’ouvrir.

VÉÇàܨÄx wx VÉÇÇt|áátÇvxá
1. Définir : page web, site web, page web statique, site web statique.
2. Que signifie HTML ? HTTP ? WWW ?
3. Parmi les éléments ci-dessous quels sont ceux qui permettent de créer une page web :
a- Éditeur d’image
b- Éditeur de texte
c- Un tableur
d- Navigateur web
e- Site web
4. Donne le rôle de chacun des éléments cités à la question n°3 et proposes à chaque fois des
exemples.

53
MODULE1 : ALGORITHMIQUE ET PROGRAMMATION
STATIQUE
Chapitre 2 : programmation de pages web
statiques html

Leçon2 :
LA NOTION DE BALISES HTML
 Démarrer un éditeur de texte
Pré requis
 Saisir et enregistrer le contenu d’un document
 Ouvrir un document créé

Objectifs généraux de la leçon

L’élève à la fin de cette leçon devrait être capable de :

 Définir la notion de balise, d’attribut


 Utiliser une balise.
 Insérer les attributs des balises.
Leçon2 : LA NOTION DE BALISES HTML

54
INTRODUCTION
INTRODUCTION

Avant d’aborder cette leçon, il importe de savoir que Le langage HTML permet de décrire le
contenu d'un document html. Il utilise des éléments particuliers à savoir des balises qui rendent
possible non la mise en forme des documents HTML mais également l’insertion des images, la
création des liens pour atteindre d’autres pages web.
La présente leçon a pour objectif de sera centré sur les balises et leur utilisation.

I. DÉFINITION DE LA NOTION DE BALISE ET D’ATTRIBUTS

A- LA BALISE.
Une balise est un élément de texte (un nom) encadrée par le caractère inférieur (<) et le caractère
supérieur (>). On les appelle encore marqueur ou Tag.

Exemple : Quelques balises…


<B>cette balise met un caractère ou une chaine de caractère en gras
<P>cette balise permet d’aller à la ligne pour créer un nouveau paragraphe
<U> cette balise permet de souligner

Remarque :

Les balises saisies en lettres majuscules ou minuscules produisent le même resultat. On


dit que les balises ne sont pas sensibles à la casse.
Les balises HTML fonctionnent par paire afin d'agir sur les éléments qu’elle encadrent.on
les appelle également conteneurs. La première est appelée « balise d'ouverture »
(parfois balise ouvrante) et la seconde « balise de fermeture » (ou fermante). La balise
fermante est précédé par un slash(/).

Exemple : les balises doubles ou conteneurs

<b> bonjour </b> produit le résultat suivant : bonjour


<b> étant la balise d'ouverture et </b>est celle de fermeture

55
Toutefois certaines balises HTML ne fonctionnent pas en paire et s’appliquent sans la balise
fermante.

Exemple : les balises simples

La balise <br> qui permet d’imposer un retour à la ligne.


La balise <img>qui permet d’insérer une image dans la page web.

Plusieurs balises HTML peuvent être appliquées sur un élément. De ce fait, elles doivent être
imbriquées de manière hiérarchique afin de permettre le cumul de leurs propriétés. Le
chevauchement des balises n’est pas autorisé.
Le principe d’imbrication des balises est le suivant :
Si nous appliquons plusieurs balises à un texte par exemple, la 1ère balise ouverte est la
dernière à être fermée, la seconde balise ouverte est l'avant dernière à être fermée, la dernière
balise ouverte est la première balise à être fermée.

Exemple : imbrication des balises

<i><u><b>Bonjour </b></u></i>ce code html produit le resultat suivant: Bonjour

Par contre le code ci-dessous :


<i><u><b>Bonjour </i></b></u>n’apporte aucune modification car les balises ont été mal
imbriquées.

B- LES ATTRIBUTS D’UNE BALISE


Un attribut est un élément, présent au sein de la balise ouvrante, permettant de définir des
propriétés supplémentaires.
Les attributs sont saisis à l’intérieur de la balise d’ouverture. On peut insérer autant d’attributs dans
une balise, on dit qu’elle est extensible.
De manière générale, la syntaxe pour insérer un attribut dans une balise à appliquer sur un texte est
donnée par :
<Nom_de_la balise Nom_attribut =" valeur_attribut">texte selectionné </Nom_de _la balise>

Exemple : Insertion d’un attribut au sein d’une balise


<fontcolor= "blue"> bonjour </font> ce code HTML produit le resultat suivant : bonjour

56
II. LES TYPES DE BALISES ET LEUR UTILISATION :

Le langage HTML repose essentiellement sur les balises. Pour visualiser l’effet d’une balise
dans une page web, il est nécessaire de la saisir correctement.
Il existe une très grande variété de balises HTML. Intéressons-nous à quelques-unes.

• CRÉATION D’UN NOUVEAU PARAGRAPHE :


Les balises <P>et </P>permettent d’aller à chaque fois à la ligne afin de créer un nouveau
paragraphe.
On peut aussi centrer le paragraphe au milieu, à droite, ou à gauche grâce à l'attribut ALIGN.

Exemple : création de paragraphes alignés.


<p align="left">bienvenue à Garoua.</p> ce code html crée un paragraphe aligné à gauche
<p align="center">bienvenue à Bertoua.</p>ce code html crée un paragraphe centré.
<p align="right">bienvenue à Sangmélima.</p>ce code html crée un paragraphe aligné à droite.
Les codes ci-dessus saisis dans un éditeur de texte donnent comme résultat dans un navigateur :

• FAIRE UNE LIGNE SÉPARATRICE

La balise <HR>permet de créer une ligne séparatrice dans une page.il s’agit d’une balise simple. Les
attributs suivants peuvent s’appliquer au sein de cette balise :
 NOSHADE : pour afficher une ligne remplie.
 SIZE : précise la taille voulue. Il prend des valeurs numériques et s’exprime en
pourcentage(%) ou en pixel (px).
57
 WIDTH : spécifie la largeur voulue. Il prend des valeurs numériques et s’exprime en
pourcentage(%) ou en pixel (px).
 COLOR : précise la couleur choisie. Pour appliquer une couleur on peut simplement la
nommer ( blue, green,red, pink….) ou alors donner son code hexadécimal ( FF0000 pour al
couleur rouge, FFFF00 pour le jaune...).
 L’attribut ALIGN s’applique également à cette balise pour définir l’alignement du trait.
• SAUT DE LIGNE :
 La balise <BR>permet de créer un saut de ligne. Il s’agit aussi d’une balise simple.

Exemple : création des sauts de ligne

Demain
Demain<br> il<br> fera <br> beau <br>temps
il
fera
beau
temps
Codes saisies dans un éditeur de texte Sous un navigateur web

• LE DÉCALAGE D’UN TEXTE

<BLOCKQUOTE>permet de décaler un texte. Elle s’applique à tout le texte quand on ne ferme pas le
code avec </BLOCKQUOTE>.

• LA CRÉATION DES LISTES :

Les balises offrent la possibilité de créer plusieurs types de listes :

 Les Listes de définition (cas du dictionnaire) à l’aide des balises suivantes:

DL (description List) pour annoncer la création d’une liste descriptive


DT (description terme) pour préciser le mot qu’on souhaite décrire
DD (description data) pour donner la description du mot choisi

Exemple : création d’une liste descriptive.

<DL>
<DT>fr<DD>français
<DT>ang<DD> anglais
</DL>

Codes saisies dans un éditeur Sous un navigateur web

58
 Une liste numérotée à l’aide des balises suivantes :

OL (Ordonnate List) pour annoncer la création d’une liste ordonnée


LI(Line Item) permet de créer dans la liste une ligne.

Exemple : création d’une liste numerotée ou ordonnée.

<OL >
<LI>français</LI>
<LI>anglais </LI>
<LI>maths</LI>
</OL>

Codes saisies dans un éditeur Sous un navigateur web

Le caractère de numérotation peut être changé grâce l’attribut type qui prend comme valeur des
chiffres, des lettres…
L’attribut Start quant à lui permet d’indiquer à partir d’où on débute la numérotation.

Exemple : Prise en compte des attributs pour personnaliser la liste.

<OL type= 1 start=4>


<LI>français</LI>
<LI>anglais </LI>
<LI>maths</LI>
</OL>

Codes saisies dans un éditeur Sous un navigateur web

 Une liste non numérotée à l’aide des balises suivantes :


UL (Unordonnate List) pour annoncer la création d’une liste ordonnée
LI (Line Item) permet de créer dans la liste une ligne.

59
Exemple : création d’une liste non numérotée ou à puces.

<UL>
<LI > français </LI>
<LI > anglais</LI>
<LI > maths </LI>
</UL>

Codes saisies dans un éditeur Sous un navigateur web

Le caractère de numérotation peut être changé grâce l’attribut type qui permet comme puce des
carrés (square), des cercles (circle) ou alors des disques (disc).

Exemple : modification des puces.

<UL>
<LI type= disc > français </LI>
<LI type=circle> anglais </LI>
<LI type= square > maths </LI>
</UL>

Codes saisies dans un éditeur Sous un navigateur web

Remarque :
Si un attribut est inséré dans la balise d’ouverture (OL ou UL), elle s’applique
à toutes les lignes de la balise.

• LE CENTRAGE D’UN TEXTE OU UNE IMAGE

Pour centrer un texte ou une image, il suffit de placer l’élément entre les deux balises <CENTER> et
</CENTER>.

• LES POLICES
 Les balises <PRE> et </PRE>permettent d’écrire en pré formaté c'est à dire que si on saute
une ligne dans l’éditeur de texte, la ligne est sautée aussi dans le navigateur Web.
 Les balises <B> et </B>permettent d’écrire un texte en gras.

60
 Les balises <I> et </I>permettent d’écrire un texte en italique.
 Les balises <TI> et </TI>permettent d’écrire en courrier.
 Les balises <SMALL> et </SMALL>permettent d’écrire un texte avec une police plus petite.
 Les balises <BIG> et </BIG>permettent d’écrire un texte avec une police plus grande.
 Les balises <SUP> et </SUP>permettent d’écrire en exposant
 Les balises <SUB> et </SUB>permettent d’écrire en indice.
 Les balises <Q> et </Q>encadrent le texte par des guillemets.
 Les balises <U> et </U>permettent de souligner le texte.
 Les balises <S> et </S>permettent de barrer le texte.
 Les balises <H1>, <H2>…<H6>permettent de définir le niveau de titre à appliquer à un texte.
H1 est le niveau de titre le plus grand et H6 étant le plus petit niveau.

La balise <font>permet de :

 Changer la police à travers l’attribut face.


 Changer la taille à travers l’attribut size.
 Changer la couleur à travers l’attribut color.

Exemple : Modification de la police d’un texte

<FONT FACE="Arial" COLOR="BLUE"


SIZE="20"> Bonjour </FONT>

Codes saisies dans un éditeur Sous un navigateur web

• LES PROPRIÉTÉS DE LA BALISE <BODY>

Il est possible de personnaliser le corps d’un document html en utilisant certains attributs
notamment :

 background afin de changer l'image de font.


 bgcolor afin de changer la couleur de fond.
 text afin de changer la couleur de tout le texte.

61
Exemple : Modification de la police d’un texte

<BODY BGCOLOR="YELLOW" TEXT="RED" >

BONJOUR

</BODY>

Codes saisies dans un éditeur Sous un navigateur web

Insertion des images :


La baliseIMG permet d’insérer une image dans une page web. Sa syntaxe est la suivante :
<IMG SRC=" adresse_complète_image\nom_image.extension_image">
L’attribut SRC est obligatoire et permet d’indiquer l’adresse de l’image à insérer.

Remarque :
Si l’image à insérer est située dans le même répertoire que la page web, l’adresse de l’image
sera composée du nom de l’image suivi de son extension (.jpg ; .bmp ; .gif)
Si l’image à insérer est située dans un répertoire différent, l’adresse de l’image sera le chemin
d’accès qui permet d’atteindre l’image.
Si le nom d’une image n’est pas correctement saisi, elle n’apparaîtra pas dans la page web.

Exemple : Insertion d’image (Nénuphars.jpg) dans une page web (essai.html)


• Si les deux fichiers sont dans le même répertoire par exemple le bureau
On saisit dans le fichier essai.html la balise : <IMG SRC=" Nénuphars.jpg">

• Si les deux fichiers sont dans des répertoires différents (Nénuphars.jpg est dans le répertoire D:\Mes
documents alors on saisit dans le fichier essai.html la balise suivante :<IMG SRC=" D : Mes
Documents\Nénuphars.jpg">

Les attributs suivants peuvent aussi s’appliquer à la balise IMG :


ALT: Permet d'afficher un texte alternatif lorsque l'image ne s'affiche pas.
TITLE: Permet d'afficher une info bulle lors du survol de l'image par le curseur.
WIDTH: Permet de définir la largeur de l'image.
HEIGHT: Permet de spécifier la hauteur de l'image.
ALIGN : définit la position de l'image par rapport au texte. Ses différentes valeurs étant :

62
• left (à gauche), right (à droite) indique la position d’une image dans la page ;
• top (au dessus), middle (au milieu), bottom(en bas) indique la position du texte par
rapport à l’image.
Les attributs Width et Height prennent des valeurs numériques et s’expriment en pourcentage(%) ou
en pixels (px).En prenant en compte les attributs ci-dessus, nous pouvons avoir la syntaxe ci-
dessous :
<img SRC="adresse_image+nom_image" align="valeur" Width= valeur Height=valeur
title=nom_image>

Exemple : Insertion d’image (Nénuphars.jpg) dans une page web (essai.html)

<imgsrc="C:\Documents and Settings\All Users\Documents\Mes images\Échantillons


d'images\Nénuphars.jpg" align="right" width=40% heigth=50% title=nénuphar>

Codes saisies dans un éditeur

Sous un navigateur web

Insertion des liens :

Les liens permettent de naviguer entre les différentes pages d’un site web. La balise <A
>encore appelée ancre permet d’insérer des liens dans une page.
L’attribut HREF est obligatoire et permet d’indiquer l’adresse de la page à atteindre.
La syntaxe pour insérer un lien est presque similaire à celle qui permet d’insérer une image
dans une page web :
<A HREF="adresse_complète_page\nom_page.extension”>mot_cliquable</A>

63
Exemple : Insertion de liens

Considérons deux fichiers accueil .html et activité.html ;


Pour créer un lien permettant d’atteindre la page activité.html , nous allons inserer dans le code html de la
page accueil.html le code html suivant :
<A HREF="activité.html”>consulter</A>

Si les fichiers sont dans des repertoires différents, alors on donne l’adresse complète comme l’exemple
portant sur l’insertion d’image.

Résumé
e°áâÅ°
Une balise est un élément de texte (un nom) encadrée par le caractère inférieur (<) et le
caractère supérieur (>). La plupart des balises HTML fonctionnent par paire afin d'agir sur les
éléments qu'elles encadrent. La première est appelée « balise d'ouverture » et la seconde
« balise de fermeture ».

Les balises ne sont pas sensibles à la casse et peuvent être imbriquées de manière hiérarchique
afin de permettre le cumul de leur propriété.

Un attribut est un élément, présent au sein de la balise ouvrante, permettant de définir des
propriétés supplémentaires. On peut insérer autant d’attributs dans une balise, on dit qu’elle
est extensible.Pour insérer un attribut dans une balise à appliquer sur un texte, la syntaxe est
donnée par :

<Nom_de_la balise Nom_attribut ="valeur_attribut">texte selectionnée</Nom_de _la


balise>.
Les balises offrent la possibilité de réaliser la mise en forme du contenu d’une page, d’insérer
des images, des liens hypertextes.

64
VÉÇàܨÄx wx VÉÇÇt|áátÇvxá
Contrôle de Connaissances

Travail en groupe

1. Définir balise, attribut


2. Quelle est la syntaxe qui permet d’appliquer un attribut ?
3. Quelle différence y a-t-il entre une balise simple et une balise double ?
4. Donner la syntaxe qui permet de :
a- Créer une liste numérotée ; liste non numérotée ; liste descriptive.
b- Insérer une image ; un lien.

gÜtät|Ä xÇ zÜÉâÑx
Afin de primer les meilleurs élèves de votre classe, votre professeur vous
demande lui établir la liste des 10 premiers élèves de la classe.

En vous basant sur votre leçon les balises, établissez une liste dont la position
occupée par chaque élève correspondra à son rang.

65
MODULE1 : ALGORITHMIQUE ET PROGRAMMATION
STATIQUE
Chapitre 2 : programmation de pages web
statiques html

Leçon3 :
LA STRUCTURE DES DOCUMENTS HTML

Pré requis  La notion des balises html

Objectifs généraux de la leçon

L’élève à la fin de cette leçon devrait être capable de :


 Ecrire la structure d’un document Html
 Tester le fichier html correspondant

Leçon3 : LA STRUCTURE DES DOCUMENTS HTML

66
INTRODUCTION
INTRODUCTION

Le document HTML est la principale ressource d'une page Web. Il s’agit d’un fichier structuré
au sein duquel les balises permettant d’afficher du texte, des images sont insérer. De ce fait, il
apparait nécessaire de connaitre les balises qui permettent de créer ce type de document mais aussi
d’en produire aussi !

I. STRUCTURE D’UN DOCUMENT HTML

Un document HTML commence par la balise <HTML>et finit par la balise </HTML>. Il contient
un en-tête qui décrit le titre de la page puis un corps dans lequel se trouve le contenu de la page.
L’en-tête est délimité par les balises <HEAD> et</HEAD>,
Le titre de la page quant à lui est délimité par les balises <TITLE> et </TITLE>,
Le corps de la page quant à lui est délimité par les balises <BODY> et </BODY>
C’est à l’intérieur des <HTML> et </HTML> que sont saisies l’ensemble des balises qui entre dans la
structure d’un document HTML.
a- Les balises de la structure minimale d’un document html
La structure minimale d’un document HTML regroupe un nombre minimal de balises
indispensables à l’obtention d’une page web. Il s’agit notamment des balises suivantes :

<HTML> Montre au navigateur que le langage qu'il va lire est le html.


<HEAD> C'est l'entête de la page où l'on met le titre.
<TITLE> On met le titre de la page. Le titre apparaîtra dans la barre de votre navigateur.
</TITLE>On ferme le titre. Ce qui sera écrit par la suite ne fera donc plus parti du titre.
</HEAD> On ferme l'entête.
<BODY> C'est le corps de la page donc quasiment tout. C'est ici que l'on est écrit ce qui apparaît
à l'écran donc ce que vous lisez.
</BODY> On ferme le corps
</HTML> On ferme la page. C'est fini.

b- La production de la structure minimale d’un document html

Pour obtenir la structure minimale de notre document HTML, il suffit de saisir dans un
éditeur de texte de votre choix les balises ci-dessus de la sorte :

67
1
<html>
2
3
<head>
<title>titre de la page </title> 4
</head>
5
<body>
6

Contenu de la page
</body>
</html>

1- balise d’ouverture du document html


2- balise d’ouverture d’en-tête de page
3- balise d’ouverture du titre de la page
4- balise de fermeture du titre de la page
5- balise de fermeture du titre de la page
6- balise d’ouverture du contenu de la page
7- balise de fermeture du contenu de la page
8- balise de fermeture du document html

II. EXERCICE D’APPLICATION : MA PREMIÈRE PAGE WEB

A partir de la structure minimale ci-dessus, nous allons créer une page web dont le titre est :
Le relief du Cameroun et dont le contenu de la page est :
Le relief du Cameroun est subdivisé en quatre grands ensembles : les basses terres du Nord, la
dorsale camerounaise, le plateau Sud camerounais et les plaines côtières.
La première étape est de lancer un éditeur de texte au choix. Dans notre cas, nous allons travailler
dans Notepad ou bloc-notes.
a- Après avoir démarré bloc-notes, saisissons le code minimal du html telle qu’illustré de la sorte
ci-dessous. Le titre de notre page web le relief du Cameroun est saisi entre les balises de titre.

68
b- Par la suite, saisissons le contenu de notre page en prenant bien sûr le soin de commencer par
la balise d’ouverture <BODY>.
Après avoir saisi le contenu de notre page, nous allons saisir la balise fermante du corps </BODY>puis
saisir la balise fermante </HTML>.
Tel qu’illustré ci-dessous :

c- Après la saisie, Enregistrons notre fichier texte au bureau sous le nom Le relief du
cameroun.html. notre page web apparait est créé à l’emplacement que nous avons choisi lors de
l’enregistrement tels que le montre le schéma ci-dessous :

69
Pour visualiser notre page web, il suffit juste d’ouvrir la page web que nous venons de créer. Dans
notre cas, en double cliquant sur le relief du Cameroun, nous aurons l’aperçu :

Bien évidemment notre pouvons appliquer des balises de mise an forme vues à la leçon 2
afin modifier la police de notre texte, la taille de la police, insérer des images, modifier la couleur de
l’arrière et rendre ainsi notre page plus conviviale.

Résumé
e°áâÅ°
Contrôle de connaissances
Un document HTML a un entête dans lequel apparaît le titre de la page et un corps dans lequel
est saisi le contenu du document.La structure minimale d’un document HTML est donnée par :
<html>
<head><title>titre de la page</title></head>

<body> contenu de la page </body>


</html>

Pour tester la page web correspondant à notre document html, devons l’enregistrer dans un
emplacement donné et lui donner un nom qui doit toujours comporter l’extension .html .

VÉÇàܨÄx wx VÉÇÇt|áátÇvxá
Réponds par vrai ou Faux
a- Les balises <Head>… </Head> permettent de créer l’entête d’un document
HTML…………………………………………………
b- Les balises </title>…<title> permettent de donner le titre d’un document HTML
…………………………………….
c- Les documents html ont pour extension .htlm ……………………………..
d- Les balises <HTML> ...<HTML> permettent de créer un document HTML …………………………………

70
gÜtät|Ä xÇ zÜÉâÑx
Travail Lors d’une séance de travaux pratiques, l’un de vos camarades vous demande de verifier s’il a
en groupe
bien écrit son code minimal. En vous basant de votre leçon sur la structure des documents HTML, il vous
est demander de reperer toutes les erreurs dans sa structure minimale avant de l’écrire correctement.

<HTML>
<HEAD>
</TITLE>Bienvenue au Cameroun <TITLE>
</HEAD>

</BODY>
Le relief du Cameroun est composé
de quatre grands ensembles…
</BODY>

71
MODULE1 : ALGORITHMIQUE ET PROGRAMMATION
STATIQUE
Chapitre 2 : programmation de pages web
statiques html

Leçon4 :
LES TABLEAUX

 Structure des documents HTML


Pré requis
 Les notions de balises HTML

Objectifs généraux de la leçon

L’élève à la fin de cette leçon devrait être capable de :


 Créer un tableau dans un document Html
 Utiliser les attributs de la balise <TABLE>
 Utiliser les balises de mise en forme de tableau

Leçon4 : LES TABLEAUX

72
INTRODUCTION
INTRODUCTION

L'usage des tableaux est donc très fréquent en HTML. Ils permettent de placer des éléments
à l'emplacement voulu. Raison pour laquelle il apparaît nécessaire de connaître les balises qui
permettent de créer un tableau dans un document HTML.

I. IMPORTANCE DES TABLEAUX

Un tableau est une liste claire et ordonnée qui permet de présenter des informations mieux
structurées qu’avec des listes. L’intérêt des tableaux provient donc de leur aptitude à présenter
l’information sous une forme plus synthétique et compréhensible.

Exemple : Effectif des élèves par classe

Salle 4ème A 4ème B 4ème C 4ème D

Effectif des élèves 77 84 79 81

II. CRÉATION D’UN TABLEAU DANS UN DOCUMENT HTML

A- LES BALISES DE CRÉATION D’UN TABLEAU

Les balises utilisées pour la création d’un tableau sont les suivantes :
• <TABLE> et </TABLE>qui annoncent la création d’un tableau
• <CAPTION>et </CAPTION> qui permettent de donner un titre au tableau créé
• <TR> et</TR> qui permettent de créer chaque ligne du tableau
• <TH> et</TH> qui permettent de créer les cellules d’entête du tableau
• <TD> et </TD>qui permettent de remplir chaque cellule du tableau.

73
Remarque :
C’est entre les balises <TABLE> et </TABLE>sont saisies les autres balises.
De même, les balises TH et TD sont saisies entre les balises de création des lignes
TR.
TH signifie Table header (entête de tableau)
TD signifie Table Data (donnée du tableau)
TR signifie Table Row (ligne du tableau)

B- INSERTION D’UN TABLEAU DANS UN DOCUMENT HTML


Pour insérer un tableau dans un document html, le préalable est de saisir le code minimal de
la structure d’un document HTML, par la suite saisir progressivement les codes de création du
tableau en commençant bien sur par la balise d’ouverture <TABLE>telle que présenté ci-dessous :

1 Saisir le code minimal d’un document HTML dans un fichier texte par exemple bloc
note :

<html>
<head>
<title>mon premier tableau </html>
< /head>
<body>
</body>
</html>

2 Saisir progressivement le code de création du tableau entre les balises


<body>et</body> :

74
1
<body>
<TABLE BORDER > 2
<CAPTION> TITRE DU TABLEAU </CAPTION>
3
1- <TR> ouverture lors de la création d’un tableau
Balise
2- <TH>contenu
Balises pour cellule
donner le titre entête 1 </TH>
du tableau
3- <TH>contenu
Balise d’ouverture cellule
lors de entête
la création 2 </TH>
d’une ligne 4
4- <TH>
Balises qui contenude
permettent cellule entête
créer des 3 </TH>
cellules d’entête
5- < /TR>
Balise de fermeture lors de la création d’une ligne
6- Balises qui permettent de remplir les cellules
7-
5
Balise de fermeture lors de la création d’un tableau
<TR>
<TD> valeur cellule 1 </TD>
<TD> valeur cellule 2 </TD> 6
3 Après enregistrement du code ci-dessus nous aurons le résultat suivant :
<TD> valeur cellule 3 </TD>
< /TR>
</TABLE>

</body>
7

III. UTILISATION DES ATTRIBUTS DE LA BALISE TABLE :

Il existe un certain nombre d’attributs qui permettent de définir des propriétés


supplémentaires du tableau. De manière générale, la syntaxe pour appliquer l’attribut d’une balise
est la suivante :

<Nom_de_labaliseNom_attribut= "valeur_attribut">

La balise TABLE dispose d’une grande variété d’attributs. À cet effet, nous pouvons citer :
• L’attribut BORDER = "n" ou BORDER =n qui permet d’afficher les bordures du tableau. Sa
syntaxe est la suivante :

<TABLEBORDER= n>, n étant un nombre entier.

75
Remarques :
Pour BORDER =0, aucune bordure du tableau n’est visible. BORDER= 1 ou BORDER
produit le même résultat.
Plus n est grand, plus larges ne sont les bordures du tableau.

Exemple : Utilisation de l’attribut BORDER

Pour border = 0 Pour border = 1

• L’attribut CELLPADDING contrôle la taille de la marge à l’intérieur des cellules. sa syntaxe est la
suivante :
<TABLECELLPADDING= n>, n étant un nombre entier.

Exemple : Utilisation de l’attribut CELLPADDING

Cellpadding = 0 Cellpadding = 20

76
• L’attribut CELLSPACING qui contrôle l’affichage des marges entre les cellules. Sa syntaxe est la
suivante :

<TABLECELLSPACING= n>, n étant un nombre entier.

• L’attribut FRAME qui spécifie les bordures externes visibles d’un tableau. les différentes valeurs
cet attribut sont :

 above : Affiche les bordures externes du haut du tableau


 below: Affiche les bordures externes du bas du tableau
 border : Affiche les bordures sur tous les côtés du tableau
 insides: Affiche les bordures sur le dessus et le dessous du tableau
 hsides : Affiche les bordures externes du côté horizontal du tableau (haut et bas).
 void: Permet de retirer toutes les bordures externes du tableau
Sa syntaxe est la suivante :

<TABLE BORDER FRAME = valeur_attribut>

Exemple : Utilisation de l’attribut FRAME.

Nous pouvons supprimer les bordures externes de ce tableau si nous attribuons à FRAME la valeur void

Tableau initial avec des <table border frame=void>


bordures externes Tableau sans bordures externes

• l’attribut RULES tout comme l’attribut FRAME spécifie les bordures internes visibles d’un
tableau.les différentes valeurs de cet attribut sont :
 none : Pour retirer toutes les bordures internes du tableau
 groups : Affiche une bordure horizontale entre les sections
 rows: Affiche une bordure horizontale entre toutes les lignes du tableau
 cols : Affiche une bordure horizontale entre toutes les colonnes du tableau
 all: Affiche des bordures dans le tableau
Sa syntaxe est la suivante :
77
<TABLE BORDER RULES = valeur_attribut>
• WIDTH = nqui permet de spécifier la largeur du tableau.
Sa syntaxe est :<TABLE BORDER WIDTH= n>, n est une valeur numérique (suivi de % ou px pour
pixel).
• L’attribut ALIGN qui permet de définir la position le tableau dans l’espace disponible. Ses
différentes valeurs sont : left (gauche), center (centré), right (droite).
• L’attribut BORDERCOLOR qui permet de définir la couleur des bordures du tableau.

En plus des attributs suscités, nous avons également les attributs de la balise TABLE, nous avons
ceux de la balise CAPTION.
Il s’agit précisément de l’attribut ALIGN dont les valeurs sont TOP (placer le titre au dessus du
tableau) et BOTTOM (placer le titre en dessous du tableau).

Exemple : Utilisation de l’attribut ALIGN DANS LA BALISE CAPTION.

Si nous donnons la valeur BOTTOM à l’attribut ALIGN dans la balise CAPTION, le titre du tableau apparaît
sous le tableau.

L’attribut ALIGN s’applique aussi aux balises TD ; TH ; TD afin de définir le niveau d’alignement des
valeurs saisies dans les cellules ou les lignes du tableau. Les différentes valeurs de cet attribut sont :
CENTER (centré) LEFT (aligné à gauche), RIGHT (aligné à droite), JUSTIFY (justifié).
L’attribut VALIGN par contre contrôle l’alignement vertical des données saisies dans le
tableau. Ses différentes valeurs étant : TOP (au dessus), MIDDLE (au centre), BOTTOM(en bas).

IV. LA MISE EN FORME D’UN TABLEAU

Comme nous l’avons abordé à la leçon 2, les balises de mise peuvent aussi être appliquées à
l’intérieur des différentes balises afin de personnaliser le style propre à chaque balise du tableau n
notamment en changeant la police, la couleur…

78
Résumé
e°áâÅ°
Contrôle de connaissances
Un tableau permet de présenter des informations de façon synthétique. De ce fait, pour insérer un
tableau dans un document HTML, il faut saisir correctement les balises TABLE, CAPTION, TR, TH, TD
dans le corps du document HTML.
Pour modifier le style appliqué au tableau, nous pouvons utiliser les balises de mise en forme.

VÉÇàܨÄx wx VÉÇÇt|áátÇvxá
1- Quelles balises permettent de créer un tableau ? donne le rôle de chacune d’elles.
2- Quels effets ont les attributs suivants sur un tableau ?
CELLPADDING - ALIGN - FRAME - RULES - BORDERCOLOR

79
Travail en groupe

gÜtät|Ä xÇ zÜÉâÑx
Exercice 1 :

il vous est demandé lors d’une séance des travaux pratiques de produire
votre emploi du temps de la semaine .
en vous basant sur la présente leçon, votre tableau doit faire apparaitre :
- Le titre en dessous du tableau
- Les jours de la semaine
- Les heures de cours
- Les cours
Exercice 2:
Que donnent les codes html ci-dessous :

a b
<table border> <table border=12 bordercolor=#CCCC88
width=50% cellspacing=9 cellpadding=15
<tr> align=right>
<td>A1</td>
<td>A2</td> <tr>
</tr> <td align="center">A1</td>
<tr> <td>A2</td>
</tr>
<td>B1</td> <tr>
<td>B2</td>
</tr> <td align=right>B1</td>
</table> <td>B2</td>
</tr>
</table>

80
MODULE1 : ALGORITHMIQUE ET PROGRAMMATION
STATIQUE
Chapitre 2 : programmation de pages web
statiques html

Leçon5 :
LES FORMULAIRES

Pré requis  Les tableaux


 La notion de balise

Objectifs généraux de la leçon

L’élève à la fin de cette leçon devrait être capable de :

 Donner Lister les balises qui permettent de créer un


formulaire.
 Insérer un formulaire de données dans une page web

Leçon5 : LES FORMULAIRES

81
INTRODUCTION
INTRODUCTION

Les formulaires donnent la possibilité de doter une page Web d'éléments interactifs
permettant par exemple un dialogue avec les internautes, à la manière des coupons-réponses
présents dans certains magazines.
Le lecteur saisit des informations en remplissant des champs ou en cliquant sur des boutons,
puis clique sur un bouton spécifique afin d’envoyer ces information à une adresse e-mail.
L’objectif de la présente leçon est de mettre à votre disposition les éléments qui permettent
d’insérer un formulaire dans votre page Web afin de la rendre interactive.

I. LES BALISES DE CRÉATION D’UN FORMULAIRE ET LEURS ATTRIBUTS

Les formulaires sont délimités par les balises <FORM> ... </FORM>. Elles permettent de regrouper
plusieurs éléments de formulaire (boutons, champs de saisie,...) et possèdent de ce fait des attributs
obligatoires :
a. METHOD indique sous quelle forme sont envoyées les réponses .elle a pour valeur : « POST »
qui correspond à un envoi de données stockées dans le corps de la requête « GET »
correspond à un envoi des données codées dans l'URL.
b. ACTION indique l'adresse d'envoi notamment une adresse email
(mailto:adresse.email@machine) ou un script CGI (Common Gateway Interface est un
programme exécuté par le serveur web permettant d'envoyer au navigateur de l'internaute
un code HTML créé automatiquement par le serveur).
La balise FORM possède comme attribut facultatif notamment :

82
c. ENCTYPE qui spécifie le codage des données dans l'URL, toutefois il n'est pas nécessaire de le
préciser car la valeur attribuée par défaut (application/x-www-form-urlencoded) est la seule
valeur valide.
d. ACCEPT permet de définir les types MIME des données pouvant être envoyées par le

formulaire.
La syntaxe de la balise FORM est la suivante :

<FORMMETHOD="POST"ou"GET"ACTION="URL" ENCTYPE="x-www-form-urlencoded">

...

</FORM>

Exemple : Les données saisies dans ce formulaire seront envoyées à l’adresse du ministère des enseignements
secondaire du Cameroun.
<FORM METHOD=POST ACTION="mailto:www.minesec.gov.cm">

</FORM>

La balise FORM permet de regrouper les éléments qui vont permettre à l'utilisateur de
choisir ou de saisir des données qui seront envoyées à l'URL indiqué dans l'attribut ACTION de la
balise FORM par la méthode indiquée par l'attribut METHOD.
Il est possible d'insérer du texte, des boutons, tableaux, liens dans une balise FORM mais il est
encore intéressant d'insérer des éléments interactifs. Ces éléments interactifs sont :
 La balise INPUT
 La balise TEXTAREA
 La balise SELECT
A- LA BALISE INPUT
La balise INPUT est la balise essentielle des formulaires, car elle permet de créer un bon
nombre d'éléments interactifs. Sa syntaxe est la suivante :
<INPUT type="Nom du champ" value="Valeur par défaut" name="Nom de l'élément">
 L'attribut name permet au script CGI de connaître le champ associé à la paire nom/valeur,
c'est-à-dire que le nom du champ sera suivi du caractère "=" puis de la valeur entrée par
l'utilisateur, ou dans le cas contraire de la valeur par défaut repéré par l'attribut value.
 L'attribut type permet de préciser le type d'élément que représente la balise INPUT, voici les
valeurs que ce champ peut prendre :

83
• checkbox: il s'agit de cases à cocher pouvant admettre deux états: checked (coché) et
unchecked (non coché). Lorsque la case est cochée la paire nom/valeur est envoyée au
CGI
• hidden: il s'agit d'un champ caché. Ce champ non visible sur le formulaire permet de
préciser un paramètre fixe qui sera envoyé au CGI sous forme de paire nom/valeur
• file: il s'agit d'un champ permettant à l'utilisateur de préciser l'emplacement d'un fichier
qui sera envoyé avec le formulaire. Il faut dans ce cas préciser le type de données
pouvant être envoyées grâce à l'attribut ACCEPT de la balise FORM
• image: il s'agit d'un bouton de soumission personnalisé, dont l'apparence est l'image
situé à l'emplacement précisé par son attribut SRC
• password: il s'agit d'un champ de saisie, dans lequel les caractères saisis apparaissent
sous forme d'astérisques afin de camoufler la saisie de l'utilisateur
• radio: il s'agit d'un bouton permettant un choix parmi plusieurs proposés (l'ensemble des
boutons radios devant porter le même attribut name. La paire nom/valeur du bouton
radio sélectionné sera envoyé au CGI. Un attribut checked pour un des boutons permet
de préciser le bouton sélectionné par défaut
• reset: il s'agit d'un bouton de remise à zéro permettant uniquement de rétablir
l'ensemble des éléments du formulaire à leurs valeurs par défaut
• submit: il s'agit du bouton de soumission permettant l'envoi du formulaire. Le texte du
bouton peut être précisé grâce à l'attribut value
• text: il s'agit d'un champ de saisie permettant la saisie d'une ligne de texte. La taille du
champ peut être définie à l'aide de l'attribut size et la taille maximale du texte saisi grâce
à l'attribut maxlength.
B- LA BALISE TEXTAREA
La balise TEXTAREA permet de définir une zone de saisie plus vaste par rapport à la simple ligne
de saisie que propose la balise INPUT.
Cette balise possède les attributs suivants :
 cols: représente le nombre de caractères que peut contenir une ligne

 rows: représente le nombre de lignes

 name: représente le nom associé au champ, c'est le nom qui permettra d'identifier le champ

dans la paire nom/valeur


 readonly: permet d'empêcher l'utilisateur de modifier le texte entré par défaut dans le

champ

84
 value: représente la valeur qui sera envoyée par défaut au script si le champ de saisie n'est

pas modifié par une frappe de l'utilisateur.


C- LA BALISE SELECT
La balise SELECT permet de créer une liste déroulante d'éléments (précisés par des balises OPTION
à l'intérieur de celle-ci).
Les attributs de cette balise sont:
 name: représente le nom associé au champ, c'est le nom qui permettra d'identifier le champ

dans la paire nom/valeur


 disabled: permet de créer une liste désactivée, c'est-à-dire affichée en grisée

 size: représente le nombre de lignes dans la liste (cette valeur peut être plus grande que le

nombre d'éléments effectifs dans la liste)


 multiple: marque la possibilité pour l'utilisateur de choisir plusieurs champs dans la liste.

II. INSERTION DE FORMULAIRE DANS UN DOCUMENT HTML

Cet exemple récapitule les points ci-dessus et montre comment mettre en page un formulaire
à l'aide d'un tableau. (Cela est même conseillé pour avoir une mise en page soignée).
Sous l’éditeur de texte
<html>
<head><title>mon premier formulaire</title></head>
<body>
<FORM method=post action="cgi-bin/script.pl">
Enregistrement d'un utilisateur
<TABLE BORDER=0>
<TR>
<TD>Nom</TD>
<TD>
<INPUT type=text name="nom">
</TD>
</TR>
<TR>
<TD>Prénom</TD>
<TD>
<INPUT type=text name="prenom">
</TD>
</TR>
<TR>
<TD>Sexe</TD>
<TD>

85
Homme : <INPUT type=radio name="sexe" value="M">
<br>Femme : <INPUT type=radio name="sexe" value="F">
</TD>
</TR>

<TR>
<TD>Fonction</TD>
<TD>
<SELECT name="fonction">
<OPTION VALUE="enseignant">Enseignant</OPTION>
<OPTION VALUE="etudiant">Etudiant</OPTION>
<OPTION VALUE="ingenieur">Ingénieur</OPTION>
<OPTION VALUE="retraite">Retraité</OPTION>
<OPTION VALUE="autre">Autre</OPTION>
</SELECT>
</TD>
</TR>
<TR>
<TD>Commentaires</TD>
<TD>
<TEXTAREA rows="3" name="commentaires">
Tapez ici vos commentaires</TEXTAREA>
</TD>
</TR>
<TR>
<TD COLSPAN=2>
<INPUT type="submit" value="Envoyer">
</TD>
</TR>
</TABLE>
</FORM>
</body>
</html>

L’ensemble de ces codes permet de créer le formulaire suivant :

86
Résumé

e°áâÅ°
Les formulaires permettent d’insérer un formulaire dans votre page Web afin de la rendre
interactive. ils sont délimités par les balises <FORM> ... </FORM>au sein duquel plusieurs
éléments (boutons, champs de saisie,...) peuvent être regroupé.
La balise FORM possède des attributs obligatoires :
METHOD indique sous quelle forme sont envoyées les réponses
ACTION indique l'adresse d'envoi notamment une adresse email
De même que des attributs facultatifs notamment :
ENCTYPE qui spécifie le codage des données dans l'URL
ACCEPTpermet de définir les types MIME des données pouvant être envoyées par le formulaire.
La balise FORM permet de regrouper les éléments qui vont permettre à l'utilisateur de choisir
ou de saisir des données qui seront envoyées à l'URL indiqué dans l'attributACTIONde la balise
FORM par la méthode indiquée par l'attributMETHOD.
Ces éléments interactifs sont :
 La balise INPUT: un ensemble de boutons et de champs de saisie,
 La balise TEXTAREA: une zone de saisie
 La balise SELECT: une liste à choix multiples.

87
Contrôle de connaissances

VÉÇàܨÄx wx VÉÇÇt|áátÇvxá
Travail en groupe

1. Qu’est-ce qu’un formulaire ?


2. Quelles balises permettent de créer un formulaire ?
3. À servent les balises ci-après dans un formulaire:
INPUT – TEXTAREA – SELECT ?
4. À servent les attributs ci-après :
Checkbox–hidden-password – radio -submit –text -readonly

gÜtät|Ä xÇ zÜÉâÑx
Le conseiller d’orientation de votre établissement souhaiterait avoir une idée sur la distance entre votre
établissement et le domicile de chaque élève.

Pour se faire, elle vous demande de créer un formulaire devant permettre aux élèves de s’enregistrer.

En vous appuyant sur l’exemple ci-dessus, montez un formulaire qui fera apparaitre les champs pour
remplir les informations suivantes :

 Le nom et prénom de l’élève

 La classe de l’élève

 Son sexe

 Son quartier

Une fois les informations saisies, ils doivent cliquer sur un bouton afin de l’envoyer à l’adresse e-

88
MODULE1 : ALGORITHMIQUE ET PROGRAMMATION
STATIQUE
Chapitre 2 : programmation de pages web
statiques html

Leçon 6 :
LES LIENS HYPERTEXTES, LES IMAGES ET LES SONS

 La notion d’insertion des images


Pré requis
 Notions de formulaire
Pré requis

Objectifs généraux de la leçon

L’élève à la fin de cette leçon devrait être capable de :


Objectifs généraux de la leçon
 insérer les liens hypertextes
L’élève à la fin
deInsérer
cette leçon doit être capable de :
des images
 Insérer le son dans une page web
 Inserer un lien hypertexte dans une page
 Inserer une image dans une page
 Insererleson dans une page

Leçon 6 : LES LIENS HYPERTEXTES, LES IMAGES ET LES SONS

89
INTRODUCTION
INTRODUCTION

Comme nous l’avons abordé à la leçon 1, un site web est constitué d’un ensemble de pages web
organisé autour d’une page centrale appelée page d’accueil. La page d’accueil permet d’atteindre les
différentes pages d’un site. Afin cela soit possible, il existe dans la page des éléments qui permettent la
navigation entre les différentes pages : Ce sont les liens.

La présente leçon a pour objectif de mettre votre disposition les outils qui permettent d’insérer des
liens pour atteindre une page, une musique une image afin de rendre le contenu de vos pages web plus
convivial.

I. LIENS HYPERTEXTES

Les liens permettent de naviguer entre les différentes pages d’un site. La balise<A >encore appelée
ancre permet d’insérer des liens dans une page. Elle possède un attribut obligatoire notamment HREF qui
permet d’indiquer l’adresse de la page ou du fichier à atteindre.

La syntaxe pour insérer un lien vers une page web est donnée par :

<A HREF="adresse_complète_page\nom_page.extension”>mot_cliquable</A>

Selon l’emplacement de la page à atteindre, nous allons distinguer :

 Les liens à adresse relative appropriée pour les documents appartenant au même dossier parent.

Leur syntaxe est donnée par :


<a Href="Nom_image+extension"> …</a>

Exemple :
<ahref=" accueil.html">acceuil</a>
Ce lien permet d’atteindre la page web intitulée accueil.html.

 Les liens à adresse absolue qui se fait avec l’adresse complète du document sont appropriés pour les
documents appartenant à d’autres sites.

Leur syntaxe est donnée par :


<a href="URL"> …</a>

Exemple : Ce lien permet d’atteindre la page d’accueil du site du ministère des enseignements secondaires du
Cameroun :<ahref="http://www.minesec.gov.cm/accueil.php>acceuil</a>

90
 Les liens de type courriel qui se font avec le courriel précédé de « mailto : » permettent d’envoyer un
courriel à une adresse e-mail donnée.

Leur syntaxe est donnée par :


<a href="mailto : adresse e-mail">…</a>

Exemple : ce lien permet d’envoyer un courriel à l’adresse électronique à l’adresse


cameroun_online@cameroun_online.cm
<ahref=" mailto : cameroun_online@cameroun_online.cm"> envoi de courriel </a>

Remarques :
Les liens sont identifiables dans une page grâce à l’aspect du pointeur qui se transforme
en une main.
Pour créer un lien il faut connaitre l’adresse complète de la page qu’on souhaite atteindre
et insérer le mot sur lequel cliquer pour atteindre la page souhaitée

II. INSERTION D’IMAGE

La baliseIMG permet d’insérer une image dans une page web. Sa syntaxe est la suivante :

<IMG SRC=" adresse_complète_image\nom_image.extension_image">

L’attribut SRC est obligatoire et permet d’indiquer l’adresse de l’image à insérer.

Remarques :
Pour insérer une animation GIF le nom de l’image doit avoir l’extension .gif
Pour insérer une image JPEG le nom de l’image doit avoir l’extension .jpg
Pour insérer une animation BITMAP le nom de l’image doit avoir l’extension .bmp

Exemple : Insertion d’image (Nénuphars.jpg) dans une page web (essai.html)


• Si les deux fichiers sont dans le même répertoire par exemple le bureau
On saisit dans le fichier essai.html la balise : <IMG SRC=" Nénuphars.jpg">
• Si les deux fichiers sont dans des répertoires différents (Nénuphars.jpg est dans le répertoire D:\Mes
documents alors on saisit dans le fichier essai.html la balise suivante :<IMG SRC=" D :Mes
Documents\Nénuphars.jpg">

91
Les attributs suivants peuvent aussi s’appliquer à la balise IMG :
alt: Permet d'afficher un texte alternatif lorsque l'image ne s'affiche pas.
title: Permet d'afficher une info bulle lors du survol de l'image par le curseur.
Width: Permet de définir la largeur de l'image.
Height: Permet de spécifier la hauteur de l'image.
Align : définit la position de l'image par rapport au texte. Ses différentes valeurs étant :
• left (à gauche), right (à droite) indiquent la position d’une image dans la page ;
• top (au dessus), middle (au milieu), bottom(en bas) indiquent la position du texte par
rapport à l’image.
Les attributs Width et Height prennent des valeurs numériques et s’expriment en pourcentage(%) ou en
pixels (px).En prenant en compte les attributs ci-dessus, nous pouvons avoir la syntaxe ci-dessous :
<img src="adresse_image+nom_image" align="valeur" Width= valeur Height=valeur
title=nom_image>

Exemple : Insertion d’image (Nénuphars.jpg) dans une page web

<imgsrc="C:\Documents and Settings\All Users\Documents\Mes images\Échantillons


d'images\Nénuphars.jpg" align="right" width=40% heigth=50% title=nénuphar>
Codes saisies dans un éditeur

Sous un navigateur web

III. INSERTION DU SON DANS UNE PAGE

Pour insérer une chanson dans une page Web, la démarche est similaire à celle de l’insertion d’un
lien hypertexte. L’ancre <A> est toujours utilisée. La syntaxe est de ce fait donnée par :

<a href="file:///adresse complète+nom_fichier">mot_cliquable</a>

92
Exemple : Création de lien pour insérer du son dans une page web
Le lien créé dans la page permet lire la musique abba mon père.mp3

<B>Cantiques :</B> ABBA mon père <a href="file:///C:\Documents and Settings\CLAUDE\Mes


documents\Ma musique\cantiques\adoration\abba mon père.mp3"> lire </a>

Codes saisies dans un éditeur

Sous un navigateur web

Résumé

e°áâÅ°
Les liens permettent de naviguer entre les différents pages d’un site web qui peuvent contenir du
texte, des images ou même du son.
Pour créer un lien il faut connaitre l’adresse complète de la page qu’on souhaite atteindre et
inserer le mot sur lequel cliquer pour atteindre la page souhaitée.
La syntaxe pour atteindre une page donnée ou alors pour lire du son est donnée par :

<ahref="nom_fichier.extension_fichier ">…</a>pour créer un lien relatif pour des documents


appartenant au même dossier parent.
<ahref="adresse_complète_fichier\nom_fichier.extension"> …</a>afin de créer un lien absolu pour
des documents appartenat à d’autres serveurs.
L’attribut Hrefest obligatoire et permet d’indiquer l’adresse du fichier à atteindre.
En plus des liens on peut inserer des images dans une page web en utilisant la balise IMG.
La syntaxe est donnée par :
<IMG SRC=" adresse_complète_image\nom_image.extension_image">

93
Contrôle de connaissances

Exercices d’application
VÉÇàܨÄx wx VÉÇÇt|áátÇvxá
1. Qu’est-ce qu’un lien ?
2. Quand dit-on qu’un lien est absolu ? relatif ?
3. De quoi a-t-on besoin pour créer un lien ?
4. Quelle est la syntaxe pour insérer une image dans une page web ?
5. A quoi servent les balises HREF, SRC ?

XåxÜv|vxá wËtÑÑÄ|vtà|ÉÇ
1- Créez trois documents html que vous enregistrerez sous les noms :
 accueil.html,
 musique .html,
 musique.html
1- dans accueil.html, insérer une image de votre choix et deux liens :
 L’un qui permet d’atteindre la page tableau.html afin de lire son contenu.
 l’autre qui permet d’atteindre la page musique.html afin de suivre la musique choisie.

94
V{tÑ|àÜx F
Chapitre III : PRODUCTION DES FEUILLES DE STYLE

PRODUCTION DES FEUILLES


DE STYLE
_x†ÉÇ D : Généralités sur les feuilles de style
_x†ÉÇ E : mise en forme d’une page web

Les élèves dans la prise des notes sont sensibles à la présentation de leur
cahier. C’est ainsi qu’ils utilisent les stylos de différents couleurs pour embellir et
présenter les cahiers. Scientifiquement, il a été prouvé que l’esthétique à un impact
considérable dans le processus enseignement/apprentissage ; d’où la motivation des
concepteurs des sites à développer des stratégies pour améliorer facilement l’aspect
visuel de ces derniers.

95
MODULE1 : ALGORITHMIQUE ET PROGRAMMATION
STATIQUE Chapitre3 : production des feuilles
de style

Leçon1 :
GENERALITES SUR LES FEUILLES DE STYLE

 Savoir utiliser un éditeur de texte pour saisir le code


Pré requis
HTML.
 Avoir des connaissances sur la notion de HTML

Objectifs généraux de la leçon

L’élève à la fin de cette leçon devrait être capable de :

 Définir une feuille de style


 Donner la syntaxe d’une règle de style
 Donner quelques styles de base prédéfinis
 Donner les avantages de son utilisation

Leçon1 : GENERALITES SUR LES FEUILLES DE STYLE

96
INTRODUCTION
INTRODUCTION

Les feuilles de style ont été mises au point afin de compenser les manques du langage Html en
ce qui concerne la mise en page et la présentation. Les feuilles de style permettent de regrouper
dans un même document les caractéristiques de mise en forme associées à des groupes d’éléments.
Elles sont très souvent appelées par l’abréviation anglaise CSS.

I. DEFINITION ET SYNTAXE D’UNE FEUILLE DE STYLE

A. Définition
CSS Cascading Style Sheets en anglais ou feuilles de styles en cascade en français est l’application
de mises en forme des éléments de texte. Le CSS est utilisé par les logiciels de traitement de texte et
le html également.
B. Syntaxe d’une feuille de style
Une règle de style est caractérisée par deux principaux éléments à savoir un sélecteur de balise
et une déclaration de style.
• Le sélecteur de balise : il permet de préciser à quelles balises du document le style
s’applique.
• la déclaration de style : défini entre accolade, il permet de préciser le style à appliquer aux
balises sélectionnées. La déclaration elle-même est constituée de :
 une ou plusieurs propriété (s) suivi du caractère deux points ( :);
 une ou plusieurs valeur (s) associée (s) à chaque propriété, entourée des guillemets s’il
s’agit de plusieurs mots ou séparé par des virgules s’il en a plusieurs et suivi d’un point-
virgule.
La syntaxe d’une règle de style est la suivante :
Balise {propriété1 : valeur1; propriété2 : valeur2; ...}

Sélecteur déclaration

Exemple :
H1 { font-family: Arial, sans-serif; font-style :italic; }

97
II. STYLES DE BASE PRE DEFINIS

Le tableau suivant donne un récapitulatif des styles de base définis avec leurs descriptions et
des exemples :

Propriétés Descriptions Exemples

Font-family Police de caractères précise (Arial, Times, p {font-family: Arial, sans-serif;}


Helvetica...) toujours associée à une famille de
police (serif, sans-serif, cursive, fantasy,
monospace)
Font-style Style de l'écriture : normal ; italique ; oblique p {font-style: italic;}

Font-weight Épaisseur de la police : normal ; bold ; bolder ; p {font-weight: bold;}


lighter..

Font-size Taille de la police : en points (pt), inches (in), p {font-size: 12px;}


centimètres (cm), pixels (px) ou pourcentage h1 {font-size: 120%;}
(%)...
Text-align Alignement du texte :left ; center ; right ; h2 {text-align: center;}
justify

Texy-decoration Décoration du texte : strike (barré) ; underline h4{text-decoration: underline;}


(souligné); none (rien).

color Couleur du texte. Elle peut être donné soit en h3 {color : dark-green;}
tapant le nom soit en tapant le code h3 {color : #000066;}:

background-color Couleur d’arrière-plan Elle peut être donné h1{background-color :#000000;}


soit en tapant le nom soit en tapant le code

background- Image d'arrière-plan body {background-image: url


image (image.jpg);}

III. AVANTAGES DE L’UTILISATION DU CSS

Le langage HTML offre un certain nombre de balises permettant de mettre en page et de définir
les styles d’un texte toutefois chaque élément possède ses propres balises de styles
indépendamment des éléments qui l’entourent. De façon plus précise, le CSS permet de :
• Séparer le contenu d’un fichier HTML de sa mise en forme ;
• Modifier l’apparence des contenus sans avoir à modifier les contenus eux-mêmes dans le
document HTML ;
• L’économie des balises dans le code du document ;

98
• Une grande lisibilité du code HTML ;
• Le chargement rapide des pages.

Résumé

e°áâÅ°
Contrôle de connaissances

Les feuilles de style ont été créées afin de pallier aux insuffisances du langage HTML en ce qui concerne
la présentation et la mise en forme d’un document. Sa syntaxe permet de ressortier deux grandes parties à
savoir le sélecteur de balise et la déclaration de style. Il existe un certain nombre de balise déjà prédéfini
permettant aux novistes qui maîtrise la règle de syntaxe de se déployé facilement. La particularité du langage
CSS réside sur sa capacité à modifier l’apparence visuelle d’un fichier HTML sans pour autant s’attaquer au
contenu.

VÉÇàܨÄx wx VÉÇÇt|áátÇvxá
1. Définir le sigle CSS
2. Qu’est-ce qu’une feuille de styles
3. Donner la syntaxe d’une règle de style
4. Lister cinq styles de base en donnant à chaque fois leur description.
5. Lister les avantages de l’utilisation des feuilles de styles.

99
MODULE1 : ALGORITHMIQUE ET PROGRAMMATION
STATIQUE
Chapitre3 : production des feuilles
de style

Leçon2 :
MISE EN FORME D’UNE PAGE WEB

 Définir feuilles de styles


Pré requis  Donner la syntaxe d’une règle de style
 Donner les avantages de son utilisation

Objectifs généraux de la leçon

L’élève à la fin de cette leçon devrait être capable de :

 Donner les différentes applications d’un style et


leur syntaxe
 Donner les différents emplacements de style

Leçon2 : MISE EN FORME D’UNE PAGE WEB

100
INTRODUCTION
INTRODUCTION

Comme le HTML décrit le contenu d’un document, le langage CSS décrit sa présentation.
Pour styler une page web, il convient dans un premier temps de définir les styles à l’aide des
propriétés prédéfinies puis d’appliquer ces styles aux balises du document HTML.

I. APPLICATION D’UN STYLE

1.1 Application simple

Il s’agit d’appliquer un ou plusieurs styles à une balise précise

Balise {propriété1 : valeur1; propriété2 : valeur2; ...}

Exemple : h1 {font-style: italic; color: red ;}


Cet exemple applique le style « italique » et la couleur « rouge » à la balise h1

1.2 Application multiple


Il s’agit d’appliquer un ou plusieurs styles à plusieurs balises
balise1, balise2,… {propriété1 : valeur1; propriété2 : valeur2; ...}

Exemple: h1, h2, h3 {font-style: italic; color :red}


Cet exemple applique le style « italique » et la couleur « rouge » aux balises h1,h2, h3

II. LES DIFFERENTS EMPLACEMENTS DE STYLE

Il existe trois emplacements pour insérer les feuilles de style à savoir :


• L’emplacement en ligne ou style en ligne ;
• l’emplacement interne ou style interne;
• l’emplacement externe ou style externe un fichier distinct.
1. style en ligne
Le style est défini via l'attribut style à l'intérieur de la balise. Ce style ne s'appliquera ici qu'à
cette seule balise. Cette façon de faire ne sépare pas le contenu de sa mise en forme. On se

101
ramène encore à la façon de faire du langage HTML c’est pourquoi cette utilisation est
déconseillée.
Le code est tapé dans l’éditeur de texte et est enregistré avec l’extension .html . L’exemple ci-
dessous est un code tapé dans l’éditeur bloc-notes et enregistré avec le nom attribut.html.

Une fois le code enregistré, cliqué sur l’index qui a été créé afin de visualiser le site sur le navigateur.
Le résultat ci-après est obtenu :

2. style interne
Les styles internes sont définis de manière groupés, entre les balises <style> et </style>, elles-
mêmes à l'intérieur des balises <head> et </head>

102
Le code est tapé dans l’éditeur de texte et est enregistré avec l’extension .html . L’exemple ci-
dessous est un code tapé dans l’éditeur bloc-notes et enregistré avec le nom interne.html.

Une fois le code enregistré, cliqué sur l’index qui a été créé afin de visualiser le site sur le navigateur ;
le résultat est identique au premier.

3. style externe
Les feuilles de style sont ici séparées du fichier HTML. Les définitions de style sont écrites dans
un autre fichier dont l'extension est «.css ». Par exemple : « code.css ».

Exemple de code .css

103
Ce fichier sera par la suite appelé dans l’entête du fichier web. La liaison entre ces deux
fichiers se fait dans le document HTML avec la balise <link> donc la syntaxe est la suivante :

<head>

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

...

</head>

L'attribut Rel="stylesheet" renseigne sur la nature du fichier, l'attribut


type="text/css", sur son format et href="code.css" donne l'adresse du fichier à lier.
Exemple de code.html

En ce qui concerne cette façon de faire, les fichiers .css et .html sont dans le même répertoire.

104
Le résultat observé est identique aux précédents.

Résumé

e°áâÅ°
La mise en forme d’une page HTML peut se faire en utilisant l’application simple c’est-à-dire
appliquer un ou plusieurs styles à une seule balise ou en utilisant l’application multiple ; dans ce cas,
les styles sont appliqués à plusieurs balises. Quelques soit l’application utilisée, on distingue trois
emplacements de style. Ces emplacements conduisent au même résultat, la différence réside sur la
capacité à saisir un code concis, facilement lisible et facilement maintenable.

105
Contrôle de connaissances

VÉÇàܨÄx wx VÉÇÇt|áátÇvxá
Travail en groupe

1. Citez les différentes applications d’un style et donnez-leur syntaxe.


2. C’est quoi un emplacement de style?
3. Combien d’emplacement de style connaissez-vous ? citez-les et donnez pour chacun sa
particularité.
4. Au cours d’un devoir surveillé, l’enseignant vous présente une feuille de style avec emplacement
externe. Quel est l’avantage de l’utilisation de cet emplacement? Pourquoi l’enseignant le préfère
par rapport aux autres emplacements ?

gÜtät|Ä xÇ zÜÉâÑx
Exercice1: monter un document html qui présente votre famille. Appliquez-y les styles de votre
choix en vous assurant que son emplacement soit externe.

Exercice2 : réaliser un document html qui décrit votre salle de salle. Vous ferez les mises en formes qui
vous conviendrez en appliquant les mises en forme avec emplacement interne.

Exercice3 : reproduire l’exercice 2 tout en utilisant les styles en ligne pour styler votre document.

106
`ÉwâÄx E
MODULE II INFOGRAPHIE
: INFOGRAPHIE

V{tÑ|àÜx G : CREATION DES BOUTONS


V{tÑ|àÜx H : CREATION DE TEXTES AVEC EFFETS
V{tÑ|àÜx I : CREATION D’ANIMATION
V{tÑ|àÜx J: RETOUCHE D’UNE PHOTO

107
V{tÑ|àÜxG
Chapitre IV : CREATION DE BOUTONS

CREATION DE BOUTONS

_x†ÉÇ D: Utilisation d’un logiciel de création de bouton : cas de


Photoshop
_x†ÉÇ E: Architecture d’une page web

108
MODULE2 : INFOGRAPHIE Chapitre 4 : Création des Boutons

Leçon 1 : UTILISATION D’UN LOGICIEL DE CRÉATION DE


BOUTON : CAS DE PHOTOSHOP
Leçon 1 :
UTILISATION D’UN LOGICIEL DE CRÉATION
DE BOUTON : CAS DE PHOTOSHOP

• Savoir utiliser le logiciel Photoshop


Pré requis
• Avoir des notions sur le traitement d’image classe de
seconde littéraire.

Objectifs généraux de la leçon

L’élève à la fin de cette leçon devrait être capable


de :

 Faire des retouches sur les images


 Créer un bouton via Photoshop
 Ajouter des effets aux boutons

INTRODUCTION

109
INTRODUCTION

L’infographie, c’est-à-dire la création et la manipulation de graphismes par un ordinateur, est


un domaine aux multiples applications. C’est une application de l’informatique destiné à la
représentation graphique et au traitement d’image à l’aide d’outils de dessin spécifique.

L’infographie s’appui dans sa totalité sur des images numériques.

Une image numérique désigne toute image (dessin, icône, photographie…) acquise, créée, traitée
et stockée sous forme binaire. Il existe plusieurs logiciels de création des boutons. Nous pouvons
entre autres GIMP, Photoshop, etc... Dans cette nous allons utiliser Photoshop pour créer nos
boutons.

I. QUELQUES RAPPELS SUR LES IMAGES ET SUR LE LOGICIEL PHOTOSHOP

I.1. Quelques définitions sur la notion d’image

En pratique, pour travailler efficacement avec de telles images, il vous faudra connaître un
certain nombre de concepts techniques, entre autres les notions de "Pixel", de " bitmap", de
"définition", de "résolution" de "profondeur de couleur", de "format de fichier" de "compression".

Un pixel est une Contraction en anglais de « picture element » - élément d'image. C’est un point
élémentaire de la matrice d'une image numérisée, d'un écran, d'un capteur.

Le Bitmap qualifie une image numérisée représentée par une grille de pixels. La couleur de
chaque pixel est codée sur un certain nombre de bits.

Une image c'est le nombre de pixels d'une image en largeur multiplié par le nombre de pixels en
hauteur. Par exemple 1024x768 signifient que l'image fait 1024 pixels de large sur 768 pixels de haut.

La résolution exprime une densité (nombre de pixels contenus dans un pouce). La résolution
n'est pas une caractéristique de l'image mais celle d'un périphérique (ex : imprimante). Les pixels
stockés sous forme de fichiers informatiques n'ont pas de taille. On peut donc au plus les dénombrer

Dimensionner un pixel et donc donner une taille à l'image est le rôle de l'imprimante. Celle-ci
produit des gouttes (drop en anglais) dont le nombre n'a pas de relation directe avec le nombre de
pixels d'une photo.

I.2. Formats et types d’images

a) Formats d’image

Un format d’image est une représentation informatique de l’image associée à des


informations sur la façon donc l’image est codée et fournissant des informations sur la manière de la

110
manipulée. Voici quelques un des formats de fichier pour les images TIFF, JPEG (ou JPG), GIF, PGN,
RAW, BMP, PSD.

b) Types d’image

Les images produites et traitées par les ordinateurs sont de deux types: les images
« bitmap » et les images « vectorielles ». A chacun de ces types correspondent des familles
distinctes de logiciels de traitement spécialisés respectivement, les paint (le programme Paint des
accessoires de Windows, Mac Paint, Painter, PSP 4, Photoshop, etc. et les draw (MacDraw Pro,
Illustrator, FreeHand, Corel Draw, etc). Chaque type possède aussi ses avantages et ses
inconvénients.

Les images de type bitmap

Il s'agit d'une représentation graphique définie par l'ensemble des points appelé pixel qui la
compose.

Exemple d’image matricielle ou bitmap

A un certain niveau de grossissement, l'image finit par se transformer en un canevas de gros carrés
de couleur : les fameux pixels.

Avantages
1. Le mode de codage des images bitmap (24 bits, codage RBG) les rend adaptées au
fonctionnement des principaux périphériques, notamment les contrôleurs d'écran.

2. Le mode de codage point par point étant relativement universel, une fois cette
opération effectuée, le transcodage demande des calculs répétitifs mais relativement
simples: la compatibilité est aisée entre les différents formats.

3. La structure du fichier est telle que des dégradations minimes des données.

111
Inconvénients
1. Les images bitmap ont une résolution fixe: Cela veut dire qu'une résolution de type
écran donnera d'assez mauvais résultats sur un autre écran. Les images bitmap sont donc
dépendantes du périphérique.

2. Elles supportent mal les opérations de redimensionnement, réduction ou


agrandissement.

3. Les images bitmap sont "lourdes": les fichiers, lorsque l'on traite des images en haute
définition, ont des tailles qui varient entre 10 et 30 Mo par image.... Elles sont donc
encombrantes, difficiles à faire passer sur le réseau, etc.

Les images de type vectoriel

La description vectorielle d'une image consiste en une description géométrique: le


document numérisé prend donc la forme d'une suite de formules mathématiques décrivant les
formes élémentaires constituant l'image (carrés, rectangles, ellipses, cercles, courbes, etc.). Chaque
forme élémentaire constitue un objet et se voit assigné un certain nombre d'attributs tels que la
couleur, la transparence, l'épaisseur du trait, le type de trait (pointillé, etc.)

Exemple d’image vectorielle

On observe que lorsque l'on zoom sur la partie sélectionnée de l'image, la ligne du bord du cercle
reste lisse, il n'y a pas d'effet escalier.
Pour une image vectorielle, seules les coordonnées et les informations de l’image sont
importantes.

Avantages
1. l'image vectorielle est réellement indépendante du périphérique.
2. Toutes les modifications spatiales de l'image (réduction, agrandissement, translation,
rotation, etc.) sont aisées et n'occasionnent aucune perte d'information. Il suffit en
effet de modifier les coordonnées des points de contrôle qui définissent l'objet.
3. L'image vectorielle est particulièrement adaptée aux représentations schématiques et
stylisés constituées de formes géométriques, uniformément remplies par des à-plats
de couleur ou des motifs.
4. Un fichier vectoriel est bien plus compact qu'un fichier en mode point. Sa taille varie en
fonction de la complexité de l'image, mais pas en fonction de la résolution demandée.

112
Inconvénients
1. Une image vectorielle ne peut coder une image analogique telle qu'une image
photographique.
2. La modification d’une image vectorielle est complexe lorsque le graphiste ou
l’illustrateur ne maitrise pas les coordonnées de l’image.
3. Certaines manipulations telles que les modifications de couleurs sont difficiles sur une
zone d'un objet, sur un objet simple ou sur un groupe d'objets.
4. Un fichier vectoriel est plus fragile qu'un fichier bitmap dont l'en-tête surtout doit être
intacte. La moindre dégradation de l'information est souvent irréparable.

Différence entre image Matricielle et image Vectorielle

I.3 RAPPELS SUR QUELQUES OUTILS DANS PHOTOSHOP

a) Les outils de sélection

Les outils rectangles et ellipses de sélection

Ils permettent de sélectionner des objets sous forme de rectangles, d’ellipses il vous suffit de
faire un clic glisser à partir du point de départ de la sélection jusqu’au bout de votre sélection.

Les outils Lasso et Lasso polygonal

Ils permettent de tracer des segments de droite et des segments à main levée pour le cadre
de sélection.

L'outil Baguette magique

Il permet de sélectionner une zone colorée de façon homogène (par exemple, une fleur rouge) sans
être obligé de tracer son contour.

L’outil recadrage

113
Il permet de sélectionner une partie bien précise d’une image ou photo

L’outil déplacement

Il sert à déplacer une sélection d’un endroit à un autre du calque

b) Les outils de peinture

Les outils Pinceau et Crayon

Vous permettent de dessiner avec la couleur de premier plan sélectionnée. Par défaut, l'outil
Pinceau applique de légères touches de couleur, tandis que l’outil crayon permet de tracer à main
levée des traits au contour net.

L’outil gomme

Les outils Gomme et Gomme magique vous permettent d'effacer des zones d'une image pour
laisser apparaître les pixels transparents ou la couleur d'arrière-plan.

L'outil Dégradé

Il permet de créer un fondu progressif entre plusieurs couleurs. Vous pouvez choisir un fond
en dégradé prédéfini ou en créer d'autres.

Les outils correcteurs et tampon de duplication

Ils permettent de prélever un échantillon de couleur de l'image de votre choix, ensuite


appliquer à une autre image ou à une autre partie de l'image

c) Autres outils

L’outil texte

Il permet du texte dans le logiciel

L’outil zoom

Il permet de réduire ou de d’agrandir un objet sur un calque

L’outil couleur de premier- plan et d’arrière- plan

Il permet de modifier la couleur de premier- plan et d’arrière- plan

L’outil forme

Il permet de créer des formes.

Remarque :
Les outils suscités offrent plusieurs autres options d’utilisation au niveau de la
palette d’option de Photoshop

114
II. Notions de Boutons.

II.1. Définitions
Un bouton désigne un élément qui permet d'exécuter une fonction. C’est un objet
sur lequel

• on peut cliquer pour accéder à une page suivante ou précédente dans une
page Web
• on peut cliquer pour suivre un lien
• on peut cliquer pour valider l’exécution d’une tâche dans un logiciel

II.2. Création d’un bouton avec Photoshop


Suivez les étapes suivantes pour la création des boutons avec Photoshop

Etape 1

• lancez le logiciel Photoshop


• cliquez sur fichier, puis sur nouveau
• dans le champ nom, saisissez le nom de votre bouton
• En dessous, modifier les champs largeur et hauteur selon la dimension de
votre bouton
• puis cliquez sur « OK »

Après avoir cliquez sur « OK », une boite de dialogue semblable à celle-ci-dessus s’affiche.

115
Etape 2 :

• Allez à la fenêtre d’outils puis tapez sur la touche « U » du clavier et observer l’icône
active.
• Faire un clic droit dessus et choisir « outil rectangle arrondi »
• Tracez le rectangle dans l’espace de travail
• Dans la fenêtre calques (là où le calque du rectangle est nommé forme 1), faites un clic
droit dessus et choisissez l’option « option de fusion »
• Dans la zone styles, cochez la case « l’incrustation en dégradé ». vous pouvez ensuite
cochez les autres cases pour voir les différents effets possibles.
• Cliquez sur « OK » et votre premier bouton se créer.

Exemple : boutons crées

III. CREATION D’UN LOGO

Un logo est une image qui représente une entreprise, un site, une organisation, etc. il existe
de multiples méthodes pour créer un logo. Mais utilisez un logiciel est un outil idéal pour la création
des logos. Dans cette section, nous allons utilisez le logiciel Photoshop, mais il existe de nombreux
autres outils ou logiciels permettant de créer les logos les bannières des sites Web.
1. Nous allons maintenant créer le logo du site web. Tout d’abord, créez un nouveau groupe dans vos
calques (layers) que vous pouvez appeler « logo ».

116
2. Avec l’outil texte (T), écrivez le nom de votre logo en lettres majuscules, dans notre cas, nous
écrirons « SMASHING ».

3. Par la suite, dans votre panneau de caractères (Window ->Character), utilisez la police Arial en
Bold avec une grandeur de 42 pt. Aussi, définissez l’option d’anti-aliasing à Sharp et utilisez la
couleur #101112.

4. Double-cliquez sur votre calque de texte pour ouvrir la boîte de dialogue. Sélectionnez Gradient
Overlay et utilisez les paramètres inscris sur l’image ci-bas.

5.

117
Déplacez le calque « SMASHING » à une distance de 35px à partir du haut et à 0px du coté
gauche. Dupliquez le calque et déplacez-le vers la droite. Changez son texte pour « Dzine » . Répétez
les étapes 4,5et 6 en utilisant cependant différentes couleurs pour le dégrader. (Couleur de gauche:
#b27625 et couleur de droite: #e5ad27).

5. Re-sélectionnez l’outil de texte et ajoutez un texte de description sous le logo avec les
paramètres suivants:

6. Le logo final devrait ressembler à l’image ci-dessous.

Résumé
e°áâÅ°
Une image c'est le nombre de pixels d'une image en largeur multiplié par le nombre de pixels en
hauteur. Par exemple 1024x768 signifient que l'image fait 1024 pixels de large sur 768 pixels de haut.
Un bouton désigne un élément qui permet d'exécuter une fonction. C’est un objet sur lequel
• on peut cliquer pour accéder à une page suivante ou précédente dans une page Web.
• on peut cliquer pour suivre un lien.
• on peut cliquer pour valider l’exécution d’une tâche dans un logiciel.
Photoshop permet de créer des logos et des boutons qu’on peut y mettre des effets dans
Photoshop.

118
VÉÇàܨÄx wx VÉÇÇt|áátÇvxá
1. Définir les termes suivants : image, image numérique, pixel, bitmap, image matricielle,
image vectoriel, logo.

Contrôle dequatre
2. Citez connaissances
formats d’image et donnez pour chaque format son extension.
3. Enumérez trois différences significatives entre une image matricielle et une image
vectorielle.
4. Enumérez trois avantages et trois inconvénients de chacun des types d’image.
5. Définir bouton, et quel est son rôle dans un site Web.
6. Créer un bouton dans Photoshop
7. Créer un logo dans Photoshop
8. Enumérez deux (02) autres logiciels permettant de créer les logiciels.

119
MODULE2 : INFOGRAPHIE
Chapitre 4 : Création des Boutons

Leçon 2 :
ARCHITECTURE D’UNE PAGE WEB

 Connaissances du HTML
Pré requis  Connaissances de Photoshop
 Notion de Bouton

Objectifs généraux de la leçon

L’élève à la fin de cette leçon devrait être capable de :


 Faire le dessin de l’architecture d’une page Web

Logo Zone de bannière et nom du site


Logo
Accueil Produits Contactez-nous A Propos
Bandeau de navigation

Zone de recherche

Corps
Menu

Pied de page
Leçon 2 : DESSIN DE L’ARCHITECTURE D’UNE PAGE WEB

120
INTRODUCTION

L’Architecture d’un Site Web désigne un dessin permettant à structurer les éléments graphiques
d'un site web afin de traduire, à travers une dimension esthétique, l'identité visuelle de la société ou
de l'organisation.
L'objet de l’architecture d’un site Web est de valoriser l'image de l'entreprise ou de
l'organisation par le biais d'éléments graphiques afin de renforcer son identité visuelle et de procurer
un sentiment de confiance à l'utilisateur. Néanmoins, en vertu des critères d'ergonomie, un site web
doit avant tout répondre aux attentes des utilisateurs et lui permettre de trouver facilement
l’information qu’il cherche.

I. STRUCTURE GENERALE D’UN SITE WEB

La structure générale d'une page web est la suivante :


• un logo situé en haut à gauche ou à droite. La plupart du temps le logo est cliquable et mène
à la page d'accueil ;
• une zone de navigation (menu), située à gauche et/ou à droite ;
• un en-tête contenant le nom du site, un bandeau de navigation et une zone prévue pour
une bannière (publicitaire ou non) ;
• un corps de page, contenant l'essentiel de l'information ;
• un pied de page regroupant des informations utiles telles que la date de mise à jour, un lien
vers un formulaire de contact, un plan d'accès, etc.

Logo Zone de bannière et nom du site


Logo
Accueil Produits Contactez-nous A Propos
Bandeau de navigation

Zone de recherche

Corps
Menu

Pied de page
Un exemple du dessin de l’architecture d’un site Web

121
II. Utilisation de du logiciel Photoshop pour dessiner l’architecture d’un site Web

Photoshop fournit des outils permettant de créer et de manipuler les images statiques afin de les
utiliser sur le Web. Vous pouvez diviser une image en tranches, ajouter des liens et du texte HTML,
optimiser les tranches et enregistrer l’image comme page Web.

Dans les leçons précédentes, nous avons vu comment créer des logos, des boutons, et aussi de
traiter les images dans Photoshop. Il s’agira dans cette partie d’agencer toutes ces connaissances
pour en faire un seul dessin : celui de l’architecture d’un site Web.

1- CREATION DE LA BARNNIERE VIA PHOTOSHOP

Après avoir démarré AbodeImageReady CS, effectuez les tâches suivantes.

• Cliquez sur nouveau, puis saisissez bannière dans l’espace de nom


• Dans la palette taille de l’image, cliquez sur l’onglet taille puis choisissez bannière Web
• Dans la palette Contenu du premier calque, cliquez sur Couleur d’arrière-plan.

• Cliquez ensuite sur le bouton « OK » et votre bannière est créé. Vous pouvez également
l’enregistrer sur le format GIF.

2- DESSIN DE L’ARCHITECTURE D’UN SITE WEB

Pour réussir à le faire, il est important de dessiner à la main sur un bout de papier avant
d’utiliser le logiciel Photoshop pour faire le dessin numérique. Pour créer un dessin numérique dans
Photoshop, nous devons toujours créer un nouveau document via le menu fichier de Photoshop.

122
Remarque :

Créez de façon indépendante chaque composant (logo, bannière, bouton, zone de texte,
etc.…) de votre site Web et les enregistrer dans un même dossier.
Après avoir créé chaque composant du site il faudra les rassembler sur un seul dessin et
l’enregistrer. La mise des contenus dans le site se fera dans un chapitre.

Résumé
e°áâÅ°
Contrôle de connaissances
L’Architecture d’un Site Web désigne un dessin permettant à structurer les éléments graphiques d'un
site web afin de traduire, à travers une dimension esthétique, l'identité visuelle de la société ou de
l'organisation.
Dessiner l’architecture d’un site Web, c’est de faire le dessin de tous les composants du site de façon
indépendante et de l’assembler par la suite.

VÉÇàܨÄx wx VÉÇÇt|áátÇvxá
1. Définir architecture d’un site Web
2. Quel est le rôle de l’architecture d’un site Web ?
3. Expliquez le principe de création du dessin de l’architecture d’un site web dans Photoshop
4. Faire sur un papier au moins deux architectures différentes d’un site Web
5. Utiliser le logiciel Photoshop pour réaliser les dessins réalisés à la question 4

123
V{tÑ|àÜxH
Chapitre V : CREATION DE TEXTES AVEC EFFETS

CREATION DE TEXTES AVEC EFFETS

_x†ÉÇ D : Transformation de textes


_x†ÉÇ E: Publication Assistée par Ordinateur (PAO)

124
MODULE2 : INFOGRAPHIE
Chapitre 5 : Création des textes avec effets

Leçon 1 :
TRANSFORMATION DES TEXTES

Pré requis  Connaissances de Photoshop

Objectifs généraux de la leçon

L’élève à la fin de cette leçon devrait être capable de :

 Mettre les différents effets au texte


 Modifier les effets des textes

Leçon 1 :

125
TRANSFORMATION DES TEXTES

INTRODUCTION

Le logiciel Photoshop ne permet pas seulement de traiter, modifier les images, mais il permet
également d’effectuer quelques transformations sur les textes saisies dans l’ordinateur. Dans cette
leçon nous allons voir comment à l’aide de Photoshop, c’est possible d’appliquer les transformations
sur un texte donné. L’objectif premier étant de montrer comment effectuer des effets à des textes
en vue d’une bonne et meilleure présentation dans les sites web.

I. DEFINITION ET SAISIE DE TEXTE DANS PHOTOSHOP

A. DÉFINITION :

Transformer un texte, c’est modifier soit :

• Sa forme,
• Sa police,
• Sa taille,
• Etc….

Exemple : modifier la forme du texte suivant : quel plaisir que de découvrir


Photoshop

B. SAISIE DE TEXTE DANS PHOTOSHOP

Pour saisir le texte de paragraphe :

126
• Utilisez l'une des méthodes suivantes :

(Photoshop) Sélectionnez l'outil Texte horizontal ou Texte vertical.

(ImageReady) Sélectionnez l'outil Texte.

• Utilisez l'une des méthodes suivantes :


 Faites glisser en diagonale pour définir un cadre de sélection pour le texte.
 Maintenez la touche Alt (Windows) ou Option (Mac OS) enfoncée pendant que vous cliquez
ou faites glisser pour afficher la boîte de dialogue Taille du texte de paragraphe. Entrez les
valeurs correspondantes dans les zones Hauteur et Largeur, puis cliquez sur OK.

Remarques :
pour passer du texte horizontal au texte vertical, et inversement, dans ImageReady,
cliquez sur le bouton Modifier l'orientation du texte dans la barre d'options de l'outil
ou choisissez Modifier l'orientation du texte dans le menu de la palette Caractère.

• Sélectionnez les autres options de texte dans la barre d'options, la palette Caractère, la
palette Paragraphe et le sous-menu Calque > Texte (voir les sections Mise en forme des
caractères et Mise en forme des paragraphes).
• Entrez les caractères de votre choix. Pour commencer un nouveau paragraphe, appuyez sur
la touche Entrée (Windows) ou Retour (Mac OS) du clavier alphanumérique. Si vous entrez
un texte trop grand pour la taille du cadre de sélection, l'icône d'excédent apparaît dans le
cadre de sélection.
• (Photoshop) Redimensionnez, faites pivoter ou inclinez le cadre de sélection à votre
convenance.
• (Photoshop) Validez le calque de texte en effectuant l'une des opérations suivantes :

Cliquez sur le bouton de validation dans la barre d'options.


Appuyez sur la touche Entrée du pavé numérique.
Appuyez sur les touches Ctrl+Entrée (Windows) ou Commande+Retour (Mac OS) sur le
clavier.
Sélectionnez un outil dans la palette d'outils, cliquez sur les palettes Calques, Couches,
Tracés, Scripts, Historique ou Styles ou sélectionnez une commande de menu.
Le texte saisi apparaît dans le nouveau calque de texte.

127
II. APPLICATION DES COURBES A UN TEXTE

Pour appliquer les courbes à un texte, plusieurs étapes sont nécessaires pour réussir cette
opération :

Etape N°1 : Ouvrir une nouvelle image.

Ouvrir ou lancez le logiciel Photoshop

Cliquez sur le menu fichier, puis sur nouveau

Entrer les dimensions 300 X 400

Mettre un fond blanc.

Cliquez sur OK

Etape N°2 : Saisi d’un texte

Il s’agit d’inscrire le fichier suivant : Quel plaisir que de découvrir Photoshop

1. Dans la barre d'outils flottante, sélectionner l'outil "Texte"

2. Remarquer qu'automatiquement, la "barre d'options" de l'outil texte s'ouvre sous la


barre des menus.

3. Dans cette barre d'options, et à l'aide de la petite flèche


qui ouvrira un "menu déroulant", faire les sélections, tel qu'indiqué ci-dessous :

4. Toujours dans la barre d'options, vérifier que les icônes à gauche se présentent bien
comme ceci :

5. Toujours dans la barre d'options, cliquer sur l'icône centrale ci-dessous, pour centrer

le texte :

6. Cliquer sur l'image blanche, approximativement au centre, et taper les trois lignes de
texte. Celui-ci prendra la couleur de premier plan

7. Votre image devrait ressembler à ceci : (l'image a été redimensionnée)

128
8. Si vous devez déplacer légèrement le texte, éloignez un peu le pointeur du texte ; il
prendra cette forme :
En tenant le bouton gauche de votre souris enfoncé, vous pourrez déplacer le texte
là où vous le voulez.

Etape N°3 : Déformation du texte :

1. Dans la barre d'outils flottante, sélectionner l'outil "Texte"

2. Dans la barre d'options (sous les menus), et à droite, cliquer sur l'outil "Créer un texte
déformé" Une fenêtre s'ouvrira.

3. À droite de la petite fenêtre "Style", cliqué sur la flèche pour ouvrir le menu déroulant.

4. Sélectionner "Onde".

5. Cliquer sur "OK" pour fermer la fenêtre.

6. Vous devriez obtenir à peu près ceci (l'image a été redimensionnée) :

129
Etape N°4 : Application de l’ombrage

1. Dans la barre des menus, sélectionner "Calque / Style de calque / Ombre portée" (Layer /
Layer Style / Drop Shadow) si votre logiciel est en anglais.

(Si les options ne sont pas accessibles, cliquer sur un autre outil, tel que "Déplacement" par exemple)

2. Dans la fenêtre de dialogue qui s'ouvre, modifier l'opacité à 60 %, tel qu'indiqué sur l'image ci-
dessous :

3. Cliquer sur "OK" pour fermer la boite de

dialogue.

4. Vous devriez obtenir à peu près ceci :

AUTRES POSSIBILITÉS

Si, au point 4 de l'étape 3, vous aviez sélectionné :

130
1. "Montée", vous auriez obtenu ceci :

2. "Arc", vous auriez obtenu ceci :

3. "Renflement", vous auriez obtenu ceci :

Résumé

e°áâÅ°
Transformer un texte, c’est modifier soit :
• Sa forme,
• Sa police,
• Sa taille, Etc….

Le logiciel permet de saisir un texte via l’outil de la palette texte. Les transformations de texte dans
Photoshop se font via l’outil style de la barre d’outils standard. Dans cette palette, on retrouve toutes sortes
de transformation proposé par Photoshop.

131
Contrôle de connaissances
VÉÇàܨÄx wx VÉÇÇt|áátÇvxá
Travail en groupe

1. Définir transformation de texte


2. Expliquez le processus de transformation de texte dans Photoshop
3. Transformez le texte suivant par un arc de cercle dans le logiciel Photoshop :

« Le livre d’informatique, classe de Première A »

gÜtät|Ä xÇ zÜÉâÑx
Exercice1:

Réaliser la transformation du mot « crtv » pour fabriquez le logo de la télévision Camerounaise

Exercice2 :

Fabriquez un logo illustrant le logo de votre lycée, devant servir pour le logo du site Web du lycée.

132
MODULE2 : INFOGRAPHIE
Chapitre 5:Création des textes avec effet

Leçon 2 :
PUBLICATION ASSISTEE PAR ORDINATEUR (PAO) :
CAS DE PUBLISHER 2003, 2007

Pré requis  Connaissances de Microsoft Publisher 2003,2007 Niveau 1

Objectifs généraux de la leçon

L’élève à la fin de cette leçon devrait être capable de :

 Réaliser efficacement les carte de vœux, les cartes de visites,


les faire-part.

Leçon 2 : PUBLICATION ASSISTEE PAR ORDINATEUR (PAO)


CAS DE PUBLISHER 2003, 2007

133
INTRODUCTION

Publisher est un logiciel de publication assisté par ordinateur (PAO) et de mise en page qui
permet de créer des documents illustrés de concevoir de diverses publications qui peuvent marquer
votre vie professionnelle ou familiale. C’est l’univers de la conception des documents graphiques ;

Ses principales fonctions sont la création des cartes de vœux, des diplômes, des calendriers, des
cartes de visites, sites web statiques, etc.

Dans le cadre de cette leçon, nous allons voir comment importer du texte, de l’image, etc. et
nous ne reviendrons plus sur les fonctions des différents outils utilisés pour traiter du texte. Car ils
ont été expliqués dans les classes précédentes.

Nous allons axer notre leçon sur comment créer une carte de visite, un diplôme et un billet
invitation. Nous ne reviendrons plus sur la notion d’impression car il a été vu dans les classes
précédentes.

I. PRESENTATION SOMMAIRE DE PUBLISHER 2007

Pour démarrer Publisher dans Windows XP,

1) Cliquez sur démarrer à gauche sur la barre de tache

2) Choisir tous les programmes

3) Puis Microsoft office

4) Et cliquez sur Microsoft office Publisher 2003

A l’origine, Publisher propose un catalogue de création assisté. Ce catalogue est constitué de


plusieurs compositions qui incluent des modèles. Ce sont les compositions d’impression (cartes de
visites, cartes de vœux, calendriers, etc.), les compositions pour site web et messageries, les
compositions pour les jeux de création (événements, fête, carte personnelles, annonces ; etc.), les
compositions vierges (cartes de chevets, cartes de pliures sur le coté, affiches, bannières, etc.)

Voici l’interface de Microsoft Publisher 2007.

134
II. CARTE D’INVITATION ET DE VISITE

Nous verrons ici la procédure création d’un exemple de carte d’invitation.

1) Démarrer Publisher 2003 ou 2007,

2) Cliquez sur composition pour impression (2003) ou directement sur carte de visite à la palette de
gauche (2007),

3) Cliquez sur carte de visite, faites descendre le curseur, et choisissez la dernière carte.

4) Nous allons effacer tous les zones de texte et créer les notre.

5) Inscrivons le texte de notre invitation.

Nous allons importer des images pour embellir notre carte

6) Cliquons sur le menu insertion puis sur image clipart.

7) Dans le cadre recherche, écrivons fleur puis OK

135
8) Nous cliquons sur la fleur qui nous convient

9) Redimensionnons cette fleur à notre guise

10)Clique droit sur l’image, sélectionnons ordre puis arrière plan

11) Dans le menu fichier, sélectionnons mise en page et un onglet s’affiche.

12) Dans type de composition, choisissons personnalisé

13) Dans largeur entrons 11cm, et 7cm pour hauteur

14) Cliquons sur modifier les copies par page et remplissons à notre convenance

136
III. CARTE DE VOEUX

Nous verrons ici comment créer un exemple de carte de vœux ou le mariage à quatre pages.

1) Démarrer Publisher

2) Cliquez sur composition pour impression

3) Sélectionnons carte de vœux, Puis faire part fiançailles

4) Choisissons fiançailles 2

5) Puis cliquons sur le modèle encadré à motifs

6) Sur la première page, changeons faire part fiançailles en faire part mariage.

NB : il est à noter que ici nous pouvons modifier cette première page à notre guise ; en utilisant les
images que nous avons.

7) Cliquez sur la page 2 et importez les images que vous avez

137
8) Cliquez sur Word art et inscrivez le texte : invitation de Félix et Chantal

9) Dans l’onglet de Word art, faite les modifications de couleur et de forme selon vos préférences.

Dans la page 3, nous allons entrer notre texte d’invitation.

10) Cliquons sur l’icône zone de texte

11) Entrons notre texte

12) Sur la dernière page, modifier selon votre vision.

138
IV. CREATION D’UN DIPLOME

Nous verrons ici comment créer un exemple de diplôme ou de parchemin


1) Démarrer Publisher
2) Cliquez sur composition pour impression
3) Sélectionnons diplôme
4) Puis le modèle entrelacs celtiques
5) Dans la zone de texte attestation de reconnaissance, entrez FEDERARTION INTERNATIONAL
AMATEUR DE SAMBO.
6) Supprimons les notre zones de texte
7) Créez une zone de texte et entrez grand prix du Cameroun
8) Pour toutes les autres modifications (couleurs, positionnement, etc.) vous le ferez en exercice.

139
Résumé

e°áâÅ°
Contrôle de connaissances

Publisher est un logiciel de publication assisté par ordinateur (PAO) et de mise en page qui permet de
créer des documents illustrés de concevoir de diverses publications qui peuvent marquer votre vie
professionnelle ou familiale. C’est l’univers de la conception des documents graphiques ;
A l’origine, Publisher propose un catalogue de création assisté. Ce catalogue est constitué de
plusieurs compositions qui incluent des modèles. Ce sont les compositions d’impression (cartes de
visites, cartes de vœux, calendriers, etc.), les compositions pour site web et messageries, les
compositions pour les jeux de création (événements, fête, carte personnelles, annonces ; etc.), les
compositions vierges (cartes de chevets, cartes de pliures sur le coté, affiches, bannières, etc.)

VÉÇàܨÄx wx VÉÇÇt|áátÇvxá
1. Définir PAO
2. Quel est le rôle d’une PAO.
3. Citez quelques exemples de logiciel de PAO.
4. Peut utiliser une PAO pour saisir un texte ? sinon pourquoi ? si oui pourquoi ?

140
Travail en groupe

gÜtät|Ä xÇ zÜÉâÑx
Exercice1:

Réaliser une carte d’invitation d’une fête de fin d’année dans un logiciel de présentation assisté par
ordinateur.

Exercice2 :

Réaliser une carte de visite dans un logiciel de présentation assisté par ordinateur

Vérifier à ce que le nombre de carte par page soit au moins 10

Imprimer votre carte sur un papier format carton blanc

Enregistrer votre travail dans votre répertoire de travail

141
Chapitre VI : CREATION D’ANIMATIONS

V{tÑ|àÜxI
CREATION D’ANIMATIONS

_x†ÉÇ D : Utilisation d’un logiciel d’animation : cas de GIF


animator
_x†ÉÇ E: Insertion des animations dans une page web

142
MODULE2 : INFOGRAPHIE
Chapitre 6 : Création d’Animation

Leçon 1 :
UTILISATION D’UN LOGICIEL D’ANIMATION :
CAS DE GIF ANIMATOR

Pré requis  Connaissances générales de GIF animator

Objectifs généraux de la leçon

L’élève à la fin de cette leçon devrait être capable de :

 Donner l’utilité de GIF animator


 Créer une animation avec GIF animator
Leçon 1 : UTILISATION D’UN LOGICIEL D’ANIMATION : CAS DE
GIF

143
INTRODUCTION
INTRODUCTION

GIF Animator de Microsoft est un logiciel gratuit qui sert à assembler des images pour en
faire une animation au format GIF (gif animé). L'animation consiste à donner l'illusion d'un
mouvement à l'aide d'une suite d'images. Ces animations sont utilisées dans les pages de sites web.

Avec ce logiciel, Il est également possible d'ouvrir une animation existante pour en comprendre le
fonctionnement.

I. PRESENTATION DU LOGICIEL

L’écran graphique du logiciel GIF animator présenté ci-dessus est constitué de :

- La barre d'outils de GIF animator


Cette barre est constituée de boutons allant de un à quatorze comme l’illustre le schéma suivant.

1. Le bouton " Nouveau "


2. Le bouton " Ouvrir " : pour ouvrir un gif animé existant ou insérer la première image
3. Le bouton " Enregistrer "
4. Le bouton " Insérer " : permet d’ajouter une image dans l’animation
5. Le bouton " Enregistrer sous "
6. Le bouton " Couper " : supprime l’image sélectionnée après l’avoir mise dans la presse papier
7. Le bouton " Copier " : copie l’image dans la presse papier. Utile pour retravailler une image
dans un logiciel de dessin
8. Le bouton " Coller "

144
9. Le bouton " Supprimer " : supprime l’image
10. Le bouton " Tout sélectionner " sélectionne toutes les images de l’animation
11. La " flèche vers le haut " : déplacer l’image sélectionnée plus haut dans l’animation
12. La " flèche vers le bas " : déplacer l’image sélectionnée plus bas dans l’animation
13. La flèche " Play " : permet de voir ce que donne l’animation
14. Le " point d’interrogation " : lire l’aide
- Les zones de travail
Le côté gauche est de l’écran graphique présenté plus haut illustre les différentes zones de
travail. Ces zones sont des espaces sur lesquels se font les montages des animations.
- Les fenêtres (zone de traitement)
Cette zone se situe du côté droit de l’écran graphique de GIF animator. Elle présente les fenêtres
de redimensionnement, de traitement de couleur et de commentaire.

II. CREATION D’UN GIF ANIME

1. Propriétés des images à animer

Les images utilisées pour créer un gif animé doivent :

• être enregistrées au format GIF

• avoir la même dimension (en pixels)

Il peut être pratique de les numéroter pour s'y retrouver plus aisément. On peut les créer avec
n'importe quel logiciel de dessin, même avec Paint.

Exemple de 12 images créées pour un gif animé.

145
2. Créer son GIF animé

Suivez les étapes ci-après pour monter un gif animé :

1 - Lancer le programme GIF animator en cliquant sur l'icône

2 - Ouvrir la dernière image en cliquant sur l'icône " Ouvrir " et en sélectionnant la dernière image
de l'animation.

Remarque :
on commence par la dernière image pour finir par la première.

3 - Insérer les images les unes après les autres en cliquant sur le bouton " Insérer ". Les images
apparaissent dans l'ordre.

146
Remarque :
Il est possible d'utiliser le " glisser / déplacer "entre la fenêtre de l'explorateur et celle de Gif
animator.

4 - Régler la durée d'affichage des images

147
La durée est donnée en centièmes de seconde (1/100 s). Il faut faire des essais.
En théorie, pour avoir une animation très fluide comme dans un dessin animé, il faudrait 24 images
par seconde soit une durée d'affichage de 4 à 5 centièmes de seconde par image.
En fait, on peut choisir une valeur de 10 centièmes et on affine ensuite en fonction de la vitesse
d'animation souhaitée.

Pour appliquer la même durée à toutes les images, cliquer sur l'icône 10 " Tout sélectionner " puis
dans l'onglet " Image " saisir la valeur correspondant à la durée désirée.

On peut mettre des durées différentes pour :

• montrer une accélération dans l'animation

• faire une pause en mettant une valeur plus importante


(200 par exemple fera une pause de 2 s dans l'animation)

• faire un effet de flash en mettant des valeurs plus faibles sur quelques images

5 - Régler les autres paramètres de l'animation

Pour que l'animation se répète continuellement,


dans l'onglet " Animation ", cocher la case " Boucle " et " Répéter indéfiniment ".

148
6 - Enregistrer son GIF animé

Si vous utilisez l'icône " Enregistrer ", l'animation sera enregistrée sous le nom de la dernière image
(la première importée).
Pour donner un nom différent à l'animation, cliquer sur l'icône " Enregistrer sous " et choisir un nom
significatif en rajoutant par exemple ani ou animation dans le nom.

7 - Visualiser son animation

Cliquer sur l'icône " Play " et dans l'aperçu lancer l'animation.

149
L'animation pourra être intégrée sur une page de votre site internet.

Remarque :

En cas d'erreur dans l'ordre des images, il est possible de le modifier en utilisant les flèches "
vers le haut " et " vers le bas " de la barre d'outils après avoir sélectionné l'image à déplacer.

Résumé

e°áâÅ°
Un GIF animator est un logiciel gratuit permettant de monter des animations au format GIF, lesquels
sont très utilisées dans les sites web. Il possède un certains nombres de boutons qui facilite sa
manipulation et impose une certaine configuration aux images à animées. Ces images doivent être
enregistrées sur un format GIF et être tous dimensionner en pixels. L’animation donc le but est
de donner l'illusion d'un mouvement à l'aide d'une suite d'images est montée en fonction de
l’objectif à atteindre.

150
VÉÇàܨÄx wx VÉÇÇt|áátÇvxá
Contrôle de connaissances

Exercices d’application

1. Quel est l’utilité de GIF animator ?


2. Définir animation
3. Donner les parties de l’écran graphique de GIF animator.
4. Donner les caractéristiques des images à animées.
5. Donner les étapes de création d’une animation

XåxÜv|vxá wËtÑÑÄ|vtà|ÉÇ
Exercice1:

Réaliser l’animation d’un ballon qui prend du volume au fur et à mesure et fini par s’exploser.

Exercice2 :

Réaliser une animation dans laquelle on peut observer un enfant qui grandi et devient un vieillard.

Exercice3:

Réaliser une animation dans laquelle le fond est fixe et un élément se déplace.

151
MODULE2 : INFOGRAPHIE
Chapitre 6: Création d’animation

Leçon 2 :
INSERTION DES ANIMATIONS DANS UNE
PAGE WEB

Pré requis  Avoir des connaissances sur les pages Web


 Avoir des connaissances du HTML

Objectifs généraux de la leçon

L’élève à la fin de cette leçon devrait être capable de :

 Insérer les animations dans une page Web

Leçon 2 : INSERTION DES ANIMATIONS DANS UNE PAGE WEB

152
INTRODUCTION
INTRODUCTION

L'animation consiste à donner l'illusion d'un mouvement à l'aide d'une suite d'images. Ces
images peuvent être dessinées, peintes, photographiées, numériques, etc.

L’animation numérique est une technique de simulation de mouvement par ordinateur qui
utilise des « modèles » pour créer automatiquement des suites d’images numériques qui donnent
l’illusion de mouvement.
L’animation dans un site Web a un rôle très important. Elle permet de :
 Égayer les articles, les actualités, bref toutes les informations qui sont supposées alimenter le
site.
 Compléter les informations par les images en mouvement.
 Donner la possibilité aux internautes dans un site web de déduire l’information implicite.
 Mettre en évidence l’esthétique d’une page Web.
Cependant, il existe des méthodes d’insertion des images animées dans une page Web.

I. RAPPEL DE L’INSERTION D’UNE IMAGE DANS UNE PAGE WEB

Quelle est la fameuse balise qui va nous permettre d'insérer une image ? Il s'agit de... <img
/> ! C'est une balise de type orpheline (comme <br />). Cela veut dire qu'on n'a pas besoin de l'écrire
en deux exemplaires comme la plupart des autres balises que nous avons vues jusqu'ici. En effet,
nous n'avons pas besoin de délimiter une portion de texte, nous voulons juste insérer une image à un
endroit précis.

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

src : il permet d'indiquer où se trouve l'image que l'on veut insérer. Vous pouvez soit mettre
un chemin en absolu.

Exemple : http://www.site.com/fleur.png

Soit mettre le chemin en relatif. La syntaxe est la suivante :

<img src="adresse_image/nom_image+extention de l’image" >

Ainsi, si votre image est dans un sous-dossier images vous devrez taper l’exemple suivant.

153
Exemple :src="images/fleur.png"

alt : cela signifie "texte alternatif". On doit toujours indiquer un texte alternatif à l'image, c'est-
à-dire un court texte qui décrit ce que contient l'image. Ce texte sera affiché à la place de
l'image si celle-ci ne peut pas être téléchargée (ça arrive souvent), ou sur les navigateurs de
personnes handicapées (non-voyants) qui ne peuvent malheureusement pas "voir" l'image.
Cela aide aussi les robots des moteurs de recherche pour les recherches d'images. Si l’image à
insérer est une fleur, on pourrait mettre en commentaire l’exemple suivant :

Exemple :alt="Une fleur".

Remarque :
Pour insérer les images dans un paragraphe, le code html doit se trouver
obligatoirement à l'intérieur d'un paragraphe (<p></p>).

Voici un exemple d'insertion d'image :


Code : HTML

Exemple :
<p>
Voici une photo que j'ai prise lors de mes dernières vacances à la montagne
:<br />
<imgsrc="images/montagne.jpg" alt="Photo de montagne" />
</p>

Si l’on souhaite enrichir la balise « img » nous pouvons ajouter les attributs ci-dessous :

Align : qui permet d’aligner l’image. La syntaxe est la suivante align= "valeur"

Width : qui donne la largeur de l’image. La syntaxe est la suivante Width= valeur

Heigth : qui donne la hauteur de l’image. La syntaxe est la suivante Height= valeur

Title : qui lorsqu’on survolé l’image fait apparaitre le titre. La syntaxe est la suivante Title= valeur

La syntaxe générale est la suivante :

154
<img src="adresse_complète_image+nom_image" align="valeur" Width= valeur Height=valeur
title=nom_image>

Exemple :code de l’insertion d’une image dans une page Web

<imgsrc="C:\Documents and Settings\All Users\Documents\Mes images\Échantillons


d'images\Nénuphars.jpg" align="right" width=40% heigth=50% title=nénuphar>

Codes saisies dans un éditeur

Sous un navigateur web

II. INSERTION D’UNE IMAGE ANIMEE DANS UNE PAGE WEB

L’insertion d’une image animée dans une page web suit la même syntaxe que l’insertion d’une
image simple à la seule différence que l’extension de l’image doit être celle d’une image animée
c’est-à-dire .gif

Exemple 1 :
<imgsrc="images/montagne.gif" alt="Photo de montagne" />

Exemple 2 :

<imgsrc="C:\Documents and Settings\All Users\Documents\Mes images\Échantillons


d'images\Nénuphars.gif" align="right" width=40% heigth=50% title=nénuphar>

155
Résumé
e°áâÅ°
Contrôle de Connaissances
L’insertion d’une image dans une page Web se fait à l’aide de la balise <img>. Cette balise prend deux
Exercices d’application
paramètres essentiels tels que : src et alt. Toutes fois, on peut l’enrichir en ajoutant d’autres attribut
à l’exemple de : Title, Witdh, Align…
Pour une image animée, la syntaxe d’insertion est la même, à la seule différence que son extension est
.gif

VÉÇàܨÄx wx VÉÇÇt|áátÇvxá
1. Définir animation et animation numérique
2. Quel est le rôle de l’animation dans une page Web ?
3. Quelle est la balise qui vous permet d’insérer une image ?
4. Quelles sont les attributs obligatoires qui accompagnent cette balise ? donner leur syntaxe
5. Quelles sont les attributs auxiliaires qui accompagnent cette balise ? donner leur syntaxe
6. Quelle est la différence entre l’insertion d’une image simple et une image animée dans une
page Web

XåxÜv|vxá wËtÑÑÄ|vtà|ÉÇ
Exercice1:

Insérer l’image animée de l’exercice 1 de la leçon précédente dans une page Web

Exercice2 :

Insérer deux images animées dans une barrière d’un site internet : l’une à gauche et l’autre à droite

156
Chapitre VII : RETOUCHE D’UNE PHOTO

V{tÑ|àÜxJ
RETOUCHE D’UNE PHOTO

_x†ÉÇ D M Retouche d’une photo : Cas de Photoshop

157
MODULE2 : INFOGRAPHIE
Chapitre 7: Retouche d’une photo

Leçon 1 :
RETOUCHE D’UNE PHOTO : CAS DE
PHOTOSHOP

 Notions sur les outils vus au chapitre 4


Pré requis
 Notions sur la manipulation de
Photoshop

Objectifs généraux de la leçon


L’élève à la fin de cette leçon devrait être capable de :

 Définir la notion de retouche


 truquer une photo
 Identifier une photo truquée
 Donner la procédure d’un montage photo
 Donner la procédure extraction d’une partie de l’image

Leçon 1 : RETOUCHE D’UNE PHOTO

158
INTRODUCTION
INTRODUCTION

La retouche est une procédure qui consiste à apporter des modifications pour améliorer une
image ou photo. Elle permet de supprimer ou ajouter des détails sur une photo, bref la modifier en
fonction de vos attentes .la retouche d’image se fait à partir de certains logiciels appelés logiciels de
retouche d’image, entre autres nous pouvons citer : The Gimp, Photoshop, Microsoft Picture
manager, Paint,…dans le cadre de cette leçon nous utiliserons le logiciel de retouche Photoshop

I. RAPPELS SUR QUELQUES OUTILS DANS PHOTOSHOP

a) Les outils de sélection

Les outils rectangles et ellipses de sélection

Les outils Lasso et Lasso polygonal

L'outil Baguette magique

L’outil recadrage

L’Outil déplacement

Il sert à déplacer une sélection d’un endroit à un autre du calque

b) Les outils de peinture

Les outils Pinceau et Crayon

Les outils gomme

L'outil Dégradé

Les outils correcteurs et tampon de duplication

159
II. QUELQUES OPERATIONS SUR PHOTOSHOP

1. Importation de photos à modifier dans le logiciel

Ouvrir le logiciel sur la barre des menus, faire un clic sur

Puis aller à

Dans la boite de dialogue qui s’ouvre, choisissez le répertoire ou le dossier contenant


vos images

Apres avoir retrouvé votre dossier image, vous faites un double clic pour l’ouvrir, ensuite
vous faites un clic sur l’image de votre choix puis sur ouvrir

160
Voici le résultat de votre procédure d’importation

2. Recadrage d’une photo

Augmentez la taille de la fenêtre du document de manière à insérer un espace autour de la


photo.
Sélectionnez l'outil Recadrage dans la palette d'outils.
Faites glisser le pointeur sur la partie de la photo à conserver.
Si nécessaire, ajustez la taille du rectangle de sélection en faisant glisser

une poignée d'angle ou une poignée latérale.

161
Remarque :
La zone recadrée est celle que vous conserverez
La zone à supprimer qui est la zone sombre autour de la zone recadrée disparaitra
après avoir validé sur Entrée

Lorsque vous êtes satisfait de la taille et de la position du rectangle de recadrage, appuyez


sur la touche Entrée
Voici le résultat de votre procédure de recadrage

3. Trucage et extraction d’une partie de l’image

Truquer une photo c’est ajouter ou enlever à celle –ci des détails pour lui donner une apparence
ou une vision qui n’est pas réalité.

Extraire une partie d’une image revient à combiner certains outils du logiciels, tels que l’outil
sélection, l’outil déplacement…afin d’enlever cette partie de l’image soit en la copiant pour la
positionner ailleurs, soit en l’éliminant définitivement de l’image d’origine.

Pour notre illustration nous choisirons une image représentant des nénuphars avec des fleurs et
à laquelle nous ajouterons des fleurs supplémentaires.

Ouvrez une zone de travail vierge, ensuite importez l’image dans le logiciel

162
Utiliser l’outil de déplacement en faisant un clic-glissé de la photo vers la zone de
travail

Prenez l’outil de sélection ellipse, vous sélectionnez la partie de l’image qui vous intéresse, ici
la fleur

Remarque :
Veuillez toujours à ce qu’il y ait une harmonie entre la partie à extraire et la zone
de destination afin de tromper l’œil car tel est le but

163
Prenez ensuite l’outil de déplacement et déplacez la zone sélectionnée vers la zone de
destination

Vous répétez l’opération plusieurs fois et voici le résultat

4. Fusionner plusieurs photos

Ouvrir le logiciel sur la barre des menus, faire un clic sur

164
Puis aller à Pour insérer une zone de travail
vierge sur laquelle vous allez déposer ou monter toutes vos images importées .Dans la boite
de dialogue qui s’ouvre il vous est donné le choix de donner un nom a votre zone de travail
ou la personnaliser (dimension de votre choix, arrière-plan de votre choix)

Importer vos images

Utiliser l’outil de déplacement en faisant un clic-glissé de la photo de votre choix vers


la zone de travail
Lorsque toutes les photos sont sur la zone de travail, disposez-les à votre guise à partir de la
palette des calques.
ajuster la dimension d’une photo sur la zone de travail en sélectionnant son calque ensuite
aller au menu
Choisissez , des poignées s’affichent sur la photo

165
Pour fusionner enfin vous allez dans le menu vous choisissez

Remarque :
Pour vérifier que la fusion a réussie, regarder dans la palette des calques il ne
reste qu’un calque portant toutes les images

5. Changer l’arrière-plan d’un décor

Changer l’arrière-plan d’un décor revient à modifier son apparence pour cela :

Importer l’image de votre décor dans le logiciel.

Puis aller sur le menu dans la barre des menus


Dans la liste déroulante qui s’ouvre, se trouve une variété d’options .Pour ce qui est de notre
cas nous choisirons l’option ensuite
Dans la fenêtre qui s’ouvre vous avez un aperçu de la nouvelle apparence de votre image
.vous avez la possibilité de valider sur ou d’annuler sur pour recommencer votre
procédure.la fenêtre ci-dessous montre la nouvelle apparence de votre image

166
e°áâÅ°
La retouche est une procédure qui consiste à apporter des modifications pour améliorer une image ou
photo
La zone de travail est l’espace sur lequel on peut faire des manipuler des objets dans le logiciel
Résumé
Importer une image c’est aller la chercher dans un emplacement dans votre ordinateur ensuite
l’emmenerde
Contrôle dans le logiciel
Connaissances
Truquer une photo revient à fausser l’appréciation de celui qui la regarde
Photoshop contient une variété de filtre pour modifier l’apparence de l’arrière-plan d’une photo

VÉÇàܨÄx wx VÉÇÇt|áátÇvxá
1. Quel est l’utilité des outils dans un logiciel de retouche d’image ?
2. Citez quelques outils du logiciel vu dans la leçon et donnez leur importance.
3. Donner la procédure d’importation d’une image dans Photoshop
4. Donner la procédure de fusion d’mage dans Photoshop
5. Quels sont les intérêts de la retouche d’image ?
6. Citez quelques opérations que vous pouvez faire dans un logiciel de retouche
7. Que vous permet de faire l’outil de sélection et de déplacement ?
8. Citer quelques exemples de trucage d’image qu’on peut réaliser avec un logiciel de
retouche

167
XåxÜv|vxá wËtÑÑÄ|vtà|ÉÇ
Exercice 1:
Exercices d’application

• Qu’observez-vous sur ces deux images ?


• Qu’elle est l’opération qui a été faite ?
• Quels outils du logiciel étudié vous permettraient de passer de l’image 1 à l’image2 ?

Exercice 2:

• Que pensez- vous de ces deux images ?


• justifiez votre point de vue en donnant des propositions

168
fâ|àx xà Y|Ç
Exercice 3 :

• Laquelle de ces deux images découle de l’autre ?


• justifiez-vous avec des arguments pertinents

Exercice 4
Faites un montage truqué dans lequel la tête d’un individu A se trouverais sur celle d’un individu B.

Exercice 5
Produisez une image qui serait la fusion de plusieurs autres images

169
`ÉwâÄx F
MODULE III : PROJET INFORMATIQUE

PROJET INFORMATIQUE

V{tÑ|àÜx K : Réalisation et publication d’un site web statique

170
V{tÑ|àÜxK
Chapitre VIII : REALISATION ET PUBLICATION D’UN SITE WEB
STATIQUE

REALISATION ET PUBLICATION D’UN


SITE WEB STATIQUE

_x†ÉÇ D: Réalisation et publication d’un site web statique

171
MODULE3 : PROJET INFORMATIQUE Chapitre 8 : Réalisation et publication d’un
site web statique

Leçon1 : REALISATION ET PUBLICATION D’UN SITE WEB


STATIQUE
Leçon1 :
REALISATION ET PUBLICATION D’UN SITE
WEB STATIQUE

Pré requis  Création d’un fichier HTML


 Insertion d’objets et des liens hypertextes dans
unerequis
Pré page.

Objectifs généraux de la leçon

L’élève à la fin de cette leçon devrait capable de :


 Définir le concept de site web statique
 Lister les étapes de réalisation et publication d’un site web
statique
 Créer un site web statique.

172
INTRODUCTION
INTRODUCTION

Le concept du Web a été mis au point au CERN (Centre Européen de Recherche Nucléaire) en
1991 par une équipe de chercheurs à laquelle appartenaient Tim-Berners LEE, le créateur du concept
d'hyperlien, considéré aujourd'hui comme le père fondateur du Web.
La page de garde de ce chapitre nous représente l’une des pages du site web du ministère de la
fonction publique du Cameroun. On y retrouve sur cette page du texte, des images…
Tout comme nous avons réussi à créer des pages web statiques en insérant des objets et des liens
hypertextes, il sera question dans la présente leçon de créer un site web statique.

I. LA NOTION DE SITE WEB STATIQUE

Site web : Ensemble cohérent de pages web liées entre elles par des liens hypertextes et
organisées autour d’une page centrale appelée page d’accueil. Un site web statique est constitué de
pages web statiques liées entre elles par des liens hypertextes.
HTTP (pour HyperText Transfer Protocol) : Protocole de communication communément
utilisé pour transférer les ressources du Web.
URL (pour Uniform Resource Locator) : pointe sur une ressource. C'est une chaîne de
caractères permettant d'indiquer un protocole de communication et un emplacement pour toute
ressource du Web.
Hyperlien (ou lien) : élément dans une ressource associé à une URL et qui permet d'aller
d'une source à une destination.
Serveur Web : hôte sur lequel fonctionne un serveur HTTP (ou serveur Web). Un serveur
Web héberge les ressources qu'il dessert.
Navigateur Web : logiciel conçu pour accéder aux ressources du Web. Sa fonction de base est
de permettre la consultation des documents HTML disponibles sur les serveurs HTTP.
Page Web (ou page) : Document destiné à être consulté avec un navigateur Web. Une page
Web est toujours constituée d'une ressource centrale (généralement un document HTML) et
d'éventuelles ressources liées automatiquement accédées (typiquement des images).
Editeur HTML (ou éditeur Web) : est un logiciel conçu pour faciliter l'écriture de documents
HTML et de pages Web en général.
Adresse Web ou URL : Adresse d'une page du site prévue pour accueillir les visiteurs.

173
II. PRÉLIMINAIRES POUR LA RÉALISATION ET PUBLICATION D’UN SITE
WEB STATIQUE

A- Architecture d’un site web statique

De manière générale, l’architecture d’un site web statique se présente sous forme d'une
arborescence dont la racine est la page d'accueil :

B- Réalisation d’un site web statique : quelques conseils pratiques

Pour réaliser facilement son site web, il faut :


 faire l’inventaire du contenu des informations du site web,
 regrouper les informations en thème,
 créer des rubriques et sous-rubriques qui seront fonctions des thèmes recensés.
 Créer des pages web en fonction du nombre de rubriques et sous rubriques identifiées.
 Insérer dans le code HTML de la page d’accueil, les liens qui permettent d’atteindre chacune
des pages web du site web.
 Insérer également dans le code HTML de chacun des pages web, un lien qui permet de revenir
à la page d’accueil de site.

Par la suite, il faut :


 Créer des dossiers en fonction du nombre de rubriques.
 Placer dans chaque dossier, toutes pages web, images, sons en rapport avec la rubrique.

174
 Créer un dossier parent dans lequel tous les dossiers des différentes rubriques seront placés.

Exemple : arborescence d’un site web statique

C- Publication d’un site web statique : quelques conseils pratiques

1. Quelques définitions
Publier un site Web C’est le mettre en ligne c'est-à-dire rendre les pages de votre site
disponible sur la toile. On parle encore d’hébergement.
FTP (File Transfert Protocol) : est un protocole permettant de transférer les fichiers
d’un ordinateur à un autre.

2. Processus de mise en ligne d’un site Web


Le répertoire parent contenant votre site sur votre ordinateur n’est visible pour le moment que
sur votre ordinateur. Pour le rendre accessible à tous, il va falloir le mettre en ligne. Pour cela ; il faut
transférer ces fichiers sur un ordinateur qui offre un service d’hébergement Web (HTTP).

Ce service est en général associé à un autre. Comme par exemple, lorsqu’avec un explorateur de
fichiers, on copie un fichier d’un disque dur à une clé USB. Ainsi, le FTP va permettre d’envoyer et
gérer les fichiers sur l’ordinateur hébergement (l’hôte) et le HTTP va permettre de visionner ces
mêmes fichiers avec un navigateur.

175
III. CAS D’APPLICATION : CREATION D’UN SITE WEB STATIQUE

Il s’agit de créer un site permettant de présenter vos activités. Tous les fichiers que vous allez
créer doivent être tous rangés dans un dossier que vous pouvez nommer par exemple MonSite.
Etape1 : création de la page d’accueil.
Cette page contient :
 Un mot de bienvenue
 Une ligne séparatrice
 Une image de votre choix
 Un premier lien présentant « ma photo »
 Un deuxième lien permettant d’atteindre la page : « mon emploi du temps »
 Un troisième lien présentant son espace de travail « mon espace »
Après avoir créé cette page vous pouvez avoir un aperçu similaire à la page ci-dessous :

Voici le code de cette page


<html>
<HEAD> <TITLE> accueil </TITLE> </HEAD>
<body bgcolor="pink">

<font color="blue" face="berlin sans fb demi"><B><I><H3>BIENVENUE DANS


MON SITE... </H3></I></B></font>
<hr size=5 width=70% align=left>
<imgsrc="coucher de soleil.jpg" align=MIDDLE width=250 height=200>

<Ahref="photos.html"><font face="berlin sans fb demi"><B><I><H3>ma


photo</H3></I></B></font></A>

<Ahref="planning.html"><font face="berlin sans fb demi"><B><I><H3>mon


emploi du temps</H3></I></B></font></A>

<Ahref="espace.html"><font face="berlin sans fb demi"><B><I><H3>mon


espace</H3></I></B></font></A>
</body>
</html>

176
Les liens de la page que vous venez de créer ne sont pas encore actifs car les autres pages ne
sont pas encore actif. Pour cela, il faudra créer les autres pages et les enregistrer dans le même
dossier que la page d’accueil.
NB : n’oubliez pas de mettre l’extension .html
Etape 2 : création de la page « ma photo ».
Cette page contient :
 Une phrase présentant la photo à afficher
 Une photo
 Deux liens suivant et précédent permettant d’accéder à la page suivante ou précédente.
Voici un aperçu similaire à ce que vous pourrez obtenir :
Voici le code de cette page

<html>
<head>
<title>mon photo</title></head>

<body BGCOLOR="yellow" face="berlin sans fb


demi">

<b>Bonjour cher internaute, je m'appelle


Babette. cette photo a été faite à
Bertoua...<br>
<imgsrc="SKCB.jpg" align="middle" TITLE="ma
photo" width=250 height=200><p>

<Ahref="planning.html">suivant</A>
<Ahref="accueil.html">précédent</A></B><P>
</body>
</html>

Etape 3 : création de la page « mon emploi du temps ».


Cette page contient :
 L’intitulé : « mon emploi de temps »
 Un tableau de trois lignes et six colonnes présentant votre emploi de temps.
 Deux liens suivant et précédent permettant d’accéder à la page suivante ou précédente.
Voici un aperçu similaire à ce que vous pourrez obtenir :

177
Voici le code de cette page

<html>
<head>
<title>mon planning</title>
</title>
<bodybgcolor="aqua">

<TABLE rules=all border="4" width=70% height=120 cols=5>

<CAPTIONalign=top><H1>Mon emploi du temps</H1></CAPTION>


<TRbgcolor="pink" Valign=bottom>
<TH>horaire</TH>
<TH>lundi</TH>
<TH>mardi</TH>
<TH>mercredi</TH>
<TH>jeudi</TH>
<TH>vendredi</TH>
</TR>
<TR align=center>
<THbgcolor="yellow"> 7h 30 - 9h 30</TH>
<TDbgcolor="red">maths</TD>
<TDbgcolor="red"> sport </TD>
<TDbgcolor="red">svt</TD>
<TDbgcolor="red" >maths</TD>
<TDbgcolor="red"> histoire </TD>

</TR>
<TR align=center>
<THbgcolor="yellow"> 10h 20 - 12h 00</TH>
<TDbgcolor="orange"> français</TD>
<TDbgcolor="orange"> EC</TD>
<TDbgcolor="orange"> géographie </TD>
<TDbgcolor="orange">maths</TD>
<TDbgcolor="orange">chimie</TD>

</TR>

</TABLE>
<br>
<Ahref="espace.html"><B>suivant</B></A><P>
<Ahref="ma photo.html"><B>précédent</B></A>
</body>
</html>

Etape1 : création de la page « mon espace »


En vous appuyant sur le modèles des trois premières pages, vous allez créer une page HTML dans
lequel on retouvera vos contacts téléphoniques, la liste des vos activités hebdomadaires et deux

178
liens ; l’un permettant de revenir à la page d’accueil et l’autre lien permettant de revenir à l’une
des pages que vous avez créé.

e°áâÅ°
Le site webest constitué de plusieurs pages web liées entre elles par des liens hypertextes et
organisées autour d’une page d’accueil.
Un site web statique est constitué de simples fichiers HTML contenant des liens hypertextes.
Résumé
Pour créer un site web, il faut :
Contrôle •decréer
connaissances
chacune des pages du site dans lesquelles on y retrouve texte, images, son …

• insérer des liens hypertextes dans le code html de chacune des pages du site web créé.

• créer des dossiers dans lesquels, les pages web, images seront rangées par rubrique.

• Créer un dossier parent pour contenir l’ensemble des dossiers de notre site.
Pour publier le site ainsi crée, tous les fichiers doivent être transférés vers un autre ordinateur appelé
serveur. Le service FTP permet l’envoi des données vers le serveur le service HTTP va permettre de
visionner ces mêmes fichiers avec un navigateur.

VÉÇàܨÄx wx VÉÇÇt|áátÇvxá
1. Définir : site web, site web statique, HTTP, FTP, hebergement, serveur web, navigateur.

2. Quelles sont les étapes à suivre pour réaliser un site web statique ?

3. Dessiner l’organigramme d’un site web.

4. Quel est le rôle de la page d’accueil ?

5. Quel est le rôle du service FTP ? du service HTTP ?

179
Travail en groupe

gÜtät|Ä xÇ zÜÉâÑx M
Projet :

Il vous est demandé de créer un site web qui présente votre établissement. On doit distinguer sur
votre page d’accueil :
• L’image de votre établissement,
• Le titre des rubriques suivantes : présentation général de l’établissement, les enseignements
dispensés, présentation de votre salle de classe, présentation de vos enseignants,
présentation de votre emploi du temps hebdomadaire, les divers.
Pour se faire, vous procédez comme suite:

- Dessiner l’organigramme de votre site afin de ressortir toutes les pages ou rubriques de votre
site
- Pour chaque page, lister tous les éléments qui doivent apparaitre (textes, images, couleur
arrière-planetc …)
- Créer chacune des pages de votre site en ajoutant tous les éléments que vous avez listé
- Insérer les liens dans les différentes pages de votre site
- Créer un dossier afin de ranger tous les fichiers constitutifs de votre site
- Ouvrez la page d’accueil de votre afin de tester les différents liens insérés dans les pages.

180
REFERENCES BIBLIOGRAPHIQUES

 Informatique (Niveau 6) Classes de première de l’enseignement général et de


l’enseignement technique; Edition 2008 Masseu de Modeste NKUTCHET avec la
Collaboration de Victor NGONO.
 Programmer en langage C cours et exercices corrigés, Claude Delannoy, édition
Eyrolles.
 Le livre d’algorithmique au second cycle littéraire de l’enseignement secondaire
général au Cameroun produit par la promotion 2009-2011
 Le livre d’informatique 2nde et 1ère de l’enseignement général et technique produit par
la promotion 2009-2011
 http:\\www.commentcamarche.net
 http:\\www.helpclic.net
 La PAO (PDF) Bruno Piguet collège Mallarme-sens Novembre 1987
 Internet
 Wikipédia

181
182

Vous aimerez peut-être aussi