•

,% -, % .$,. /% 0 // . % $,

•
1% 2 . )

•
3 3 4 .- /%

•
3 3 /1/
! " # " $%
+
! & ' ( )# ( *

.$&- /-$ - % $, 5 0

! "" # $ %

! "# $
# #
 " %$&$ % " %$&$ %

• 5 6 7 8! ' • % ;8 !
9 : 8 8 ; 8 ; 88 ;! /9 / ;:=
178 % < % / ; 1%%/= < 8; + B=(=(=+

• 8 ; 1%%/ ; 6; 3 > ? '3 • ' C 8 3 @ 6?' '3 A ;

@ 6 &- = 8 &- 9& - :
< 8; 8 ##@@@=3 3; =
• 6; 3 ; 8; ! < 9; !
! <:A ! < ; ;
8 ; % . ;/ ;# / ;
9%./# /:=

N° 5 Sahar Maâlej N° 6 Sahar Maâlej

" %$&$ % " ' % ()

• . ; D 8 • D ! ; 78 < !!8 8 ! !6 ;
E3 3; = EA ; '3 F G ! *( 8 4 ' 0 =
• , 9 , ' : ' 8 ; • +HJH
; ; ;D&- 8! /= • % 0 8 / ; / 7 6 7
9. -,: K
• / < 8; A 8 C E 8 ##@@@=3 3; = E ' =
'3 ' ? 8 ##B*=+ 2=+H=+*B 9 I
• ; K 8
' 3; :=
178 % < L 8 3 3 9 !" :=
• ; K 8 ; 8
# !! =
• ; 8;! ! ; $ C M
; < A/ D 6N ; ! =

N 7 Sahar Maâlej N° 8 Sahar Maâlej

 * + , * + ,
• / ; ; ; ' 8 ?
• ; ! 88; !8
' ;D A < 6 ' P
< 8 !8 !
& ; 3 ; D 88; .; <8; ! 8
D / ' !=
' =
! 8 ; ' =
& ; 3 ; ' ? ; 8 ; ; '
!=
/ 3 ; 88; =

.; '
% %
; ; ' 8 ;D ! D
8 ; 91%%/A %/A O:
3 ; %./# /
8 ; ! ; ;
!8 ? = ,=0 ; < ;; ; ! ? %./# /=
N 9 Sahar Maâlej Sahar Maâlej
N° 10

* + , * + ,
& ' # • ( $ ("! - , #
• 88; = ). ' +
•
8 ; ; !
! %./# /A 8 '
$ ! 3 ;3
' !8 !3 ; =
• ("! )( " ! (
* + # 8 ;
; !8 ; !; 9 ;: ' ;
' 3 !; =
• , ) , + # 8 ; 8
; !; ! '
3 !; =
N° 11 Sahar Maâlej N 12 Sahar Maâlej
 * + , * + ,

! "# $ # ). ' + • $ / 0 $ 6;
#; 3 ; 8 ! ! 8 8 '
78 8 3 = ; 8 3 3> ? 12 I;
K A ; ! ;
! ; ; 6 @ ;D =
• 1 $ !! A ' A ? ;D
8 ' ;D < ! 8 !
98 ' 1%%/ J(:=
• P D; K ; ' 8! ?
;D ; ; 8 3 ! =
$ ;D 8 P C ;; • 3 $ !! !' ; 88!
Q <A A 88; A 3; . A $8 A 8 8 @ Q A
=
9 : !' ; 88! 8 =

N 13 Sahar Maâlej N° 14 Sahar Maâlej

* + , * + ,
• !! ; ; 3 3 ; !8 • # % & # A
$ 8 D! 3 = =

• !! #
• 4 #
+ 8 ;D&- D A; ' P
o
' =
; 8 ' 6; ;D&- A ; 3 ;
& D! 6; ; ; ; ' ; ! ; ! 8 ' 7 ; P ; ! %=
8 J(=
• L’URL
) $ ' P ? ;D ! http://www.unsite.net/rechercher?nom=T.&prenom=Nicolas
A / 8! ;D
' 7! = o /$ %

* $ !8 ?; P ' 7 !8 • ' ; D 88 ;D&- =

1%%/ 8 ! D ; ! ? = 1 ' ; ; P 1%%/=
2 ! =/ ' ;; 8 3 • ; 3 ; !
A ' ;; < P ! 6; = 8 P =
N° 15 Sahar Maâlej N° 16 Sahar Maâlej
 * + , #- # ., % #- !/ # .,
• # % & #) + ' #
• $ #
• & ' # - 8 ; ? 8; P 8 ;
8 <# ;A 3 #3 =
' ' ' & ; ! ; 8 8 ! 8
& 3 ' ; 5 6=
• 5 $ #
,D D ; 8! A
= 8 6; ! 8 ; ' ' !
; ! =
; ; 3 ?N ! =

N° 17 Sahar Maâlej N° 18 Sahar Maâlej

#- # ., % #- !/ # ., #- # ., % #- !/ # .,

, 6 0 • ' 88 ;
' ;3 A 6 A; 6; 3A ; A = 9; 3 3 8 ! :=

• ' S ' 3> ?

9 8 I
& / 0 ' ?; 9? ; ;; A 6 ;
' ;! : 8 ; ' 9 R! ' :A 8; < := ; 3 3 8 3 '
8! = 8! ; ! 8 ' ; ; 3 9/1/A /A ' A =:=
P $ A
8 A A ; 3 A = ; !" A
; 8 =

N° 19 Sahar Maâlej N° 20 Sahar Maâlej

 # # ! &

$ ; < 8; # ;; & % <8 T !; UA

;D 8 9 3 8
!; :=
3%
/ < 8 6;
3 ) $ % + ; 6 <
! ; 8 A D; '
9 ("! :=
7
6 0 8 ) % +?
8 < 9 , :=

N° 21 Sahar Maâlej N 22 Sahar Maâlej

' ' ( )

• 7 6 ! ; ! ; !
8 ; 8 ; 8 ; =
V ; ' 6 ! ; @ 6 91%%/:= ! 8 6; ;D 3 ;
' @=
• & 3 8 N ' ,,%/ ! 6 ;;
' ' ! ; ;I A ; 3! ! ; 3 A ;
===

• ; 3 8
0 8 ! P 6 =

• ! 3

N° 23 Sahar Maâlej N 24 Sahar Maâlej

 % % ** $ % % ** $ ( )
• 8 ? 3 8 #
D 6 !A ! ! D A D 8; A 8 ' ; ; ' ! =
D 8 A 6 ! ' 3 ; ; A ;7 ; ! 8
• D 8 3 ? ;D 6;
6 ; ; =
• 5 # ' ;? ; D
; 3 ' P !
• #
' ; ; 3 8 =
D <8! W ; ; D
. 6 K 8 =

N° 25 Sahar Maâlej N 26 Sahar Maâlej

+& &+ ,+

• ! 8 ? ; D 7!
D ; ? A ! 3
;3 ; ' ? ;; = 8 ; 7! 8 6N
• % ; $ - $ A
• 8 =
I ? ; 3 ! '
8 ! D ; • 8 !8 < 7
' = ; ' =
• 8 ! ! =

N 27 Sahar Maâlej N° 28 Sahar Maâlej

 ,+ ( ) $ %' % (''')

