La str u c t u r e du do c u m e n t X M L Application II – L E X M L 1

(1)

SOMMAIRE I - L E D O C U M E N T

1. D E F I N I T I O N E T C O M P O S A N T E S 2. C O N S E Q U E N C E S

3. A N A L Y S E D E LA S T R U C T U R E D’ U N D O C U M E N T a. La dé m a r c h e de co n s t r u c t i o n d’u n do c u m e n t b. La co n s t r u c t i o n d’u n do c u m e n t X M L

c. La str u c t u r e du do c u m e n t X M L Application

II – L E X M L

1. D E F I N I T I O N 2. L E S B A L I S E S

3. A V A N T A G E S D U X M L P A R R A P P O R T A U H T M L a. Le co d e H T M L

b. Le co d e X M L

4. C R E A T I O N D’ U N E S T R U C T U R E X M L a. Cr é a t i o n « m a n u e l l e »

Application

b. Utilis a t i o n d’u n logi ci e l Application

5. S A I S I E D E S D O N N E E S 6. VI S U A L I S A T I O N

III – LE S F E U I L L E S D E S T Y L E 1. D E F I N I T I O N

2. A V A N T A G E S 3. P R I N C I P E

4. Q U E L Q U E S IN S T R U C T I O N S P O U R D E M A R R E R a. Le s car a c t è r e s

b. C o u l e u r du text e et de l’arri è r e- pla n c. Le s alig n e m e n t s et es p a c e m e n t s 5. C R E A T I O N D’ U N E F E U I L L E D E S T Y L E Application

6. A P P L I C A T I O N D’ U N E F E U I L L E D E S T Y L E A U N FI C H I E R X M L

Application

7. C H A N G E M E N T D E F E U I L L E D E S T Y L E IV – A N N E X E S

1. L’A P P L I C A T I O N S O U S F O R M E C O M P L E T E a. Le do s s i e r élè v e

b. Le do s s i e r pr of e s s e u r c. R e m a r q u e

2. V A R I A N T E D E L’A P P L I C A T I O N a. Le do s s i e r élè v e

2 2 2 2 2 3 3 4 6 6 6 7 7 9 1 0 1 0 1 0 1 1 1 5 1 5 1 6 1 7 1 7 1 7 1 7 1 8 1 9 20 20 22 22 24 24 24 25 25 25 26 32 32 32 34

(2)

1. DEFINITION & COMPOSANTES

U n do c u m e n t est un en s e m b l e d’inf o r m a t i o n s or g a n i s é e s et pr é s e n t é e s sur un su p p o r t (lettre, co u r r i e l, affic h e … ).

Dit autr e m e n t , un do c u m e n t se co m p o s e de 4 élé m e n t s : 1. D e s info r m a t i o n s

2. U n e str u c t u r e (le pla n)

3. U n e pr é s e n t a t i o n (la mi s e en pa g e)

4. U n su p p o r t (lettre, not e, ra p p o r t, cart o n d’in vit a t i o n , co u r r i e l …)

2. CONSEQUENCES

A u te m p s de la m a c h i n e à écrir e, m o d i f i e r les info r m a t i o n s , la str u c t u r e ou la pr é s e n t a t i o n du do c u m e n t re v e n a i t à refa ir e enti è r e m e n t le do c u m e n t .

Av e c la mi c r o- info r m a t i q u e et les logi c i e l s bu r e a u t i q u e s , to ut e m o d i f i c a t i o n est rela ti v e m e n t ais é e et ra pi d e : il suffit de ch a n g e r les info r m a t i o n s co n t e n u e s da n s un e lettr e ou un ta bl e a u par ex e m p l e . Le s m o d è l e s de do c u m e n t s et les fe uill e s de styl e per m e t t e n t d’a p p l i q u e r un e pré s e n t a t i o n diff é r e n t e ra pi d e m e n t .

C e p e n d a n t , un e m o d i f i c a t i o n pr of o n d e de la stru c t u r e ou de la pré s e n t a t i o n d’u n do c u m e n t lon g pe u t s’a v é r e r au co n t r a i r e lon g u e et fasti d i e u s e po u r la si m p l e rais o n qu e si le su p p o r t est « dét a c h é » de s 3 aut r e s co m p o s a n t e s – on pe u t ch o i s i r d’i m p r i m e r so n ra p p o r t, de l’en v o y e r par co u r ri e l ou de l’affic h e r sur un site inte r n e t pa r ex e m p l e - , info r m a t i o n s , stru c t u r e et pr é s e n t a t i o n rest e n t trè s liés.

D a n s l’idé a l, on de v r a i t po u v o i r tra v a i ll e r indépendamment sur les info r m a t i o n s OU la stru c t u r e OU la pr é s e n t a t i o n av a n t de ch oi s i r so n su p p o r t. Le X M L (eXte n d e d M a r k- up La n g u a g e ou lan g a g e à bali s e s éte n d u e s ; cf. II) offr e cett e po s s i b i li t é.

3. ANALYSE DE LA STRUCTURE D’UN DOCUMENT

a) La démarche de construction d’un document

Lor s q u ’ o n cré e un do c u m e n t , on ré p o n d su c c e s s i v e m e n t au x qu e s t i o n s sui v a n t e s : i. Q u e l l e s info r m a t i o n s doi v e n t fig u r e r da n s le do c u m e n t ?

ii. C o m m e n t str u c t u r e r ce s info r m a t i o n s po u r qu’ell e s soi e n t le mi e u x po s s i b l e co m p r i s e s ?

iii. C o m m e n t pr é s e n t e r ce s info r m a t i o n s po u r êtr e le plu s lisibl e po s s i b l e ?

(3)

iv. Q u e l su p p o r t ch o i s i r ?

C e p e n d a n t , l’ord r e de ce s qu e s t i o n s n’e st pa s tot al e m e n t fig é. La cibl e et les circ o n s t a n c e s de la co m m u n i c a t i o n pe u v e n t im p o s e r un typ e de su p p o r t pr é c i s. P a r ex e m p l e , po u r fair e par v e n i r ra pi d e m e n t de s info r m a t i o n s écrit e s ou vis u e l l e s à so n su p é r i e u r , le co u r r i e l ser a le su p p o r t ap p r o p r i é . Et le ch o i x du co u r r i e l dict e le typ e de pr é s e n t a t i o n (style dire c t, cor p s du co u r r i e l bre f, for m u l e de polit e s s e ré d u i t e …). D a n s ce ca s, l’ord r e de s qu e s t i o n s est :

i. Q u e l l e s info r m a t i o n s doi v e n t fig u r e r da n s le do c u m e n t ?

ii. C o m m e n t str u c t u r e r ce s info r m a t i o n s po u r qu’ell e s soi e n t le mi e u x po s s i b l e co m p r i s e s ?

iii. Q u e l su p p o r t ch o i s i r ?

iv. C o m m e n t pr é s e n t e r ce s info r m a t i o n s po u r êtr e le plu s lisibl e po s s i b l e ?

b) La construction d’un document XML

Lor s q u ’ o n cré e un do c u m e n t X M L , on se po s e évi d e m m e n t les m ê m e s qu e s t i o n s m a i s la dé m a r c h e de réali s a t i o n est diff é r e n t e pui s q u ’ o n trait e sé p a r é m e n t les info r m a t i o n s , la stru c t u r e et la pr é s e n t a t i o n .

A pr è s réfl e x i o n sur les info r m a t i o n s qu e le do c u m e n t de v r a co n t e n i r, on pr o c è d e de la m a n i è r e sui v a n t e :

i. Cr é a t i o n de la str u c t u r e du do c u m e n t ii. S ai s i e de s inf or m a t i o n s

iii. Cr é a t i o n d’u n e ou plu s i e u r s pré s e n t a t i o n s( 1) iv. A p p li c a t i o n de la pré s e n t a t i o n ch o i s i e(2) v. Utilis a t i o n du su p p o r t(3)

