Вы находитесь на странице: 1из 449

HTML CSS

Vertir.s

?U L ,:'


-
,
,
,


,


HTML CSS

.- - r t / r

-
-
2005

681.3.068+800.92HTML
32.973.26-018.1
52

52

. .
HTML CSS . .: -, 2005.
448 : .
ISBN 5-94157-360-
HTML CSS
-. . , . , , ,
. , , . , , . ,
,
-. , . , , .
.
-

681.3.068+800.92HTML
32.973.26-018.1
:

02429 24.07.00. 22.04.05.


7001/). . . . . 36,12.
5000 . 1001
"-", 194354, -, . , 5.
-
Ns 77.99.02.953..006421.11.04 11.11.2004 .
.

" ""
199034, -, 9 , 12

ISBN 5-94157-360-

. ., 2005

, - , 2005

10
11
13
13

1.

15

15
16
17
17
18
18
19
20
20
20
21
23
25
27
29
29
30
33
34
35
36
36
37
38
40
41
42






.....
( )

.-

43
44
46
47
49
52
53

2.

55



GIF
JPEG
,
PNG-8
PNG-24







align IMG



-



Internet Explorer
-

55
57
57
58
59
59
59
61
64
65
65
67
72
72
72
73
74
75
78
78
80
83
84

3.

89

89
91
93
94
96
97
98
99
101
101
102
105
107
109
110

4.

113

113
115
116
118
119
122
123
124
126
126
127

5.

131












border
cellspacing bgcolor






border





131
132
132
134
135
136
139
143
143
145
147
148
149
149
150
152
154
158
160
160
161
164
165
165
168
170

6.

177

177
182
182
185
188

191
194
195
199
199
200
201
202
204

7.

209

SUBMIT
RESET

210
212
213
213
216
217
220
221
223
224
224
226
229
231
233
234
235
236

8.

241





text-align
align D1V





241
245
250
251
252
253
253
255
262
262
263
265

9.

269

269
272
274

274
276
279
279
281
283

10.

287

287
290
290
292
295
298
299
300
301
304

11.

307

308
309
313
315
321
321
324
327
328
328
330
332
339
343

. CSS

347

background
background-attachment.
background-color.
background-image
background-position
background-repeat
border
border-bottom
border-bottom-color
border-bottom-style

347
350
351
353
354
355
357
358
360
361
362

_S

border-bottom-width
border-collapse
border-color
border-style
border-width
bottom
clear
clip
color
cursor
display
float
font
font-family
font-size
font-style
font-variant
font-weight.
height
left
letter-spacing
line-height
list-style
list-style-image
list-style-position
list-style-type
margin
margin-bottom
overflow
padding
padding-bottom
position
right
text-align
table-layout
text-indent
text-decoration
text-transform
top
vertical-align
visibility
white-space
width
word-spacing
z-index

364
365
367
369
371
373
375
376
378
380
382
384
386
388
389
391
392
394
395
397
399
400
402
403
405
406
408
411
412
414
416
417
420
422
423
425
426
428
429
431
433
435
437
438
439

443


HTML (HyperText Markup Language, ) , ,
-. ,

, . , HTML , , ,
,
. .
-
, , ,
. , ,
HTML, .
CSS (Cascading Style Sheets,
)? ,
, .

,
, .
, , "" .
, , HTML. CSS
,
-.
,
. , ,
, ,

JO

, W3. , , -
.
.
, .
, , .
, ,
. . , , HTML CSS.
,
.
, , . , , .
, - .
-
. - , - .
-, ,
, .
, ,
,
.
, ,
,
-.


, -,
: " ..?".
,
.

11

, -
, , , . , . , -,
. ,
- , , . .

, .

, . - , .

- , ,
.
, ,
, .
, HTML CSS.


,
,
, .
,
. , , , . , ,
, .
, , , ,
. , .
.
1 "". -. -

12


.
2 "". , ,
.
3 "". ,
.
4 "".
, , .
5 " ". ,
, . , .
6 "". ,
. , , , , , ,
, .
7 "". , ; , ,
.
8 " ".
- , , , , , .
9 " ". ,
, .
10 " ".
, , , ,
.
11 " ". ,
-,
.
" CSS". ,
, , .

13

,
. , . , , ,
: Internet Explorer 5.5, Netscape 6, Opera 6, Firefox 1.0 .
, . CSS , , .
- , .
, .
,
, ,
. , . , , , .

,
vlad@htmlbook.ru.
, , http://www.htmlbook.ru.

,
? , -.
, , . ,
,
. , .
.
CSS , , , .
. , , , ,
,
.

.
, , .
HTML CSS
. , , , .


, . ,
.

16_

, ,
HTML CSS , .
, , , ,
- .
, ,
, .

, . , , , . , , , , ,
. , , . , .
.
-
.
, .
,
, . , . .
. , ,
? CSS , . ,
.
, , .
,
. -.
( ,
) : , , .

17



, (serif) (. 1.1).

. 1.1. ,

,
,
.
,
.
, . .
, .


, , , sans-serif ( " ").
: , , . .
,
, (. 1.2).

. 1.2.

18

, , , ,
, . .
-.


,
(. 1.3).

i f ]

. 1.3.

, .
, ,
. ,
,
. ,
"" .
, , . , ""
"" , , .
,
, .
, ,
.
, ,
Courier .


, .

,
. , , ,
(. 1.4).
Windows
Comic Sans MS.

19

. 1.4.


, , , , , -
( (), (%)), ( (in), (mm), (pt) ). , .
, 12. , .
, . , , , , , , . .
, .
Arial , Times ,
Courier New Arial (. 1.5). .

W*-.^

..*.-

. - -

-~ *-

....,

*-V. " ' ' ^"'

.'

'

..... ...

*'"' ^ -@ : j j fJ jjSj -

Q j fg3 "

Arial, 12
Times New Roman, 12
Courier New, 12

Arial, 24
Times New Roman, 24

Courier New, 24
. 1.5. -

. 1.5 12 24 .
,
, .

20

. :
, , (. 1.6).
w'#

;:- * j *

. 1.6.


, .


.
: (oblique) (italic). ,
, .
, italic oblique,
.

,
: , , , , (. 1.7). .

. ,
. ,

21

. ( ) , , , .

.;..-

_ ' ( J . I ' , ' U

[ ] ig) <fis,p

'

. 'n A f 3

'V f $*>

-\j|

4 I

. 1.7.


, ,
. . 1.1 ,
.
1.1.
HTML

<></>

<i>TeKCT</i>

<></>

, ,

<sup>TeKCT</sup>

<sub>TeKCT</sub>

22

1.1 ()
HTML

<></5>

s . STRIKE, , I . , s STRIKE
HTML,

<></>

PRE .
. , ,
- . PRE , . PRE

, A P P L E T ,

BASEFONT, B I G , FONT, I M G , OBJECT,

SMALL, SUB SUP


. , , i ( 1.1).
.
| 1.1.

<html>
<body>
< b x i > " A ?! " < / i x / b > , -
-.
</body>
</html>

. , - ,
. , . .
STRONG , i,
, . ,
STRONG, i , .
, STRONG -

23

. , HTML
, . , , , ,
, STRONG, . , .


:
FONT font-family.
FONT HTML
. , , . FONT ,
.
font-family , . , .
, , Trebuchet MS,
.
,
. ,
.
, . , serif, sans-serif, cursive,
fantasy monospace. ,
,
( 1.2).
:
serif (), Times;
sans-serif ( ), Arial;
cursive , Comic Sans MS;
fantasy ; ,
Zapf, , , ;
monospace ,
, , Courier.

24_
: 1.2.

1
j

<html>
<head>
<style type="text/css">
BODY {
font-family: 'Times New Roman', Times, serif;
font-size: 100%
}
TD {
font-family: Arial, sans-serif;
font-size: 90%;
font-weight: bold
}
HI, H2, H3 {
font-family: Verdana, Tahoma, Arial, sans-serif
}
</style>
</head>
<body>
</body>
</html>

, -, STYLE.
HEAD, BODY.
, ,
STYLE type="text/css". ,
, ,
STYLE.
STYLE ,
, .
, ,
, .
, BODY, -; ,
, HI, H2, .
, . : ,
.

25


HTML, 1.2. , , , . , , ,
.
, HTML, ;
. class,
(. 1.4).
,
; , ,
. , id (. 1.7).
, .
,
, ,
.
Windows:
Arial, Comic Sans MS, Courier, Courier New, Lucida Console, Tahoma, Times,
Times New Roman, Trebuchet MS, Verdana.
Linux:
Courier, Helvetica, Lucida, Times.
Mac:
Helvetica, Times, Times New Roman, Verdana.
.


.
1. . . black (), white
(), red (), green (), blue () .
2. . . ,

26

, , , 16.
: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, , , , D, E, F.
10 15 . 15
.
, 255 FF .
,
#, #666999. , 00 FF. ,
#rrggbb,
, , .
#rgb, . , #feO
#100.
, ,
.
3. RGB. , ,
.
0 255.
, rgb(90%, %,
60%).
1.3 .
; 1.3.

<html>
<body>
<p><span style="color: !"></> - .</>
< style="color: rgb(49, 151, 116)"Xspan style="color:
#:"></> .</>
</body>
</html>


style. CSS, ,
. , ,
.

, background-color
background, color. ,
color background , 1.4.


: 1.4.

27
1

<html>
<head>
<style type="text/css">
.inverse {
font-family: Arial;
/* A r i a l */
font-weight: bold;
/* */
background: b l a c k ;
/* */
color: white;
/* */
p a d d i n g :
/* */
}
</style>
</head>
<body>
<span class=inverse>BbmopoTKa</span>
</body>
</html>

,
, Arial.


. (-small, x-small, small, medium, large, x-large, xx-large) , . , , .
(larger, smaller) . ,
,
.
CSS: em ( ), ( ), (pt), (),
(%) . 100 %
.
, . . 1.8
.
font-size,
-, 1.5.

28


'

\ lij*

!;


Larger
Smeller

x-small
small
medium

16

large
x - l a r g e

200%
30
2 em

. 1.8.

, > .
,
. , .
1.5.
<html>
<head>
<style type="text/css">
BODY { f o n t - s i z e : 90% )
TH { f o n t - s i z e : 80% }
HI { f o n t - s i z e : 180% }
</style>
</head>
<body>

/* */
/* */
/* * /

</body>
</html>

.
small, Internet Explorer 5
, ,
medium.

29

font-size: medium
Internet Explorer Netscape, CSS .


, STRONG ( ) font-weight.
: bold , bolder ,
lighter , normal . 100 900 100. , , 100,
900. (
) 400,
700.
font-weight
,
( 1.6).
; 1.6.

<html>
<head>
<style type="text/css">
{
color: #000080;
/* - */
font-weight: 900
/* */
}
</style>
</head>
<body>
<> </><>

</body>
</html>

,
- .


i ,
font-style, CSS.
, .

_30

font-style normal (),


i t a l i c () oblique (), 1-.7.
,
.
,
. , .
! .

*|

<html>
<head>
<style type="text/css">
#cursive { f o n t - s t y l e : i t a l i c }
/* */
toblique { f o n t - s t y l e : oblique }
/* */
}
</style>
</head>
<body>
<p i d = c u r s i v e > < s p a n s t y l e = " f o n t - s t y l e : 1" </>
</>
< id=oblique>HaicnoHHbM
</>
</body>
</html>

.
, ,
. ,
, , ,
.


.
, , , . , ,
. HTML
: SUP . ,
, ,
, . 1.8
. '

31

