Upload
khalilghenimi
View
8
Download
1
Embed Size (px)
DESCRIPTION
Fascicule 3SI-TIC
Citation preview
SOMMAIRE
Chapitre 1 : Les outils de collaboration Fascicule TIC
Page 1
Chapitre 1 : Les outils de collaboration Fascicule TIC
Page 2
I
II
III
IV
Chapitre 1 : Les outils de collaboration Fascicule TIC
Page 3
I. Prsentation En troisime anne, les lves ont utilis surtout le service Web et ils ont exploit
plusieurs techniques de recherche de l'information. Bien que ce service leurs offre un
moyen d'amliorer leurs connaissances et de disposer de ressources considrables
d'information, ces lves ont besoin aujourd'hui d'changer et de partager ce qu'ils
connaissent et ce qu'ils aiment, surtout qu'ils bnficient de diffrents outils multimdia
performants pour satisfaire leurs besoins. Il n'est pas plus agrable et plus motivant que
de pouvoir communiquer et de collaborer avec d'autres lves, de leur tablissement,
d'un autre tablissement ou mme d'un autre pays et d'changer des images, des sons ou
des squences vido et a devient plus impressionnant lorsqu'ils peuvent se voir
directement par le biais de moyens audio-visuels simples disponibles dans leurs
laboratoires d'informatique.
Dans ce chapitre, nous allons aborder une autre dimension de l'utilisation des TIC
travers des applications dans le rseau local ou travers l'utilisation des outils de
collaborations, forum et visioconfrence par le biais de l'Internet.
II. Applications dans un rseau local Pour amliorer leurs pratiques pdagogiques, les enseignants font appel plusieurs
logiciels de gestion et de travail en rseau, permettant d'assurer un cours interactif. En
plus de la fonctionnalit d'enseignement, ces logiciels permettent de :
superviser la classe et suivre les travaux des lves, contrler l'accs certains sites ou certaines applications et donnes, distribuer et rcuprer des documents, crer et raliser des valuations.
Ces fonctionnalits sont permises celui qui utilise le poste configur en mode
administrateur, qui est gnralement l'enseignant.
Dans la suite, nous allons nous intresser l'utilisation de tels logiciels pour
consolider le travail collaboratif en classe, en exploitant le logiciel disponible dans le
laboratoire d'informatique.
Activit 1 On se propose de crer des petites prsentations sur un thme donn, en classe ou
la maison, et les prsenter aux autres lves.
Droulement : Le groupe sera rparti en sous-groupes de trois 5 lves, Chaque groupe d'lves sera charg de prparer une prsentation de quelques,
pages sur un thme propos par eux-mmes ou par leur enseignant,
Ensuite, un membre de chaque groupe prsentera, partir de son poste, le travail de son groupe au reste des lves.
Activit 2 Cette activit consiste faire des recherches sur Internet pour un thme donn,
puis un lve prsentera aux autres la dmarche utilise pour trouver les informations
demandes par l'enseignant.
Chapitre 1 : Les outils de collaboration Fascicule TIC
Page 4
Droulement : Les lves font la recherche d'une faon individuelle, Le premier lve qui trouve l'information, fait signe son enseignant qui
bloquera les postes des autres lves,
Ensuite, cet lve prsentera, partir de son poste, la dmarche qui lui a permis de retrouver l'information recherche.
N. B. : Cette activit peut tre rpte autant de fois que cela est possible selon la vitesse
de recherche et l'efficacit des dmarches utilises par les lves et suivant la nature
d'informations demandes (textes, images ou vidos).
III. Les forums Activit 3
a. Quels sont les services de communications offerts par Internet ?
b. Quels sont ceux qui assurent une communication en mode asynchrone (en
diffr) ?
1. Qu'est ce qu'un forum ? Les forums ou groupes de discussions (Newsgroups en anglais) dsignent des
lieux lectroniques dchange de messages et de discussions, organiss gnralement par thmes. Ils se distinguent des autres systmes de discussion par le fait que les
discussions sont asynchrones, les messages lectroniques sont archivs sur des sites
Internet.
2. Principes d'un forum L'administrateur d'un forum, appel modrateur, propose un thme de
discussion et d'enrichissement de connaissances.
Les internautes intresss par le thme en cours de discussion, peuvent envoyer des informations, poser des questions ou rpondre aux ceux proposes.
Figure I.1 : Exemple de thmes proposs par un forum
Chapitre 1 : Les outils de collaboration Fascicule TIC
Page 5
Pour certains forums, un internaute ne peut participer qu'aprs avoir faire une inscription (figure I.2) et qu'il soit accept par le modrateur du forum.
Faute d'irresponsabilit et de manque de srieux, un message peut tre supprim par le modrateur ou ne pas tre dit et le participant peut tre exclu du forum.
Le service associ aux forums est le USENET, le protocole utilis au dessus de TCP/IP est le NNTP.
Les forums peuvent permettre une organisation de diffuser assez largement des informations dans un domaine o elle a autorit
Figure I.2 : Exemple d'enregistrement un forum
Figure I.3 : Exemple de rgles respecter
Chapitre 1 : Les outils de collaboration Fascicule TIC
Page 6
Application 1
a. Crer un forum en utilisant un site permettant de crer des forums gratuitement.
b. Donner des permissions de participation quelques amis de votre classe.
Application 2
Rechercher des forums vocation ducative sur Internet et y participez.
Figure I.4 : Exemple de sites permettant la cration gratuite d'un forum
Figure I.5 : Exemple de forums
Chapitre 1 : Les outils de collaboration Fascicule TIC
Page 7
IV. La visioconfrence Activit 4
Quels sont les outils permettant de faire des conversations synchrones (en temps
rel) ?
Droulement :
Il existe divers outils de communication synchrone, nous citons par exemple la
tlphonie sur Internet, le chat, la visioconfrence.
1. Qu'est ce que la visioconfrence ? La visioconfrence est une technologie s'articulant sur l'audiovisuel et la
tlcommunication. Elle permet des personnes loignes de communiquer, de
s'changer des images et du son, de se voir entre elles et de s'inter-ragir, en temps rel.
2. Avantages de la visioconfrence La visioconfrence offre plusieurs avantage, parmi les quels nous pouvons citer :
L'conomie de temps. L'conomie d'argent. L'largissement du nombre de participants. L'accroissement des frquences de runions.
Dans la littrature, on trouve parfois le terme vidoconfrence au lieu du terme visioconfrence. Il s'agit en fait de la traduction franaise de l'anglais
videoconferencing, mais il s'agit en fait strictement de la mme notion.
Si les dispositifs sont relis des systmes informatiques, on peut aussi accompagner la confrence de squences de travail coopratif (messagerie
lectronique synchrone, partage d'applications informatiques, transfert de fichiers
synchrone, etc.)
3. Modes d'utilisation de la visioconfrence Il y a trois principaux modes d'utiliser la visioconfrence :
a. La visioconfrence en point point : Ce mode met en relation seulement deux
sites. Sur chaque site on peut trouver une seule personne ou un groupe de
personnes.
b. La visioconfrence en multipoint : Ce mode permet d'interconnecter au moins 3
sites. Sur chaque site on peut trouver une ou plusieurs personnes. Ce mode
ncessite l'utilisation d'un pont qui gre le multipoint.
c. La visioconfrence en mode broadcast (mode diffus) : ce mode fait rfrence
une communication point multipoint o un site, source de l'information, diffuse
un message vers les autres sites, qui peuvent ventuellement interagir et poser des
questions.
Les visioconfrences en mode broadcast sont, par exemple, utiliss dans plusieurs
domaines tels que : le tlenseignement, la tlmdecine, pour les stages d'entreprise
ou lorsqu'un responsable dsire s'adresser au personnel d'une succursale de son
entreprise.
Chapitre 1 : Les outils de collaboration Fascicule TIC
Page 8
4. Types de la visioconfrence a) Visioconfrence par Rseaux Numriques Intgration de services (RNIS) :
Ce type est utilis depuis l'apparition de la visioconfrence dans les annes 80, les
donnes sont numrises et compresses sur chaque site, puis transmises puis
dcodes et restitues.
b) La visioconfrence par Internet : Au milieu des annes 1990, le dveloppement de la micro-informatique a permis de "populariser"' les visioconfrences entre
deux micro-ordinateurs, ou plus, connects par Internet. Ce type de
visioconfrence est trs conomique mais de moindre qualit. Beaucoup
d'application sont bases sur la visioconfrence par Internet, par exemple : la Tl-
Ingnierie, l'apprentissage distance, la diffusion de sminaires et confrences, la
confrence personnelle, les runions de travail, etc.
c) Les visioconfrences hybrides : Un micro-ordinateur muni d'une carte approprie peut assurer l'interaction entre un ou plusieurs sites de visioconfrence utilisant les
rseaux numriques (RNIS par exemple) et d'autres micro-ordinateurs quips de
microphones et de camras (ou Webcam) connects au premier ordinateur par
rseau IP (Intranet ou Internet).
d) La visioconfrence par ATM : L'ATM (Asynchronous Transfer Mode) est une technologie de transfert de donnes trs large bande intgrant textes, images,
sons et vido.
e) La visioconfrence par satellite : C'est une visioconfrence radiodiffuse par satellite. C'est en fait la tlvision interactive entre personnes distantes ou groupes
de personnes. Vu son important dbit, elle est d'excellente qualit, mais trs
coteuse.
Figure I.6 : Architecture gnrale de la visioconfrence hybride
Chapitre 1 : Les outils de collaboration Fascicule TIC
Page 9
5. Outils matriels et logiciels Outils matriels :
a) Cas d'une connexion utilisant les rseaux RNIS : Dans ce cas on utilise des outils et des lieux spciaux, tels que les "meubles
mobiles de visioconfrence" (figure I.8) ou les "studios de visioconfrence" (figure
I.9).
A chaque extrmit de la liaison se trouve :
Un appareil de visioconfrence. Un tlviseur ou un vido projecteur. Un ou plusieurs micro-ordinateurs quips de cartes rseau. Un visualiseur (camra pour documents). Une ou plusieurs camras fixes ou montes sur tourelle tlcommande. Un ou plusieurs microphones. Un CODEC (codeur/dcodeur). Un ou plusieurs moniteurs vido pour reproduire les images et les sons reus.
UN CODEC est un dispositif assurant : Les fonctions de conversion des signaux analogiques dlivrs par les
priphriques (micro et camras) utiliss par les rseaux et vice-versa.
La compression et la dcompression des informations pour tre transportes sur une ligne bas dbit.
Figure I.7 : Exemple d'appareil de visioconfrence
Figure I.8 : Exemples de meubles de visioconfrence
Chapitre 1 : Les outils de collaboration Fascicule TIC
Page 10
b) Cas d'une connexion par Internet Dans ce cas, chaque extrmit, on trouve :
une connexion Internet, une camra numrique ou une Webcam mettre sur l'cran de chaque
participant actif,
un microphone.
Outils logiciels : Outre le matriel ncessaire, il faut disposer d'un logiciel grant la
visioconfrence. Le tableau ci-dessous prsente quelques logiciels et les plates-formes
sur lesquelles sont utiliss :
Produit Plate-forme licence
CU-SeeMe Windows /MacOs Gratuite
IVS Linux Gratuite
FreeVue Windows Gratuite
Network Vido Windows Gratuite
PictureWindow Windows Payante
ShowMe Windows Payante
VidoVu Windows Payante
NetMeeting Windows Gratuite
Gnomemeeting MacOS/ Linux Gratuite
Figure I.9 : Exemples de salle de visioconfrence
Figure I.10 : Exemple de visioconfrence utilisant Internet et une Webcam
Chapitre 1 : Les outils de collaboration Fascicule TIC
Page 11
Application 3
En utilisant deux Webcams et le rseau Internet, faites la simulation d'une
visioconfrence entre deux groupes d'lves dans le mme laboratoire, ou entre deux
laboratoires de votre tablissement si c'est possible.
Chapitre 1 : Les outils de collaboration Fascicule TIC
Page 12
EXERCICES
Exercice 1
Lors de l'utilisation d'un logiciel de gestion de rseau, un lve travaillant sur un
poste configur comme client, peut-il :
bloquer les claviers des autres lves ?
exposer son travail aux autres lves ?
Exercice 2
Un internaute participant un forum peut-il :
envoyer un document multimdia ? Justifier votre rponse.
Demander des informations sur n'importe quel thme qui le proccupe ?
Justifier votre rponse.
Exercice 3
Un internaute peut-il participer n'importe quel forum ? Justifier votre rponse.
Exercice 4
Comparer les deux services d'Internet, le Chatting et le forum.
Exercice 5
Rpondre par (V) si la proposition est correcte et par (F) dans le cas contraire.
Le protocole utilis dans le service forum est :
FTP HTTP NNTP
Exercice 6
Quel est le nombre minimum de site participant, pour pouvoir parler d'une
visioconfrence en mode multipoints ? Justifier votre rponse.
Exercice 7
Les participants une visioconfrence, ont-ils la possibilit de s'changer des
messages ? Justifier votre rponse.
Exercice 8
1. Les participants une visioconfrence, ont-ils la possibilit de s'changer des messages ? Justifier votre rponse.
2. Dans une visioconfrence en mode broadcast, les participants qui suivent la diffusion, peuvent-ils intervenir ou poser des questions ? Justifier votre rponse.
Exercice 9
Dans le cas de l'utilisation du rseau Internet et des Webcams, qu'el est le
composant qui remplace le CODEC ? Justifier votre rponse.
Chapitre 2 : Les animations Fascicule TIC
Page 13
Chapitre 2 : Les animations Fascicule TIC
Page 14
I
II
III
IV
V
VI
VII
VIII
IX
X
Chapitre 2 : Les animations Fascicule TIC
Page 15
I. Introduction On trouve souvent dans les pages Web des lments anims qui ont subi un
mouvement et/ou une dformation. Ces lments sont gnralement dorigines graphiques vectorielles.
Un logiciel crateur danimations pour le Web est une application qui permet de crer une animation pour quelle soit intgre dans une page Web. Les animations cres par ces logiciels sont gnralement sous formats dimages vectorielles. Un logiciel danimation permet aussi de crer une interactivit avec lanimation en utilisant des boutons qui peuvent tre associes des actions et des vnements.
Il existe plusieurs logiciels crateurs danimations orients Web comme Macromedia Flash, SWiSHmax, flax, etc. Dans ce cours on sintressera au Macromedia Flash version 8.
II. Prsentation de linterface de Flash Activit 1 Lancer le logiciel flash puis dcrire la fentre de son interface.
Chapitre 2 : Les animations Fascicule TIC
Page 16
Figure II.1 : Prsentation de linterface du Macromedia Flash
LGENDE
1 La barre des menus 7 La boite outils
2 La barre doutils principale 8 La zone du travail
3 Les panneaux affichs 9 Le calque actif
4 Le scnario 10 La tte de lecture
5 Le document 11 La barre ddition
6 Linspecteur des proprits 12 La ligne du temps
1. La scne La scne est la zone rectangulaire dans laquelle vous placez les objets animer
(images vectorielles, zones de texte, boutons, graphiques bitmap imports, clips vido,
etc.) lors de la cration de documents Flash.
2. Le Scnario Le scnario organise et contrle le contenu d'un document au fil du temps par des
calques. Tout comme les films, les documents Flash divisent les priodes de temps en
images.
Pour masquer le scnario, il suffit de cliquer dessus. En plus des calques, le scnario affiche la ligne de temps, la cadence, lindice de
limage courante, etc.
Il est possible de dvelopper ou de rduire les panneaux activs avec les flches noires existant gauche du titre de chaque panneau.
III. lments daffichage Le document relatif une squence doit comporter des objets "Textes, Formes,
Symboles, etc.". Pour faciliter linsertion dun objet, on doit afficher : La rgle, les guides, la grille, de mme, il est possible de grer ces objets en exploitant les panneaux.
1. La rgle Pour afficher ou masquer les rgles :
Activer le menu Affichage, Choisir la commande rgles.
2. La grille Pour paramtrer la grille :
Activer le menu Affichage, Choisir le groupe de commandes Grille, Choisir la commande Modifier la grille, Choisir les paramtres ncessaires et confirmer.
Chapitre 2 : Les animations Fascicule TIC
Page 17
Figure II.2 : La dfinition des proprits de la grille
3. Les panneaux Flash propose plusieurs possibilits pour personnaliser l'espace de travail en
fonction des besoins. Les panneaux et l'inspecteur des proprits permettent d'afficher,
d'organiser et de modifier les mdias et d'autres lments actifs, ainsi que leurs attributs.
L'inspecteur des proprits se modifie en fonction de l'outil ou de l'lment actif
avec lequel vous travaillez et il vous permet d'accder rapidement aux fonctions
frquemment utilises.
Erreur ! Rfrence de lien hypertexte non valide. Activer le menu fentre, Choisir le nom du panneau souhait.
Erreur ! Rfrence de lien hypertexte non valide. Afficher le menu contextuel de la barre de titre du panneau, Choisir la commande Fermer le groupe de panneaux.
Dans le tableau ci-dessous vous trouvez les rles des panneaux frquemment
utiliss
Panneau Rle
Info Afficher et modifier les dimensions et les coordonnes de llment slectionn
Transformer Modifier les dimensions, pivoter et incliner llment slectionn
Mlangeur Afficher et modifier les couleurs, le type de dgrad, et le paramtre Alpha
de llment slectionn.
Nuancier Affiche la palette des couleurs afin den choisir une couleur pour lappliquer llment slectionn.
Aligner Afficher et changer lalignement de llment actif.
Proprits Afficher et modifier les proprits de llment slectionn ou actif.
Bibliothque Afficher et accder aux lments dj mis dans la bibliothque (Symbole,
Son, Image bmp)
Actions Permet dassocier une Action un lment de lanimation
Squences Permet de grer les squences de votre animation.
Historique Permet dafficher les tches dj effectues.
Chapitre 2 : Les animations Fascicule TIC
Page 18
Il est possible de grouper plusieurs panneaux ensemble. Les panneaux Historique et squence sont accessibles via le menu Fentre, puis la
commande Autre panneaux
Le panneau Bibliothque commune comporte des objets prts lusage "Boutons, clips, etc."
IV. Les lments dune animation flash Activit 2
A partir de l'imprime cran suivant, dterminer les lments qui forment
lanimation active :
Figure II.3 : Les lments dune animation
Solution Le nom de lanimation courante est "activit2" La squence affiche est "sq roue" Cette squence comporte les calques "Roue" "Ombre" et "Aplan" Daprs le scnario, chacun des trois calques comporte 30 images et limage
courante est celle n1 du calque "Aplan"
Constatation Une animation flash doit comporter au moins une squence, de mme, une
squence doit comporter au moins un calque, qui doit comporter au moins une image et
une image doit avoir un contenu (forme, texte, symbole, son, image bmp).
Chapitre 2 : Les animations Fascicule TIC
Page 19
1. Les proprits du document Activit 3
a. Crer une nouvelle animation. b. Changer sa taille (550x400), son arrire plan (gris) et lui appliquer une vitesse de
12 ips (images par secondes).
Solution Pour changer les paramtres du document :
Activer le menu Modification, Choisir la commande Document , Saisir les paramtres convenables
Comme les montre limage suivante :
Figure II.4 : Les proprits dun document
Constatations : A laide de cette boite de dialogue il est possible de : Changer lunit de la rgle. Modifier la vitesse ou la cadence qui sexprime en images/seconde (ips). Choisir une couleur darrire plan. Choisir des dimensions personnalises. Attribuer un titre au document. Etc.
2. Les squences Activit 4
a. Crer un nouveau document flash.
b. Ajouter deux squences votre animation courante.
c. Renommer les squences respectivement par "Un", "Deux" et "Trois"
d. Modifier leur ordre "Trois", "Deux" et "Un".
e. Supprimer la squence "deux".
Chapitre 2 : Les animations Fascicule TIC
Page 20
Solution Pour ajouter une squence :
Activer le menu Insertion, Choisir la commande Squence, Pour renommer, dplacer ou supprimer une squence : Drouler le menu Fentre, Choisir le groupe Autres panneaux, Slectionner la commande Squence, Effectuer les oprations ncessaires.
Figure II.5 : Le panneau Squence
Constatations : Pour renommer une squence il suffit de cliquer 2 fois sur son nom dans le
panneau squence puis saisir le nouveau nom.
Pour dplacer une squence il suffit de maintenir la souris clique l'icne de la squence, tout en la dplaant vers la position convenable.
Les trois boutons de la barre dtat du panneau squence permettent respectivement de dupliquer, ajouter ou supprimer une squence.
Pour se dplacer dune squence une autre, on peut utiliser le bouton Modifie la squence qui existe dans la barre scnario.
Figure II.6 : La liste des squences
3. Les calques Activit 5
a. Dans la squence "Trois" cre dans l'activit 4, insrer deux calques,
b. Renommer les trois calques respectivement "Cun", "Cdeux" et "Ctrois",
c. Supprimer "Cun",
d. Verrouiller "Cdeux",
e. Masquer "Ctrois".
Chapitre 2 : Les animations Fascicule TIC
Page 21
Solution
Figure II.7 : Les calques du scnario Trois
Constatations : Pour insrer un calque :
Activer le menu Insertion, Slectionner le groupe Scnario, Choisir la sous commande Calque. Pour changer les proprits dun calque : Activer le menu Modification, Slectionner le groupe Scnario, Choisir la commande Proprits du Calque, Apporter les modifications ncessaires. Pour supprimer un calque : Activer le calque supprimer Cliquer sur licne de la corbeille qui existe dans le scnario.
On peut dplacer un calque laide dun glissement par la souris. Il est impossible de modifier le contenu dun calque masqu ou verrouill.
4. Les images Activit 6
A partir du scnario suivant, dduire les diffrents types dimages utilises.
Figure II.8 : Les diffrents types dimages
Chapitre 2 : Les animations Fascicule TIC
Page 22
Solution On distingue 5 types dimages Les images cls : Une image-cl est indique par un point noir ; exemple les
images n1, 2, 15,29 et 30 du calque Roue.
Les images cls vides : Une image cl vide est indique par un point creux ; exemple limage n1 du Calque4
Les images vides : Une image vide est caractrise par une couleur blanche sans aucun contenu ; exemple les images du n2 au n30 du Calque4.
Les images copies : toute image en gris est une copie de limage prcdente ; exemple : les images du n2 au n 30 du calque APlan.
Les images calcules : Lors dune interpolation, il est ncessaire de dfinir uniquement les images cls qui reprsentent le dbut et la fin de linterpolation ; les autres images qui se trouvent au milieu sont calcules suite des commandes
de calcul mathmatique ; exemple : les images du n2 au n14 du calque
Ombre.
Les images de couleur (violet) du calque "Roue" ont subi une interpolation de mouvement.
Les images de couleur (vert) du calque "Ombre" ont subi une interpolation de forme.
5. Utilisation d'images dans le scnario Une image-cl est une image dans laquelle se dfinit des changements de
proprits d'un objet, ou dans laquelle vous incluez du code Action Script afin de
contrler un aspect du document. Une image cl vide est une image qui est prte
recevoir un contenu
Pour insrer une image : Choisir l'emplacement de l'insertion sur le scnario, Activer le menu Insertion, Slectionner le groupe Scnario, Choisir la commande Image ou image cl, ou image Cl vide.
Pour supprimer une image (Cl vide) Choisir dans le scnario limage supprimer, Activer le menu Edition, Slectionner le groupe Scnario, Choisir la commande Supprimer les images.
Pour supprimer une image cl Choisir dans le scnario limage supprimer, Activer le menu Modification, Slectionner le groupe Scnario, Choisir la commande Supprimer l'image cl.
Chapitre 2 : Les animations Fascicule TIC
Page 23
La commande Effacer les images permet de remplacer les images slectionnes par
des images vides alors que la commande Supprimer les images permet de les enlever
compltement de la ligne de temps.
V. Les formes Activit 7
a. Dessiner un cercle de remplissage bleu et de contour noir,
b. Modifier sa couleur de remplissage en rouge, et sa couleur de contour en bleu,
c. Modifier sa taille L=100 et H=100 et ses coordonnes X= 50 et Y= 50,
d. Slectionner son contour et le dplacer au coordonnes X=250 et Y=50 puis le
remplir par une couleur verte,
e. Appliquer au disque vert, une transformation de 150% aux dimensions et une
inclinaison de 60par rapport la verticale.
Solution
Figure II.9 : La manipulation des formes
Constatations : Il est possible de changer les couleurs de la forme (contour et/ou remplissage)
soit l'aide de la boite outils, soit avec le panneau des proprits, soit avec le
panneau Couleur.
Il est possible de modifier les coordonnes et les dimensions dune forme soit avec le panneau des proprits, soit avec le panneau Info.
Toute forme est caractrise par un contour et un remplissage qui peuvent tre spars l'un de l'autre.
La transformation d'une forme est possible soit avec le panneau Transformer, soit avec la boite outils ou mme avec la commande Transformer du menu
modification.
Pour slectionner un remplissage, utiliser l'outil slection puis cliquer sur le remplissage ; de mme pour le contour ; mais pour slectionner les deux
effectuer un double clic sur le remplissage.
Lorsque deux formes se superposent ; la forme suprieure mange la partie commune avec la forme infrieure.
VI. Les groupes Activit 8
a. Crer trois formes, un rectangle, une ellipse un triangle
Chapitre 2 : Les animations Fascicule TIC
Page 24
b. Transformer chaque forme (Contour et remplissage) en un groupe.
c. Superposer les trois formes en mettant le rectangle au premier plan, le triangle au
deuxime plan et l'ellipse au dernier plan.
Solution Pour grouper des formes :
Slectionner les formes grouper, Activer le menu Modification, Choisir la commande Grouper.
Figure II. 10 : La cration des groupes
Constatations : Pour viter le problme de superposition des formes ; Il est possible de grouper
le contour et le remplissage des formes.
Il est possible d'associer un groupe avec d'autres groupes ou d'autres formes. Il est possible de changer l'ordre des groupes superposs en utilisant la
commande Rorganisation du menu Modification.
Il est possible de verrouiller un groupe contre les modifications en utilisant la commande Verrouiller du menu Modification.
Il est possible de dissocier un groupe en des sous groupes ou en des formes, en utilisant La commande Dissocier du menu modifications.
VII. Les textes Activit 9
a. crire le texte "Animation"
b. Appliquer les proprits suivantes :
Police Couleur Style Taille Espacement Monotype Corsiva Bleu Gras 96 10
c. Sparer ce texte.
d. Dplacer les lettres de ce texte.
e. Convertir ces lettres en des formes.
Chapitre 2 : Les animations Fascicule TIC
Page 25
Solution tant donn qu'un texte est considr comme un groupe, pour sparer ses caractres :
Slectionner le texte sparer, Activer le menu Modification, Choisir la commande Sparer.
N. B. : Pour convertir les caractres en formes, il suffit de leurs appliquer une deuxime
sparation, comme l'indique la figure suivante :
Figure : II.11 La manipulation des textes
VIII. Limportation des mdias Avec Flash vous pouvez insrer des mdias externes une animation, ces mdias
peuvent tre des fichiers sonores, des images bitmap, des squences vido, etc.
Chapitre 2 : Les animations Fascicule TIC
Page 26
Activit10 Crer une animation comportant une squence de deux calques forms chacun de
10 images.
a. Le 1er calque comporte une image bitmap qui couvrira le document de la scne.
b. Le 2me calque comporte un fichier sonore.
Solution Pour importer une image Bmp (bitmap), un fichier sonore ou un autre mdia :
Choisir l'emplacement de l'insertion du mdia (Calque et image), Activer le menu Fichier, Choisir le groupe de commandes Importer, Choisir la commande Importer dans la bibliothque Slectionner le mdia importer Glisser, partir de la bibliothque, le mdia vers la scne.
Figure II.12 : Limportation dune image bitmap et dun fichier sonore
Constatations :
L'importation d'un mdia consiste l'envoyer la bibliothque, pour en exploiter des copies ultrieurement en tant qu'occurrences sur la scne.
Il est possible d'exploiter l'inspecteur des proprits pour dfinir les paramtres de lecture du fichier audio insr dans l'animation.
Chapitre 2 : Les animations Fascicule TIC
Page 27
Figure II.13 : La bibliothque de l'animation, comportant les deux mdias imports
IX. Les symboles graphiques Les objets que vous pouvez insrer une animation Flash peuvent tre des
formes, des groupes, des textes, des mdias etc. Mais il arrive souvent qu'une animation
utilise le mme objet plusieurs fois, dans ce cas, vous pouvez l'envoyer la bibliothque
de l'animation comme tant un graphique, un bouton, un mdia ou un clip et utiliser
autant de fois que vous avez besoin des copies de ce dernier (occurrences).
Activit 11
Crer un symbole graphique nomm case reprsentant un carr sans remplissage
et de contour noir.
Solution
Figure II. 14 : La cration dun graphique
Chapitre 2 : Les animations Fascicule TIC
Page 28
Pour crer un symbole graphique il faut :
Activer le menu Insertion Slectionner la commande Nouveau symbole Dans la boite de dialogue "Crer un symbole", choisir le nom et le
comportement (graphique)
Dessiner le graphique
Constatation Une fois le symbole graphique est dessin, il sera stock dans la bibliothque.
X. Les animations Avec Flash vous pouvez avoir deux types d'animations :
les animations interpoles. les animations image par image
Dans ce qui suit on va se limiter aux animations interpoles.
1. L'interpolation de forme Activit 12
On se propose de crer une animation nomme interpolation de forme dans
laquelle il y aura la transformation d'un pentagone vers une toile de cinq cots et en
respectant les tapes suivantes :
a. Utiliser deux calques nomms "Morphing" et "Titre".
b. Dans le calque nomm "Titre", saisir le titre "Interpolation de forme" qui doit
s'afficher de l'image 1 jusqu'au l'image 40.
c. Dans l'image n1 du calque nomm "Morphing", dessiner un pentagone Bleu sans
contour, de largeur = 100 et de hauteur = 100, de coordonnes X=0 et Y=0.
d. Dans l'image n40 du calque nomm "Morphing", dessiner une toile Rouge sans
contour, de largeur = 200 et de hauteur = 200, de coordonnes X=300 et Y=300 et
avec une inclinaison de 60.
e. Dans l'image n1 du calque nomm "Morphing", activer l'inspecteur de proprits
et appliquer une interpolation de forme.
N. B. : Pour dessiner un polygone ou une toile, utiliser l'inspecteur de proprits de
l'outil rectangle.
Solution
Chapitre 2 : Les animations Fascicule TIC
Page 29
Figure II. 15 : Le scnario de lanimation comportant une interpolation de forme
Constatations : Les images d'interpolation de forme "Morphing" sont toujours colores en vert
dans la ligne de temps du scnario.
Lors d'une interpolation de forme les images intermdiaires seront calcules et non dessines avec la boite outils.
L'interpolation de forme s'applique uniquement aux formes. Pour appliquer un morphing un texte ou un groupe il faut le convertir en forme.
2. L'Interpolation de mouvement Activit 13
On se propose de crer une animation nomme interpolation de Mouvement
dans laquelle il y aura le dplacement d'un symbole d'une position une autre tout en
respectant les tapes suivantes :
a. Crer un graphique nomm Etoile qui comporte une toile de 3 cots et sans
contour.
b. Dans un calque nomm "Titre", saisir le titre "Interpolation de Mouvement" qui
doit s'afficher jusqu' l'image 40.
c. Dans l'image n1 du calque nomm "Mouvement", insrer, partir de la
bibliothque, une occurrence du graphique "Etoile" en lui attribuant une largeur
de 50 et une hauteur de 50, et les coordonnes X=0 et Y=0.
d. Dans l'image n40 du calque nomm "Mouvement", insrer une occurrence du
symbole "Etoile" en lui attribuant la mme largeur et la mme longueur et les
coordonnes X=450 et Y=300 et un angle de rotation de 90.
e. Dans l'image n1 du calque nomm "Mouvement" ; activer l'inspecteur de
proprits et appliquer une interpolation de mouvement.
Solution
Pour raliser une interpolation de mouvement
Insrer un graphique dans limage de dbut de linterpolation Insrer le mme graphique dans limage de fin de linterpolation. Slectionner limage de dpart Dans linspecteur des proprits choisir linterpolation de mouvement.
Chapitre 2 : Les animations Fascicule TIC
Page 30
Figure II. 16 : le scnario d'une animation qui comporte une interpolation de
mouvement
Constatations :
Les images d'interpolation de mouvement sont toujours colores en violet dans la ligne de temps du scnario.
Lors d'une interpolation de mouvement les images intermdiaires seront calcules et non dessines avec la boite outils.
Avec une interpolation de mouvement, vous pouvez exploiter l'inspecteur des proprits pour personnaliser cette animation (acclration, rotation,
dimensionnement, orientation vers la trajectoire, etc.)
L'interpolation de mouvement s'applique aux symboles, aux groupes et aux textes et non aux formes.
Pour appliquer une interpolation de mouvement une forme, il faut la convertir en groupe ou symbole.
Chapitre 2 : Les animations Fascicule TIC
Page 31
RETENONS
a. Le logiciel Macromedia Flash est un outil crateur d'animations pouvant tre
intgres dans des pages Web.
b. Les objets pouvant exister dans une animation Flash, sont crs base d'images
vectorielles ; telles que les formes, les groupes, les symboles graphiques, les
boutons etc.
c. Les graphiques crs ainsi que les mdias imports sont stocks dans la
bibliothque pour un usage multiple.
d. Une animation Flash est forme par des squences (scnes) ; une squence peut
comporter plusieurs calques et un calque peut renfermer plusieurs images.
e. Dans une animation on peut avoir 5 types d'images : Les images cls, les images
vides, les images cls vides, les images recopies et les images calcules.
f. Avec le logiciel Macromedia Flash, il est possible de crer deux types
d'animations : Les animations image par image et les animations interpoles.
g. Dans une animation interpole, il suffit de dfinir les deux images extrmes de
l'animation (image dbut et image fin) puis dans l'image dbut appliquer les
proprits d'interpolation.
h. Il est possible d'avoir deux types d'interpolations : interpolation de forme qui
s'applique uniquement aux formes et interpolation de mouvement qui peut
s'appliquer aux graphiques et aux groupes.
Chapitre 2 : Les animations Fascicule TIC
Page 32
EXERCICES Exercice 1
a. En utilisant la boite outils, dessiner le drapeau de la Tunisie.
b. Ajouter en dessous le texte "TUNISIE" comme le prsente la figure suivante :
Exercice 2
1. Crer une animation qui transforme un triangle en un rectangle puis en pentagone et la fin en disque.
2. Insrer un deuxime calque travers le quel on associe chaque forme son nom et on y applique un effet de morphing.
Exercice 3
Crer une animation qui illustre le rebondissement dun ballon.
Exercice 4
Crer une animation qui illustre la rotation de la terre par rapport au soleil.
Exercice 5
1. Crer une nouvelle animation. 2. Dans les 40 premires positions du premier calque, importer un fichier audio. 3. Dans les 40 premires positions du deuxime calque, importer un fichier image. 4. Crer un morphing dans le troisime calque, qui transforme une toile en un
triangle.
Exercice 6
Crer une nouvelle animation qui illustre le passage dun ballon travers un cerceau.
Exercice 7
Crer une animation qui comporte le drapeau de la Tunisie anim et en lui ajoutant
lhymne nationale.
Chapitre 3 : Le langage HTML Fascicule TIC
Page 33
Chapitre 3 : Le langage HTML Fascicule TIC
Page 34
I
II
III
IV
V
VI
VII
VIII
IX
X
Chapitre 3 : Le langage HTML Fascicule TIC
Page 35
I. Introduction Les pages Web visualises dans un navigateur Internet sont crites avec un
langage nomm HTML (HyperText Markup Language). Cest un langage de description de contenu et de structure.
Les pages HTML ont la particularit dtre indpendantes de toute plate-forme, et donc particulirement bien adaptes des changes dinformations dans un environnement htrogne comme le Web.
Le langage HTML est compos dun ensemble de balises (tags). Une balise est un lment spcial qui indique une action concernant la mise en page, la mise en forme
ou la structure logique dun document.
Activit 1 a. Crer un nouveau dossier sous la racine de votre disque dur avec le nom tpHtml.
b. Dans le dossier tpHtml, crer un nouveau document texte (cliquer avec le bouton
droit dans une zone vide et choisir nouveau document texte). c. Renommer le fichier afin de le doter de lextension Html (tp1.Html).
Constatations : Le fichier texte sest transform en page Web ce qui signifie qu'une page Web
nest rien dautre quun fichier texte enregistr avec lextension Html (ou htm). En double cliquant sur ce fichier, le navigateur se lance avec comme contenu le
fichier tp1.Html, ce qui signifie que le langage HTML utilis pour la cration
des pages Web, est un langage interprt, dont linterprteur est le navigateur install sur la machine de test (tel que : Firefox, Internet Explorer, Chrome, ).
Bien que de nombreux logiciels soient destins crer des pages HTML, dans ce
manuel nous allons utiliser un diteur de texte pour la cration et ldition des pages Web, et ce dune part pour vous inviter connatre de plus prs la syntaxe du langage HTML et dautre part pour ne pas tre dpendant des fonctionnalits dun logiciel particulier.
Activit 2 a. Dans le dossier de travail, crer un nouveau fichier tp2.Html.
b. Rechercher une image dextension jpg sur votre disque dur, pour la copier dans votre dossier de travail avec le nom image1.jpg.
c. Double cliquer sur le fichier tp2.Html.
d. A laide de votre navigateur, accder la fentre ddition du code source de la page (menu affichage source de la page).
e. Saisir le code HTML donn ci-dessous, enregistrer et tester (bouton rafrachir).
Chapitre 3 : Le langage HTML Fascicule TIC
Page 36
MA PREMIRE PAGE
PAGE Web N1
Figure III- 1 : Une page Web contenant un titre et une image
Constatations : Le document HTML peut contenir un ensemble de balises tels que ,
, , , , , , etc.
Les balises du langage HTML sont inclues entre le caractre infrieur ().
Les balises du langage HTML ne sont pas sensibles la casse. Syntaxiquement, les balises rencontres peuvent tre reparties en quatre
catgories :
o Des balises composes dune partie ouvrante et dune partie fermente, tel que . ,
o Des balises composes dune seule partie ouvrante tel que : , o Des balises composes dune partie ouvrante et dune partie fermante,
avec des proprits, tel que .,
o Des balises composes dune partie ouvrante avec des proprits, tel que
Chapitre 3 : Le langage HTML Fascicule TIC
Page 37
II. La Structure dun document HTML
. .
. .
Figure III- 2 : Structure gnrale d'un document HTML
Constatations :
Un fichier HTML commence par la balise et finit par la balise
La partie entte dlimite par et sert dfinir le titre de la page Web qui sera affich dans la barre du titre du navigateur (entre
et ) et indiquer un certain nombre d'informations facultatives tel que
les mots cls, la date de cration, lexception du titre, le contenu de cette section nest pas directement visible pour le visiteur.
et est une balise optionnelle qui permet de dlimiter le corps du document Html.
Le titre dune page ne peut pas contenir de mise en forme ou dimages. Le choix du titre doit se faire avec beaucoup de soin, en effet cest cette information
qui est utilise dans les listes historiques et favoris de votre navigateur.
Entte du
document HTML
Corps du
document HTML
Titre du
document
HTML
Chapitre 3 : Le langage HTML Fascicule TIC
Page 38
La gestion des textes
Activit 3
a. Dans votre dossier de travail, crer un nouveau fichier tp3.Html.
b. Double cliquer sur ce fichier.
c. A laide de votre navigateur, accder la fentre ddition du code source de la page.
d. Saisir le code HTML donn ci-dessous, enregistrer et tester.
Textes et Paragraphes
Dveloppement Web
les langages pour le Web
Langage Html
Langage javascript
Langage PHP
Autre
MERCI
Figure III- 3 : La gestion du texte avec le langage HTML
Chapitre 3 : Le langage HTML Fascicule TIC
Page 39
Constatations : Le texte dfini entre et sans balises (Merci), sera repris
par le navigateur avec les proprits de mise en forme par dfaut, de ce dernier.
La balise permet un retour la ligne, alors que provoque un passage la ligne et dcale la ligne suivante denviron une ligne (espacement inter paragraphe).
On remarque que la balise permet de changer la police, la couleur et la taille du texte.
Les styles d'criture : gras, italique et soulign s'appliquent respectivement avec les balises (Bold), (Italic) et (Underline).
La balise permet dappliquer un alignement centr. La balise permet d'effectuer un retour la ligne. La balise permet d'insrer une ligne horizontale et la proprit width
permet de dfinir la largeur de la ligne horizontale qui est mesure soit en pixels,
soit en pourcentage par rapport son conteneur.
Le tableau suivant comporte les balises de mise en forme des caractres et des paragraphes.
Fonction Balise Exemple de code Rsultat Gras ... Tunisie Tunisie
Italique ... Tunisie Tunisie
Soulig .... Tunisie Tunisie
Mise en forme
de
Caractre
Tunisie
Tunisie
Exposant X2 X2
Indice H2O H2O
Retour la
ligne HTMLWeb
HTML
Web
Ligne de
sparation
HTML
Web
HTML
Web
Centrage Tunisie
Tunisie
Alignement
d'un lment
...
Tunisie Tunisie
Dfinition et
alignement d'un
paragraphe
...
...
Tunisie
Tunisie
Commentaire
Chapitre 3 : Le langage HTML Fascicule TIC
Page 40
Il est possible d'utiliser plusieurs balises pour un mme lment de texte. Il faut veiller bien les imbriquer. Ainsi ... est correct mais
... est incorrect et risque de poser des problmes.
La taille dans est un nombre entre de 1 7 La couleur dans peut tre indique de deux faons : avec
le nom dune couleur exprim en anglais (black, white,...) ou avec un code hexadcimal de la couleur souhaite exemples: #ffffff, #0022AF etc.
Afin de garantir laffichage correct des pages Web, des caractres accentus et des symboles spciaux sur toutes les plate-formes, le HTML a prvu pour chacun
dentre eux un code commencant par & ( ET commercial) Exemple : pour .
Certains de ces codes ont leurs quivalents sous forme dun nom. Par exemple, ce mme scris aussi
Les titres Le langage HTML nous offre la possibilit de crer des titres avec plusieurs
niveaux hirarchiques afin de subdiviser un document Web en plusieurs parties
spares.
Activit 4 a. Dans votre dossier de travail, crer un nouveau fichier tp4.Html.
b. Double cliquer sur ce fichier.
c. A laide de votre navigateur, accder la fentre ddition du code source de la page.
d. Saisir le code HTML donn ci-dessous, enregistrer et tester.
Les titres
Les Titres
on distingue six niveaux pour les titres
titre niveau 1
titre niveau 2
titre niveau 3
titre niveau 4
titre niveau 5
titre niveau 6
Chapitre 3 : Le langage HTML Fascicule TIC
Page 41
Figure III- 4 : La dfinition des titres avec le langage HTML
Constatations : La balise qui permet de dfinir un titre est ; avec n qui varie de 1
6. Pour chaque titre, il y a une taille qui croit du niveau 1 au niveau 6
Les balises incluent des retours automatiques la ligne. Cela signifie quil nest pas ncessaire dajouter ou pour commencer un nouveau paragraphe la suite dune balise de ce type.
III. Les images Activit 5
a. Dans votre dossier de travail, crer un nouveau fichier tp5.Html.
b. Crer un sous dossier dans votre dossier de travail, avec le nom images.
c. Copier deux images d'extension JPG de votre disque dur, dans le dossier images,
et renommer les en image1.jpg et image2.jpg.
d. Double cliquer sur ce fichier.
e. A laide de votre navigateur, accder la fentre ddition du code source de la page.
f. Saisir le code HTML donn ci-dessous, enregistrer et tester.
Les Images
L'INSERTION D'IMAGES
Chapitre 3 : Le langage HTML Fascicule TIC
Page 42
Figure III- 5 : Insertion d'images
Constatations : Dans les pages Web, l'insertion d'une image en tant qu'objet se fait avec la balise
suivante:
o SRC="adresse" : donne ladresse absolue ou relative de limage afficher. o WIDTH="largeur" et HEIGHT="hauteur" : donnent la largeur et la hauteur de limage, en pixels. o ALT="texte" : permet de donner le texte de l'info bulle de limage o BORDER="taille" : donne la largeur de la bordure autour de limage. o ALIGN="alignement" permet de dfinir l'alignement de limage ("left", "center", "right").
Les navigateurs Web reconnaissent les images aux formats GIF, JPG et PNG. En effet, dune part ses formats offrent les tailles les plus lgres pour les images et dautre part ses formats sont reconnus par la majorit des systmes dexploitation.
Bien quil soit possible dutiliser des adresses absolues pour rfrencer une image, il est fortement conseill dutiliser des adresses relatives pour se prmunir des ventuels problmes dadressage lors des dplacements des dossiers contenant vos sites. (Par exemple pour lhbergement).
Activit 6 a. Dans votre dossier de travail, crer un nouveau fichier tp6.Html.
b. Double cliquer sur ce fichier.
c. A laide de votre navigateur, accder la fentre ddition du code source de la page.
d. Saisir le code HTML donn ci-dessous, enregistrer et tester de nouveau
Chapitre 3 : Le langage HTML Fascicule TIC
Page 43
Image comme arrire-plan
Bonjour
Figure III- 6 : Insertion d'une image comme arrire plan
Constatations : Pour insrer une image comme arrire plan dune page Web, on utilise la
proprit BACKGROUND de la balise body :
Limage darrire plan dune page est utilise avec leffet de mosaque (limage est duplique autant de fois que ncessaire afin de couvrir la totalit de la fentre
de navigation).
Au niveau de la balise on peut aussi retrouver les proprits suivantes :
BGCOLOR : permettant d'appliquer une couleur unie pour le fond dune page Web.
BACKGROUND : permettant d'insrer une image d'arrire plan pour une page WEB.
IV. Les listes
Les spcifications du langage HTML offrent la possibilit de crer des listes
dlments.
Activit 7
a. Dans votre dossier de travail, crer un nouveau fichier tp7.Html.
b. Ouvrir ce fichier.
c. A laide de votre navigateur, accder la fentre ddition du code source de la page.
d. Saisir le code HTML donn ci-dessous, enregistrer et tester de nouveau.
Chapitre 3 : Le langage HTML Fascicule TIC
Page 44
Les listes
Les types scalaires
Entier
Caractre
Boolen
le type numr
les fonctions pour un type numr
Ord
Succ
Pred
Lexique
A
Array Abs Access
B
Bit Byte Boolean
C
Com cos chr char
Figure III- 7 : La dfinition des listes dans le langage HTML
Constatations : On distingue 3 types de listes :
o Les listes numratives ( puces) qui se dfinissent avec la balise
o Les listes numrotes qui se dfinissent avec la balise o Les listes de dfinitions qui se dfinissent avec la balise
Les listes numratives et numrotes sont formes par des lignes d'o l'utilisation des balises tandis que les listes des dfinitions sont formes par des termes et leurs dfinitions .
La proprit type de la balise peut avoir les valeurs suivantes : o A : Lettres majuscules. o a : lettres minuscules. o I : chiffres romains majuscules. o i : chiffres romains minuscules. o 1 : chiffres arabes (valeur par dfaut)
Chapitre 3 : Le langage HTML Fascicule TIC
Page 45
La proprit type de la balise peut avoir les valeurs suivantes : o square : puces carres. o circle : puces circulaires. o disc : puces circulaires pleines (valeur par dfaut)
Il est possible d'imbriquer des listes mme si elles ne sont pas de mme nature. La balise admet une proprit type, qui est prioritaire sur lattribut type de
ou .
V. Les tableaux Dans le langage HTML, les tableaux sont dune importance capitale, en effet leur
utilisation ne se limite pas aux donnes tabulaires, mais sont aussi utiliss pour la mise
en forme des pages Web.
Activit 8 a. Dans votre dossier de travail, crer un nouveau fichier tp8.Html.
b. Ouvrir ce fichier.
c. A laide de votre navigateur, accder la fentre ddition du code source de la page.
d. Saisir le code HTML donn ci-dessous, enregistrer et tester de nouveau
Les tableaux
Les moyennes trimestrielles
Les matires
Trim 1
Trim 2
Trim 3
Algorithmiques
12
13
Chapitre 3 : Le langage HTML Fascicule TIC
Page 46
15
Bases de donnes
10
11
14
T. I. C
11
12
12
Figure III- 8 : La dfinition des tableaux avec le langage HTML
Constatations : En HTML un tableau est conu sous forme dun ensemble de lignes, o chaque
ligne est forme dun ensemble de cellules. Au niveau des cellules on dfinit le contenu afficher.
Syntaxiquement, le HTML prvu pour les tableaux trois balises : La dfinition d'un tableau : La dfinition d'une ligne : La dfinition dune cellule :
Chapitre 3 : Le langage HTML Fascicule TIC
Page 47
Entre et , on doit retrouver que des blocs < TR > et , et entre et on ne doit retrouver que des blocs et
, alors que entre et on peut retrouver nimporte quel contenu, y compris et (des tableaux imbriqus)
Les proprits de la balise concernent tout le tableau alors que les proprits de la balise concernent les diffrentes cellules dune mme ligne, tandis que celles de la balise concernent uniquement une cellule.
Dans ce qui suit, nous donnons la liste de ces proprits rparties par balises de rattachement.
Les proprits de la balise
Attributs Description cellspacing Dfinit l'espace entre les cellules (en pixel).
cellpading Reprsente l'espace entre le contenu de la cellule et le bord extrieur de la cellule
(en pixel).
border Dfinit lpaisseur de bordure (en pixel).
width La largeur du tableau en pixel ou en pourcentage par rapport la largeur de la
fentre.
height La hauteur du tableau en pixel ou en pourcentage par rapport la hauteur de la
fentre.
align Lalignement du tableau par rapport au conteneur.
bgcolor La couleur darrire plan du tableau.
Les proprits de la balise
Attributs Description
align Lalignement horizontal des diffrents contenus des cellules dune mme ligne (les valeurs possibles : left, right et center).
valign Lalignement vertical des diffrents contenus des cellules dune mme ligne (les valeurs possibles : bottom, top et middle).
bgcolor La couleur darrire plan des diffrentes cellules dune ligne.
height La hauteur dune ligne en pixel ou en pourcentage par rapport la hauteur du tableau.
Les proprits de la balise
Attributs Description
align Lalignement horizontal du contenu dune cellule (les valeurs possibles :left, right et center).
valign Lalignement vertical du contenu dune cellule (les valeurs possibles :bottom, top et middle).
width La largeur dune cellule en pixel ou en pourcentage par rapport la largeur du tableau.
height La hauteur dune cellule en pixel ou en pourcentage par rapport la hauteur dune ligne.
bgcolor La couleur darrire plan dune cellule.
rowspan Fusion des cellules horizontalement.
colspan Fusion des cellules verticalement.
Chapitre 3 : Le langage HTML Fascicule TIC
Page 48
La valeur de la proprit BORDER de la balise par dfaut est gale 0. On obtient une grille invisible dont lintrt principal est de permettre lalignement dun ensemble dlments dans une page.
En absence de WIDTH et HEIGHT, le navigateur calcule automatiquement les dimensions des lignes et des colonnes en fonction du contenu et de la taille de la
fentre daffichage, cest ce quon appelle un tableau ajust par rapport son contenu.
Il est noter que lattribut WIDTH de na aucun effet puisque toutes les lignes dun tableau ont la mme largeur : celle du tableau.
VI. Les liens hypertextes Le langage HTML permet de transformer les objets textes et les images en liens
cliquables pour nous amener vers dautres emplacements que ce soit dans la mme page ou vers une autre page : cest la notion de lien hypertexte.
Conceptuellement, les liens peuvent tre rpartis en deux catgories :
Lien externe : cest tout lien permettant dappeler une page HTML partir dune autre page HTML.
Lien interne : cest tout lien permettant de pointer un endroit prcis, dans la page, partir dun autre endroit de la mme page HTML.
Activit 9 a. Dans votre dossier de travail, crer un nouveau fichier tp9.Html.
b. Ouvrir ce fichier.
c. A laide de votre navigateur, accder la fentre ddition du code source de la page.
d. Saisir le code HTML donn ci-dessous, enregistrer et tester de nouveau
Lien hypertexte
Activer le lien convenable
Rechercher avec Google
WWW.Google.fr
Accder l'annuaire Yahoo
WWW.Yahoo.fr
Envoyer un Email
Nous contacter
Chapitre 3 : Le langage HTML Fascicule TIC
Page 49
Ouvrir un fichier Html
une page Web dans le disque dur
tlcharger un fichier
un fichier Html
compress
Constatations : Les zones sensibles aux clics sont des liens hypertextes cres avec la balise
suivante :
texte Pour chaque adresse cible correspond un protocole, comme le montre le tableau
suivant :
Syntaxe Description Protocole par dfaut : http
Lien interne, protocole http
Protocole http
Protocole FTP pour le transfert de fichiers
Protocole SMTP pour le courrier lectronique
Adressage local sur un poste non - distant
Par dfaut la couleur du texte d'un lien non activ est bleu et d'un lien activ est violet.
On peut appliquer un lien un texte ou une image.
Activit 10 a. Dans votre dossier de travail, crer un nouveau fichier tp10.Html.
b. Ouvrir ce fichier.
c. A laide de votre navigateur, accder la fentre ddition du code source de la page.
d. Saisir le code HTML donn ci-dessous, enregistrer et tester la page.
Chapitre 3 : Le langage HTML Fascicule TIC
Page 50
Lien hypertexte bis
Voila une page trs longue
bas de la page
Bas de la page
Remonter
Constatations : On visualise une page Web trs longue mais la navigation dans cette mme page
est facile avec lexistence de deux liens internes (Bas) et (Haut) permettant respectivement de descendre vers le bas de la page et de remonter vers le haut
de la page.
La cration dun lien interne se fait en deux tapes : o La cration dun signet (ou ancre) : lendroit o le lien interne doit pointer,
travers la balise : texte
o La cration du lien interne : texte
Avec la balise on peut utiliser La proprit TARGET qui permet de spcifier la
fentre d'affichage du lien. Cette proprit peut avoir les valeurs suivantes :
"_blank" : une nouvelle fentre, "_self " : la mme fentre, "_parent" ou nom du cadre : voir la partie du cours sur les cadres On peut avoir un lien mixte qui pointe vers un signet dans une autre page HTML en
utilisant la balise suivante :
Chapitre 3 : Le langage HTML Fascicule TIC
Page 51
Activit 11 a. Dans votre dossier de travail, crer un fichier HTML nomm sauvegarder.Html
contenant le texte : "Merci pour votre visite".
b. Dans votre dossier de travail, crer un nouveau fichier tp11.Html.
c. Ouvrir ce fichier et y saisir le code HTML donn ci-dessous, enregistrer et tester
de nouveau.
Les Formulaires
Inscription
Votre Nom:
Votre Prnom:
Votre Adresse:
Votre Bac:
Sc - Info
Math
Sc - Exp
Sc - Tech
Lettres
Eco - Eco
Donnez votre 2me langue:
Franais
Anglais
Allemand
Vos options:
Musique
Thatre
Dessin
Votre Photo jpg, png, bmp...:
Constatations : La page Web cre comporte un formulaire remplir pour s'inscrire dans une
institution universitaire. Ce formulaire comporte plusieurs contrles savoir :
zones de saisie, liste droulante, boutons, cases cocher, boutons radio, etc.
Chapitre 3 : Le langage HTML Fascicule TIC
Page 52
Les diffrents objets graphiques se trouvent entre et . Cette balise possde les attributs suivants :
o ACTION : Permet dindiquer laction entreprendre lorsque le bouton de validation est activ.
o NAME : Le nom attribu au formulaire. o METHOD : Permet de spcifier la mthode denvoi des donnes au serveur (deux mthodes possibles : POST ou GET).
TARGET : Permet dindiquer la fentre daffichage du fichier dfini comme valeur de la proprit ACTION.
Un formulaire peut comporter plusieurs lments graphiques ou contrles.
1. La zone de saisie La dfinition du contrle zone de saisie se fait l'aide de la balise suivante :
Proprit Description name Indique le nom du contrle.
size La dimension de lobjet texte (en nombre de caractres).
maxlength La taille maximale de lobjet texte (en nombre de caractres).
Pour les zones de saisies cryptes (type mot de passe), on utilise INPUT
TYPE="password"
2. La zone de saisie plusieurs lignes La dfinition d'une zone de texte plusieurs lignes se fait l'aide de la balise
suivante : texte par defaut
O NL reprsente le nombre de lignes et NC reprsente le nombre de caractres par
ligne.
3. Les cases doptions La dfinition du contrle cases d'options (bouton radio) se fait l'aide de la
balise suivante :
Les boutons radio sont utiliss pour faire un et un seul choix, parmi un ensemble
de propositions.
Proprit Description name Indique le nom du contrle. Tous les boutons, composant un mme groupe, portent le
mme nom.
value Linformation retourner si la case est coche.
Chapitre 3 : Le langage HTML Fascicule TIC
Page 53
4. Les cases cocher La dfinition du contrle cases cocher (checkbox) se fait l'aide de la balise
suivante :
Les cases cocher sont utiliss pour faire un ou plusieurs choix parmi un
ensemble de propositions.
Proprit Description name Indique le nom du contrle. Toutes les cases cocher portent obligatoirement des noms
diffrents.
value Indique la valeur de l'lment case cocher.
5. La liste de slection La dfinition du contrle Liste de slection se fait l'aide de la balise suivante :
Elment 1
Elment 2
.
.
.
Elment n
Proprit Description name Indique le nom du contrle.
size Indique la taille d'affichage de la liste.
selected Indique la valeur slectionne par dfaut.
Le contrle liste de slection vous permet de proposer diverses options sous la
forme d'une liste droulante dans laquelle l'utilisateur peut cliquer pour faire son choix.
Ce choix reste alors affich.
La boite de la liste est cre par la balise et les lments de la liste
par un ou plusieurs tags et pour chaque option on doit dfinir une valeur
avec la proprit VALUE.
Dans le cas ou la proprit SIZE est > 1, on peut ajouter la balise SELECT l'attribut
MULTIPLE, qui permet d'autoriser la slection multiple de plusieurs lments dans
une zone de liste.
6. Le contrle Annuler Le contrle RESET permet d'annuler les modifications apportes aux contrles
d'un formulaire et de restaurer les valeurs par dfaut.
La dfinition du contrle Annuler (RESET) se fait l'aide de la balise suivante :
Chapitre 3 : Le langage HTML Fascicule TIC
Page 54
O VALUE dfinit le texte
affich au dessus du bouton.
7. Le contrle Submit Ce contrle a la tche spcifique de transmettre toutes les informations contenues
dans le formulaire l'adresse URL dsigne dans l'attribut ACTION de la balise
.
Ce contrle se dfinit l'aide de la balise suivante :
O VALUE dfinit le texte
affich au dessus du bouton.
8. Le contrle button Lors d'un clic, un bouton peut excuter une action ou un programme (crit laide
dun langage autre que le langage Html , tel que le javascript, le PHP ou autre), accder un site Web, accder une boite email, etc. Ce contrle se dfinit l'aide de la balise
suivante :
9. Le contrle File: C'est un contrle qui permet de transmettre un fichier, il s'applique avec l'aide de
la balise suivante:
VIII. Les cadres Le systme de cadres est une fonctionnalit du HTML qui permet de subdiviser
la fentre de navigation en plusieurs parties indpendantes. Chacune de ces parties peut
alors contenir une page HTML qui peut changer au fil de la navigation.
Un exemple classique est un dcoupage en deux parties gauche et droite, dans
lequel la partie gauche joue le rle dun index (sommaire) et la partie droite sert despace daffichage.
Dans une telle disposition, le visiteur a en permanence accs la liste des liens
gauche et chaque lien change la page affiche dans la partie de droite.
Pour crer une page dcoupe en plusieurs cadres, il faut crer :
Une page dfinissant la structure du dcoupage : lignes, colonnes, dimensions, Cest cette page qui devra tre affiche dans le navigateur pour retrouver le systme de cadres.
Autant de pages Web que de cadres : chaque cadre contient initialement une page, qui peut changer par la suite au cours de la navigation.
Activit 12 a. Dans votre dossier de travail, crer trois nouveaux fichiers Cadreg.Html,
Cadred.Html et tp12.Html.
b. Saisir les codes HTML donn ci-dessous, dans les diffrents fichiers et ce
conformment au tableau suivant :
Chapitre 3 : Le langage HTML Fascicule TIC
Page 55
Le fichier tp12.Html
Les cadres
Le fichier Cadred.Html
Accueil
2
Bienvenue
Choisissez un lien gauche!
Le fichier Cadreg.Html
sommaire de liens
Navigation
Les images
Les tableaux
Les listes
Les titres
Figure III- 9 : Utilisation des cadres en HTML
Chapitre 3 : Le langage HTML Fascicule TIC
Page 56
Constatations : On observe une page Web divise en deux zones : une premire zone gauche
qui comporte un sommaire de liens hypertextes et une zone droite comportant
soit une page d'accueil, soit la destination de chacun des liens.
La cration dun systme de cadres compos de n cadres (avec n>=2) ncessite n+1 fichiers HTML spars : les n premiers fichiers HTML pour dfinir le
contenu des n cadres alors que le (n+1)eme fichier sert dfinir la structure des
cadres et appeler les autres fichiers.
La balise
Chapitre 3 : Le langage HTML Fascicule TIC
Page 57
RETENONS
a. Les pages Web sont crites avec un langage de marquage nomm HTML
(HyperText Markup Language); ce langage permet aussi la description de
contenu et de structure.
b. Le langage HTML comporte un ensemble de balises (tags). Une balise est un
lment spcial qui indique une action concernant la mise en page, la mise
en forme ou la structure logique dun document etc.
c. Un fichier Html comporte deux parties; un entte et un corps; l'entte peut
comporter le titre du fichier crer alors que le corps comporte le contenu
qui doit exister dans la page Web crer.
d. Vous pouvez crer des fichiers HTML avec n'importe quel diteur de texte qui
peut sauvegarder les donnes comme des purs fichiers texte; Exemple le Bloc
note (Notepad)
e. Avec HTML, il est possible d'insrer et de paramtrer des images, des
tableaux, des listes, des titres, des liens hypertextes, des formulaires, des
cadres etc.
Chapitre 3 : Le langage HTML Fascicule TIC
Page 58
EXERCICES Exercice 1
a. Dfinir un tableau une seule case contenant un texte quelconque.
b. Modifier la couleur du fond de ce tableau, ainsi que la couleur du contenu, sa
taille et la police utilise.
c. Dcider de la meilleure apparence de ce tableau, cela en ajustant :
l'espace entre le contenu de la case et la limite du tableau,
l'paisseur des bords du tableau (ventuellement nulle),
la taille du tableau,
l'alignement du contenu dans la case.
Exercice 2
a. Raliser un tableau deux colonnes contenant l'ensemble d'un document : la
colonne de gauche contiendra le menu permettant d'aller sur d'autres pages,
celle de droite prsentera le contenu du document lui-mme.
b. Quels sont les inconvnients de ce type de navigation ?
Exercice 3
Dans cet exercice, le but est de construire et de mettre en page un formulaire en HTML.
a. Choisir un thme et dfinir quelques questions sur ce thme. Il ne s'agit pas dans
ce cas de proposer des questions pertinentes mais simplement d'utiliser tous les
types contrles connus de HTML : zone de texte simple et multiple, boutons (
choix unique ou multiple), listes, etc.
b. crire dans une page HTML correspondant ce questionnaire.
c. Mette en forme le formulaire en utilisant un tableau HTML.
d. Lier le questionnaire un programme de traitement des rponses
Exercice 5
Donner le code dun fichier HTML contenant un tableau, conformment limprime cran donn cidessous
Chapitre 3 : Le langage HTML Fascicule TIC
Page 59
Exercice 6
Donner le code HTML utiliser pour crer un formulaire avec les objets dcris ci-
dessous. Une clique sur le bouton valider devrait appeler un fichier nomm test1.php.
Exercice 7
Donner le code dun fichier HTML appel sommaire.Html contenant une arborescence de puces et de numros dont la structure est donne dans limprime cran ci-dessous :
Il faut veiller ce que les chapitres saffichent en gras et avec la couleur rouge, les paragraphes en italique et avec la couleur bleu, pour les sections on se contentera des
proprits de mise en forme par dfaut.