(1) et (2) : L’int é r ê t du X M L est de tra v a i ll e r sé p a r é m e n t sur les co m p o s a n t e s du do c u m e n t . Ain s i, un e m ê m e stru c t u r e et les info r m a t i o n s qu’ell e co n t i e n t pe u v e n t av o i r de s

pré s e n t a t i o n s trè s diff é r e n t e s . Pa r ex e m p l e , les info r m a t i o n s co n c e r n a n t les élè v e s d’u n e cla s s e (no m, pr é n o m , dat e de nai s s a n c e , ré gi m e , lan g u e s viv a n t e s , opti o n s … ) pe u t en ch a n g e a n t la pré s e n t a t i o n de v e n i r un e list e d’a p p e l, un e list e d’é m a r g e m e n t , de s cart o n s d’in vit a t i o n , de s ba d g e s indi v i d u e l s … co m m e ce qu’u n e ba s e de do n n é e s per m e t m a i s av e c de s pr é s e n t a t i o n s trè s soi g n é e s , trè s diffé r e n t e s , pe r s o n n a l i s a b l e s à so u h a i t et m o d i f i a b l e s

(4)

U n e fois défi n i e s les info r m a t i o n s de v a n t fig u r e r da n s le do c u m e n t , il faut co m m e n c e r pa r dét e r m i n e r la str u c t u r e du do c u m e n t .

P o u r cel a, la re p r é s e n t a t i o n ar b o r e s c e n t e est tot al e m e n t ad a p t é e . Il exi s t e pri n c i p a l e m e n t de u x typ e s de rep r é s e n t a t i o n s :

Type 1 : D o c u m e n t

R u b r i q u e 1 ru b ri q u e 2

S o u s- ru b ri q u e 1. 1 so u s ru b ri q u e 1.2 so u s- ru b ri q u e 2.1 so u s- ru b ri q u e 2.2

Type 2 : D o c u m e n t

R u b r i q u e 1

S o u s- ru b ri q u e 1. 1 S o u s- ru b ri q u e 1.2 R u b r i q u e 2

S o u s- ru b ri q u e 2.1 S o u s- ru b ri q u e 2.2

C h a c u n est évi d e m m e n t libr e de ch o i s i r le typ e de re p r é s e n t a t i o n ar b o r e s c e n t e qu’il so u h a i t e . To u t e f o i s , le typ e 2 à l’av a n t a g e d’êtr e si m il a i r e vis u e l l e m e n t à la re p r é s e n t a t i o n de s logi ci e l s de cré a t i o n de fichi e r s X M L (Cf. II.4.b).

APPLICATION : CREATION D’UN CURRICULUM VITAE EN XML 1^ère ETAPE : DETERMINER LA STRUCTURE DU C.V

P o u r co n s t r u i r e un C. V co m m e to ut do c u m e n t , il fa ut défi n i r :

• Le s info r m a t i o n s co n t e n u e s da n s le C. V

• La str u c t u r e du do c u m e n t

• La pr é s e n t a t i o n de ce s info r m a t i o n s

(5)

TRAVAIL A FAIRE :

1. D é fi n i r les info r m a t i o n s fig u r a n t da n s le C. V.

2. R e p r é s e n t e r la str u c t u r e du C. V par un sc h é m a arb o r e s c e n t . REPONSE S :

1. Informations figurant dans le C.V :

• Pr é n o m

• N o m

• A d r e s s e

• C o d e po s t a l

• Ville

• Tél é p h o n e fix e

• Tél é p h o n e port a b l e

• A dr e s s e de co u r r i e l

• D a t e de nai s s a n c e

• P er m i s de co n d u i r e

• Di pl ô m e s

• A n n é e s d’o b t e n t i o n de s dipl ô m e s

• St a g e s eff e c t u é s

• A n n é e s de ré ali s a t i o n de s sta g e s

• C e n t r e s d’int é r ê t s 2. Structure du C.V :

C V

Titr e Eta t civil Titr e

Pr é n o m N o m A d r e s s e C o d e po s t a l Ville

Tél é p h o n e fix e Tél é p h o n e po rt a b l e A d r e s s e de co u r ri e l D a t e de nai s s a n c e P e r m i s de co n d u i r e Fo r m a t i o n

Titr e Di pl ô m e 1

A n n é e d’o b t e n t i o n Titr e

Di pl ô m e 2

Ex p é r i e n c e pr o f e s s i o n n e l l e Titr e

St a g e 1

A n n é e de réali s a t i o n

(6)

C e n t r e d’int é r ê t 2

II – LE XML

1. DEFINITION

Le lan g a g e X M L (eXten d e d Mark- up Lan g u a g e ou lan g a g e à bali s e s éte n d u e s) est un lan g a g e de de s c r i p t i o n de do c u m e n t to ut le co m m e H T M L (Hyp e r Text Mark- up Lan g u a g e ou lan g a g e à bali s e s hy p e r t e x t e s) do n t il est iss u et qui est un de s lan g a g e s « d’éc rit u r e » de s pa g e s w e b .

Un langage de description de document : le X M L et le H T M L so n t de s lan g a g e s qui dé c ri v e n t un do c u m e n t , c'e s t- à-dire qui en défi n i s s e n t les car a c t é r i s t i q u e s : tell e do n n é e est un e info r m a t i o n du do c u m e n t , elle doit s’affi c h e r à tel en d r o i t de la pa g e , doit êtr e en ble u et en gr a s …

P o u r attri b u e r se s car a c t é r i s t i q u e s à un e info r m a t i o n , ce s lan g a g e s utilis e n t de s balises.

2. LES BALISES

D a n s le lan g a g e co u r a n t , un e bali s e est un re p è r e . En H M T L et X M L au s s i ! S el o n les ca s, la bali s e re p è r e un e info r m a t i o n (en lan g a g e X M L) ou se s car a c t é r i s t i q u e s (en lan g a g e H T M L) . Elle s’é crit : <bali s e > </balis e >.

U n e bali s e est do n c un re p è r e av e c la parti c u l a r i t é qu e ce re p è r e est do u b l e : la bali s e a un dé b u t (<balis e >) et un e fin (</balis e >). Dit aut r e m e n t , la bali s e « en c a d r e » l’inf o r m a t i o n (lang a g e X M L) ou les car a c t é r i s t i q u e s (lang a g e H T M L) qu’ ell e défi n it.

Ex e m p l e s :

1. Balise XML :

<no m > D u p o n t </no m > :

O u v e r t u r e de la bali s e info r m a t i o n fer m e t u r e de la bali s e

(7)

2. Balise HTML :

O u v e r t u r e de la bali s e titre info r m a t i o n fer m e t u r e de la bali s e titre

title = titre du do c u m e n t qui s’affic h e da n s la bar r e du na v i g a t e u r inte r n e t

E n H T M L , la bali s e re p è r e les car a c t é r i s t i q u e s de l’info r m a t i o n . Ell e est im p o s é e , c'e s t- à-dir e qu e c’est un e instr u c t i o n pr é c i s e do n t il faut re s p e c t e r la sy n t a x e . Ex e m p l e : <titl e> po u r le titre, <fo n t> po u r le typ e de poli c e à ap p li q u e r , etc.

E n X M L , la bali s e re p è r e l’inf o r m a t i o n et c’est l’utili s a t e u r qui dé c i d e lui-m ê m e du no m de la bali s e . Ex e m p l e : <no m > po u r dé si g n e r l’info r m a t i o n « no m ».

3. AVANTAGES DU XML PAR RAPPORT AU HTML

a) Le code HTML

V oi c i le dé b u t d’u n C. V en H T M L :

(8)

V oi c i le co d e H T M L corr e s p o n d a n t :

<!DO C T Y P E ht m l P U B L I C "-//W3 C//DT D H T M L 4.0 1 Tr a n s i t i o n a l//E N">

<m e t a co n t e n t = " t e x t/ht m l; ch a r s e t = I S O - 885 9- 1"

http- eq u i v =" c o n t e n t- typ e">

</hea d >

<div styl e ="t e x t- alig n: ce n t e r;"><bi g >< b i g >< s p a n