( 1.8.
<html>
<head>
< s t y l e type= " t e x t / c s s " >
SUP, SUB {
font-style : i t a l i c ;
color: red

/
/

*/
*/

}
</style>
</head>
<body>
<> </>
&lambda;<sup>3</sup> - I<sub>l</sub>&lambda;<sup>2</sup> +
I<sub>2</sub>&lambda; - Ksub>3</sub> = 0
</body>
</html>
, .
,
,
siambda;.
SUB SUP . vertical-align,
. , 1.9 o.8em. Em , .
- , , . , .5 ,
. ,
v e r t i c a l - a l i g n : 60%.
; 1.9.

...'/.. I

<html>
<head>
<style type="text/css">
.math { f o n t - s t y l e : i t a l i c ; f o n t - s i z e : 150% }
.sup (
v e r t i c a l - a l i g n : 0.8em;
/* */
color: red;
/* */

32
font-size: 70%

/* */

.sub {
vertical-align: -0.8em;
color: blue;
font-size: 70%

/* */
/* */

</style>
</head>
<body>
<i>n</i>
< class=math>f() = a<span class=sub>O</span> + a<span
class=sub>K/span> x + ... + a<span class=sub>n-l</span> x<span
class=sup>n-l</span> + a<span class=sub>n</span> x<span
class=sup>n</spanx/p>
</body>
</html>

, , (. 1.9).
:

<J> ' '">

![ ~ ~

L*l

-.:-.J

"

7."~".,-11_""*

@;

/6tJ -
JK

+ + ... +
0

-1

'"1 + "

. 1.9.

Internet Explorer , vertical-align


. , Internet Explorer 5 . sub ( ) super ( ),
, , .
SUB SUP ( 1.10).


'"

"

33_
; "

:;"

;;

- ;

1.10.

..

<html>
<head>
<style type="text/css">
.sup ( vertical-align: super; color: red; font-size: 70% }
.sub { vertical-align: sub; color: blue; font-size: 70% }
</style>
<head>
<body>
</body>
</html>

, .
, -.
,
font-variant small-caps, 1.11.
1.11.
<html>
<head>
<style type="text/css">
HI.capitel { font-variant: small-caps; font-size: 200% }
</style>
</head>
<body>
<hl>Lorem ipsum dolor s i t amet</hl>
<hl class=capitel>Lorem ipsum dolor s i t amet</hl>Lorem ipsum dolor s i t
amet...
<body>
</html>
, , . 1.10.
, , , . ,
, . , 2 1001

34

. Internet Explorer , .
.

*& " {3 IS ' f? nf 0


! I

0- & [Sj *

L o r e m

i p s u m

d o l o r

L O R E M

I P S U M D O L O R

sit

SIT

>:

a m e t

A M E T

Lorem ipsum dolor sit amet...

. 1.10.


, ,
, .
,
.
text-transform, :

, - ;

capitalize ;

lowercase ( );

uppercase ( ).

1.12. , HI, ,
.
! 1.12.
<html>
<head>
<style type="text/css">
HI { text-transform: uppercase }
P { text-transform: capitalize }

35

</style>
</head>
<body>
<hl>Lorem ipsum dolor sit amet</hl>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem
nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat
volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution
ullamcorper suscipit lobortis nisi ut aliquip ex ea commodo
consequat.</p>
</body>
</html>
. 1.11. , , , .

||jjj||!JI''1-! r-'p'iniJ ^^J

- Q

"*

(3 [gj 4jS ! ;,'? |%


| ; i

LOREM IPSUM DOLOR

SIT

A M E T
Lorem Ipsum Dolor Sit Amet, Consectetuer Adipiscing Elit, Sed Diem Nonummy
Nibh Euismod Tincidunt Ut Lacreet Dolore Magna Aliguam Erat Volutpat. Ut
Wisis Enim Ad Minim Veniam, Quis Nostrud Exerci Tution Ullamcorper Suscipit
Lobortis Nisi Ut Aliquip Ex Ea Commodo Consequat
. 1.11.

, , ,
.


, .
,
.

36

- - ,
" ".
, ,
? , , . ,
CSS ,

. ,
. ,
,
.


, .
, ,
.
, . ,

,
.
- . ,
. , :
, ?
, ,
, , , .
. , .

HR
HR ,
. , HR
HI 2, ( 1.13).

37

i i .13.
<html>
<body>
<2> ( )</2>
<HR noshade size=2>
<2> ( )<HR noshade size=2x/H2>
</body>
</html>


. 1.12.
.... , . , l,.,..fl ||

' {*} |jjjj ,.^-

'" ^ f <*<

>

> ffl *
; J

( )
( )
. 1.12. , HR

, , .
,
, .
, HR , .


,
. HI ,
. . .
1.14 ,

SPAN.

1.14.
<html>
<body>

38_

<table border=0 cellpadding=O cellspacing=O>


<tr>
<td>
<span s t y l e = " f o n t - s i z e : 220%"> Bcex</span>
</td>
</tr>
<tr>
<td h e i g h t = 4 b g c o l o r = r e d x / t d >
</tr>
</t a b le >
</body>
</html>


celipadding cellspacing . bgcolor. , , .


,
. CSS borderbottom. ,
( 1.15).
j 1.15.

<html>
<head>
<style type="text/css">
HI { b o r d e r - b o t t o m : 2px s o l i d r e d ; f o n t - s i z e : 220% }
</style>
</head>
<body>
<> 4, </1>
</body>
</html>

HI, ..., , . , , . -

39

, . , -, ,
, .
, , SPAN, HI, 1.16.
I 1.16.
;....,; ..................,;
.
.......:,........,...;.......
<html>
<head>
<style type="text/css">
HI SPAN { b o r d e r - b o t t o m : 4px s o l i d r e d }
</style>
</head>
<body>
<hlxspan>KaK < / / >
</body>
</html>

i
.....;

..;

. 1.13.

* ? '

- ' } J "^? ( j f ^


. 1.13. ,

Internet Explorer 5 SPAN. . 5.5,


.

40


,
.
,
.
, . , , , . , , ( 1.17).
1.17.
<html>
<body>
<img src=n.gif width=50 height=50 align=left vspace=2 =2>,

,
.
</body>
</html>

vspace
hspace . . 1.14.

?)

1.' <jf

_ /,
r i

,
.

. 1.14.

: , , GIF-,
. :
,

1L

; , . .
.


, ,
. , , , 1.18.
\ 1.18.
<html>
<body>
<head>
<style type="text/css">
. l e t t e r { font-family: Arial; font-size: 24pt; color: navy }
</style>
</head>
<body>
<table align=left border=0 cellspacing=O celpadding=O>
<tr><td><span class=letter>n</spanx/td></tr>
</table>
.
</body>
</html>
. SPAN float:left, 1.19.
1.19.
<html>
<head>
<style type="text/css">
.letter {
f o n t - s i z e : 200%;
float: left;
color: red;
padding:

/*
/*
/*
/*

*/
*/
*/
*/

42

</style>
</head>
<body>
<span class=letter>H</span>eo6xoflHMO,
,
.
</body>
</html>

.


, , . 1.15. , .

<|

JM

$ s | P

\ 0

;, j

, LINES ,
, .
: , LINES - ,
.. " ?", - .
", Quake", - , - " "!
. 1.15.


, , ( 1.20).
1.20.
<html>
<head>
<style type="text/css">
. l e t t e r { font-family: Arial; font-size: 24pt; color: navy
</style>
</head>

43

<body>
<table width=100% border=0>
<tr>
<td valign=top><span class=letter>B</span></td>
<td valign=top>
, LINES, ,
. :
, LINES - , . . " ?", . ", Quake", - , " "!
</td>
</tr>
</table>
</body>
</html>
,
vaiign=top.
cellpadding cellspacing.


,
. ,
, , ,
. , first-letter,
.
CSS ,
. f i r s t letter, , 1.21, ( ), .
i 1.21. f i r s t - l e t t e r
<html>
<head>
<style type="text/css">
P:first-letter {
color: red;
font-size: 200%

44

</style>
</head>
<body>
<>
,
.</>
</body>
</html>

. 1.16.

'!


. ; ,
.
i3
|] ;*JJ | / - ' =":.: ^jp ^

! |

/>
, ^.

:i
f:,J :^,.

jgji

i 1
,
.

. 1.16.


25 ,
. HTML , snbsp,-,
( 1.22).
| 1.22.

<html>
<body>
snbsp; &nbsp; snbsp; .
, , ,
. . .
.
</body>
</html>

,
.

45

( 1.23). ,
, ,
.
1.23.
<html>
<body>
<img src=empty.gif width=20 height=l>CBapnTb .
. .
</body>
</html>

GIF-
1 1 .
, . text-indent ( 1.24).
(pt), (), (in), (mm) .
| 1.24. t e x t - i n d e n t
<html>
<head>
<style type="text/css">
P { t e x t - i n d e n t : 20px }
</style>
</head>
<body>
<> 2 1 .
. .</>
</body>
</html>

, ,
. , ,
, ,
.
text-indent, 1.25.
! 1.25.
<html>
<head>

46
<style

1
type="text/css">

P {
t e x t - i n d e n t : -20px;
p a d d i n g - l e f t : 20px

/* */
/* */

}
</style>
</head>
<body>
<> <>
1 , 5
.</>
</body>
</html>

padding-left , .
, .


HTML ,
. , . , word-spacing ( 1.26).
1.26. word-spacing
<html>
<html>
<head>
<style type="text/css">
P { w o r d - s p a c i n g : lOpx }
</style>
</head>
<body>
<> + = </>
</body>
</htmi>

. -.

47

~~^

j u s t i f y , wordspacing ,
,
.


, , ,
. .
.
, "". ,
. .
. , , "". - , , , ,
.

. ,
, , , . ?
.
, . , -.

, ,
. -
, ,
.
.
.
. , HTML , . ,
, . - "", .

48

,
, .
,
, , .
- . align,
. :
left ;
, , ;
center ;
right ;
justify .
1.27 .
1.27. a l i g n
<html>
<body>
<2> </2>
<>
.</>
<2> </2>
< align=right>CTpoKM ,
"". ,
, .</>
<2> </2>
< align=center>Ka;KflaH ,
. </>
<2> </2>
< align=justify>CTpoKH
. ,
.
.</>
</body>
</html>

, ,
. 1.17.

, align. text-align, . , align ( 1.28).

49

3>

..a.; 0

j i j / : . > - '

;:- i^ ^ }

: 4 i -

! |

j j j j


, "".
, ,
.


, .


.
, .
.

. 1.17.

! 1.28. t e x t - a l i g n
<html>
<head>
<style type="text/css">
P { text-align: justify }
</style>
</head>
<body>
</body>
</html>


, , .
,
.

50

.
,
, ,
.
, , margin-top margin-bottom. ,
, , ,
1.29.
1.29.
<html>
<head>
<style type="text/css">
P (
margin-bottom: Opx;
margin-top: Opx
}
</style>
</head>
<body>
<p> ... </p>
</body>
</html>

/* */
/* */

,
HI, H2, . .
, , . , . 1.18.
. 1.18 ,
. , -
.
.
, ,
. .
1.30.

51

^ :-'"-

4 ' 1 ^

! !} C:\Www\bhtml

S3

-
1 , 5
. .

.
. .

2 1
.
. .

-
1 , 5
. .

.
. .

2 1
.
. .
HotDog

. 1.18.

1.30.
<html>
<head>
<style type="text/css">
{
margin-bottom: O.lem;

/*
*/

margin-top: Opx;

/* */

font-family: Arial, sans-serif;

/*

, */
font-size: 100%

/* */

margin-bottom: lem;

/* * /

margin-top: Opx

/* */

</style>
</head>
<body>
<h3>HotDog</h3>

52

<> .
.</>
</body>
</html>

,
. , ,
o.iem. margin-bottom
. lem,
.

( )

. . CSS
line-height. normal .
. , 1,5 . , CSS, (), (in),
(pt) . ,
100 % .
.
. 1.19 .
, 1.31.
; 1.31.
<html>
<body>
<div style="line-height: 1.5">
<> </><>
,
, ,

.
</body>
</html>

53

-LI'/b'ni'ji'i)tifiBp.'i;iiji;ju! -rtSitfuiuf!Ufiuriat l.'.^'um

*J l)

. ^

(:J-

i'i

[j

::


, ,
,
. - ,
,

, ,
, :}
.

, ,
,
.

. 1.19. ;

,
, .



.
,
. ,
.

word-spacing, 1.26.
,
letter-spacing. CSS,
,
(em ). . 1.20
letter-spacing.
, . , -

54

,
- . ""
. 1.32 letter-spacing .

'' ''

%$

E

". i^f 9 ('J3" -*
LJ -'JJ
*-

. 1.20.

1.32.
<html>
<body>
<>, </>
< s t y l e s " l e t t e r - s p a c i n g : 0.3"> </></^!>
< s t y l e = " l e t t e r - s p a c i n g : 0.2"> MHTepBan</p></td>
< s t y l e = " l e t t e . r - s p a c i n g : "> </>
< s t y l e = " l e t t e r - s p a c i n g : -1"> </>
</body>
</htmi>

, letter-spacing
, ,
.

, , . ,
, , . .


IMG,
src,
. , , IMG ,
.
-, , .
,
,
.
IMG, .
ALIGN. -.
ALT. .
;
. ,

56

.
.
,
. alt . .

BORDER. , -,
. border. , . , ,
. , border=o.

HEIGHT WIDTH. HTML

height

width.

.
, , IMG.
, . , width=ioo% , . width height .
,
.
-. , . , .
,
. , . , . . , .
, , .

HSPACE VSPACE. hspace


vspace. .
, "" ,
.

ISMAP ismap , -. - -

57

. .
. -.
. IMG , href CGI-. , , -. ,
100, 50,
http://
www.htmlbook.ru/cgi-bin/map.cgi7100,50.
CGI- GET
LOWSRC. lowsrc
.
. - , - . ,
,
. .
SRC. , .
.


- GIF
JPEG. , ,
, -.
PNG,
PNG-8 PNG-24.
PNG GIF JPEG.

GIF
GIF (Graphics Interchange Format, ) ,

58

. GIF 8-
, .

2 256,
24- .
GIF . , "" .
,
.
.

, , , ,
, .

JPEG
JPEG (Joint Photographic Experts Group,
) ,
. JPEG
24-
. , JPEG .
, ,
. JPEG .
,
.

16 ,
.
,
.
,
JPEG,
.

.
, , .

59

PNG-8

PNG-8 (Portable Network Graphics, )


GIF. , , ,
.

8- (256 ) , . ,
, 2 256.
GIF, .

, , , .

PNG-24
PNG-24 , PNG-8, 24- . JPEG,
. GIF PNG-8, , , , .

16,7 , -
.
,
, .
D - ,
, PNG-24 .

, , , .


,
, . , border IMG ( 2.1).

60

\ 2.1.
<html>
<body>
<img src=sample.gif width=50 height=50 border=2>
</body>
</html>
, border 2 .
.
, border
( 2.2).
2.2.
<html>
<body text=#00ff00>
< h r e f = s a m p l e . h t m l x i m g s r c = s a m p l e . g i f width=50 h e i g h t = 5 0 b o r d e r = 0 x / a >

</body>
</html>
, , . border
( 2.3).
2.3.
<html>
<head>
<style type="text/css">
A IMG { border: none }
</style>
</head>
<body>
<a href=/index.htmlximg
</body>
</html>

src=/images/horQe.gifx/a>

A IMG
IMG, , ,
. .

61

,
-. , ,
( 2.4).
2.4. ,

<html>
<head>
<style type="text/css">
A IMG { b o r d e r : none; b o r d e r - c o l o r : #fff }
</style>
</head>
<body bgcolor=#ffffff>
<a h r e f = / i n d e x . h t m l x i m g ' s r c = / i m a g e s / h o m e . g i f x / a >
</body>
</html>
- .

, . border: none.


-. align IMG. . 2.1
.
2.1.

align

absbottom

Lorem ipsum dolor sit amet, *^j consectetuer


adipiscing elit...

absmiddle

Lorem ipsum dolor sit amet, consectetuer


adipiscingelit...

bottom

Lorem ipsum dolor sit amet, consectetuer


adipiscing elit...

baseline

62

2
2.1 ()

align

left

ill Lorem ipsum dolor sit amet, consectetuer


adipiscing elit...

middle

Lorem ipsum dolor sit amet, consectetuer


adipiscing elit...

right

Lorern ipsum dolor sit amet, consectetuer fll


adipiscing elit...

texttop

Lorem ipsum dolor sit amet, 11 consectetuer


adipiscing elit...

top

V Lorem ipsum dolor sit amet,


consectetuer adipiscing elit...

(~

a l i g n ,
absbottom, absmiddle, baseline t e x t t o p
HTML 4.
.
left right, .
, ,
.
.
.
. : , . , texttop
. ,
, , (. 2.1). ,
.

63

, texttop top . , ,
. ,
aiign=top, .
,
absbottom
, a bottom . ,
(. 2.1).

. 2.1.


. , , middle absmiddie align
. , , . 2.1. ,
Internet Explorer,
middle absmiddie.
, , IMG align=absmiddie ( 2.5).
; 2.5.

<html>
<body>
<img src=help.gif width=66 height=65 align=absmiddle> <span style="font-

size: 200%; font-family: Arial, sans-serif"> </>


</body>
</html>

font-size. . 2.2.
, -
. , Internet Explorer 6 (. 2.2, ) absmiddie
align , ;
Netscape 7 (Firefox) (. 2.2, )

64

, Opera 7 (. 2.2, 6)
.

* ) -

\
. 2.2. :
Internet Explorer 6; Opera 7; Netcape 7



.
"

>

-.

....

TiuuiJEiji-ry.- fDSo t U t e t i m 1,'.


:
;J-

''

;J

'! \\

::

Jf

,-

- "

; :

"

. .{

'I'--

^si*1*1"^-

. 2.3.

"
"., i

65

,
. , - ,
,
. 2.3.
-
.


, 2.3, ( 2.6).
bgcolor, ,
bordercoior. ,
border IMG.
.
2.6.
<html>
<body>
<table width=150 height=150 border=l align=center cellspacing=O
bordercolor=#000000 bgcolor=#f0f0f0>
<tr>
<td a l i g n = c e n t e r x i m g s r c = i m a g e s / s a m p l e . g i f width=71 h e i g h t = 7 1
border=lx/td>
</tr>
</table>
</body>
</html>

,
( ) aiign=center.
, cellspacing
, .


,
. , . , , . ,
3 1001

66


. , Internet Explorer Opera. . , , .
, padding-top
padding-bottom ( 2.7).
| 2.7.

<html>
<head>
<style type="text/css">
.frame {
padding-top: 40;
/* */
padding-bottom: 40;
/* */
background: IfOfOfO;
/* */
border: solid 2px black; /* */
width: 150px;
/* */
text-align: center
/* */
}
</style>
</head>
<body>
<div class=frame><img src=sample.gif width=70 height=70x/div>
</body>
</html>
,
, ,
DIV ( 2.8).
| 2.8.
<html>
<head>
<style type="text/css">
. frame {
background-color: #f0f0f0;
b o r d e r : s o l i d 2px b l a c k ;
text-align: center

67

</style>
</head>
<body>
<div class=frame
width: 150"><img
<div class=frarae
width: 200"><img
</body>
</html>

style="padding-top: 40; padding-bottom: 40; 4>


src=samplel.gif width=70 height=70x/div><br>
style="padding-top: 50; padding-bottom: 50; 4>
src=sample2.gif width=100 height=100x/div>

,
. , . ,
.


, . ,
.
IMG , , ait, , , , . , ,
. , ,
(. 2.4). , .


. 2.4.

68

- , .
, ( 2.9).
2.9.

<html>
<body>
< t a b l e width=100 border=0 c e l l s p a c i n g = O c e l l p a d d i n g = 4 bgcolor=#cc9900>
<tr>
< t d x i m g s r c = f i g u r e . j p g width=100 h e i g h t = l l l x / t d >
</tr>
<tr>
<td>IlpMMep n o f l n n c n < / t d >
</tr>
</table>
</body>
</html>

. ,

ceiipadding cellspacing. ,
, . ,
bgcolor, .
2.9 ,
. , ,
aiign=ieft | right.
. , , IMG, . , . , , . ,
. ,
, , ,
ceiipadding ( 2.10).
: 2.10.
<html>
<body>

69

<table width=100 border=0 cellspacing=O cellpadding=6 align=left>


<tr>
<td>
<table width=100 border=0 cellspacing=O cellpadding=4 bgcolor=#cc9900>
<tr>
<tdximg src=figure.jpg width=100 h e i g h t = l l l x / t d >
</tr>
<tr>
<td>npMMep noflnncn</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>

,
. .
padding, margin.
float ( 2.11).
| 2.11.
<html>
<head>
<style type="text/css">
#sign {
padding: ;
margin: ;
background: #000;
border: lpx solid black;
width: ;
float: left;
font-size: 90%

/*
/*
/*
/*
/*
/*
/*

*/
*/
*/
*/
*/
*/
*/

}
</style>
</head>
<body>
<div id=sign>
<img src=puh.jpg width=100 height=lllxbr>

7
-

- , - , - , ...
... - -
.<br>
- , - , -
.<br>
- -, , . .<br>
- , , .<br>
- - ? - , .
:<br>
- , !<>
- , - , . - ,
, .
</body>
</html>

. ,
. 10
margin. float. right, .
. 2.5.
, . .
2.11
caption ( 2.12).
"

i 2.12.
<html>
<head>
<style type="text/css">
#sign {
padding: lOpx; margin: Opx lOpx lOpx Opx;
background: #e0e0e0; border: lpx solid black;
float: left; font-size: 90%
width: 190px;
}
tcaption {
float: left;
border: lpx solid black;

/* */
/* */
/* */

71

m a r g i n :

/* */

</style>
</head>
<body>
<div i d = s i g n >
<img s r c = p u h . j p g width=100 h e i g h t = l l l i d = c a p t i o n > < b r >
-<> <>

</body>
</html>


- ^
: |

'" 'li .P rfc*** r - 7

' @ '| ;"5 * 1


1 3

- , - , - ,
... ... -
- .
- , - , -
.
- -, , . .
- , ,
-
.

- - ? -

, .
:
- , !
- , - , . - ,
, .
. 2.5.

caption,
, . , , . ,
, Opera width , .
margin,
.

_72



-, ,
.
,
HTML, .

aligmera IMG
-
align IMG. , , .
, right, left. align
IMG - vspace hspace.
.

( 2.13).
2.13.
<html>
<body>
<img src=sample.gif width=50 height=50 hspace=10 vspace=10 align=left>
Lorem ipsum dolor s i t amet...
</body>
</html>


hspace,
.
, ,
hspace. ,
.


,
.
align
TABLE, , .
,
( 2.14).

73

2.14.
<html>
<body>
< t a b l e width=70 height=70 border=0 a l i g n = l e f t cellpadding=O
cellspacing=O>
<tr>
< t d x i m g s r c = s a m p l e . g i f width=50 h e i g h t = 5 0 x / t d >
</tr>
</table>
Lorem ipsum dolor sit amet...
</body>
</html>

, . . , ,
.
. ,
. vaiign=top TD
, , (. 2.6).
i 1 >!UJIWJ

,ujujj,iy

J '':'-''*'-

-i'lkr'jj'j't!

I m s r u s ! i.'p...

jjj3 i2J ,:, /-'

'?

j j j

L o r e m ipsum dolor sit arnet, consectetuer


adipiscing elit, sed diem nonummy nibh euismod
tmcidunt ut lacreet dolore magna aliguam erat
volutpat. Ut wisis emm ad minim veniam, quis

nostrud exerci tution 11 suscipit lobortis nisi ut aliquip


ex ea commodo consequat.

. 2.6.


float.
right -

74

, . left, , , ( 2.15). , float, . , ,


, ,
.
{ 2.15.

<html>
<head>
<style type="text/css">
#warp {
float: left;
/*
*/
m a r g i n - r i g h t :
/* */
}
</style>
</head>
<body>
<img s r c = s a m p l e . g i f width=50 h e i g h t = 5 0 id=warp>
Lorem ipsum d o l o r s i t a m e t . . .
</body>
</html>


hspace vspace, margin margin-left, margin-right, margin-top margin-bottom. , , .


.
, .
(. 2.7).
i Q

, , ,
[ , , , ]

. 2.7.

75

, .
ait IMG
( 2.16).
'

'

"

2.16.
<html>
<body>
<img src=home.gif >
alt="3flecb , , , ">
</body>
</html>

a l t .
,
.
, 2.17.
.
\

; 2.17.
<html>
<body>
< h r e f = i n d e x . h t m l x i m g src=home.gif alt="3flecb ,
, >
, " / >
</body>
</html>

, , . ,
,
.
(

Opera 7 .


-
GIF, JPEG PNG.

76_

, ,
, . -, background
BODY, 2.18.
! 2.18.
<html>
<body background=/image/samplebg.gif>
</body>
</html>

background . , .
, , - ,
.
.
( 2.19).
I 2.19.

<html>
<body bgcolor=#cOcOcO background=/image/samplebg.gif>
</body>
</html>

bgcolor BODY.

-. HTML
,
.
background , , , ,
, , . , , . 2.8, ,
2.20.

77

'

:. / ' - ^ >

\i

'

'

'

L5i

5]

V*

'

'

'

'

'

"

'

1 ^
^5

,
, , .
,
.
. 2.8.

2.20.
<html>
<head>
<style type="text/css">
BODY {
background:
white
url(/images/help.gif)
right top
no-repeat
fixed

/*
/*
/*
/*
/*

*/
*/
*/
*/
*/

HI {
font-family: Arial, sans-serif;
font-size: 120%
</style> .
</head>
<body>
<1></1>
,
, , .
, .
</body>
</html>

background ,
, . -

78

,
. ,
.
. background backgroundposition, . : (left, center, right) (top, center,
bottom). ,
.
. fixed background background-attachment
, scroll
.
, ,
background-image, ,
, background. : norepeat ( ), repeat
, repeat-x , repeat-y
.


- ,
, , , .


- ,
.
1700 . , ,
(. 2.9).
. , , ,
. -
background BODY.
, .
,
(. 2.10).

79

640X480
800x600
1024x768
. 2.9.

3 '0..' [SJ 12 < !

j?

Lorem ipsum dolor sit amet, consectetuer


adipiscmg tlit, sed diem nonummy rabh
. euismodtiriciduntlit lacreet dolure magfta".>
aliguam erat volutpat. Ut wxsis enim ad
minim veniam, quis nostrad cerci tution
ullamcorper suscipit lobortjs nisi ut aliquip
ex ea commodo consequat.
. 2.10.
. .
- , ,
, . . , .
2030
.

80_



. , , . 2.11.

. 2.11.

, ,
. . ,
10 . , 2.21.
2.21.
<html>
<body>
<table width=300 cellspacing=0 cellpadding=4 bgcolor=#ceffc4>
<tr>
<td width=290xi>BejraKaHbi ,
, . </ix/td>
<td width=10 background=shaddow.gif>snbsp;</td>
</tr>
</table>
</body>
</html>

,
. , , .
(. 2.11) . ,
, . ,
, , . , "" ceiipadding,
.
2030 , , -.
. 2.12.

81

t j j rasiM!

%_/'

;*] |pj :.

.>

? i^f

^ J

,
,
. :
:

. 2.12.

, . ,
. , .
, "", . , . 2.2.
2.2. ,

1-gif

2.gif

3.gif

4.gif

5.gif

2.22.
i 2.22.
<html>
<body>
< t a b l e width=300 cellspacing=O cellpadding=O a l i g n = c e n t e r bgcolor=#dddd99>

82

<tr>
<td width=288 style="padding: 4"1> ,
, .</i></td>
<td width=12 background=l.gif valign=topximg src=4.gif width=12
height=20x/td>
</tr>
<tr>
<td width=290 height=12 background=2.gifximg src=5.gif width=16
height=12x/td>
<td width=10 valign=top background=3.gifximg src=spacer.gif width=10
height=12x/td>
</tr>
</table>
</body>
</html>
. 2.13.

"

.' . ]

. ij1

:
''" 1 '

'. '.' f

,
,
:
/.
.
;

. 2.13.
2.22 .
, ,
.
. , ,
.
ceiipadding cellspacing ,
.
, (styie="padding:
4-").

,
vaiign=top
TD. .

83

, ,
, GIF.
spacer.gif.
.


Internet Explorer
Internet Explorer, ,
, .
200 200 , (. 2.14).

:.
;;

- g

[ j j i*Js '

. 4$*

;>
| ^ J
_
_

. 2.14.

:
, , .
-. , IMG
galleryimg=no, 2.23.

84

i 2.23. ,

<html>
<body>
<img src=vedom.jpg width=300 height=400 galleryimg=no>
</body>
</html>

. imagetooibar
, 2.24.
: 2.24. \
<html>
<head>
<meta http-equiv="imagetoolbar" content="no">
</head>
<body>
<img src=vedom.jpg width=300 height=400>
</body>
</html>

-
-
. , , . , -
, . ,
, .

1. . ,
,
, ,
- . , - .
2. , .

85

1.
. .
,
. .
- ,
, ,
.
2. HTML.
,
,
. ,
.
3. - ,
: , ,
.
-
.
.
, . ,
, ,
, . , .
, . ,
, .
.

. - , .
-
.

86

.
-.
HTML-,
. ,
, usemap IMG. ,
MAP. MAP usemap. usemap IMG ( 2.25).
| 2.25. -

<html>
<body>
<img src=map.gif width=411 height=46 border=0 usemap=#navigation
]^=" ">
<map name=navigation>
<area shape=poly coords="210,27, 203,9, 202,6, 197,2, 192,1, 120,1,
115,2, 110,6, 112,9, 119,27, 119,32, 211,32, 210,27" href=linkl.html>
<area shape=poly coords="302,27, 295,9, 293,6, 289,2, 283,1, 212,1,
206,2, 202,6, 203,9, 210,27, 211,32, 284,32, 303,32, 302,27"
href=link2.html>
<area shape=poly coords="302,27, 303,32, 394,32, 393,27, 386,9, 382,3,
375,1, 303,1, 298,2, 293,6, 295,9, 302,27" href=link3.html>
</map>
</body>
</html>

MAP AREA,
, , ,
, , .
AREA .
SHAPE. .
(circle), (rect), (poly).
ALT. .
, .
.
HREF. , .
,

87

. ,
( zip )
. , target.
COORDS. . , 0, 0. ,
. .
.
<area shape=circle coords="230, 340, 100" href=circle.html>
.
<area shape=rect coords="24,18, 210, 56" href=rect.html>
, . 2.15.

. 2.15.

TARGET. ,
.
target AREA ( 2.26). , name.
, .
:
_ .
_self .

parent -; ,
self.

_top
; , _seif.
2.26. t a r g e t
<html>
<body>
<map name=nortland>

88

<area coords="21, 24, 121, 124" shape=rect href=/sch/images/new.html


target=_blank>
</map>
<img src=/images/piter.gif width=200 height=200 usemap=#nortland>
</body>
</html>
. ,
new.html.

- . ,
html-, , . ,
, , .


, , ,
. - .
HTML
. name href . , . ,
, . href (URL, Universal Resource Locator, ),
. . ,
, http://www.htmlbook.ru
/about/. ,
-, . ,
,
. ,
, .
, ( /), /forum/source/adm.html. ,

90

http://www.htmlbook.ru/forum
/source/adm.html. , , -.
.
/
/demo/
-
index.html ( default.html),
demo. index.html , , , , .
/images/pic.html
, . pic.html, images.
, , .
../help/me.html

.
manual/info.html
,
, .
,
, , .
HREF. , .
,
. ,
( zip )
. , target.
NAME. name . name . #, . , .
, -
. # . < name=..,>
</> , . . .

91

TARGET.
.
target .
, name. , . :

blank ;

_seif ;
_parent -; ,
_self;
_top
; , _seif.
3.1.
! 3.1.

<html>
<body>
<>< =^><//>
< h r e f = . . /./.1>0 </><>
< href=http://www.htmlbook.ru/wormik/knob.html>A6coJU0THaH </><>
< h r e f = n e w . h t m l target=__blank>CcHUiKa </><>
< href=#top>HaBepx </>
</body>
</html>

name, ,
target.


. ,
, ,
. : , , , . "",
,
. , ,
border IMG.

92

.
-, .
, , , , ,
"..." . .
3.2 .
3.2.
<html>
<body link=#0033cc vlink=#cecece alink=#dd0000>
<p><a href=linkl.html>TeKCTOBaH </>
<p><a href=link2.htmlximg src=banner.gif width=468 height=60></a>
<p><a hrer=link3.htmlximg src==button.gif width=80 height=40 border=0
align=absmiddle> </>
</body>
</html>

, . . , -
IMG, < href=...> </>.
, , .
-
.
(link). , . .
(alink).
. ,
. . .
(viink). ,
,
, .
BODY, 3.2. ,
, .

93

. CSS,
.
.
: { : }

, :
active ;
link ;
hover ;
visited .
3.3 .
3.3.
<html>
<head>
<style type="text/css">
A : l i n k { c o l o r : #003366 }
A : v i s i t e d ( c o l o r : #660066 }
A:hover { c o l o r : #800000 }
A : a c t i v e { c o l o r : #ffO000 }
</style>
</head>
<body>
<a href=linkl.html>CcbOTKa K / a >
href=link3.html>CcbinKa 3</a>
</body>
</html>

I <a href=link2.html>CcbinKa 2</a> | <a

link ,
, , . , link, , .



, , . , , ,
, , -

94

. CSS . ,
, , , . ,
, . .
, , , , , . ,
,
, .
,
t e x t - d e c o r a t i o n : none ( 3.4).

I 3.4.

<html>
<head>
<style type="text/css">
A {

text-decoration: none
}
</style>
</head>
<body>

/* */

<a h r e f = l i n k . h t m l > C c b u i K a < / >


</body>
</html>

hover visited
text-decoration, .



,
text-decoration: none, A:hover.
, .
text-decoration: underline
( 3.5).

95

i 3.5.

<html>
<head>
<style type="text/css">
A {

text-decoration: none
}
A:hover {
text-decoration: underline

/* */

/*
*/

}
</style>
</head>
<body>
<a href=link.html>CcbinKa </>
</body>
</html>

.
. text-decoration: underline overline A : h o v e r ( 3.6).
| 3.6.
<html>
<head>
<style type="text/css">
A { t e x t - d e c o r a t i o n : none }
A:hover { t e x t - d e c o r a t i o n : u n d e r l i n e o v e r l i n e }
</style>
</head>
<body>
<a href=link.html>CcbmKa </>
</body>
</html>


, ; , . 3.1.

96

j :

,,/

\ (*! ^ v

(& ; >.'

. 3.1.

,
, .


, hover
, color, 3.7.
3.7.
<html>
<head>
<style type="text/css">
A f
text-decoration: none;
color: #0000ff
A:visited {
color: #800080
A:hover {
text-decoration: underline;
color: #ffOOOC

/* */
/* */

/* */

/*
*/
/*
*/

</style>
</head>
<body>
< href-link.1> </>
</body>
</html>

97

( ),
( A:visited)
.
(

v i s i t e d hover . hover, .

,
, font-size A:hover.
, .


CSS .
,
, .
Netscape 6, Mozilla, Firefox, Internet Explorer 5.5,
Opera 5 .
, , SPAN, , , .
A:hover, 3.8.
; 3.8.
<html>
<head>
<style type="text/css">
A {
color: blue
}
A:hover {
color: red
)
.link {
color: blue
}
</style>
</head>
4 3. 1001

/* */

/*
*/

/* , */

98

<body>
<

href=link.html><span class=link>CcbuiKa</spanx/a>

</body>
</html>

, .


, , , . borderbottom, .
dashed, . 3.9

.
3.9.
<html>
<head>
<style type="text/css">
A {
c o l o r : #ffO00O

/* */

}
A:hover {

text-decoration: none;
border-bottom: lpx dashed blue

/* */
/*
*/

}
</style>
</head>
<body>
<a

href=link.html>nofl4epKHyTa.q </>

</body>
</html>


. text-decoration: none, (. 3.2).

99

Q ? - ^

JjjP1

til ad J; : >-' '' iff < 0 ^

:!

. 3.2.

, , border-bottom: 4px double red,


3.10.
I 3.10.

<html>
<head>
<style type="text/css">
A { color: #0000ff }
A:hover { text-decoration: none; border-bottom: 4px double red }
</style>
</head>
<body>
<a href=link.html>nofl4epKHyTaH
</body>
</html>

</>

, , .



- , . . 3.11
. , , ,
.

100
3.11.

3
I

<html>
<head>
<style type="text/css">
A { f o n t - s i z e : 14px; c o l o r : red }
A:hover { c o l o r : green }
A . l i n k l { f o n t - s i z e : 12px; c o l o r : g r e e n }
A.linkl:hover { color: blue }
A . l i n k 2 { f o n t - s i z e : 120%; c o l o r : b l u e }
A.Iink2:hover { color: red }
</style>
</head>
<body>
<p><a href=linkl.html>CcbuiKa l</a>
<p><a h r e f = l i n k 2 . html class=linkl>CcbinKa 2</a>
<p><a h r e f = l i n k 3 . html class=link2>CcbuiKa 3</a>
</body>
</html>

, hover, , visited active.


, ,
.
,
,
. ,
, , , DIV ( 3.12).
; 3.12.
<html>
<head>
<style type="text/css">
A { f o n t - s i z e : 14px; c o l o r : r e d }
DIV.menu { background: #87bcc9 }
.menu A { c o l o r : #005c6b }
.menu A:hover { c o l o r : #ffffOO }
</style>
</head>
<body>

101

<>< h r e f = l i n k l . h t m l > C c b u i K a
<div

K/a>

class=menu>

<>< h r e f = l i n k 2 . h t m l > C c b u i K a

2</a>

<>< h r e f = l i n k 3 . h t m l > C c b u i K a

3</a>

</body>
</html>

menu DIV, , , .


, ,
. :
;
;
.
.


, background, . hover,
( 3.13).
3.13.
<html>
<head> '
<style type="text/css">
A {
background: #fcO; /* */
padding: 2px
/* */
A:hover {
background: #f73;
color: yellow

/* */
/* */

102

</style>
</head>
<body>
<p><a href=linkl.html>CcbmKa K / a >
<p><a href=link2.html>CcbuiKa 2</a>
<p><a href=link3.html>CcfcuiKa 3</a>
</body>
</html>

,
padding, .


.
. ,
.
3.14 , ,
border. text-decoration
.
3.14.

<html>
<head>
<style type="text/css">
A{
border: lpx solid blue;
padding: 2px;
text-decoration: none
A:hover {
border: lpx solid red

/* */
/* */
/* */

/*
*/

</style>
</head>
<body>
<>< h r e f = l i n k l . 11> 1 < / >
< href=link2.html>CcbtnKa 2</a>
<>< h r e f = l i n k 3 . h t m l > C c b H i K a 3 < / a >
</body>
</html>

"" ,
padding.
, background.
,
, . .

hover. , 3.10, ,
.
, .
, . ,
, padding A:hover.
A:hover
padding .
3.15
.
3.15.
<html>
<head>
<style type="text/css">
/* */
{
border: lpx solid white;
padding: lpx;
text-decoration: none
}
A:hover {
border: lpx solid red

7* , */
/* */
/* */

/* */

/* */
{
text-decoration: none;
padding: 2px

/* */
/* */

}
A:hover {
border: lpx solid red;
padding: lpx

/* */
/* */

104

</style>
</head>
<body>
< p x a href=linkl.html>CcbuiKa K / a >
< p x a href=link2.html>CcbuiKa 2</a>
< p x a href=link3.html>CcbuiKa 3</a>
</body>
</html>

. 3.3 , .
'

. j >....;

'

:
(

'

,"')

'

llCc
( 2! 3

. 3.3.


, .
, , . ,
border-style: outset , ,
(. 3.4).

-'j

*j

. ^ j 4 $?:
%

^ . 1 " ?.&
j

. 3.4.

, ,
, border-style; -

105

inset,
( 3.16).
3.16.
<html>
<head>
<style type="text/css">
A {
border-style: outset;
background: #ccc;
padding: 2px
}
A:hover {
border-style: inset
}
</style>
</head>
<body>

/* */
/* */
/* */

/* */

< h r e f = l i n k l .html>CcbinKa

K/a>

<a h r e f = l i n k 2 . h t m l > C c b m K a

2</a>

<a h r e f = l i n k 3 . h t m l > C c b D i K a

3</a>

</body>
</html>


,
. , :
, , , ;
3 ,
"".
, 3 , padding padding-bottom.
, ,
. 3.5.
,
3.17.
background. , -

106

, ,
.
, em,
. , , background
repeat-x.

. 3.5.

3.17.
<html>
<head>
<style type="text/css">
A {
t e x t - d e c o r a t i o n : none;
p a d d i n g : 2px;
w h i t e - s p a c e : nowrap
A:hover {
background:
url(/images/line.gif)
0 l.lem
repeat-x

/* */
/* */
/* */

/ */
/ */
*/
;

</style>
</head>
<body>
<p><a h r e f = l i n k l , html>CcbuiKa K / a >
<p><a h r e f = l i n k 2 ,, html>CcbuiKa 2</a>
<p><a h r e f = l i n k 3 ,, html>CcbDiKa 3</a>
</body>
</html>

,
.
, white-space
nowrap, . , .

107

, , ,
.
url,
.
, a l.iem .
,
.
. 3.6.

-,5,1 -

] f i ! f ? J % ' &~

:.

1 2

. 3.6.

(text-decoration:
none), .
.

Opera 6 ,
background . Internet Explorer 5
, padding.
, , ..
.

,
, . , .


, .
,
. , ,

108

. .
,
- . , , , (. 3.7).

^
1

j ) jg] if) ./" *? Ijf


; g j

,
^.

. 3.7.

. , , , .
,
display: list-item.
, , , list-style-image, ( 3.18).
3.18.
<html>
<head>
<style type="text/css">
A.outer {
list-style-image: url(/images/check.gif);
display: list-item

/*
*/
/*
*/

</style>
</head>
<body>
<>< href=linkl.html class=outer>CcbinKa </>

70

<>< h r e f = l i n k 2 . htmlJ- </>


</body>
</html>

outer, . ,
Opera, ,
.
(

d i s p l a y : l i s t - i t e m . ,
. .


. , ,
. , , , , - . ,
-.
:
1. .
2. (, ).
3. .
4. .
5. .
1 3 .
, -
, ,
, . ,
.
, .
[] STYLE,
, , 3.19.

110

| 3.19. ,

<html>
<head>
<style type="text/css">
A[target=_blank] { font-weight: bold }
</style>
</head>
<body>
<p><a h r e f = l i n k l . h t m l target=_blank>CcbuiKa </>
<>< h r e f = l i n k 2 .html>CcbinKa . </>
</body>
</html>

, , target=_blank,
.
(

[ . . . ] Opera, Netscape, Mozilla,


Firefox Internet Explorer.


,
. -, FRAME.
- , ().
, .
,
.
target
. target , name FRAME.
, , ,
menu content, . 3.8.
3.20.

111

!* ,' ' S 61 ! >"

'W*
I

I MENU

CONTENT


mfo.btml

CONTENT :
. 3.8.

3.20.
<html>
<frameset cols="20%,*">
<frame src=menu.html name=MENU>
<frame src=main.html name=CONTENT>
</frameset>
</html>
,
. - , , 3.21.
3.21.
<html>
<body>
< href=info.html target=CONTENT>CcbuiKa info.html
CONTENT</a>
</body>
</html>

, target
, name,
. target=coNTENT
, , .

112


, . .
, -
. ,
JavaScript,
, .
,
JavaScript.

onclick, ,
frames, .
location ( 3.22).
i

""

""

" ----

- -

; 3.22.

|
!

<html>
<body>
< href=menu2.html
onClick="parent.frames.CONTENT.document.location='info.html'">
, </>
</body>
</html>

, target, a
menu2.html.
, CONTENT, info.html. target, , name. JavaScript .

, .
.


UL,
, OL, .
. UL OL
, .
UL, OL LI,
.
TYPE
. ,
, . . 4.1 , type.
, .
4.1.

HTML

<ul type=disc>

<ul s t y l e = " l i s t - s t y l e : disc">

114

4.1 ()

HTML

<ul t y p e = c i r c l e >

<ul s t y l e = " l i s t - s t y l e : c i r c l e " >

<ul type=square>
<ul s t y l e = " l i s t - s t y l e : square">

<ol type=A>
<ol s t y l e = " l i s t - s t y l e :
upper-alpha">

.
.
.

<ol type=a>
<ol s t y l e = " l i s t - s t y l e :
lower-alpha">

.
.
.

<ol type=I>
<ol s t y l e = " l i s t - s t y l e :
upper-roman">

I.
II.
III.

<ol type=i>
<ol s t y l e = " l i s t - s t y l e :
lower-roman">

i.
ii.
iii.

<ol type=l>
<ol style--" l i s t - s t y l e : decimal">

1.
2.
3.

type ,
.
START
start , , OL. ,
type, start , .
VALUE
start, value , , .
value , OL.

115

4.1.
4.1.

<html>
<body>

<ol start=2>
<></>
<11></>
<></>

<ul type=circle>
<1i ></1i >
<> </11>
<></>
</body>
</html>

OL UL.



. . , , , .
UL ( 4.2).

| 4.2.
<html>
<body>
<hr>
<></>
<> </>
<11> </>

116
<> </>
<hr>
</body>
</html>

UL :
, UL, , "" BR;
;
,
Netscape ;

.
. 4.1 , .
eJ'j'ijiipH/jjj'jaiijj/jijJi tu;ic!ji! - AH'crwu/i JjiianiWf L'.plus'

;' Hv ;

^|

;^j i^j

. 4.1.



, UL. LI, ( 4.3). , .


: 4.3.

117

<html>
<body>

<b>Co </b>
<hr>
<></>
<></>
<11></>
<hr>
</body>
</html>

CSS.
margin-top, UL. margin-bottom ,
margin-left ( 4.4).
4.4.
<html>
<head>
<style type="text/css">
UL {
margin-top: 0.5em;
margin-bottom: 0.5em;
margin-left: 40
}
</style>
</head>
<body>
<></>
<hr>
<></>
<></>
<></>
<hr>
</body>
</html>

/* */
/* */
/* */

118

, em , ().


, .
.
snbsp;, 4.5.

"'

"

"

- .

'

'

"

'"

| 4.5.
<html>
<body>
Ii>&nbsp; Snbsp;

</>

</body>
</html>

, . , ,
.
padding-left,
, 4.6.
4.6.
<html>
<head>
<style type="text/css">
LI {
padding-left: 20px
}
</style>
</head>
<body>
<></>
<hr>
<1></>

/* */

119

<></>
<></1_>
<hr>
</body>
</html>

, , .


: (
), .
type=... UL.
, . 4.1.
type UL 4.7.
i 4.7. type

<html>
<body>
<ul type=square>
<> </>
</body>
</html>

. UL l i s t - s t y l e
list-style-type ( 4.8).
, type.
4.8.
<html>
<head>
<style type="text/css">
LI {
list-style: square

/* */

120

</style>
</head>
<body>
<hr>
<li>IIIa6-Hnrypax</li>
<></>
<</>
<hr>
</body>
</html>

,
.
type UL ,
, .
,
. "" ,
.
list-style-type: none . 4.9
sraquo,-,
.
! 4.9. ,
<html>
<head>
<style type="text/css">
LI {
list-style-type: none;
text-indent: -lem
}
</style>
</head>
<body>
<hr>

/* */
/* */

<li>&raquo; &#8212; sspades;


<li>Sraquo; &#8212; 5clubs;</li>
<li>&raquo; &18212; &diams;</li>

121

<li>&raquo; &#8212; &hearts;</li>

<hr>
</body>
</html>
list-style-type none
, ,
. ,
text-indent .
.
sraquo;, , . ,
&#8212; , (. 4.2).
\\ismih
:

] - /

;': ^
Q

- 0

. 4.2.

before .
, . content,
. , ,
, . 4.10
(\)
(\2). color.

122
I 4.10. before
<html>
<head>
<style type="text/css">

LI {
list-style-type: none;
text-indent: -lem
}
LI:before {
color: red;
content: "\BB \20"

/* */
/* */

/* */
/*
*/

}
</style>
</head>
<body>
ul>
<> &#8212; &spades;</li>
<> &#8212; &clubs;</li>
<> &#8212; &diaras;</li>
<> &#8212; &hearts;</li>

</body>
</html>
Netscape 6,
Mozilla, Firefox, Opera Internet Explorer.


list-style-image.
,
4.11.
! 4.11.
<htral>
<head>
<style type="text/css">
UL {
list-style-image: url(images/check.gif)

123

</style>
</head>
<body>
<> .
<> ,
, , , .
< l i s t y l e = " l i s t - s t y l e - i m a g e : ">
, .

</body>
</html>
,
.
, .
. 4.3 .

;; <f $ j

J
vJ * i
"

| J

( .
VlIpH ,
, , , .
, ,
.
. 4.3.


-.
, .
- UL .
SPAN,
( 4.12).

124

4
".-.

;;'.'

"

*-

; 4.12.

...

<html>
<head>
<style type="text/css">
LI { list-style: square;
color: red
/* V
}
LI SPAN {
color: black
/* */
}
</style>
</head>
<body>
<> </>
<hr>
<ul>
<li><span>KpacHbM</spanx/li>
<1i><>3</spanx/1i>
<li><span>CMHMU</span></li>
<hr>
</body>
</html>

, ,
color, SPAN . LI SPAN SPAN, LI. . , .
.
, ,
, 4.11.
,
.


:
(. 4.4).

125

:;

,-

i$

??

:!

L o r e m i p s u m d o l o r sit a m e t

L o r e m i p s u m d o l o r sit

Tincidunt ut lacreet dolore

amet

m a g n a aliguam erat volutpat.

Tincidunt ut lacreet dolore


m a g n a aliguam erat volutpat.

. 4.4.

, CSS l i s t style-position. : outside inside


( 4.13).
4.13.
<html>
<head>
<style type="text/css">
UL { l i s t - s t y l e - p o s i t i o n :
</style>
</head>
<body>
<hr>

outside }

<11> ,
3BM.</li>
<>
.</>
<>
3BM.</li>
<hr>
</body>
</html>
outside Internet Explorer Opera
. UL margin-

126

left, ,
, . ,
, .
, -
, .


. OL,
. :
(1, 2, 3, ...);
(, , , ...);
(, , , ...);
(I, II, III, ...);
(i, ii, iii, ...).
, . , , , .


;
start OL value . . ,
, . start
value, , , value, 4.14.
! 4.14.
<html>
<body>
<hr>
<ol type=I start=4>
<> .</li>
<> ,
.</li>

127

<li value=7>Bo
.</li>
<hr>
</body>
</html>

IV, start=4, V, VII.


, ,
. - 1.1 2.1.3. . 4.15 .
I 4.15.

<html>
<body>
<hr>

<>
<>
<>
<>
<>
<>

<hr>
</body>
</html>
. 4.5. , ,
.

128

L i j'lSiJli/UyfJOiiii'b jjiijj ElWtli! jvii'JI'LJUL)!' i/li-ii'Ilb f.'E/Jjluj'



v

> ...;

:.

ijj'j i.;-^

''.'

__ j

1. 1
1. 1.1
2. 1.2
2. 2
1. 2.1
2. 2.2

. 4.5.


. , ( 4.16).
4.16.
<html>
<head>
<style type="text/css">
OL LI { font-weight: bold )
OL OL { list-style: lower-alpha
OL OL LI { font-weight: normal )
</style>
</head>
<body>
<hr>
<>
<>
<11>
<11>
ol>
<>

/* */
/* */
/* */

129

<>

<hr>
</body>
</html>

-
(. 4.6).

(
Q

-\i

"

i*3

'* ^

1. 1

. b
2. 2
a.
b. b

. 4.6.

OL , . , OL , ,
.

5 1001


,
.
, , -.


,
border . , . , ; ,
( 5.1). border-top, border-bottom, border-left, borderright, , , .
[ 5.1. border
<html>
<body>
<div s t y l e = " b o r d e r : 2px s o l i d b l a c k ; background: # f c 3 ; p a d d i n g :

10px">

</body>
</htmi>
2 .

132

, , .
,
. 5.1.
Idotted|dashedj|soHdj [double] |groove|| ridge | | inset [| outset j
. 5.1.

Internet Explorer 4 5 border SPAN.

border DIV,

. , . ,
,
class id . , DIV SPAN, , .



. ,
, , .
: HR,
, .

HR
HR ,
, . HR
, ,
.
HR , ,
. , . 5.2
.

133

5.2. HR
<html>
<body>
<hr noshade color=red size=4 width=75% align=right>
<hr noshade color=red size=2 width=60% align=right>
<hr noshade color=red size=l width=50% align=right>
</body>
</html>

size , a width
. HR , , align left right,
.
, . ,
HR noshade.
color ,
noshade. , color
Internet Explorer, .
. ,
, . CSS, , HR:
width ,
;
height , ;
text-align ;
color Internet Explorer;
background-color
Mozilla, Firefox.

Opera, Netscape,

, .
Opera . , border: Opx solid fffoooo,
. ,
. , -

134

.
5.3.
5.3.
<html>
<head>
<style type="text/css">
BODY {
text-align: center /* - */
}
HR {
border: Opx solid red; /* Opera */
background-color: red; /* Opera Netscape */
color: red;
/* IE */
height: ;
/* */
width: 30Opx;
/* */
text-align: center
/* */
}
</style>
</head>
<body>

<hr>

</body>
</html>
,
: color background-color.
Internet Explorer, Netscape Opera. ,
Opera , border.
, , .



, . . 5.2 , 100 %
.
,
. , , -

135

: , .
, ,
5.4.

j j - |*|

|] "fj ! >-'

> t^f 4& ' 0 * '- *

^ ;

H j

. 5.2.

! 5.4.

<html>
<body>

, 100% .<br>
<img src=line.gif width=100% height=10><br>
, 400 .<br>
<img src=line.gif width=400 height=10>
</body>
</html>
, .


, , ?
. ,
. , ,
. ,
, Netscape 4.x
. GIF- 1 * 1 . 5.5 spacer.gif. , Netscape
( ).

136

\ 5.5.

<html>
<body>
<table border=0 background=dot.gif width=100% height=2 cellspacing=O
cellpadding=O>
<tr>
< t d x i m g s r c = s p a c e r . g i f width=l h e i g h t = 2 x / t d >
</tr>
</table>
</body>
</html>

background
, .


. ,
, . ,
, ,
DIV, , 5.6.
5.6. ,
<html>
<head>
<style type="text/css">
#line {
width: 100%;
background-image: url(dot.gif);
background-repeat: repeat-x;
margin-top: ;
margin-bottom: ;
}
</style>
</head>
<body>
<div id=line>&nbsp;</div>
</body>
</html>

/*
/*
/*
/*
/*

*/
*/
*/
*/
*/

137

, . , CSS. , backgroundrepeat, ' , background, , , a margin


, .
background: url(dot.gif) repeat-x
margin: Opx lOpx 2px
DIV
snbsp; . , , Internet
Explorer, "" .
, ,
border-top,
, border-bottom, . , ,
, ( 5.7).
5.7.

<html>
<body>
< s t y l e = " b o r d e r - b o t t o m : Ipx s o l i d #800000; p a d d i n g - b o t t o m : 7px">
", - ?".<br>
" ?!" - . - "
!"<br>
,
, - .
</body>
</html>

,
, . 5.1,
, -.

( T A B L E ) , ( ),
( D I V ) , ( HR), ( H I
)
.

. 5.3.

138

-'. - | J

i$

JjjP
1

-' Jr tig ; J T ^

; !

^ j ^ j

'

", - ?".
" ?!" - .- "
!"
,
, - .

. 5.3.

, , 5.6. <div id=line>&nbsp;</div>,


line ( 5.8).
5.8. ,
<html>
<head>
<style type="text/css">
#iine {
width: 400px;
border-top: lpx solid red;
position: relative;
left: 50%;
margin-left: -200px

/* */
/* */

</style>
</head>
<body>
<div id=line align=center>&nbsp;</div>
</body>
</html>
line . 8,
.

139



,
. , . 5.4
.

. 5.4.

,
.
, , . (. 5.5).
, .
, , , ,
. ,
.

. 5.5. , . 5.4

line,
background, DIV.
IMG;
, SPAN
float. left
, . 5.4, a right .
,
. ,
padding-top; ,
. ,
. margin-top SPAN ( 5.9).
\ 5.9.
<html>
<head>

.,

140

<style type="text/css">
.line {
background:
url(line.gif)
repeat-x;
text-align: center;
padding-top:

/*
/*
/*
/*

*/
*/
*/
*/

}
</style>
</head>
<body>
<div c l a s s = l i n e x s p a n s t y l e = " f l o a t : l e f t ; m a r g i n - t o p : -; w i d t h :
5 2 p x " x i m g s r c = s c i s s o r s . g i f width=52 h e i g h t = 2 2 x / s p a n > J b u o i OTpe3a</div>
</body>
</html>

Opera . , SPAN,
, width,
. ,
SPAN text-align left.
border. DIV
border-top, , . SPAN,
DIV,
position: relative , top . ,
SPAN ( 5.10).
5.10.
<html>
<head>
<style type="text/css">
line {
text-align: center;
font-family: Arial, sans-serif;
font-size: 12px;
border-top: lpx dashed black
}
</style>
</head>

/*
/*
/*
/*

*/
*/
*/
*/

141

<body>
<brxbr>
< d i v c l a s s = l i n e > < s p a n s t y l e = " p o s i t i o n : r e l a t i v e ; t o p : -12px; f l o a t : l e f t ;
t e x t - a l i g n : l e f f ' x i m g s r c = s c i s s o r s . g i f width=52 height=22x/span>JlMHMH
0Tpe3a</div>
</body>
</html>

border
. 5.6.
4

^" *


. 5.6. , b o r d e r

, , , .
,

.
border
, , . , ,
. 5.7.


. 5.7.

, , , . 5.7, .
, , border-bottom bottom-top.
background.
,
. , ( 5.11).
.

142

\ 5.11.
<html>
<head>
<style type="text/css">
.linel, .Iine2 {
text-align: center;
/*
font-family: sans-serif; /*
font-size: 12px;
/*
height: 13px
/*
}
.linel {
background:
url(scissors.gif)
/*
no-repeat
/*
Opx -llpx;
/*
border-top: lpx dashed black

*/
*/
*/
*/

*/
*/
*/
/* */

.Iine2 {
background: url(scissors.gif)
no-repeat
Opx ;
/* */
border-bottom: lpx dashed black /* */
</style>
</head>
<body>
<> .</>
<div class=linel>JlMHHH oTpe3a</div>
<> .</>
<div class=line2>JlHHHH oTpe3a</div>
</body>
</html>
,
. .
, , .

143



, .
,
.
. .


, , .
, 12 . ceiipadding border , a cellspacing .
: <td width=i bgcoior=#ff0000>, width , a bgcolor ( 5.12).
i 5.12. ,

<html>
<body>
<table width=600 cellpadding=O cellspacing=12 border=0 align=center>
<tr>
<td width=l bgcolor=#ff0000ximg src=spacer .gif width=4 h e i g h t = l x / t d >
<td>Korfla
,
,
,
,
.</td>
</tr>
</table>
</body>
</htrnl>
,
- . &nbsp;
, ,
. 1 * 1 ,
spacer.gif. , , .

144

background
, .
, , ,
5.13.
5.13.
<html>
<body>
<table width=500 cellpadding=O cellspacing=12 border=0 align=center>
<tr>
<td width=15 background=vline.gifximg src=spacer.gif width=15
height=lx/td>
<td>Ka;*fflbM
: ,

,

.</td>
<td width=15 background= v l i n e . g i f x i m g s r c = s p a c e r . g i f width=15
height=lx/td>
</tr>
</table>
</body>
</html>

. 5.8.
!

-iJ '' - ->

'

-J

- tiktu-Mii lijtsniat

i*j 'ii-

L'iibrzr

^
i ? *

; t3

:
,

,

.

. 5.8.

145

. ,
, ,
, .
, , , . , .
, "" , ,
.
,
2040 (. 5.9).
-.

. 5.9.


, 5.8. border-left border-right;
( 5.14).
| 5.14.
<html>
<head>
<style type="text/css">
#vline {
border-left: lpx solid red;
margin-left: ;
padding-left: 7px
}
</style>
</head>

/* */
/* */

146

<body>
<div id=vline>
, ,
, , ,
.

</body>

</html>
. .
padding margin , .
,
. background,
,
( 5.15).
| 5.15. ,

<html>
<head>
<style type="text/css">
ffvline {
background: url(check.gif) repeat-y;
/* */
margin-left: 40px;
/* */
padding-left: 20;
/* */
}
</style>
</head>
<body>
<div id=vline>
, , ,
, .

</body>
</html>
background ,
url , a repeat-y ,
. , , . -

147

"",
.
,
. ,
background. ,
,
5.16.
5.16.
<html>
<head>
<style type="text/css">
#vline {
background: url(check.gif) repeat-y right;
padding-right: 20px;

/* */
/* */

}
</style>
</head>
<body>
<div id=vline>

</body>
</html>
background right,
.
padding-right.
.
, ,
.


, ,
- . ,
.
,
.

148

. , .

border
border, , border-color,
. , ,
(. 5.10).

. 5.10. , b o r d e r :
Internet Explorer; Netscape; Opera

Netscape (. 5.10, ), Opera (. 5.10, <?), a Internet Explorer


(. 5.10, ). Mozilla Firefox
Netscape.
5.17
.
5.17. border
<html>
<body>
<table border=2 bordercolor=#ff0000 width=100 height=100 cellpadding=(
cellspacing=0 bgcolor=#e0e0e0>
<tr>
<td>CoflepjKMMoe</td>
</tr>
</table>
</body>
</html>

border , bordercoior ,
ceiipadding .

149


cellspacing bgcolor
,
, bgcolor cellspacing. bgcolor "" ,
. , . ,
, -
. cellspacing, ( 5.18).
5.18. bgcolor
<html>
<body>
< t a b l e c e l l p a d d i n g = 6 c e l l s p a c i n g = l border=0 width=100 height=100
bgcolor=#000000>
<tr>
<td b g c o l o r = # f f f f f f >
<table>
<tr>
<td>Coflepaa-iMoe</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>

, cellspacing,
celipadding.


,
,
. , ,
, .

150

5.19).

"'

TABLE,

"' "" '


."'
.
.

"*""

bgcolor (-

"

....j

i 5.19.

<html>
<body bgcolor=#ffffff>
<tabie width=300 height=300 border=0 cellspacing=O cellpadding=l
bgcolor=#ff0000>
<tr>
<tdxtable border=0 cellspacing=O cellpadding=10 bgcolor=#ffffff
width=300 height=300>
<td align=center>CoflepMMoe</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>

,
bgcolor , cellspacing
, cellpadding .
, .
, - (
). cellspacing cellpadding (
, ) .

.

. , , .


. , -

151

(. 5.11),
(. 5.12).

. 5.11.

. 5.12.

. 1 * 1 , , , ( 5.20).
1 5.20.
<html>
<body>
<table width=200 border=0 height=200 cellspacing=0 cellpadding=O>
<tr bgcolor=#ff6633>
<td width=2 height=2ximg src=spacer.gif width=2 height=2></td>
<td height=2><img src=spacer.gif width=2 height=2></td>
<td width=2 height=2><img src=spacer.gif width=2 height=2x/td>
</tr>
<tr>
<td width=2 bgcolor=#ff6633><img src=spacer.gif width=2 height=2x/td>
<td align=center style="padding: 7px">CoflepaMMoe</td>
<td width=2 bgcolor=#ff"6633ximg src=spacer .gif width=2 height=2x/td>
</tr>
<tr bgcolor=#ff6633>
<td width=2 height=2ximg src=spacer.gif width=2 height=2x/td>
<td height=2ximg src=spacer.gif width=2 height=2x/td>
<td width=2 height=2ximg src=spacer.gif width=2 height=2x/td>
</tr>
</table>
</body>
</html>

152

8 2 ,
. cellspacing
ceiipadding , . ,
, .
, , , .
,
:
,
;
, , "" ;
;
, , (snbsp;),
-;
,
<td> </td>
, .


- . . 5.13, , .
9 , . 5.14 . ImageReady, Photoshop . .

. 5.13.

. 5.14.

153

8 ,
. 5.1.
5.1. , ,

i.gif

2.gif

3.gif

4.gif

6.gif

7.gif

8.gif

9.gif

(5.gif),
. 3><3 ,
. 5.11, ( 5.21).
5.21.
<html>
<body>
<table width=400 border=0 cellspacing=O cellpadding=O>
<tr>
<td h e i g h t = 1 3 x i m g s r c = l . g i f width=12 h e i g h t = 1 3 x / t d >
<td b a c k g r o u n d = 2 . g i f h e i g h t = 1 3 x i m g s r c = i x l . g i f height=13></td>
<td h e i g h t = 1 3 x i m g s r c = 3 . g i f width=14 height=13></td>
</tr>
<tr>
<td background=4.gif width=12>snbsp;</td>
<td align=center>Coepoe</td>
<td background=6.gif width=12>snbsp;</td>
</tr>
<tr>
<td h e i g h t = 1 3 x i m g s r c = 7 . g i f width=12 h e i g h t = 1 3 x / t d >
<td background=8. g i f x i m g s r c = l x l . g i f h e i g h t = 1 3 w i d t h = l x / t d >
<td h e i g h t = 1 3 x i m g s r c = 9 . g i f width=14 h e i g h t = 1 3 X / t d >

154

</tr>
</table>
</body>
</html>
border, cellspacing ceiipadding
, .
IMG,
background. , .
, .
.


, ( ), ( TABLE) ( DIV). , ,
, . 5.1.
, . , 5.22 .
5.22.
<html>
<head>
<style type="text/css">
P (
border: double 4px black;
/* */
background: #fcO;
/* */
padding: 5
/* */
}
</style>
</head>
<body>
<> ,
,
30-40 . </>
</body>
</html>

155

, . ,
padding.
, (. 5.15).
Lorem ipsum dolor sit amet.
. 5.15.

,
, ;
, .
. 5.16,
.

. 5.16.

,
-, . border, 5.23.
5.23.
<html>
<head>
<style type="text/css">
.borderLayer {
border: 3px dotted white;
background: maroon;
padding: 7px;
color: white
</style>
</head>

/*
/*
/*
/*

*/
*/
*/
*/

156
<body b g c o l o r = w h i t e >
<div c l a s s = b o r d e r L a y e r >
Lorem ipsum d o l o r s i t amet.
</body>
</html>

dotted border,
background. 24 , . ,
.
,
, .
,
.
, , , . 5.17.

. 5.17.

, . 5.17, DIV
( 5.24). , borderLayer,
, . , bgLayer,
, .
.
5.24.
<html>
<head>
<style type="text/css">
.borderLayer {
border: 3px dashed maroon
.bgLayer {
background: maroon;
padding: 7px;
color: white

/* */

/* */
/* */
/* */

157

</style>
</head>
<body>
<div class=borderLayer>
<div class=bgLayer>
Lorem ipsum dolor sit amet...
</body>
</html>
dashed border, 3 maroon,
-.
, ,
.
(
border),
, (. 5.18).
LUjjrjLtfujj

.^

- jjSicjTj^jr luianiif! r / ( j b / s f

>j

; ; I

,^'j

_,.

'

$*)

g j

- , -,
.

. 5.18.


DIV,
, . , DIV
background, 5.25.
! 5.25. Div
<html>
<head>
<style type="text/css">

158
.border1 {
border: solid lpx #634f36;
background: #dad4c4;
padding: 5px

*/
*/
*/

}
.border2 {
border: lpx solid black;
background: white;
padding: 5px

/* */
/* */
/* */

}
</style>
</head>
<body>
<div class=borderl>
<div class=border2>
- , -,
.

</body>
</html>
: , borderi,
, , padding; , border2, , .


-, IFRAME,
.
.
:
, ,
, , ;
HTML-, , , , ;

159

D - , ,
;

- ,
, .
, ,
, . ,
Internet Explorer, IFRAME Opera 6,
Netscape 7, Mozilla, Firefox .
,
, .
.
.
, frameborder IFRAME.
.
, , , 5.26.
] 5.26.
<html>
<body>
<iframe src=sample.html width=600 height=100 align=center
style="border: 2px solid black">
</iframe>
</body>
</html>

frameborder=0

border. frameborder ,
,
. . 5.19 , . 5.20 , 5.26.

fe*
IFRAME ,
( ,
i . .
. 5.19. ,

160

IFRAME ,
,
.
. 5.20. ,

: -,
, . .



, -.

2, .

border


(. 5.21).
tti 7;); - ''icrusLif! \. iHi L'.jjluj'ar

$ ''--'-. : ^

[yj tZ]

'""':': "

'

' i ' -!

V ^

' '

../,:

l/
4 i :/^r

!;

& *

@|

- .
.

. 5.21. , b o r d e r

,
, .
.
, border .

, . ,

161

shadowLayer, 3
( 5.27). .
, borderLayer, ,
, .
5.27.
<html>
<head>
<style type="text/css">
.shadowLayer {
border-right: 3px solid #ccc;
border-bottom: 3px solid #ccc
.borderLayer {
border: lpx solid black;
background: #fcO;
padding: 5px

/* */
/* */

/* */
/* */
/* */

</style>
</head>
<body>
<div class=shadowLayer>
<div class=borderLayer>
- .
.

</body>
</html>

, DIV,

.


, , . 5.22. ,
, -
-.
(>3. 01

162

5
j Siili'JVJ J =!iJi-tjLf - j'jjiDt'D^UH iliVzUi'-M I/.fjlfJJ'UJ'

@ l*t| ^

:^:

'

| g j :

,
.
.
- .
, . ;
,
.
, .

. 5.22.

. (. 5.23), , , (. 5.24).

. 5.23.

. 5.24.

: bgLayer , , , a shadowLayer . , float left.


( 5.28). -

163

BR clear: both,
"" . .
| 5.28.
<html>.
<head>
<style type="text/css">
.bgLayer {
border: lpx solid black;
background:
url(/images/bgl.gif)
right
no-repeat;
width: 450px;
padding: 5px;
float: left
.shadowLayer {
background:
url(/images/bg2.gif)
no-repeat;
width: 16px;
height: 112px;
float: left

/* */
*/
*/
:
*/
*/
' */
' */

/* */
/* */
/* */
/* */
/* */

</style>
</head>
<body>
<div class=bgLayer>
,
.
.
<div class=shadowLayer>&nbsp;
<br style="clear: both">
</body>
</html>
background,

IMG.

164

,
.
background.
,
, .
, , .


, -.
, , ,
. , ,
. , border, cellpadding cellspacing TABLE
. ,
, 5.29.
5.29.
<html>
<head>
<style type="text/css">
TD.bg {
border: lpx solid black;
background: url(/images/bg.gif) right no-repeat;
padding: 5px
}
</style>
</head>
<body>
<table width=100% cellpadding=O cellspacing=O border=0>
<tr>
<td class=bg>
- .
, .
, .
</td>
<td width=16 valign=top><img s r c = / i m a g e s / s h a d o w . g i f width=16
height=112x/td>
</tr>

165

</table>
</body>
</html>

, , . 5.22.
, .
,
, .
,
, vaiign=top.


. ,
, . ,
,
5060 .


, .
, .
, .


.
, , .
CSS, ,
Windows (. 5.25).
5.30 .

. : panel
; t i t l e , a TD
.

166

3 - - ^

" @ ^

^
; j P

"


,
,
- ,
-
(, , ,
.).
.

. 5.25. ,

\ 5.30.
<html>
<head>
<style type="text/css">
TABLE.panel {
width: 400px;
border: 2px solid navy
}
TD.title {,
background: navy;
color: white;
font-family: Arial, sans-serif;
font-weight: bold
TABLE.panel TD {
padding: 4px

/* */
/* */

/*
/*
/*
/*

*/
*/
*/
*/

/* */

</style>
</head>
<body>
<table cellspacing=2 class=panel>
<tr>
<td class=title>3aronoBOK naHenn</td>
</tr>

167

<tr>
<td>Coflep;raMoe

<^!>

</tr>
</table>
</body>
</html>

,
. navy.
cellspacing TABLE ,
. . 5.26 ,
cellspacing.

. 5.26. c e l l s p a c i n g

, . . ,
, TABLE
DIV ( 5.31).
\ 5.31.
i

....;.....

....... ..;.............;.. ..-. :.;;;... ....'. ........:.

<html>
<head>
<style type="text/css">
.panel {
width: 400px; border: 2px solid navy
}
.title (
background: navy; color: white;
font-family: Arial, sans-serif; font-weight: bold
}
.title, .content { padding: 4px }
</style>
</head>
<body>
<div class=panel>

:..

:
,..

_....:'.........

168

<div class=title>

<div class=content>

</body>
</html>

, , HTML, , ,
. . :
HTML,
, . , ,
. , , .


, , - . , ,
. 5.27.
TeniHIML

. 5.27.

169

CSS, , overflow. ,
. overflow :
visible ,
; ;
hidden ,
;
scroll ;
auto ,
.
, overflow: auto , , .
, , , .
, ,
. , . ( 5.32).
I 5.32.
<html>
<head>
<style type="text/css">
.panel {
width: 200px;
background: #d8ecd4;
border: lpx solid #54 6852
}
.title {
background: #7a9879;
padding: 4px;
color: #ffffee;
font-family: Arial, sans-serif;
font-weight: bold
}
.content {
padding: 4px;
overflow: auto;
height: 200px

/* */
/* */
/* */

/*
/*
/*
/*
/*

*/
*/
*/
*/
*/

/* */
/* */
/* */

170

</style>
</head>
<body>
<div class=panel>
<div class=title>

<div class=content>

</body>
</html>
overflow content, , , ,
. , t i t l e ,
.



, . ,
,
,
.
, . 5.28.
.
, . , .
,
. 5.29.
. 5.29, .
, , .
. ,
. ,
. , ,

171

,
10001500 . , , , , , . ,
,
"" .

<^Has-M

Q ' g |

s-Jnp

; \

:,
.
., , ,
.
. , -.

. 5.28. ,

. 5.29. :
;

. 5.29, .
,
.

. panel
background , . 5.29, , .

172

HI ,
. 5.29, , . , ( 5.33).
5.33.
<html>
<head>
<style type="text/css">
.panel {
background:
url(top-left.gif)
left top
no-repeat;
width: 320px
i
Hl.panelTitle (
background:
url(top-right.gif)
right top
no-repeat;

*/
*/
*/
*/

*/

*/
font-family: Arial, sans-serif;
/* */
font-size: 120%;
/* */
color: #ffffee;
/* */
text-align: center;
/* */
margin: Opx;
/* HI */
padding: 4px 7px
/* */

.panelBody {
padding: 7px;
border: Ipx solid black;
border-top: none;
background: #ccc

/*
/*
/*
/*

*/
*/
*/
*/

</style>
</head>
<body>
<div class=panel>
<hl class=panelTitle>3aronoBOK</hl>
<div class=panelBody>

173

</body>
</html>
.
. width.
HI
. ,
margin.
HI DIV.
, margin .
, - , HI.

border-top.
.
,
padding.
, .

. ,
, , .
.
, .
,
, , . 5.30.
. ,
(. 5.31, ) (. 5.31, ).
, , border. ,
.
IMG, paneiTitie.
,
GIF- .
, . - ,
paneiBody, ,

174

.
paneiTitie. , ( 5.34).
, ,
.

() '

[gj f ^ i p ? i f ; & * [wj

.;

H f |

.
,
.
- -, -. ,
*
, .

. 5.30.

. 5.31. , :
; ;

I 5.34.
<html>
<head>
<style type="text/css">
.panel {
width: 320

/* */

.paneiTitie {
background:
url(top-bg.gif)
/* */
repeat-x;
/* */
border-right: 2px solid black
/* */

175

.panelBody {
padding: 7px;
border: 2px solid black;
border-top: none;
background:
url(bottom-bg.gif)
right bottom
no-repeat;
background-color: #66

/* */
/* */
/* */
/* */
/* */
/* */
/* */

</style>
</head>
<body>
<div class=panel>
<div class=panelTitleximg src=title.gif width=143 height=31x/div>
<div class=panelBody>

</body>
</html>
(. 5.31, )
.
panelBody, . ,
background panelBody.

, ,
-.
, . ,
HTML , , ,
. , . ,
, , .


,
. , . ,
.
- TABLE. , . , TR TD .
( 6.1). .

. , TD , .

178

| 6.1.

<html>
<body>
<table border=l width=100% cellpadding=5>
<tr>
2</td>
</tr>
<tr>
3</td>
4</td>
</tr>
</table>
</body>
</html>
. 6.1.
i4ij.il''.'.

) ' 1 3 lH

& :

';> Hf

1
; 3

~ '
!

1 4

!
1
I
[

. 6.1.

, , , TABLE, TR TD. TABLE.


align. .
: left , center
right .
background. , .
, -

179

100 %.
, , .
, . ,
.

GIF, . ,
.
bgcolor. .
background, , . .
border. .
, bordercoior TABLE, (.
. 5.10). Internet Explorer , Netscape
, Opera
. TABLE border
(<tabie border>),
. border,
bordercoior cellspacing .
bordercoior. .
, bordercoior border TABLE
.
ceiipadding. . , . ceiipadding
"" , .
ceiipadding .
, ,
.
cellspacing. .
border,
.
cols. cols ,
.
,
. cols
.

180

height. . HTML 4
, ,
TABLE. , height , .
rules. , .
,
. ( cols), (rows) (groups), THEAD, TFOOT, TBODY, COLGROUP COL. border
bordercolor.
width. . , "" . , , , width ,
. ,
, .
, , , , TABLE.
align. . : l e f t , center
right .
background. , .
TABLE, TO
, . , ,
cellspacing, ,
GIF .
bgcolor. . bgcolor TABLE,
.
bordercolor. . , border TABLE.
coispan. ,
. ,
. , , . 6.2.

181

,
coispan.
1
2

. 6.2. ,

height.
. height
. .
height , , . , ,
, .
nowrap. nowrap TD
, . , -.
, .
, , nowrap HTML 4.
rowspan. ,
. , . , , . 6.3.
,
rowspan.

2
3

. 6.3. ,

vaiign. .
.
: top ,
middle , bottom
, baseline ,
.
width. .
, .

182


, . , - ,
, . , .
, ,
, .
.
,
, , ,
.

. , , ,
cellpadding, , cellspacing.
, . ,
,
, . , ,
, , . .
border TABLE .
bordercoior ,
.
, . , ,
, ,
. , .
, , , .



, .
HTML CAPTION,

183

.
; CAPTION, .
, ,
. align,
:
left . Internet Explorer Opera 7, Netscape
;
right Internet Explorer Opera 7
.
Netscape , a Opera 6 ;
center .
;
top center,
HTML 4 ;
bottom .
align,
, , .
, text-align. . 6.2 ,

. , CAPTION
TABLE, .
I 6.2. C A P T I O N
<html>
<head>
<style type="text/css">
CAPTION {
text-align: right;
font-style: italic
</style>
</head>
<body>

/
/

*/
*/

184
< t a b l e width=70% b o r d e r = l c e l l p a d d i n g = 4 c e l l s p a c i n g = O align=centeir>
<1:1> roflaM</caption>
<tr>
<th>&nbsp;</th>
<th>2003</th><th>2004</th><th>2005</th>
</tr>
<tr>
<td>He</td>
<td>43</tdxtd>5K/tdxtd>79</td>
</tr>
<tr>
<td>3ooo</td>
<td>29</tdxtd>34</tdxtd>48</td>
</tr>
<tr>
<td>flepeBO</td>
<td>38</tdxtd>57</tdxtd>36</td>
</tr>
</table>
</body>
</html>

. 6.4 . , , ,
, ceiipadding. ,
, ceiipadding cellspacing.

i ;

v-

"- * 4&

0~

j2J


2003

2004

2005

43

51

i79

29

|34

48

38

[57

;36

. 6.4.

185

CAPTION , , ,
, . , 6.3.
! 6.3.
<html>
<head>
<style type="text/css">
.caption {
margin: Opx 15%;
padding-bottom: 4px;
text-align: right;
font-style: italic

/*
/*
/*
/*

*/
*/
*/
*/

}
</style>
</head>
<body>
< align=center class=caption>I43MeHeHne </>
<table width=70% border=l cellpadding=4 cellspacing=O align=center>
</table>
</body>
</html>

caption, ( ).
-, .
margin. ,
(100 %) ( 15 %).
, , . 8 CAPTION.

padding-bottom.


-
align TABLE.
, -

186

, , 100 %. align ,
IMG. TABLE
hspace, ,
, margin. 6.4
.
6.4.
<html>
<body>
<table width=200 bgcolor=#c0c0c0 cellspacing=O cellpadding=5 border=l
bordercolor=black align=right style="margin: 10px">
<tr><td>Coepoe TaUrombK/td></tr>
</table>
. . .
</body>
</html>


.
margin 10 .

, BR
clear: both. ,
( 6.5).
i 6.5.

<html>
<body>
< t a b l e width=200 bgcolor=#c0c0c0 a l i g n = r i g h t >
<tr><td>Coflep>raMoe Ta6jram>i</td></tr>
</ tab le>
<br s t y l e = " c l e a r : b o t h " >
<>...</p>
</body>
</html>

,
aiign=center TABLE, , .

17_

,
.
margin, 6.6.
I 6.6. margin
<html>
<head>
<style type="text/css">
TABLE {

margin: auto
}
</style>
</head>
<body>

/* */

<table width=200 bgcolor=#cOcOcO border=l bordercolor=black>


<trxtd>. . .</tdx/tr>

</table>
</body>
</html>
, Internet Explorer, textalign, BODY ( 6.7).
6.7. t e x t - a l i g n
<html>
<head>
<style type="text/css">
BODY {
t e x t - a l i g n : c e n t e r /* I n t e r n e t E x p l o r e r */
}
TABLE {
margin: a u t o
/* Opera N e t s c a p e */
}
{

text-align:
}
</style>
</head>

left

/* */

188

<body>
< t a b l e width=200 bgcolor=#cOc.OcO b o r d e r = l b o r d e r c o l o r = b l a c k >
<trxtd>. . .</tdx/tr>
</table>
<></>
</body>
</html>

text-align: center BODY -, ,


. margin textalign ,
.


, . border TABLE, , bordercoior, .
5 (. . 5.10), ,
, .
,
border, ( ).
.
,
.
. border-collapse
collapse. . TABLE, ( 6.8).
; 6.8. b o r d e r - c o l l a p s e
|
<htmi>
<head>
<style type="text/css">
TABLE {
border-collapse: collapse

/*
*/

189

TD {
b o r d e r : 2px s o l i d g r e e n ;
text-align: center

/* */
/* */

</style>
</head>
<body>
<table width=200 cellspacing=O cellpadding=2>
<tr><td>O</td><td>X</td><td>X</tdx/tr>
<tr><td>O</td><td>O</td><td>X</tdx/tr>
<tr><td>X</tdxtd>X</tdxtd>O</td></tr>
</table>
</body>
</html>
bordercoiiapse, , . 6.5.

0
0
X

X
0
X

X
X
0

0
0
X

X
0
X

X
X
0

. 6.5. b o r d e r - c o l l a p a s e :
;

. 6.5, , . , .
border-collapse ,
(. 6.5, ).

. TD ,
, .
, . . border-right border-bottom TABLE,
( 6.9). ,
, .
i 6.9. border
<html>
<head>

...s

190
<style type="text/css">
TABLE {
border-right: 2px solid green;
border-bottom: 2px solid green;
TD (
border: 2px solid green;
border-right: none;
border-bottom: none;
text-align: center

/*
/*
/*
/*

/* */
/* */

*/
*/
*/
*/

</style>
</head>
<body>
<table width=200 cellspacing=O cellpadding=2>
<trxtd>O</td><td>X</tdxtd>X</td></tr>
<tr><td>O</tdxtd>O</td><td>X</td></tr>
<tr><td>X</tdxtd>X</td><td>O</tdx/tr>
</table>
</body>
</html>

, , TD
, TABLE, ,
border, .
.
,
. , TD TABLE. (. 6.6).

. 6.6.

6.10.
i 6.10.
<html>
<head>

191

<style type="text/css">
BODY {
background: white
/* - *./
}
TABLE (
border-collapse: collapse /*
*/
}
TD {
border: 2px solid white; /* */
background: #ccc;
/* */
text-align: center
/* */
}
</style>
</head>
<body>
<table width=200 cellspacing=O cellpadding=2>
<trxtd>O</td><td>X</tdxtd>X</td></tr>
<tr><td>O</tdxtd>O</td><td>X</tdx/tr>
<trxtd>X</td><td>X</tdxtd>O</tdx/tr>
</table>
</body>
</html>
- background, BODY. ,
,
. ,
.
background,
TD.


- ,
. ,
,
(. 6.7).
, , DIV. DIV, container,

192

, ,
. DIV, scroll
, . ,
TABLE DIV , . . 6.8.

2003
43
29
38

2004
51
34
57

2005
79
48
36

. 6.7.

<div style="width: 400; border: 1px solid black">


<tabiewidth=1OO%>
<tr><th>...</th></tr>
</table>

div style="heigh1 100px overflow: scroii">


_^__
__;.
.
<tablewidth=100%>
<>

. 6.8.

6.11.
! 6.11.
<html>
<head>
<style type="text/css">
TH {
background: #666;
color: white;
text-align: left

/* */
. /* */
/* */

193

DIV.container {
border: lpx solid black;
width: 400px

/* */
/* */

}
DIV.scroll (
height: ;
/* */
overflow: scroll
/* */
}
</style>
</head>
<body>
<div class=container>
<table width=100% border=0 cellspacing=O cellpadding=4>
<tr>
<th width=100>&nbsp;</th>
<th width=100>2003</th>
<th width=100>2004</th>
<th width=100>2005</th>
</tr>
</table>
<div class=scroll>
<table width=100% border=0 cellspacing=O cellpadding=4>
<tr>
<td width=100>He<J>Tb</td>
<td width=100>43</td>
<td width=100>5K/td>
<td width=100>79</td>
</tr>
<tr>
<td>3ooo</td><td>29</td><td>34</td><td>48</td>
</tr>
<tr>
<td>flepeBO</tdxtd>38</tdxtd>57</tdxtd>36</td>
</tr>
</table>

</body>
</html>

,
width.
7 3. 100I

194


, ,
-.
, , , , . , . ,
, ,
. ,
.
width TD
. ,
.
.
COL, .
, . COL COLGROUP,
, .
cols TABLE

. ,
. COL
COLGROUP.

table-layout, fixed .
COL, .
- ,
.
6.12 ,
COL COLGROUP.
table-layout: fixed,
, .
.
, bgcolor COL
Internet Explorer, .
I 6.12.
<html>
<body>

195

<table width=550 cellpadding=2 cellspacing=O border=l bordercolor=black


rules=groups style="table-layout: fixed">
<colgroup width=100>
<colgroup span=9 align=center width=50>
<col span=5 bgcolor=#cOcOcO>
<col span=4 bgcolor=#ffffdd>
</colgroup>
<tr>
<td>&nbsp;</td><td>1995</td><td>1996</tdxtd>1997</td>
<td>1998</td><td>1999</tdxtd>2000</tdxtd>2001</td>
<td>2002</tdxtd>2003</td>
</tr>
<tr>
<td>He</td><td>5</td><td>7</td><td>2</td><td>8</td>
<td>3</tdxtd>34</tdxtd>62</tdxtd>74</tdxtd>57</td>
</tr>
<tr>
<td>3onoTO</tdxtd>3</td> <td>6</tdxtd>4</tdxtd>6</td>
<td>4</td><td>69</td><td>72</td><td>56</tdxtd>47</td>
</tr>
<tr>
,
<td>flepeBO</td><td>5</tdxtd>8</td><td>3</tdxtd>4</td>
<td>7</tdxtd>73</tdxtd>79</td><td>34</tdxtd>86</td>
</tr>
</table>
</body>
</html>
COLGROUP , COL, </COLGROUP>
.
COLGROUP COL
, COLGROUP , TABLE ruies=groups ,
COLGROUP. , COLGROUP COL, .


, , ,
. , -

196

,
, . . 6.9 , ,
.
-'' vjyiihh,Li - \

C j :)

KJ [gj '?& '. /'

;
1

v. J @ ', 0'

|
1

j H JE|

~ 2003
43
29
38

" 2004
51
34
57

1 2005
79
48
36

JfjF

&

"

. 6.9.

HTML CSS
, .
CSS DOM (Document Object Model, ) .
.
, ,
ruler. ,
.
, , ,
, header. , line, ,
.
.
tabieRuierO ,
getEiementByid; ,
. , getEiementByid

.
-, , TABLE
ciass=ruier. ,

197

, . ,
( TR). TR ciass=header ( , ), onmouseover onmouseout.
,
line. onmouseout , .
SCRIPT.
6.13.
6.13.
<html>
<head>
<style type="text/css">
TABLE.ruler {
w i d t h : 100%;
/*
b o r d e r : l p x s o l i d navy
/*
}
TD {
padding: 4px
/*
}
TR.line {
/*
background: #fcO;
/*
color: #333
/*
}
.header {
/*
background: navy;
/*
color: white
/*
}
</style>
<script language="JavaScript">
function tableRulerO {

*/
*/

*/
*/
*/
*/
*/
*/
*/

// ,
if (document.getElementByld) {
tables = document.getElementsByTagName('table')
//
for (i=0;i<tables.length;i
// ,
/ / r u l e r
i f ( t a b l e s [ i ] . c l a s s N a m e == ' r u l e r ' ) {
1
t r s = tables[i].getElementsByTagName('tr )

198

II
for (j=0;j<trs.length;j
//
if (trstj].className != 'header') {
// TR line
trs[j].onmouseover = function() { this.className = 'line'
return false }
trs [j] .onmouseout = function () { this .className = ''; 4>
return false }

</script>
</head>
<body onLoad="tableRuler()">
<table class=ruler>
<tr class=header>
<th>&nbsp;</thxth>2003</thxth>2004</thxth>2005</th>
</tr>
<tr>
<td>He(>Tb</td><td>43</td><td>51</td><td>7 9</td>
</tr>
<tr>
<td>3onoTo</tdxtd>29</tdxtd>34</tdxtd>48</td>
</tr>
<tr>
<td>flepeBO</tdxtd>38</tdxtd>57</tdxtd>36</td>
</tr>
</table>
</body>
</html>
Opera
, , .
, padding TABLE
ceiipadding .

199_



, . -,
. , .
.


, (. 6.10).
2003

2004

2005

43

51

79

29

34

48

38

57

36

. 6.10.

, , , ( 6.14).
! 6.14.
<html>
<head>
<style type="text/css">
TABLE {
border-top:, lpx solid black;
/* */
border-bottom: lpx solid black
/* */
}
{
border-bottom: lpx solid black; /* */
text-align: left
/* */
}
</style>
</head>
<body>
<table width=300 cellspacing=0 cellpadding=4>

200

<trxth>&nbsp;</th><th>2003</th><th>2004</th><th>2005</thx/tr>
<trxtd>f^Tb</tdXtd>43</td><td>5K/tdxtd>79</tdx/tr>
<trxtd>3onoTo</tdxtd>29</tdxtd>34</tdxtd>48</tdx/tr>
<tr><td>flepeBO</tdxtd>38</td><td>57</tdxtd>36</tdx/tr>
</table>
</body>
</htral>


.
(. 6.11).
2003

2004

2005

43

51

79

29

34

48

38

57

36

. 6.11.


text-align: center, TABLE. , text-align , . ,
, t i t l e , ( 6.15).
| 6.15.
<html>
<head>
<style type="text/css">
TABLE {
border: lpx solid black;
text-align: center
{
background: black;
color: white

/* */
/* */

/* */
/* */

201

TD.title {
text-align: left

/* */
}
</style>
</head>
<body>
< t a b l e width=300 border=0 c e l l s p a c i n g = O c e l l p a d d i n g = 4 >
<trxth>&nbsp;</thxth>2003</thxth>2004</thxth>2005</thx/tr>
< t r x t d class=title>f^Tb</tdxtd>43</tdxtd>51</tdxtd>7 9</tdx/tr>
< t r x t d class=title>3anoTo</td><td>29</td><td>34</td><td>48</tdx/tr>
< t r x t d class=title>flepeBO</td><td>38</td><td>57</tdxtd>36</tdx/tr>
</table>
</body>
</html>


,
, (. 6.12).
2003

2004

2005

43

51

79

29

34

48

38

57

36

. 6.12.


border-bottom dashed ( 6.16).
, , . , Internet Explorer ,
. border-collapse ,

.
I 6.16.
<html>
<head>
<style type="text/css">

202

TABLE {
border: lpx solid black;
text-align: center;
border-collapse: collapse

/* */
/* */
/*
*/

}
(
background: darkblue;
border-bottom: lpx solid white;
color: white

/* */
/* */
/* */

}
TD {
border-bottom: lpx dashed #ccc

/* */

}
TD.title {
text-align: left;
font-weight: bold;
background: #ccc

/* */
/* */
/* */

}
</style>
</head>
<body>
<table width=300 border=0 cellspacing=O cellpadding=4>
<tr><th>&nbsp;</thxth>2003</th><th>2004</thxth>2005</th></tr>
<trxtd class=title>He</td><td>43</td><td>51</td><td>79</td></tr>
<tr><td class=title>3onOTO</tdxtd>2 9</td><td>34</td><td>48</tdX/tr>
<trxtd class=title>flepeBO</tdxtd>38</td><td>57</td><td>36</tdx/tr>
</table>
</body>
</html>



, (. 6.13). , , .

. 6.17
even, TR .
BODY.
. TD,
TR TABLE. ,

203

, . background
TR TABLE . , . , TABLE, , TR
even, background.
2003

2004

200S

43

51

79

29

34

48

38

57

36

17

26

92

. 6.13.

6.17,
<html>
<head>
<style type="text/css">
TABLE {
border-bottom: 2px solid black;
background: oldlace;
border-collapse: collapse

TH (
background: firebrick;
border-bottom: 2px solid black;
color: white

/* */
/* */
/*
*/

/* */
/* */
/* */

TD {
text-align: center;
/* */
border-bottom: lpx dotted firebrick
/*
*/
TD.title {
text-align: left;
font-style: italic;
font-weight: bold;

/* */
/* */
/* */

TR.even {
background: white;

/* */

204

color: firebrick
/* */
)
</style>
</head>
<body>
<table width=300 border=0 cellspacing=p cellpadding=4>
<tr><th>&nbsp;</th><th>2003</th><th>2004</th><th>2005</thx/tr>
<trxtd class=title>He</td><td>43</td><td>51</td><td>7 9</td></tr>
<tr class=even>
<td class=title>3ooo</td><td>29</td><td>34</td><td>48</td></tr>
<trxtd class=title>flepeBO</tdxtd>38</tdxtd>57</tdxtd>36</tdx/tr>
<tr class=even>
<td class=title>KaMHM</tdxtd>17</td><td>26</td><td>92</tdx/tr>
</table>
</body>
</html>


,
,
(. 6.14). .
2003

2004

2005

43

: 51

29

34

48:

38

1 57

36;

79
;
:

. 6.14.


. TABLE
COL ( 6.18). t i t l e
, odd , a even
.
6.18. COL
<html>
<head>

205

<style type="text/css">
TABLE {
border: lpx solid black
/* */
}
TH (
text-align: left;
/* */
border-bottom: 4px double black
/* */
}
COL.title {
background: #f0f0f0
/* */
)
COL.odd {
background: #fec688
/* */
}
COL.even {
background: #fbdebc
/* */
}
</style>
</head>
<body>
< t a b l e width=300 c e l l s p a c i n g = O c e l l p a d d i n g = 4 >
<col c l a s s = t i t l e >
<col class=odd>
<col class=even>
< c o l class=odd>
<trXth>&nbsp;</thxth>2003</thXth>2004</thxth>2005</thX/tr>
<tr><td>He</td><td>43</td><td>51</td><td>7 9 < / t d > < / t r >
<trxtd>3onoTO</tdxtd>29</td><td>34</td><td>48</td></tr>
<tr><td>flepeBO</tdxtd>38</td><td>57</td><td>36</tdx/tr>
</table>
</body>
</html>

, , Netscape ( Mozilla Firefox) ,


COL. . , , , (. 6.15).
,
ruies=cois TABLE ( 6.19). Internet Explorer,

206

border bordercoior TABLE.


.
|2003

29
J38

J2004
51
34
57

'2005
J79
(43
;

. 6.15.
6.19. rules
<html>
<head>
<style type="text/css">
TABLE {
border: lpx s o l i d black
}
TH {
text-align: left;
background: #ddd;
border-bottom: 4px double black
}
.title {
background: #bcel8d;
font-style: italic

/* */

/* */
/* */
/* */

/* */
/* */

</style>
</head>
<body>
<table width=300 cellspacing=0 cellpadding=4 rules=cols>
<trxth
class=title>&nbsp;</thxth>2003</thXth>2004</thxth>2005</thx/tr>
< t r x t d class=title>He</td><td>43</td><td>51</td><td>7 9</td></tr>
< t r x t d class=title>3onoTo</td><td>29</td><td>34</tdxtd>48</td></tr>
< t r x t d class=title>flepeBo</td><td>38</tdxtd>57</td><td>36</tdx/tr>
</table>
</body>
</html>
, rules, , .

207

, , (. 6.16). , , ,
, , . .
2003

2004

2Q05

L4?

:51

;79

:29

; 34

= 48

38

J57

!36

. 6.16.

6.20 : odd
, ,
even .
,
, .
! 6.20.
<html>
<head>
<style type="text/css">
TABLE {
border: lpx solid black

/* */

{
text-align: left;
/* */
background: chocolate;
/* */
color: bisque;
/* */
border-bottom: 2px solid black
/* */
}
.odd {
background: #fec688;
/* */
border-left: lpx dashed chocolate
/* */
.even {
background: #fbdebc;
/* */
border-left: lpx dashed chocolate
/* */

208

</style>
</head>
<body>
<table width=300 cellspacing=O cellpadding=4>
<trxth>&nbsp;</th><th>2003</th><th>2004</th><th>2005</thx/tr>
<tr><td>He</td><td class=odd>43</tdxtd class=even>5K/tdxtd
class=odd>79</tdx/tr>
<tr><td>3ooo</td><td class=odd>29</tdxtd class=even>34</tdxtd
class=odd>48</tdx/tr>
<tr><td>flepeBo</tdxtd class=odd>38</tdxtd class=even>57</tdxtd
class=odd>36</tdx/tr>
</table>
</body>
</html>
, .

. ,
, .
SUBMIT, , <Enter> .
, CG1, action FORM. CGI
(Common Gateway Interface, )
, -. CGI
. Perl, PHP, . , , , .

"=", name INPUT , .
GET, :
http://www.htmlbook.ru/cgi-bin/handler.cgi?
nick=%C2%E0%ED%FF+%D8%E0%EF%EE%F7%EA%E8%ED&page=5
,
CGI-,
(&). ( %, ASCII), (+).

210


, ,
FORM. <FORM> </FORM>
HTML ( 7.1). ,
.
, .
.
"

; 7.1.

,.

, .j

<html>
<body>
<form action=/cgi-bin/handler.cgi>
<> "OC"?</bxbr>
<input type=radio name=answer 1=1>0 <>
<input type=radio name=answer value=a2>0nepaun0HHaH <>
<input type=radio name=answer 1=>
<input type=submit value="npoBepnTb">
</form>
</body>
</html>

:
1. ,
.
2. .
3. -, .
,
(),
.
FORM .
G action. ,
.
CGI- HTML-, ( Parser). HTML-.
action ,

211

,
.
, maiito, 7.2. , . , , ,
. enctype="text/plain" FORM.
{ 7.2.

<html>
<body>
<form a c t i o n = m a i l t o : v l a d @ h t m l b o o k . r u e n c t y p e = " t e x t / p l a i n " >
</form>
</body>
</html>

enctype. , .
enctype,
.
(INPUT type=fiie), enctype multipart/form-data. , .
method. , .
: GET POST.
, .
GET.
. "="
( &). GET
, , , , ,
.
POST. POST .
, GET, 4 .
, , . .

212

target. , , HTML-. ,
-.
, name. , . :

blank ;

self ,
;

parent -, ,
self;

top , , , _self.

target ,
.


, : ,
, , .. . 7.1 , -.

,
(checkbox)
,

[3 serif
sans-serif
D cursive
D monospace
:C:\Www\1.gif

(radiobutton)

|(

. 7.1.

213

, . , , . , ,
.
, .
, ,
.
, , , . , , . 7.1.


.
, ,
, .


.
,
, .
,
. , .
:
< i n p u t t y p e = t e x t >

. 7.1.
7.1.

maxlength

, . ,

name

. ,

214

7
7.1 ()

size

value

7.3.
7.3.
<html>
<body>
<form action=/cgi-bin/handler.cgi>
<> ?</><>
<input type=text maxlength=25 size=20>
<input type=submit value=OK>
</form>
</body>
</html>


. ,
, . size . CSS
, , 7.4.
7.4.
<html>
<head>
<style type="text/css">
.textfield {
background: #f0f0f0;
color: red;
border: 2px solid black;
width: 50%;
font-family: Arial, sans-serif;
font-size: 90%

/*
/*
/*
/*
/*
/*

*/
*/
*/
*/
*/
*/

215

</style>
</head>
<body>
<form action=/cgi-bin/handler.cgi>
<> ?</><>
<input type=text maxlength=25 class=textfield>
<input type=submit value=OK>
</form>
</body>
</html>
,
INPUT. , , ,
. , , font-family font-size, color.
-
.
border ,
(. 7.2).
*L3T,

/.[ f a r

*] i_sj ,'J / '

::

t f

>l

I ?

1 |

. 7.2.

, , . 7.2,
solid border. ,
,
, . 7.3.
,
, . 7.3 . ,
,
.

216

>\ \

',

**-..-sil*.. =!.>
i

0" 1

j.rtPeCi


)<input type=text style="border: inset":
pinput type=text style="border: 4px groove">
pinput type=text style="border: 4px ridge">
<input type;text style=*border: 4pxoutset">
[<input type=text style="border: 4px double">
;<inp_ut type=text style="boi*der: 2p_x _do_tted">
[<input ^De=te"xt st/le="border: 2px d"ashed">
. 7..


, . ,
.
:
<input type=password >

. 7.1.

, . 7.5 , .
7.5.
<html>
<body>
<form action=/cgi-bin/handler.cgi>
<>:</> <input type=text maxlength=25 size=20 name=textxbr>
<>:</b> <input type=password maxlength=15 size=20 name=pass>

217

<p><input type=submit value=OK>


</form>
</body>
</html>
-.
, Windows XP (. 7.4).

j.

... 1

sQ [] [] cfii ; J

*"Jf I j * ) | - 0 ^

|| ^{

. 7.4. Internet Explorer Windows XP

, .
. 7.3
.

, . .


, ,
TEXTAREA. INPUT ,
.
:
<textarea >...</textarea>


. 7.2.

218

7.2.

TEXTAREA

cols

, . ,
.
,

disabled

.
. , <>, .

name

TEXTAREA. ,

. , . JavaScript ,
,
name

readonly

TEXTAREA readonly, ,
.
, " "

rows

, . ,

wrap

wrap , TEXTAREA . , ,
, . <Enter>
,

<TEXTAREA> </TEXTAREA> , . . 7.5


.
, .
( width), ( height), ( border),
(color background ). 7.6.

219

ijji ' ^ J

[*] [g] :';i ' })

'? |jf
|


(readonly)

. 7.5.

i 7.6.
<html>
<head>
<style type="text/css">
TEXTAREA {
background: ttfOfOfO;
color: #008080;
padding: 5px;
border: lpx solid black;
width: 50%

/*
/*
/*
/*
/*

*/
*/
*/
*/
*/

</style>
</head>
<body>
<form action=/cgi-bin/handler.cgi>
<> : < / b x b r >
< t e x t a r e a rows=10>
</textarea>
<p><input type=submit value="">
</form>
</body>
</html>

, border , . , ,
padding, .

220



.
,
(. 7.6).

"

- -

%j

[ 3 jgj <{t, > '>/ |Jf ' 0i*

;. i^3 C:\Www\l.html

liVj

B l E i

L Inferos

[^ ]
. 7.6.

,
INPUT , background.
, , ,
.
height, 7.7.
background no-repeat, ,
. , INPUT padding-left.
, .
7.7.
<html>
<head>
<style type="text/css">
INPUT.enter {
height: 36px;
width: 200px;
padding-left: 34px;

/*
'
/*
/* */

. : i

221

</style>
</head>
<body>
<form action=/cgi-bin/handler.cgi>
: <input type=text class=enter style="background: url(login.gif)
no-repeat"><br>
: <input type=password class=enter style="background: url(pass.gif)
no-repeat">
< p x i n p u t type=submit 1="0">
</form>
</body>
</html>

- , , .
, 32 .
, . ,
. ,
border.

. , ,
, .
, .
-
INPUT BUTTON. INPUT
.
< i n p u t t y p e = b u t t o n >

name value. name


, . name , .
value,
7.8.
I 7.8.
<html>
<body>

222
<form action=/cgi-bin/handler.cgi>
<input type=button name=press value="
</form>
</body>
</html>

">

,
.
BUTTON.
,
INPUT. , BUTTON

. , HTML, . , , ,
. . 7.7 ,
.

':

/ "? itf <?9

! '' ;

/jjlui-'ai'

, 1

Ji-tr

. 7.7.

, BUTTON , FORM.
BUTTON, .
, BUTTON FORM . 7.9
.
| 7.9. , BUTTON
<html>
<body>
< align=center>
<button>KHOnKa c TeKCTOM</button>
<button><img src=umbrella.gif width=25 height=32 align=absmiddle>
pncyHKOM</button>

223

</body>
</html>
,
.
, absmiddie

IMG.

BUTTON, , INPUT, .

,-. , .

SUBMIT
SUBMIT.
, , action
FORM. , ,
, , , HTML. , ; , , ,
, .
SUBMIT .
< i n p u t type=submit >
< b u t t o n type=submit>Ha,oraicb KHoriKe</button>

SUBMIT , ( 7.10).
i 7.10.
<html>
<body>
<form action=/cgi'-bin/handler.cgi method=GET>
<p align=centerxinput type=submitx/p>
</form>
</body>
</html>

224

name .
value ,
" " Internet Explorer, "
" Firefox "Submit Query" Netscape.

RESET
RESET . ,
.
RESET , ,
.
.
< i n p u t t y p e = r e s e t >
< b u t t o n type=reset>HaflniiCb KHonKe</button>

7.11 , value
INPUT. "",
, " ".
7.11.
<html>
<body>
<form action=/cgi-bin/handler.cgi>
<input t y p e = t e x t value="BBejwTe " >
<pxinput

t y p e = s u b m i t value="OTnpaBMTb"> < i n p u t t y p e = r e s e t

</form>
</body>
</html>
RESET ,
, , value,
"" "Reset".


.
, .

225

background, 7.12.
, .
7.12.
<html>
<head>
<style type="text/css">
.colorButton {
background: #ffOOOO;
/* */
color: #000;
/* */
font-family: Tahoma, sans-serif; /* */
font-size: 15px
/* */
</style>
</head>
<body>
<form>
<input type=button class=colorButton value="KpacHaH ">
</form>
</body>
</html>

. . 7.8 ,
, , .

. 7.8. :
Internet Explorer 6; Opera 7; Netscape 7

, -,
, .
,
.
, ,
. 7.9.
8 3 I00I

226

7
;

;;

'''-S -' r- -i.,..!;..,., -, | ,..; .;rT-;,i,-.vi.''. v.^'V:---:''vvj*;ru. i a

(,JS .-.

| | <;^ | . ^'"f ^

;!

;0 ^

EJ

j Sf

. 7.9.

. , . , background,
url, 7.13.
; 7.13.
<html>
<body>
<form>
<input type=button style="background:
l

url(/images/bgbutton.gif)"

bvalue=" ">
</form>
</body>
</html>

bgbutton.gif. ,
.

(radiobutton) , . :
<input type=radio = >
: name, v a l u e checked. (name) -

, , ,

227

.
. value , .
, ,
. checked. ,
, checked . , HTML
.
.
, ,
( 7.14).
7.14.
<html>
<head>
<style>
.radiobutton {
color: red;
background: #ccc;
border: lpx dashed black;
margin: 2px

/*
/*
/*
/*

*/
*/
*/
*/

</style>
</head>
<body>
<form action=/cgi-bin/handler.cgi>
< ?</><>
<input name=dzen type=radio class=radiobutton> He <>
<input name=dzen type=radio class=radiobutton> <>
<input name=dzen type=radio class=radiobutton>
<p><input type=submit value="">
</form>
</body>
</html>

- , , -
(. 7.10).

228

7
?

'&!
[:

' :

?
*

*~
^

. 7.10. :
a Internet Explorer 6; Opera 7; Netscape 7

Netscape (Firefox) (. 7.10, ) . Opera (. 7.10, )


color background ,
, ,
, . Internet Explorer (. 7.10, ) color, ,
.
,
. LABEL
, .
LABEL
for, ,
id INPUT, 7.15.
i 7.15. L A B E L
<html>
<body>
<form>
<input

t y p e = r a d i o name=psi i d = r a d i o l >
<label for=radiol>HMnpMTMHr</labelxbr>

< i n p u t t y p e = r a d i o n a m e = p s i i d = r a d i o 2 > < l a b e l for=radio2>PeMMnpi4TMHr</label>


</form>

229

</body>
</html>

(id) for
.
. , -.
.
Opera, , .
LABEL , ,
. ,
.

(checkbox) ,
. , (radiobutton).
:
<input type=checkbox >

, : name
, value , a checked . , ,
, ( 7.16).
,
. , ,
.
7.16.
<html>
<head>
<style type="text/css">
.col (
background: #ccc;
color: red;
border: lpx solid black;
margin-right: 7px

/*
/*
/*
/*

*/
Opera */
*/
*/

230

</style>
</head>
<body>
<form action=/cgi-bin/handler.cgi>
<b>C ?</><>
<input class=col type=checkbox name=optionl value=al checked> Windows
95/98<br>
<input class=col type=checkbox name=option2 value=a2> Windows 2000<br>
<input class=col type=checkbox name=option3 value=a3> System X<br>
<input class=col type=checkbox narae=option4 value=a4> Linux<br>
<input class=col type=checkbox name=option5 value=a5> X3-DOS
<pxinput type=submit value= "">
</form>
</body>
</html>
, - , CSS (. 7.11).

?
': Windows 95/98
Windows 2000
. System X
Linux

X3-DOS

[ ]


?
0 Windows 95/98
] Windows 2000
] System X
] Linux
X3-DOS


?
F Windows 95/98
Windows 2000
System X
" Linux
X3-DOS

. 7.11. :
Internet Explorer 6; Opera 7; Netscape 7

,
Netscape (Firefox) (. 7.11, ), margin-left, . ,

. Netscape . Opera
(. 7.11, ) background
, a Internet Explorer (. 7.11, )
, . ,
Opera color.
LABEL, , .
.

231


, ,
. .
: ,
, . ,
.
:
<select >
<option > K/option>
<option>riyHKT 2</option>
<option>nyHKT 3</option>
</select>
SELECT
, , . 7.12. size
SELECT, . , OPTION,
. OPTION,
SELECT. , SELECT
. , .
' . - .

. ; .

<$ ( ^ -. \ 0*

.;.;

. 7.12.

232

SELECT,

multiple. multiple
SELECT . size. , ; size
, .
size=i, "",
. 7.13,
.
<Ctii>'n <Shift> .

13 *> i -ff j 0-

|
(
|
;!
size

C J

size .

. 7.13.

name. SELECT. ,

.
size. . size
, .
m u l t i p l e SELECT s i z e = i

"".
.
multiple. , . multiple , size 1.
OPTION , , .
selected. . SELECT
multiple, .
value. ,
. "=",

233

name SELECT, value

. ,
.
7.17.
7.17.
<html>
<body>
<form action=/cgi-bin/handler.cgi>
<> </><>
< s e l e c t name=hero>
< o p t i o n value=sl>4e6ypaiiiKa</option>
< o p t i o n value=s2 selected>KpoKOwoi reHa</option>
< o p t i o n value=s3>fflanoraiHK</option>
< o p t i o n value=s3>Kpbica JlapMca</option>
</select>
< i n p u t type=submit value="OTnpaBMTb">
</form>
</body>
</html>

hero, selected

O P T I O N .



. .

.
.
:
<input type=hidden name=... value=...>
:
name ; ;
value , , .
7.18.

234
j 7.18.

7
|

<html>
<body>
<form action=/cgi-bin/handler.cgi method=POST>
<> (
!) :</bxbr>
<input type=text size=25 name=word>
<input type=hidden name=UserName value=Vasya>
<input type=hidden name=password value=pupkin><br>
<input type=submit value=OK>
</form>
</body>
</html>

, userName vasya, password


pupkin. ,
action, .


SUBMIT, . . ,
, action FORM.
:
<input type=image >
SUBMIT,
IMG, - ( 7.19). ,
, 2.
; 7.19.
<html>
<body>
<form action=/cgi-bin/handler.cgi>
<> :</><>

235

<input type=text size=35>


<input type=image align=absmiddle src=/images/imgbutton.gif width=91
height=25>
</form>
</body>
</html>
. 7.14.
-

&

,-'

.:

. ^|* 4
v . s 3

j :
jjTnpaBHh
^

. 7.14.


, , type=fiie INPUT. , (Browse... Netscape Choose
Opera).
, (. 7.15).
7.20.
! ?.20.
<html>
<body>
<form enctype="multipart/form-data" method=POST>
<> : < / b x b r >
<input t y p e = f i l e size=30>
</form>
</body>
</html>

236

- - Q f f e i P & \ &* $'


,.

; E I

, , :
I
i[ ... |

. 7.15.

enctype="multipart/form-data" . , .
, .

, POST, .


. ,
FORM . , , , CSS. , , FIELDSET. , ( 7.21).
7,21. F I E L D S E T
<html>
<body>
<form>
<fieldset>

<> </><>
<input type=checkbox value=tl> (
).<br>
<input type=checkbox value=t2> (
).<br>
<input type=checkbox value=t3> .
</fieldset>

237

</form>
</body>
</html>
. 7.16.
w

! i

"?

( j f

4(

01


( ).
(
).
.

. 7.16. , FIELDSET

,
LEGEND,

FIELDSET.

LEGEND

, , i, SUP, SUB, a
( 7.22).
I 7.22. LEGEND
<html>
<body>
<form>
<fieldset>
clegend s t y l e = " f o n t - w e i g h t : "> yee</legend>
< i n p u t type=checkbox v a l u e = t l > ( :
, , ).<br>
< i n p u t type=checkbox v a l u e = t 2 >
.<br>
< i n p u t type=checkbox v a l u e = t 3 > ,
.<br>
< i n p u t type=checkbox v a l u e = t 4 > ,
( : , , ,
).<br>
< i n p u t type=checkbox v a l u e = t 5 >
.<br>
</fieldset>

238

</form>
</body>
</html>
LEGEND ,
,
Snbsp;.
FIELDSET LEGEND ,
, . 7.17
7.19 ( 7.22).

Ji'b'ii

') ' 3

J ? i p *'>

0-


( : , ,
).
D .
, .
D , (
: , , , ).
D .

. 7.17. Internet Explorer Windows XP

File

d it

^iew

Navigation

Bootmarks

Bndow

Help

O

[~! ( : , ,
).
.
[~1 , .
, ( :
, , , ).
f"l .
. 7.18. Opera 7

239

File dit Ve
iw o bookmarks Toos
l Wndow

-
" ( : , ,
).
" .
" , .
1
" , (
! : , , , ).
.

|
;
!
j

i Done (0.1 scs)


. 7.19. Netscape 7

Internet Explorer , . Windows XP, Windows 98/2000 . , . ,


Opera "" , - "" . ,
( 7.23).
7.23.
<html>
<body>
<form>
< f i e l d s e t style="padding: 10px">
<legend s t y l e = " c o l o r : red">npo6y*cfleHMe </11>
</fieldset>
</form>
</body>
</html>

padding,
color.


- ,
. ,
, , .
,
.
- ,

, .
, , ,
, . , -, ,
.
,
, , .


IMG, , , align, .
, .
, -. , , , ,
IMG, 8.1.

242

i 8.1.
<html>
<body>
<img src=left_title.gif width--100 height=100 align=left>
<img src=right_title.gif width=100 height=100 align=right>
<hl align=center>3arojioBOK</hl>
</body>
</html>

align IMG,
, . ( HI)
,
, . 8.1.

:::

i > '-

ijf

[*j [. 't'

'*

ifjf

' t j f <*'

.,

JWJ

Q i J U

. 8.1.

: ,
, . ,
BR, .
clear; . BR,
, 8.2. ,
, align
styie="fioat:ieft", left , .
j 8.2.
<

>

<

>

243

<img src=left_title.gif width=100 height=100 style="float: left">


<img src=right_title.gif width=100 height=100 style="float: right">
<br style="clear: both">
</body>
</html>
both clear
. ,
.
,
, . , .
,
.
, ,
, . align TD, vaiign, 8.3.
j 8.3.

<html>
<body>
<table width=100% border=0 cellspacing=O cellpadding=O>
<tr>
<td valign=bottom><img src=samplel.gif width=50 height=50x/td>
<td align=right valign=bottom><img src=sample2.gif width=50
height=86x/td>
</tr>
</table>
</body>
</html>
, ,
bottom vaiign.
, aiign=ieft ,
. HTML . 8.1.
, . , .

244

8.1.

<td valign=top>
<img src=samplel.gif width=50 height=50x/td>
<td align-right valign-bottam>
<img src=sample2.gif width=50 height=86x/td>
<td valign-bottom>
<img src=samplel .gif width=50 height=50x/td>
<td align=right valign=bottom>
<img src=sample2.gif width=50 height=86x/td>
<td>
<img src=samplel.gif width=50 height=50x/td>
<td align=right>
<img src=sample2.gif width=50 height=86x/td>
, -

.
. , HTML , (. 8.2).

"

<

- ^

: i j f ;1

' " i|* *

^ J

dT,

, -7*2) + ^JVi +?! =0;

ds '
ds

V, -Ar,7j -^2^2 + ft ~;

(2.7)

. 8.2.

, . 8.2, .

245

, ,
( 8.4).
8.4.
<html>
<body>
< t a b l e width=100% border=0 c e l l s p a c i n g = O cellpadding=O>
<tr>
<td width=10%>&nbsp;</td>
< t d a l i g n = c e n t e r > < i m g s r c = f o r m u l a . g i f width=289 h e i g h t = 1 5 8 x / t d >
<td width=10% a l i g n = r i g h t > ( 2 . 7 ) < / t d >
</tr>
</table>
</body>
</html>

, ,
, .
.



-. , ,
, flash-,
.
, .
,

(. 8.3).
-
.

. 100 %. , ,
,
. ,
aiign=center,
( 8.5).

246

ij,

. ' . ....

jj(] \z\

'

'

.* >--

'' i
;

''.. '

'"

; '

*^ ;

"

^?

,
*
U ''' - *

- ':

.: ;
'

, j
{

rOCTEBAi=l ^
-

. 8.3. , -

| 8.5.

type="text/css">

BODY { m a r g i n :
</style>
</head>
<body>

Opx; p a d d i n g :

-,.t

<html>
<head>
<style

|
;

.:

Opx }

< t a b l e width=100% height=10C%>


<tr>
<td a l i g n = c e n t e r >
<img s r c = i m a g e s / t i t l e . g i f width=414 h e i g h t = 1 0 0 alt="PenenTbi HTML">
</td>
</tr>

" ;

247

</table>
</body>
</html>
, border
TABLE, , .
width, height.
, 100 %, , .
, .
, .
BODY, -. 9.
- . , ,
, . ,
, , ,
. .
, .
-,
. position: absolute. ,
, .
-,
50 % left top.
,
. margin-left margintop, 8.6.
| 8.6.
<html>
<head>

248

<style type="text/css">
ftcenter {
position: absolute;
left: 50%;
top: 50%;
margin-left: -207px;
margin-top: -50px

/*
/*
/*
/*
/*

*/
*/
*/
*/
*/

</style>
</head>
<body>
<img id=center src=sample.gif width=414 height=100 alt="Peu,enTbi HTML">
</body>
</html>
center. 414 ,
, 207, margin-left. ,
, .
. 8.4.
LEFT

MARGIN-TOP

MARGIN-LEFT
. 8.4. CSS

,
- . ,
, -

249

.
-: , , . .
. 8.5 ,
.
itim

tiiM'ssbll
Ijj'brijb!
t/pluryirMbi'jiun
liiibniui
E.cpl'jrjr

iSU

>3 Ites.TiA' j j j - [] [gj 'ifi) i ^ >.' djf 4& : fci"


6 !

. ,
, , ,
, ,
. ,
. ,



,

. ;
,
,

. :
, 8 " ,
.
. ,
, ,
, .
. 8.5.

, popup position .
.
100 % ( ),
. left, . , top ( 8.7).
{ 8.7. -
<html>
<head>
<style type="text/css">
Ipopup {
position: absolute;

/* */

250
top: 40%;
left: 30%;
width: 40%;
height: 20%;
background: #fcO;

8
/*
/*
/*
/*
/*

*/
*/
*/
*/
*/

1
</style>
</head>
<body>
<div id=popup>
<table width=100% height=100% border=l bordercolor=navy cellpadding=2
cellspacing=0>
<tr>
<td height=10 align=right bgcolor=navy style="font-family: sans-serif;
color: white">3aKpHTb [X]</td>
</tr>
<tr>
<tdximg src=ball.gif align=left>npnMep OKHa</td>
</tr>
</table>

</body>
</html>

, , -, .
, , . ,
, height,
. , , , . 8.5.
. , , top .


- .
, - . - -

251

, , . .
.
,
, , ,
text-align, align DIV,
.



CSS margin-left margin-right, 8.8.
8.8.
<html>
<head>
<style type="text/css">
ttcenterLayer {
margin-left: 30%;
margin-right: 30%;
background: #fcO;
padding:
}
</style>
</haad>
<body>
<div id=centerLayer>

/*
/*
/*
/*

*/
*/
*/
*/

</body>
</html>
40 % .
,
margin-left margin-right.
; ,
.

. , , ,
, , .

252

, , JavaScript, .

text-align
,
.
text-align. ( 8.9).
: " '

' " ' "

'

"

. . . . . . , . . . , . ,

. . . . . . . . ^ . . . . . . . . . . . . . . . . . . . . . . . . . . . .

; 8.9. t e x t - a l i g n
<html>
<head>
<style type="text/css">
BODY {

text-align: center /* - */
}
#centerLayer {
width: 400px;
/* */
margin-left: auto;
/* ( Opera) */
margin-right: auto;
/* ( Opera)*/
background: #fcO;
/* */
padding: ;
/* */
text-align: left
/* */
}
</style>
</head>
<body>
<div id=centerLayer>

</body>
</html>
text-align:
center, BODY. , ,
text-align, . left ( ), , justify,
. , , - ,
.

253

width, . margin-left margin-right


auto Opera, Netscape Firefox, .

align DIV

align DIV. center, . ,
, 8.10.
! 8.10. a l i g n
<html>
<head>
<style type="text/css">
ttcenterLayer {
w i d t h : 400px;
background: #fcO;
p a d d i n g : ;
text-align: left
}
</style>
</head>
<body>
<div a l i g n = c e n t e r >
<div i d = c e n t e r L a y e r >

/*
/*
/*
/*

*/
*/
*/
*/

</body>
</html>
, text-align,
.
.


, 8.6.
width height. .

254

. , ,
, . - .
position: absolute. 50 %
left top.
.
,
margin-left margin-top
.
( m a r g i n - l e f t )

( m a r g i n - t o p ) .

- ,
overflow: auto. , , ( 8.11). ,
Opera 6 .
j 8.11. ,
<html>
<head>
<style>
#centerLayer {
width: 400px;
height: ;
position: absolute;
left: 50%;
top: 50%;
margin-left: -200px;
margin-top: -150px;
background: #fcO;
border: solid lpx black;
padding: lOpx;
overflow: auto
</style>
</head>
<body>
<div id=centerLayer>

</body>
</html>

'* */
'* */
'* */
'* */
'* */
'* */
'* */
'* */
'* */
'* */
'* */

255

.

margin-left margin-top ( 8.12).
| 8.12. ,
<htral>
<head>
<style>
ttcenterLayer
{
w i d t h : 40%;
h e i g h t : 30%;
position: absolute;
l e f t : 50%;
t o p : 50%;
m a r g i n - l e f t : -2.0%;
m a r g i n - t o p : -15%;
}
</style>
</head>

/*
/*
/*
/*
/*
/*
/*

*/
*/
*/
*/
*/
*/
*/

<body>
<div i d = c e n t e r L a y e r >

</body>
</html>
;
, .
, 20 %, ,
margin-left , 20 %.
,
, .


,

, . 8.6.

256

,j

"'-

;.J

igj

;V

/'

* ^ * ; : ; 1 0,

?
? , , . ,
, ,
. ,
, .
, .
, !.


( !, ,
) ,
, . ,
, , ,
. 8.6.

margin-left, . ,
2, ,
, 8.13.
! 8.13.
<html>
<head>
<style type="text/css">
H2 {
font-size: 110%;
color: #09599d;
font-weight: bold;
margin-bottom: 0.2em;

*/
*/
*/

*/
border-bottom: lpx solid black
/* */

}
{
padding-left: 40px;
margin-top: Opx
}
</style>
</head>

/*
/*
/*
/*

/* */
/* */

257

<body>
<2></112>
<> ...</>
</body>
</html>

,
. , margin-top margon-bottom. 2, . , , :
margin-bottom 2 margin-top: 0.2em .
, . 8.6, . , , . , , . 8.7.

aj

.; |

>

;' 7

1 ^

<gf

3 ^

[wj *

"


,
, 30-40
.

.
12-15
, 3-5 .

,

.
. 8.7.

, ,
, .
, ,
, .
1001

258

. float, . CSS , ,
.
,
( 8.14).
i 8.14.
<html> '
<head>
<style type="text/css">
H2 {
font-size: 110%;
color: #09599d;
float: left;
width: 20%;
text-align: right;
margin-top: Opx
}
padding-left: lOpx;
margin-top: Opx;
margin-bottom: 0.5em;
float: left;
width: 78%

*/
/
*/


*/

*/
*/
*/
*/
*/

</style>
</head>
<body>
<2></2>
<>...
</body>
</html>

, ,
.
, .
2 .

BR. , 78 %, 80 %, , 100
20. (78 %) -

259

Netscape (Firefox).
padding .
,
, .

. , ,
. , , HTML -, . , , . ,
, . " ", ,
,
.
, ,
, , .
.
, , , .

vaiign=top TD, ( 8.15). , ,
,
.
| 8.15.
<html>
<head>
<style type="text/css">
H2 {
font-size: 110%;
color: #09599d;
margin: Opx
}
{
margin-top: Opx;
margin-bottom: 0.5em

/* */
/* */
/* */

/* */
/* */

260

</style>
</head>
<body>
<table width=100% border=0 cellspacing=O cellpadding=4>
<tr valign=top>
<td width=20% align=rightxh2>3arcmoBOK</h2x/td>
<tdxp>TeKCT. . .</px/td>
</tr>
<tr valign=top>
<td alig=right><h2>3aooo</h2></td>
<td><p>TeKCT...</p></td>
</tr>
</table>
</body>
</html>

, ,
, . ceilpadding
TABLE, ,
m a r g i n - l e f t .


, , . 8.8.
,
,
. ,
, 8.16.
8.16.
<html>
<body>
<form method=POST action=/inc/ac.php target=popmsg name=comment>
<table width=100% border=0 cellspacing=O cellpadding=4>
<tr>
<td align=right>HMH</td>
<td><input type=text name=name maxlength=50 size=20></td>
</tr>
<tr>
<td align=right>E-mail</td>
<tdxinput type=text name=email maxlength=50 size=20x/td>
</tr>

261

<tr>
<td a l i g n = r i g h t
valign=top>KoMMeHTapii</td>
< t d x t e x t a r e a name=text c o l s = 4 5 r o w s = 1 0 x / t e x t a r e a x / t d >
</tr>
<tr>
<td>&nbsp;</td>
< t d x i n p u t type=submit value="flo6aBMTb
</tr>
</table>
</form>
</body>
</html>

, , aiign=right.
Miu-ri.vtt Intrpirt Uplnrrr

(

. 4 " 1 & -

Jjf

# % \ 0- 1^. IQj' 3 ^

! I

E-mail !

. 8.8.

,
, CSS.
, ,
.

262


,
, , .

text-align,
" " .


,
. ,
, - . . 8.2
.

8.2.

<div style="height: ; width: 400;


background: #fcO; padding: 7px">

</div>

<div style="height: ; width: 400px;


background: #fcO; padding: 7px; text-align: center">

</div>
<div style-"height: ; width: 400px;
background: #fcO; padding: 7px; text-align: right">

</div>

. 8.2 DIV , width


height. align, padding.
text-align,
.
,
, .

263


,
. , 8.6.
left top 50 %,
.
m a r g i n -

left margin-top . , , 8.17.


j 8.17.
<html>
<head>
<style type="text/css">
#layer {
height: ;
width: 400px;
background: #fcO;
border: lpx solid black;
padding: 7px;
text-align: center
ttext {
position: relative;
top: 50%;
margin-top: -0.5em
}
</style>
</head>
<body>
<div id=layer>
<div id=text>

/* */
/* */
/* */
/* */
/* */
/* */

/* */
/* */
/* */

</body>
</html>
. ,
layer, , , . text, . ,

264

position: relative. , layer.


, top 50 %.
,
, .5 margin-top.
,
- . , , . -, , , ,
. ,

. , -, , . ,
height, .
Opera Netscape, a Internet
Explorer (. 8.9).
* L ! i i i J - IHJVSIU

H;;-,-s,j

;.:

'JLI ^ ' K'JUJJ - hiiuiuiun

Isiinrsmi

is.ylus'n!

[] jg) -J: />

<";' g4
/

L o r e m ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy mbh
euismod tinciduntut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad
minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisi ut
aliquip ex.ea c o m m o d o consequat. Duis te feugifacilisi. Duis autem dolor in
hendrerit in vulputate velit esse molestie consequat, vel ilium dolore eu feugiat
nulla racHisis at vero eros et accumsan et lusio o a o a i g n i s s i m qui blandit p r a e s e n :
luotatum zznl delenit au eue duis dolore te feusat nulla Facilisi.

. 8.9.


. padding-top padding-bottom,
. padding, -

265

.
, 8.18, , .
8.18.
<html>
<head>
<style type="text/css">
#layer {
width: 400px;
background: #fcO;
border: lpx solid black;
padding: 150px 7px;
text-align: center

/*
/*
/*
/*
/*

*/
*/
*/
*/
*/

</style>
</head>
<body>
<div id=layer>

</body>
</html>

, . , .



.
padding-top, ,
8.19.
8.19.
<html>
<head>
<style type="text/css">

266

BODY {
margin: Opx; padding:
}
#title {
width: 100%;
background: #f90;
padding-top: 20px;
font-family: Arial, sans-serif;
font-size: 50px;
color: white;
font-weight: bold;
text-align: center

/*
/*
/*
/*
/*
/*
/*
/*

*/
*/
*/
*/
*/
*/
*/
*/

</style>
</head>
<body>
<div id=title>
<span style="position: relative; top: 12"> </>
</body>
</html>
,
,
t i t l e . , margin padding BODY.
,
, 9.
8.19 . 8.10.

,;

'pii-sihisii IS

* &

/ '

^
t,'r

$ ;
#

- .*

^ 3

. 8.10.

-
>

267


, . ,
top.
. 8.10, "" ,
. ,
,
.



, .
,
. -,
.
, ; , ,
.



. ,
. 9.1, , , , , .
. ,
.
,
.
margin. ,

. , - , . ,
, .

270

, , . ,
.
MARGIN-LEFT

'Loremipsum dolor sit amet, consectetuer adipiscingeEt,, sed


diem nonummy nibh euismod tincidunt ut lacreet dolore
magna aliguam erat vohrtpat. , *: ; .

. 9.1.

9.1 margin .
9.1. margin
<html>
<body>
<div s t y l e = " w i d t h : 100%; m a r g i n : 15px; background:

navy">

< t a b l e width=100% s t y l e = " m a r g i n : 20px; background: #f90">


<tr>
<td>...</td>
</tr>
</table>
<div s t y l e = " w i d t h : 100%; m a r g i n : 20px Opx; background: o l i v e " >

</body>
</html>

,
100 %, margin.
. 9.2 -.

271

iJJ iiifiiiii

iQ.

i*^ |g] :;'j; /'

.. |

; i^f J( (-.5 f ^ jjtf)


Q ! E l

'

. 9.2.

, . , . 9.2 ,. ,
, 100 %,
. , DIV,
,
. , Netscape (Mozilla Firefox)
, a Internet Explorer Opera
. .

, . " "
.

margin margin-left,

m a r g i n - r i g h t , m a r g i n - t o p margin-bottom.

, ,
( 9.2).
9.2.
<html>
<body>
<div s t y l e = " m a r g i n - l e f t : 30%; m a r g i n - t o p : 10%; w i d t h : ; h e i g h t :
50px; background: #f90">

</body>
</html>

272

.
.

-
- .
,
. , ,
.

margin padding. , margin Internet Explorer Netscape, a
padding Opera. , ( 9.3).
; 9.3. -

<html>
<head>
<style type="text/css">
BODY {

margin: Opx;
padding: Opx

/* Internet Explorer Netscape */


/* Opera */

}
</style>
</head>
<body>
<table width=100% border=0 bgcolor=navy>
<trxtd>
</tdx/tr>
</table>
</body>
</html>
- "",
.
margin-top, margin-bottom, margin-right
margin-left. ,
margin padding ( 9.4).

273

I 9.4.

<html>
<head>
<style type="text/css">
BODY {
margin: Opx; padding: Opx;
margin-top:

/* */
/* */

}
</style>
</head>
<body>
</body>
</html>


- margin-top. .
, ,
BODY. , Internet
Explorer Netscape . Internet Explorer BODY
l e f t m a r g i n t o p m a r g i n ,

Netscape marginwidth
marginheight. ,
, ( 9.5).
9.5. - BODY

<html>
<body leftmargin=O topmargin=0 marginwidth=O marginheight==O>
</body>
</html>

- , .
, -. BODY.

274


, .
, .
, ( 9.6).
\ 9.6.

<html>
<body>
<form>
<table>
<trxtd>
<input t y p e = t e x t size=10>
</tdx/tr>
</table>
</form>
</body>
</html>

,
, . ,
margin FORM ( 9.7).
| 9.7.
<html>
<body>
<form s t y l e = " m a r g i n :

Opx">

</form>
</body>
</html>

margin .


,
(. 9.3).

275
MARGIN-RIGHT

[yorem ipsum dolor sit amet, consectetuer adtpisdng ;


elit, sed diern nonurnmy mbh euismodtinciduntut -:
Street dolore magna. aliguat erat voluipat

PADDING-LEFT
. 9..

, , . . 9.3,

.

padding. . margin,
. padding-left, padding-right,
padding-top padding-bottom, , , .
, ,
.
. 9.8 .
9.8. padding
<html>
<body>
<div style="padding: 20px; width: 100%; background: #fcO; border:
lpx solid black">

276

<div s t y l e = " p a d d i n g :

padding-left:

50px; m a r g i n - t o p : lOpx;
w i d t h : 100%; b a c k g r o u n d :

#fcO">

</body>
</html>
.
20 padding.
padding-left. ,
padding,
, padding . . 9.4.
-j

'/k;Hwi^iU'jij)iiin

pudilhisj - !

-'l

'-

$*

L o r e m i p s u m d o l o r sit a m e t , c o n s e c t e t u e r a d i p i s c i n g elit, s e d d i e m n o n u m m y
nibh e u i s m o d tincidunt ut lacreet dolore m a g n a aliguam erat volutpat.

L o r e m i p s u m d o l o r sit a m e t , c o n s e c t e t u e r a d i p i s c i n g elit, s e d d i e m
n o n u m m y nibh e u i s m o d tincidunt ut lacreet dolore m a g n a aliguam erat
volutpat.

.:

. 9.4.

margintop, , , .


- padding, -. , DIV padding ( 9.9).

277

9.9. D I V

<html>
<body>
<div style="padding: ; width: 100%; background: #c0c0c0">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem
nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat
volutpat.</p>
</body>
</html>

padding, ,
. ,
. 9.5, 9.6 9.7, .

45 -

[] ;gl **5 >' ;" (" 4 4 ' 3 '

j j

!!

3
.

tincidunt

'

'

>

. 9.5. Internet Explorer 6

torem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonumiiiy nibh
euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.

. 9.6. Opera 7

Internet Explorer, ,
, , , . -

278

Netscape (Firefox) , ,
width, . ,
Netscape Opera 6, ,
. 9.6,
. ,
.
,

'.'i ; ] -1 ^-i

File

Edit

View

. . . . , : . .

Vdbauyj
o

gookmarks

'

''''. '/
Tools

Window

Help
Q.

Search

L o f e m i p s u m d o l o r sit a m e t , c o n s e c t e t u e r a d i p i s c b g eEt, s e d

djem

e u i s m o d tmcidunt ut lacreet dolore m a g n a aliguam erat volutpat.

ftonurnmy

:'.;.

mbli;
.

Document: Done (0.19 sees)

. 9.7. Netscape 7

,
, ,
. 9.7 .
DIV , ( 9.10).
] 9.10. ,

<html>
<body>
<div s t y l e = " w i d t h : 100%; background: #c0c0c0">
<p s t y l e = " p a d d i n g : 10px">Lorem ipsum d o l o r s i t amet, c o n s e c t e t u e r
a d i p i s c i n g e l i t , sed diem nonijmmy n i b h euismod t i n c i d u n t u t l a c r e e t
d o l o r e magna aliguam e r a t v o l u t p a t . < / p >

</body>
</html>
, , .

279


. , 8,
-.
, ,
, "" .
, , , .
. ,
.
, "" , , .
.
.
, .
.
. ,
, .
,
.
padding margin ,
.

-,
. ,
.


, .
.
, (. 9.8).
,
, . , biocki,
. , 2,

280
, , ,
9.11).

I

*J

"

L"5 ' /'

1$

.
1

:'7 i^f ^

^- ^

'


.
, ;
- ,
.
.

. 9.8.

9.11.
<html>
<head>
<style type="text/css">
.blockl {
background: #fcO;
padding: 20px
.block2 f
padding: lOpx;
border: 4px double black
</style>
<body>
<div class=blockl>
<div class=block2>

</body>
</html>

/* */
/* */

/* */
/* */

(-

281

margin 2 padding biocki. , ,


.
-
, , padding c.o 1 , . 9.12 ,
.
9.11.
! 9.12.
<style type="text/css">
.blockl {
background: #fcO;
padding: lpx
i
i
.block2 {
margin: 20px;
padding: lOpx;
border:
}
</style>

4px d o u b l e b l a c k

/*
/*

* /
!

'

*/

/*
/*

" */
*/
/* */

,
,
.


, H I . .. , , . HTML , .
, , . . HTML
BLOCKQUOTE. ,

,
( 40 ),
(. 9.9).
, HR, .

282

margin, BLOCKQUOTE.

,
( 9.13).

i j j >-':*

"

(jjjj 'i$ : , ^ !.|5 "

;. |

; 6 ] :

... :
, .
(. .)

. 9.9. , BLOCKQUOTE

9.13.
<html>
<head>
<style type="text/css">
BLOCKQUOTE (
margin:

/* */
40px;
/* */
padding:
5px
/* */
;
/* */
font-style: italic;
/* */
border-top: 2px solid crimson;
/* */
border-bottom: 2px solid crimson /* */
</style>
<body>
<blockquote>
... : ,
.
< align=right>M3 (. .)

283


</blockquote>
</body>
</html>

margin. "" , ,
. , padding,
(. 9.10).

Qh-cau

1 &

'' |>

... :
, .
(. )

. 9.10. ,

, ,
.


. , , .
, -
. ,
, :
, ,
-
;
"",
,
float;
.

284

. ,
column, ,
. width
, . ,
coil, , , CSS . ,
float: left. DIV
.
float, 9.14, .
, 12, . , margin-left,
. , coll.
, ,
.
. , .
9.14. m a r g i n - l e f t
<html>
<head>
<style type="text/css">
.column {
background: #800000;
width: 100%
.coll {
width: 200px;
float: left;
color: white
.col2 {
background: #e0e0e0;
margin-left: 200px

padding: 7px;
margin:

*/
*/

'* */
I* */
'* */

/* */
/*
*/

/* */
/* */

285

</style>
</head>
<body>
<div class=column>
<div class=coll>
<> </>
<div class=col2>
<> </>

</body>
</html>

, ,
. 9.11.
*0 uiih'dl I M^JtJ dWiU'L'HS,,,!
KfUSUn '!',
iiltbJ'JJb!
:

} -J ""' -

1 " id

: J

/.'!

^/ ^

J 3 - (.^ S

1 : :
1

^'
;

,
,

.

"
11





6
.

. 9.11.


:
( padding)

Firefox. ,
( ), ;
- ,
, Internet Explorer , Opera
.
margin: Opx, ;

286

Internet Explorer 6 -
. , . 9.11 "" , , ;
, ,
.
,
( 12) ( coll). ,
.
, . Internet Explorer Opera ,
(. 9.12, ). Netscape Firefox ,
(. 9.12, ).
,
,

:
<

. 9.12. :
Internet Explorer Opera; Netscape Firefox

- .
,
.

1 0


"" , . ,
,
. , , .
, . ,
, ,
.
HTML CSS ,
, .

.
, ,
.


,
. , -
.
, overflow,
:
visible . Netscape
Firefox ,
. -

288

10

, overflow ;
hidden ,
;
scroll ,
;
auto .

width () height (). ( 10.1).
; 10.1.
<html>
<head>
<style type="text/css">
.hero {
overflow: scroll;
width: 400px;
height: 150px;
border: solid lpx black

/*
/*
/*
/*

*/
*/
*/
*/

</style>
</head>
<body>
<div class=hero>
<h2>repoM</h2>
<></>
<> </>
<></>
<> </>
</body>
</html>

DIV,
,
. . 10.1.
,
, . Internet Explo-

289

rer
overfiow-y overfiow-x . ,
(),
overfiow-x: hidden BODY, 10.2.

. .
,. .

) '

il

'.flu

.'

; . ^f

^J

jj.3* #

jJJ

'

. 10.1.

! 10.2.

<html>
<head>
<style type="text/css">
BODY { overflow-x: hidden )
</style>
</head>
<body>
</body>
</html>

, ,
Internet Explorer, .

-, , . - .
. I00I

290

10

, -
, ,
, - . , , , , .
. , ,
, .



scrolling FRAME. :
yes
( 10.3).
10.3.
<html>
<frameset cols=200,*>
<frame src=menu.html name=MENU noresize scrolling=no>
<frame src=content.html name=CONTENT>
</frameset>
</html>
, MENU . , scrolling
, , . .
.


, HTML
.
JavaScript , open, :
window.open("URL", " ", "")

URL HTML-,
.
, . . 10.1.

291

10.1.

directories

yes | no 1 | 0

location

yes | no 1 | 0

menubar

yes | no 1 | 0

resizable

yes | no 1 | 0

scrollbars

yes | no 1 | 0

status

yes | no 1 | 0

toolbar

yes | no 1 | 0

left

top

height

width

. , 100 * 100 ,
.
yes no (i ). ,
center=yes center=l.
scrollbars,
( 10.4).
:

:";

..............

I 10.4.
<html>
<head>
<script language="JavaScript">
function tipsWindowf) {
window.open("tips.html", "TIP", "width=400, height=300, status=0,
menubar=0, location=0, resizable=0, directories=0, toolbar=0,
scrollbar=0");
</script>
</head>

.-.^

292

10

<body onLoad="tipsWindow()">
</body>
</html>

400x300 , . tipswindowo
onLoad, .
tips.html.


Internet Explorer
-.
CSS, :
scrollbar-face-color ;
scrollbar-track-color ;
scrollbar-darkshadow-coior
;
scrollbar-shadow-color ;
scroiibar-highiight-coior , ;
scrollbar-base-color : , , ;
scroiibar-3diight-color ;
scrollbar-arrow-color .
10.5 ,
.
: 10.5.
<html>
<head>
<style type="text/css">
BODY (
background: #053f38;
color: #ffd595;

/* */
/* */


scrollbar-face-color: #053f38;
scrollbar-arrow-color: white
}
TEXTAREA {
scrollbar-arrow-color: orange;
height: lOOpx
}
</style>
</head>
<body>
<form action=/cgi-bin/handler.cgi>
<textarea>

293
/* */
/* */

/* */

</textarea>
<p><input type=submit value="OTnpaBHTb">
</form>
</body>
</html>

-.
.
BODY, TO
. ,
. , ,
, .
TEXTAREA

. . 10.2 Internet
Explorer 6 Windows, (. 10.2, ),
(. 10.2, ).

, , . 10.1. 10.6.
\ 10.6.
<html>
<head>
<style type="text/css">

10

294

.hero {
overflow: scroll;
overflow-x: hidden;
padding: 7px;
width: 4 00px;
height: 150px;
border: solid lpx black;
scrollbar-face-color: green;
scrollbar-arrow-color: white

/* */
/* */
/* */
/* */
/* */
/* */
I* */
/* */

</style>
</head>
<body>
<div class=hero>
</body>
</html>

''.,:

. 10.2. :
;


, ,
Internet Explorer. . ,
.

295



. : ,
.
, ,
. , , , "", , .
.
. 10.2 ,
.
10.2.

default
+

I
I
f

ne-resize

crosshair

e-resize

pointer

se-resize

move

s-resize

text

sw-resize

wait

w-resize

help

nw-re size

n-resize

, . 10.2 . .
. cursor , . 10.7 ,
.

296
\ 10.7.

10
\

<html>
<head>
<style type="text/css">
A.movelink { c u r s o r : move }
A.helplink { cursor: help }
</style>
</head>
<body>
<p><a h r e f = l i n k l . h t m l class=movelink>nEPEMECTHTE </>
< p x a h r e f = l i n k 2 . h t m l class=helplink>cnPABKA</a>
</body>
</html>

. ,
moveiink, . , . , heipiink, "".
.
- , , BODY, 10.8.
\ 10.8. -

<html>
<head>
<style type="text/css">
BODY { c u r s o r : c r o s s h a i r }
</style>
</head>
<body>
</body>
</html>

, ,
,
.

297

, DIV SPAN.
, , SPAN.
- ,
( 10.9).
I 10.9. -
j -
,'
<html>
<head>
<style type="text/css">
.cross { cursor: crosshair }
</style>
</head>
<body>
<div c l a s s = c r o s s > H a
.</div>
</body>
</html>

DIV
.
Internet Explorer
. CUR ANI (
Windows Windows\Cursors).
cursor
u r i o , ( 10.10).
10.10. -
<html>
<head>
<style type="text/css">
BODY ( cursor: url(dinosaur.ani) }
</style>
</head>
<body>
</body>
</html>

298

10

. . ,
.

J ^-.

(^ i--

,-;J?

. .

..

y<5 [g3 if? >'

- - -

;| t __i

/ ^ f ^

! ;
;

,:}<fivs , - /ir.j'j.ut- l n u r b S ! f / u ^ r a 1

fci"

si

jjg[|

jW] "

[ \ Lorem ipsum dolor sit ainet, consectetuer adipiscing elit, sed diem
^
nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat
volutpat. Ut wisis enim ad minim vemam, quis nostrud exerci tution
uEamcorper suscipit lobortis nisi ut aliquip ex ea cornmodo consequat. Duis *,
. 10.3.

, ,
. ,
, , .
, , ,
. , .
, , .


- ,
, .

16x16 . ,
.
16 * 16 ICO
favicon.ico.
, 10.11.

:'"

'

,....,....

\ 10.11.

.:........

*
<html>
<head>
<link rel="shortcut icon" href="http://www.raysite.ru/favicon.ico">
</head>

299

<body>
</body>
</html>

He . "
" ,
.

BMP,
ICO. , favicon.ico.


, ,
. , ,
.
, .
:
, , - IMG.
, HTML
CSS;
.
Internet Explorer, ;
text-shadow. HTML, . ,
,
. , ;
.
.
, , .
.
:

300

10

, .
,
.



-.
, : APPLET, EM, H1...H6, OPTION, P, SELECT .
,
DIV SPAN, , -

width height.
dropshadow, :
f i l t e r : dropshadow(1= , offX=CMememie ,
offY=CMeuieHMe )

( #000)
(silver), offx , . , . offY, .
, .
,
DIV , 10.12.
10.12.
<html>
<head>
<style type="text/css">
DIV.shadow {
width: 90%;
filter: dropshadow(color=#cccccc, offX=5, offY=5)
}
</style>
</head>
<body>
<div class=shadow>

301

<1></>
"",
,
.
</body>
</html>
. 10.4,
.
'AWJiffJ <irU</:hUllbr/ iAibS'JWlt illfjJi,:;! F,<rj[rjra)'

< " * ]

--3jbJ
-

^ J 1

"!*

. .'

;>V| *
' , :

"",

, .
. 10.4. ,
, ,
, .



,
, Internet Explorer. , - ,
. -
.
, ,
DIV, ,
position. left top , a color .
, -

302

10

z-index,
. , . , , ,
- ( 10.13).
[ 10.13.
!
;;
_, ,.'.,,.,.....!....; .,,..... ,,....,.,...
..'
,,....;,,,..
.
,. ; ,.......
,.,..!
<html>
<head>
<style type="text/css">
HI {
margin: Opx
/* */
)
DIV.shadow HI {
position: relative;
/* */
left: 5px;
/* */
top: -lem;
/* */
color: #ccc;
/* */
z-index: -1
/* */
}
</style>
</head>
<body>
<></>
<div class=shadow><hl>4e6ypaiuF.a</hl></div>
</body>
</html>
.
, , .

, , .
, (. 10.5).
, .
, . -

303

, lem,
.
- .
Netscape ( Mozilla Firefox) , , - z-index: -l.
- ( ). z-index
, .

j j j l-ias.M


"

*! ^- ) | :

iff'

^
>? I j 1 ' t;3 * ' &

"
:

^;

! 6 3

"",

, .
. 10.5. ,

Netscape,
, z-index ,
( 10.14). -, left top.
:
" *" ,.........,..,,"!
,
.,,.
|
\ 10.14.
\
<html>
<head>
<style type="text/css">
HI {
m a r g i n : Opx;
c o l o r : #ccc
DIV HI {
position: relative;
left: 5px;

/* */
/* */

/* */
/* */

304

10
/* */
/* */

top: -lem;
color: black

</style>
</head>
<body>
<hl></hi>
<divxhl>4e6ypauiKa</hl></div>
</body>
</html>
- , , . , left ,
, 10.13.


HTML , , , , , copyright, , . . ,
, (&),
, .

. . 10.3 , .
10.3.

Snbsp;

&#160;

&sect;

67;

Scopy;

&#169;

&reg;

<B>

copyright

S#174;

&frac14;

&#188;

&frac12;

89;

/z

&frac34;

&#190;

305

10.3 ()

&quot;

&#34;

&amp;

&#38;

&

&lt;

&#60;

<

""

&gt;

&#62;

>

""

&laquo;

&#171;

&raquo;

&#187;

&larr;

&#8592;

&uarr;

&I8593;

&rarr;

&#8594;

&darr;

&#8595;

&harr;

&#8596;

4-+

&ndash;

S#8211;

&mdash;

&#8212;


"

,
. , ,
, - HTML-. , . ,
, ( 10.15).
10.15.
<html>
<body>
<><>. <//>
<p>&lt;html&gt;<br>
&lt;body&gt;</p>
< p > S l t ; t a b l e width=400 b o r d e r = l & g t ; < b r >
S i t ; s c r i p t language=Squot;JavaScriptSquot;&gt;<br>
f o r ( i = l ; i & l t ; 6 ; i++) (<br>
document.writeln(&quot;Sit;trSgt;&quot;);<br>
for (j=l; j&lt;6; j++) document.write(Squot;&lt;tdsgt;Squot;
&quot;slt;/td&gt;&quot;);<br>
document.writeln(Squot;Sit;/tr&gt;&quot;);<br>
}<br>

+ i + j +

306

10

Sit;/script&gt;<br>
Sit;/table&gt; </p>
<p>&lt;/body&gt;<br>
&lt;/htmlsgt;</p>
<p>Copyright scopy; 2002 &#8212; 2005 </>
</body>
</html>
. 10.6 ,
-.

[
J

1*1 L)

'

4gj : j j
: Q

.
<html>
<body>
<table width=400 border=l>
<script language="JavaScript">
document. writeta("<tr>");
for ( j = l ; j < 6 ; j + + ) d o c u m e n t . w n t e ( " < t d > " + 1 + j + " < / t d > " ) ;
document wnteln("</tr>");
}
</script>
</table>

</body>
</html>

Copynght 2002 2005


. 10.6.


HTML -. , .
, , ,
, . .

11


, .

. ,
.

,
. ,
, .
, ,
, -.

, ,
.
.
, -, , . , ,
,
, . ,
, , , . , , , .
.

-.

308

11

. ,
, .
.
. , . .
. ,
, - .
. , ,
.
.
.
, .
.
. ( Windows), Internet Explorer , . - ,

, .
,
, .



, . ,
, ,
. ,
:
- , , .
.
,
,
;
-,
. .

309

. , ,
.


.
, , .
, , . , .
(. 11.1).

. 11.1. ,

TABLE , . , 11.1 , TABLE , .menu


.
| 11.1.
<html>
<head>
<style type="text/css">
TABLE.menu {
background: #fcO;
width: 80%;
border: lpx solid black;
text-align: center

.menu TD {
border: lpx solid white;
padding: 4px
)
</style>
</head>

/*
/*
/*
/*

*/
*/
*/
*/

/* */
/* */

310

11

<body>
< t a b l e a l i g n = c e n t e r c e l l s p a c i n g = O class=menu>
<tr>
<td><a
href=linkl.html>4e6ypauiKa</ax/td>
<td><a href=link2.htail>KpoKofliui
reHa</ax/td>
< t d x a h r e f = l i n k 3 . 11><//>
< t . d x a h r e f = l i n k 4 . h t m l apca</a></td>
</tr>
</table>
</body>
</html>


.
(. 11.2).

, 1
1

<-
\ 3

. 11.2.

hover, . background.
, .
, ,
display: block.
, . ,
. , padding
TD ( 11.2).
! 11.2.
<html>
<head>
<style

type="text/css">


TABLE.menu {
background: #ccc;
width: 100%;
border: lpx solid black;
text-align: center
.menu TD (
border: lpx solid white
.menu A {
display: block;
padding: 4px;
width: 100%

311
/*
/*
/*
/*

*/
*/
*/
*/

*/

/* */
/* */
/* Internet Explorer,
Netscape Firefox */

}
.menu A:hover {
background: #fcO

/* */

</style>
</head>
<body>
<table align=center cellspacing=0 class=menu>
<tr>
<td><a href linkl. html>4e6ypaiiiKa</a></td>
< t d x a href link2.html>KpoKOflnn reHa</a></td>
< t d x a href link3. html>nianoKjraK</ax/td>
< t d x a href link4.html>Kpbica JIapiica</ax/td>
</tr>
</table>
</body>
</html>
. ,
Internet Explorer display. width: %, .
Internet Explorer .
. width
100 % Netscape
Firefox. .

312

11

.
1. width . ,
Internet Explorer, , (.
. 11.2). Internet Explorer
.
2. width 97 %. Netscape Firefox
, a Internet Explorer Opera
.
3. padding . Netscape
- .
4.
. , . 11.3 , . ,
11.2.
11.3.
<style type="text/css">
TABLE.menu {
background: #ccc;
border: lpx solid black;
text-align: center
}
.menu TD {
width: 150px;
border: lpx solid white
}
.menu A {
display: block;
padding: 4px;
width: 150
}
.menu A:hover {
background: #fcO
}
</style>

/* */
/* */
/* */

/* */
/* */

/* */
/* */
/* */

/* */

,
. .

313


, , .
, . ,
.

, ,
. .
, .
TABLE, align, .
, DIV ( menu)
width. margin-left
margin-right auto. , Internet Explorer,
. BODY text-align:
center. - , ,
, .

float: left item,
. float , , ,
. , ,
<br style="clear: both">.
, ,
white-space nowrap, . , , . , .
width, .
border
b o r d e r - l e f t , b o r d e r - r i g h t , b o r d e r - t o p b o r d e r - b o t t o m ( 1 1 . 4 ) .
! 11.4.
<html>
<head>

314

11

<style type="text/css">
BODY {
text-align: center /* - */
}
.menu {
width: 90%;
/* */
margin-left: auto; /* Opera Netscape */
margin-right: auto; /* Opera Netscape */
white-space: nowrap
/* */
}
. item {
float: left;
/* */
width: 24%;
/* */
background: #ccc;
/* */
border-left: lpx solid black
/* */
}
. item A {
display: block;
/* */
padding: 7px
/* */
}
.item A:hover (
background: #fcO
/* */
}
</style>
</head>
<body>
<div class=menu>
<div class=itemxa href=linkl.htm>4e6ypaniKa</a></div>
<div class=itemxa href=link2.htm>KpoKOflrai reHa</ax/div>
<div class=item><a href=link3.htm>IIIanoKnHK</a></div>
<div class=item style="border-right: lpx solid black"><a
href=link4 . Jlapnca</ax/div>
<br s t y l e = " c l e a r : both">
. . .
</body>
</html>

, , . 11.3.
, , . ,
, 24 %, 25 %,
, (100 %) -

315

. , 100 %, 90 %,
.
. menu
width: 90%, , .
item menu .
100 %
.

.!

.:

: ,

<# .^rpspji >1

(J ) " [ ' ^

.1

;'?' djf ^

. ^ <3
t

Q | g j

Aflpeci

1^^^^^

-,-->- ,1

...
. 11.3. ,

- width. , Netscape
Firefox , border. 100 %,
, ,
.
, 24 %.

.


,
, ,
. -,
, . . 11.4
.
. -, . , , -

316

11

, , ,
. 11.5.

:|

HTML, CSS

,
. 11.4.

MS

*- - -

Uw& ! b:\ibr-j\-

t^f ^

;_i - i^f *

. 11.5. ,

.
, ,
.
:
, open, , close, .
border. ,
. borderright: none. border-collapse
collapse, TABLE.
( open)
. TD,

( 11.5).
\ 11.5.
<html>
<head>
<style type="text/css">

317

.open {
border: lpx solid black;
border-right: none;
border-bottom: none;
text-align: center;
font-weight: bold

/*
/*
/*
/*
/*

*/
*/
*/
*/
*/

.close {
border: lpx solid black;
background: #cfd6d4;
border-right: none;
text-align: center

/*
/*
/*
/*

*/
*/
*/
*/

</style>
</head>
<body>
<table width=100% cellspacing=O cellpadding=4>
<tr>
<td width=10 align=center style="border-bottom: lpx solid 4>
black">&nbsp;</td>
<td width=25% class=open>4e6ypamKa</td>
<td width=25% class=close><a href=link2 . TeHa</a></td>
<td width=25% class=close><a href=link3.hml>nianoioiHK</a></td>
<td width=25% class=close><a href=link4 .1 Jlapnca</ax/td>
<td width=10 align=center style="border-left: lpx solid black; 'b
border-bottom: lpx solid black">&nbsp;</td>
</tr>
</table>
</body>
</html>

, . , .
, .
, tabs ( ), ,
. ,
SPAN DIV d i s p l a y : i n l i n e .

DIV ,
. inline
display , DIV .
,

11

318

tabs. ,
, , - ( 11.6).
,
border-right.
,
. , style.

' " "

" "

- -

11.6.
<html>
<head>
<style type="text/css">
.tabs {
border-bottom: lpx solid black;
/* */
padding-bottom: lpx;
/* Internet Explorer
*/
padding-bottom: Opx;
/* Firefox */
padding-left: 20px
/* */
}
.tabs DIV {
padding: 2px 15px lpx;
/* ,
*/
border: lpx solid black;
/* */
border-right: none;
/* */
bac kg round: # fd 6d4;
/* */
display: inline
/*
*/

.tabs .open (
border-right: none;
border-bottom: lpx solid white;
background: white

/* */
/* */
/* *'/

</style>
</head>
<body>
<div class=tabs>
<div><a href=linkl.hml>4e6ypaiiiKa</a></div> 4>
<div class=open>KpoKOflnn TeHa</div> 4>
< d i v x a href=link3.hml>IIIanoKn4K</a></div> 4>
<div s t y l e = " b o r d e r - r i g h t : lpx s o l i d b l a c k " > < a h r e f = l i n k 4 . 1
apca</a></div>

</body>
</html>
. SPAN DIV,
display: inline, .
,
,
.
, . ,
.
:
<dlv style="border: 2px solid red">
<span style="border: 2px solid black; padding: Opx">Lorem ipsum dolor
sit amet...</span>
Internet Explorer Opera , . Netscape Firefox ,
. , padding: lpx
SPAN.
.
,
, . 11.6.

. 11.6. , :
Internet Explorer Opera; Netscape Firefox

, . 11.6, , . 11.6, .
.
, "" , -

320

11

. ,
, (. 11.7).
ii'A - tiwillij
|

//

;J ; 'J'.1

[j

. 11.7.

,
( open), . ,
DIV ,
.
, ( 11.7).
11.7.
<html>
<title>TeKCTOBbie BKnaflKH</title>
<head>
<style type="text/css">
.tabs {
border-top: lpx solid black;
padding-left: 20px
.tabs DIV (
padding: Opx 15px 3px;
border: lpx solid black;
border-right: none;
display: inline

.tabs .open {
border-right: none;
border-top: lpx solid #cfd6d4;
background: #cfd6d4

/* */
/*

/* ,
*/
/* */
/* */
/*
*/

/* */
/* */
/* */


</style>
</head>
<body>
<div s t y l e = " b a c k g r o u n d :
<div c l a s s = t a b s >

'

#cfd6d4; h e i g h t :

321

10px"X/div>

<div><a href=linkl.hml>4e6ypamKa</a></div>

4>

<div ^ TeHa</div> 4j>


<div><a href=link3.hml>manoKnaK</a></div> ^
<div s t y l e = " b o r d e r - r i g h t : l p x s o l i d b l a c k " X a h r e f = l i n k 4 .1
JIapMca</ax/div>

</body>
</html>
, ,
.



,
.
, , ,
.


, .
(. 11.8, ) ,
(. 11.8, ) .
.

. 11.8. : ;
,

,
, , rollover
(. .9).
II , I00I

322

11

i>

[3

'V Hjj1 ^ ! )' ^>

i j

1' ^

'1

. 11.9.

. , .
- menu ,
. , height, ,
40 .
padding,
border-bottom.
,
, ,
. . ,
, , font-size.
.
, . .menu DIV , DIV,
menu.
( 11,8).
float ,
.
(width) (height) , . margin-right ,
background , , , .
, . 11.8 , greentab.jpg .
. .menu , menu.
, , - . padding

323

, . , 100 %,
, ,
. , .
hover.
,
. ,
background.
orangetab.jpg . 11.8, .
11.8.
<html>
<head>
<style type="text/css">
.menu {
height: 40px;
/* */
padding: Opx 20px;
/* */
border-bottom: 4px solid black; /* */
font-family: Arial, sans-serif; /* */
font-weight: bold;
/* */
font-size: 14px
/* */
.menu DIV {
float: left;
width: 151px;
height: 4 Opx;
margin-right: lOpx;
text-align: center;
background:
url(greentab.jpg)
no-repeat
.menu A {
display: block;
width: 100%;
height: 100%;
padding: 12px Opx
;
.menu A:hover {
background:
url(orangetab.jpg)
no-repeat

/*
/*
/*
/*
/*

*/
*/
*/
*/
*/

/* */
/* */

/* V
/* */
/* */
/* */

/* */
/* */

324

11

</style>
</head>
<body>
<div class=menu>
<div><a href=linkl. html>4e6ypainKa</ax/div>
<div><a href=link2.html>KpoKOflnn TeHa</ax/div>
<div><a href=link3. html>IIIanoicnHK</ax/div>
</body>
</htral>

, .
text-align.
. , 12 padding .

.
Opera 7 ,
, . 11.9. , .
,
.
. Opera 6 ,
. , ,
, . . . ,
. , .

, .


, 11.8, . , .
, ,
( . preload ).
, JavaScript -

325

new, image.
, ,
.
11.9 preioadimage, ,
,
, . onLoad, BODY. .
| 11.9.
<html>
<head>
<script language="JavaScript">
function newlmage(arg) {
// ,
if (document.images) {
result = new Image(); // Image
result.src = arg; //
return result; II

//
preloadFlag = false;
function preloadlmages() {
frame = new A r r a y ( ) ; // frame
/ / a r g p r e l o a d l m a g e s
arg = preloadlmages.arguments;
// ,
i f (document.images) {
//
for (i=0; i < a r g . l e n g t h ; i++)' {
// newlmage()
frame[i] = newlmage(arg[i]);
}
p r e l o a d F l a g = t r u e ; // , !

</script>
</head>

326

11

<body onLoad="preloadImages('greentab.jpg', 'orangetab.jpg')">


</body>
</html>
preioadimages,
, . ,
,
. images, preioadimages (' images/1, g i f , ' images/2 . g i f ). , newimage.
, - ""
, image
new .
newimage .
.
. , ,
. ,

. ,
, .
.
. ,
? . DIV display: none. , .
, ( 11.10).
I 11.10.
[
<html>
<body>
<div style="position: absolute; left: -200px">
<img src=orangetab.jpg width-151 height=40>

<img src=orangetab.jpg width=151 height=40x/body>


</html>

327

,
position: absolute left.
, left .



. , ?
, . 11.10.

. 11.10.

,
.
background.
: ( ),
. .8 ,
, . 11.11
green_orange.jpg; , . 11.10 , , .
11.11
<style type="text/css">
.menu DIV (
float: left;
width: 151px;
height: 40px;
margin-right: lOpx;
text-align: center;
background:
url(green_orange.jpg)
no-repeat
.menu A:hover {
background:
url(green_orange.jpg)
-151px

/*
/*
/*
/*
/*

*/
*/
*/
*/
*/

/* */
/* */

/* */
/* */

11

328

/* */
/* */

no-repeat
</style>

,
green_orange.jpg . .


, , . ,
, , .
, -.
,
, , . 5.27.


, .
,
(. 11.11). display: block
width 100 %. ,
Netscape. ,
Internet Explorer , width, a Netscape (Mozilla Firefox ) . padding, , . . 11.11 ,
.
[

--

. 11.11. :
Internet Explorer Opera; Netscape Firefox

329

. 11.11, Netscape ; , .

width, menu ( 11.12).
.

, . , -, , . , . A:hover
, .
I 11.12.
<html>
<head>
<style type="text/css">
.menu {
width: 200px;
padding: 5px;
border: lpx solid black
)

/* */
/* */
/* */

width: 97%;
padding: 2;
display: block;
border: lpx solid white;
text-decoration: none

/*
/*
/*
/*
/*

*/
*/
*/
*/
*/

}
.menu A:hover {
background: #faf3d2;
color: #800000;
border: lpx dashed #634f36

/* */
/* */
/* */

}
</style>
</head>
<body>
<div class=menu>
<div><a href=linkl . html>4e6ypaiiiKa</a></div>
<div><a href=link2.html>KpoKOm TeHa</a></div>
JivXa href=link3. html>IIIanoKnHK</a></div>

330

11

<div><a h r e f = l i n k 4 .html>Kpbica

JIapHca</ax/div>

</body>
</html>
Netscape, padding menu.


, . . ,
, .
, .
. 11.12 , .

. 11.12.


border-left border-right.
, . ,
A:hover border-left-color, .
, , borderright-color.
. 13 ,
10 .
, border-left.
, display: block width 100 %. ,
.
A:hover,
.

331

,
.
, border-bottom . , ,
border-bottom .
j 11.13.
<html>
<head>
<style type="text/css">
.menu {
w i d t h : 200px

/* */

.menu A {
display: block;
w i d t h : 100%;
p a d d i n g : 5px;
b o r d e r - l e f t : s o l i d #13694e;
b o r d e r - b o t t o m : lpx s o l i d s i l v e r ;
background: # 7 4 a l 8 e ;
color: white;
t e x t - d e c o r a t i o n : none

/*
/*
/*
/*
/*
/*
/*
/*

.menu A:hover {
b o r d e r - l e f t - c o l o r : orange;
background: # a l 8 e 7 4 ;
color: #ffffcc

/* */
/* */
/* */

*/
*/
*/
*/
*/
*/
*/
*/

</style>
</head>
<body>
<div class=menu>
<div><a href=linkl.html>4e6ypauiKa</a></div>
<div><a href=link2.html>KpoKOflnn reHa</a></div>
<div><a h r e f = l i n k 3 . html>UlanoioiHK</aX/div>
<div><a h r e f = l i n k 4 . h t m l s t y l e = " b o r d e r - b o t t o m : "> JIapnca</ax/div>
</body>
</html>

332

11

,
.


, ,
, .
,
, , .
, ,
. 11.13 , .

> j -

. 11.13.

, , .
, . 11.13,
CSS JavaScript.
: HTML, CSS JavaScript, .
- ,
, DIV SPAN ,
. ,
UL . .
UL,
. UL, ( 11.14).
j 11.14.

<>

<>
<>

<> 2.
<1>
<>

, UL .
.
UL , , UL l i s t - s t y l e : none.
,
, width
( 11.15).

display . top left.

(. . 11.13),
. Netscape
, width
, .
.
, . , . , ,
, . , -,
z-index,
. ,
, .
. , .
, brd,
. UL, Netscape

334

11

"". brd , .
, , , ,
-, . 11.13. background, . .
right center ,
.
background-image: none .

hover, , display: block.
,
, . display , .
, Internet Explorer Opera hover ,
- . . ,
over, display: block.
,
, over.
11,15.
<html>
<head>
<script language="JavaScript">
function startMenuO {
// , DOM
if (document.getElementByld) {
// menu
nav = document.getElementByld('menu');
//
for (i=0; i<nav.childNodes.length; i++) {
node = nav.childNodes[i];
// - LI,
if (node.nodeName == 'LI') {

335

II , LI over
node.onmouseover = function)) {
this.className = 'over';
}
node.onmouseout = function() {
// over
this.className = " j

</script>
<style type="text/css">
UL {
width: 18Opx;
list-style: none;
margin: Opx;
padding: Opx;
font-family: Arial, sans-serif;
font-size: llpt

/*
/*
/*
/*
/*
/*

*/
*/
*/
*/
*/
*/

UL LI .{
position: relative

/* */

LI UL {
position: absolute;
display: none;
top: Opx;
left: 179px;
z-index: 1

/*
/*
/*
/*
/*

LI A {
display: block;
width: 100%;
padding: 5px;
text-decoration: none;
background:
url(bullet.gif)
right center
no-repeat;
color: #666;
border: lpx solid #ccc;

/J
/J
/J
I"1
/'
/'

/i
I"
/'

*/
*/
*/
*/
*/

*/
*/
*/
*/
*/
*/
*/
*/
*/
*/

336

11

background-color: white;
border-bottom: none

/* */
/* */

}
LI UL LI A {
background-image: none;
/* */
z-index: 2
/* */
}
LI A:hover {
color: maroon;
/* */
background-color: ffOfOfO
/* */
}
LI:hover UL, LI.over UL {
display: block
/*
*/
}
.brd {
border-bottom: lpx solid #ccc
/* */
}
</style>
</head>
<body onLoad="startMenu()">
<! [if IE]>
<style type="text/css">
UL LI {
float: left
/* Internet Explorer
*/
}
</style>
<! [endif] >
<ul id=menu>
href=russian.html>Pycc.KaH </>
<lixa href=linkrl.html>ecpoao</a></li>
a href=linkr2.html>rycb <//>
href=linkr3.html>KpyneHHK <//>
li><a href=linkr4.html class=brd>PaKH -</></>

<lixa href=ukrainian.html>yKpanHCKaH </>


<lixa href=linkul. 1><//>
<li><a href=linku2. html> -<//>
<lixa href=linku3.html>KanycTHHK <//>

337

<lixa href=linku4 .html class=brd>noTanubi <//>

<lixa href=caucasus . </>


<lixa
<lixa
<lixa
<lixa

href=linkcl.html>Cyn-xap4o</a></li>
href=linkc2 .;1><//>
href=linkc3.html>4MXMpTMa</a></li>
href=linkc4.html class=brd>UIanirtbiK</ax/li>

<lixa href=asia.html style="background-image: none" class=brd>KyxHH


<//>
</body>
</html>
Opera 6 .
Internet Explorer , . , float: left UL LI. , ,
Netscape.

,

.
.
, ,

.
*
* HTML , Internet Explorer. , STYLE
:
* HTML UL LI {
float: left
. HTML
, . <!
>. Internet Explorer <! [if IE]>,
, Internet
Explorer; .
<! [endif]>.

338

11

BODY, TO STYLE, .

<! [if IE]>


<style type="text/css">
UL LI (
float: left
}
</style>
<![endif]>
, ,
"" , Internet Explorer.
COMMENT, .
, Internet Explorer, , , , . ,
, .
, Internet Explorer,
COMMENT ( 11.16).
, ,
.
| 11.16.
<html>
<body>
<style type="text/css">
(
DIV { background: g r e e n ; c o l o r : w h i t e ; p a d d i n g : 4px }
</style>
<comment>
<style type="text/css">
DIV { background: s i l v e r ; c o l o r : green }
</style>
</comment>
<div>Lorem ipsum d o l o r s i t a m e t . . . < / d i v >
</body>
</html>

Internet Explorer , .

339


, , (. 11.14). ,
.
, , , ,
. , , , , , , .
^ j I ;
!

i |
I -

. 11.14.

, SELECT, .
,
.

11.15, .
, ,
.
f l o a t :

l e f t ( 1 1 . 1 7 ) .

11.15 , . , ,
, ,
. 11.14. background
left center,
.
, padding-left.
.
( ) width. . , .

340

11

j 11.17. ,
<html>
<head>
<script language="JavaScript">
. 11.15
</script>
<style type="text/css">
UL {
list-style: none;
/* */
margin: Opx;
/* */
padding: Opx;
/* V
font-family: Arial, sans-serif;
/*
/* */
font-size: llpt
UL LI {
position: relative;
/* */
background: white;
/* */
float: left;
/*
*/
padding: 4px Opx;
/* */
margin-right: 4px
/* */
UL LI UL LI {
padding: Opx
/*
*/
LI UL {
position: absolute;
display: none;
width: 18Opx;
margin-top: 3px
}
* HTML LI UL (
left: Opx;
top: 21p'x

/* */
/* */
/* */
/* */
/* Internet Explorer */
/* */
/* */

LI A {
padding: ;
/* */
/* */
padding-left: 12;
/* */
text-decoration: none;
/* */
color: #666;
/* */
border: lpx solid #ccc;

341

background:
url(bullet.gif)
left center
no-repeat

/*
/*
/*
/*

LI UL LI A {
display: block;
padding: 4px;

/* */
/* */

width: 180px;
border-bottom: none;
background-image: none
}
LI A:hover {
color: white;
/
background-color: #666

*/
*/
*/
*/

/* */
/* */
/* */

* */
/* */

LI:hover UL, LI.over UL {


display: block
/*
*/
,brd (
border-bottom: lpx solid #ccc

/* */

</style>
</head>
<body onLoad="startMenu()">
id=menu>
<li><a href=russian.html>PyccKaH </1>
<lixa href=linkrl. html>Be<cTporaHOB</ax/li>
<li><a href=linkr2.html>rycb <//>
<lixa href=linkr3.html>KpyneHMK </></>
<lixa href =linkr4 .html class=brd>PaKn -<//>

<lixa href=ukrainian.html>yKpaMHCKafl </><1>


<lixa href=linkul. html>BapeHHKH</aX/li>
<lixa href=linku2.html>apoe -</></>
<lixa href=linku3.html>KanycTHHK </></11>
<lixa href=linku4.html class=brd>I1OTanubi </></11>

<lixa href=caucasus.html>KaBKa3CKaH </><1>


<lixa href=linkcl.htral>Cyn-xap4o</a></li>

342

11

< l i x a h r e f = l i n k c 2 . 1><//>
< l i x a h r e f = l i n k c 3 . ^1></></>
< l i x a h r e f = l i n k c 4 . h t m l class=brd>IUaEiirajK</ax/li>

</li>
<li><a href=asia.html style="background-image: none; padding-left:
" </></>
<br style="clear: left">
...
</body>
</html>


. UL , , UL, ,
. , ,
, .
, , , . ,

( ) padding-left.
( UL LT ) , . padding-left padding, .
Netscape .
, ,
. , . , UL.
, UL
A (...</a><ul>).


, . . ,
. Internet Explorer,
. left top 21. , .
left top , * HTML LI UL, Internet Explorer.

343


-
JavaScript.
,
. - , "" , .
.
, menu.
.
, , .
:
( ) ( ). ,
, . : verticaiPos
horizontaiPos, . ,
menu left
top. right,
( 11.18). ,
.
,
startY, .
. setTimeout slideMenu , 10 . slideMenu
(
clientHeight) ( scroiiTop).
scroiiTop , .
{ 11.18.
<html>
<head>
<script language="JavaScript">

344

11

function floatMenuO {
// ,
// - top bottom
verticalPos = "top"; //
// ,
// - left right
horizontalPos = "right"; //
startx = 10; //
startY = 50; //
function coordMenu(id) {
// id getElementByld
el = document.getElementByld(id) ;
//
el.currentPosition = function(x, ) {
if (horizontalPos "left") this.style.left = x;
else this.style.right = x;
this.style.top = y;

//
el.x = startX;
// ,
//
if (verticalPos == "top") el. = startY;
// ,
//
else el. = document.body.clientHeight - startY;
return el;
}
slideMenu = function()
{
// 20 ,
// ,
if (verticalPos == "top")
obj.y += (document.body.scrollTop + startY - obj.y)/20;
else
obj.y += (document.body.clientHeight + document.body.scrollTop startY - obj.y)/20;
//
obj.currentPositionfobj.x, obj.y);

345

II slideMenu 10
setTimeout("slideMenu()", 10);
obj = coordMenu("menu");
slideMenu();
(
</script>
<style type="text/css">
#menu {
width: 150px;
.
border: lpx solid navy;
background: #ffffee;
position: absolute
}
.title {
background: navy;
color: white;
font-family: Arial, sans-serif;
font-weight: bold;
font-size: 80%

/*
/*
/*
/*

*/
*/
*/
*/

/*
/*
/*
/*
/*

*/
*/
*/
*/
*/

.content A {
border-bottom: lpx solid silver; /* */
padding-bottom: 4px;
/* */
display: block
/* */
.title, .content {
padding: 4px

/* */

</style>
</head>
<body onLoad="floatMenu()">
<div id=menu>
<div class=title>HaBnrauMH no canTy</div>
<div class=content>
<a href=linkl.html>floMon</a>
<a href=link2.html>CTaTbM</a>
<a href=link3.html>OopyM</a>
<a href=link4 .1></>

< ! >
<table height=1000>

346

11

<tr><td>&nbsp; </tdx/tr>
</table>
</body>
</html>
, .
.

CSS
- : , ,
HTML , CSS.
CSS,
.
, -, , ,
.
.

: , , , ,
.
, .
, ,
, .

CSS ,

. , , . ,
, CSS , .
-,
, ,
, .

348

Internet Explorer, Netscape (: Netscape Navigator Netscape


Communicator) Opera. Mozilla Firefox
, , Netscape 6, Gecko, , , Netscape 6 7,
. Firefox 1.0 CSS,
Netscape 7, a Mozilla ,
Netscape 6 Netscape 7.
:
;
;
, ,

, ;
,
.
, .

CSS :
{ 1: ; 1: }

, ; : , (ID).

HTML. , HTML,
. ID ,
.
CSS
.
, :
{ color: green; background: #f0f0f0 }
P { color: green ) P { background: ttfOfOfO }


, , .
, , -

CSS

349

. .

, , .
{ c o l o r : green } P { c o l o r : red }

.
, , .
CSS, , , .
.
:
( fixed | scroll) . ,
;
(border-style | | color) (/). ;
([left | center | right]) , , , ;
({,}) , , .


- , , , ,
. , , .

HaaiedoeciHue , . ,
, I, , ,
.
,
. , TABLE,
.
BODY, -.

350

. , , , . ,
,
, .

CSS -
, , "".
, . , , - . ,
, . , , .

background
Internet Explorer

Windows

Netscape Navigator

Opera

Macintosh

4.0

5.0

5.5

6.0

4.0

5.0

4.x

6.0

7.0

3.5

5.0

7.0

. , ,
. Netscape 4.x. .

background: background-attachment |I background-color I| background-image


I | backgrounds-position I I background-repeat

, , . .
,
.

CSS

351

, , .

I 1
<html>
<head>
<style type="text/css">
BODY { background: url(bg.gif) repeat fixed }
P { background: #c0cOcO; padding: 4px }
</style>
</head>
<body>
<p>Lorem ipsum dolor sit arnet, consectetuer adipiscing elit, sed diem
nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat
volutpat.</p>
</body>
</html>

Netscape 4.x .
, ,
. , , .

background-attachment

Netscape
Navigator

Opera

Macintosh

Internet Explorer
Windows

4.0

5.0

5.5

6.0

4.0

5.0

4.x

6.0

7.0

3.5

5.0

7.0

352

background-attachment , .
.

background-attachment: fixed | scroll

fixed ,
scroll .


scroll

, , .

( 2
<html>
<head>
<style type="text/css">
BODY {
background-image: url(bg.gif);
background-attachment: fixed
}
</style>
</head>
<body>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem
nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat
volutpat.
</body>
</html>

CSS

353
^)

, Internet Explorer
BODY.

background-color

Internet Explorer
Windows

4.0

5.0

5.5

Netscape Navigator

Opera

5.0

4.x

6.0

7.0

3.5

5.0

7.0

Macintosh
6.0

4.0

.
- ,
, .

b a c k g r o u n d - c o l o r :

,
RGB (. color). ,
transparent, .


transparent

, , .

|
<html>
<head>
<style type="text/css">
BODY { background-color: #3366cc }
P { background-color: yellow }
12 3 1001

354

SPAN { background-color: #98560f; color: white }


.select { background-color: rgb(249, 231, 16) }
</style>
</head>
<body>
<p><span>Lorem ipsum dolor sit amet</span>, consectetuer adipiscing elit,
sed diem nonummy nibh euismod tincidunt ut lacreet dolore <span
class=select>magna aliguam erat volutpat.</span></p>
</body>
</html>

Netscape 4.x
, . , . 5.5
Internet Explorer transparent
.

background-image

Internet Explorer

Windows

Netscape Navigator

Opera

Macintosh

4.0

5.0

5.5

6.0

4.0

5.0

4.x

6.0

7.0

3.5

5.0

7.0

.
, , . ,
. .

background-image: url( ) I none

, url(). , .

CSS

355

, , .

4
<html>
<head>
<style type="text/ess">
BODY { background-image: url(images/bg.gif) }
</style>
</head>
<body>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem
nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat
volutpat.
</body>
</html>

.
(~

~}

Netscape 4.x ,
IMG, HR TABLE.

background-position

Netscape
Navigator

Opera

Macintosh

Internet Explorer
Windows

4.0

5.0

5.5

6.0

4.0

5.0

4.x

6.0

7.0

3.5

5.0

7.0

, background-image.

356

background-position: [ | ] | [left | center | right] ||


[top I center | bottom]

: (left, center,
right) (top, center, bottom). , .

, , .

! 5
<html>
<head>
<style type="text/css">
BODY { background-image: u r l ( m y b g . g i f ) ; b a c k g r o u n d - p o s i t i o n : r i g h t t o p
background-repeat: no-repeat }

</style>
</head>
<body>
Lorein ipsum d o l o r s i t amet, c o n s e c t e t u e r a d i p i s c i n g e l i t , sed diem
nonummy n i b h euismod t i n c i d u n t u t l a c r e e t d o l o r e magna aliguam e r a t
volutpat.
</body>
</html>

L o r e m i p s u m d o l o r sit a m e t , c o n s e c t e t u e r adipiscing elit, s e d d i e m n o n u m m y nibh


e u i s m o d tincidunt ut l a c r e e t d o l o r e m a g n a aliguam e r a t volutpat.

. 1. -

CSS

357

. 1.
, .
mybg.gif, .

background-repeat

Internet Explorer
Windows

4.0

5.0

5.5

Macintosh

Netscape
Navigator

Opera

6.0

4.0

5.0

4.x

6.0

7.0

3.5

5.0

7.0

, ,
background-image, .
, .

background-repeat: no-repeat

repeat | repeat-x I repeat-y

no-repeat ,
background-position ( ). repeat ( ), repeat-x ( ), repeat-y ( ).


repeat

, , .

358

1 6
<html>
<head>
<style type="text/css">
BODY { background-image: url(mybg.gif}; background-repeat: repeat-x }
</style>
</head>
<body>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem
nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat
volutpat.
</body>
</html>

.
(

Internet Explorer 4 .
( repeat-x) (
repeat-y). Netscape 4.x
background-position,
. , background-repeat.

border

Internet Explorer
Windows

4.0

5.0

Macintosh
5.5 6.0

4.0

Netscape
Navigator

Opera

5.0 4.x

6.0 7.0 3.5 5.0 7.0

,
. , ; , .

CSS

359_

border-top, border-bottom, border-left, border-right.

border: border-width || border-style || color

border-width .
border-style. . 2.
dotted dashed Netscape
, Internet Explorer 5.5.
color ,
CSS .

, , .

.7

'

'. '::' ::.':'/' v * ' ' ''; "


:-

<html>
<body>
<div style="border: 2px solid black; background: #fc3; padding: 10px">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem
nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat
volutpat.
</body>
</html>

.
(

Internet Explorer 4/5 border :

360

border-bottom

Internet Explorer
Windows

4.0

5.0

Macintosh
5.5

Netscape
Navigator

Opera

6.0

4.0

5.0

4.x

6.0

7.0

3.5

5.0

7.0

, . ,
; , . , border-top,
border-left border-right .

border-bottom: border-width

border-style || color

border-width .
border-style. . 2. color , CSS .

, , .

I 8
<html>
<body>
<div s t y l e = " b o r d e r - b o t t o m : 2px s o l i d b l a c k ; b o r d e r - r i g h t :
b l a c k ; background: # f c 3 ; p a d d i n g : 10px">

2px

solid

CSS

361

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem
nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat
volutpat.
</body>
</html>

Internet Explorer 4/5 .

border-bottom-color

Internet Explorer
Windows

4.0

5.0

Macintosh
5.5

6.0

4.0

5.0

Netscape
Navigator

Opera

4.x

6.0

7.0

3.5

5.0

7.0

. border-top-color, border-left-color borderright-color, , .

border-bottom-color:

,
, RGB (. color).

, , .

362

' . ".:'. .V.V /..' ;.


'
':

1 9

<html>
<body>
< style="border-bottom-color: #ccc; border-right-color: #ccc; borderstyle: solid; padding: 4px">Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Sed diem nonunmy nibh euismod tincidunt ut lacreet
dolore magna aliguam erat volutpat.</p>
</body>
</html>
. 2. .

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed diem nonummy nibh
euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
. 2.

.
(~

}
Internet Explorer 4/5 . Opera 3.5 ,
, .

border-bottom-style

Internet Explorer

Netscape
Navigator

Opera

Windows
Macintosh

4.0
5.0 5.5 6.0 4.0 5.0 4.x 6.0 7.0 3.5 5.0 7.0
.* . . . .
' . .

CSS

363

. border-top-style, border-left-style border-rightstyle.

b o r d e r - b o t t o m - s t y l e :


border-style. . 2.

, , .

<html>
<head>
<style type="text/css">
A { b o r d e r - s t y l e : o u t s e t ; background: #fcO;
b o r d e r - t o p - c o l o r : # f f e a 9 5 ; b o r d e r - l e f t - c o l o r : #ffea95 }
A:hover { b o r d e r - s t y l e : i n s e t ; b o r d e r - b o t t o m - c o l o r : # f f e a 9 5 ;
b o r d e r - r i g h t - c o l o r : #ffea95 }
</style>
</head>
<body>
<a h r e f = l i n k . h t m l > L o r e m ipsum d o l o r s i t amet</a>
</body>
</html>

. . , outset. hover
inset. .

364

'

121! rJi'=

! Loremipsum dolor sit ametj

'Lorem ipsum doloi^it amet

. .

border-bottom-width

Internet Explorer

Macintosh

Windows

4.0

5.0

5.5 6.0

4.0

5.0

Netscape
Navigator

Opera

4.x

6.0 7.0 3.5 5.0 7.0

.
border-top-width, borderleft-width border-right-width border-width.

border-bottom-width: thin | medium I thick |

thin (2 ), medium (4 ) thick (6 ) . .


medium

, , .

CSS

365

i 11
<html>
<body>
<hl style="border-color: silver; border-style: double; border-bottom-width:
7px; border-right-width: 7px">Lorem ipsum dolor sit amet</hl>
</body>
</html>

. 4. double 2 , .

rt'teilitj

r i m y /

L o r e i n

":

d o l o r

s i t

m e t

. 4.

.
(~

b o r d e r - s t y l e ,
Netscape 4.x .
. Internet Explorer 4/5 , .

border-collapse

Internet Explorer

Macintosh

Windows

Netscape
Navigator

Opera

4.0

5.0

5.5

6.0

4.0

5.0

4.x

6.0

7.0

3.5

5.0

7.0

366

, . ,
. collapse
. , .
, .

border-collapse: collapse | separate

collapse ;
separate ,
.


separate

, , .

!'12

' '

' : : -: '

..,'.-.' '
,
.' ;.:

<html>
<head>
<style type="text/css">
TABLE { width: ; border: 4px double black;
border-collapse: collapse }
TH { text-align: left; background: #ccc; padding: 5px;
border: lpx solid black }
TD { padding: 5px; border: lpx solid black }
</style>
</head>
<body>
<table cellspacing=O>
<trxth>CTpyHa</thxth>HoTa</thx/tr>
<trXtd>K/tdxtd>D</tdx/tr>
<trxtd>2</tdxtd>G</td></tr>

''''

"' '

CSS

367

<tr><td>3</tdxtd>C</tdx/tr>
</table>
</body>
</html>

. 5. ,
.
.

'

. 5. b o r d e r - c o l l a p s e

TABLE.

Opera .
, , .

border-color

Windows

Netscape
Navigator

Internet Explorer
Macintosh

Opera

4.0

5.0

5.5

6.0

4.0

5.0

4.x

6.0

7.0


3.5

5.0

7.0

* . .

.
.

368

border-color: color {1,4}

, , ,
. . .
1. border-color

, ,

, ,

, , .

! 13
<html>
<head>
<style type="text/css">
P { border-color: red rgb{0,0,255) red; border-style: dashed;
border-width: thin; padding: 4px }
DIV { border-color: #008a77 #008a77 #00b9a0 #00b9a0; border-style:
solid; padding: 3px }
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>

CSS

369

<div>Sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna


aliguam erat volutpat.</div>
</body>
</html>

Netscape 4.x Opera 3.6 , b o r d e r - c o l o r : red green blue


orange. Internet Explorer 4/5
.

border-style
Internet Explorer

Windows

Macintosh

Netscape
Navigator

Opera

4.0

5.0

5.5 6.0

4.0

5.0

4.x

6.0 7.0 3.5 5.0 7.0

* . .

. Netscape 4
, .

.

border-style:


border-style. , . 2.
, , ,
.
. .

370

2.

Windows

4.0

5.0

[[dashed U

Macintosh

5.5

6.0

4.0

5.0

Opera

4.x

3.5

6.0

7.0
+

dotted

5.0

7.0

double |
groove i
!

Netscape
Navigator

Internet Explorer

inset

Qutset

*
+

ridge
Q O H T ]

, ,
.

. border-style

, ,

, ,

CSS

371

, , .

= 1 4

''':

.:-' .:' " -'% .. \;:.:.,:, . ^

"' : ^ . ^ "' ."

'

<html>
<head>
<style
P
2px;

type="text/css">

border-style:
padding:

5px

solid

double

double

solid;

border-width:

2px

5px

5px

</style>
</head>
<body>
<p>Lorem
nonuinmy

ipsum
n i b h

dolor

euismod

sit

amet,

tincidunt

consectetuer
ut

lacreet

adipiscing

dolore

m a g n a

elit,

sed

aliguam

d i e m

erat

volutpat.</p>
</body>
</html>

.
(

Internet Explorer
. b o r d e r - s t y l e : double
b o r d e r - w i d t h : t h i n , . Opera 3.5 , ,
.

border-width

Internet Explorer
Windows

Macintosh

Netscape Navigator

Opera

4.0

5.0

5.5

6.0

4.0

5.0

4.x

6.0

7.0

3.5

5.0

7.0

.
.

372

border-width: thin | medium | thick I

thin (2 ), medium (4 ) thick (6 ) .


. , , , .
. 4.
4.
border-width

, ,

, ,


medium

, , .

! 15
<html>
<head>
<style type="text/css">
P { border-style: double; border-width: 3px 7px 7px 4px; padding: 7px }
</style>
</head>
<body>

CSS

373

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem
nonuirany nibh euismod tincidunt ut lacreet dolore magna aliguam erat
volutpat.</p>
</body>
</html>

.
~

b o r d e r - s t y l e ,
Netscape 4.x .
. Internet Explorer 4/5
, .

bottom

Netscape
Navigator

Opera

Internet Explorer

Windows

4.0

Macintosh

55

4.0

5.0

4.x

RD

7.0

3.5

50

7.0


.
position, relative ( ) absolute ( ).

(. 6),
(. 7).

bottom: | | auto

,
CSS, (), (in), (pt) .
bottom ,

374

1 BOTTOM

. 6. b o t t o m

, 7. b o t t o m

. . auto .


auto

, , .

I 16
.
<html>
<body>
<p>Duis te feugifacilisi.</p>
<div style="bottom: 20px; position: absolute; width: 90%; background:
ttfOfOfO; padding: ; border: solid lpx biack">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem
nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat
volutpat.
</body>
</html>

. 8. , .

375

CSS

,-,*

Duis te feugifacilisi.

L o r e m i p s u m d o l o r sit a m e t , c o n s e c t e t u e r adipiscing elit, s e d d i e m n o n u m m y


n i b h e u i s m o d tincidunt u t l a c r e e t d o l o r e m a g n a aliguam e r a t volutpat.

. 8. -

clear

Internet Explorer
Windows

4.0

Macintosh

5.0 5.5 6.0

4.0

5.0

Netscape
Navigator

Opera

4.x

6.0 7.0

3.5

5.0 7.0

, .
float, clear .

clear: both I left I none

right

both
. , , ;
left .

;
right ;

376

none , , float .

, , .

17

<html>
<body>
<div styie="float: left; background: #fdO; border: solid lpx black;
padding: lOpx; width: 40%">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem
nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat
volutpat.
<div style="clear: left">
Duis autem dolor in hendrerit in vulputate velit esse molestie consequat,
vel ilium dolore eu feugiat nulla facilisis.
</body>
</html>

.
)

c l e a r ,
f l o a t .

clip

Internet Explorer
Windows

Macintosh

Netscape
Navigator

Opera

4.0

5.0

5.5

6.0

4.0

5.0

4.x

6.0

7.0

3.5

5.0

7.0

CSS

377

clip ,
. , ,
. . . clip
.

clip: rect( ) | auto


. , auto.


auto

, , .

18

<html>
<body>
<div style="position: absolute; clip: rect(20px auto auto 20px); width:
; color: white; background: #7f4c3e">
<b>P.Jl. </><>
,<br>
.<br>
<>
.
</body>
</html>

. 9. 20
.

378

. 9. c l i p

.
(

^
Opera ,
. , .

color

Internet Explorer
Windows

Macintosh

Netscape Navigator

Opera

4.0

5.0

5.5

6.0

4.0

5.0

4.x

6.0

7.0

3.5

5.0

7.0

color:

.
.
.
.
.
-

CSS

379_

, , 16. : ,
1, 2, 3, 4, 5, 6, 7, 8, 9, , , , D, E, F. 10 15 . 15 . , 255 FF . ,
#,
#666999. ,
00 FF. , #rrggbb,
, , . #rgb,
. , #feO #ffeeOO.
RGB.
, ,
. 0 255.
. rgb(),
.


black

, , .

<html>
<body>
<p><span style="color: red">L</span>orem ipsum dolor sit amet,
consectetuer adipiscing elit, sed diem nonumray nibh euismod tincidunt ut
lacteet dolore magna aliguam erat volutpat.</p>
<p style="color: rgb(49, 151, 116)"Xspan style="color: #fOO">Ut</span>
wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper
suscipit lobortis nisi ut aliquip ex ea commodo consequat.</p>
</body>
</html>

380

Netscape 4.x ,
HR,

cursor

Netscape
Navigator

Opera

Macintosh

Internet Explorer
Windows

4.0

5.0

5S

60

4.0

5.0

4.x

60

70

3.5

5.0

70

, .
.
, , .
, , , , , . , .

cursor: auto | crosshair | default I e-resize | help I move I n-resize I


ne-resize I nw-resize | pointer | s-resize | se-resize | sw-resize | text
| w-resize | wait || 1(' ')

auto ;
uri ,
,
CUR ANI. Internet
Explorer 6.
. 5.

CSS

381
/75.

I
I
t
4

default

cursor:default

crosshair

cursor:crosshair

pointer

cursor:pointer

move

cursor:move

text

cursor:text

wait

cursor:wait

help

cursor:help

n-resize

cursor:n-resize

ne-resize

cursor:ne-resize

e-resize

cursor:e-resize

se-resize

cursor:se-resize

s-resize

cursor:s-resize

sw-resize

cursor:sw-resize

w-resize

cursor:w-resize

nw-resize

cursor:nw-resize


auto

, , .

I 20
<html>
<head>
<style type="text/css">
.cross { cursor: crosshair }
.help { cursor: help }

382

</style>
</head>
<body>

<span class="cross">Ha
.</span>
<br>
< href="helpl.htm" class=help>CnPABKA 1 </a><br>
<a href="help2.htm" class=help>CnPABKA 2</a>
</body>
</html>

display
Windows

4.0

Netscape
Navigator

Internet Explorer

5.0

5.5

6.0

Opera

Macintosh

4.0

4.x

5.0

6.0

7.0


3.5

5.0

7.0

.* . . . . . . . . .

* . .

, , .
visible , display ,
.
display , , .

CSS1:
display: block

inline I list-item I none

CSS2:
display: block I compact I inline I inline-table I list-item I none |
run-in I table I table-caption | table-cell | table-column-group I tablefooter-group | table-header-group | table-row | table-row-group

CSS

383

,
block, inline list-item. none
.
block .
, SPAN,
;
inline .
, DIV , . inline ,
, ;
list-item ;
.
, - ,
.
, .

.


inline

, , .

21
<html>
<head>
<style type="text/css">
ttmenu (
background: #fcO; border: lpx solid black; padding: 2px; width: lOOpx }
#submenu {
background: #ccc; position: relative; padding: 2px;
width: lOOpx; display: none }
</style>

384

<script language="JavaScript">
function hideLayer() (
document.getElementByld("submenu").style.display = "none";
}
function showLayer() {
document.getElementByld("submenu").style.display = "block";
)
</script>
</head>
<body>
<div id=menu><a href=list.html onMouseOver="showLayer()"
onMouseOut="hideLayer () ">Lorem</ax/div>
<div id=submenu>Lorem ipsum dolor sit amet...</div>
</body>
</html>

.
)

, ,
block, i n l i n e , l i s t - i t e m .
.

float

Internet Explorer

Macintosh

Windows
4.0

5.0

5.5

6.0

4.0

5.0

Netscape
Navigator

Opera

4.x

6.0

7.0 3.5 5.0 7.0

, , . float , ,
,
.

CSS

385

float: left I right | none

left ,
;
right , ;
.

, , .

22
<html>
<body>
<div s t y l e = " f l o a t : l e f t ; b a c k g r o u n d :
p a d d i n g : l O p x ; w i d t h : 40%">

# f c O ; b o r d e r : s o l i d lpx b l a c k ;

L o r e m i p s u m d o l o r sit a m e t , c o n s e c t e t u e r a d i p i s c i n g e l i t , sed d i e m
nonuramy n i b h e u i s m o d t i n c i d u n t ut l a c r e e t d o l o r e m a g n a a l i g u a m erat
volutpat.
<div s t y l e = " m a r g i n - l e f t :

2 0 p x ; float: l e f t ; w i d t h :

50%">

Duis a u t e m d o l o r in h e n d r e r i t in v u l p u t a t e v e l i t esse m o l e s t i e
v e l i l i u m d o l o r e e u feugiat n u l l a f a c i l i s i s .

consequat,

</body>
</html>

. .
width. .
margin-left.

.
13 100!

386

Internet Explorer 4/5 Netscape 4.x -


f l o a t , . Internet Explorer IMG
, Netscape , f l o a t
DIV, . , Internet Explorer 5
f l o a t ,
Netscape 4.x f l o a t , .


Duis autem dolor in hendrerit in vulputate

L o r e m ipsum dolor sit amet,

relit esse rnolestie consequat, vel ilium

consectetuer adipiscing elit, sed

dolore eu feugiat nulla facilisis.

diem notiutnmy nibh euismod


tincidunt ut lacreet dolore magna
aliguam erat volutpat.

. 10. f l o a t

font

Internet Explorer

Netscape
Navigator

Opera

Windows

Macintosh

4.0

5.0

5.5

6.0

4.0

5.0

4.x

6.0

7.0

3.5

5.0

7.0

| font
. , , .

CSS1:
font: font-style | | font-variant I I font-weight | | font-size I I
line-height || font-family

CSS2:
font: caption I | icon | I menu | I messagebox | | smallcaption I I status

CSS

387

, ,
. .
, .
.

, , .

I 23

<html>
<body>
<div style="font: 12pt sans-serif">
<hl style="font: 200% serif">Duis t e feugifacilisi</hl>
Duis autem dolor in hendrerit in vulputate v e l i t esse molestie consequat,
vel ilium dolore eu feugiat nulla f a c i l i s i s .
</body>
</html>
. 1.11. HI , 12 ,
100 % .

D u i s

&<

t e

f e u g i f a c i l i s i

D u i s a u t e m d o l o r in hendrerit in vulputate velit e s s e m o l e s t i e c o n s e q u a t ,


vel ilium d o l o r e eu f e u g i a t nulla f a c i l i s i s .

. 11.

388

^)

CSS2
, .
. .

font-family

Netscape
Navigator

Opera

Internet Explorer
Windows

Macintosh

4.0

5.0

5.5

6.0

4.0

5.0

4.x

6.0

7.0

3.5

5.0

7.0

, . , .
, Trebuchet MS, .
,
. ,
.
, . , , serif, sans-serif, cursive,
fantasy monospace. ,
,
.

font-family: [, [, ...]]

, .
:

CSS

389

serif (), Times;


sans-serif ( ), Arial;
cursive ;
fantasy ;
monospace ,
.


, . Times New
Roman.

, , .

24
<html>
<body>
<hl style="font-family: Verdana, Arial, Helvetica, sans-serif">Duis te
feugifacilisi</hl>
<p style="font-family: 'Times New Roman', Times, serif">Lorem ipsum dolor
sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod
tincidunt ut lacreet dolore magna aliguam erat volutpat.</p>
</body>
</html>

font-size

Internet Explorer
Windows

Macintosh

Netscape
Navigator

Opera

4.0

5.0

5.5

6.0

4.0

5.0

4.x

6.0

7.0

3.5

5.0

7.0

390

. . (xx-small, x-small, small, medium,


large, x-iarge, xx-iarge) , .
, ,
.
(larger, smaller) . ,
,
.
.
.

font-size: | | |

:
xx-small | x-small | small | medium | large | x-large | xx-large.
l a r g e r smaller.

CSS: em ( ), ( ), (pt), (),


(%) . 100 % .


medium BODY;
.

, , .

!25
<html>
<body>
<hl style="font-size: 200%">Duis te feugifacilisi</hl>
<p style="font-si2e: 12pt">Lorem ipsum dolor sit amet, consectetuer
adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet
dolore magna aliguam erat volutpat.</p>

CSS

391

</body>
</html>

small Internet
Explorer 4/5 , , medium. f o n t - s i z e :
medium Internet Explorer
Netscape, CSS
.

font-style
Internet Explorer

Macintosh

Windows

Netscape Navigator

Opera

4.0

5.0

5.5

6.0

4.0

5.0

4.x

6.0

7.0

3.5

5.0

7.0

, .
,
.
,
. , .
.
, ,
.

font-style: normal | italic I oblique

normal ;

i t a l i c ;
oblique .

392

, , .

."
1...1, ......-........"-......

.^,...

,..........,.,,.

! 26
<html>
<body>
<hl>Duis te feugifacilisi</hl>
<p style="font-style: italic">Lorem ipsum dolor sit amet, consectetuer
adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet
dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis
nostrud exerci tution ullamcorper suscipit lobortis nisi ut aliquip ex ea
commodo consequat.</p>
</body>
</html>

oblique Netscape 4. Internet Explorer


i t a l i c oblique .

font-variant

Internet Explorer
Windows

Macintosh

Netscape
Navigator

Opera

4.0

5.0

5.5

6.0

4.0

5.0

4.x

6.0

7.0

3.5

5.0

7.0

, , .

CSS

393

font-variant: normal | small-caps

normal , .
small-caps
().


normal

, , .

! 27
<html>
<body>
<hl style="font-variant: small-caps">Duis Feugifacilisi</hl>
<p>Lorem ipsum dolor sit amet, Consectetuer adipiscing elit, sed diem
nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat
volutpat. </p>
</body>
</html>

. 12. , .

'

Duis FEUGIFACILISI
Lorem p
isum dolor sit amet, Consectetuer adipiscing elit, sed deim nonummy nb
ih
eusimod tincidunt ut lacreet dolore magna agiluam erat volutpat.
. 12. f o n t - v a r i a n t

394

Internet Explorer 6.0 small-caps


,
.

font-weight

Netscape
Navigator

Opera

Macintosh

Internet Explorer
Windows

4.0

50

55

60

4.0

5.0

4.x

6.0

7.0

50

7.0

. 100
900 100. ,
, 100, 900.
( ) 400, 700. (bolder
lighter) .

font-weight: bold I bolder I lighter | normal I 100 | 200 | 300 | 400


500 | 600 | 700 | 800 | 900

: bold , bolder ; lighter , normal . 100 900.


normal

, , .

CSS

395

28
<html>
<body>
<hl style="font-weight: normal">Duis te feugifacilisi.</hl>
<span style="font-weight: 600">Lorem ipsum dolor sit amet</span>,
consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut
lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim
veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisi ut
aliquip ex ea commodo consequat.
</body>
</html>

, .

height

Internet Explorer
Windows

Macintosh

Netscape
Navigator

Opera

4.0

5.0

5.5

6.0

4.0

5.0

4.x

6.0

7.0

3.5

5.0 1 7.0

.*

* . .

( , , IMG). , .
- .
, Internet Explorer Opera height
. Netscape ( Mozilla Firefox)
, . -

396

, HTML .
, overflow: auto .

height: I | auto

,
CSS, (), (in), (pt) .
. ,
. auto .


auto

, , .

" " "

'

;29

"

..,.;.....,....

-;

:.

...............

......

...

<html>
<body>
<div style="height: 50px; background: #fcO; padding: 7px; border: Ipx
solid #ccc">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem
nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat
volutpat.

</body>
</html>

, ,
.
(

Internet Explorer 4 height , , . Opera 3.5


, .

39/

CSS

left

Internet Explorer
Windows

Macintosh

Netscape Navigator

Opera

4.0

5.0

5.5

6.0

4.0

5.0

4.x

6.0

7.0

3.5

5.0

7.0


, , (. 13). position. absolute,
. relative, left
.
LEFT

. 13. l e f t

left: I | auto

,
CSS, (), (in), (pt) . left , .

. auto .

398


auto

, , .

!
<html>
<body>
<div s t y l e = " p o s i t i o n : absolute; l e f t : 20px; background: #fcO; margin:
7px">
<div s t y l e = " p o s i t i o n : r e l a t i v e ; l e f t : -lOpx; border: lpx solid black;
padding: lOpx; margin: 7px">
Lorem ipsum dolor s i t amet, consectetuer adipiscing e l i t , sed diem
nonummy nibh euismod tincidur.t ut l a c r e e t dolore magna aliguam e r a t
volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci t u t i o n
ullamcorper s u s c i p i t l o b o r t i s n i s i ut aliquip ex ea commodo consequat.

</body>
</html>

. 14. , 20
. 10
, .
.

L o r e m ipsum dolor sit amet, consectetuer adipiscing elit, sed diem


nonummy nibh euismod fcbcidunt ut lacreet dolore magna aliguam erat
volutpat. U t wisis enim ad minim veniam, quis nostrud exerci tution
ullamcorper suscipit lobortis nislut aliquip ex ea c o m m o d o consequat.

. 14.

399

CSS

Netscape 4.x auto.

letter-spacing
Netscape
Navigator

Opera

Macintosh

Internet Explorer

Windows

4.0

5.0

5.5

6.0

4.0

5.0

4.x

6.0

7.0

3.5

5.0

7.0

.

, .
. , ,
.

letter-spacing: | normal

,
CSS, (), (in), (pt) .
, (em ). normal
.


normal

, , .

400

| 31

<html>
<body>
Duis te feugifacilisi.
<div style="letter-spacing: 3px">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem
nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat
volutpat.
</body>
</html>

. 15.
, ""
3 .

*,,

Duis te feugifacilisi.
Lorem
sed

ipsum

diem

dolore

dolor

nonummy

magna

sit

amet,

nibh

aliguam

consectetuer

euismod

erat

tincidunt

adipiscing
ut

elit,

lacreet

volutpat.

. 15.

line-height
Netscape
Navigator

Opera

Macintosh

Internet Explorer

Windows

4.0

5.0

5.5

6.0

4.0

5.0

4.x

6.0

7.0

3.5

5.0

7.0

CSS

401_

; .
. .

line-height: normal | | |

normal
.
. , 1,5
.
, CSS, (),
(in), (pt) . ,
100 % .


normal

, , .
32
<html>
<body>
<div style="line-height: 1.5">
<hl style="line-height: 50%">Duis te<br><span style="color:
olive">feugifacilisi</spanx/hl>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem
nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat
volutpat.
</body>
</html>

. 16 . HI
50 %, - . , ,

402

. .

D u i s . t e
... .
f e u g i f a c i l i s i
Lorem ipsum dolor sit amet, consectetuer adipiscing eft, sed diem nonummy nibh
euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
. .16.

list-style
.

Netscape
Navigator

Opera

Macintosh

Internet Explorer

Windows

4.0

50

55

R0

4.0

5.0

4.x

60

7.0

3.5

7.0

, , ,
, .

l i s t - s t y l e - t y p e , l i s t - s t y l e - p o s i t i o n l i s t - s t y l e - i m a g e

list-style: list-style-type I| list-style-position |I list-style-image

, , . .
, .

403

CSS

, , .

! :
<html>
<body>
<ul style="list-style: square outside">
<li>Lorem ipsum dolor sit amet</li>
<li>Consectetuer adipiscing elit</li>
<li>Sed diem nonummy nibh euismod</li>
<li>Tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis
enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit
lobortis nisi ut aliquip ex ea commodo consequat.</li>
</body>
</html>

DD, DT, LI, OL UL, ,


display: list-item.

list-style-image

Netscape
Navigator

Opera

Macintosh

Internet Explorer
Windows

4.0

5.0

5.5

6.0

4.0

5.0

4.x

6.0

7.0

3.5

5.0

7.0

, . , .
GIF.

404

list-style-image:

none I 1 ( ' ')


. .

, , .

34
<html>
<body>
<ul style="list-style-image:
url(/images/check.gif)">
<li>Lorem ipsum dolor sit amet</li>
<li>Consectetuer adipiscing elit</li>
<li style="list-style-image: none">Sed diem nonummy nibh euismod</li>
<li>Tincidunt ut lacreet dolore magna aliguam erat volutpat.</li>
</body>
</html>

. 17. , , .

\
^
!

Lorern ipsum dolor sit amet

Consectetuer adipiscing eft

Se d diem nonummy nibh euismod


i Tincidunt ut lacreet dolore magna aliguam erat volutpat.
. 17.

CSS

405

DD, DT, LI, OL UL, ,


d i s p l a y :

list-item.

list-style-position
Internet Explorer

Windows

Macintosh

Netscape
Navigator

Opera

4.0

5.0

5.5

6.0

4.0

5.0

4.x

6.0

7.0

3.5

5.0

7.0

, .
: outside
(. 18) inside (. 19).
Lorem ipsum dolor sit amet
Tincidunt ut lacreet dolore
magna aHguam erat volutpat.

Tincidunt ut lacreet dolore

. 18.
o u t s i d e

. 19.
i n s i d e

L o r e m ipsum dolor sit amet


m a g n a aliguam erat volutpat.

list-style-position: inside I outside

list-style-position inside, . outside ,


.


outside

, , .

406

j 35

"

'

'

'

' ' :

'

'

<html>
<body>
<ul styie="list-style-position: inside">
<li>Lorem ipsum dolor sit amet</li>
<li>Consectetuer adipiscing elit</li>
<li>Sed diem nonummy nibh euismod</li>
<li>Tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis
enim ad minim veniam, quis nostrud exerci tution ullaracorper suscipit
lobortis nisi ut aliquip ex ea commodo consequat.</li>

<

<

>

>

DD, DT, LI, OL UL, ,


d i s p l a y :

list-item.

Internet Explorer 6 OL
i n s i d e l i s t - s t y l e - p o s i t i o n , 10, .

list-style-type

Internet Explorer
Windows

Macintosh

Netscape Navigator

Opera

4.0

5.0

5.5

6.0

4.0

5.0

4.x

6.0

7.0

3.5

5.0

7.0

. , list-style-image .
( UL) ( OL).

CSS

407

list-style-type: disc | circle I square | decimal | lower-roman I


upper-roman | lower-alpha I upper-alpha | none

circle, disc, square.


: decimal, lower-alpha, lower-roman, upper-alpha,
upper-roman. none
. . 6.
6.

disc

circle

square

decimal

1,2,3,...

lower-roman

i, ii, iii,...

upper-roman

I, II, III, ...

lower-alpha

a, b, c,...

upper-alpha

, , , ...


d i s c ( UL); d e c i m a l ( Ob).

, , .

36
<html>
<body>
<ul style="list-style-type: square">
<li>Lorem ipsum dolor sit amet</li>
<li>Consectetuer adipiscing elit</li>
<li>Sed diem nonummy nibh euismod</li>

408

<li>Tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis


enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit
lobortis nisi ut aliquip ex ea commodo consequat.</li>

</body>
</html>

DD, DT, LI, OL UL, ,


display: list-item.

margin padding l i s t - s t y l e - t y p e : none, Netscape 4.x .

margin

Internet Explorer
Windows

4.0

5.0

Macintosh
5.5 6.0

4.0

5.0

Netscape
Navigator

Opera

4.x

6.0 7.0 3.5 5.0 7.0

.
(. 20).
MARGIN

. 20.

409

CSS

, ,
. ,
margin BODY, (. 9).
margin
.

margin: ! auto {1,4}

, , ,
. . 7.
7.

,
,

, ,

(), (%)
CSS . , . auto ,
.

, , .

410

I 37
<html>
<head>
<style type="text/css">
BODY { margin: Opx; padding: Opx }
DIV.parent { margin: 20%; background: #fdO; padding: lOpx }
DIV.child { border: 3px solid #666; padding: lOpx; margin: lOpx }
</style>
</head>
<body>
<div class=parent>
<div class=child>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem
nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat
volutpat.

</body>
</html>

. 21.
parent 20 %,
.
margin child ,
.

'

"

- ,

J
. 21. m a r g i n

CSS

411

. margin Internet Explorer 4/5, ,


. Netscape 4.x , margin .
Opera 4 .

margin-bottom

Internet Explorer

Windows
4.0

5.0

Macintosh
5.5

6.0

4.0

5.0

Netscape
Navigator

Opera

4.x

6.0 7.0 3.5

5.0

7.0

.
margin-left, margin-right margin-top,
, .

margin-bottom: | auto

(), (%)
CSS . , . auto ,
.

, , .

412

I 38

<html>
<body>
<div style="background: #008B66; color: white; padding: lOpx;
margin-bottom: -7px">
<big>Lorem ipsum dolor s i t amet</big>
<div style="margin-left: 40px; background: #ccc; padding: 10px">
Lorem ipsum dolor s i t amet, consectetuer adipiscing e l i t , sed diem
nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat
volutpat.
</body>
</html>

. 22. margin-bottom ,
margin-left .

L o r e m i p s u m dolor sit a i n e t
L o r e m ipsum dolor sit amet, consectetuer adipiscing elit, s e d diem
nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat
.volutpat.'

. ; . ' ''.. \


. '. ' :

' .'; '' ' ' '

. 22.

overflow
Internet Explorer

Windows

Macintosh

Netscape
Navigator

Opera

4.0

5.0

5.5

6.0

4.0

5.0

4.x

6.0

7.0

3.5

6.0

7.0

CSS

413

overflow , .

overflow: auto | hidden | scroll | visible

visible ,
;
hidden ,
;
scroll ;
auto .


visible

, , .

I 39
<html>
<body>
<div style="overflow: scroll; width: ; height: 150px; border:
solid lpx black">
<h2>Duis te feugifacilisi</h2>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem
nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat
volutpat.
</body>
</html>

. 23.
.

414

Duis te

feugifacilisi

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy

. 23.

Opera 6 o v e r f l o w : s c r o l l .
Internet Explorer, Netscape Mozilla o v e r f l o w TEXTAREA .

padding

Internet Explorer

Windows
4.0

5.0

Macintosh
5.5 6.0

4.0

5.0

Netscape
Navigator

Opera

4.x

6.0 7.0 3.5 5.0 7.0

.
, (. 24).
padding
.

p a d d i n g :

I a u t o {1, 4}

CSS

415

PADDING

. 24.

, , ,
. . 8.
8.

,
,

, ,

(), (%) CSS . auto , .

, , .

416

I 40

<html>
<body>
<div style="background-color: #fc3; border: 2px solid black; padding:
20px">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem
nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat
volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution
ullamcorper suscipit lobortis nisi ut aliquip ex ea coramodo consequat.
</body>
</html>


. 3.6 padding,
, . Internet Explorer 4/5
, . Netscape 4.x , padding
.

padding-bottom

Internet Explorer

Macintosh

Windows

4.0

5.0

5.5

6.0

4.0

5.0

Netscape
Navigator

Opera

4.x

6.0

7.0

3.5

5.0

7.0

. padding-top,
padding-ieft padding-right, , .

CSS

417

padding-bottom: | auto

(), (%)
CSS . auto ,
.

, , .

41
<html>

<body>
<div style="background-color: #fc3; border: 2px solid black; padding:
lOpx; padding-bottom: 40px">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem
nonuramy nibh euismod tincidunt ut lacreet dolore magna aliguam erat
volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution
ullamcorper suscipit lobortis nisi ut aliquip ex ea commodo consequat.
</body>
</html>

position

Windows

4.0

5.0

Opera

Macintosh

5.5

6.0

4.0

4.x

5.0

6.0

7.0 3.5 5.0 7.0

.* . . . . .

. .

!4 3. 01

Netscape
Navigator

Internet Explorer

418

-.

position: absolute I fixed | relative | static

position, . 9.
9. posi

tion

absolute

, .
, ,
. l e f t , t o p ,
r i g h t b o t t o m

IE4

.
a b s o l u t e ,

l e f t , t o p , r i g h t b o t t o m
-.
Netscape, Mozilla Firefox
, .
Opera ,

NC6.1

fixed

relative

static

, , , . , .
l e f t , t o p , r i g h t b o t t o m

. l e f t , t o p , r i g h t b o t t o m

NC4
04

04

IE4
NC4
04

IE4
NC4
04

, : IE Internet Explorer; NC Netscape; 0 Opera.


, .

CSS

419_


static

, , .

i 42
i .;;...;..::....;:.;
....'
.;-. .,;.;,........: :..:.
;;
.;....
<html>
<body>
<div s t y l e = " f o n t - f a m i l y : Times, s e r i f ; f o n t - s i z e : 200%">
T<span s t y l e = " p o s i t i o n : r e l a t i v e ; t o p : 10px">E</span>X L<span
s t y l e = " p o s i t i o n : r e l a t i v e ; t o p : -5px; f o n t - s i z e : 80%">A<7span>T<span
s t y l e = " p o s i t i o n : r e l a t i v e ; t o p : 10px">E</span>X

'

</body>
</html>
. 25.
top. , .
.

rt'uzHlu

'

LATEX
. 25.

Internet Explorer4 p o s i t i o n : absolute


, . ,
,
( TD ). Netscape 4.x -

420

r e l a t i v e , , ,
, .

right

Windows

Netscape
Navigator

Opera

Macintosh

Internet Explorer

4.0

5.0

55

60

4.0

5.0

4.x

60

70

3.5

50

7.0


, , , (. 26). position. absolute,

. relative right
.
RIGHT

. 26. r i g h t

right: | I auto

,
CSS, (), (in), (pt) . -

CSS

421

right , .

. auto .


auto

, , .

43
<html>
<head>
<style type="text/css">
Heft {
position: absolute; top: 20px; left: 20px; width:lOOpx;
background: #fc3; border: lpx solid black; padding: lOpx
}
#center {
position: relative; width: auto;
margin: 230 Opx 140px
}
#right {
position: absolute; top: 20px; right: 20px; width:200px;
background: #fc3; border: lpx solid black; padding: lOpx
}
</style>
</head>
<body>
<div id=left>...
<div id=center>..
<div id=right>...
</body>
</html>

422

text-align
Internet Explorer

Windows

Macintosh

Netscape
Navigator

Opera

4.0

5.0

5.5

6.0

4.0

5.0

4.x

6.0

7.0

3.5

5.0

7.0

.
,
.

text-align: center justify I left I right

center ;

justify ,
;

left ;

right .


left

, , .

44
<html>
<body>
< style="text-align: justify"> Duis autem dolor in hendrerit in
valputate velit esse molestie consequat, vel ilium dolore eu feugiat
nulla facilisis at vero eros et accumsan et iusto odio dignissim qui
blandit praesent luptatum zzril delenit au gue duis dolore te feugat
nulla facilisi.</p>

CSS

423

</body>
</html>

Netscape 4 j u s t i f y
,
.

table-layout

Internet Explorer
Windows

Macintosh

Netscape
Navigator

Opera

4.0

5.0

5.5

6.0

4.0

5.0

4.x

6.0

7.0

3.5

5.0

7.0

, , .

table-layout: auto | fixed

auto ,
;
fixed .
COL,
. - , .


auto

424

, , .

45

<html>
<body>
< t a b l e width=700 c e l l s p a c i n g = O b o r d e r = l b o r d e r c o l o r = b l a c k s t y l e =
" t a b l e - l a y o u t : fixed">
<col width=150>
<colgroup span=5 width=50 a l i g n = c e n t e r >
<colgroup span=4 width=75 a l i g n = c e n t e r >
<tr>
<td>&nbsp;</tdxtd>1995</tdxtd>1996</tdxtd>1997</td>
<td>1998</tdxtd>1999</tdxtd>2000</tdxtd>200K/td>
<td>2002</tdxtd>2003</td>
</tr>
<tr>
<td>He<})Tb</tdxtd>5</tdxtd>7</tdxtd>2</tdxtd>8</td>
<td>3</tdxtd>34</td><td>62</tdxtd>74</td><td>57</td>
</tr>
<tr>
<td>3ooo</td><td>3</td> < t d > 6 < / t d x t d > 4 < / t d x t d > 6 < / t d >
<td>4</tdxtd>69</tdxtd>72</tdxtd>56</tdxtd>47</td>
</tr>
<tr>
<td>flepeBO</td><td>5</td><td>8</tdxtd>3</tdxtd>4</td>
<td>7</tdxtd>73</tdxtd>7 9</tdxtd>34</td><td>86</td>
</tr>
</table>
</body>
</htral>

TABLE.

CSS

425

text-indent

Internet Explorer

Windows
4.0

5.0

Macintosh
5.5 6.0

4.0

5.0

Netscape
Navigator

Opera

4.x

6.0 7.0 3.5 5.0 7.0

(
) .
,
, .

text-indent: |

,
CSS, (), (in), (pt) .

. ,
.

, , .

i 46
<html>
<body>
< style="text-indent: 2em">Lorem ipsum dolor sit ainet, consectetuer
adipiscing elit, sed diem nonummy nibh eulsmod tincidunt ut lacreet
dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis
nostrud exerci tution ullamcorper suscipit lobortis nisi ut aliquip ex ea
commodo consequat.</p>
,

426

</body>
</html>

)
t e x t - i n d e n t , ,
.

text-decoration

Internet Explorer
Windows

Macintosh

Netscape
Navigator

Opera

4.0

5.0

5.5 1 6.0

4.0

5.0

4.x

6.0

7.0

3.5

5.0

7.0

* . .

, ,
. , .

text-decoration: blink I line-through I overline I underline I none

blink ;
line-through ;
overline .
underline ;
.

CSS

427

, , .

!47
<html>
<head>
<style type="text/css">
A ( text-decoration: none }
A:hover { text-decoration: underline }
</style>
</head>
<body>
<a href=linkl.html>Lorem ipsum dolor sit amet</a>
</body>
</html>

Netscape 4.x o v e r i i n e , Internet Explorer b l i n k , ,


.

CSS, , , . , , color, , ,
. , , text-decoration: none
. Opera
Internet Explorer 5 Macintosh, . Opera 4/5 Netscape 6 SPAN
. , Netscape 6 , .
, textdecoration
.

428

text-transform

Internet Explorer
Windows

4.0

5.0 1 5.5

Macintosh

6.0

4.0 [ 5.0
| "

Netscape Navigator

Opera

4.x

6.0

7.0

^ " 1

3.5

5.0

7.0


. ,
.

text-transform: capitalize I lowercase

u p p e r c a s e |

none , - ;
capitalize ;
lowercase ( );
uppercase ( ).

, , .

!. 48
<html>
<head>
<style type="text/css">
HI ( text-transform: lowercase }
P { text-transform: capitalize }
</styie>
</head>

CSS

429

<body>
<hl>Lorem ipsum dolor sit amet</hl>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem
nonuirany nibh euismod tincidunt ut lacreet dolore magna aliguam erat
volutpat.</p>
</body>
</html>

. 27. HI
,
.

l o r e m


i p s u m

d o l o r

s i t

a m e t

Lorem Ipsum Dolor Sit Amet, Consectetuer Adipiscing Elit, Sed Diem Nonummy
Nibh Euisrnod Tincidunt Ut Lacreet Dolore Magna Aliguam Erat Volutpat.
. 27.

Netscape 4.x , , .

top

Internet Explorer
Windows

4.0

5.0

* . .

Macintosh
5.5 6.0

4.0

5.0

Netscape
Navigator

Opera

4.x

6.0 7.0

3.5

5.0 7.0

430


, , , (. 28). position. absolute,
. relative left
.

. 28. t o p

top: | | auto

,
CSS, (), (in), (pt) . top , .
. auto .


auto

, , .

! 49
; ...,,. .,.
<html>
<head>

,.;

I
........

'.

., ,

,.t...,....'........

CSS

431

<style type="text/css">
#menu ( position: absolute; left: 350px; top: 50px; width: 120px;
background: #e0e0e0; border: solid lpx black; text-align: left
}
#content { position: absolute; left: Opx; top: Opx; width: 400px;
background: #800000; color: white; text-align: left
</style>
</head>
<body>
<div id=content>...
<div id=menu>...
</body>
</html>

vertical-align

Internet Explorer

Windows
4.0

5.0

5.5

Macintosh
6.0

.* . . .

4.0

5.0

Netscape
Navigator

Opera

4.x

. . .

6.0

7.0

3.5

5.0

7.0

* . .

vertical-align: baseline I bottom | middle I sub I super I text-bottom I


text-top I top | I

vertical-align, ,
, . 10.
,
CSS .
,

432

. ,
Internet Explorer Netscape .
10.

baseline

.
,

IE4; NC4;
03.5

bottom

IE4: NC4;
03.5

middle

IE4; NC4;
03.5

sub

,
.

!4; NC6;
03.5

super

,
.

IE4; NC6;
03.5

text-bottom

IE4; NC4;
03.5

text-top

4; NC4;

03.5

top

IE4; NC4;
03.5

, : IE Internet Explorer; NC Netscape; Opera.


, .


baseline

, , .

| 50
<html>
<body>
<div s t y l e = " f o n t - f a m i l y : Times, s e r i f ; f o n t - s i z e : 200%">
T<span s t y l e = " v e r t i c a l - a l i g n : sub">E</span>X IXspan s t y l e =
" v e r t i c a l - a l i g n : 5px; f o n t - s i z e : 80%">A</span>T<span s t y l e =
" v e r t i c a l - a l i g n : sub">E</span>X

CSS

433

</body>
</html>

visibility

Internet Explorer
Windows

Macintosh

Netscape Navigator

Opera

4.0

5.0

5.5

6.0

4.0

5.0

4.x

6.0

7.0

3.5

5.0

7.0

, . , ,
, , . ,
display.

visibility: inherit

visible I hidden j collapse

inherit
;
visible ;
hidden , , , ;
collapse
, , hidden.
collapse
,
display: none. , ,

434

. Internet Explorer.


visible

, , .

| 51

<html>
<head>
<script language="JavaScript">
function hideLayer()
{ document.getElementByld("descr").style.visibility
= "hidden" }
f u n c t i o n showLayer()
{ document.getElementByld("descr").style.visibility
= "visible" }
</script>
</head>
<body>
<a href=# onMouseOver="showLayer()" o n M o u s e O u t = " h i d e L a y e r ( ) " x i m g
s r c = b u t t o n . g i f width=98 h e i g h t = 3 3 b o r d e r = 0 x / a >
<div i d = d e s c r s t y l e = " v i s i b i l i t y : hidden">flaHHaH

.</div>
</body>
</html>


descr ,
.

.
(

Netscape 4.x v i s i b i l i t y
, , .

435

CSS

white-space

Netscape
Navigator

Opera

Internet Explorer

Windows

Macintosh

4.0

5.0

5.5

6.0

4.0

5.0

4.x

6.0

7.0

3.5

5.0

7.0

.*

* . .

white-space , . HTML - . PRE; , . , white-space


PRE, .

white-space : normal I nowrap | pre

normal ,
;
nowrap HTML , , , BR
;
pre ,
HTML.


normal

, , .

; 52
<html>
<body>

/. .' '" '

-."'

'

~ , ..

. * .'

436

< s t y l e = " w h i t e - s p a c e : p r e " > s l t ; h t m l & g t ;


&lt;body&gt;
Slt;b&gt;BejniKa
&lt;i&gt;X

OepMa&lt; / b s g t ; & l t ; b r & g t ;

&lt;sup&gt;&lt;small&gt;nslt;/smallsgt;Sit;/sup&gt;

+ Y &lt;sup&gt;Sit;small&gt;n&lt;/small&gt;sit;/sup&gt;

Z&lt;sup&gt;&lt;small&gt;nSlt;/smallsgt;
Sit;/sup&gt;&lt;/iSgt;&lt;br&gt;
- &gt;

Sit;/body&gt;
Sit;/html&gt;

</body>
</html>
. 1.29. &gt; sit,- , , - HTML. , ,
.

<html>
<body>

<> </><>
<i>X <sup><mall>n</small></3up>
+ Y <sup><small>n</small></sup> =
Z<sup><smaU>n</small>
</sup></i><br>
n - > 2
</body>
</html>

. 1.29. w h i t e - s p a c e

nowrap Netscape 4.
Internet Explorer.

437

CSS

width

Internet Explorer
Windows

4.0

.*

1 5.0

55

Macintosh
R0

4.0

Netscape
Navigator

Opera

5 0

4.x

R0

70

3.5

5.0

70

* . .

( , , IMG). , .
. , , Internet Explorer
Opera width auto. Netscape,
Mozilla, Firefox ,
. . , Internet Explorer Opera
, width .

width: I | auto

,
CSS, (), (in), (pt) .
. ,
. auto
. , DIV 100 %.


auto

, , .

438

I 53
<html>
<body>
<div style="width: 80%; background: #fcO; padding: 7px; border: Ipx solid
#ccc"> '
<p style="width: 300px">Lorem ipsum dolor sit amet, consectetuer
adipiscing elit, sed diem nonurnmy nibh euismod tincidunt ut lacreet
dolore magna aliguam erat volutpat.</p>
</body>
</html>

, ,
.

Internet Explorer 4 width , ,


. Netscape 4
. Opera 3.5
, .

word-spacing

Netscape
Navigator

Opera

Macintosh


3.5

Internet Explorer
Windows

4.0

5.0

5.5

6.0

4.0

5.0

4.x

6.0

7.0

5.0

7.0

^~

. justify, word-spacing ,
,
.

word-spacing:

normal

439

CSS

,
CSS, (), (in), (pt) . , . .


normal

, , .

;54

'-

<html>
<body>

< style="word-spacing: 20px">Lorem ipsum dolor sit amet, consectetuer


adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet
dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis
nostrud exerci tution ullamcorper suscipit lobortis nisi ut aliquip ex ea
commodo consequat.</p>
</body>
</html>

z-index

Windows

Netscape
Navigator

Opera

Macintosh

4.0

4.x

Internet Explorer

4.0

5.0

5.5

6.0

5.0

6.0

7.0

3.5

5.0

7.0

-
, , . -

440

, -, z-

z-index.

z-index:

auto

, . , , .
z-index ,
HTML . z-index, Netscape, Mozilla Firefox.
, auto
HTML
,
, .


auto

, , .

55
<html>
<body>
1

<div s t y l e = " p o s i t i o n : r e l a t i v e ;
c o l o r : navy">Cnoii l < / d i v >

font-size:

<div s t y l e = " p o s i t i o n :

top:

font-size:
2

70px;

relative;

z-index:

1">

-55px;

50px;
left:

z-index:
5px;

2;

color:

orange;

2</div>

<div s t y l e = " p o s i t i o n : r e l a t i v e ;
c o l o r : "> K / d i v >

font-size:

<div s t y l e = " p o s i t i o n : r e l a t i v e ; t o p : -55px;


f o n t - s i z e : 7 0 p x ; z - i n d e x : 4"> 2 < / d i v >

50px;
left:

z-index:
5px;

3;

color:

orange;

CSS

441

</body>
</html>

. .
.
, ,
, .
, top
left.

1
2

. .

, SELECT, Internet Exolorer


, z-index.
5.5 Internet Explorer z-index
( FRAME) (IFRAME). Netscape 4.x
- z-index.

CG[- 209
Checkbox 229
CSS 9

D
DOM 196
F
favicon.ico 298

Gecko 348
getElementByld 196

H
hidden 233
HTML 9

Radiobutton 226
Rollover 321

url 89

74

63
9
40

315
0 321
0 316
:
0 243
0 259
0 241
0 243
0 245
0 247, 250
0 262
0 244
0 260
43

20
59

444

:
em 27, 31
28
27, 56
19

25
:
61, 241
55
72
67
324
59
91
78
298
:
53
53
52

33
- 84
19
25
221
reset 224
submit 223
221, 224
225
224
337
295
326

:
143
132
136, 144
201

0
0
0

134
139
173
133

:
0 119
0 118
0 124
0 122
0 123
307
328
308
339
343
310
:
0 get 211
0 post 211
164

118

251, 269
0 272
0 256
0 274
0 271
0 269

165
0 170
0 168
0 169
0 167
:
0 action 210
0 align 55, 61, 72, 178, 242
0 alink 92
0 alt 55, 86


background 76, 178
bgcolor 76, 149, 179
border 56, 91, 148, 179
bordercolor 179
cellpadding 179
cellspacing 149, 179
checked 227
class 25
cols 179
colspan 180
0 coords 87
0 enctype 211
0 for 228
0 galleryimg 83
height 56, 180
0 href 86, 90
hspace 56
id 25
ismap 56
leftmargin 273
link 92
lowsrc 57
marginheight 273
marginwidth 273
method 211
multiple 232
name 86, 90
nowrap 181
rows pan 181
rules 180, 205
scrolling 290
selected 232
shape 86
size 133, 232
src 57
start 114
style 26, 318
target 87, 91, 111, 212
topmargin 273
type 24, 113
usemap 86
valign 181, 243
value 114, 232
vlink 92
vspace 56
width 56, 180
64
158
332

445
:
247
263
418
:
216
234
221
217
213
235
226
233
231
232
0 229
287
0 289
0 290
0 292.
274
0 277
0 275
0 278
43 93
active 93
before 121
first-letter 43
hover 93
link 93
visited 93

:
0 159
0 155
0 155
0 160
0 152
0 147
0 157
135

:
0 border 131
0 border-bottom 137
. . 446

446
(.):
border-left 145
border-left-color 330
0 border-right 145
0 border-top 137
:
0 margin 269
0 margin-bottom 257
0 margin-left 251
0 margin-right 251
0 margin-top 273
0 padding-bottom 66
:
0 left 247, 249
0 position 247
0 right 343
0 top 249
0 z-index 302
:
0 padding 275
0 padding-bottom 275
0 padding-left 46
0 padding-top 264, 265
:
0 list-style-image 122
0 list-style-position 125
0 list-style-type 119
:
0 clear 163
0 display 108
0 float 69
0 overflow 169, 287
0 overflow-x 289
0 text-shadow 299
24
0 id 348
0 142
0 60
0 25
112
132,247
0 253
0 255
253
304
113
0 116
0 115
0 127
126

0 126
0 113
:
0 89
92
93
107
98
90
92
89
92
89
96, 99
97
9
0 338
0 26
24
0 342, 349
0 348

:
0 149, 182
0 185
0 182
182, 194
0 204
0 182
0 165
0 148, 188
0 177
0 202
:
0 border-collapse 188
0 table-layout 194
:
<!-- 337
89
area 86
b 21
blockquote 281
body 92, 273
br 163, 242
button 222
caption 182, 185
col 194
coigroup 195


comment 338
div 136, 288, 317
em 22
fieldset 236
font 23
form 210
frame 110
hi 173
head 24
hr36, 132
i 21
iframe 158
img 55, 241
input 209
label 228
legend 237
li 113, 116
map 86
ol 113
p257
pie 22
s22
script 197
select 231
strong 22
style 24
sub 21, 30
sup 21, 30
table 177
td 180
textarea 217
th 177
tr 177
u 21
ul 113
:
20, 27
0 47
44
49
36
213
0 216
0 215
0 220
0 214
:
0 font-family 23
0 font-size 27
0 font-style 30

447
0 font-variant 33
0 font-weight 29
0 letter-spacing 53
0 line-height 52
0 text-align 48
0 text-decoration 94
0 text-indent 45
0 text-transform 34
0 vertical-align 31
0 white-space 106
0 word-spacing 46
15
53

300
75
0 78
0 78
:
0 backgiound-attachment 78
0 background-color 26
0 background-image 78
0 background-position 78
0 background-repeat 137

209
0 236
0 210
0 210
0 223
0 224
0 210
:
gif 57
ico 298
jpeg 58
png-24 59
png-8 59
110

:
0 133
123
179
25
191
180

448

:
background 76
color 26

:
38
39
0 269
0 74
t 62
321

I
^^
:
CLii-sive 20
0 oblique 20
0 sans-serif 17

s e r i f 1 7

0
0
0
0

18
18
17
17

89
'

10

188
195
0 191

ISO, 1SI

Оценить