HTML и CSS на примерах

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>
.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>
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>
{
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>
#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>
<> </>
λ<sup>3</sup> - I<sub>l</sub>λ<sup>2</sup> +
I<sub>2</sub>λ - 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>
.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>
.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>
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>
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>
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>
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>
. 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>
.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>
. 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>
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; 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>
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>
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>
P { text-align: justify }
</style>
</head>
<body>
</body>
</html>

, , .
,
.
50
.
,
, ,
.
, , margin-top margin-bottom. ,
, , ,
1.29.
1.29.
<html>
<head>
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>
{
margin-bottom: O.lem;
/*
*/
margin-top: Opx;
/* */
/*
, */
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>
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>
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

adipiscing elit...
baseline
62
2
2.1 ()
align
left
ill Lorem ipsum dolor sit amet, consectetuer

adipiscing elit...
middle

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>
.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>
. 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>
#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>
#sign {
padding: lOpx; margin: Opx lOpx lOpx Opx;
background: #e0e0e0; border: lpx solid black;
float: left; font-size: 90%
width: 190px;
}
tcaption {
float: left;
/* */
/* */
/* */
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>
</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>
#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>
BODY {
background:
white
url(/images/help.gif)
right top
no-repeat
fixed
/*
/*
/*
/*
/*
*/
*/
*/
*/
*/
HI {
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?

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>
206,2, 202,6, 203,9, 210,27, 211,32, 284,32, 303,32, 302,27"
href=link2.html>
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>
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>
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>
A {
}
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>
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>
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>
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>
A {
c o l o r : #ffO00O
/* */
}
A:hover {
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>
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>
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>
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> '
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>
A{
border: lpx solid blue;
padding: 2px;
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>
/* */
{
border: lpx solid white;
padding: lpx;
}
A:hover {
border: lpx solid red
7* , */
/* */
/* */
/* */
/* */
{
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>
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>
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>
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>
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>
lower-alpha">
.
.
.
<ol type=I>
upper-roman">
I.
II.
III.
<ol type=i>
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>
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> Snbsp;
</>
</body>
</html>
, . , ,
.
padding-left,
, 4.6.
4.6.
<html>
<head>
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>
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>
LI {
list-style-type: none;
text-indent: -lem
}
</style>
</head>
<body>
<hr>
/* */
/* */
<li>» — sspades;

<li>Sraquo; — 5clubs;</li>
<li>» &18212; &diams;</li>
121
<li>» — &hearts;</li>
<hr>
</body>
</html>
list-style-type none
, ,
. ,
text-indent .
.
sraquo;, , . ,
— , (. 4.2).
\\ismih
:
] - /
;': ^
Q
- 0
. 4.2.
before .
, . content,
. , ,
, . 4.10
(\)
(\2). color.
122
I 4.10. before
<html>
<head>
LI {
list-style-type: none;
text-indent: -lem
}
LI:before {
color: red;
content: "\BB \20"
/* */
/* */
/* */
/*
*/
}
</style>
</head>
<body>
ul>
<> — &spades;</li>
<> — &clubs;</li>
<> — &diaras;</li>
<> — &hearts;</li>
</body>
</html>
Netscape 6,
Mozilla, Firefox, Opera Internet Explorer.

list-style-image.
,
4.11.
! 4.11.
<htral>
<head>
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>
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.

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

( 4.13).
4.13.
<html>
<head>
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>
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>
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>
#line {
width: 100%;
background-image: url(dot.gif);
background-repeat: repeat-x;
margin-top: ;
margin-bottom: ;
}
</style>
</head>
<body>
<div id=line> </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> </div>,

line ( 5.8).
5.8. ,
<html>
<head>
#iine {
width: 400px;
border-top: lpx solid red;
position: relative;
left: 50%;
margin-left: -200px
/* */
/* */
</style>
</head>
<body>
<div id=line align=center> </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
.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>
line {
text-align: center;
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>
.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>
,
- .
, ,
. 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>
#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>
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>
#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>
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>
.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>
.borderLayer {
border: 3px dashed maroon
.bgLayer {
background: maroon;
padding: 7px;
color: white
/* */
/* */
/* */
/* */
157
</style>
</head>
<body>
<div class=borderLayer>
<div class=bgLayer>
</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>
158
.border1 {
border: solid lpx #634f36;
background: #dad4c4;
padding: 5px
*/
*/
*/
}
.border2 {
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>
.shadowLayer {
border-right: 3px solid #ccc;
border-bottom: 3px solid #ccc
.borderLayer {
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ÛH 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>
.bgLayer {
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>
<br style="clear: both">
</body>
</html>
background,

IMG.
164
,
.
background.
,
, .
, , .

, -.
, , ,
. , ,
. , border, cellpadding cellspacing TABLE
. ,
, 5.29.
5.29.
<html>
<head>
TD.bg {
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>
TABLE.panel {
width: 400px;
border: 2px solid navy
}
TD.title {,
background: navy;
color: white;
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>
.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>
.panel {
width: 200px;
background: #d8ecd4;
border: lpx solid #54 6852
}
.title {
background: #7a9879;
padding: 4px;
color: #ffffee;
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>
.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-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>
.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>
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> </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>
.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>
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>
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>
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
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>
<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
BODY {
background: white
/* - *./
}
TABLE (
border-collapse: collapse /*
*/
}
TD {
border: 2px solid white; /* */
background: #ccc;
/* */
text-align: center
/* */
}
</style>
</head>
<body>
<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>
TH {
background: #666;
color: white;
text-align: left
/* */
. /* */
/* */
193
DIV.container {
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> </th>
<th width=100>2003</th>
<th width=100>2004</th>
<th width=100>2005</th>
</tr>
</table>
<div class=scroll>
<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
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> </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>
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> </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>
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> </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>
TABLE {
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> </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>
202
TABLE {
text-align: center;
/* */
/* */
/*
*/
}
(
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> </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>
TABLE {
border-bottom: 2px solid black;
background: oldlace;
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> </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
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> </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>
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> </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>
TABLE {
/* */
{
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>
<trxth> </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
<tr><td>flepeBo</tdxtd class=odd>38</tdxtd class=even>57</tdxtd
</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>
<> ?</><>
<input type=text maxlength=25 size=20>
<input type=submit value=OK>
</form>
</body>
</html>

. ,
, . size . CSS
, , 7.4.
7.4.
<html>
<head>
.textfield {
background: #f0f0f0;
color: red;
border: 2px solid black;
width: 50%;
font-size: 90%
/*
/*
/*
/*
/*
/*
*/
*/
*/
*/
*/
*/
215
</style>
</head>
<body>
<> ?</><>
<input type=text maxlength=25 class=textfield>
</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>
<>:</> <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>
TEXTAREA {
background: ttfOfOfO;
color: #008080;
padding: 5px;
width: 50%
/*
/*
/*
/*
/*
*/
*/
*/
*/
*/
</style>
</head>
<body>
<> : < / 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>
INPUT.enter {
height: 36px;
width: 200px;
padding-left: 34px;
/*
'
/*
/* */
. : i
221
</style>
</head>
<body>
: <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
<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>
<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>
.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>
< ?</><>
<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>
.col (
background: #ccc;
color: red;
margin-right: 7px
/*
/*
/*
/*
*/
Opera */
*/
*/
230
</style>
</head>
<body>
<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>
<> </><>
< 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>
</form>
</body>
</html>
, userName vasya, password

pupkin. ,
action, .

SUBMIT, . . ,
, action FORM.
:
<input type=image >
SUBMIT,
IMG, - ( 7.19). ,
, 2.
; 7.19.
<html>
<body>
<> :</><>
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
îew
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>
<td>
<img src=samplel.gif width=50 height=50x/td>
<td align=right>
, -

.
. , 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%> </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
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>
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>
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>
BODY {
}
#centerLayer {
width: 400px;
/* */
margin-left: auto;
/* ( Opera) */
margin-right: auto;
/* ( Opera)*/
background: #fcO;
/* */
padding: ;
/* */
text-align: left
/* */
}
</style>
</head>
<body>
</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>
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>
</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>
H2 {
font-size: 110%;
color: #09599d;
font-weight: bold;
*/
*/
*/

*/
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>
H2 {
font-size: 110%;
color: #09599d;
float: left;
width: 20%;
text-align: right;
margin-top: Opx
}
padding-left: lOpx;
margin-top: Opx;
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>
H2 {
font-size: 110%;
color: #09599d;
margin: Opx
}
{
margin-top: Opx;
margin-bottom: 0.5em
/* */
/* */
/* */
/* */
/* */
260
</style>
</head>
<body>
<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>
<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> </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>
#layer {
height: ;
width: 400px;
background: #fcO;
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>
#layer {
width: 400px;
background: #fcO;
padding: 150px 7px;
text-align: center
/*
/*
/*
/*
/*
*/
*/
*/
*/
*/
</style>
</head>
<body>
<div id=layer>
</body>
</html>
, . , .

.
padding-top, ,
8.19.
8.19.
<html>
<head>
266
BODY {
margin: Opx; padding:
}
#title {
width: 100%;
background: #f90;
padding-top: 20px;
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>
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>
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îU'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">
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>
.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.
.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>
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>
.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>
.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>
BODY { overflow-x: hidden )
</style>
</head>
<body>
</body>
</html>
, ,
-, , . - .
. 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>
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>
BODY (
background: #053f38;
color: #ffd595;
/* */
/* */

scrollbar-face-color: #053f38;
scrollbar-arrow-color: white
}
TEXTAREA {
scrollbar-arrow-color: orange;
height: lOOpx
}
</style>
</head>
<body>
<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>
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>
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>
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>
.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>
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
^
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>
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>
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>
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;

§
67;
Scopy;
©
®
<B>
copyright
S#174;
¼
¼
½
89;
/z
¾
¾
305
10.3 ()
"
"
&
&
&
<
<
<
""
>
>
>
""
«
«
»
»
←
←
↑
&I8593;
→
→
↓
↓
↔
↔
4-+
–
S#8211;
—
—

"
,
. , ,
, - HTML-. , . ,
, ( 10.15).
10.15.
<html>
<body>
<><>. <//>
<p><html><br>
<body></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;><br>
f o r ( i = l ; i & l t ; 6 ; i++) (<br>
document.writeln("Sit;trSgt;");<br>
for (j=l; j<6; j++) document.write(Squot;<tdsgt;Squot;
"slt;/td>");<br>
document.writeln(Squot;Sit;/tr>");<br>
}<br>
+ i + j +
306
10
Sit;/script><br>
Sit;/table> </p>
<p></body><br>
</htmlsgt;</p>
<p>Copyright scopy; 2002 — 2005 </>
</body>
</html>
. 10.6 ,
-.
[
J
1*1 L)
'
4gj : j j
: Q
.
<html>
<body>
<table width=400 border=l>
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>
TABLE.menu {
background: #fcO;
width: 80%;
text-align: center
.menu TD {
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%;
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.
TABLE.menu {
background: #ccc;
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
BODY {
}
.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>
317
.open {
border-right: none;
text-align: center;
font-weight: bold
/*
/*
/*
/*
/*
*/
*/
*/
*/
*/
.close {
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"> </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"> </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>
.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-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. , :
, . 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>
.tabs {
border-top: lpx solid black;
padding-left: 20px
.tabs DIV (
padding: Opx 15px 3px;
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>
.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>
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
.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. :
329
. 11.11, Netscape ; , .

width, menu ( 11.12).
.

, . , -, , . , . A:hover
, .
I 11.12.
<html>
<head>
.menu {
width: 200px;
padding: 5px;
)
/* */
/* */
/* */
width: 97%;
padding: 2;
display: block;
/*
/*
/*
/*
/*
*/
*/
*/
*/
*/
}
.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>
.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>
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>
UL {
width: 18Opx;
list-style: none;
margin: Opx;
padding: Opx;
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;
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]>
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]>

UL LI (
float: left
}
</style>
<![endif]>
, ,
"" , Internet Explorer.
COMMENT, .
, Internet Explorer, , , , . ,
, .
, Internet Explorer,
COMMENT ( 11.16).
, ,
.
| 11.16.
<html>
<body>
(
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>
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>
. 11.15
</script>
UL {
list-style: none;
/* */
margin: Opx;
/* */
padding: Opx;
/* V
/*
/* */
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;
/* */
/* */
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;
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>
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>
#menu {
width: 150px;
.
border: lpx solid navy;
background: #ffffee;
position: absolute
}
.title {
background: navy;
color: white;
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> </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>
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
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>
BODY {
background-image: url(bg.gif);
background-attachment: fixed
}
</style>
</head>
<body>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem
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>
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>
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>
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>
BODY { background-image: url(mybg.gif}; background-repeat: repeat-x }
</style>
</head>
<body>
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">
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
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
. 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>
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ît 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>
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>
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>
P { border-style: double; border-width: 3px 7px 7px 4px; padding: 7px }
</style>
</head>
<body>
CSS
373
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">
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%">
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>
.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>
ttmenu (
background: #fcO; border: lpx solid black; padding: 2px; width: lOOpx }
#submenu {
background: #ccc; position: relative; padding: 2px;
width: lOOpx; display: none }
</style>
384
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
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
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
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">
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>
<div style="letter-spacing: 3px">
volutpat.
</body>
</html>
. 15.
, ""
3 .
*,,
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>
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
. .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 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

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
magna aHguam erat volutpat.
. 18.
o u t s i d e
. 19.
i n s i d e
L o r e m ipsum dolor sit amet

list-style-position: inside I outside
list-style-position inside, . outside ,

.

outside
, , .
406
j 35
"
'
'
'
' ' :
'
'
<html>
<body>
<ul styie="list-style-position: inside">
enim ad minim veniam, quis nostrud exerci tution ullaracorper suscipit
<
<
>
>

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

enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit
</body>
</html>

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>
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>
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
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
.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>
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">
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">
nonuramy nibh euismod tincidunt ut lacreet dolore magna aliguam erat
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>
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> </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
,
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>
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>
HI ( text-transform: lowercase }
P { text-transform: capitalize }
</styie>
</head>
CSS
429
<body>
<hl>Lorem ipsum dolor sit amet</hl>
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
#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>
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 ;

<body>
Slt;b>BejniKa
<i>X
OepMa< / b s g t ; & l t ; b r & g t ;
<sup><small>nslt;/smallsgt;Sit;/sup>
+ Y <sup>Sit;small>n</small>sit;/sup>
Z<sup><small>nSlt;/smallsgt;
Sit;/sup></iSgt;<br>
- >
Sit;/body>
Sit;/html>
</body>
</html>
. 1.29. > 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
</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

</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

HTML и CSS на примерах

Caricato da

Informazioni sul documento

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

HTML и CSS на примерах

Caricato da

Copyright:

Formati disponibili

HTML CSS

02429 24.07.00. 22.04.05.

*-V. " ' ' ^"'

_ ' ( J . I ' , ' U

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

SMALL, SUB SUP

font-style normal (),

<J> ' '">

Internet Explorer , vertical-align

*& " {3 IS ' f? nf 0

Lorem ipsum dolor sit amet...

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

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

LOREM IPSUM DOLOR

' {*} |jjjj ,.^-

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

Internet Explorer 5 SPAN. . 5.5,

font-family: Arial, sans-serif;

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

HEIGHT WIDTH. HTML

HSPACE VSPACE. hspace

PNG-8 (Portable Network Graphics, )

Lorem ipsum dolor sit amet, *^j consectetuer

Lorem ipsum dolor sit amet, consectetuer

Lorem ipsum dolor sit amet, consectetuer

ill Lorem ipsum dolor sit amet, consectetuer

Lorem ipsum dolor sit amet, consectetuer

Lorern ipsum dolor sit amet, consectetuer fll

Lorem ipsum dolor sit amet, 11 consectetuer

V Lorem ipsum dolor sit amet,

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

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

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

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

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

' @ '| ;"5 * 1

jjj3 i2J ,:, /-'

L o r e m ipsum dolor sit arnet, consectetuer

nostrud exerci tution 11 suscipit lobortis nisi ut aliquip

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

3 '0..' [SJ 12 < !

Lorem ipsum dolor sit amet, consectetuer

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

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

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

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

, , border-bottom: 4px double red,

, hover, , visited active.

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

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

[ . . . ] Opera, Netscape, Mozilla,

!* ,' ' S 61 ! >"

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

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

Tincidunt ut lacreet dolore

m a g n a aliguam erat volutpat.

Tincidunt ut lacreet dolore

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

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

Internet Explorer 4 5 border SPAN.

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

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

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

-iJ '' - ->

<li>» — sspades;

<li>» — &hearts;</li>

, , 5.6. <div id=line> </div>,