styl e =" c o l o r : rg b(5 1, 10 2, 255);">C U R R I C U L U M VI T A E </spa n ></big></big>< b r>

</div>

<br>

Je a n D u p o n t <br>

1 3 ru e du sq u a r e <br>

1 9 1 0 0 Bri v e <br>

<br>

t&e a c u t e ; l. fix e : 05 55 55 55 55<br>

t&e a c u t e ; l. po rt a b l e : 06 06 06 06 06<br>

<br>

n& e a c u t e ; le 1 e r jan vi e r 1 9 9 0 <br>

Tit ul a i r e du per m i s B<br>

<br>

<sp a n

styl e =" f o n t- fa m i l y: B o o k m a n Ol d Styl e; col o r: rg b(5 1, 5 1, 255);"></sp a n >

(9)

<div styl e ="t e x t- alig n: ce n t e r;"><s p a n

styl e =" c o l o r : rg b(5 1, 10 2, 255);">F O R M A T I O N </spa n >< b r >

</div>

<sp a n

styl e =" f o n t- fa m i l y: B o o k m a n Ol d Styl e; col o r: rg b(5 1, 5 1, 255);"><br>

<sp a n styl e =" c o l o r : rg b(0, 0, 0);">2008 :

B a c c a l a u r & e a c u t e ; a t S T G C o m m u n i c a t i o n et G e s t i o n de s res s o u r c e s hu m a i n e s , m e n t i o n Bi e n </spa n >< b r>

</spa n >

</bod y>

</html>

S a n s re n tr e r da n s les dét a il s, on co n s t a t e qu e le lan g a g e H T M L m é l a n g e les info r m a t i o n s du do c u m e n t (en ro u g e ), les car a c t é r i s t i q u e s de la mi s e en pa g e (en vert) et les do n n é e s co n c e r n a n t le lan g a g e utilis é et la str u c t u r e inf o r m a t i q u e du do c u m e n t (en ble u ).

NB : Les couleurs ont été rajoutées pour faciliter la compréhension ( !) du document.

Dans le document original, tous les éléments sont de la même couleur.

CONSEQUENCE : O n co m p r e n d clair e m e n t qu e m o d i fi e r de s info r m a t i o n s , la mi s e en pa g e ou la stru c t u r e du do c u m e n t ne ser a pa s ch o s e ais é e sa n s logi c i e l sp é c i a l i s é .

b) Le code XML V oi c i le m ê m e C V en X M L :

<?xml version="1.0" encoding="utf-8" ?>

<CV>

<prénom>Jean</prénom>

<nom>Dupont</nom>

<adresse>13 rue du square</adresse>

<ville>Brive</ville>

<naissance>1er janvier 1990</naissance>

<permis>Titualire du permis B</permis>

</etatcivil>

(10)

• Il n’y a pa s de mi s e en pa g e .

• Le co d e est plu s co u r t.

• Le s bali s e s so n t per s o n n a l i s é e s .

• Le s typ e s d’él é m e n t s so n t clair e m e n t ide n ti fi é s : les info r m a t i o n s so n t en gra s, les élé m e n t s de stru c t u r e ne le so n t pa s.

CONSEQUENCE : O n pe u t inte r v e n i r plu s facil e m e n t sur les diff é r e n t s élé m e n t s

(infor m a t i o n s , stru c t u r e , pr é s e n t a t i o n) du do c u m e n t , sa c h a n t qu’a v a n t d’arri v e r à ce co d e X M L , on a :

1. cré é la stru c t u r e (en no r m a l) ; 2. sai si les info r m a t i o n s (en gr a s) ;

et qu’o n cr é e r a plu s tar d la mi s e en pa g e . D e plu s, il n’a pa s ét é né c e s s a i r e jus q u’i ci d’ap p r e n d r e un e sy n t a x e parti c u l i è r e pui s q u ’ o n a ch oi s i soi- m ê m e le no m de s bali s e s (<CV>, <etatcivil>, <prénom>,<nom>, etc).

4. CREATION D’UNE STRUCTURE XML

a. Création « manuelle »

U n e fois qu’o n a dét e r m i n é la str u c t u r e du do c u m e n t , il fau t l’écrir e en X M L , c'e s t- à-dir e écrir e les bali s e s corr e s p o n d a n t e s à ch a q u e élé m e n t de la stru c t u r e .

APPLICATION : CREATION D’UN CURRICULUM VITAE EN XML 2^ème ETAPE : ECRIRE LA STRUCTURE EN XML

TRAVAIL A FAIRE :

A partir de l’arb o r e s c e n c e , écri r e la stru c t u r e du do c u m e n t en X M L (ne pa s utilis e r de car a c t è r e s ac c e n t u é s).

REPONSE :

<CV>

</etatcivil>

(11)

</diplome1>

</diplome2>

</formation>

</stage1>

</stage2>

</experiencepro>

</centresinteret>

</CV>

b. Utilisation d’un logiciel

L’utili s a ti o n d’u n logi c i e l sp é c i a l i s é da n s la co n c e p t i o n de s do c u m e n t s en X M L per m e t de limit e r les err e u r s et de ga g n e r du te m p s pui s q u ’ o n co n s t r u i t la str u c t u r e de m a n i è r e

arb o r e s c e n t e , qu e le co d e X M L est gé n é r é aut o m a t i q u e m e n t et qu’e n s u i t e on pe u t sai sir les info r m a t i o n s .

Le logi ci e l utilis é ici est Mi c r o s o f t X M L N o t e p a d 200 7, tél é c h a r g e a b l e sur

w w w . m i c r o s o f t . c o m/ d o w n l o a d s/ d e t a i l s. a s p x ? f a m i l y i d = 7 2 d 6 a a 4 9- 787 d- 4 1 1 8- ba 5 f- 4f30 f e 9 1 3 6 2 8 & d i s p l a y l a n g = e n .

Il se pr é s e n t e de la m a n i è r e sui v a n t e :

(12)

 O n co m m e n c e par ou v ri r un no u v e a u fic hi e r :

 O n ins è r e en s u i t e not r e pr e m i e r élé m e n t , à sa v o i r ici la nat u r e de notr e do c u m e n t : « C V »

(13)

O n ins c rit do n c cv à l’e m p l a c e m e n t de l’élé m e n t qu e l’on vie n t de cré e r.

 O n cré e en s u i t e not r e pr e m i è r e ru b ri q u e du C V soit l’état civil co n f o r m é m e n t à la str u c t u r e qu e l’on a éta b li e à la 2^{è m e} éta p e de l’ap p li c a t i o n . C e t élé m e n t « eta t c i v il » fait pa rti e de l’élé m e n t C V

O n dit alor s qu e « eta t c i v il » est un élé m e n t enf a n t (Child)d e l’élé m e n t « cv » (qui est do n c so n t pèr e ! ). Po u r cré e r cet él é m e n t enf a n t, on sél e c t i o n n e l’élé m e n t pè r e « cv » en cliq u a n t droit de s s u s , pui s en sél e c t i o n n a n t da n s le m e n u « Ele m e n t » pui s « C hil d ».

O n re m a r q u e qu e la co m b i n a i s o n de s tou c h e s Ctrl + Ins pro d u i t le m ê m e eff et.

(14)

O n no m m e en s u i t e cet élé m e n t « etat c i v i l ».

 O n rec o m m e n c e la m ê m e op é r a t i o n m a i s cett e foi s à partir de l’élé m e n t « etat c i v i l » po u r cré e r se s élé m e n t s fils : « pre n o m », « no m », « adr e s s e », « cp » (le co d e po s t a l), « ville »,

« telfi x e » (télé p h o n e filair e), « tel p o r t a b l e », « nai s s a n c e » (date de nai s s a n c e) et

« per m i s »(per m i s de co n d u i r e).

A ch a q u e fois, on cliq u e dr oi t sur l’élé m e n t « etat c i v i l », on sél e c t i o n n e El e m e n t pui s C hil d et on lui attri b u e un no m : « pre n o m », « no m », etc.