• & 7 8 6;
• Q%/ ' D! 3 !
8 ; A ' '3 A 8 3
%./# /=
;3 =
• ;8 A • ' ; 8; ;D =
=
(
• ; !;! 3 8 & !! ?; 8 ! D ;
8 3 ' ; <= • < A 3 A A ' ! A OA
; Q%/ ' 8 ; ! =
/ = • ; 63 ' D A
8 ; ' ; ' =
78 <

N 29 Sahar Maâlej N° 30 Sahar Maâlej

$ %' % ( ) $ %' % ( )

• 666 D ; 8 6 '3 P 8 6; D 1%
!! 9178 % < % / ;: D 5 6 3 A 88; N ' AO
!" 9178 % < L 8 3 3 : % 8 ; 3 ; ; ! 8 ;
12 9& - : '3 8 8; > !' ; ! =
< 8; $
88 1%%/ ' A
# , 8 '
D ; $ ;D ; 8 3 ? '
3 A ; ; 78 < = O
$ ' ; 8 3 =
< 8; $
$ 5 6 ' ; !=
C ;; Q Q <
$ ;D ? ;D! =
, 8 , '3
<8;
N 31 Sahar Maâlej N° 32 O Sahar Maâlej
 . / # 0+1 2

# %/ %$# 0+1 3
, - # # "
$ 44 0 3 (% 5 4 )

!6 4 "$ #4 % 5
- 36 4 "$ #4 %

76 4 "$ #4 % *$

86 4 "$ #4 % 4%

9 * %

. / # 0+1 2 . / # 0+1 2

• 1% ; ! K 1% 3 3 ?6 ; 8
8 8! 8 3 @ 6 8 ' P ; 8 78 <
'3 =
• .D 8 ; 3 3
8 3 = • !;! D N <
!8 = 6 ; 8!! 8 ; '3 =
• # 7 < %- .%
• $ #; • ;; N !; ! 8 ; 3
• & ; 0
• 8 • & 6 ; 8 8; 8
• , '3 8 T' ; U; ! ; 6 8;! =
• - 6 8 <
• ' 8 ; !

N° 35 Sahar Maâlej N° 36 Sahar Maâlej

 • 5) . 9+HH*: 8 ##@@@=@)= 3
