By Sami AL-Rabai3h Help With : Thamer Mohammed & Mahmoud Hussain © 2003 - 2004 1
First Edition
!"
# $%& : #'()* .,/0 1* 23 4$%,5* : 1.$ +)* $()* 0*,6 $()* 1758 #'()* By : Sami AL-Rabai3h Help With :Mahmoud Hussain & Thamer Mohammed
CSS
E7(FG 0.'"G HI3 J5J-
KL0ILM NO '*
By Sami AL-Rabai3h Help With : Thamer Mohammed & Mahmoud Hussain © 2003 - 2004
2
$%&'%() *+),- &.,/0 1'2 34546 789:9;'< =>/%? @-A BC- 7%D?)&0 E'<) F&GH<) IBJ
$%&'%() *+),- &.,/0? K:>L'M 394N'><) O7P4<) *:>Q R&S0 1'2 3T,>U- EJ? 3.V:4U%() O7;4/L><) W4T 3XY7;><) *- 3:M&N<) 3P4<) EJ 78M R&S<) 3P< Z,G0? &-[) )B8Y \M&N% Z) *:/'5% ]E^ _2 `:4Y \':>J[ 7%&X% \Q? @- a<b? _NU.
3.V:4U%() 7807;4/L- _8U. cde'><) .
O7;4/L- IB8Y 78M K>L. E'<) 3P4<) gh
EG< i)b @- j:4+? )BJ @- j:4+ @G< 3.V:4U%() K4N0 ?h klN<) c7M @- `:<? 3:><7T 3-,4N><) 78M d,2B- Z,G.? \>4N0 7- mn0 3-,4N- h&9:Y 34>'G- \07-,4N- Z,G0 Y 3.V:4U%() O7;4/L><7M @G<? cde'>4< Fd75o IBJ? ]E^ 78C- K8H. (? `4U:
_p>Y Ieq @T D)A )b) cde'><) O7-,4N- I,S. e+ 7- de9M K8- ,J 7- de9M 1.&N'<7Y 3P4< 3l5C<7M r7;<) a<BGY 3.V:4U%s< $>Q&0 )b) 7J7CN- e9H0 3:M&T O7>42 eQ,. W4T 7Ct&q c7'G<) )BJ EY? 784J7U'0 ( Z) W4T u&qvY 3.V:4U%() &l2) E9l% Z)
3:M&N<) 3P4<7M 78< 7q&^ *- 3.V:4U%() 3P4<7M g) 78<7;M O7;4/L><) @- @G>- de+ 78M eL9% )b7- w&N0? )e:Q 78>8H0 Z) k:;M .
_< 7J7CLLo? 34545<) IBJ @- W<?() 3Nl/<) hel% 7CJ @-? ) Cascading Style ( Sheets W4T g,';0 w,6 z&o) 7l'2 \Nl'. w,6? O7P4<) {eq) $%&'%() *+),- K:>L0? &.,/0 EY 3.,:;<) *:|),><)? .
Z) K4N% 7C%[ a<b? F&^7l- R&S<)? F&^7l- },|,><7M _oe% Z) W4T 7Ct&q e9<? ~40? k.e;<7M _:/0 1'G<) @- &:pGY cde'>4< •:€<)? _4><) 1l5. e+ a<b &:• )BJ Z) e9'Th? 3-,4N><) a< _t,0 W'q },|,><7M d?e0? `:< c7'G<7Y _>- ]E^
@- Z,G'. c7'2 a.e. @:M *|) 7%vY \07-,4N>M _M \07;Ht DeNM ‚ƒ
( „9Y 3;Ht
r7M •4N'. 7- _2 K8Y W4T )dD7+ a4NU0 Z) …) Zb†M 3:Y72 EJ? &:• )
Style . (
784:t7H0 ‡DvM c7'G<) )BJ O7.,';- $q&^ e9< cde'><) Eo) a< r,+) 3.78C<) EY? r7p- _2 R&^? c7'G<) )BJ *|?? O7.,'5><) *:>Q 167C. EG< _>><) _:LH'<7M r) 3P4M @:Yd7N4< HTML r7M Z,Y&N. ( @- 7-h 34:4+ 3Y&N- ,<? HTML
r) W4T K8'6)dD „9Y )?V2&. Z) Z,N:/'5:Y Style
K88Q)? )bˆ EG< )e:Q 7J,>8H:<
D,2 Style ˆ jp>Y ECN. )b7- Z,Y&N.? \%,>Q&'. Z) Z,N:/'5.
e.&. mn^ eQ? )b
r) ~4- EY &:P. Z) Style
39l5><) \'Y&N- ‰eT *- O7.e'C><) ŠNM EY D,Q,><)
r7M HTML ~4><) )BJ K8H. Z) *:/'5. c7'G<) )B8< \'6)dD rjo @- _+() W4T
Z7>.() ~N|) )BJ? \M 3t7n<) \075>< ~:€.? ]7S. 7>2 &:P.? )e:Q .
By Sami AL-Rabai3h Help With : Thamer Mohammed & Mahmoud Hussain © 2003 - 2004
3 <) )BJ h&9. mn^ gh @- ),Q&CY ? 3;HL<) K+d _6&. Zh v/o gh \M eU.? c7'G
7>2 cde'><) EovY F&9H<) IBJ $;0 I&2b) w,6 gB<) _:>.() W4T 78M v/n<) a<b D)eT‹ E<7:4<) 7%&86? K4N0 @- ]7S0 7- _:% W4T? O7-,4N><7M ie- W4T 7Ct&q e+ v/o _Lq )bˆ aC- F&:Pt 3-,4N>Y Fd,t _€Y) EY 7C4NU0 Z) W4T u&qvY 78:4T e9C<) 7ClCU. .
samialr@hotmail.com
)]7TD aC- EHG:Y *:l4< 7LLn- `:<? E%7U- c7'G<) )BJ Z) ,J 7CJ I&2b) 7- &o)? EM&N<) c7S<) W<) 38Q,><) 1'G<) IBJ @- e.V><) _>T W4T Fde9<)? •:Y,'<7M 7C< \'-h? \CŒ,< &:n<) \M 7>M \'+7Œ •&H:< .
) @- ,Qdh r,+) Z) ECH6Ž.? &o) mn^ g[ \l5%? c7'G<) )BJ 3+&6 ‰eT F,o(
7CCG<? c7'G<) )BJ R&Œ EY DD&'% 7C4NQ 7- )BJ? F&S'C- OeM F&J7X<) IBJ ~6s4Y 3:>^78<) 3:%Dd() 3G4>><) O7l'G- ŠNM EY 7:%?&'G<) `:<? 7.D7T 7M7'G2 I7CNlŒ C+,9;M •75- gh? 7C.e< 39•,- \.e< *lŒ ‡,9q W4T …) e>;M 7C4Lq? 15% ?h 7
34‘75>4< _T7H<) ’&N. e+ 7C< \+,9q &2b &:PM *+,- gvM ID,Q? ?h 7C< c7'G<) E'<) •‘7•,<) 78< 7C<76d†M 3H:€'5><) 32&S<) 346)&- rjo @- \N+,- •4P.? 3:%,%79<) &2b W4T ~6v% @;%? c7'G<) )B8< 3.&GH<) 3:G4><) ‡,9q 7C:/N0 E'<) 78:4T 7C4Lq %() I)&. 7- @G< a<b *|? _l+ 34-72 7C07Œ7:'q) Bov% 7C4NU. $%&'%() 3Gl^ W4T Z75
7C>6h _>;. ]E^ gh .
# $%&
:
.,/0 $ -S #'()*
+*,-1* 23 4$%,5(/
:
$()* 1758 #'()*
1.$ +)* $()* 0*,6
7T7!"I U'J *,V – 7(X,Y 7L#Z [J(( \']JG : ^^_`ab_c`d`e``By Sami AL-Rabai3h Help With : Thamer Mohammed & Mahmoud Hussain © 2003 - 2004
4 o
,fg h ,(Y/ HI[. \,IT.0i j
style ,(g : 3>>L><) 3;HL<) K5Q EY ‰en'5><) K6,<) _o)eM 1'G. Z) . h,k* : <p style="----style--h #'3 HI[.,fg---"> $.0G +I J(p </p> r) E>6? @:M 3;HL<) •hd EY 1'G. Z) head . h,k* : <head>
<style type ="text/css"> -</style> <head> 3P:LM _9'5- ~4- EY 1'G. Z) css 3;HL<) •hd @- \‘7Te'6) K'.? 3:<7'<) 3P:L<7M 1'G. K6? rjo @- 3>>L><) :
<link rel ="stylesheet" type="text / css" href = uJ( E- .css" />
E>6? @:M g) 3>>L><) 3;HL<) •hd EY 3P:L<) IBJ 1'G0? <head>---</head> L<) ,%,G. e+ —: )
EN:lŒ &-) )BJ cde'>4< @:;|)? &:• .
3Y&N>4< „9Y )&2b 7>8Y
R&S<) EY _:LH'<7M cde'><) 7>8:4T w&N'. w,6 @G<? 39l5><) . ,J c,4/><) „9Y r) 3M7'G< r7G^) 3•j• eQ,. \%) 3Y&N-? 7>8'.˜d style EY ?) 3;HL<) K5Q EY 7>J? 786hd . • 3 +g M v7F ,/ S$!f h /,I style ,Y-SZ +w x7 )]F E5V +w : r) 1'G. style r) ‰,6? @- K6? g) _o)D EY html
a<b &:•v0 Z,G.? 3Y?&N><)
r)
style
r) 1'2 @.B<) @:>6,<) @:M d,L;><) {e;<) ?) 34>U<) W4T „9Y
style 3.)el<) K6? _o)D EY . 7)7y'G Jk* : <p style="---">KL0ILM 7fTG </p> 7.,6 r7p><) )BJ _4;C< ... # '3 Ny'. ,fg ) F{ |}, ( h style
By Sami AL-Rabai3h Help With : Thamer Mohammed & Mahmoud Hussain © 2003 - 2004 5 r) K6? 1'2 ]E^ r?) html ,J? ) p ( r) K• _>U<7M u7n<) style \l%7UM 7Cl'2 K• r) _o)eM 7- 7%&Lq K• g?75. 3-jT style E0d7^†M ") (" K• K6,<) 7C94•) r) K6? 7C94•)? 34>U<) 7Cl'2? p . r) 3P:t EJ? 3U:'C< 7C4t,0 )b) style 3-7N<) r) ‰,6? @- K6? g) _o)D html .
Style = "---,gZ,Y• # 0( |},F{ HI[G ,fg---"
.0- 7)7y'G €0• Jk* ...
<h1 style = "---"> KL0ILM p*0/ </h1> <tt style = "---"> KL0ILM </tt>
<img src ="cpu.gif" style = "---"/>
r) )BJ _o)eM 1'G% Z) 1U. )b7- 7C%7Jb) W<) dD7l'. w,6 Z() style Z7G- g) --- \Y&N% w,6 7- )BJ? . 78P:t ›Hq? 78>8Y ]zd79<) W4T _85:< ‰75+) W<) O)&:•v'<) K5+) w,6 ... „{ font : -font-size : q e.e;'< ‰en'50? 7>J? •7:+ E0eq? eQ,. 7CJ? „n<) KU em ? pt
&p2) \-en'5><) 7C<7>T7M „l0&0 78%( a<b? 3:%7p<) ‰en'5% w,6 7CJ? .
r) _p- \-en'5><) œ-)&l<) @- &p2) EY „n<) •7:+ Feq? EJ g)
word
?
frontpage
‰en'5><) KU;<) de9. Z) *:/'5. K>L><) _NU0 a<BM E8Y
'- \%( \l67C. gB<) 78-en'6) E'<) 3M7'G<) œ-)&M eq) EY \4:n
. 78'P:t? : -) font-size: ( 1'G0? ... <p style=" font-size : 10pt " > +/0 „{ </p> p7If : +/0 „{ font-family : „n<) },% e.e;'< ‰en'50? 78'P:t? : -) font-family : ( 1'G0? ...
<p style = " font-family : Andalus " > +5 $LM „{ </p>
p7If : font-weight : „n<) Š.&N'< ‰en'50? 78'P:t? : -) font-weight : ( 1'G0? ...
By Sami AL-Rabai3h Help With : Thamer Mohammed & Mahmoud Hussain © 2003 - 2004
6 <p style = " font-weight : bold " > ‡.0% „• </p>
p7If : ‡.0% „• ˆ82* : ‰en'50 7>‘)D bold 1%7Q W<) font-weight
cde'><) W4T •S% ( EG< a<b? 78C:q eCT &2B0 w,6 E'<) —:L<) ŠNM eQ,.? .
*:>Q 3>4G<) Bov0 Z) g) Feq)? 3P:t EY —:L<) *:>Q *>U% Z) *:/'5% 3.78C<) EY \€.&N0? \T,%? „n<) KUq g) •l6 7>:Y 7J7%&2b E'<) O7HL<) .
3P:L<) =lL'Y :
-< p style = " font-size = 20pt ; font-family = Arial ; font-weight=bold " > KL0ILM Š,)]‹ E7(FG </p> p7If : ˆ82* : K8C:M 7CN|? ) ; ( ECN0 Fd7^() IBJ? ) ? ( . Œ •J7J)G ,* €0L Ž*,3 h,k* N•f ... <html> <head>
<title> „{ E7(FG </title> </head>
<body>
<p> 076•G ‘7!"G ’ Œ7J% $V'. M ’#,% „• “g </p>
<p style = " font-size : 20pt " > „{ Ep8 076•G Œ7J% $V'. „{ “g </p> <p style = " font-size : 20pt ; color : #0000ff" > 076•G Œ7J% $V '. „{ “g •Z–M ŒL' „{ Ep8 </p>
</body> </html>
By Sami AL-Rabai3h Help With : Thamer Mohammed & Mahmoud Hussain © 2003 - 2004 7 @- œTVC0 (? a.e< 3;|)? $;lt) Fd,L<) Z) e9'T) color K< )b7>< _‘75'0 e9Y 3P:LM 78N€% font-color
„9Y •490 jY 7JD&H>M 1'G0 E'<) Fe:q,<) 3>4G<) IB8Y
) @T Fb7^ 7J&l'T) 7J&:• eQ,. jY 78Y&Tˆ FeT79<
) b),^ FeT7+ _G4Y (
( ~n0 (?
)eQ _:4+ DeT _M F&:p2 b),^ eQ,. . • h /,I[ +L,k Ž[— style : -r) E>6? @:M g) 3;HL<) •hd EY \'M7'2 <head> 7 ,I v7F ,/ HI[. : <head>
<style type = " text / css " >
-- f7 * J(V 0F)G f7 * U'- J% ,Y.0pL \ $.0L +I Š 076•I ,fg HI[L
-</style> <head>
By Sami AL-Rabai3h Help With : Thamer Mohammed & Mahmoud Hussain © 2003 - 2004
8 E>6? @:M O)&:•v'<) 3M7'2 1U. \%) ›q( 7.,6 a<b _4;C<
style 7>J? : -,J? 3.)el<) K6? :
<style type = " text / css " >
,J? 3.78C<) K6?? :
</style>
r) K5Q EY g) @:>6,<) @.BJ @:M 1'2) Z) @G>. )b7-? ~:2 aCJb EY d?e. e+
style
3M7'G<) IB8< 3P:L<) EJ 7-? \4o)eM 1'G% Z) @G>. )b7- z&C< )b) ....
*9. Z) e.&0 gB<) &:•v'<) \< *CL0 K• @-? e.&0 gB<) K6,<) K6) De;0 Z) 1U. (?) jp- K6,<) )BJ @G:< \:4T p ?) h1 ]E^ g) ?) . K6,<) @;% ’&HC< p ... E<7'<72 1'G:Y : P { font-size : 14pt }
r) E>6? @:M 3P:L<) IBJ *|? eNM 7C8Y
style
w,6 3;Ht •hd g) EY \N|??
r) E>6? @:M *|,. {eq ?) 34>Q g) W4T &:•v'<) *9.
P w,6 3;HL<) Z) g) ) •hd EY 1'2 7>M F&^7l- \/M&0 jp>Y 3;HL< ... <head>
<style type = " text / css " > p { font-size : 14pt } </style> </head> <body> <p> KL0ILM Š,7fTG </p> </body>
KU;M O7:C90 3>42 7C< &8X0 w,6 r7p><) )BJ EY
„o ¤¥ EY \l'G% w,6 ]E^ gvY 7C>:>L0 r) E>6? @:M 3;HL<) EY <p>
„n<) KUq EJ? 3:t7n<) IBJ Bov. w,6 . r) E>6? @:M 3M7'G4< 3-7N<) 3P:L<) )b) style EJ :
-E-' E- { (|},F{ /,I3)076,I v7‹}
.0- Jk* :
-h1 { font-family : arial , impact ; color : #ff0000 }
Z,G0 w,6 34>Q g) )b) E>6? @:M <h1>---</h1> &>q) 78%,< Z,G. w,6 „n<) },%? arial ?) impact . Z) 79M76 7C4+ e9< ) ; ( ECN0 ) ? ( IBJ ~|h? Z) 7€.) 3-,4N><) ) , ( ECN0 ) ?) (
E%7p<) •l/Y r?() eQ,. K< )b7Y .
By Sami AL-Rabai3h Help With : Thamer Mohammed & Mahmoud Hussain © 2003 - 2004
9 em { font-size : 10pt ; font-weight : bold }
G0 w,6 34>Q g) )b) E>6? @:M 1' <em>---</em> KUq Z,G. w,6 78/o ¤ƒ Š.&T 78/o ? . r) K5Q EY 78N€%? —:L<) *:>Q *>UC< Z()? style ....
<style type = " text / css " > p { font-size : 14pt }
h1 { font-family : arial , impact ; color : #ff0000 } Em { font-size : 10pt ; font-weight : bold }
</style> ((F( )]F J% S0". œ'- •,* €0L 2*,3 M,k* “••f ... h Ž• # ,Yv7‹ 4$.$V U'- J% œ0 If style ... <html> <head>
<title> E7(FI ‘7!"G </title> <style type = " text / css " >
sup { position :relative ; top : -1ex } sub { position :relative ; bottom : -1ex} </style>
</head> <body>
</p> 076,G ’ 07Ÿ 1* 0YˆG œ'- J(V<p>
By Sami AL-Rabai3h Help With : Thamer Mohammed & Mahmoud Hussain © 2003 - 2004
10 <p> network <sub> IT </sub> </p>
</body> </html>
78CN|? E'<) Fe.eU<) O7-,4N><)? r7p><) )BJ W4T 7C079:4N0 *€C< ... sup ? sub E>6? 7>J html @G< a<b EY e.eQ (? position : relative 3:<7'<) K:9<) 7JeNM Bov0? : left ? right ? bottom ? top eL9% )b7- 7-) Feq,M eq)? 1<75M ex
@:M Fd,L;><) 34>U<) _LH0 E'<) 3q)A() d)e9- ,8Y
h +(-<sup> <sub> Œ .0- Jk* “••f ,YJ!O K!I3 +I J(p 1% 7)7y'G :
-sup { position : relative ; top : -2ex}
<p> internet <sup>Arab world</sup> </p>
p7If : -Arab world
internet
sup { position : relative ; top : -3ex} 3Y75><)
-ª
By Sami AL-Rabai3h Help With : Thamer Mohammed & Mahmoud Hussain © 2003 - 2004
11 <p> internet <sup>Arab world</sup> </p>
p7If : -Arab world
internet
*€% Z) EN:l/<) &-() @G< _G<) W4T •l/C. )BJ W4T •l/C. 7-? ) -1 ( •7:9<) ,J? C<? \'Q7q 7C- jG< @G<? 167C><) v @:N.&6 @:<7p- Bo :-sup { position : relative ; top : -1ex}
<p> internet <sup>Arab world</sup> </p>
p7If :
-internet
Arab worldsub { position : relative ; bottom : -1ex } <p> internet <sub>Arab world</sub> </p>
p7If :
-internet
Arab world E>6? c 3t7n<) 3-7N<) 3P:L<) )b) sup ? sub ...Position : relative ; 3q)A‹) I7U0ˆ : 3q)A() d)e9- ex
ˆ82* :
-3Q7;<) 15q @:>6,<) @.BJ &:• z&o) 3>6?7M 39M75<) 3P:L<) ‰)en'6) @G>. .. 7>2 Z) 7CXq( \%) – ¤ @- _+) 3q)A) E/N. – ª . a<B2? – ‚
@- &l2) 3q)A) E/N.
– ª
1<75<) @- (eM $-en'6) )b) @G<? 3q)A() OD)A 1<75<7M DeN<) D)A 7- _2 )b) g) 1Q,-+ ª eM @- r – ª $l'2 ,< g) K:J7H><7M 3:5GT 3+jT W4T _L;0 w,5Y top =lL0 bottom ... K+&Y 3+D &p2) Z,GC<? + ¤ @- reM – ¤ W<) gDŽ. w,6
eq)? d)e9>M I7U0() `GT 3q)A() ...
, .0- M,k* :
-sup { position : relative ; top : +2ex } <p> internet <sup>Arab world</sup> </p>
By Sami AL-Rabai3h Help With : Thamer Mohammed & Mahmoud Hussain © 2003 - 2004 12 p7If :
-internet Arab world }7l0) _€Y() a<B< 39:+D E0v0 ( `:.79><) Z) 7>2 K:J7H<7M cj9%) eQ,. $Xq( a4N< 1<75<) EJ? () 780&2b E'<) 3P:L<) . r) 3P:t W4T 7CY&N0 7C%) 7>M position : relative 34-72 7C07-,4N- Z,G0 EG< 3:%7p<) 3P:L<) W4T w&N'C< 7:‘78% 7J7C:8%)? 78CT k.e;<) 7C4>2) Z,GC< 78< .. •490 (? 7>J? @:'P:t &:• eQ,. ( : -position : relative position : absolut EJ? 3:%7p<) 3P:L<) W4T w&N'C< )b) position : absolute 78< *‘7S<) ‰)en'6()? ,L<) W4T 7J&:•v0 ,J 7C- _G<? D,G<7M &:P0 Z) *:/'50 79M76 $4+ 7>2 7NlŒ? d
VUN. @< K8Y @-? })eM() a:4T $%)? =|,% 7CJ @;% g) \07-)en'6) ..
r) _o)eM 1'G0?
style
Fd,L<) IB8M ..
< img src= "pic.gif" style= " position : absolute ; top : 0px ; left : 0px ; z-index : 1 " > _4;C<? 3P:L<) IBJ : -7Cl'2 ]E^ r?) position : absolute w,6 @.) g) Fd,L<) *+,- 78M ECN%?
O7J7U0() 7Cl'2 K• IeNM E0v0 w,6 E'<) O7J7U0(7M IDe;%? ~:2? Z,G0 ... 3;HL<) 3q75- @- 7Jd)e9-? ) 3^7S<) ( 3>4GY top EY Fd,L<) *| 78M ECN% W4T) Fd,L<) _LH. d)e9>M 3;HL<) ) ƒ M _5G ( \< 7C4+ K•? W4T() @- 3;HL<) 3Y7q @T left d)e9>M d75:<) 38Q 78N| W4T(7M 78N€0 Z) eNM g) ƒ _5GM 3Y7q @T d75:<) @- 3;HL<) . d75:<) W<) W4T() EY Fd,L<) *| r,9% 7C%v2? ... 7Cl'2 K• index-z : 1 IBJ?
ECN% )b7>Y O79l/<) DeN'M =>50 E8Y )eQ 3>8- 3P:L<) @- &p2) 7CN|? ,< g) a<BM r) Feq)? _G< *€% w,5Y Fd,t style c 7CN|? ,4Y 78M u7n<) style Fd,L<) index-z : 1 EY 7CN|? ,<? W<?() 39l/<) 78M ECN% style z&o() Fd,L<) index-z : 2
W<?() Fd,L<) ‡,Y E0v0 w,6 78%) g) 3:%7p<) 39l/<) 78M ECN% .
‘7Y 7- r,90 Z) @G>. 78+,Y *€%? Fd,t *€% Z) e.&% 7C%) 7C|&Y a< r,+) 7%) a<b Fe
7:4N<) 39l/<) EY 34>U<) &8X0? W4H5<) 39l/<) EY Fd,L<) &8X0 k:;M 3:N- 34>Q r) 1'G:Y
index-z : 1
\< *€% mC<) 7-) _H6() EY 78N€% Z) e.&% E'<) Fd,L4<
index-z : 2
... I7%&2b 7- &:5H0 7- z&%? (7p- BovC< 79M76
By Sami AL-Rabai3h Help With : Thamer Mohammed & Mahmoud Hussain © 2003 - 2004
13 <img src = " pic-gif " style = " position : absolute ; top : 2px ; right : 3px ; index-z : 1 >
<p style = " position : absolute ; top : 2px ; right : 3px ; index-z : 2 > pc-computer </p> N.0- Ž[—/ h,k( “g ŽJ)f : -1:0&0 K8- `:< ›q( ]E^ r?) w,6 (?) $l'2 Fd,L<) Z) 7>M `:< Z) g) D,G<) 3:%7p<) 39l/<) Z,G0 34>U<)? W<?() 39l/<) Z,G0 . r) „9Y 7C>8. 7CJ index-z : 1:0&'<) `:<? 39l/<) De;. w,6 gB<) ¤ index-z : W<?() 39l/<) ECN. ª index-z:
eQ? ,4Y Fd,L<) ‡,Y E070 w,6 78%) g) 3:%7p<) 39l/<) ECN.
‚ index-z: *|,< mC<) ?) 34>U<) ‡,Y . ‘!- ,* J% 2*,3 M,k* : -<html > <head> <title>Š,T!" </title> </head> <body>
<p> < img src ="LOG1.gif" style =" position: absolute ; top: 0px; left: 0px; z-index: 1" alt = "first positioned image" > </p>
<p style = "position : absolute; top: 60px; left: 15px;
z-index: 3; font-size: 20pt; " ><b> Positioned Text </b></p> <p> <img src = "LOG2.gif" style = " position: absolute; top: 0px; left: 0px; z-index: 2" alt = "second positioned image " /> </p>
</body> </html>
By Sami AL-Rabai3h Help With : Thamer Mohammed & Mahmoud Hussain © 2003 - 2004 14 )b) position : relative 7-h 3q)Aj< ‰en'50 postion : absolute ‰en'5'Y
K:9<) Z)Bov. Z7C•‹)? O79l/<) e.e;0 ? *+,><) e.e;'<
) top – left – right – bottom ( ... r) EY? position : absolute ‰en'5% index-z : 39l/<) e.e;'< a<b? . ) ¤ ( () 39l/<) ECN0 ? _H6() @- W<? ) ª (
39lŒ ‡,Y E070 w,6 E'<) 39l/<) ECN0
) ¤ ( ? ) ‚ (
39l/<) ‡,Y E0v0 w,6 E'<) 39l/<) ECN0
) ª (
39l/<) @- hel. K:+&'<) Z) g)
DeN<) FD7.A 15;M 784l+ 7- E/P0 E'<)? 78+,Y E'<) O79l/<) E0v0 K• W4H5<) . Ž ¦ '• “••f background . +I NO'( 7]J• ’ E5V +w Ny'G \ 1[( h style
\ 1[(. +I E7T §O,fL E6 7y 0Iw (7O v7‹ Ž[ Ny œ'-
Ny'G :
-background-color : #e6e0bd
*+,><) 3:H4o Z,< e.e;'< ‰en'50? .
background-image : url(logo.gif)
@:M 1'2 Fd,L<) K6) Z) ›q(? Fd,t *+,><) 3:H4o _NU< ‰en'50? \9l6? @:6,+
Fd7lT
url
g,';. gB<) ~4><) `H% EY $%72 ,4Y Fd,L<) *+,- D)e'-) 78M eL9%?
\:4T
style
_GS<) )B8M 1'G'Y a<b &:• $%72 ,< 7-) Fd,L<) K6) 3M7'GM EH'GCY
url(pc/logo.gif) \>6) ~4- EY Fd,L<) Z) g) pc _o)D D,Q,- ~4><) )BJ? r) ~4- W4T g,';. gB<) ~4><) style 1'G0 ?) url(../pc/logo.gif) ECN. a<BY
By Sami AL-Rabai3h Help With : Thamer Mohammed & Mahmoud Hussain © 2003 - 2004 15 \>6) ~4- EY FD,Q,- Fd,L<) Z) pc r) Z)? style 7>8%) g) &o) ~4- EY D,Q,-
r) •d7- )b) cde'><) ze< 3Y?&N- d,-() IBJ Z) e9'T) ~4><) `H% EY 75:<
html
background-position : bottom
n<) EY Fd,L<) *+,- e.e;'< ‰en'50? Z) 7C|&'Y) ,4Y a<b @- 1UN'0 ( 3:H4
3;HL<) KU;M $5:< 78%) g) F&:Pt Fd,L<) )
KUq s>'< d&G'0 ( Fd,t $%72?
IBJ eNM 7J&2B% w,6 E'<) 3P:L<) EY FV:><) IBJ w&N% w,6? 3^7S<) (
7C8Y
&‘)V<) ='H. Z) 7>Y 3;HL<) EY Z7G- g) EY *+,>4< \'M7• 3:H4n2 78N€% Z) *:/'5% Ht g) *:/'50? 3:H4n2 I7%Deq gB<) Z7G>M Fd,L<) IBJ &8X0 w,6 *+,><) EY 3;
@:>:<) 38Q W4T() EY 7Je.d) r,90 Z) @G>- g) $+,<) `H% EY @:J7U0) ‰en'50 Z) _GSM 3P:L<) 1'G% w,6 7C8Y ..
background-position : top right
1'G% K< )b7>< $4‘750 a4N<? ) ? ( g) ) ; ( l'G% K< @;CY 34>U<) IBJ EY _J @:>:<) W4T) EY 78N| r,9% 7C%v2 7C%( 78 ) ? ( @< )b) 1'G% ) ; ( K8C:M .. K:9<) 3P:L<) IBJ Bo70? ) top – bottom -center -left -right ...( background-repeat : no-repeat
d&G'0 ( 3:H4n2 7J7CN|? E'<) Fd,L<) _NQ EY ‰en'50? ..
~:2 _‘75'0 a4N< a<b
*M&M Fd,L<) IBJ KUq Z72? aN+,>< 3:H4n2 Fd,t $N|? a%h ’&'Y) a< r,9% 3;HL<) s>0 Z) W<) F&^7l- d&G'0 w,6 Fd,L<) IBJ Z7Y aN+,- 3;Ht KUq O)&- *Md) d&G'0 w,6 78%) g) 34-72 )
3;HL<) *Md KU;M 78%( (
7C|&'Y) ,< @G<?
a%v2 g) d&G'0 Z) Z?D EJ 7>2 Fd,L<) e.&0 a%) @- 1%7UM „9Y &8X0 Z) 7Je.&0
d?D A&l. 7C8Y jp- 78HL'C- EY ?) 3;HL<) 1%),Q
no-repeat
EY *|,0 E'<)
position-repeat : no-repeat
d&G'0 Z) 7Je.d) ( r,90 a%72 g) . ODd) )b) 7-) 1'G0 Z) *:/'5'Y d&G'0 Z) repeat 3P:t Z) g) „9Y ... position-repeat : eq) Bov0 @:4GS<) repeat ?) d&G'0 784NU< no-repeat d&G'0 ( 784NU< .. position-attachment : fixed
EY W9l0 Z) 3:H4n<) 7%Dd) ,< jp>Y 3:H4n4< O7lp<) ?) 32&;<) 3Ht ]7/Tˆ EY ‰en'50? Z) 1U:Y _H6()? W4T() W<) 3;HL<) a.&;'M mnS<) ‰7+ ,< W'q 3;HL<) _H6) ‘)V< F&J7¯ W9l0 EJ ‰en'5>4< 3.˜&<) 3.78% $%72 ,< g) _H6() EY *+,><) &
3;HL4< \'.˜d 3.78% EY \< &8X0 Z) 1U:Y 3;HL<) . rV% ,< W'q 7-) r7M ‰en'5><) scroll *- Fd,L<) i&;'0 w,6 78':9M z&:< 3;HL<) _H6) W<) _H6() EY W9l0 k:;M &‘)V<) 32&q .. 9M76 I7%&2b 7- B:HC0 7%Dd) ,4Y Z) (ˆ 7C:4T 7>Y 7 1%7UM 1'G% position-attachment : 3>4G<) fixed .. IBJ 1'G% K< ,< 7-)
By Sami AL-Rabai3h Help With : Thamer Mohammed & Mahmoud Hussain © 2003 - 2004 16 r7M rV% ,< (ˆ 3;HL4< &‘)V<) scroll 3;HL<) 3.78C< _L. Z) W<) _H6() W<) ) g) n<) *|,< gD7N<) *|,<) _< &:•v0 g) Z?D 3:H4 style 3:H4n<) W4T ..(
79l6 O&2b E'<) —:L<) *:>Q *>U. j-72 (7p- BovC< ...
<html> <head>
<title>ŒI/,6 7]J• Ny </title> <style type = "text/css">
body { background-image: url(logo.gif); background-position: center; background-repeat: no-repeat; background-attachment: fixed; } p { font-size: 18pt; color: #000000; text-indent: 1em;
font-family: arial, sans-serif; } </style>
</head> <body>
<center><h1> windows xp </h1></center> <br><br>
<p>
,g 0. NO'(J 0} © T!. ª7)/ Ž]-M,/ 0YˆG T!G 4Z'F Ž pL \ ,fO0"G h,k( “g +w )]F Ž]- +w ) ŒI.«Z H58 ( h©L ,* Ž3 Ž]-M )]F ,/ h©f. E ' I8 ,g 0. 'Yw T!G ’ )]F ,/ h©L ,(Y* Ž]-M 1* . © +w 4Z'F K7T/ ,* Ž3 Ž]-M )]F ,/ /,6 07Ÿ “g 1[ Œ * h©fG h©L ,* Ž[w Œ * j0)IG 4Z'F \•/ 0} ©J ¬,!"L +" . “g ŒI 4Z'F $.0L h'TL ,*$f w ŒI/,6 T7G +Yw E(F( Œ*${I- ’“ ’0F! ¬ ${ 'Yw -7)‹ $FTL 1)L ,fYw ,f.$ U'J ( f ( ,/ )]F Ž]- +f L M ,fYw Z,57 1* )]F Ž]- +w ,f(Y. M “g ,Y '" Ž]-M 4$I(* )]F KL,3 'Jw ,Y 0} © .«0 !5f/ )]F T!G ,* €07 )]F Ž]- 0} © h©f. \ \ # )]FJ Z,57 Ž]-•/ Œ 0YˆG \ Hp7w
,Yf* . . 7]J{3 4Z'F Ny #'3 ,f!I3 $T N.0- Ž[—/ •'w ®,f!I3 ’“ #'[ +w ¯$)If
\'[G ª7)/ 4Z'F ®“g Z0[IG M \ Œ7J. ’“ #'[ ,fI/,I[/ ,L#$8 E6 )]F uFIf* +w
+G•. ,YI y +I 4Z'F \M • • Š#$8 , !i 4$8 4Z'‹ „Tw $.Z ’ )]F °(G I8 , !i ,T/,- Œf% ,f6$)G ’“ 4Z'FJ Š,!k #'3 K!I3 E6 )]F Ep8 N/Z 1* ŽO ,Y(p8 1* ®,L03• ,* Ž3 h E- 1(y ,g,f y • “ 7]J{ ,/ Œ"!G0( |},F{ J% h$G ±7‹ body )]F ,/ 0Yˆ. œ'- ’“ |f |},F• ,L03• • • $ / ... ‘JTG M ²Z$I( +•
By Sami AL-Rabai3h Help With : Thamer Mohammed & Mahmoud Hussain © 2003 - 2004 17 Ž3 +w ‘7• • H!5G M ª7)/ ³.Z$I ,/ ,Y/ j$(L \ ,f‹08 $TJw Š,*'J ( 40k3 1* h \´w h '8M style Œv7‹ ŒG,*'J * h N* LZ,T* $V J7JO html $O E7(FG v ’ KL0ILM NO '( Z'"* ’ ,Y •0"I. )... h,w html 0Yˆ. • O'* Ž V +w +][G M ,g$8' h,w ‘}2 Ž[— ,/ style / “V .0)- Š,5( Œ N•G Œf.©G •J p. ...( </p> <h1> MST </h1> </body> </html> o K:>L0 r) style
\l0&><) &:P<? \l0&><) K‘),94<
) list
order & unorder
: (
-79M76 O&2b E'<) —:L<) `H% 78< 7C>:>L0 EY ‰en'5% h
—:L<) @- 3P:t g)
3P:L<) @G< \M u7n<) \>:>L0 7C- jG4Y a< 72?&'- )B8Y 39M75<) ) 3:t7n<) ( Fe.eU<) EJ K‘),9<7M 3t7n<) : -Margin-left : 75px @- 3;HL<) 3Y7q @T 3>‘79<) 3M7'2 eNM 78M eL9%?
d)e9>M 3Y7;<) IBJ @T mC<) eN'l. Z) k:;M @:>:<) °± _5GM ) Feq,<) IBJ? 7CJ 3-en'5><) (
E<7'<) _GS<) &X%) d75:<) I7U0†M ..
By Sami AL-Rabai3h Help With : Thamer Mohammed & Mahmoud Hussain © 2003 - 2004
18 )b)
margin-left
@- mC<) _LH0 E'<) 3Y75><) 78M ECN%
7C< 3l5C<7M `:<? mC4< 3l5C<7M d75:<) 38Q )
E8Y 7C< 7-) mC4< 3l5C<7M d75:4< EJ )b)
@:>:<) ..(
Feq? @- (eM _>N'50 Z) @G>. 3:t7n<) IB8< 3l5C<7M F&:o) 3-,4N-?
_5Gl<) px &'>'C5<) Feq? cm . : 3>+&><) 3>‘79<) ¤ ? ª
d)e9>M 3q)A) OBo)
°± q EJ? 784l+ 7- @T 3Y7 c $>+d E'<) 3>‘79<) 7-) z&5:<) 3;HL<) a ? b
d)e9>M 3q)A) OBo) e9Y
°± @-3>+&><) 3>‘79<) g) 784l+ 7-¤ ? ª . de90 3q)A() Z) g) eL+) )b7- $>8Y a%) e9'T)
3;HL<) 3Y7q 7>‘)D `:<? 784l+ 7- ... 1'G0 Z) aCG>. \%) 7>2 margin EY g) O7J7U0() @- —:t FeT @G>-margin-top ? margin-bottom ? margin-right
O7+?[) &p2) ‰en'5% K‘),9<) EY 7CCG<? ‰)en'6() 15q a<b?
margin-left ? 3.V:4U%() 3P4<7M K‘),9<) Z,G0 7-eCT margin-right Z,G0 7-eCT 3:M&N<7M K‘),9<) . <html dir = "rtl "> <head> <title> E} 'T </title> <style type= text/css >
ul { margin-right: 75px ; color : #ff0000 } ul ul { margin-right : 15px ; color : #0000ff } </style> </head> <body> <H1>KL0ILM </H1> <UL> <LI>Š,30X NO '* <LI> 7F{X NO '* w,8 ®“g \ ·0]L Z,57 1* )]F . 1- PC-PARTS a- CD-ROM b-CPU 2- INTERNET h +g ®“g Margin Left … .. Z $T(/ 75 Ž5[/ !5f/ ,YJ!O ,* J% d a
By Sami AL-Rabai3h Help With : Thamer Mohammed & Mahmoud Hussain © 2003 - 2004 19 <UL> <LI> 7Y7w0G <LI> 7(J% <LI> 7L2% </LI> </UL> <LI> .Z,!•& NO '* <LI>$.0/ NO '*</LI> </UL> </body> </html>
a|&'N0 e+ E'<) K:J7H><) ŠNM =|,C< Fd,L<) W<) &XC% Z) _l+ D,G<) _4;C< .
7CJ
E<7'2 $l'2 E'<) 3P:L<7M aN- _Lq `l4<) Z) e9'T) @G<? =|)? ]E^ _2 ...
ul ul { margin-right : 15px }
?) •:l/'<) )BJ BHC. Z) e.d) r,+) EC%v2 7CJ
b) D,G<) •l/. @< (ˆ? ´&S<) )BJ &Y,'. Z) 1U. g) 3>‘7+ 784o)eM 3>‘7+ O]7Q )
\< $;'Y K• W<?() 3>‘79<) @>| $%72? 3:Ln^ *+),- $4+ EC%) $XqjY D,G<) ´&S<) ]7Q 7CJ )b) 3:%jT) ? 3:>4T ? 3:8:Y&0 W<) 3:LnS<) *+),><) ~CL0 3>‘7+ 7l- D,G<) •lŒ a<B< 3>‘7+ _o)D 3>‘7+ g) ~:CL0 Z) g) K‘),9<) IB8< F&^ 3q)A) d)e9>M ]7Q 3:LnS<) *+),><) ¤± _5GM 3>42? 3:LnS<) *+),><) 3>42 @-
3q)A) d)e9>M O]7Q 785H% 3:LnS<) *+),><)
°± _5GM
WC>:<) 3;HL<) 3Y7q @-
„9Y Feq)? 3>‘7+ g) 78M u7n<) D,G<) 78:4T •lŒ 78%( ..
Z),<() •:l/0 W<) 3Y7|)
? _2 W4T Feq)
By Sami AL-Rabai3h Help With : Thamer Mohammed & Mahmoud Hussain © 2003 - 2004 20 7! —I Š2‹' ) link ( h ‘7!"G style ,Y7J% : -a { color: #0000ff } 3:lNS0 34t? g) Z) W<) gDŽ0 w,6 3P:L<) IBJ? ) link ( 78%,< =lL. w,6 ‡dA) . a: hover { color: #efb026 }
X. w,6 •?7><) 785-j. Z) D&U>M 3:lNS0 34t? g) Z) ECN0 3P:L<) IBJ? &8
79l5- I7%Deq gB<) ‡dA() Z,4<) @- 78%,< &:P'. w,6 g) E<790&l<) Z,4<7M 78%,< E<790&l<) Z,4<) W<) 3:lNS'<) Ojt,4< ..
34t,<) @T •?7><) eN'l. Z) D&U>M @G<
‡dA() Z,4<) g) 3:lNS'<) Ojt,4< I7%Deq gB<) 78%,< W<) 34t,<) *Q&0 3:lNS'<)
a: active { color: #ff0000 } •?7><7M 78:4T „P€0 w,6 3:lNS0 34t? g) Z) ECN0 3P:L<) IBJ? ) _l+ \/P€2 r,oe<) (
‡dA() Z,4<) @- &:P'. w,6 78%,< Z) g) &>q() Z,<) 78%,< =lL. w,6
I7%Deq gB<) &>q() Z,4<) W<) K• E<790&l<) Z,4<) W<) 3:lNS'<) Ojt,4< I7%Deq gB<) 7CJ .. a: visited { color: #ab1784 }
Z,4<) 78%,< =lL0 w,6 780d7.A K0 3:lNS0 34t? g) Z) 3P:L<) IBJ ECN0? ge-&9<) )
78%,< &:P'M a<b? _l+ @- 34t,<) IBJ $4oD a%) &‘)V4< r,9% 7C%v2?
\':lp0? . =lL:< 3:lNS'<) Ojt,4< 79l5- I7%Deq gB<) ‡dA() Z,4<) EP40 78%) g)
ge-&9<) Z,4<) )
) IBJ $lp0? 780d7.A K0 E'<) 34t,<) g) Z,4<) )BJ W4T „9Y 34t,<
.(
\%( 7CJ \0&2b ECCG<? m% g) W4T \9l/% Z) @G>. K:>L0 &2b) Z) D?) 3.78C<) EY ,J? 3:lNS'<) 34t,<) $;0 „o *|? ,J? 3:lNS'<) Ojt,<) EY ‰)en'6‹) *‘7^ r) ‰,6? @- K6? g) _o)eM E<7'2 1'G. html '6) w,6 7CJ ECCG< _o)D \-en ,J? 3:lNS'<) Ojt,<) 3P:t :
a { color: #0000ff ; text-decoration: underline } 784G^ =lL. g) „o 78';0 *| ? ‡dA() Z,4<7M 78N| 3:lNS0 34t? g) Z) g) E<7'2 : -EM&N<) c,67;<)
By Sami AL-Rabai3h Help With : Thamer Mohammed & Mahmoud Hussain © 2003 - 2004 21 Eg h,[X 4$% J% +G•G \ 1[(. 7‹,{ ®“g : -text-decoration: underline : 3>4G<) $;0 „o *|? e.&0 $C2 )b) text-decoration: none :
3>4G<) $;0 „o *|? ‰eT e.&0 $C2 )b) .
text-decoration: overline
:
‡,Y „n<) &8X. Z) e.&0 $C2 )b)
3>4G<) . text-decoration: line-through : EY „n<) &8X. Z) e.&0 $C2 )b) 3>4G<) ~LC-K6? $l'2 a%v2 g) html ,J? <blink> . r) O)&:•v0 7%&2b 7C%) 7>M? text . E<7'2 EJ? _l+ @- 7J&2B% K< 3P:t 7€.) &2BC< :
-text-align : top
(eM 3:<7'<) K:9<) Bov0 Z) @G>.? W4T(7M mC<) *| ECN0 gBJ?
@-top ) left – right – bottom – center ( ... 2*,3 M,k* “••f ®,L03• ,* J% ... <html>
<head> <title> 7! —I Š2‹' J% Š 076•G </title> <style type = " text/css ">
a { color: #0000ff ; text-decoration: none } a: hover { color: #efb026 ; text-decoration:
underline }
a: active { color: #ff0000 } a: visited { color: #ab1784}
p { color: #ff0000 ; font-weight: bold} </style>
</head> <body>
<p> .Z,!• NO '( 7! —G Š2‹ </p>
<a href=" http://www.cnn.com " alt= "NEWS"> CNN NEWS </a>
<a href=" http://www.bbc.com " alt= "NEWS"> BBC NEWS </a>
<br>
<a href=" http://www.aljazera.com " alt= "NEWS"> ALJAZERA NEWS </a>
By Sami AL-Rabai3h Help With : Thamer Mohammed & Mahmoud Hussain © 2003 - 2004 22 </body> </html> _:4;'< µ7';. ( r7p><) )BJ Z) e9'T) ...
r) K>L0 a%) ,J? K8- r)Ž6 a<7lM &/n. K<h •l6 7- _2 R&^ K0 7- eNM @G<?
style
r) K6,< ’&HC< jp- @:N- K6,<
p
K6? &2b 7- _2 Z) ECN. )B8Y
p
,.? eQ
r) EY \< 78'>>t E'<) O7HL<) Bov. w,6 ]E^ g) ?) m% \4o)eM
style
@G<
_NU0 Z) jp- e.&0 a%) ’&HC< g)
r) K6? _o)eM 1'2 m%
p
O7HL<) IBJ Bov. (
e.&0 Zv2 3>>L><) 3;HL<) EY $%72 E'<) u,LC<) *:>Q 780Bo) E'<) O7HL<) g) u,LC<) 3:9M @T „9Y O)B<7M mC<) )BJ V:>0 Z) g) K6,<) a<b `HCM $N|? E'<)
`H% @:M 1'G0 E'<) u,LC<) 3:9M @T ~4'n. Z) O)B<7M mC<) )B8< e.d) r,90 a%v2 _;<) ,J 7- z&C< ¶ \4GS><) IBJ _p>M _>N<) 7>Y K6,<) ...
r) 3%?&- A&l0 7CJ
style sheets
$5:< aM 3t7o 3P:t K>L0 Z) *:/'5'Y
d) )b) a:4T 7- _GY K6? gvM @- K6? g) W4T •:l/'<) a<b g&U0 Z) OD r) ‰,6? html r) K6? _o)D \>6) ETe'50 Z) html K>L. ~:2 z&C< a<b ~:2 WTe'5. ~:2? ..
By Sami AL-Rabai3h Help With : Thamer Mohammed & Mahmoud Hussain © 2003 - 2004
23 .my-style { color: #ff0000 ; font-weight: bold }
K6) 1'G0 Z) @- reM a:4T 7- _2 )b) 3/9% \4l+ *|? ieCT @- K6) g) 1'2) K6,<) ) . ( . ¶\:Te'5% ~:2 ..
?) K:>L'<) a<b \:4T *9. Z) e.&0 K6? g7M De;0 Z) a:4T 7- _2
r) E>6? @:M O]7Q E'<) Fd7lN<) W4T \N+,0 Z) e.&0 a%) ’&HC< &:•v'<)
<h1>
I7C:>6) gB<) ‡,Y I7C>>t gB<) K:>L'<) Z72?
my-style
•:l/'<) ,J &:•v'<) ?)
E<7'2 \'M7'2 \4NY a:4T 7- _2 )b) \+,% Z) e.&% gB<)
:-<h1 class = " my-style " > ,fg 076•I ‘!". œ'- </h1>
E<7'2 \'l'2 ?) \'>>t gB<) &:•v'<) ]7Te'6) 39.&Œ )b) :
-class = " ŒI. $!/ +I "Tf 07Ÿ 1* ŒI((‹ ’“ E7(FI E- "
e'6() Z) ›q( e.&0 K6? g) _o)D @- Z,G. Z) 1U. ]7T
...
2*,3 M,k* “•,f ..
<html>
<head> <title> 076•I ¾,%$I- </title> <style type ="text/css">
h2 { font-family: arial ; color: #c9ccf2 } p { font-size: 14pt ; color: #17982d } .red { color: #ff0000 ; font-size: 16pt } </style>
</head> <body>
<h2>E-' “g 17/ Ny'. \ 'f% ’M #$8 ’“ 076•I Œ7J% 0Yˆ. œ'-</h2> <br>
<p> E-' “g 17/ |L ’M #$8 ’“ 076•I Œ7J% 0Yˆ. œ'- </p>
<p class = "red" > 17/ HI[. |L ’M K y +I Š 076•I |f “g J% 0YˆG 1 E-À $f- ’“ E7(FI 076•G Œ7J% 0Yˆ. œ'- Ž/ E-' “g
red</p> +w Œ"TL N•L v7F E- h \ $.0L +I ,Y((FL Œ7%$I5L œ'- +I v7F E-$ / ,(7w ,]F ŒO'L \ $.0L +I Š ) ‘7!"I J%
By Sami AL-Rabai3h Help With : Thamer Mohammed & Mahmoud Hussain © 2003 - 2004 24 <body> </html> 1.0Ff div span h +w EYI* ${I- style :
-@:M ]E^ g) ?) m% ?) &-) &L;% Z) e.&% Z) _l+ Z7-en'5. Z)&LCN<) Z)BJ r) ‰,6? &:• @:>6?
html
@- @:>6,2 7>J&2B% Z) @G>. 7C8Y 78:4T wd7N'><)
r) ‰,6?
html
r) ETe'5%? &:lN'<) A7Q )b)
class
IB8M Z7l'G. g) 784o)eM
3P:L<) .
<span class ="red”> ®,f(‹ ’“ 076•I ,/ |f 06•I. œ'- ,fg </span> <div class ="red”> ®,f(‹ ’“ 076•I ,/ |f 06•I. œ'- ,fg </div>
,Yf* h,[X 4$ / \,7G•. \ 1[(* :
-<style type ="text/css">
span { background-color: #ccffcc ; font-size: 18pt } <style>
<span> ¾,%$I- x7 Œ/ ‹,• Š 076•G ,f y ,fg</span> Š“•
By Sami AL-Rabai3h Help With : Thamer Mohammed & Mahmoud Hussain © 2003 - 2004 25 _< 3l5C<7M r7;<) a<B2? div _< 1'G. 7- _GY span _< 1'G. div k.e;<) )BJ?
EJ? @.&LCN<) @.B8< m‘7Ln<) ŠNM &2B% Z) W<) 7%D,9. :
-margin-top : .5em :
-g) O7J7U0j< _G^ @- &p27M E0v0 Z) @G>.?
) margin-bottom ? margin-left ? margin-right ( Feq,<7M •790? em
EJ 7- 7-) )eQ 39:+D Feq? EJ?
3Y7;<) g) mC<7M @:Œ7;><) d7Œ‹)? ·-78<) eNM E0v0 E'<) 3Y75><) d)e9- ECN'Y µd7n<) @- 3Œ7;><) ) r) 1%7UM d,2B><) I7U0() 15q margin ) ( Z) @G>. O7J7U0() _2 _>N'5% ( r) 1'G0 7-eCNY margin q,< 3P:L<) IB8M 7Je ) margin: .5em ( 3Y75- Bov. .5em
rjo @- &p2) =|,% w,6? O7J7U0‹) *:>Q @-
_H6() EY _GS<) .
padding-top : .5em :
-g) O7J7U0j< _G^ @- &p27M E0v0 Z) @G>-?
) padding-bottom ? padding-left ? padding-right ( E8Y 78M ECN% )b7- 7-) 34t7H<) 3Y75><)
1%),U<) *:>Q W'q ?) 1%),U<) @- 1%7U< ) ( Feq,M •790? mC4< 39tj><) r) em \J7U0†M j2? mC<) r,q ·-),8<) g) 7€.) ) _2 _>N'5% Z) @G>. O7J7U0() ( r) 1'G% 7-eCNY padding _GS<) )B8M 7Jeq,< ) padding: .5em ( 3Y75- Bov. w,6 .5em J7U0() *:>Q @- _GS<) rjo @- &p2) =|,% w,6? O7 _H6() EY . float: left : -,J? &o) _G^ W4T E0v0 Z) @G>.? float : right
w,6 E'<) 38U<) ECN0 EJ?
r) 3q75- 78M Z,G0 div ?) span GM g) 34-72 78'q75- g) \.,';0 7- _ . Z) w&T)
7- K8H0 w,6? (7p- Bov% w,5Y •490 ( @G< c,4/><) K8Y EY j:4+ 7CJ 1Nt &-() &LCT eQ,. 7>2 1'2 clear 1'G.? @:J7U0() `H% Bov.? clear : right ?) left
&:• F&:o() 3P:L<) IBJ? d75:<) ?) @:>:4< \:4T Z72 7- W4T D,N. Z) ECN. )BJ? (ˆ 3-en'5-]ES<7M K4N<) c7M @- 7CJ 780&2b @G<? &:lN'<) A7Q )b) _:4+ _GSM
. ’ 4Z'F |f 0• ¾+X ).. center ( margin boder .5em padding
By Sami AL-Rabai3h Help With : Thamer Mohammed & Mahmoud Hussain © 2003 - 2004 26 o h 17/ • •0] ,* ¬'y'( ,/ ¾+X EgM \M +G•f span div Â
)bˆ *:/'5% @G< d,-() a:4T „4'n0 ( EG< K8C:M ‡&H<) O7J7'>M _oe% Z) e.&% ( Z) ,J ‡&H<) r,9% Z) &:lN'<) A7Q
div ~+,0 _>N0 ) rVC0 &:•v'<) 78< _>N0? &/6 u7n<) (
r) 7-) 7JeNM E0v0 w,6 E'<) D),2() W<) 3l5C<7M
span &>'5'Y .. ~:2 ¶ a<b *.&5<) r7p><) )BJ W<) &XCC< ..
<style type =”text/css"> p { color :#ff0000 } div { color: #0000ff} </style>
<p> E-' “Y ®,f((‹ ,(3 076•I ,Y7J% “]f.œ'- J(p ®“g +w <div> E-' “Y ®,f((‹ ,(3 076•I ,Y7J% “]f. E6 J(p ®“g +w 0"- h©f. œ'-
0"- h©f. E6 .. </div> Š 076•I ,Y7J% ‘!". œ'- J(p ®“g +w ) ¦ '{ ( E-' ,g,f((‹ +I ) p ( 1(y 1[ $.$V 0"-G 1 J(p \ ’
Ž3 \ ’ 17IT/,5 17IJ(p 1* ,YT!- ,* N* '‹'* +G•
0"- +w \'[G œ'- Ž(p 1* J(V .
</p>
+ ,I3 0YˆG œ'- p7If ...
K6,<) )B8< I7C>>t 7>2 &:•v'<) 78:4T *+,. w,6 34>U<) IBJ EY . E6 E-' “Y ®,f((‹ ,(3 076•I ,Y7J% “]f. E6 J(p ®“g +w 0"- h©f. œ'-0"- h©f
..
O)&:•v'<) 78:4T •l/. w,6 34>U<) IBJ EY ) u),n<) ( K6,< 7J7C>>t E'<) ) p ( e.eQ &/6 @>| @G<? @:'4>U<) @- 789l6 7- *- 3<,t,- E0v0 @< 34>U<) Z) g)
&/6 EY Z,G0 w,6 _>U<) @- 34>Q _2 Z) g) @:'9M75<) ˆ82* : -K6? @>| $%72 $9l6 E'<) _>U<) *:>Q Z) ›q( p *- 3<,t,- E0v0 K< 78CG<
r) K6? Z) g) 7JD&H>M F&9Y _2 O]7Q _M 78€NM
p K• W<?[) 34>U<) W4T •lŒ r) K6? 34>U<) ~L'C- ’&'T) div \>6? •4P.? 78C- )]VQ Bov:< ) *|,<)? r) K6? @>| gB<) mC<) 1'G. Z) EN:l/<) div g) \9l6 gB<) &/5<) `H% EY r) K6? W4T g,';><) p <b? r) K6? Z( a p Z) _M _L;. K< a<b @G< eNM •4P. K< 076•I J% NT.
By Sami AL-Rabai3h Help With : Thamer Mohammed & Mahmoud Hussain © 2003 - 2004
27 78M u7n<) &:•v'<) •lŒ? &/6 $<V% 34>U<) ) K6,< g) div ( &/6 rV% K• ..
r) K6? •4• eNM @G< 34>U4< 3:9M i7CJ Z72 7NlŒ?
div
EY @G< 34>U<) IBJ $l'2
K• 7J79l6 @.B<) @.&/5<) `H% @>| E0v0 Z) @- (eM 78M u7o e.eQ &/6 •4•)
r) K6?
p
..
<style type =”text/css"> p { color :#ff0000 } span { color: #0000ff } </style>
<p> E-' “Y ®,f((‹ ,(3 076•I ,Y7J% “]f. œ'- J(p ®“g +w
<span> E-' “Y ®,f((‹ ,(3 076•I ,Y7J% “]f. œ'- J(p ®“g +w </span> E-' ®,f((‹ ,(3 076•I ,Y7J% “]f. œ'- J(p ®“g +w )
p .. ( 0"5 x]L 1(y 1[
,YIT!- 17IJ 17IJ(pJ 0"5 x]L 1(y +G•G œ'- J(p ®“g \ ’ .
</p>
p7If :
-K6,<) )B8< I7C>>t 7>2 &:•v'<) 78:4T BHC. w,6 34>U<) IBJ EY w,6 34>U<) IBJ EY BHC. 8:4T K6,<) )B8< I7C>>t 7>2 &:•v'<) 7 BHC. w,6 34>U<) IBJ EY 7>2 &:•v'<) 78:4T K6,< I7C>>t ) p .. ( @>| E0v0 w,6 34>U<) IBJ Z) g) &/5<) `H% @>| @G<?
78'9l6 @:'4<) @:'4>U4< &/5<) `H% .
ˆ82*
:-c 3t7n<) @:'9M75<) @:'U:'C<) @:M wj'o‹) $Xq( a4N<
div
J 3U:'C<)? IB
... 7C8Y
34>Q _G< e.eQ &/6 eQ,. ( g) \€NlM (,t,- ]7Q ..
0• , .0- M,k* “•,f ..
<p>KL0IL <span style =” color: #ff0000”>KL0IL </span>KL0IL </p>
p7If : -'%&'%) '%&'%7 $%&'%7 h,/ 1[ h,k( x]L HI[f span I 076• J% NT.
By Sami AL-Rabai3h Help With : Thamer Mohammed & Mahmoud Hussain © 2003 - 2004
28 <p> KL0IL <div style =” color: #ff0000”> KL0IL </div> KL0IL </p>
f p7I : -$%&'%) $%&'%) $%&'%) =|?) _GSM ‡&H<) $Xq( a4N< ... @- _G< \4-72 \4p-) BovC< span ? div : -) ‰7T _GSM ( <html dir="rtl"> <head> <title>div</title>
<style type = "text/css">
div { background-color: #ffccff; margin-bottom: .5em } </style>
</head> <body>
<div style = "width: 10%"> )]F Ep8 1* %a^ J(p ®“g “••G œ'- ’ </div>
<div style = "width: 30%; text-align: center">
,gZ $T* 8,5* “••. ª7)/ uFIf( ,/ |f Ž p. œ'- ,fg a^ % X,— Ep8 1* +g Œ FF{( 8,5( \M 40X,!* 0"- h©f. œ'5w |f # $I* • • 1% # – •´w e^ % X,— Ep8 1* </div>
<div style = "width: 20%; height: 30%; overflow: scroll">
$T(/ ·0 ¬,]GZM ª78 1* 8,5( \'[G \ Š#$8 J(p ®“g +w ,fg Z
a^ %
Z,! Z'Y• N* X,— Ep8 1*</div> </body>
By Sami AL-Rabai3h Help With : Thamer Mohammed & Mahmoud Hussain © 2003 - 2004
29 7.,6 r7p><) )BJ _4;C< ...
e^ \%) e9'T) @G< a.e< =|)? ]E^ _GY cde'><) Eo) a< e.eQ eQ,. ( e9'T) r) K>t) ~:2 ,J 7>8<?) @.&-) aJ7l'%) style _< div K>t) K• 3;HL<) •hd EY 7€.) style _< div )D r) K6? _o div
a< $4+ 7%) cde'><) Eo) 3;HL<) K5Q EY
•hd EY K:>L'<) @- )]VQ $l'2 7%7Y D,G<) 3M7'2 EY \'9.&Œ 7C- jG< Z) 79M76 r) K6? _o)D \C- )]VQ? 3;HL<)
div
EC%) c7M @- _M klN<) c7M @- `:< )BJ?
3;Ht EY @:'9.&/<) *>U% Z) @G>. \%) EJ? 3-,4N- a< _t?) Z) e.d) @;CY Feq)?
a<B2 `:<h @:'9.&/<) 7C>4N0 ..
jY a<b @- $UTV%) $%) )b)? a< i?&'- &-()?
K6? _o)D D,Q,><) D,G<) Z) &l'T) a:4T
div
‡,Y $%) \l'2)? 7CJ D,Q,- &:•
EHY a:4T ( œ07C<) `H% E/N. w,6 3;HL<) •hd EY D,Q,><) r?() 1%7UM - 78N:>Q O)&:•v'<) •l/0 w,6 @:'<7;<) 78N>U. 3.78C<) EHY 39.&/<) $%72 7>8
78N:>Q 78N€.? .
D,G<) )BJ D,Q? ,8Y aJ7l'%) e^ gB<) E%7p<) &-() 7-)
overflow: scroll
KN%
*€0 Z) ODd) )b†Y a07-,4N- W<) 78H|) )b) a:4T Fe.eQ 3P:t IB8Y cde'><) Eo) r) 3q75>< div r) ?) span – ) scroll ( 3M7'2 (ˆ a:4T 7>Y „9Y 3P:L<) IBJ 78>6) @- 3;|)? 78%) *+,0)? .
By Sami AL-Rabai3h Help With : Thamer Mohammed & Mahmoud Hussain © 2003 - 2004
30 ˆ82* :
_9•) Z) e.d) ( 7%7Y 79M76 a< 39M75<) 3P:L<) g&2b ‰eT @- œTVC0 ( cde'><) Eo) 3P:L<) K8H0 )BGJ \'+? ]E^ _G< @G< _>- )BJ 7%) K4T) 7%7Y ›H;<) F&pGM a:4T „9Y 78XH;0 a%) @- _€Y) 78XH;'Y .. W4T &o) r) div r)? span
a< 72?&'- \4:4;'Y a< Z7;'-) I&l'T)? ....
<html dir="rtl"> <head>
<title>div & span</title> <style type = "text/css">
div { background-color: #efefef; margin-bottom: .5em;
font-size: 1.5em; width: 50% }
p { text-align: justify; color:#ff0000 } </style>
</head> <body>
<div style = "text-align: center"> ²0 \ Z'"( </div>
<div style = "float: left; margin: .5em; text-align: right">
j07Ÿ x7 M U ¬$!G \ N7"I5G Žg #$). \ N7"I5. ’“ $78' KL </div> <p>
’Z'"* 1* \'[G \ +w -("G Kf3 • ²Z$I( +••w ŒGZ$O ŒG,. 'g Œ8'(i ,f* 2[ % j$%,5f ,fg 1)fw • • +w ##0IG 2w Œ*$TG J% 17J*, KL0ILM ’•w ®,f(IG ,* Ž7L J
,YJ(3•/ *S H5[* Œ!5[* \'[. Œ ŽFL +/0% U$TG </p>
<div style = "float: right; padding: .5em; text-align: right">
By Sami AL-Rabai3h Help With : Thamer Mohammed & Mahmoud Hussain © 2003 - 2004 31 <p> w,y& 7]73 J% ²Z$I( +• EJ IG œ'- ,fg •G,)]F ‘L 0 h,(p 0)5
Ž!O 0!F Š03• $T EJ I $ / ¬ $/M 07[]I 1* 27JO 07F 1* 27JO 'g •7J% ,* Ž[w ¬ $/M ©7(IJ h'‹' Å,I]* 'Yw ¾+X Ž3 <span style = "float: left"> welcome to cascading style sheets </span></p>
</body> </html>
O)&:•v'<) EJ 3-,4N- &o) 7C.e< E9M Z() ) m‘7Ln<) ( W4T 39l/><) ?) 3N+),<) O)d7Œ‹) ) border ( :
w&N0 w,6 d,L><) r7p><) W<) &XC0 Z) D&U>M $%7Y a< 78Ht) Z) *:/'6) (? d7Œ‹) a>6 r7G^) @- _G^ g) 3:4G^ E8Y 78C- Feq)? _2 _G^
) border ( ?) \>:>L0 . ±7F ,Y *, : -border-width : \<7G^)? : -o border-width : thick o border-width : medium o border-width : thin
By Sami AL-Rabai3h Help With : Thamer Mohammed & Mahmoud Hussain © 2003 - 2004 32 border-style : 78<7G^h? : -o border-style : groove o border-style : inset o border-style : outset o border-style : ridge o border-style : solid o border-style :double border-color: _GS<) )B8M 1'G0 )b) D,6() Z,4<) ’&HC< Ie.&0 Z,< g) \l%7UM *€0?
border-color: #000000
Ie.d) gB<) d7Œ‹) Z,< \M eL+) )BJ? ...
r7p><) )BJ @G:<? 79M76 78< 7C+&/0 d7GY) FeT \M *>Q) w,6? j-72 jp- BovC< \< 7C+&/0 7>T 7C< •M75<) EY : - 3Xqj-: r) g) ]7Te'6‹) W4T K‘7+ )BJ 7C<7p- _NQ) w,6 class
K:XC'< Fe:Q 39.&Œ E8Y
78< 7C07>:>L0? 7%d7GY) },C0? O)d7Œ¹< 7t,Lo? 7%d7GY) ...
<html > <head>
<title>borders</title> <style type = "text/css">
body { background-color: #ccffcc } div { text-align: center;
margin-bottom: 1em; padding: .5em }
.thick { border-width: thick } .medium { border-width: medium } .thin { border-width: thin }
.groove { border-style: groove } .inset { border-style: inset }
By Sami AL-Rabai3h Help With : Thamer Mohammed & Mahmoud Hussain © 2003 - 2004
33 .outset { border-style: outset }
.orange { border-color: orange } .black { border-color: black } </style>
</head> <body>
<div class = "thick groove">This text has a border</div> <div class = "medium groove">This text has a border</div> <div class = "thin groove">This text has a border</div> <p class = "thin orange inset">A thin orange line...</p> <p class = "medium black outset">
And a thicker black line</p> </body>
By Sami AL-Rabai3h Help With : Thamer Mohammed & Mahmoud Hussain © 2003 - 2004
34 o
h ,Y/ HI[. \ 1[(. T.0i 0• ,f7J% +T/ •
style
:
-1'G0 Z) e.&0 ( a%) ’&HC< 7CJ Fe.eU<) F&GH<) @G< 79M76 I7%&2b 7- _2 •lŒ 7CJ _< a>:>L0 style ) r) D,2 g) style ( D,G<) 1'G0 Z) e.&0 ( g) a';Ht `H% EY r7M u7n<) style r) 3;Ht EY html r) E>6? @:M 3;HL<) •h&M <head>---</head>
\:4T &:•v'<) •:l/0 c,4/><) K6,<) _o)D EY 3;HL<) K5Q _o)eM (?
<p style--->---</p>
W4T g,';0 „9Y g) 3t7o 3;Ht 78< e.&0 a%) g)
r) D,2 style D)e'-†M 78C.Vn0? 78>:>L0 ,J a:4T gB<) _2 )b) ) css ( ... r) D,2 1'2) @G< style &:• @-r) E>6? @:M d,L;- Z,G. Z) style 7>J? :
<style type ="text/css”> .
.
</style>
0k3 -y'f Ž7JO $ / M,k* “••L œ'- #'[ HI3 „Tw ..
r) 3;Ht •hd EY ‡,Y D,G<) )BJ 1'G0 Z) 1U. E%7p<) ES<)
html @:M g) r) E>6? head )BGJ ) r) ~4- ]7Te'6ˆ D,2 )BJ? style %) gB<) D)e'-†M I7%vS ( css .. <head>
<link rel =”stylesheet" type ="text/css" hreaf=” uJ( E- .css" /> </head>
~4><) K6) O7;Ht \M eQ,. gB<) ~4><) `H% EY Z72 ,< \N€0
html
a07;Ht ?)
=:;L<) ID)e'-) *€0 a%7Y &o) ~4- EY g) a<b &:• Z72 ,< 7-) 3P< gvM 3>>L><) &2b 7>2 d,L<) ]7Te'6) 3:H:2 c7'G<) r?) EY 7% ) src =---...( 2*,3 M,k* : P { color: #ff0000 } Em { color: #ffffff ; background-color: #000000 } .key1 { color: #000000 } h uJ( ,f(7(FG “g \ ·0]L style # $I*´/ ®,fˆ]8 ®,f!I3 \ $ / ) css ( ,fLS ·0]f ®,f7(-mystyle.css ,fI)]‹ Œ/ $V'G œ'- ’“ uJ( x]L +w ®,fˆ]8 ,fL ·0w J% h,/ ,Y((FL œ'- +I html €0• v ’ ... ˆ82* : h #'[ +I/,I3 \ Æ8M style h 17(- 17/ ,(g0F8 E style ...
By Sami AL-Rabai3h Help With : Thamer Mohammed & Mahmoud Hussain © 2003 - 2004 35 o h )]‹ E7(FG html : -<html dir="rtl">
<head> <title> KL0ILM Š,7fTG HI3 J5J-</title>
<link rel ="stylesheet" type ="text/css" href =" mystyle.css" /> </head>
<body>
<p> +/0 Z'"( ®'V0. ,* Ž3 J% ’'I)G œ'- KL0ILM Š,7fTG HI3 J5J-</p> <p class="key1"> \ Z'"( Š,7)G N*</p>
<p> <em> MST</em> </p> </body>