(15)

A la fin de cett e éta p e , on obti e n t ce ci :

P o u r cré e r les autr e s ru b ri q u e s du cv (for m a t i o n , ex p é r i e n c e et ce n t r e s d’int é r ê t s), on ré p è t e les éta p e s  et  po u r obt e n i r au fin al la stru c t u r e X M L du cv :

d

(16)

R E M A R Q U E S :

• P o u r eff a c e r un élé m e n t (en ca s d’err e u r par ex e m p l e), il suffit de le sél e c t i o n n e r pui s d’ap p u y e r sur la tou c h e Su p p r ou D el du cla vi e r ou en c o r e de cliq u e r sur l’icô n e .

• N’o u b l i e z pa s de sa u v e g a r d e r ré g u l i è r e m e n t votr e tra v a i l.

APPLICATION : CREATION D’UN CURRICULUM VITAE EN XML 3^ème ETAPE : ECRIRE LA STRUCTURE EN XML (SUITE)

TRAVAIL A FAIRE :

A partir de l’arb o r e s c e n c e , écri r e la stru c t u r e du do c u m e n t en X M L en utilis a n t le logi ci e l X M L N o t e p a d .

REPONSE : Cf. éta p e II.5

5. SAISIE DES DONNEES

To u j o u r s à l’aid e du X M L N o t e p a d , il fa ut m a i n t e n a n t sai sir les info r m a t i o n s .

O n co m m e n c e pa r sél e c t i o n n e r l’élé m e n t , par ex e m p l e le titre du do c u m e n t/

E n fac e de l’élé m e n t sél e c ti o n n é , da n s la col o n n e de dr oit e, un ca d r e po u r sai sir les info r m a t i o n s ap p a r a î t . O n cliq u e alo r s sur ce ca d r e et on entr e le pr é n o m : Je a n .

O n pr o c è d e la m ê m e m a n i è r e po u r ch a q u e élé m e n t po u r obt e n i r par ex e m p l e :

(17)

6. VISUALISATION

A pr è s av oi r cr é é la str u c t u r e X M L du cv pui s sai si les info r m a t i o n s du ca n d i d a t, on pe u t vis u a l i s e r le rés u l t a t de so n tra v a i l en utilis a n t un na vi g a t e u r inte r n e t .

R E M A R Q U E IM P O R T A N T E : O n utilis e r a de pré f é r e n c e Fir e f o x plut ô t qu’I nt e r n e t Ex p l o r e r . E n effe t, ce de r n i e r ne res p e c t a n t pa s touj o u r s les sta n d a r d s X M L , l’affi c h a g e du do c u m e n t pe u t s’av é r e r alté r é.

O n ou v r e Fir e f o x pui s on sél e c ti o n n e Fic h i e r, O u v r i r un fichi e r et on sél e c t i o n n e le fic hi e r qui co n ti e n t le C V.

O n voit alo r s la str u c t u r e X M L du cv ain s i qu e les info r m a t i o n s du ca n d i d a t . En rev a n c h e , co m m e l’indi q u e Fir e f o x , il n’y a pa s en c o r e de mi s e en for m e as s o c i é e à ce do c u m e n t .

d d

(18)

1. DEFINITION

La feuill e de styl e est un fichi e r qui ra s s e m b l e tout e s les élé m e n t s de pr é s e n t a t i o n qu’o n so u h a i t e ap p li q u e r à un do c u m e n t X M L .

2. AVANTAGES

P ui s q u e la pr é s e n t a t i o n est sé p a r é e de la str u c t u r e et de s info r m a t i o n s , on pe u t pl u s facil e m e n t :

• tra v a i ll e r sur les élé m e n t s de for m e (la pr é s e n t a t i o n),

• ch a n g e r facil e m e n t de pr é s e n t a t i o n ,

sa n s ris q u e r de m o d i fi e r la str u c t u r e ou les info r m a t i o n s pa r err e u r.

3. PRINCIPE

O n dé c i d e d’a p p l i q u e r à un élé m e n t ou un gr o u p e d’él é m e n t s de la stru c t u r e X M L de s rè gl e s de pr é s e n t a t i o n .

Ex e m p l e 1 :

O n pe u t dé ci d e r de m e t t r e le no m en gra s et en ble u.

Ex e m p l e 2 :

(19)

O n pe u t dé ci d e r de m e t t r e to u s les él é m e n t s de la ru b ri q u e état civil en gra s et en ble u.

P o u r ap p li q u e r un e rè gl e de pr é s e n t a t i o n à un élé m e n t ou à un gro u p e d’él é m e n t (c'est- à- dir e un élé m e n t pèr e et se s élé m e n t s fils), il suffit de no m m e r l’élé m e n t ou le gr o u p e d’él é m e n t pui s d’in d i q u e r les rè gl e s de pré s e n t a t i o n .

P o u r l’exemple 1, la feuill e de styl e ser a :

Feuille de style Explications Résultat

no m Elé m e n t co n c e r n é

{ D é b u t de s rè gl e s de pr é s e n t a t i o n à ap p li q u e r

fon t- w ei g h t : bol d; C a r a c t è r e s gra s

col o r : blu e C o u l e u r de s car a c t è r e s : ble u

} Fin de s rè gl e s de pré s e n t a t i o n à

ap p li q u e r

S e u l le no m ap p a r a î t r a en gra s et en ble u.

P o u r l’exemple 2, la feuill e de styl e ser a :

Feuille de style Explications Résultat

(20)

eta t c i v il Elé m e n t co n c e r n é

{ D é b u t de s rè gl e s de pr é s e n t a t i o n à ap p li q u e r

fon t- w ei g h t : bol d; C a r a c t è r e s gra s

col o r : blu e C o u l e u r de s car a c t è r e s : ble u

} Fin de s rè gl e s de pré s e n t a t i o n à

ap p li q u e r

To u s les élé m e n t s fils de l’élé m e n t etat c i v il (soit pre n o m , no m , adr e s s e , cp, ville, telfix e, telp o r t a b l e , nai s s a n c e et pe r m i s) ser o n t en gr a s et en ble u.

4. QUELQUES INSTRUCTIONS POUR DEMARRER

R E M A R Q U E S :

• Il ne s’a git pa s ici d’êtr e ex h a u s t i f et de four n i r l’en s e m b l e de s instr u c t i o n s utilis a b l e s da n s un e fe uill e de styl e m a i s si m p l e m e n t de do n n e r qu e l q u e s instr u c t i o n s po u r en co m p r e n d r e le pri n c i p e , ré ali s e r qu e l q u e s feuill e s de styl e ba si q u e s et de vérifi e r la facilit é po u r pa s s e r d’u n e pré s e n t a t i o n à un e autr e po u r un m ê m e do c u m e n t X M L .

• U n e instr u c t i o n s’éc rit de la m a n i è r e sui v a n t e : {instr u c t i o n : val e u r ; }. O n re m a r q u e qu’il y a un es p a c e apr è s les de u x poi n t s (:) et le poi n t- viru g l e (;)mais pa s av a n t .

a) Les caractères :

Instruction Rôle Exemples

fon t- fa m i l y dét e r m i n e la poli c e ch o i s i e • {font- fa m i l y : ari al; }

• {font- fa m i l y : cali b ri; }

• etc fon t- styl e per m e t d’affi c h e r les

car a c t è r e s no r m a l e m e n t , en itali q u e ou en

• {font- styl e : itali c; }

• {font- styl e : obli q u e ;}

• {font- styl e : no r m a l ; } (par déf a u t)

fon t- w ei g h t D é t e r m i n e l’ép a i s s e u r de s car a c t è r e s

• {font- w e i g h t : nor m a l ; }

(21)

• {font- w e i g h t : bol d; } (gras)

• {font- w e i g h t : bol d e r ; } (« plu s gra s »)

fon t- siz e D é fi n i t la taill e de s car a c t è r e s {font- siz e : 1 2 p x ; } (taille 1 2) text- tra n s f o r m Tra n s f o r m e les mi n u s c u l e s

