Download pdf - Fascicule 3SI-TIC - Version Finale

SOMMAIRE

Chapitre 1 : Les outils de collaboration Fascicule TIC

Page 1


Page 2

I

II

III

IV


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.


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


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


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


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.


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


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


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


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.


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


Page 14

I

II

III

IV

V

VI

VII

VIII

IX

X


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.


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.


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.


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).


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".


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".


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


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.


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


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.


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.


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.


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


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


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.


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.


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.


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


Page 34

I

II

III

IV

V

VI

VII

VIII

IX

X


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).


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


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


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


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


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.



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


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


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


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).




d. Saisir le code HTML donn ci-dessous, enregistrer et tester de nouveau


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


b. Ouvrir ce fichier.


d. Saisir le code HTML donn ci-dessous, enregistrer et tester de nouveau.


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)


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.





Les tableaux

Les moyennes trimestrielles

Les matires

Trim 1

Trim 2

Trim 3

Algorithmiques

12

13


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 :


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.


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.


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.


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.





Lien hypertexte

Activer le lien convenable

Rechercher avec Google

WWW.Google.fr

Accder l'annuaire Yahoo

WWW.Yahoo.fr

Envoyer un Email

Nous contacter


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.




d. Saisir le code HTML donn ci-dessous, enregistrer et tester la page.


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 :


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.


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.


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 :


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 :


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


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


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.


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


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.