• !" 9: 9 X +HH*: , ' ;!
• !" 9: 9 ' 6 +HH2: , ' 6
• !" 9 9N ' +HHB:
/ 3 8; . )
4 !
• !" 9: 9 ' ; +HHJ:
#) 8
• !" 9: 9 ! 6 +HHH:
L 3 ; ;
• ; !" 9: 9N ' (((:
0 ! ; ; Y
• !" < 8 (()A 8 ((B 5).A 8 !' 88; 5 6
(+*

N° 37 Sahar Maâlej N 38 Sahar Maâlej

# %/ %$# 0+1 3
• 8 = = ;
• ( 0 # • 1 > 1!7%? #
+= & ! '3 5 6 ; ' ; 8; 8 '3 ; 78 D 3 =
1% ; ;; ; 8 3 ! =
= P ! ;
)= . 8 A • * #

• * @ $ ( = A #

5 = 8!8 8 ! 9
N 39 Sahar Maâlej N° 40 Sahar Maâlej
N° 41 Sahar Maâlej N 42 Sahar Maâlej

! !
"
• 1!5 5( !5, 8A !!25B1!( #
• 3 # • D0E # !' ; < 9; ;! A ;
8 A =: Z[
• D E # ;I!;! ;
• C C"3 !( 5"B25&1C( #
• D E# I < P 8 A 8;
3 # 8 ; ' =
• D E # ;I!;! 9 8 : 3! I
9 <= % N :=
• D E# ; !8 ; 8 =
1 #

; 8 ; ! 6 ; A I ? ;
8 ' ; ! =
N 43 Sahar Maâlej N 44 Sahar Maâlej
 $ 44 0 3 # !
• D FE # !' < 8 3 =
• N D A 8; !;! 1% *=(+ 6 ; A 3 #
N ; ! 8 ; ! 8 !' = %
!;! 88 ! !" <=
• / < 3! ; 6 ; A !" <
!3 ; ; 8
3 8 A 2 ' #
( *((
;
! A
;; 8 3 A
;; 3 ; A
N 8; ' ;; / 9 3; !8 A L
! ; ; A 8; :=

N° 45 Sahar Maâlej N° 46 Sahar Maâlej

# ! # !
• & ' ! 1 ;2 ;D ; 0
' =

• & 0 '
? 0 ?; 8 ; '3 ;
!' ; 88 98 < 8; A \ VA \ 6; V \ 3V:=

• !" < ; ' < !;!

=

N° 47 Sahar Maâlej N° 48 Sahar Maâlej

 # !
# !
&4 0 % ,$$
• 6 < 5 6 <
N D 1% ; • D E#
\ ' ZE 'EVA \ '
; Z] ; EVA \ ' ZE EVA • D7 E#
8 ; $ A %
4 ; =

• !" < $ 9B #
' 8 ! ; D!;! D 8
! 8 D 8 3 5 6 6 ^'
' C ; . 8 '3
;D 8; F D ; 8 8 3 =

N 49 Sahar Maâlej N 50 Sahar Maâlej

# ! # !
&4 # $ &4

D!;! ( D!;! $ ! 6;
•
• ; 88 ; 8; = • 3 #

• 3 #

N° 51 Sahar Maâlej N° 52 Sahar Maâlej

 # ! # !
&4 # &4 %
D!;! ! 1 ; D!;! ; !8 ; '
!8 =
9B #
9B #
4 8 ' C ; C. 8 N ; 3 ! ;
4 8 ' C ; C ;D!;! ; 8 ; = R !=
3 # 3 #

N° 53 Sahar Maâlej N° 54 Sahar Maâlej

# ! 6 4 "$ #4 %
&4 % 5

4 8 ' C ; C. 8 N ; 3 ! ;
R !=
3 #

• ! D 6;
• . 8
• . 8 < A 3 A =
• $ 8 0 ' 6; 6;

N 55 Sahar Maâlej N° 56 Sahar Maâlej

 6 4 "$ #4 % 6 4 "$ #4 %
5 5
0 #
3 #

N 57 Sahar Maâlej N 58 Sahar Maâlej

6 4 "$ #4 % 6 4 "$ #4 %
5 5
9B# G $ > $ 9B#
0 ' $ %4 ' $ !" ) H $
0 $ $ 9 *((+I $ #
3 # • 0 ' = 9
• 0 0
$ A ' 9
I
I= A
J $ 4
0 I > =#

' ' C !! 6; < ? ;I 1% *A

' ' C ; !;!
! " =5
N 59 Sahar Maâlej N 60
!" <= Sahar Maâlej
 6 4 "$ #4 %
% )0 ) % % 1 1% 1
5
K !" #
La fusion de lignes et de colonnes d’un tableau : WHITE #FFFFFF

• Fusion horizontale : F N < ; 9 SILVER #C0C0C0

8; :A ; ;D 6 GRAY #808080

BLACK #000000

• Fusion verticale : F N < ;3 9 8; :A RED #FF0000

; ;D 6 MAROON #800000

YELLOW #FFFF00
• ; < A ;; D 8 ; ;; ; A ; 6 ;
OLIVE #808000

LIME #00FF00

GREEN #008000
• 6 T U T / U8 8 ' ; AQUA #00FFFF

; 6 ;; ; ? = TEAL #008080

BLUE #0000FF

NAVY #000080

FUCHSIA #FF00FF

PURPLE #800080
N° 61 Sahar Maâlej N° 62 Sahar Maâlej

6 4 "$ #4 % 6 4 "$ #4 %

• # 3 #

0 D E#
• 2 $ # ' ;D ; ; =
• ( 0 # 8! ; ' ; !6 ; ; ! =
• ! # ? ; !6 !;!
9+_ _ _ _ :=
.
• #
• . 8 6
• 3 3 1%
0 D E#
• ! #

N° 63 Sahar Maâlej N° 64 Sahar Maâlej

 6 4 "$ #4 %
6 4 "$ #4 %
*$
• #
<dl> -> la liste • 6 0 ; ! 8
<dt> terme de la liste </dt> 6 > !
<dd> description du terme </dd> o ? 5 6A ' !
</dl> o- ;; ! A ;; ; A ;I A;
3 # ! !;!8 ;I 8 ;
o I < ; <; I I
\ ;V
\ V !; < \# V 3
\ V 3 < O\# V o- ;; ; ; 8 ;
\ V > ; \# V 8 6; D ; 5 6
\ V 8!8 ; O\# V
\ V. ; \# V o !; 8!! 8 3 5 6
\ V > ; O\# V o ! '
\# ;V
o…

N° 65 Sahar Maâlej N° 66 Sahar Maâlej

6 4 "$ #4 % 6 4 "$ #4 %
*$ *$
• $ 0 A !" < • 8 ; ' ' ; 6 ;
A ; ? ; # <form id ="keyword" >...</form>
# $% &'()
' 0 D E #
• Action :
• 1% 2 8; 0 A A sert a preciser une URL a laquelle le formulaire est
; A ; envoye
o • Method :
precise le mode d'envoi des donnees : par "Get"
o ou par "Post ".
o • ' ; ' 7! 8 ; ! E %E 8 8 ;D&-
o ' =
' ; ' 7! 8 ; ! E/$ %E ' 7!
8 =

N° 67 Sahar Maâlej N° 68 Sahar Maâlej

 6 4 "$ #4 % 6 4 "$ #4 %
*$ *$
9$ 3 • / 3 8 ; 6 ; 78
D EA ; ; C
• 8 78 texte # 8 D <
;3 A ; 3 A O= <Fieldset>...</Fieldset>
mot de passe
• 8 78 #8 3 • / = A ;
8 A ;D 3 ;! < 7 < ; C; 6 ; !6 ?;
8 = ; = <div id="form">....</div>
• 8 78 email,etc. • / ; ; ;3 ;3 ; 8
<input> ' ; ; ; 7; . A ; ; C;
8 < ;3 ! !8 ; 6 ;
0 ; ' ; L IL / I 9 6 ; D $E=
<div id="contact-form"
style="font-family:Arial Narrow;>
<form id="contact" method="post" action="">
<fieldset>
0 name ; 8A ; ' <label for="name">Nom</label>
8 ; ;D ' ; = <input type ="text" name="name"/>
N 69
retrouver la valeur Sahar Maâlej
</fieldset>
N° 70 Sahar Maâlej
<fieldset>
<label for="email">Email</label>
<input type ="email" name="email"/>
</fieldset>
</form>
</div><!--end of contact-form -->
6 4 "$ #4 % 6 4 "$ #4 %
*$ *$
• 8 $ 0 8 6; 8 ; 8 • 8 $ 0 8 6; 8 ; 8
D E D E 9 :
' # 6; 3 ? 3 88 ;
; = # !8; ; ' 8 D !
8 ; ; ; 8 3 5 6 3! =
<input type="email" required />
<input type ="text" name = "fname" autofocus="autofocus"/>
# 8 < D ? ;I !
D 8 D ! = # 8! ;
<input name = "fName" placeholder="Prenom"/> '! ! '! ; 8 =
/ P T U8 8 8! T U
# 9 <8 !3 ; : 8 8 ; ; A ' ' =
8 D ! ; !8 ' ; ; 8=

<input type = "text" id="empID" name="EmployeeID"

required pattern="[A-Z]{2}[0-9]{4}" title="ID d'employe commencant
par deux lettres majuscules suivies de quatre chiffres"/>
N° 71 Sahar Maâlej N° 72 Sahar Maâlej
 6 4 "$ #4 % 6 4 "$ #4 %
*$ *$
0 disponibles deja 8 ; 8D E 9 %78 8 Textarea

G #8 D 6 ' ; 8 ! 8
; =
<label for="msg">Message</label>
(> # ;; 8 = <Textarea id="l'identifiant"
Name="Le nom qui identifie le texte"
" # ;; < ; ? = Rows="nombre de lignes visibles">
Cols="nombre de colonnes visibles">
Saisissez votre motivation ici
2 #8 ; ' ; WD ;7DD ' ;; ; </Textarea>
8=
8 0 # 8 ; ' ; WD 6; DD 8
D 8P ;D ; ? 8=

% ; 8 < ;3 A 8 N ;
6 M N M 0 N=
N° 73 Sahar Maâlej N 74 Sahar Maâlej

6 4 "$ #4 % 6 4 "$ #4 %
*$ *$
9 %78 8 SUBMIT 9 %78 8 RESET

• .D 6 D ' ? $ .D 6 ? ; ' ;
; ' = ; =
• .I ; ' 8 $ ; ; = • ; ! ! 8 ; ' ; E E ;D 6 78
• ; ! !8 ; ' ; WD 0 DD ;D 6 78 6 ; \ 8 V \6 V=
6 ; \ 8 V \6 V=
3 #
3 # <input type="reset" name="effacer" id="effacer" value="Effacer toutes les
valeurs">
- <input type="submit" name="envoyer" id="envoyer" value="Valider">
<button type="reset" name="effacer" id="effacer">
<button type="submit" name="soumettre" id="soumettre">
Reinitialiser</button>
soumettre <br> les reponses </button>

N° 75 Sahar Maâlej N° 76 Sahar Maâlej

 6 4 "$ #4 % 6 4 "$ #4 %
*$ *$
<9 %78 8 K9 %78 8
8 ? !; 8 ; 8D E 6 ; ! 8 ; <'
• ; D 3 8 8 3 6 <= 8 ; 8 8 =
• ; 8 ; 6 ; D E 8 ; 3 #
! < 6 ; ) *=

3 #

N° 77 Sahar Maâlej N 78 Sahar Maâlej

6 4 "$ #4 % 6 4 "$ #4 %
*$ *$
O9 %78 8 ?9 %78 8
? 6; < 6 8 ? ;D $ 8 ;D !
A 8 8 3 8 ; 9N ; :=
8 8 =
3 #
3 #

N 79 Sahar Maâlej N 80 Sahar Maâlej

 6 4 "$ #4 % 6 4 "$ #4 %
*$ *$
P9 %78 8 $ 0 D Q9E #
; ' ' ' ; ' 7 ) +
• D R E
$ ; ; A 8 ! ; • D R E
'3 ' $ = • D R % E
• A 6 ; 88 P ; • D R E
; 8 3 = • D R/ FE
3 # • D R E
• D 78 ZE E • D R 0 E
ZE ; E ' ; ZE +J B J J** H2` `26+J J* EE • D R E
• D R E
• D R E
N° 81 Sahar Maâlej N° 82
• D R E Sahar Maâlej

6 4 "$ #4 % 6 4 "$ #4 %
*$ *$
D R E D R E
• . C # • . C

• 88 ! N D $8 #. • 6 $8 #.
3 # 3 #

N 83 Sahar Maâlej N 84 Sahar Maâlej

 6 4 "$ #4 % 6 4 "$ #4 %
*$ *$
D R % E D R E
• / • /

• 6 $8 #. • 6 $8 #.
3 # 3 #

N 85 Sahar Maâlej N 86 Sahar Maâlej

6 4 "$ #4 % 6 4 "$ #4 %
*$ *$
D R/ FE D R E
• . C; • / N ;

• 6 $8 #. • 6 $8 #.
3 # 3 #

N 87 Sahar Maâlej N 88 Sahar Maâlej

 6 4 "$ #4 % 6 4 "$ #4 %
*$ *$
D R 0 E D R E
• / !; 6 • / ;

• 0 0 # <A A 8A ' ; 9' ; 8 ! :

3 #
• 6 $8 #.
3 #

N 89 Sahar Maâlej N° 90 Sahar Maâlej

6 4 "$ #4 % 6 4 "$ #4 %
*$ *$
D R E D R E
• / D ! ! !;!8 • / &-

• 5 4 # 6; A 8 a
3 #
3 #
• / 6; ! 8 8; ;

• 3 D!'! 8 ' 8 8 ; ' ;

N° 91 Sahar Maâlej N 92 Sahar Maâlej

 6 4 "$ #4 % 6 4 "$ #4 %
*$ 4%
D R E * S 0 ' #
• / D ! ; ? D* $ E D(G.E
$ #
3 # • ! 9C :8 ; 3 8 A
• ; @ $ ( 8 ' ;
3 8 9; 8< ; A; ; A; !3 ! A;
8; 3 A =:=
• 3 #
O=

N 93 Sahar Maâlej N° 94 Sahar Maâlej

6 4 "$ #4 % 6 4 "$ #4 %
4% 4%
D* $ E D(G.E ) + 0 # D$ E
D E
(G. )( 0 G . +#
• ! 3 8 $ $ $ D$ E#
0 D 8 ? ;D! A • 8 ! 3 $ ' P ;
• ? ;D ' ' A 8 ' ; A 1% A ' ;D 6 $
!3 ! A 8; 3 0T (G. 9 ; $ + =
' 8 :=
• 8 R; ; 4 ; ;; D ;
(G. ; 3 3 8 ! ; 3 8
; 3 3 b 9 < 6; L 8 3 3 := $ A ; N ; 6 =
•3 # • 0 8 < R; ; ' !
O # 3 ' ; 3 ;
' ! =
# ! ; ; ; ' !
Sahar Maâlej
8 ; 3 ; 8 3 = Sahar Maâlej
N° 95 N° 96
 6 4 "$ #4 % 6 4 "$ #4 %
4% 4%
0 # D$ E 0 # D$ E
D E) + D E) +
D$ E#) + D E#
# 6; R; ; ! 8 ; A • ; P K ;D!;! ' ! A ;
8 P ; ' ! !3; ; ' ; = D 88; =
# !8 ; ' ! = • 8 ; ;D!;! A ; C; 6 ; D E ;
•3 # ' A &-
8 ' ; =
4 8 ' C ; ; 4 0 88 <
R; 8 ;D!;! ' ! =

N° 97 Sahar Maâlej N° 98 Sahar Maâlej

* % * %
8 # ( *((

• *(( !
' 8 ' ; !

• D 7; N ; P A ;; 8 ! ;
6 ; ? ; ;; ; 7; ' D 88; A
; ! 6 7; =

• 0 ! < ; <
3 ;; 98 ! ! ! ( R: ;; A
6 !8 ! 8 8 ' 3 ; =

N° 99 Sahar Maâlej N° 100 Sahar Maâlej

 * % * %
( *(( ( *((

$ 8 6 8; ' ; ? P 8 8 ! != $ 8 6 P 7; ? 8; 6 ; 9 !8 !
A !8 ; ! ' ; 8 8 ' 3 ; :=
' 3 ; =

N° 101 Sahar Maâlej N° 102 Sahar Maâlej

* % * %
3 # 3 #
<STYLE> <STYLE>
DIV { position : absolute ; width : 5 cm ; DIV { position : absolute ; width : 5 cm ;
height : 2cm ; height : 2cm ; left : 1cm ; top : 1cm ;
left : 1cm ; top : 1cm ; ; background-color : silver ; }
; background-color : silver ; } </STYLE>
</STYLE> </HEAD>
</HEAD> <BODY>
<BODY> <DIV>La valeur de cette propriété, si indique que la boîte
<DIV>La valeur de cette propriété, si elle est indique que la générée par
boîte générée par l’élément le long de son propre flan gauche si la valeur est left et droit si la
le long de son propre flan gauche si la valeur est left et droit si la valeur est right. La valeur both indique que l’élément ne
valeur est right. La valeur both indique que l’élément ne doit jamais doit jamais générer de coulé le long d’une boîte flottante alors que
générer de coulé le long d’une boîte flottante alors que la valeur par la valeur par défaut none tolère tous les coulés. Si par
défaut none tolère tous les coulés. Si par exemple on ajoute la exemple on ajoute la déclaration clear : both au paragraphe de
déclaration clear : both au paragraphe de l’exemple 9.6, on obtiendra :
l’exemple 9.6, on obtiendra : </DIV>
</DIV> Sahar Maâlej Sahar Maâlej
N 103 N 104
 …
overflow : scroll ;
…
* % * %
3 # 3 #
<STYLE>
• Numérotation des items
DIV { position : absolute ; width : 5 cm ;
height : 2cm ; left : 1cm ; top : 1cm ;
; background-color : silver ; }
</STYLE>
</HEAD>
<BODY>
<DIV>La valeur de cette propriété, si indique que la boîte
générée par
le long de son propre flan gauche si la valeur est left et droit si la
valeur est right. La valeur both indique que l’élément ne
doit jamais générer de coulé le long d’une boîte flottante alors que
la valeur par défaut none tolère tous les coulés. Si par
exemple on ajoute la déclaration clear : both au paragraphe de
l’exemple 9.6, on obtiendra :
</DIV>

N 105 Sahar Maâlej N 106 Sahar Maâlej

* % * %
$ *(( $ *((

*(( 0 F *(( 0 F
*(( 0 %
*(( 0 % % • 6 L3 ;
*(( 0 % % • 6 L3 3
Q99 • 6 L3 8
• 6 L3 C
• 6 L3 8
• 6 L3
• OO=

N° 107 Sahar Maâlej N° 108 Sahar Maâlej

 * % * %
$ *(( $ *((

*(( 0 F *(( 0 F

• 6 L3 ; 8 8 !! ! ; ; D • 6 L3 3 8 8 !! ! 8;
8; D !;! = 3 D 8; 8 !;! =
• 3 # • 3 #

N° 109 Sahar Maâlej N 110 Sahar Maâlej

* % * %
$ *(( $ *((

*(( 0 F *(( 0 F
• 6 L3 C 8! C; ;; D 3 D
• 6 L3 8 8 8 !! ! ; 8 8; ' E E 8< ; =
!8 D 3 D 8; = • 0 L3 8 8 8 !! ! 3
, # D 8; !8! ! =
# • 3 #
# =
• 3 #

N 111 Sahar Maâlej N 112 Sahar Maâlej

 * % * %
$ *(( $ *((

*(( 0 F *(( 0 %
8 ' D 8;
• 0 L3 ! 3 D 3; D !;! ; ' ; ;D
8; ! ; ' ; ; 8 3 < = !=
, %* * + ' • 6 6 ;
,* ' • 6 6 3
%* ' • 6 8;
• 3 # • 6 8 3

N° 113 Sahar Maâlej N° 114 Sahar Maâlej

* % * %
$ *(( 5 !"

*(( 0 % ; < D ; D !3 ; ;;
• 3 # 7; 1%
\a $.%c/ ;V
\ ;V \ V • *(( 0
\ 7; V
• *((

• *((

\# 7; V \# V
\6 7V
\ V6 6 ; *(d \# V
D $
\8V1 A 6 6 ; 8 8 7 *(d= ;
6 L3 ; 88 6 =\#8V
N 115 D- $E \#6 7V \# ;V Sahar Maâlej N° 116 Sahar Maâlej
 * % * %
5 !" 5 !"

*(( 0 # *(( 0 #) +
• ;; 7; 6 ; ( #

) -.*
• & ;; 0 ' ! ; ; 4 A ) /0*
; 6 ; T1 U=

• ;; ' D 88; 3; 6 ; ? ; 6 ;
D ;; ! =

)" /0*
N° 117 Sahar Maâlej N° 118 Sahar Maâlej

* % * %
5 !" 5 !"
*(( 0 #) +
*(( 0 #) + •3 # Utilisation d’une image pour marquer les listes
<HEAD>
• 6 ; )# 1. * ' ; '3 ;D ' ;
;; 7; =

• D 6 23 ( " 3
< D; D 3 = </HEAD>
<BODY>
<P>Les items de la liste qui suit suivent une petite fl&egrave;che qui est
• / ; ; ;; 7; A ; accessible &agrave; l'URL fleche.gif
; ' ; #e e#= </P>
<UL CLASS="flechee">
<LI>item 1 de la liste
<LI>item 2 de la liste
<LI>item 3 de la liste </UL>
N° 119 Sahar Maâlej N 120 Sahar Maâlej
 * % * %
5 !" 5 !"

*(( # *(( #) +
• & ;; ;3 D ; 3 #
6 ; D ;; ! ^ ;; 8
'! 6; ;; = - $%.
-/012.
• ;; 8 < 6 ?
8 D =
-!/012.
• 8 # -! $%.

• 7; ;A ; D ? ; 6 ; 1+=
• D! '
D(!U 3 RV - VE 1+ W E ;7 ;^ 7;
N° 121 Sahar Maâlej N° 122
; ^E X D-(!U 3E Sahar Maâlej

* % * %
5 !" 5 !"

*(( # *(( #) +
• & ;; ; ! ' ! ; ?8 A 3 #
+= $ ! D 6 A ; !8 A '
;D < 9 ^ ; ;; 7; =
• . ;; 7; ' ; 6; 8 ; 8 3 = A ! ' ; \1 V
;D 88 ;; ; 6 ; 3 8= $ *((9
8 ; 8 3 D 3 6

N° 123 Sahar Maâlej N° 124 Sahar Maâlej

 * %
5 !"
/ 3 5 6
*(( #) +

3 #) +
• 6 ; ).4 5* ' ; '3 D; '
=
• D 6 2 9 3 ;; :8! 1) )
D;7 ' ;; 7; =
• D 6 23 ( " 3 8! ;D
< =
• D 6 ; ; 236663 ;
D ; ?; =

N° 125 Sahar Maâlej

PLAN
. / # : # " 2
1. Qu’est-ce que le JavaScript ?
2. Ecriture et exécution du code JS
9 9 D(*25 !E D-(*25 !E • . ' 8 !3 ! < 8 3 1% =
9 9 = 0 !" ' $ • . 8 ! !8 ; '3 ; 9 8!
9 9 % T $ # !8 78 ; ' '3 :=
12 • ≠ /1/ 9 8!! ! ' :=
3. Les classes prédéfinies
4. Les fonctions • @ $ (
5. Les événements • ?8 78 98 88 ? ; 3 3 6 ! ; ;
; 8 ! ; ;I ! 3 := % 6N ' 8
6. Les objets du navigateur
! I 8 8 ! !8 78 A 8! ; ;
; ; ;I 6N 6 =
• !'! ;9 D < !'!
! ; ! 8 ;D ; 98 3 A ; A
; ' A ===:=

N° 127 Sahar Maâlej N° 128 Sahar Maâlej

 . / # : # " 2 . / # : # " 2
• ' 8 A; 3 3 ;
• & 6N !;! ! 7
• / 8 !! 8 ' '! =

• ! ;D 6N 8 6; D =

• f'! ' ? ;D 6N A < ;; ;

8 !8 8 =

N° 129 Sahar Maâlej N 130 Sahar Maâlej

: & ; < +=
&# 54# $ % #$% :
; < +=
• $ 8 8; ?)

• ; 6 ; \ .- /%V \# .- /%V

• !? 6 ; 1% 3 !'! • I; ; ; \1 VA ; I 8 <! !
=
• ! 8 8 ; N ' 8 &-
• / A I; 8 8 A
4 ' !"
9

• ; ! I ; ; ;
D 3 8E99D- 3 8E

N° 131 Sahar Maâlej N° 132 Sahar Maâlej

 : $# 4 0+1 : $# 4 " %$ " $ $#$ > # "

• 3! ! ; !! I 88 ; / ; ; \# V

• 7 0 3 8 • . 8 &- 8 ; ;I <! I 8
!

• D 8! 4$ 8 D3 ; 8
;

N° 133 Sahar Maâlej N° 134 Sahar Maâlej

&5 "
""$ % : # "
7 V 9 V
\a $.%c/ ;V 9
\ ; ; 3ZE EV
\ V 9 H
\ ZE&%Q JEV 9
\ ; V1 ;; @ ; \# ; V
\# V
9
\6 7V <9 $
\8V K9 0T $
D RV -T $ V ZEN # 8 =N EED- E
\#8V O9 65 8,6
\#6 7V ?9
\# ;V
P9 !
7 VT - 9T V :9 . F
9/ )A 6 YA+Z +)2
9 8,"

Sahar Maâlej N° 136 Sahar Maâlej

 ""$ % : # " # " 4%4*

• 7 8 3 1%
• .;

' ;D • .; 3
• .;
?; '3

N° 137 Sahar Maâlej N° 138 Sahar Maâlej

# " 4%4* # " 4%4*

1 ?

• " 9 ' )+A ! = • $ )+I !' ; ! <8 !

=
• " 9 )+ I " 9 )+ I " 9 0 )+ I" 9 )+I " 9 )+I
" 9 )+ • 5 )+A 6 ! ; ; '
9 8 6; : I =
• " 9 )+I " 9 )+ ! ! # ; ' I 8 8 6; A ; ' ; ' 7! (=
8! = • 7 )+A 6 ! ; ; P K =
• " 9 /)0 I +I 8 A F6 • 9 1 * )+A 8 N ; =
<8 <8 ! ;
!' ; 6; = • 9 0 ) I +I < 8 A?8
8 AN I? +=
• " 9 )+ I " 9 )+ • 9 ) +I ; 8; ! 8
• " 9 )+I 6 E ! ;E g( A +g 9 (? =; 3 +:=
• " 9 )+I ? ;I ; 8; 8 = • 9 , ) [ +I ; + 8
!3 ; + " =

N° 139 Sahar Maâlej N° 140 Sahar Maâlej

 # " 4%4*
*$ # $
• 3
• 8 )+A 8 6 ; ;I 9
7 :
• & ; ; 7 <
• 8 ) I # # +I 8 6 8
< 8; 1 # 34 )554 )6 6( ((
• *
• 8 ) I I T +I ' 6; ) A
8 < 8; 9 (((A (A +: • !; !8 hOi
• .
• ! ; ' 6; ; ; A 8 8 ? ; A
• ! ; ! 8 ; A
• 8 ' 7 ' ; 6N
9 D 8 6; 3
' 8 ' ; :

N° 141 Sahar Maâlej N° 142 Sahar Maâlej

*$ # $ *$ # $
•
• / ' ; ? I 8 ; ; 8 3
• I A

• & ;

N° 143 Sahar Maâlej N 144 Sahar Maâlej

 *$ # $
&5 " 4 4
<HTML>
<HEAD> • ' 8 !8 !'!
<SCRIPT>// déclaration de fonctions • 8 ; I ' ; 6N I
function volumeSphere(rayon) { 1% =
return 4/3*Math.PI*Math.pow(rayon,3);
} •
• .; L
function calculerPrix(PrixUnitaire, NbArticles) { • '
return PrixUnitaire* NbArticles;
} •
</SCRIPT> • ===
</HEAD>
<BODY> <SCRIPT>// appels des fonctions
document.write("Tu dois payer ", • ; 8 6; 6 ;D <!
calculerPrix(150,4)," Euros.<BR>"); !'!
document.write("Le volume d’une sphère de rayon 1
est ", volumeSphere(1),"<BR>" ); +*2
</SCRIPT>
</BODY>
</HTML> Sahar Maâlej Sahar Maâlej
N° 146

4 4 4 4
• B 8 8% < A% < ; I 8;
'!= • 3$
• * 8 8% < A% < ; !
8 ;I ; = • 8 ; 8 3 @ 6 3! ;
• * F 8 8 0 A. L6 <A - LA
- 6 K ; L P '3
• 7 8 8 %< A% < ;
'!= • % ; 8 3 97 8 ; 3 D ;;
• 8 ; '3 3 P
; I Q- %= I!'! % 8 ; 3 8 !' : ' !! 3! 8
; 6 ; 0$ c ; 6 ; Q- % D; ;
• " ,$ 8 ; 8 178 ;
C ' 6; I 3 =
• ( 8 8 %< %< !; != • . !'! 8 P !? 3
• ( 0 8 ; 3; 6 ; ' ; ! 88 ; ^ ; A ; 8
6 # =
• 1 8 = I!'! 3 !
7 8 ; 6 ; 0$ c ; 6 ; Q- %=
• 0 8 ;I ; 8 ; 3 I
3
• 3 8 ; 3 I 8 3 I 3
8 =
• " 8 ; C I 3
78 ; =
• 2 8 ; ; 6 I ; Sahar Maâlej Sahar Maâlej
N° 147 N° 148
 4 4 4 4
• 3$ * F • C$ " $
• 8 ; ;D ; ; !;! • ; 3 ? .; L D; ;D ; 8;
8! 8 3 A ; 78 < A ; 8 ;D !;! 8! !
3 A 6 A < A = 9; 78 < A 3 A6 A < A =: 8 D;
;
• . !;! 8 6; !8 !8 ! ?
!'! • C$ "
• ;8 !3 ; P ! ; !; ;D ; • ;D ' ' A !'! 8
8 9 ; 8 3 D; ! ! ! 8 ; ; 8 ; ; C
? !;! 8! A : 8 # !; D !;! =

N° 149 Sahar Maâlej N° 150 Sahar Maâlej

$ > % $ > %
• I 6N ; 8; ; ! / /
8 ?; P P '3 =
• I 6N !! ; P =
• 3 8 8 8 ! ! ;I 6;
!;! 1% 8! ; 8 3 =/
! !;! A ;
• = A 0T A
; ! 3 ; 07 9 :A 8 '
;I!;! 9 :^
• A 0T 3 8
6; < ' 8 ; !;! 78
! !=

N° 151 Sahar Maâlej N 152 Sahar Maâlej

 $ > % $ > %
04 #? % $ > &5 " % " $ % $ >
• / 6N A ; 8
; 8! T D U
;D 6 ;

• ; ; P A; '3 ; 8
! ; P
• ; 9 :A ; 8 ;
; P
• ; 8 6; D @ @=
;D 3 ! 8 D ; D7 D ; 6N
T U ; P
N 153 Sahar Maâlej N° 154 Sahar Maâlej

$ 0
/ 3 5 6 ,$ # $ % 0
4 $ %/ # " % "
!@ % $ % %$ 4
! "
!- $ / . ! $"4
! #? A % # #B
!! 5
!3 # % %$ 4

+22
!7 *$ # $ +2`
!8 * #?
3 ##B % %$ 4
 $ 0 ,$ # $ % 0

• /1/ !! ; 6

; 5 6=

• /1/ 8 8; 2(( = ; '

;6 ; ! ' ;
;D <6 ! A; I 3 AO
P 1%%/ ' 5 6 8 3 ;D <
• $ 8 D 5 6 T ' U ? 5 6 7 T=8 8U=
= $ 8 ; 8 ; ;D
' 8 6 ;
8 6; ! = D < T=8 8U=
;' 8 ; ? ^ ' 8! ; 8 /1/
• & ; 0 A . 8 7 1% =
+2B +2J
. 1% ' 7! '3 ; =
;3 /1/ D 88 R! ;
N° 157 Sahar Maâlej N 158 Sahar Maâlej

4 $ %/ # " % "

• 8 8 !! ; • !8 D ; Z ; 6; 3
;3 > ; b
• 9 8; : 3 =
• D 3 8 P ;
• 3 # 7 < D !3 ; ! 8; L
; ! ; ;=

• D 3 8 P #
; ! ' ; 6; V
' 6; 8!! =

+2H +`(

N° 159 Sahar Maâlej N° 160 Sahar Maâlej

 o D 3 8 P

## ; ; ; • & 8 8 8
N ; = . ;3 ## k
$ 8 ; 8! <8 R; ; . 8; ;3 #e === e#
; < !
j ;3 % ' 3 !=
j ;3
; ;;! ; 3 8
j 6 ;
/ ; EA ;D ? ;D
D! 88 j
+`+ +`

N° 161 Sahar Maâlej N° 162 Sahar Maâlej

@ % $ % %$ 4 @ % $ % %$ 4
"
• /1/ D 8 ; 3 3 !A ;
8 8 ! ; ' ; ! =/ !
' 6; A ; ;D ; =
• $ 0
5 $ 0 #
•
3 # l'
• J l' Z+^ ' 6; \$ ; ! ' +
• 0 ' 6; 8! ! ! 3 lA ; ; 78 =
• • ' 6; /1/ 8 ' P 78
• < =
• -! ; < # =
. < =
+`) % 6; < = +`*
0 ;! <# &=
Sahar Maâlej
.D /1/ ! ; 78 ' 6; ; ;D =
Sahar Maâlej
N° 163 N° 164 •
 @ % $ % %$ 4 @ % $ % %$ 4
" "
& ' #
• ; 8 ; ; 78 D ' 6; ^
' ' 6; 78 8 = ; ; • 3 )\$ + # ' ' ; ' 6; '

8! 39 :A 9 3:= • 5 )\$ + # ' ' ; ' 6; <

• 1 )\$ + # ! ' 6;

• . )\$ + # ; 78 ; ' 6;

• ( )\$ I E E+ # ' ; ' 6; 78 9 :

• 5[ )+I [ 0 )+I [ )+I [ )+I [ 0T )+I

[0 )+I [ )+I [ )+I [ )+I [ )+I Q
+`2 +``

N° 165 Sahar Maâlej N° 166 Sahar Maâlej

@ % $ % %$ 4 @ % $ % %$ 4
" "
! $ 0
• $ 8 !3 ; ;D
8 # = " 7A " 3A " A " ; =
8 # A
! ;; ; ! ; ! = l Z +2H^
" 9l :^ ## ZV 9' :
" 6; 9l :^ ## ZV 9 <:
" 39l :^ ## ZV 9 <:
l mZ (= ^
3 78 8 ; # = " ; 9l :^ ## ZV 9' :
;; ' II 3II II 3 II II 6; II
II 7II=
2 ' #
• " 6; " ; ! ' ; ? "; =
+`B • "; 3 " 3 ! ' ; ? " = +`J

7 # * > >' Sahar Maâlej Sahar Maâlej

N° 167 N° 168
 @ % $ % %$ 4 @ % $ % %$ 4
" $"
# • ' #
*
• & /1/ ! ? ;D ; 9
ZZ !3 ; !
V !
\ 8!
)V*, (! !3VI G +Z \Z ! !3 ;
VZ 8! !3 ;
aZ !3
• 3 # '
8! ; 3 ; ! ; A ;
T < =U
nn
__
< < ;
a ,!3
+`H 2 ' #; 8! A A !3 ; +B(
8 6; =
N° 169 Sahar Maâlej N° 170 Sahar Maâlej

@ % $ % %$ 4 @ % $ % %$ 4
$" $"
' • #
m
D 8! ; 6; ;
# '
e ; 8; ; =
d ;
mm !
! !

Z
mZ 8
Z 8
eZ ; 8; 8
#Z ' 8 D 8! ]#= 7 <
dZ ; 8 g ; 3 o G g <8 ' o g <8 <o
l Z (^
l mZ ^ ## l '
l eZ `^ ## l ' + +B+ +B
l Z l d 2^ ## + ; 2 ZV l Z
9 mml ZZ +) : E8 E^
## 8 ! ! ; ' '
N° 171 Sahar Maâlej N° 172 Sahar Maâlej
 @ % $ % %$ 4 @ % $ % %$ 4
#? A % # #B - 4* $ #? A % # #B - ,$ # $ % %
• % ;; ; ! A !; ! 8 V L ( ) J I J +
- ; 8 ; ; = ; F
• 3 #l ZE 3 E^ ; < 8; < 8; A D ; 8 ; 8
! = 8 ? ;; ; 8
; =
• Y ; 8! <
( ) J I J +
j 9 ' ;; ; 3 :
- ; 8 ; ?8 ; 8
j 9 ;3 : ; =

j 9 6 ; C ; : ( ) J +
- ; ;; ;
jj 9 ; :
( / [ ) J +
jl 9 ;; : - ; 8 ! 8 ; 9 8=
N ; :
jDD 9 6; :
+B) ( [ ) I I J + +B*
3 # WD 1 ;; 5 a j DD^ - 8; ; D 3 8 ;
; =
N° 173 Sahar Maâlej N° 174 Sahar Maâlej

@ % $ % %$ 4 @ % $ % %$ 4
5 5
• & ' 6; 6; 78 =& 6; 8 • 0 #
!;! 78 = !;! D 6; 8 ' P
78 ! !8 ! D ' 3 ; =
• ( #
l' " " 78 " 6; Z 9' ; " " 6; :^

3 #
• #

• #
D 88 ; D !;! 6; ?8 9
;D 3 C! .:=
+B2 +B`
3 #

N° 175 Sahar Maâlej N° 176 Sahar Maâlej

 @ % $ % %$ 4 @ % $ % %$ 4
5 5
! 0 ! 0
• & 6; 6; ;D <
• #
; D 6 = ; ! ; 6;
l8 Z 7 9WD, DDA WD DDA WD DD:^ ;A ; =
• 8 #
## < !;! 6; l ; Z 79:^ ## 6;
• " # • #
6 ; 7 < =
• T #

• * #
• #
• 1 J 0 #
+BB • T # +BJ
3 #
• #
N° 177 Sahar Maâlej N° 178 Sahar Maâlej

@ % $ % %$ 4 @ % $ % %$ 4
5 5
& ' 0 # & ' 0 #) +

• I 3 # l 6; " Z 9 l 6; :^ o #8 ;D < D !;! =

• # 8 ' ; A
• # 8 ' ; ! A
• F # 8 < 9L 7: =
• > #- ' ; 6 D!;! D 6; = .D
! ' ; =
3 #l 6 ; Z C 9 l 6; :^
• [ # ; !;! ;D!;
6;
• [ # ; ? 7"8 89: ' ; 8 !;!
• [ $ # ' ; !;! D 6; +BH +J(

N° 179 Sahar Maâlej N° 180 Sahar Maâlej

 @ % $ % %$ 4 @ % $ % %$ 4
# % %$ 4 # % %$ 4
57 (65!*
( # P 7 < D ; 3 3 . ( # P 7 < D ; 3 3 .

(/ ) ^$ 0 _+W
basique : if-else : if-elseif : ^$ _#
^0 _
if ( [condition] ) if ( [condition] ) if ( [condition] )
0 FZ
{ { ...} {...}
... else elseif ( [condition] ) ^$ _#
} { ... } { ^0 _
... } 0 FZ
999
; 8; 8 P #
' 6; A ; 8; R ; @ = ^0 _
+J+
X +J
2 ' # ; 8 8 D A
; ; hi 8 ;=
N° 181 Sahar Maâlej N° 182 Sahar Maâlej

@ % $ % %$ 4 @ % $ % %$ 4
# % %$ 4 # % %$ 4
(65!* # 3
68 0 7,2 #
@ 9 l8 ! :h • D;7 !3 ; !
] ;E ; ' ; ; ' 6;
( # P 7 < D ; 3 3 .
] ; E ; ' ; D A;
]$ E 6; D
E6 N E= l8 ! =Ea4 P 3 K E^ <! != )^ _Z^ _Z^ ' _+
# ?@ • ; 8 ; W
6 L 6; A
; @ Q
] E 8 <! != X
] E • D ;
]0 7 E D <!
E6 N E= l8 ! =Ea4 P ;; E^ D !'
3 #/ 8; 6;

;
E0 N E= l8 ! = E a ! ;! N 8 6 8 +J) +J*
8! E
i
N° 183 Sahar Maâlej N° 184 Sahar Maâlej
 @ % $ % %$ 4 @ % $ % %$ 4
# % %$ 4 # % %$ 4
0 6 5 3 - 8,Q6 5 3 # 0 #
7,2
( # P 7 < D ; 3 3 . 6 5 3
8, W
6 )^ _+ Q 8,Q6 5 3
W X6 5 3)^ _ +Z
Q • D # ?8 D 6 ; ?
X =
3 #/ 6; N D 8 !;! '
• D 8 ' !6 ;
6 ; =
+J2 +J`

N° 185 Sahar Maâlej N° 186 Sahar Maâlej

@ % $ % %$ 4 @ % $ % %$ 4
*$ # $ *$ # $
• / ; 3 3 !A /1/A 8 #
D 8 8; D 8 D ;; > = 7 < D 88 ; ;! =
. ;! ! ' ; 8
• % /1/ ' ; 3 ; 8 9 ; : D 8 ! ? ;; ; !' ; 8 =
=

• /1/ 8 := =.
8 8 ' P 78 ; = ;; 8 '
S $ =

• ; D7 8 8 ! /1/=

+JB +JJ

N° 187 Sahar Maâlej N° 188 Sahar Maâlej

 @ % $ % %$ 4 @ % $ % %$ 4
*$ # $ *$ # $
• 8 ' ' 7 ! ; = $ 0 0 #
; ;D = ' 6; ! 8 • 8 ? ;D ! 8 D =$ 8
P 78 ; = 8 7 ! ? ;D ;! 0 =
• ' 8 ' ;; ' 6; 8 ! 3; 6 ;
8 3 =
• 9 D ; ; 6; \. ,B (A
; ' 6; 3; 6 ; ! ; ! ? %=

; E ;; E
? ;D! A ; 3 ; ! ;
8 88 ; ? ; =

+JH +H(

N° 189 Sahar Maâlej N° 190 Sahar Maâlej

@ % $ % %$ 4 @ % $ % %$ 4
*$ # $ *$ # $
$ 0 ' # #

• $ 8 ' ; 8 ! < 3 ;
• 8 ' ; ' ; D ' 6; ; ; ? ; ! ; ; =
=

+H+ +H

N° 191 Sahar Maâlej N° 192 Sahar Maâlej

 @ % $ % %$ 4 @ % $ % %$ 4
*$ # $ *$ # $
$ # #

• 8 8 ?; A ; ; ! • ' ; ! 8 3 8 8 !! A
? ;D ! 8 = 8 ?; ;D ! D ' 6;
< =
• . ; 8! ! ; n ' ; 8 =
. ; 8 8 ; =

+H) +H*

N° 193 Sahar Maâlej N° 194 Sahar Maâlej

@ % $ % %$ 4 ##B % %$ 4
* #?
o /1/ 8; 8 ;D 7
7 D <8; ' = • D ; 3! ! ; D 0 9 ; 7 Y : ' /1/
D 2 8
& ' #
879l Al : . 8 D A += . < ' !
$ ' E E
= !; ; 6 !
l 8Z 8 9E ; EA l :
A )= - P
Q ' A
*= <8; P
; 9l 8:
2= Q ; <
9E EA E ' E: - A
@ 9l 8A l : ; l A

8 9l 8A l : . 8 ? @ 9:A
; 9E ; E: +H2 +H`
A
3 9l 8A l <; 3 : ;3 D A
N° 195 Sahar Maâlej N° 196 Sahar Maâlej
 ##B % %$ 4 ##B % %$ 4
%* $ %( 0
/ ' ! A ; < ! / !; A ; C; '[ [ 0
'[ '[ =
' ; 8 C 8 A; ' 6 =
• 8 ' \ $ D ;
\ ' ; 8 \ / '[ [ 0)0 ^I\ _+Z
• ;D < AQ
* $ #
'[ )\ $ I\ I\ / +Z

+HB +HJ

N° 197 Sahar Maâlej N° 198 Sahar Maâlej

##B % %$ 4 ##B % %$ 4
%3 $ ' 4
%3 $ ' 4 ) +
/ ' 7 P ? 6 ! A 8 ;
' [ 0[' ; F ;D ' !; ;
6 P 8=
' [' ; F; 6 ! !N?
!; ! ' [ 0[' )0 I \ ' 4 ^I [ _+
' [' ) ' 4 [(& ^I [ _+
• * # P ; 8; ; !
• 8 8 8 ; .- % 9 ! D 6; :A
P ! Y = .% 9 !; :A
• ! ; Q ! = , -% 9 :A
• ; D ; .%A 7 Y
! ; ? ; ;! ; 8! &/ % 9 ?N ! :A
; = % 9 88 :A
% -9 D 6; :A =
+HH ((

N° 199 Sahar Maâlej N° 200 Sahar Maâlej

 ##B % %$ 4 ##B % %$ 4

%3 ' 4 '[ [ /#
. 3 ; D
o 8 ;D <! D P !; A; ! 6; 8; =
8 ! A ;; 8; ! =
o ; ; ; A A l 3 Z '[ [ / 9l ! ; :^
; ' = l 3 g(o^
o /1/ 3 8 ! ; A
o 2 ' 4 #E .% A8 ! A Q-$ 6 =E
$ N I? D;
8 =
o 3
'[ [ / '[ [ 0T 8
8 ;D ; P =

(+ (

N° 201 Sahar Maâlej N° 202 Sahar Maâlej

##B % %$ 4 ##B % %$ 4

'[ [ 0T # <% 7
. 3 D
9 6N := o4 8 ' C ; < 7 ;
'[ A
l 3 Z '[ [ 0T 9l ! ; :^ o. 8! ; ; 8 = .D
l 3 6 ^9 6 ; 6; : 8! =

. #
D;7 ; 7 < ; P A ; ;
'[ 8 8 8 =

() (*

N° 203 Sahar Maâlej N° 204 Sahar Maâlej

 ##B % %$ 4
3 #
\ ;V
\ V\ ; V6 ! \# ; V \# V
\6 7V \ + ; 3 ZWD DDV ; ! \# +V
\G8 8
l Z 7 ; 9WD; ; DDA WD DDA WD WD:^ Les éléments de listes énumérées
7 ;" ; "6 9WD ; !DDAl :^
l Z WD ; e DD^
l Z 7 ;" 7 9l A l :^ • La propriété list-style-type
9l :
h WD\ 6; @ ZB(d ; 3 ZWD DD 6 ZWD)DDVDD^ –valeurs possibles: disc, circle, square, decimal, lower-
5 ; 9l Z 7 ;" " 6N 9l :: roman, upper-roman, lower-alpha, upper- alpha, none
WD \ V \ V l V \# V
\ Vl V \# V • La propriété list-style-image
\ Vl V \# V
–choisir une image comme symbole d’énumération
\ Vl V 7 \# V \# VDD^
WD \# 6; V WD^ –exp: list-style-image:url(fleche.gif)
i (2
;
WD \6 V \6V ;! 6 ! ' \#6VDD^ 02 1 )%
N° 205
GV \#6 7V \# ;V Sahar Maâlej

Les éléments de listes énumérées • La propriété de gestion des espaces : white-space

–détermine comment sont pris en compte les caractères d ’espace
• La propriété : list-style-position (les espaces réels, les tabulations et les sauts de lignes).
–contrôle la position de la puce –Valeurs possibles:
–valeurs: inside, outside •normal: les espaces sont ignorés
• La propriété composite: list-style •pre: les espaces sont pris en compte et affichés
–exp: list-style: none inside url(fleche.gif)
•nowrap: les sauts de lignes sont pris en compte et les espaces
sont condensés

02 1 )% 02 1 )%
 Les propriétés de polices Les propriétés de police

•La propriété de famille: font-family •La propriété de style: font-style

– valeurs possibles:
–valeurs possibles: normal, italic, oblique
Nom Famille
•la propriété de variante de police: font- variant
serif Times, Times New Roman, Palatino –valeurs possibles: normal, small-caps (petites majuscules)
sans-serif Geneva, Helvetica, Verdana
•la propriété de graisse: font-weight
Monospace Courier, Courier New
–quantité d ’encre ou la noirceur des caractères
Cursive ZapfChancery
–valeurs possibles: normal, bold, bolder, lighter, 100. 900
Fantasy Western, Critter
02 1 )% 02 1 )%

Les propriétés de police Les propriétés de police

•La propriété de corps de police: font-size •La propriété composite font:

–les mots réservés: xx-small, x-small, small, medium, large, x- –exple: font: bold x-large Helvetica, sans-serif
large, xx-large –ordre:
–valeurs de corps relatives à celle de l ’élément parent: largeur •style, variante, graisse dans n’importe quel ordre
ou smaller
–valeurs en pourcentage du corps de police de l ’élément •corps obligatoire
parent: 30%...
–valeurs absolues: 14pt... •famille obligatoire

02 1 )% 02 1 )%
 Les propriétés de police Les propriétés d ’arrière plan

•La propriété de couleur : color
– valeurs possibles: les 16 couleurs prédéfinies, un triplet
en décimal, hexadécimal ou en pourcentage codant les
couleurs RGB.
•La propriété de couleur d ’arrière plan: background-
color
•La propriété d ’image d ’arrière plan: background-
image
–valeurs possibles: none, url(fichier.gif)

–NB: si l’image est plus grande que la surface du

navigateur, elle sera tronquée
02 1 )% 02 1 )%

Les propriétés d ’arrière plan Les propriétés de texte ou de paragraphe

•La propriété de répétition: background- repeat •Espacement des mots: word-spacing

–valeurs possibles: repeat, repeat-x, repeat-y, no- repeat
•La propriété de positionnement d ’arrière plan:
background-position
–valeurs absolues: top, center, bottom, left, center,
right
–permet de contrôler la chasse des caractères en
distribuant de l ’espace supplémentaire entre les mots.
•Interlettrage: letter-spacing
•Propriété de décoration: text-decoration

–valeurs possibles: none, underline, overline, line-

through, blink
02 1 )% 02 1 )%
 Les propriétés de texte ou de paragraphe Les propriétés de texte ou de paragraphe

•Alignement vertical: vertical-align •Alignement de texte: text-align

–valeurs possibles: left, right, center, justify
–valeurs possibles: baseline, sub(indice), super(exposant),
•Indentation: text-indent
top(aligne le bas de l ’élément avec le haut de la plus
–avancer le texte % à la marge
grande lettre affichée en ligne), text-top, middle, bottom,
text-bottom, –s’applique aux éléments blocks
•Hauteur de ligne: line-height
•Contrôle de casse : text-transform –interligne
–valeurs possibles: valeurs absolues, pourcentage (200%
–valeurs possibles: capitalize, uppercase, lowercase, none
interligne double)
02 1 )% 02 1 )%

Les propriétés de texte ou de paragraphe Les propriétés de texte ou de paragraphe

•Les propriétés de marges: margin •Les propriétés de bordures

–margin-left, margin-right, margin-top, margin- bottom
•Les propriétés de marges internes: padding
–padding-left, padding-right, padding-top, padding-
bottom
•Taille de boîtes : width et height
–taille des boîtes 02
–Le style: border-style
•valeurs possibles: dotted, dashed, solid, double,
groove, ridge, inset, outset
–L’épaisseur: border-width (-left...)
•valeurs possibles: thin, medium, thick, 1px...
–Couleur de bordure : border-color (-left...)
–Propriété composite de bordure (border-left..., border)
Exple: border : 2px solid blue
1 )% 02 1 )%
 Les propriétés de texte ou de paragraphe

•Les propriétés de positionnement:

–la propriété float
•valeurs possibles: none, left, right
•avec une valeur gauche, l ’élément est ramené sur le
bord gauche de la page et le reste du texte coule de cet
élément à droite.
–la propriété clear
•valeurs possibles: none, right, left

02 1 )%