en m a j u s c u l e s ou l’inv e r s e

• {text- tra n s f o r m : up p e r c a s e ; ) (tran s f o r m e les mi n u s c u l e s en m a j u s c u l e s)

• {text- tra n s f o r m : lo w e r c a s e ; } (tran s f o r m e les m a j u s c u l e s en mi n u s c u l e s)

text- de c o r a t i o n P er m e t de so u li g n e r , surli g n e r , ba rr e r ou fair e clig n o t e r le text e

• {text- de c o r a t i o n : un d e r l i n e ; ) (souli g n é)

• {text- de c o r a t i o n : ov e r li n e ; ) (surlig n é)

• {text- de c o r a t i o n : lin e- thr o u g h ; ) (barr é)

• {text- de c o r a t i o n : blin k; } (clign o t a n t)

lett e r- sp a c i n g D é fi n i t l’es p a c e m e n t entr e les car a c t è r e s

• {letter- sp a c i n g : 4pt; } (4 poi n t s entr e ch a q u e car a c t è r e)

w o r d- sp a c i n g D é fi n i t l’es p a c e m e n t entr e les m o t s

• {wor d- sp a c i n g : 4pt; } (4 poi n t s entr e ch a q u e m o t)

b) Couleur du texte et de l’arrière-plan

col o r D é fi n i t la co u l e u r de s car a c t è r e s

• {colo r: blu e; } (bleu)

• {colo r: gr e e n ; } (vert)

• {colo r: yell o w ; } (jaun e)

• etc

(22)

• etc

c) Les alignements et espacements

text- alig n D é fi n i t l’alig n e m e n t ho ri z o n t a l du text e

• {text- alig n: left; } (align é à ga u c h e)

• {text- alig n: rig h t; } (align é à droit e)

• {text- alig n: ce n t e r; } (centr é)

• {text- alig n: justif y; } (justifi é) lin e- hei g h t D é t e r m i n e l’es p a c e entr e les

lign e s du text e

• {line- hei g h t: nor m a l ; }

• {line- hei g h t: 20 pt; } (20 poi n t s entr e ch a q u e lig n e)

dis p l a y D é fi n i t de s blo c s d’affi c h a g e • {displ a y : blo c; } (les inf o r m a t i o n s so n t affic h é e s en blo c : un e lign e est pa s s é e av a n t et ap r è s le blo c)

• {displ a y : list-ite m ; } (les info r m a t i o n s so n t affi c h é en list e)

list-styl e- typ e D é t e r m i n e le typ e de pu c e ou de nu m é r o t a t i o n de s lig n e s

• {list-styl e- ite m : dis c; } (puc e en for m e de dis q u e)

• {list-styl e- ite m : circl e; } (puc e en for m e de cer cl e)

• {list-styl e- ite m : sq u a r e ; } (puc e en for m e de carr é)

• {list-styl e- ite m : de c i m a l ; } (nu m é r o a t i o n dé c i m a l e : 1 2 3 …)

(23)

pa d d i n g D é t e r m i n e un es p a c e m e n t de la taill e vo u l u e

• {pad d i n g- bott o m : 20 p x; } (esp a c e m e n t de 20 pix el s en ba s)

• {pad d i n g- top: 20p x; }

(esp a c e m e n t de 20 pix el s en ha u t)

• {pad d i n g- left: 20p x; } (esp a c e m e n t de 20 pix el s à ga u c h e)

• {pad d i n g- rig h t: 20p x; } (esp a c e m e n t de 20 pix el s à droit e)

m a r g i n D é fi n i t la m a r g e • {mar g i n- left : 20p x} (marg e

ga u c h e de 20 pix e l s)

• {mar g i n- rig h t : 20p x} (marg e droit e de 20 pix e l s)

• {mar g i n- to p : 20p x} (marg e su p é r i e u r e de 20 pix e l s)

• {mar g i n- bott o m : 20 p x} (mar g e infé ri e u r e de 20 pix e l s)

P o u r co n n a î t r e les autr e s opti o n s et les autr e s instr u c t i o n s de s fe uill e s de styl e, on pe u t co n s u l t e r les de u x sit e s réfé r e n c é s en an n e x e de ce do c u m e n t .

(24)

Cr é e r un e fe uill e de styl e revi e n t à co d e r la pr é s e n t a t i o n du do c u m e n t , pr é s e n t a t i o n qu’il fa ut évi d e m m e n t av oi r défi n i e au p a r a v a n t .

P o u r se fair e un e idé e si m p l e de s po s s i b i lit é s de mi s e en pa g e , on ré ali s e r a la pr é s e n t a t i o n sui v a n t e du C V :

(Les car a c t è r e s en jau n e so n t clig n o t a n t s .)

APPLICATION : CREATION D’UN CURRICULUM VITAE EN XML 4^ème ETAPE : ECRIRE LA FEUILLE DE STYLE DU CV

TRAVAIL A FAIRE :

Cr é e r la feuill e de styl e du C V en fon c ti o n de s co n s i g n e s sui v a n t e s :

• les titr e s (CV et ru b ri q u e s) ser o n t en ro u g e ;

• le fon d du do c u m e n t ser a en gris ;

• la poli c e de car a c t è r e s ser a Ari a l ;

• la m a r g e de ga u c h e ser a de 30 pix el s ;

• la for m a t i o n et l’ex p é r i e n c e pro f e s s i o n n e l l e les plu s réc e n t e s ser o n t en jau n e et clig n o t e r o n t ;

• on lais s e r a un es p a c e de 30 pix e l s ent r e ch a q u e ru b ri q u e ain si qu’e n t r e le titre et la pre m i è r e ru b ri q u e ;

• le no m de la per s o n n e ser a en obli g a t o i r e m e n t en m aj u s c u l e s ;

• la dat e de nai s s a n c e ne ser a pa s affi c h é e ;

• un es p a c e de 1 0 pix e l s à dr oit e sui v r a le no m ain si qu e la ville ;

• les dipl ô m e s , les sta g e s et les ce n t r e s d’int é r ê t ser o n t es p a c é s ho ri z o n t a l e m e n t de 50 pix e l s.

IMPORTANT : Utiliser un éditeur de texte comme Bloc-notes pour écrire la feuille de style. Une fois le fichier créé, changer son format .txt en format .css.

REPONSE :

Fe u i ll e de styl e Ex p l i c a t i o n s

C V {

fon t- fa m i l y: ari al;

ba c k g r o u n d : gr a y;

Elé m e n t co n c e r n é : le C V

D é b u t de s rè gl e s de pré s e n t a t i o n du C V P oli c e : Ari a l

C o u l e u r de fo n d : gri s

(25)

m a r g i n- left : 30 p x;

}

M a r g e ga u c h e : 30 pix e l s

Fi n de s rè gl e s de pr é s e n t a t i o n du C V titre

{

col o r: re d;

}

Elé m e n t co n c e r n é : le titr e

D é b u t de s rè gl e s de pré s e n t a t i o n du titre C o u l e u r de s car a c t è r e s : ro u g e

Fi n de s rè gl e s de pr é s e n t a t i o n du titre eta t c i v il

{

dis p l a y : blo c k;

pa d d i n g- top: 30p x;

}

Elé m e n t co n c e r n é : la ru b ri q u e état civil

D é b u t de s rè gl e s de pré s e n t a t i o n de la ru bri q u e état civil Affi c h e r la ru b ri q u e en blo c

Es p a c e de 30 pix el s au de s s u s du blo c

Fi n de s rè gl e s de pr é s e n t a t i o n de la ru b ri q u e état civil no m

{

text- tra n s f o r m : up p e r c a s e ;

pa d d i n g- rig h t: 10 p x;

}

Elé m e n t co n c e r n é : le no m

D é b u t de s rè gl e s de pré s e n t a t i o n du no m Tr a n s f o r m a t i o n en m a j u s c u l e s

Es p a c e de 10 pix e l s à droit e du no m Fi n de s rè gl e s de pr é s e n t a t i o n du no m ville

{

}

Elé m e n t co n c e r n é : la ville

D é b u t de s rè gl e s de pré s e n t a t i o n de la vill e Es p a c e de 10 pix e l s à droit e de la ville Fi n de s rè gl e s de pr é s e n t a t i o n de la ville nai s s a n c e

{

dis p l a y : no n e ; }

Elé m e n t co n c e r n é : la dat e de nai s s a n c e

D é b u t de s rè gl e s de pré s e n t a t i o n de la dat e de nai s s a n c e N e pa s affi c h e r la dat e de nai s s a n c e

Fi n de s rè gl e s de pr é s e n t a t i o n de la dat e de nai s s a n c e for m a t i o n

{

}

Elé m e n t co n c e r n é : la ru b ri q u e for m a t i o n

D é b u t de s rè gl e s de pré s e n t a t i o n de la ru bri q u e for m a t i o n Affi c h e r la ru b ri q u e en blo c

Fi n de s rè gl e s de pr é s e n t a t i o n de la ru b ri q u e for m a t i o n dipl o m e 1

{

col o r: yell o w ;

text- de c o r a t i o n : blin k;

}

Elé m e n t co n c e r n é : le 1^er dipl ô m e

D é b u t de s rè gl e s de pré s e n t a t i o n du 1^er dipl ô m e C o u l e u r de s car a c t è r e s : jau n e

C a r a c t è r e s clig n o t a n t s

Es p a c e de 50 pix el s à dr oit e du 1^er dipl ô m e Fi n de s rè gl e s de pr é s e n t a t i o n du 1^er dipl ô m e ex p e r i e n c e p r o

{

}

Elé m e n t co n c e r n é : la ru b ri q u e ex p é r i e n c e pro f e s s i o n n e l l e D é b u t de s rè gl e s de pré s e n t a t i o n de la ru bri q u e ex p é r i e n c e pro.

Affi c h e r la ru b ri q u e en blo c

Fi n de s rè gl e s de pr é s e n t a t i o n de la ru b ri q u e ex p é r i e n c e pr o.

sta g e 1 {

col o r: yell o w ;

Elé m e n t co n c e r n é : le 1^er sta g e

D é b u t de s rè gl e s de pré s e n t a t i o n du 1^er sta g e C o u l e u r de s car a c t è r e s : jau n e

(26)

{

}

D é b u t de s rè gl e s de pré s e n t a t i o n du 1êr ce n t r e d’int é r ê t Es p a c e de 50 pix el s à dr oit e du 1êr ce n t r e d’int é r ê t Fi n de s rè gl e s de pr é s e n t a t i o n du 1êr ce n t r e d’int é r ê t

6. APPLICATION D’UNE FEUILLE DE STYLE A UN FICHIER XML

U n e fois la feuill e de styl e cré é e , il fau t la lier au do c u m e n t , c’est- à-dir e indi q u e r au do c u m e n t qu’il doit utilis e r cett e feuill e de styl e po u r s’affi c h e r .

Il suffit de raj o u t e r l’instr u c t i o n sui v a n t e : <?x m l- styl e s h e e t typ e =" t e x t/c s s" hr ef ="nom du fichier de la feuille de style.cs s"?> à la 2^{è m e} lig n e du do c u m e n t .

APPLICATION : CREATION D’UN CURRICULUM VITAE EN XML 5^ème ETAPE : APPLIQUER LA FEUILLE DE STYLE

TRAVAIL A FAIRE :

A p p l i q u e r la fe uill e de styl e cv c s s au do c u m e n t C V.

REPONSE :

1. O u v r i r le fichi e r cv.x m l av e c le blo c- not e s.

2. R a j o u t e r en 2^{è m e}lig n e l’instr u c t i o n <?x m l- styl e s h e e t typ e ="t e x t/c s s"

hre f ="cvcss.css"?>

3. E n r e g i s t r e r le fic hi e r.

4. O u v r i r cv. x m l av e c Fire f o x .

7. CHANGEMENT DE FEUILLE DE STYLE

P o u r ch a n g e r de fe uill e de styl e, il suffit si m p l e m e n t de re m p l a c e r le no m du fichi e r de la feuill e de styl e act u e l l e par le no m du fichi e r d’u n e autr e feuill e de styl e.

P ar ex e m p l e , <?x m l- styl e s h e e t typ e ="t e x t/c s s" hre f ="cvcss.css"?> de v i e n t <?x m l- styl e s h e e t typ e =" t e x t/c s s" hr ef ="style2.css"?>.

(27)

IV – ANNEXES

1. L’APPLICATION SOUS FORME COMPLETE

a) Le dossier élève (+ annexe 1 p 36)

APPLICATION : CREATION D’UN CURRICULUM VITAE EN XML 1^ère ETAPE : DETERMINER LA STRUCTURE DU C.V P o u r co n s t r u i r e un C. V co m m e tou t do c u m e n t , il fau t défi n i r :

• La pr é s e n t a t i o n de ce s info r m a t i o n s TRAVAIL A FAIRE :

2. R e p r é s e n t e r la stru c t u r e du C. V par un sc h é m a ar b o r e s c e n t .

(28)

TRAVAIL A FAIRE :

A partir de l’arb o r e s c e n c e , écrir e la str u c t u r e du do c u m e n t en X M L en utilis a n t le logi ci e l X M L N o t e p a d .

4^ème ETAPE : ECRIRE LA FEUILLE DE STYLE DU CV TRAVAIL A FAIRE :

Cr é e r la fe uill e de styl e du C V en fon c ti o n de s co n s i g n e s sui v a n t e s :

• les titre s (CV et ru b ri q u e s) ser o n t en ro u g e ;

• le fo n d du do c u m e n t ser a en gris ;

• la poli c e de car a c t è r e s ser a Ari al ;

• la m a r g e de ga u c h e ser a de 30 pix e l s ;

• la for m a t i o n et l’ex p é r i e n c e pr of e s s i o n n e l l e les plu s ré c e n t e s ser o n t en jau n e et clig n o t e r o n t ;

• on lais s e r a un es p a c e de 30 pix e l s entr e ch a q u e ru b ri q u e ain s i qu’e n t r e le titre et la pre m i è r e ru b ri q u e ;

• le no m de la pe r s o n n e ser a en obli g a t o i r e m e n t en m a j u s c u l e s ;

• la dat e de nai s s a n c e ne ser a pa s affic h é e ;

• un es p a c e de 10 pix e l s à droit e sui v r a le no m ain s i qu e la ville ;

• les dipl ô m e s , les sta g e s et les ce n t r e s d’int é r ê t ser o n t es p a c é s hori z o n t a l e m e n t de 50 pix e l s.

5^ème ETAPE : APPLIQUER LA FEUILLE DE STYLE TRAVAIL A FAIRE :

A p p li q u e r la feuill e de styl e cv c s s au do c u m e n t C V.

REMARQUE : cré e r un e fe uill e de styl e (4^{è m e} éta p e) est rel ati v e m e n t co m p l e x e . Afi n d’é vit e r de dé m o t i v e r les élè v e s , on pe u t soit ré ali s e r un e feuill e de styl e plu s si m p l e soit s’e n te nir à l’an a l y s e de la fe uill e de styl e.

b) Le dossier professeur

APPLICATION : CREATION D’UN CURRICULUM VITAE EN XML 1^ère ETAPE : DETERMINER LA STRUCTURE DU C.V P o u r co n s t r u i r e un C. V co m m e tou t do c u m e n t , il fau t défi n i r :

(29)

• La pr é s e n t a t i o n de ce s info r m a t i o n s TRAVAIL A FAIRE :

2. R e p r é s e n t e r la stru c t u r e du C. V par un sc h é m a ar b o r e s c e n t . REPONS E S :

1. Informations figurant dans le C.V :

• Pré n o m

• N o m

• A dr e s s e

• C o d e po s t a l

• Vill e

• Tél é p h o n e fixe

• Tél é p h o n e po rt a b l e

• A d r e s s e de co u r ri e l

• D a t e de nai s s a n c e

• P e r m i s de co n d u i r e

• Di pl ô m e s

• A n n é e s d’o b t e n t i o n de s dipl ô m e s

• Sta g e s eff e c t u é s

• A n n é e s de ré ali s a t i o n de s sta g e s

• C e n t r e s d’int é r ê t s

2. Structure du C.V : C V

Titr e Et a t civil Titr e

Pré n o m N o m A dr e s s e C o d e po s t a l Vill e

Tél é p h o n e fixe Tél é p h o n e port a b l e A dr e s s e de co u r r i e l

(30)

Di pl ô m e 2

Ex p é r i e n c e pr of e s s i o n n e l l e Titr e

Sta g e 1

A n n é e de ré ali s a t i o n C o n t e n u

Sta g e 2

A n n é e de ré ali s a t i o n C o n t e n u

C e n t r e s d’int é r ê t Titr e

C e n t r e d’int é r ê t 1 C e n t r e d’int é r ê t 2

2^ème ETAPE : ECRIRE LA STRUCTURE EN XML TRAVAIL A FAIRE :

A partir de l’arb o r e s c e n c e , écrir e la str u c t u r e du do c u m e n t en X M L (ne pa s utilis e r de car a c t è r e s ac c e n t u é s).

REPONS E :

<CV>

(31)

</etatcivil>

</diplome1>

</diplome2>

</formation>

</stage1>

</stage2>

</experiencepro>

</centresinteret>

</CV>

3^ème ETAPE : ECRIRE LA STRUCTURE EN XML (SUITE) TRAVAIL A FAIRE :

A partir de l’arb o r e s c e n c e , écrir e la str u c t u r e du do c u m e n t en X M L en utilis a n t le logi ci e l X M L N o t e p a d .

REPONS E : PRODUCTION DES ELEVES

(32)

• le fo n d du do c u m e n t ser a en gris ;

• la poli c e de car a c t è r e s ser a Ari al ;

• la m a r g e de ga u c h e ser a de 30 pix e l s ;

• la for m a t i o n et l’ex p é r i e n c e pr of e s s i o n n e l l e les plu s ré c e n t e s ser o n t en jau n e et clig n o t e r o n t ;

• on lais s e r a un es p a c e de 30 pix e l s entr e ch a q u e ru b ri q u e ain s i qu’e n t r e le titre et la pre m i è r e ru b ri q u e ;

• le no m de la pe r s o n n e ser a en obli g a t o i r e m e n t en m a j u s c u l e s ;

• la dat e de nai s s a n c e ne ser a pa s affic h é e ;

• un es p a c e de 10 pix e l s à droit e sui v r a le no m ain s i qu e la ville ;

• les dipl ô m e s , les sta g e s et les ce n t r e s d’int é r ê t ser o n t es p a c é s hori z o n t a l e m e n t de 50 pix e l s.

REPONS E :

C V {

font- fa m il y: ari al;

m a r g i n- left : 30p x;

} titre {

col o r: re d;

} etat c i v i l {

dis p l a y : blo c k ; pa d d i n g- to p: 30 p x;

} no m {

(33)

pa d d i n g- rig h t: 10 p x ; }

ville {

pa d d i n g- rig h t: 10 p x ; }

nai s s a n c e {

for m a t i o n {

}

dipl o m e 1 {

col o r: yell o w ;

pa d d i n g- rig h t: 50p x;

}

ex p e r i e n c e p r o {

dis p l a y : blo c k ;

(34)

}

ce n t r e s i n t e r e t {

}

ce n t r e i n t e r e t 1 {

}

5^ème ETAPE : APPLIQUER LA FEUILLE DE STYLE TRAVAIL A FAIRE :

A p p li q u e r la feuill e de styl e cv c s s au do c u m e n t C V.

REPONS E :

1. O u v r i r le fic hi e r cv.x m l av e c le blo c- not e s .

2. R aj o u t e r en 2^{è m e}lign e l’instr u c t i o n <?x m l- styl e s h e e t typ e =" t e x t/cs s"

href ="cvcss.cs s"?>. O n obti e n t alor s le fichi e r X M L sui v a n t :

<?x m l ver s i o n = " 1 . 0" en c o d i n g = " u t f- 8"?>

<?x m l- styl e s h e e t typ e =" t e x t/c s s" hr ef =" c v c s s . c s s "?>

<C V>

</etatci v il>

(35)

</dipl o m e 1 >

</dipl o m e 2 >

</for m a t i o n >

</sta g e 1 >

</sta g e 2 >

</exp e r i e n c e p r o >

</centr e s i n t e r e t >

</CV>

3. E nr e g i s t r e r le fichi e r.

4. O u v r i r cv.x m l av e c Fir e f o x .

c) Remarque

Le s éta p e s 3 et 4 so n t re d o n d a n t e s : en eff e t, da n s les de u x ca s, il s’a git d’éc rir e la stru c t u r e X M L du C. V : m a n u e l l e m e n t à l’éta p e 3, en utilis a n t un logi c i e l sp é c i fi q u e à l’éta p e 4.

C e p e n d a n t , il ap p a r a î t utile de m a î t r i s e r les de u x as p e c t s de l’écrit u r e d’u n e str u c t u r e X M L :

• l’écrit u r e m a n u e l l e pe r m e t de mi e u x ap p r é h e n d e r à la fois la str u c t u r e du do c u m e n t et les rè gl e s d’utili s a t i o n de s bali s e s X M L ;

• l’utili s a ti o n d’u n logi ci e l dé d i é pe r m e t d’êtr e plu s effi c a c e par la suit e da n s la cré a t i o n

(36)

2. VARIANTE DE L’APPLICATION

L’éc ri t u r e d’u n e feuill e de styl e (4^{è m e} éta p e de l’ap p li c a t i o n) est co m p l e x e , lon g et as s e z difficil e.

Afi n de ne pa s dé m o t i v e r les élè v e s , on pe u t tra n s f o r m e r le suj e t de la 4^{è m e} éta p e no n plu s en écrit u r e m a i s en lect u r e de la feuill e de styl e : le rés u l t a t et la feuill e de styl e so n t fo u r n i s à l’élè v e qui doit alor s dét e r m i n e r le se n s de s diff é r e n t e s instr u c t i o n s de la fe uill e de styl e.

C e tt e éta p e de v i e n t alor s (les autr e s éta p e s de m e u r e n t inc h a n g é e s) : a) Le Dossier élève (+ annexe 1 p 36)

4^ème ETAPE : ECRIRE LA FEUILLE DE STYLE DU CV U n e feuill e de styl e a ét é ap p li q u é e au C V po u r obt e n i r le rés u l t a t sui v a n t :

TRAVAIL A FAIRE :

A n a l y s e z la fe uill e de styl e ci-de s s o u s et à l’aid e de l’an n e x e 1, ex pli q u e z- en les diff é r e n t s élé m e n t s .

C V {

} titre {

col o r: re d;

} eta t c i v il {

} no m {

} ville {

(37)

}

nai s s a n c e {

for m a t i o n {

}

dipl o m e 1 {

col o r: yell o w ;

}

ex p e r i e n c e p r o {

} sta g e 1 {

col o r: yell o w ;

}

ce n t r e s i n t e r e t {

}

ce n t r e i n t e r e t 1 {

}

b) Le dossier professeur

4^ème ETAPE : ECRIRE LA FEUILLE DE STYLE DU CV U n e feuill e de styl e a ét é ap p li q u é e au C V po u r obt e n i r le rés u l t a t sui v a n t :

(38)

TRAVAIL A FAIRE :

A n a l y s e z la fe uill e de styl e ci-de s s o u s et à l’aid e de l’an n e x e 1, ex pli q u e z- en les diff é r e n t s élé m e n t s .

REPONS E :

C V {

}

Elé m e n t co n c e r n é : le C V

D é b u t de s rè gl e s de pré s e n t a t i o n du C V P oli c e : Ari a l

C o u l e u r de fo n d : gri s M a r g e ga u c h e : 30 pix e l s

Fi n de s rè gl e s de pr é s e n t a t i o n du C V titre

{

col o r: re d;

}

Elé m e n t co n c e r n é : le titr e

D é b u t de s rè gl e s de pré s e n t a t i o n du titre C o u l e u r de s car a c t è r e s : ro u g e

Fi n de s rè gl e s de pr é s e n t a t i o n du titre eta t c i v il

{

}

Elé m e n t co n c e r n é : la ru b ri q u e état civil

D é b u t de s rè gl e s de pré s e n t a t i o n de la ru bri q u e état civil Affi c h e r la ru b ri q u e en blo c

Fi n de s rè gl e s de pr é s e n t a t i o n de la ru b ri q u e état civil no m

{

}

Elé m e n t co n c e r n é : le no m

D é b u t de s rè gl e s de pré s e n t a t i o n du no m Tr a n s f o r m a t i o n en m a j u s c u l e s

Es p a c e de 10 pix e l s à droit e du no m Fi n de s rè gl e s de pr é s e n t a t i o n du no m ville

{

}

Elé m e n t co n c e r n é : la ville

D é b u t de s rè gl e s de pré s e n t a t i o n de la vill e Es p a c e de 10 pix e l s à droit e de la ville Fi n de s rè gl e s de pr é s e n t a t i o n de la ville nai s s a n c e

{

Elé m e n t co n c e r n é : la dat e de nai s s a n c e

D é b u t de s rè gl e s de pré s e n t a t i o n de la dat e de nai s s a n c e N e pa s affi c h e r la dat e de nai s s a n c e

Fi n de s rè gl e s de pr é s e n t a t i o n de la dat e de nai s s a n c e for m a t i o n

{

}

Elé m e n t co n c e r n é : la ru b ri q u e for m a t i o n

D é b u t de s rè gl e s de pré s e n t a t i o n de la ru bri q u e for m a t i o n Affi c h e r la ru b ri q u e en blo c

Fi n de s rè gl e s de pr é s e n t a t i o n de la ru b ri q u e for m a t i o n dipl o m e 1

{

col o r: yell o w ;

}

Elé m e n t co n c e r n é : le 1^er dipl ô m e

D é b u t de s rè gl e s de pré s e n t a t i o n du 1^er dipl ô m e C o u l e u r de s car a c t è r e s : jau n e

Es p a c e de 50 pix el s à dr oit e du 1^er dipl ô m e Fi n de s rè gl e s de pr é s e n t a t i o n du 1^er dipl ô m e ex p e r i e n c e p r o

{

}

Elé m e n t co n c e r n é : la ru b ri q u e ex p é r i e n c e pro f e s s i o n n e l l e D é b u t de s rè gl e s de pré s e n t a t i o n de la ru bri q u e ex p é r i e n c e pro.

Fi n de s rè gl e s de pr é s e n t a t i o n de la ru b ri q u e ex p é r i e n c e pr o.

sta g e 1 {

Elé m e n t co n c e r n é : le 1^er sta g e

D é b u t de s rè gl e s de pré s e n t a t i o n du 1^er sta g e

(39)

col o r: yell o w ;

}

C o u l e u r de s car a c t è r e s : jau n e C a r a c t è r e s clig n o t a n t s

Es p a c e de 50 pix el s à dr oit e du 1^er sta g e Fi n de s rè gl e s de pr é s e n t a t i o n du 1^er sta g e ce n t r e s i n t e r e t

{

}

Elé m e n t co n c e r n é : la ru b ri q u e ce n t r e s d’int é r ê t

D é b u t de s rè gl e s de pré s e n t a t i o n de la ru bri q u e ex p é r i e n c e pro.

Fi n de s rè gl e s de pr é s e n t a t i o n de la ru b ri q u e ce n t r e s d’int é r ê t ce n t r e i n t e r e t 1

{

}

Elé m e n t co n c e r n é : le 1^er ce n t r e d’int é r ê t

D é b u t de s rè gl e s de pré s e n t a t i o n du 1êr ce n t r e d’int é r ê t Es p a c e de 50 pix el s à dr oit e du 1êr ce n t r e d’int é r ê t Fi n de s rè gl e s de pr é s e n t a t i o n du 1êr ce n t r e d’int é r ê t

3. ANNEXE DE L’APPLICATION

Annexe 1 : LES INSTRUCTIONS DES FEUILLES DE STYLE a) Les caractères :

fon t- fa m i l y dét e r m i n e la poli c e ch o i s i e • {font- fa m i l y : ari al; }

• {font- fa m i l y : cali b ri; }

• etc fon t- styl e per m e t d’affi c h e r les

car a c t è r e s no r m a l e m e n t , en itali q u e ou en

• {font- styl e : itali c; }

• {font- styl e : obli q u e ;}

(40)

• {font- w e i g h t : bol d e r ; } (« plu s gra s »)

fon t- siz e D é fi n i t la taill e de s car a c t è r e s {font- siz e : 1 2 p x ; } (taille 1 2) text- tra n s f o r m Tra n s f o r m e les mi n u s c u l e s

en m a j u s c u l e s ou l’inv e r s e

• {text- tra n s f o r m : up p e r c a s e ; ) (tran s f o r m e les mi n u s c u l e s en m a j u s c u l e s)

• {text- tra n s f o r m : lo w e r c a s e ; } (tran s f o r m e les m a j u s c u l e s en mi n u s c u l e s)

text- de c o r a t i o n P er m e t de so u li g n e r , surli g n e r , ba rr e r ou fair e clig n o t e r le text e

• {text- de c o r a t i o n : un d e r l i n e ; ) (souli g n é)

• {text- de c o r a t i o n : ov e r li n e ; ) (surlig n é)

• {text- de c o r a t i o n : lin e- thr o u g h ; ) (barr é)

• {text- de c o r a t i o n : blin k; } (clign o t a n t)

lett e r- sp a c i n g D é fi n i t l’es p a c e m e n t entr e les car a c t è r e s

• {letter- sp a c i n g : 4pt; } (4 poi n t s entr e ch a q u e car a c t è r e)

w o r d- sp a c i n g D é fi n i t l’es p a c e m e n t entr e les m o t s

• {wor d- sp a c i n g : 4pt; } (4 poi n t s entr e ch a q u e m o t)

b) Couleur du texte et de l’arrière-plan

col o r D é fi n i t la co u l e u r de s car a c t è r e s

• {colo r: blu e; } (bleu)

• {colo r: gr e e n ; } (vert)

• {colo r: yell o w ; } (jaun e)

• etc ba c k g r o u n d D é fi n i t la co u l e u r de l’arri è r e

pla n

• {bac k g r o u n d : blu e; } (bleu)

• {bac k g r o u n d : gre e n ; } (vert)

• {bac k g r o u n d : yell o w ; } (jaun e)

(41)

• etc

c) Les alignements et espacements

text- alig n D é fi n i t l’alig n e m e n t ho ri z o n t a l du text e

• {text- alig n: left; } (align é à ga u c h e)

• {text- alig n: rig h t; } (align é à droit e)

• {text- alig n: ce n t e r; } (centr é)

• {text- alig n: justif y; } (justifi é) lin e- hei g h t D é t e r m i n e l’es p a c e entr e les

lign e s du text e

• {line- hei g h t: nor m a l ; }

• {line- hei g h t: 20 pt; } (20 poi n t s entr e ch a q u e lig n e)

dis p l a y D é fi n i t de s blo c s d’affi c h a g e • {displ a y : blo c; } (les inf o r m a t i o n s so n t affic h é e s en blo c : un e lign e est pa s s é e av a n t et ap r è s le blo c)

• {displ a y : list-ite m ; } (les info r m a t i o n s so n t affi c h é en list e)

list-styl e- typ e D é t e r m i n e le typ e de pu c e ou de nu m é r o t a t i o n de s lig n e s

• {list-styl e- ite m : dis c; } (puc e en for m e de dis q u e)

• {list-styl e- ite m : circl e; } (puc e en