Триумф - Строим Web-сайты. Дизайн. HTML. Css. Garage.2006

GARAGE
Web-
HTML CSS

PRENTICE
HALL
PTR
WEB DESIGN
Marc Campbell
PR
HALLCE
PTR
Prentice Hall Professional Technical reference

Upper Saddle River, NJ Boston Indianapolis San Francisco
New York Toronto Montreal London Munich Paris Madrid
Capetown Sydney Tokyo Singapore Mexico City
004.738.5
32.973.202
98
, .
98
Web-. HTML CSS. GARAGE : . . . /

; [. . , ]. .:
- , [2006]. 480 . : . ( Garage).
. . . . ISBN 5-89392-134-8.
CIP
- Web-, Web, , - ,
, , - .
Web-.
Web-
. :
. ,
, ? . : Web-, !
, GARAGE,
^ . , , , , .
- : WWW.3st.ru
E-mail: post@triumph.ru
Authorized translation from the English language edition, entitled WEB DESIGN GARAGE, 1 B l Edition,
ISBN 0131481991, by CAMPBELL, MARC, published by Pearson Education, Inc, publishing as Prentice Hall PTR, Copyright 2005 Pearson Education Inc.
All rights reserved. No part of this work may be reproduced or transmitted in form or by any means - electronic or mechanical, including photocopying, recording or by any information storage retrieval systems - without the written
permission from Pearson Education, Inc. RUSSIAN language edition published by Triumph Publishing, Copyright 2006.
, WEB DESIGN GARAGE, 1 s t Edition, ISBN
0131481991, by CAMPBELL, MARC, Pearson Education, Inc, publishing as Prentice Hall PTR, Copyright
2005 Pearson Education Inc.
. -
, , , Pearson Education, Inc. , , Copyright 2006
ISBN 5-89392-134-8
ISBN 0-13-148199-1 ()
, ,
, 2006
11
1 .
13
1 . ,
14
2 .
20
'..
3 .
28
4 .
36
5.
43

6 .

43
47
48
51
52
54
55
7 .
57
8 .
62
9 .
68

Close
1 0 .
70
73
74
75
76
78
1 1 .
89
1 2 .
92
92
94
95
96
: ?
97
13.
98
: JavaScript- onClick-?
99
Web-
2. ,
100
14.

101
: HTML- CSS-?
107
15.
CSS
108
16. CSS-
113
17.
116
18. CSS
122
19.
127
20.
132
2 1 . CSS
136
22.
139
23.
146
24. CSS-
151
25. HTML
158
26. CSS
3. ,
159
.....161
27.
162
28. Web-
164

GIF PNG
JPEG
165
167
167
168
29.
HTML
169
30.
HTML
171
3 1 .
CSS
173
32.
177
33.
180
34.
184
35.
.'
186
36.
190

37.
193
38. CSS-
196
39. Web-
199
4.
203
40.
204
205
207
207
208
4 1 .
210
42.
213

HTML-
214
214
220
221
223
4 3 .

225
4 4 .
228
4 5 .
232
232
235
237
238
4 6 .
240
243
4 7 .
245
246
248
4 8 .
249
<font>
font-size
:

249
250
252
:
4 9 .

253
,
254
254
256
Web-

.256
257
258
5 0 .
260
5 1 .
263
5 2 .
269
HTML

'.

,
271
273
273
274
277
5 3 .
5 4 .
280
!
283
286
5 5 .
287
5 6 .
295

colspan rowspan
cellpadding cellspacing

299
300
305
308
312
5 7 .
318
5 8 .
323
5.
325
5 9 .
326
:
6 0 .
:...331
,
6 1 .

,
,
6 2 .
,

332
334
334
336
338
340
340
341
6 3 .
343
6 4 .
349
6 5 .
351

6 6 .

9
352
352
353
6 7 .
355
6.
357
6 8 .

,

Reset ()

Submit ()

6 9 .

....358
359
360
361
363
364
365
366
366
368
370
371
373
374
375
377
379
379
382
7 0 .
385
7 1 . Tab
393
7 2 .
397
7 3 .
405
7.
409
74.
410
75.
415
76.
419
77. ,

422
78.
433
79.
439
10
8.
Web-
441
80. HTML-
442
Web-
8 1 .
447
452
82.
454
83.
.458
84. Web-
Web-

461
461
464
85.
466
86.
468
470

? -,
, ,
,
.
,
, Garage Series, - : , ,
- . ,
. ! - . - , !
- ?
,
, , ? ?
? , .
, . , , - Java-^ .
.
, , , , , ,
, ,
. ,
.
, .
, ,
, , .
, . ,
, , , , ,
- : Web Design Garage.
, . Web Design Garage - ,
( , ); , ; , ; .
: , . , , , , , . , .
- , . ,
.
,
, , ,
. , ,
, (Cascading Style
Sheets), , , , .
12
Web-
, Web-,
( ),
. , , . , Web Design
Garage - ,
.
, , Web Design Garage - , - - . , ,
, . , . : , , , . , - . , .
, , , Web-. ,
Web-flH3aUHep/Web-pa3pa6oT4HK . ,
Web- . , . , , . ,
, ,
, HTML- . ;
, .
, , , , Web Design Garage 8: . ,
, , . ,
HTML, , , 8, .
, , ,
8: , . Web-,
, .
. , 8 : , (Barney Marispini) (Rob Streeter) ( ) .
, . , .
, ,
(John Neidhart) Barbs, (John Fuller),
(Raquel Kaplan), ' (Robin O'Brien), (Kathleed
Addis), (Julie Nahil), (Dmitri Korzh) Prentice Hall PTR, . Studio , ,
: (Neil Salkind), (Lynn Haller),
(Stacey Barone), (Katrina Hillsten) (Jackie Coder).
, ,
, , , , .
.

,

: ?

: JavaScript- onClick-?
1.
,

- , . :
. .
, . : .
. , ,
, . , ,
1
, /
.
. .
, . . . , , , . ,
, , .
.
; ,
, :
" /
1. ,
15

, , ? ?
, . , ,
Amazon eBay, . ,
, , .
.
, 1.1. . ,
. ? ;
. . , -
--, .
. , .
gtn*
Content goes here Content goes here

Content goes here. Consent goes here
Content goes here

Content goes here
Content goes here
Content goes here.
Content goes here
800x490
: 1007,
Puc. 1.1.
(Navigation bar)
, , . , .
, , . , , .
,
. ,
Web-
16
,
.
(Level) - .
, -,
( , ).
, 1.2. . , - - , - .
. .
.
. 1.2. mom :
() ().
, ,
, ? , .
. . , . , .. .
-
. Web- - . . , . , . ,
,
,
, .
, , , .
1. ,
17
,
, .
, 1.3.
. ,
, , , , , .
,
, .
,
.
. , , ,
. ,
, ,
, ,
.
. 1.3. , , -
(), - (), ,
18
Web-
, . , 1.4,
,
. ,
,
, , , , , ,
, , The Lord of the Rings (
). ,
,
.
. 1.4.
,
,
, , 1.5. .
, , , . , , .
,
.
, ,
, - , - .
1. ,
19
. 1.5. ,

, . , , , , .
, , ,
, .
2.

- ,
. , , 2.1. , , - , . , 2.2,
, ,
- . ,
, : .
, I.Q., .
. 2.1.
,
. 2.2. ,

.
. Web-.
Web- . ? , ,
-. . , , . , . .
JavaScript . ,
.
. , , - . . . .
. , , , 2.3. ,
- .
, , , 2.4. ,
2.
21
,
- . ,
, , .
Edit
View
Favorites
lools
. 2.3. !
? ,
,
,
Which M e '
Favorites
loots
Help
ar
Which link?
Which Me?
Which Imk ?
Puc. 2.4.
, , , , ,
,
Web-. , 2.5. , .
, . , , Contact Us
( ) .
Contact Us ( ) - , 2.6. Contact Us ( ), 2.7. , Contact Us ( ) , .
. ,
,
,
? ,
, ,
Web-
22
, -.
? Contact Us ( ),
2.8, , .
, .
Content goes here, content goes riere. Content

ooes here. Content goes here. Content goes berc
Content ooes here. Content goes here. Content
goes here. Content goes here.
Puc. 2.5. - ,
. Contact Us ( )
,

?
, . .
.
2004 , (John Kerry)

(Jane Fonda)
: . , , . ? - . . ,
.
2.
23
3 mains.pnt;>i VWr-
goes here. Content goes here. Content ooes liere

Content goes here. Content goes here. Content
. 2.6. Contact Us ( ),
, Contact Us ( )
,
shoelaceuuarehous
Header
Cont
intent goes here.
oes here. Content
QOeS
a
Content goes here.
Cont
Content goes here. Content

Content goes here. Content
480
[ 100%
. 2.7. Contact Us ( )
,
24
Web-
. , .
shoelacewarehoi
oes here. Content goes here. Content goes iiere

ontent goes here. Content goes here. Content
?goes
here. Content goes Here,
eoo x *so
; 100%
Puc. 2.8. He , .
Tracking () Web-
,
2.9. , ,
,
.
. . ,
, 2.10. ?
.
.
,
. ,
- . ;
, 2.11.
. , , , .
, , , .
2.
25

goes here. Content goes here. Content goes here
contact us
io
ioo%V
. 2.9.
your package j Shop for shoes I Compare

goes here. Content goes here. Content goes here,
set quote
. 2.10. , ,

26
Web-
0 0 0
contact us
gat quote
**
service
800x480
] 100%
. 2.11. ,
, . ,
^ , 2.12.
. , , 2.13.
. 2.12.

27
2.
Track your package
Your shopping cart
,* shoelace set
Value pack
^ P Molt titanium shoelace
*.
"-
Total $3S1.IO
, 480
1100%
Puc. 2.13.
3.

HTML .
, :
< href="index.htm"ximg
src="/images/logo.gif"></a>
, , 3.1. ,
. Web-
, ,
. .
View
Favotrtes
Toots
tjeb
. 3.1. ,
, , . ,

,

.
, , , , ? .
. )' Web- ,
:
< href ="index.htm"ximg src = "/images/logo.gif" b o r d e r = " 0 " x / a >
3.
29
b o r d e r 0 , , 3.2.
, , ,
, , - .
. , , .
. 3.2. ,
,
border , 0.
, .
: , ,
. : .
. ,
3.3. , - . , , - , , , , , .
, ,
3.4. , ,
.
30
Web-
. 3.3. .

. 3.4. , .

3.
31
border
. Netscape ,
. Internet Explorer , .
, . . - , . , ,
, ,
, .
, ,
. ,
. , - , , - . , .
, ,
3.5. , , . , .
. 3.5. ,
, -
32
Web-
~ ,
.
, . , , 3.6. , , 3.7. , ,
.
Square pegs vs. round holes:

the controversy continues
Do square pegs fit into round holes? As ft turns out, the answer to this age-olc
question isn't as straightforward as you might think.
Recent studies have shown trial, depending on the size of the holes relative to the
size of the pegs, there's a very good chance that the pegs will fit.
Puc. 3.6. ,

. ,

3.7 ,
. ,
Previous () Next (). , ,
. , .
3.
33
, ,
, ,
.
eometry
Nr-WS | PROOFS I EQUATIONS | ABOUT
Square pegs vs. round holes:

the controversy continues
Do square pegs fit Into round holes? As it turns out, the answer to this age-old
Question isn't as straightforward as you might think.
Recent studies have shown that, depending on the size of the holes relative to the
size of the pegs, there's a very good chance that the pegs will frt.
Puc. 3.7. .
,
, ,
, . DVD CD , , Play (), Fast
Forward ( ), Stop () , ,
. Delete ()
New Document ( ). , 3.8, . C r e a t e (), - E d i t (). , .
, , : - , .
2-191
Web-
34
!> W
. 3.5. ,
? , ,

, 3.9. Microsoft Windows ,
. Windows
, - . ,
Web-, , ,
.
, Windows, , , , . , ,
. , , , Windows. ,
, Web-, .
3.
35
, , -
. .
,
, ,
. ,
- , ,
.
. 3.9.

,
.
,
4.

- . . , ,
- . ,
4.1. , 4.2,
.
. Web- ,
.
rtranscendental procrastination
Our promise: Action through inaction.
Text goes here Text goes here Text goes here Text goes here Text goes here Text goes here
Text goes here Text goes here Text goes here Text goes here
Text goes here Text goes here. Text goes here Text goes here Text goes here Text goes here Text goes here Text
goes here. Text goes heie Textgoesnere Texlgoesnere Texlgoesnere Textgoeshere
Text goes here Text goes here Text goes here. Text goes here Text goes here Text goes here Text goes here
. 4.1.
,
. , . , .
, 4.3. ,
, ,
, , 4.4.
Web- . ,
4.5, ,
.
37
4.
transcendental procrastination
Our promise: Action through inaction
Text goes here, Text goes here

goes here Texi goes nere Text
here. Text goes here Text goes
Text goes nere. Texi goes here
Tex! goes here Text

goes nere. Text goes
here. Text goes here
Text goes here
. 4.2.
rtranscendentaiprocrastinationcai)irED
How it works: Nothing is everything.
Text goes here. Text goes here. Text goes here. Texi
goes nere. Text goes nere Text goes here.
Texi goes here. Text goes here. Text goes here. Text
goes here. Texi goes nere. Text goes here
Text goes here Text goes here Text goes here. Text
goes here.
Text goes here Text goes here Text goes here Texi
goesnere.
Text goes here. Text goes here.

goes here. Text goes nere Text
here Text goes nere Text goes
Text goes here Text goes here.
Text goes here Text goes here.

goes here. Text goes nere. Text
here Text goes nere. Text goes
Text goes here. Text goes here.
Text goes here. Texi

Text goes here.
Text goes here.
Text goes here. Text

goes nere Text goes
here Text goes nere.
Text goes here
Text goes here Text goes here. Text goes here. Text
goes here. Texi goes here Text goesnere Text goes
here.
Text goes here Text goes here Text goes here.
Text goes here. Text goes here. Text goes here. Text
goes . Text goes here Text goes nere.
i Text goes here Text goes here Text
Text goes here
l ~ s here. Text
goes
nere. Text goes
Text goes here
Text goes here

goes here. Text
nere. Text goes
Text goes here
Text goes here Text

here Text goes nere.
Tex; goes nere.
Text goes here. Text goes here Text goes here. Text
goes nere. Tex', goes here Text goes here. Text goes
I S00 x TOO
j 100%
. 4.3. ,

Web-
38
Text goes here. Text goes here Text ooes here Tex'
g o e s l w e . Text goes nere Text goes
Tent goes nefe Text goes here Text goes here Texl
ooes nete Text goes here Text goes nere.
here. Text goes here Text goes here. Texi
Text goes nere Text goes here Text goes hare. Text
goesh
Text goes here. Text goes here

goes nere. Text goes here Text
here. Text goe* here. Text goes
Texl goes here Text goes here
Text goes nore. Text goes

g
nere T
goes t w e
goes here. Text
Text goes nere Texl goes
Text
Texl goes here. Tex<
Text
goes here. Text goes
here. Text goes here
Text goes
here
Text
goes
here
Text goes
goes here Text
goes here Text
here. Text
Text goes
Text goes hem.
Text goes nere Text goes here Text goes here Text
here Texl goes nere Text goes nere Text goes
Text goes here Text goes i w e
Texl goes here Text
aoes nere. Te*t goes
here Text
Text goes here Text goes here, rexl

Text goes here Text goes here
goes nere goes here Text
here Text goes rtere Text goes
Text ooes
Texi goes here
Text goes here. Texi

here Text goes nere
Text goes here.
Text g o e * here. Text goes here. Text

g o e s t a e . Text goeshere. Text goes
Text goes here Text goes here Text goes here
Puc. 4.4. , ,

How it works: Nothing is everything.
Text goes here Text goes here Texl goes
here Text goes here. Texl goes here T e x l
goeshere.
Tex- goes here. Text goes here. Text goes

hem. Text goes here. Text goes here. Text
goes here.
Text go h e m Text goes here. Text goes

here. Text goes here.
Text goes here Text goes

here.
Text goes here

here. Text goes
goes here/Text
Fere Texl goes
goe* here Text
here
Text goes here

here. Text goes
goes here Text
here Text goes
goes here Text
Text goes
here Text
here Text
goes
Text goes here Text goes

hem Text ape*
e. Text
goes here.Text goes nere. text goes
Tex- goes here. Text aoes here. Text aoes
hero Text goes
Text goes here Text goes here Texi goes

here. goes here. Text goes here Text
goeshere.
Texl goes here Text

goes here
Text goes here

Text goes
goes here Tex!
Text goes
extgoes here
here Text goes here Texl goes
Tex- goes here

her*! Text goes
goe;here.
Text goes here Texl goes
here.
Puc. 4.5. ,

4.
39
, , - ,
, .
, , , , .
, 4.6.
, . , , , . .
' *
. 4.6.
,
, -
,
. . , , , .
. , .
40
Web-
,
.
, , . , .
.
, . , . 4.7, , , -, . , , , 4.8. (.4.9).
. 4.7. ,
, ,

. 4.8. ,

4.
41
. 4.9. ,

, , . , ,
. , 4.10. , , 4.11, , , , ,
.
. 4.10. ,
Web-
42
[transcendental procrastination
X60O
i 100%
. 4.11. FlepepacnpedejieHue ,

5.

Web- . -
- , , .
: ,
:
, .
, ,
( ,
),
.
: ,
.

Web-. . .
, . ,

, . , , , , - .
.
, ,
, . , 5.1, , , .
, . , 5.2, . -, , ,
. -, ,
, .
, , .
Web-
44
The truth you ! at the price yoinan afford | # NEWS
ARCHIVE
| ACCOUNT
. 5.7. ,

. 5.2. ,
,
5.
45

.
. ,
, .
, : ,
, ?
, , 5.3. . , .
The truth you need at the price you can afford | NEWS
I ACCOUNT
WYOMING MAN FINDS NEEDLE IN HAYSTACK

Story goes here. Story goes here. Story got* here. Story
goes here. Stay goes here. Stoty goes here. Story goes
Sere. Story gees here. Story goes here. Story goes Here.
Story goes here Stoty goes here. Story goes here. Storygoes here. Story goes here.
.
Story goes here. Scry goes here. Story goes here. Story
goes here. Story goes here. Story goes here.
Discuss
Debunk
Boofemarit
Related stories
Story goes here. Stoiy goes here. Story goes here. Story
goes hete^ Story ROBS here.
Story goes here. Story giiea l:e. Story goes here. Story
goes here. Story goes here. -4lory goes here. Story goes
. Story goes here. Slon'RO^bere. Story goes here.
Story goes here. Story goes here.
Story goes here.
Story goes here. Stoiy goes here. Stoty goes here. Story
goe* here. Story goes here. Story
h
Stor o
here. Story goes here. Story goes
Puc. 5.3. ,

. ,
.
,
, 5.4.
, 5.5, , ,
. , .
, .
, . ,
, .
- . , , -
.
Web-
46
REAL TRUTH
Thetruthyouneedltht;pria;;o4rana)Yi>rd | NEWS
|*ARCHIVE
\* ACCOUNT
6 W S BsjiMB-aup I *!;'
WYOMING MAN FINDS NEEDLE IN HAYSTACK
. 5.4. ,
. ,

. 5.5. ,

5.
47

. 5.1.
Web-. , , , ,
, .

.
,
.
,
. , , . ,
. ,
, .
, . , .
: . ,
. , ,
.
.
, .
, ,
.

, . , .
, .
48
Web-
. 5.1.
a (IE)
(Netscape)
#0000FF
#0000FF
#990099
#663399

Microsoft?
, . Internet Explorer Windows 98 .
. Internet Explorer Windows XP
.
.
.
, ,
.
. , . - , , . Coca-Cola
McDonald's. ,
Web-. -
, ,
. , , , .
-
, , , , .
5.
49

,
?
. .
, , . ,
, , , , - . , . , Web- ?
^ , , ,
. ,
Web- ? 5.2,
, -
, ,
, .
. 5.2.
( )
, , , ,
, -,
, , ,
; ,
, ; ,
, ,
,
, ,
, ;
, ,
,

, ;
, ,
, , ;
,
,
;
( )
Web-
50
, . , ,
, . . - ,
. - , , .

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

. , , , .
- ,
. .
. ,
. Web- .
, Web- , .
, . ,
,' * . , . .
, -. , . 1990- , , .
. - , Web- - .
, Web-
. .
Web- , , .
, , Web- .

. . , ..
, , .
52
Web-

?

1998 508
(www.section508.gov).
. , ,
, - - . , , - , .
- .
,
. ,
, . . ,
, (, ),
. , , .
, , ,
.

, , ,
. , - a l t img. ,
. a l t .
, , , :
<img s r c = " s a t u r n . j p g " alt=" ,
Voyager,
.">
6.
53^
, :
<img s r c = " s a t u r n . j p g " alt="CaTypH">
a l t , . , , , , . ,
. , , .
a l t
, , :
<img src="aboutus.jpg"
alt=" " " . " >
:
<img src="macromedia.jpg" alt="nepexofl macromedia.com">
a l t Macromedia,
, , ,
. ,
. .

,
?
, . ;
, . , .
al t .
, : , , , ,
. ,
, , ,

, . , , , .
Web-
54

, Flash-,
QuickTime, ,
. - . ,
, , .
,
. World Wide Web, W3C, , . , W3C, , , , , .

, .
, -
. ,
. , , , , . ,
- ,
. Web-, , .

?
www.w3.orf/WAI.
. Macromedia, , Flash
MX, Flash-. Flash MX
, Flash-.
, . , Flash - , . :
100%, , , , Flash. , W3C, .
6.
55

. . ,
.
, , , Web, , . , .
The planet Saturn is the sixth planet from the sun in

our solar system It is the largest planet after Jupiter,
:its nearest neighbor.
Like Jupiter, Saturn is a gas giant. It is composed
mostly of gases, unlike the inner planets, which have
rocky surfaces. Traveling on Saturn would be very
much like flying through an endless sky. In fact,
Saturn has such a small specific density that, if you
could drop fee entire planet onto a body of water,
Saturn would float like a beach ball
Saturn's majestic rinfls seem solid from a distance, but they are actually composed of millions upon
millions of orbitmgice and rock fragments, ranging in size from dustparticles to boulders 'While Saturn's
rings are the most famous and recognizable, astronomers have discovered smaller, dimmer rings around
all the outer planets m recent years except for Pluto, which may in fact be a comet.
^g My Computer
. 6.1.

- .
, , .
6.1. ,
. ,
6.2, ,
.
, ,
. ,
. ,
. , , , ,
- , - , 6.3.
Web-
56
File
dit
yew
Favorites
loote
Help
our solar system. It is the largest planet after Jupiter,
its nearest neighbor
Like Jupiter, Saturn is a gas giant. It is composed
mostly of gases, unhki: the inner planets, which have
rocky surfaces. Travelling on Saturn would be very
much like flying through an endless sky if you could
drop the entire planet onto a body of water, Saturn
would float like a beadi ball
Saturn's majestic rings seem solid from a distance, but they are actually composed of millions upon
millions of orbiting ice and rock fragments, ranging in size from dust particles to boulders. While Saturn's
rings are die most famous and recognizable, astronomers have discovered smaller, dimmer rmgs around
all the outer planets in recent years except for Pluto, which may in fact be a comet
'i My Computer
Puc. 6.2. , ,


>ur solar system. It is the largest planet after
Jupiter, its nearest neighbor
Lake Jupiter, Saturn is . gas giant It is composed
mostly of gases, unlike the inner planets, which have
rocky surfaces. Travelling on Saturn would be very
much like fiying through an endless sky. In fact,
Saturn has such a small specific density that, if you
could drop the entire planet onto a body of water,
Saturn would float like a beach ball.
Saturn's majestic rings seem solid from a distance, but they are actually composed of millions upon
millions of orbiting ice and rock fragments, ranging in size from dust particles to boulders. While Saturn's
rings are the most famous and recognizable, astronomers have discovered smaller, dimmer rings around
all the outer planets in recent years except for Pluto, which may in fact be comet.
J My Corrputer
Puc. 6.3. ,
. ,
,
7.

. , , , , , - , , , Web- - .
(Breadcrumb trail - ) - , , ,
.
, , . , , . ,
( ) , ,
- , - , Web-.

?
, .
.
, .
, , ,
. , ,
.
- .
. . , . Web- , , , - , )'
.
- , , , . - .
Web-
58
, ,
. , :

:
> > .
, :
> > >
:
> > >
, . - ,
, .
, ,
,
.
,
, .
7.
59
, . ,
.
, ,
( ), .
, , . , ,
, 7.1. , .
, 7.2, , .
, ,
, , 7.3. , , , , , .
Home > Fairy Tato > Brotfaere Grimm > Rapunzel
BROTHERS GRIMM
* u p o n t i m e , gw*ht>re. Story SO** here. Story
erm here. Story goes Here. Stow goe* gerc. Story got* hre.
1
goes here. Story goes here. Story jitws hen , Story

Stwy goe> here. Story goes here. Story goe here- Story goes he
goes here. Story * here. Story goes here.
"Stoiygoes here." my goes here. Story goes here.
"Story goes here."
Story goe here. Story goes here. Story goes here. Story (toes here. Story
goes rrer?. Story goe* here. Story goes acre. Story ectet here. Story goes
here. Story ruts . Stoty goes here. Story |p>e* turn.
Story got here. Story goes her. Story goat here. Story Roes here. Story
here. Story goe here. Story goes here. Story goe* here- Story goes
hre.
Puc. 7.1.
, . , , .
, ,
60
Web-

. ,
.
I
fairy tales
BROTHERS GRIMM
Rapunzel
u p o n 8 t i m e , . Story goes hen;, Stop,
goes here. Shin.' got here, goes gerr. Stein-goes here.
y goes here. Story gs hure. SUQi goes he re, Story goe* here.
goes here.
Story goes here. Son' goes b>re. Story goes here. Story goes here. S
goe here, goes here. Si oiy goes here.
Story goes here." ttKygcMC here. Stcwy gos here
"Story here.*
Story (toes here. Story goes here. Story goes tore. Story goes here. SWr>
goes here. Story goes here. Story goes here. Story goes here. Story goes
here. Stoiy goes here. Sbxygoei here. Story goes here.
Story goes here. Storv goes here. Stoiy goes here. Story goes here. Story
goes here. Story goes here. Slorygoes here. Story goes here. Story goes
Puc. 7.2. He ,
.
tales
THERS GRIMM
Rapunzel
1 u p o n a t i m e , rtmrgort beta Story goes here.
^goes hevt. Stoiy goes here. Story gc4gere. Story goes here.
goes here,
here. Story goes . Story got
Story goes here. Story goes hi -re. Ston- goes here. Story goes here. Story
gt>es here. Story goes here. Stay goes'here,
"Stttry goes here," story goes wre. Stoty goes Iterc.
^rtory jt*es here.."
Ston- goes here. Stoty goes here, Story goes Irere. Story goes
goes here. Story here. Si g-oes here. Story here. Slo
Here. Story goes here. Storj' fr^s here. Story goes here.
Stor>' goe* here. Story goes here. Story goes hens. Story goes here. Sto
goes here. Story goes here. St >ry goes here. Story got here. Story go
Puc. 7.3. , /
, ,
7.
61

,
.
.
, ,
.
< href="index.htm">Home</a> >
<! > - "". >
< href="levelone.htm">Level One Page Name</a>
&gt ;
<!
,
, . >
< href="leveltwo.htm">Level Two Page Name</a>
&gt ;
<! ,
. >
Level Three Page Name
8.

- , ,
. , :
, 8.1.
, JavaScript . , .
-
.
Choose .
Ne\
ports
Business
Entertainment
Humoi
Style
Travel
Science
Culture
Puc. 8.1.
.
,
: HTML- (
, ), (Front end)), JavaScript
( , ,
(Back end)). , , , .
-
, .
, .
63
8.
, . Go () - ,
. ,
. . , , .
? . Go (), . , , ( ), , Go () . , Go () , .
, .
, , , , , Go ().
Go -
HTML .
<form naitte=" jumpmenu">
<select
name~"pages">
<! '
. s e l e c t e d option ,
,
. >
<option selected>Choose a page...</option>
<!
. . >
<option>First
category</option>
<! .
v a l u e , . .
, , , aboutua/index.htm .
../products/brochure.htm. , , ,
. >
<option value="firstpath">First page name
</option>
<option value="secondpath">Second page name
</option>
<option
</option>
value="thirdpath">Third page name
64
Web-
<! , ,' ,
. >
<option>Second category</option>
<! - ' . ,
,
select. >
<option
name</option>
value="fourthpath">Fourth
page
</select>S
<! . >
<input
type="button"
onClick="doJumpMenu();">
name="go"
value="Go"
<! form . >

</form>
H T M L .
<form name="jumpmenu">
<! , ,
onChange
JavaScript. , . >
<select name="pages" oiiChahge="doJumpMenu();">
<!
, . >
<option selected>Choose a page...</option>
<option>First category</option>
<option
</option>
value="firstpath">First
<option value="secondpath">Second
</option>
<option
</option>
value="thirdpath">Third
<option>Second
category</option>
page
name
page name:
page
names
8.
<option
name</option>
65
value="fourthpath">Fourth
<!
. >
page
</select>
</form>
-
JavaScript , .
Go (), .
<script
language="JavaScript">
/* s c r i p t , HTML-.
s c r i p t , JavaScript-. */
function doJumpMenu() {
var menu = document.jumpmenu.pages;;
/*
value . */
var
menuValue
=
menu.options[menu.
selectedlndex].value;
/* if/then
, value
. */
if (menuValue != "") {
location.href = menuVaiue;
</script>
3-191
Web-
66
Go ()
Go () HTML, , , -
.
HTML , :
<form name="jumpmenu" onSubmit="return doJumpMenu
GraphicButtonf);">
<! form, ,
onSubmit, - . >
<! . ,
. . >
<select
name="pages">
<option selectecbChoose
<option>First
a page...</option>
category</option>
<option v a l u e = " f i r s t p a t h " > F i r s t

page name
</option>
<option value="secondpath">Second page name
</option>
<option
</option>
value="thirdpath">Third
page name
<option>Second category</option>
<option value="fourthpath">Fourth page name
</option>
. </select>
<!- Go (). >
<input type="image" name="go" src="imagepath"
width="imagewidth"
height="imageheight" border="0">
</form>
8.
67
Go ()
Go () JavaScript.
Web-, , Internet Explorer Netscape, - ,
,
.
.
<script
/*
JavaScript-, s c r i p t ,
, .
HTML-, s c r i p t , - head
.
function doJumpMenuGraphicButton() {
var menu = document.jumpmenu.pages;r
/*
value . */
var
menuValue
selectedlndex].value;
menu.options[menu.
if (menuValue == "") {
/* . */
return false;
} else {
/*
, value . * /
location.href = menuValue;
/* . */
return false;
</script>
9.

- Web- , . , , , . . Web-. , , ,
, \
. .
- ,
, .
, , .
- ,
, , , , . , . , Web-,
.

, ,
.
, . , 9.1, ,
9.2.
9.
69
. 9.1.
. , .
,
solar system
(n.)
'
Collectively, the planets, moons,

comets, and other heavenly bodies in
orbit around a star
Puc. 9.2. ,
, ,

Web-
70
. :
. ( )
.
. ,
, .
. . , , ,
. ,
.
.
.
, ,
. , . , ; ,
.
.
!
, . , , ,
.

, . HTML-, Web-,
. . , :
< href="popup.htm">0pen t h e popup window</a>
, JavaScript:
<
href="javascript:doPopup('popup.htm');">0pen
the
popup
win-
dow</a>
, . JavaScript,
, :
9.
<script
71
function doPopup(popupPath) {
window.open(popupPath,'name',
'width=400,height=200,scrollbars=YES');
}
</script>
. window. open , . , HTML- , , :
< href="javascript:doPopup('../help/info.htm');">Get
help</a>
. . , File Not Found (

).
JavaScript
. , window, open , . name
popup, help, window, Charlie , .
, . , , -
. 9.1 .
, doPopup ( ) , ,
:
<script language="JavaScript">
function doPopup(popupPath) {
window.open(popupPath,'name',
'width=300,height=15 0,scrollbars=YES,location=YES,
status=YES');'
</script>
9.3 , .
Web-
72
. 9.1.
height
)'
height=300
location
location=YES

menubar
menubar=YES

resizable
- resizable=YES

scrollbars
scrollbars=YEE
,
status
status=YES

toolbar
- toolbar=YES

width
width=150
. 9.3. : () , () ,
() , (D) , ()
9.
73

, ,
. ,
( ):
< href= "javascript :doPopup ('path',
ties');'^
'name',
'proper-
, doPopup,
. , , JavaScript-:
function
ties) {
doPopup(popupPath,
popupName, popupProper-
window, open (popupPath, popupName, popupProperties);

, . , .
- , , -
,
.
, onLoad body HTML- :
<body onLoad="window.focus() ; ">
window. focus , , .
, .
, :
cbody onBlur= "window, f o c u s () ; ">
onBlur , , window, f o c u s
. - .
Web-
74
, ,
.
, , .
Close
JavaScript Close
() , 9.2. , , X .
:
<
href="javascript:window.close();">Clcse</a>
.
window, c l o s e , .
10.

. . , . , 10.1.
Randy's
& Used Planets
GAS GIANTS
TERRAFORMEO
BARGAIN BIN
. 10.1. ,
- ,

.
. , Internet
Explorer 5 Netscape 6
g e t E l e m e n t B y l d JavaScript,
, . , g e t Element Id, , ;
, . ,
, , .
Web-
76
HTML, DHTML, - HTML

JavaScript, (CSS).
HTML, DHTML, - HTML JavaScript

(CSS),
Web-.
DHTML . HTML. CSS, , , JavaScript .

(Layers) CSS, (Div elements), - , Web-. , , , 10.2.
.
, , - ,
Web-, CSS.
, , ,
.
Here a layer...
There a
layer... Everywhere a layer
layer
Puc. 10.2. CSS - .

,

10.
77
, JavaScript. . . . , ,
.
, 10.3. , , ,
. - ,
. : ,
. , , ,
. JavaScript- v i s i b i l i t y , . , ,
10.4. , ,
, .
1 10-03.png@100%
/,
Randy's
New & Used Planets

VEHICLES*
SUITS
. 10,3.
.

Web-
78
. 10.4.

, , , .
, .
- , - , , , ,
.
, . ,
19 ,
800 . 40 760 .
, 152 , 10.5.
-<
-*-152px-*-j
760
>-
. 10.5.

10.
79
Netscape,
IE,
0: leftmargin,
topmargin,
marginwidth
marginheight
body; border, cellpadding
cellspacing table.
. : 152 , .
, , . ,
. 19 , 19
. 57
(19 3), - 19 7,
133 .
,
. , 19 , , 19 . 0 ( )
152, 10.6.
760
. 10.6.
, . .
Web-
80
, , , , 10.7.
760
-152 -
. 10.7. .

DHTML- , 10.8. ,
.
0 border,,
c e l l p a d d i n g c e l l s p a c i n g , .
, ,
, 10.9. , .
Category 4
. 10.8.

10.
81
. 10.9.
(
),
<html>
<head>
<title>Popup Menus</title>
<script
function doShowHide(popupMenu) {
/* ,

. ID
,
. 7
if (popupMenu == "menul") {
document.getElementById("menul") .style.vi
sibility="visible";
document.getElementById("menu2") . style.vi
sibility="hidden";
document.getElementByld("menu3"] . style.vi
sibility="hidden";
document.getElementByld("menu4"; . style.vi
sibility="hidden";
document.getElementByld("menu5"] . style.vi
sibility="hidden";
if (popupMenu == "menu2") {
Web-
82
document.getElementByld("menul").style.vi
sibility="hidden";
document.getElementByld("menu2").style.vi
sibility="visible";
sibility="hidden";
sibility="hidden";
sibility="hidden";
if (popupMenu ==' "menu3") {
sibility="Hidden";
sibility="hidden";
document.getElementByld("menu3").style.vL
sibility="visible";
document .getElementByld ("menu4") . style, vi.
sibility="hidden";
sibility="hidden";
document .getElementByIdv( "menul") .style, v::.
sibility="hidden";
sibility="hidden";
sp.bility="hidden" ;
sibility="visible";
Sibility="hidden";
sibi1ity="hidden" ;
sibility="hidden";
10.
83
document.getElementById("menu3").style.vi
sibility="hidden";
sibility="hidden";
sibility="visible";
function doHide(popupMenu) {
/* , Close () . ID .
, . */'
document.getElementByld(popupMenu).style.vis
ibility="hidden";
<;/script>
</head>
<body leftmargin=."O" topmargin="0" marginwidth="0"
marginheight=" 0 " >
<! . . - , : Close
(). , . , . div, .
div,
id
ID ,

JavaScript-, .
style ,

.
width height . , 152, ,
(7 60 ) , , .
, 114, - (19
), ,
( Close ()).
Web-
84
. 19,
, , . , , .
, visibility hidden,
. >
<div id="menul" style="position: absolute; lefts
Opx; top: 19px; width: 152px; height:114px; visibility: hidden;">
<table width="152
cellspacing="O">
border="0"
cellpadding="O"
<tr>
<tdxa href="path01">Subcategory
l</ax/td>
</tr>
<tr>
2</ax/td>
</tr>
<tr>
< t d x a href="path03">Subcategory
</tr>
3</ax/td:>
'
<tr>
< t d x a href="path04">Subcategory
4</ax/td>
</tr>
<tr>
< t d x a href ="path05">Subcategory
5</ax/td>
</tr>
<! Close ()
.
doHide. ID . >
<tr>
<tdxa href =" javascript :doHide ( 'menul' ) ;"

>Close</ax/td>
</tr>
</table>
<! div
. , . >
85
10.
<div id="menu2" style="position: absolute; left:

152px; top: l-9px; width: 152px; height: 114px; visibility: hidden;">
<table width="152"
cellspacing="0">
border="0"
cellpadding="O"
<tr>
l</ax/td>
</tr>
<tr>
2</ax/td>
</tr>
<tr>
.-
<tdxa href = "path08">Subcategory
3</ax/td>
</tr>
<tr>
<tdxa href="path09">.Subcategory
4</ax/td>
</tr>
<tr> '
<tdxa href="pathlO">Subcategory
5</ax/td>
</tr>
<tr>
< t d x a href = " javascript :doHide ( 'menu2 ' ) ; "

>Close</ax/td>
</tr>
</table>
<! div
. >
304px; top: 19px; width: 152px; height: 114px; visibility: hidden;">
<table width="152"
cellspacing="O">
border="0"
cellpadding="O"
<tr>
<tdxa href="pathll">Subcategory
l</ax/td>
</tr>
<tr>
<tdxa href="pathl2">Subcategory
</tr>
<tr>
2</ax/td>
Web-
86
<tdxa href ="pathl3">Subcategory 3</ax/td>

</tr>
<tr>
</tr>
<tr>
<tdxa href="pathl5">Subcategory 5</ax/td>
</tr>
<tr>
<tdxa href = " javascript :doHide ( 'menu3 ') ; "
>Close</ax/td>
</tr>
</table>
<! div . >
<div id="menu4" style="position: absolute; left:'
stable width="152" border="0"
cellspacing="O">
cellpadding=":"
<tr>
<tdxa href="pathl6">Subcategory l</ax/td>
</tr>
<tr>
<tdxa href = "pathl7">Subcategory 2</ax/td>
</tr>
<tr>
</tr>
<tr>
<tdxa href="pathl9">Subcategory 4</ax/td>
</tr>
<tr>
<tdxa href="path20">Subcategory 5</ax/td>
</tr>
<tr>
<tdxa href =" ja\rascript :doHide ('menu4 ') ;"
>Close</ax/td>
10.
87
</tr>
</table>
<! div
. >
<table width="152" border="0"
cellspacing="O">
cellpadding="O"
<tr>
l</ax/td>
</tr>
<tr> .
<tdxa href = "path22">Subcategory
2</ax/td>
</tr>
<tr>
3</ax/td>
</tr>
<tr>
4</ax/td>
</tr>
<tr>
<tdxa href="path25<">Subcategory
5</ax/td>
</tr>
<tr>
<tdxa href = " javascript :doHide('menu5') ; "
>Close</ax/td>
</table>
<! , , ,
. ( )
. . >
<table
width="760"
cellspacing="O">
<tr>
<td width="152">
border="0
cellpadding="O"
Web-
88
<! onMouseOver ,
.

Category 1.
, doShowHide,
ID . >
< href="path26"
('menul');">
onMouseOver="doShowHids
Category 1
</td>
<td width="152">
<a href="path27"
('menu2');">
onMouseOver="doShowHid-;
Category 2
</td>
<td width="152">
<a href = "path28" onMouseOver="doShowHi in
('menu3');">
Category 3
</td>
<td width="152">
<a href="path29"
"( 'menu4 ' ) ; ">
onMouseOver="doShowHide
Category 4
</td>
<td width="152">
<a href="path30"
('menu 5') ; " >
Category 5
</td>
</tr>
</table>
</body>
</html>
onMouseOver="doShowHide
11.

, , , ,
. , . , , - , .
.
11.1. ,
, , .
,
,
.
Web- .
, Web- , . , 11.2, . : , Specials (
) , .

, . ,

. .

,
.

, . , . , - . , .
Web-
90
. 11,1. ,
:

. 11.2.
. ,

1 1 .
91
, Back () ,
. , . , .
JavaScript :
< h r e f = " j a v a s c r i p t : h i s t o r y . b a c k ( ) ; " > G o
back</a>
h i s t o r y . back , Back (). . , , Go Back ( ) .
,
,
Back (), ,
- . , .
Back () ( , ),
. . ? , .
, Go Back ( )
,
Back () , Go Back ( ) .
h i s t o r y . b a c k - h i s t o r y
JavaScript. 11.1 ,
. Go Back ( ) , Go Forward ( ) Go Two Steps Back ( ) .
. 11.1. history JavaScript
back()
history.back()
forward()
history.forward))
go(x)
(history.go(3),
) (history.go(-2)
)
12.

HTML.,
. , , . [
, , ,
Cold Fusion, Web-
(Cascading Style Sheets - CSS),
.
, , JavaScript CSS.
, JavaScript- CSS-,
HTML-.
TML - .
Web- , , . JavaScript
CSS : . , HTML-, , CSS-.
HTML- .
ckpunmoO
- ,
HTML. Web-, . JavaScript-, , HTML, ,
12.1. ,
HTML- .
, ,
. s c r i p t .
s c r i p t , :
<script
function doAlert()
a l e r t ( " 1 am a s c r i p t . " ) ;
</script>
12.
93
, HTML-, ,
, s c r i p t .
. 12.1. , script,
, HTML-,
. ,
HTML-. ,
.
(, , ,
, ) HTML-, head t i t l e :
<html>
<head>
<title>Page Title</title>
/* JavaScript- . */
</script>
</head>
<body>
/* . */
</body>
</html>
, , .
Web-
94
, , ,
, , :
<html>
<head>
<title>Page T i t l e < / t i t l e >
</head>
<body>
<!
. >
<script
/*
, . */
</script>
<!
. >
</body>
</html>

JavaScript, CSS,
HTML-, . s t y l e CSS ,
s c r i p t JavaScript-. ,
, CSS-, HTML:
<html>
<head>
< s t y l e type="text/css">
/*
CSS- . */
</style>
</head>
<body>
/*
. */
</body>
</h'tml>
JavaScript-,
HTML- head.
12.
95
script
style. , , . ,
- Web-
, , HTML script
s tyl e, :
</script>
HTML-.

, JavaScript-
. Web- , , .
s r c s c r i p t , :
<html>
<head>
< s c r i p t language="JavaScript"
src="../script/myscript.js">
</script>
</head>
<body>
< ! - . ->
</body>
</html>
s r c , , .
Web-
96

. s t y l e src, s t y l e . link:
<html>
<head>
<link
href="css/mystyles.ess'
"text/css">
rel="stylesheet"
type=
</head>
<body>
<! . >
</body>
</html>

. 42.
, link.
src, hre f, . . r e l
, type
, .
, ..
href,
, Web-, .
link head
HTML - .
, l i n k , </link>.
l i n k , s c r i p t - . , s c r i p t ,
JavaScript-. l i n k .
12.
97^
: ?
: .
?
- . .
.
Web-, , ,
, , .
,
,
. , . , .
, -,
- . , .
.
, , , W3C
, .
: .
, , , ,
.
4-191
13.

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

, , . , .
,
, ,
.
,
- , . ,
,
, .
,
, , HTML-. , , ,
, .
, , onClick, :
<
hrefj="#" onClick="doScript();">Launch
the'script</a>
, -. ,
href, ,
Refresh () .
? HTML- onClick, - .
13.
99_
-, * , , -. , , , , , .
, , , . , .
h r e f ,
:
< h r e f = " j a v a s c r i p t : d o S c r i p t ( ) ; " > L a u n c h
the
script</a>
, ,
, .
. j a v a s c r i p t : JavaScript h r e f . , h r e f .
: JavaScript-
ondick-?
JavaScript-, j a v a s c r i p t h r e f , ,
JavaScript , . , .
, onC l i c k . , JavaScript, . ,
.
HTML, JavaScript . , JavaScript- , onClick-.
2.
,

:
HTML- CSS-?

CSS
CSS-

CSS

CSS

CSS-
HTML

CSS
14.

. ,
,
.
, .
- , , . , . 14.1
, , . , 14.2.

,
?
, , nytim0s.com yahoo.com. ,
.
,
14.3, . . c o l span rowspan HTML , , . ,
HTML. , , ,
, .
Web-
102
t*
Bew
Favorites
loots
. i4.2. ,
,

; * * Randy's
New & Used Planets
Content goes here Content goes here Content floes .
. 14.2.

14.
103
Logo
. 14.3. ,
,
- ,
. , HTML , , .
, . - ,
. , 14.3,
, , .
- ,
.
, . HTML-.
,
, . , , , .
104
Web-

valigne
top. ,
. .
14.1 . ,
640 ,
640 . ,
, ,
, .
MSNTV, WebTV, , .
. 14.1.

544
544
WebTV/MSNTV
640
600
800
760
1024
955
1280
1210
1600
1530
, 1024 , ,
, (PDA), , ,
, , ,
, . ,
.

800 , 760 . ,
, ,
, . . .
, , . , ( ) .
105
14.
, 14.4, . HTML- -
, , - .
760 Logo
. 14.4.

border,
cellspacing
0. , cellpadding
,
.
14.1. 14.4
<div align="center">
<! ,
div . >
<table width="760" border="0" cellpadding="O"
cellspacing="O">
<tr>
<td width="760"
valign="top">Logo</td>
</tr>
<tr>
<td width="760"
valign="top">
<! . >
<table width="760" border="0" cellpadding="O" cellspacing^' Q">
<tr>
<td width="200" valign="top">Nav</td>
Web-
106
<td width="560" valign="top">Content</td>

</tr>
</table>
<! . >
</td>
</tr>
</table>
, .
. , , . , , , .
, width . ,
, width.

height:
<div align="center">
stable width="760" border="0" cellpadding="O" cellspacing="O">
<tr>
<td width="760" height="100" valign="top">Logo</td>
</tr>
<tr>
<td width="7 60" height="400" valign="top">
<! . ->
<table width="760" border="0" cellpadding="O" cellspacing^' 0">
<tr>
<td
width="200" height="40-0" valign="top"
>Nav</td>
<td
width="560"
>Content</td>
</tr>
</table>
height="400"
valign="top"
14.
107
<! . >
</td>
</tr>
</table>
h e i g h t ,
,
. , h e i g h t , , , h e i g h t .
:
HTML- CSS-kog?
Web-: HTML- (Cascading Style Sheets - CSS). ,
, . , . HTML-
. , World
Wide Web (W3C), , , t a b l e HTML . - , ,
.
. , , ,
HTML, , , . , , , .
CSS- , W3C. CSS , . , . Internet
Explorer, Netscape Opera CSS,
CSS . , CSS,
, , ,
. , CSS, , .
,
: .
,
CSS - .
15.

CSS
, , ,
,
. 14 , .
, (Cascading Style Sheets - CSS).

,
. ,
CSS, , 16.
, , ,
, . ,
CSS .
,
(divs), . d i v HTML,
Web-, . CSS
, HTML. ^
, .
di v HTML (division). Web-.

CSS-.
, , , CSS, , 15.1. , CSS . , .
15. CSS
109
760
Logo
Nav
Main Content Area
200 px
560 px
. 15.1. He .

:
1. Logo () 760 ;
2.
Nav () 200 ;
3.
Content () 560 .
. :
<div id="logo" s t y l e = " p o s i t i o n :
a b s o l u t e ; width:
760px;">
Logo
<div id="nav" style="position: absolute; width: 200px;">

Nav
<div id="content" style="position: absolute; width: 560px;">

Content
s t y l e CSS-,
width= "760", . CSS-, HTML-,
, s t y l e . :
Web-
110
(:), (=), /;
, , backgroundcolor, backgroundcolor background_color;
, , 56, 5 60
5 60 ;
/ (;).
,

leftmargin,
topmargin, marginv/idth
marginheight
0.
body. , .
, div .
. . : , }'
:
l e f t : 0px;">
absolute;
width:
760px; t o p :
Opx:
Logo
, ,
? - ). , . , , ,
100 .
, 100 , 15.2. , :
<div id="nav" style="position: absolute; width: 2 0 ; t o p : ;
left: Opx;">
Nav
,
CSS, Logo () height:
; t o p : Opx; l e f t : Opx;">
absolute;
width:
760px;
height:
15. CSS
111
Logo
, 100 ,
Logo (), , 200 ,
Nav ():
<div i d = " c o n t e n t " s t y l e = " p o s i t i o n :
; l e f t : 200px;">
absolute;
width:
560px;
top:
Content
760 px
Logo
Nav
200 px
Main Content Area
560 px
. 15.2.
,
Logo ().

,
CSS-

, CSS-, : , ,
.
<body leftmargin= '" topmargin="0" marginwidth="O'
marginheight="0">
<! div, ,
. >
Web-
112
<div id="banner" style="position: absolute;

width: designwidthpx; height: bannerheightpx; top:
Opx; left: ;">3
<! div >
<! div,
. , bannerheight 0. >
<div id="leftcol" style="position: absolute;
width: leftwidthpx; top: bannerheightpx; left:
Opx;">

<! div . >
<! div,
. , '
, bannerheight
0. ->
<div id="rightcol" style="position: absolute;
width: rightwidthpx; top: bannerheightpx; right :
Opx;">

<! div . >
<! div
.
, . >
<div id="middlecol" style="position: absolute;
width: middlewidthpx; top: bannerheightpx; left:
leftwidthpx; right: rightwidthpx;">

<! div . >
</body>
16.
CSS-
CSS- , .
- , , - .
. . 16.1 CSS-, .
, , - ,
.
760 px
100 px
Logo
Nav
200 px
Main Content Area
400 px
Links
-160px-
Puc. 16.1. CSS-, ,

,
,
:
1.
Logo () 760 ;
2.
Nav () 200 ;
Web-
114
3.
Content () 400 ;
4.
Links () 160 .
, .
, s t y l e body
:
<body s t y l e = " m a r g i n - l e f t :
50%;">
, , , , . ,
.
, ,
.
:
<div i d = " c o n t a i n e r " s t y l e = " p o s i t i o n :
-380px;">
relative;
width:
760px;
left:
, . ,
, -,
380 . 380 ?
380 - 760, . . .
,
. ,
16.1 .
. 16.1.

640
600
300
800
760
380
1024
954
477
1280
1210
605
1600
1530
765
16. CSS-
115
, 15. , ,
- , , -
, .
:
<body s t y l e = " m a . r g i n - l e f t : 50%; ">
<! style . >
<! .
, body,
. >
<div id="container"
left: -380px;">
style="position:
relative; width:
760px;
<! . >
<div id="logo" style="position: absolute; width: 760px; top:
Opx; left: 0px;">
Logo
<div id="nav" style="position: absolute; width: 200px; top:
lOOpx; left: 0px;">
Nav
<div id="content" style="position: absolute; width: 400px;
top: lOOpx; left: 200px;">
Content .
<div id="links" style="position: absolute; width: 160px; top:
lOOpx; left: 600px;">
Links
<! . >
<! . >
</body>
17.

, , - , . -
, , , 600 760 , , .
, , - ,

.
, . ,
. , , ,
,
,
Largest ( ). .
, , , ?

, ?
, , Amazon
eBay. ( , ) .
,
. , ,
, , 600 . ,
, , , .
117
17.
, ,
. . w i d t h
(*), HTML . , , , .
.
, ( w i d t h ) ?
, .
, 17.1. , . ,
. , c o l s p a n , . ,
, rowspan c o l s p a n . ,
, ,
, .
600 -
Links
Logo
-200 Nav
-400 Content
150 -
More
Links
- 300 -
-100 -
. 17.1. , .
.
17.1. 17.1
<table width="600" border="0" cellpadding="O" cellspacing="O">
<tr>
<td>
<! . >
<table width="600"
ing^' 0">
<tr>
border="0"
cellpadding="O" cellspac-
Web-
118
<td width="200">Logb</td>
<td width="400">Links</td>
</tr>
</table>
<i . >
</td>
</tr>
<tr>
<td>
<! . >
<table width="600"
ing="0">
border="0"
<tr>
<td width="150">Nav</td>
<td width="350">Content</td>
<td'width="100">More links</td>
</tr>
</table>
<! . >
'</td> ~
</tr>
;/table>
600 , 640 . . , , w i d t h , , ,
.
,
, .
. , , ,
.
Links (), w i d t h , 17.2.
w i d t h 100%.
, , 600 ,
17.
119
.) Logo () ,
200 , Links ()
. Logo (),
Links (), 400 ,
Logo (), .
600 Links
Logo
-200 -
Nav
Content
150 -
More
Links
300 -
-100 -
. 17.2. Links ()

17.2. 17.2
<table width="100%" border="0" cellpadding="O"
cellspacing="O">
<tr>
<td width="200">Logo</td>
<td width="*">Links</td>
</tr>
:/table>
Content () , 17.3.
, Content (),
,
.
width Content (), width
100%.
120
Web-
width 100%,
, . 17.4
.
- 600 Logo
Links
-200 Content
Nav
More
Links
-150
>- -* 100 -
. 17.3. Content ()

17.3. 17.3
<table width="100%" border="0" cellpaddi:ng="O" cellspacing="O">
<tr>
<td width="*">Content</td>
<td width="100">More links</td>
</tr>
</table>
100%
Logo
Links
-200 px-
Nav
Content
150 px > -*
More
Links
*- *-100 px -
. 17.4. width
100%,
17.
121
17.4. 17.4
<table width="100%"
border="0" cellpadding="O"
cellspacing="O">
<tr>
<td>
<! . >
<table
ing="0">
width="100%"
border="0"
cellpadding="O"
cellspac-
<tr>
<td width="2 00">Logo</td>
<td width="*">Links</td>
</tr>
</table>
<! . >
</td>
</tr>
<tr>
<td>
<! . >
<table width="100%" border="0" cellpadding="O" cellspacing="0">
<tr>
<td width="*">Content</td>
'
<td width="100">More links</td>
</tr>
</table>
<! . >
</td>
</tr>
</table>
18.

CSS
17, , , -
,
.
, , , (Cascading Style
Sheets-CSS).
CSS- , leftmargin,
topmargin, marginheight
marginwi dth body 0, .

, 18.1. CSS- ,
. . HTML-.
, . , , Content () ,
, ,
200 Nav () 150 Links ().
, Content () , Logo ()? ,
w i d t h ,
100%, , 100%, Logo () .
CSS . , Logo () ,
CSS-. Logo () , 18.2.
CSS- , . :
, w i d t h 100%.
-
- w i d t h .
18. CSS
123
Logo
Nav
Main Content Area
Links
. 18.1. CSS.
?
100%
Logo
Nav
Main Content Area
Links
. 18.2. CSS,
Logo ().
,
Logo () ,
, . :
<di'v id="logo" s t y l e = " p o s i t i o n :
lOOpx; t o p : Opx; l e f t : 0px;">
Logo
absolute;
width:
100%;
height:
124
Web-
:
<div id="nav" s t y l e = " p o s i t i o n :
l e f t : Opx;">
absolute;
width:
200px; t o p : lOOpx;
Nav
<div id="links" style="position: absolute; width:

lOOpx; right: Opx;">
150px; top:
Links
s t y l e Links (), ,
r i g h t : Opx. . s t y l e , , Content (), , , .
Content ():
<div i d = " c o n t e n t " s t y l e = " p o s i t i o n :
20Opx; r i g h t : 150px ; ">
absolute;
top:
lOOpx;
left:
Content
,
. width, 200 150 . ? , .
,
, , . ,
, . Content () ,
, ,
.
: , CSS. 18.3 .
18. CSS
125
100%
Logo
Nav
Main Content Area
200 px
Links
-150 px-
100%
. 18.3. ,
CSS
CSS
,
CSS- : ,
, .
<body
leftmargin="0"
topmargin="0"
height="0" marginwidth="O">
margin-
<! d i v , ,
. >
<div
id="banner"
width: 100%; h e i g h t :
l e f t : 0px;">
style="position:
bannerheightpx;
absolute;
t o p : Opx;

<! d i v . >
<! d i v ,
.
width, ,
. , bannerheight 0 . >
<div
width:
Opx;">
id="leftcol"
style="position:
absolute;
leftwidth;
top: bannerheightpx;
left:
126
Web-

<! div . >
<! div,
. div
,
. ,
, . >
<div id="rightcol" style="position: absolute;
width: rightwidth; top: bannerheightpx; right:
Opx; " >

<! div . >
<! div
. , . >
<div id="middlecol" style="position: absolute;
top: bannerheightpx;
left: leftwidth;
right:
rightwidth;">

<! div . >
</body>
19.

Web- .
, , , Macromedia Fireworks, Adobe Photoshop
Adobe ImageReady. , 19.1, HTML-, Web-. , :
, - .
- , , Fireworks Photoshop. , , .
HTML-, Web-.
, - .
, - , HTML, .
, , , . , (, , 19.1), HTML-. ,
, , 19.2.
,
. , 19.1, , 19.3, .
.
Web-
128
600x80
100%
Puc. 19.1. ,
, Macromedia Fireworks,
HTML-, Web-
File
Edit
View
Favwltes
Ioois
. 19.2. .
,
19.
1.
D?-l* :
129
S i W *
. 29.3. ,
,

? - , HTML- .
, 19.4. ,
, , , .
-*
600 -
*-
Nav
Main Content Area
-*-125-
-475px
*-
Footer
. 19.4. ,
,
, HTML-
Web-
130
19.1. 19.4
ctable width="600" border="0 " cellpaddir,g="0" cellspacing="O">

<tr>
<td>Top</td>
</tr>
<tr>
<td>
<! . >
<table width="125" b o r d e r = " 0 "
ing= " 0 " >
<tr>
<td>Nav</td>
<td>
<! . >
ctable width="47 5" ",Dorder="0"
cellspacing="O">
cellpadding="C"
<tr>
<td>Main Conten t Area</td>
</tr>
<tr>
<td>Footer</td>
</tr>
</table>
,-
<! . ->
'
</td>
</tr>
</table>
<! . ->
</td>
</tr> </table>
i
.
19.
File
ew
FjvotKes
loots
131
. 19.5. HTML-,
, .
,
HTML- , , , , , 19.5.
,
. , .
, , .
20.

,
, , 20.1. < > , , ,
, , ..
760 Banner
Text Column 1
Text Column 2
-380 -
-380 px-
Puc. 20.1.
,
, ,
border, cellpadding c e l l s p a c i n g 0.
,
. ,
. , , 20.2, .
, . ,
.
, , ,
.
20.
133
c e l l s p a c i n g table. c e l l s p a c i n g . c e l l s p a c i n g
, 0, . , , , 12 16 , . , 20.3, cellspacing, 12.
cellspacing

, .

. , , cellspacing

0, ,
.
width , , :
<table
width="412'
eel 1spacing="0">
border="0"
cellpadding="O"
<tr>
<td width="200"
valign="top">First
column of
text</td>
<td width="12"><.'
<td
text</td>
width="200"
valign="top">Second
column
</tr>
</table>
Edit
Favorites
loots
Help
How do you like reading this textSetting the cellspacing to zero in

when there isn't any white space a multi-column layout isn't the
between the columns''
best approach.
Puc. 20.2.
, -
of
Web-
134
Reading the text is easier with

just a little extra white space
between the columns.
This example uses a

cellspacing of 12 to create
just enough of a visual break.
. 20.3. cellspacing
,
, 12,
20.1. 20.3
<table width="400"
border="0"
cellpadding="O"
cellspacing="12">
<tr>
<td width="50%"
valign="top">
<p>Reading the text is easier with just a little extra

white space between the columns.</p>
</td>
<td width="50%" valign="top">

<p>This example uses a cellspacing of 12 to create just
enough of a visual break.</p>
</td>
</tr>
</table>
:
.
. ,
, , .
v a l i g n t o p .
, . , .
, . , .
, , .
20.
135

, .
.
stable width="contentcellwidth" border="0"
padding="0" cellspacing="whitespacewidth">
cell-
<! t a b l e , , .
, , 12 16 . ->
<tr>
<! . -,
, . width .
width
50%.
width 33%. width 2 5% . ->
<td width="columnwidth"' valign="top">

</td>
<! . >
</tr>
</table>
21.

CSS
,
, 20, ,
CSS
.
, 21.1, . - . , ,
, .
560 Banner
Text Column 1
Text Column 2
172
172
. 21.1.
,
21.1. 21.1
<div id="logo"
; ">
style="position:
relative;
width:
560px;
height:
Banner
<div id="container" style="position: relative; width: 560px;">
<! >
<div id="leftcolumn" style="position: absolute;
left: Opx;">
Text Column 1
width: 172px;
21 CSS
<div id=middlecolumn" s t y l e = " p o s i t i o n :

l e f t : 186px;">
137
absolute;
width:
172px;
<div id="rightcolumn" s t y l e = " p o s i t ion: a b s o l u t e ;

l e f t : 372px;">
width:
172px;
Text Column 2
Text Column 3
<! >
, ,
. CSS- , CSS . ~
. 20 , ,
CSS-.
:
1.
, . 21.1 560 , ,
560 , 186 . .
2.
,
, 1. , , 186 14 , 172 .
3. , - , . 0 . , 1, 186 . , 372 , , , .
, .
, , .
Web-
138
,
, CSS-.
, ?
,
.
, .
CSS

.
. ,
- , .
<! p,v .
, 1,
.
coluinnwidth , 2 .
columnposition , 1 . >
<div
id="columncolumnnumber"
a b s o l u t e ; width: columwidthpx;
tion * columnnumber)px;">
style="position:
l e f t : (columnposi-

<! .
,
. >
22.

. , , , , .
, , ,
, 22.1.
,
, .
600
Nav
Main Content Area
250
-125 -
. 22.1. , ,

22.1. 22.1
<table width="600">
<tr>
<td colspan="2">Top</td>
</tr>
<tr>
<td height="250">Main Content Area</td>
</tr>
</table>
140
Web-
, i ia
, rowspan,
22.2.
, 22.2, , . (
250 .) . ,
, . , ,
.
600
Nav1
Main Content Area
Nav2
250 px
Nav3
Nav4
Nav5
-<125px*-
. 22.2. , , ,

22.2. 22.2
stable width="600">
<tr>
</tr>
<tr>
...
<td width="125">Nav l</td>

<! >
<td height="250" rowspan="5">Main Content Area</td;>
</tr>
<tr>
<td>Nav 2</td>
< / t r >
<tr>
22.
141
<td>Nav 3</td>
</tr>
<tr>
<td>Nav 4</td>
</tr>
<tr>
<td>Nav 5</td>
</tr>
</table>
, :
- . , , , Largest (
). ,
- . - , , .
22.3 , .
.
-*
600 px
*-
Top
Nav1
Main Content Area
Nav2
Nav3
400 px
Nav4
Nav5
-.125 px*-
. 22.3.

Web-
142
, 22.4. , ,
. , .
ft
Main Content Area

Content goes here Content goes here Content goes here
Content goes here
Content goes here. Content goes here. Content goes here.
Content goes here
Content goes here
Content goes here
Content goes here
. 22.4.

, , . -,
. -
, . . -, , , . ,
. .
? . 22.2 , , rowspan="5". , , .. . , , , , - -
.
. ,
, , , .
,
, , .
22.
143
, , ,
.

, . , 21.1. : , , - , 22.5.
600 px
Top
-100%*
Nav1
Main Content Area
Nav2
250 px
Nav3
Nav4
Nav5
-125 px
. 22.5.

, height,
, .
22.3. 22.5
<table width="600">
<tr>
</tr>
<tr>
<td width="125"
valign="top">
<! . >
Web-
144
<table width="100%">
<tr>
. '.
<td>Nav l</td>
.
</tr>
<tr>
<td>Nav 2</td>
</tr>
<tr>
<td>Nav 3</td>
</tr>
<tr>
<td>Nav 4</td>
</tr>
<tr>
<td>Nav 5</td>
</tr>
</table>
<! . >
</td>
<td height="250" valign="top">Main Content Area</td>
</tr>
:/table>
, width
100%. , . ,
v a l i g n = " t o p " . , , , .
, ,
table . ,
cellpadding,
cellspacing
border 0, :
<table width="100%'
border="0">
eellpadding="0" eel 1spacing="0"
22.
145
, .
, ,
. 22.6 .
, , , ,
.
Main Content Area

Nav |
Content'goes here Content goes here Content goes here

Content goes hers
Content goes here.
Content goes here. Content goes here. Content goes here
Content goes here
Content goes here Content goes here. Content goes here
Content goes here
Content goes here.
. 22.6. ,
,

,
,
Macromedia Fireworks, Adobe Photoshop Adobe ImageReady, , . , . 19.
23.

HTML bgcolor, . BameMv
. , 23.1, 23.2, .
Logo
Links
Puc. 23.1.
23.1. 23.1
<table width="760" border="0" cellpadding="O" cellspacing="O">
<tr>
<td width="760" valign="top">Logo</td>
</tr>
<tr>
<td width="760" valign="top">
<table width="760" border="0" cellpadding="O" cellspao
ing="0">
<tr>
<td
width="200" valign="top">Nav</td>
<td
width="400" valign="top">Content</td>
<td width="160" valign="top">Links</td>

</tr> ',
23.
147
</table>
</td>
</tr>
</table>
,
. HTML, ,
.
. 23.2. Logo (), Nav ()

Links (),

23.2. 23.2
<table width="760" border="0" cellpadding="O".cellspacing="O">
<tr>
<td width="760" valign="top" bgcolor="#99CCFF">Logo</td>
</tr>
<tr>
<td width="760" valign="top">
<table
ing="0">
<tr>
width="760" border="0" cellpadding="O" cellspac-
Web-
148
<td
width="200"
Nav</td>
valign="top"
bgcolor="#99CCFF":-
<td width="400" valign="top">Content</td>

<td
width="160"
>Links</td>
valign="top"
bgcolor="#99FF9
'
</tr>
</table>
</td>
</tr>
</table>
, 23.2 ,
. (#), . 16, 10,
, ,
, . 0 9.
- F,
. , , FC FF, . .

16, 10. 0 9 ,
F .
, .
, ,
- .

. .
, - . , , . , .
, #FF0000.
, FF ,
23.
149
00 00 .
, FF -
.
. , #00FF00 ( , , ), #0OOOFF ( , , ).
. &FC02D5 , FC , 02 - , D5 - .
, : 0, 3,
6, 9, F. , Web-
FC02D5 #FF00CC.
, , , . , , ,
, #FF00FF, . , ,
. , , , #FF0099 #FF0066. , .
, #9.900FF #6600FF.
- , , ,
bgcolor= "lightgreen",
,
. , . darkgray (-) , gray ().
,
, - , 23.1,
.
150
Web-
. 23.1. >

Web-
- aqua
#OOFFFF
#00FFFF
black
#000000
#000000
blue
#0000FF
#0000FF
darkblue
#00008B
#000099
lightblue
#ADD8E6
#CCCCFF
skyblue
#87CEEB
#99CCFF
gold
#FFD700
#FFCC00
gray
#808080
#999999
dimgray
#696969
#666666
green
#008000
#009900
darkgreen
#006400
#006600
lightgreen .
#90EE90
#99FF99
seagreen
#2E8B57
#339966
indigo
#4B0082
#330099
orange
#FF5A00
#FF9900
pink
#FFC0CB
#FFCCCC
purple
#800080
#990099
red
#FF0000
#FF0000
darkred
#8B0000
#990000
silver
#cococo
#cccccc
violet
#EE82EE
#FF99FF
white
#FFFFFF
#FFFFFF
yellow
#FFFF00
#FFFF00
* darkgray (-) , gray (). dimgray (-).
24.

-
23 , . , ,
, HTML- . ,
CSS,
, . ,
CSS- .
, 24.1, , ,
- ,
18. ,
. 24.2, backgroundcolor .
24.1. 24.1
lOOpx; t o p : Opx; l e f t : 0px;">
absolute;
width:
100%;
height:
Logo
<div id="nav" style="position: absolute; width: 200px; top: lOOpx;

left: 0px;">
Nav
<div id="links" style="position: absolute;

lOOpx; right: 0px;">
Links
<div id="content" style="position: absolute;

200px; right: 175px;">
Content
width:
175px; top:
top: lOOpx;
left:
152
Web-
PMC. 24.1. CSS-
. 24.2. CSS- ,
Logo (), Nav () Links ()
24.2. 24.2
<div id="logo" s t y l e = " p o s i t i o n : a b s o l u t e ; width: 100%;
'lOOpx; t o p : Opx; l e f t : Opx; background-color: #99CCFF;">
height
Logo
<div id="nav" style="position: absolute; width: 200px; top: lOOpx;

left: Opx; background-color: #99CCFF;">
Nav
24. CSS-
<div id="links" style="position: absolute; width:
; r i g h t : Opx; background-color: #99FF99;">
153
175px;
top:
Links
<div id="content" style="position:

200px; r i g h t : 175px;">
absolute;
top:
lOOpx;
left:
Content
,
. 23 .
CSS, . , Links ()
, 24.3.
. 24.3.
CSS Links ()
, , . 24.1 .
:
<div id="links" style="position: absolute; width: 175px; top:
154
Web-
; right: Opx; background-color: #99FF99; border-width:

border-style: solid; border-color: #000000;">
4px;
Links
,
, , 24.4.
. 24.4. ,
, .
p a d d i n g , 24.5.
24.3. 24.4
<div id="links" style="position: absolute; width: 175px;
; right: Opx; background-color: #99FF99; border-width:
border-style: dashed; border-color: #0000FF;">
tcp:
2px;
Links
24.4. 24.5
<div id="links" style="position: absolute; width: 175px; tcp:
; right: Opx; background-color: #99FF99; border-width: 2px;
border-style: dashed; border-color: #0000FF; padding: 12px;">
Links
24. CSS-
155
, , , ,
. 24.1.
'
'
'
'
. 24.5. padding
, ( ) 10, ' , , 24.6.
. 24.6. ? ,
visibility
h i dden
24.5. 24.6
<div
id="links"
lOOpx; r i g h t :
style="position:
absolute;
width:
175px;
Opx; background-color: #99FF99; border-width:
top:
2px;
Web-
156
border-style: dashed; border-color: #0000FF; padding: 12px; "' visi -,

bility: hidden;">
Links
24.1 CSS- pau . , , CSS , - HTML-. ,

HTML- , , CSS, .

CSS. cellpadding?
. HTML- cellpadding,
padding CSS. HTML- cellpadding

.
, , . CSS paddi ng.
. 24.1. CSS-

backgroundcolor
*
- background
c o l o r : #FFCC0C
border-color
- b o r d e r - c o l o r t o p : #000000;

border-colorb o t t o m ,
border-colorbottom: #00000:
border-color-
left

border-colorleft: #000000;
border-color-
right

b o r d e r - c o l o r
r i g h t : #00000'
border-colortop: #000000;
border-colortop
border-style
border-style:
dashed, dotted, double,
groove, inset, outset, ridge, dashed;

solid
border-style-
bottom
border-styledashed, dotted, double,

groove, inset, outset, ridge, bottom: dotted;
solid
157
24. CSS-
borderstyleleft
*
groove, inset, outset, ridge, left: double;
solid
border
styleright
border
style-top

groove, inset, outset, ridge, right : groove;
solid
groove, inset, outset, ridge, top: inset;
solid
borderwidth
, - border-width:
CSS, 4px;
: , cm in
borderwidthbottom
- , - border-width
CSS, bottom: 0.03cm;
: , cm in
borderwidthleft '
borderwidthright
- , - border-width" CSS, right: 4px;

: , cm in
border
width-top
padding

padding bottom

, - border-width CSS, left: 0.03in;

: , cm in
, - border-width CSS, top: 0.03 in;

: , cm in
, - padding: 12px;
CSS,
: , cm in
, - padding-bottom:
CSS, 0.33cm;
: , cm in
paddingleft
, - padding-left:
CSS, 0.33in;: , cm in
paddingright
, - padding-right:
CSS, 12px;
: , cm in
paddingtop
, - padding-top:
CSS, 0.33cm;
hidden, visible
visibility
: , cm in.
v i s i b i l i t y : hidden;
, , .
25.

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

, ?
IE Netscape , , , , , .
,
body 0. , .
Internet Explorer leftmargin
topmargin:
<body leftmargin="0"
topmargin="0">
Netscape marginwidth marginheigh;:

<body marginwidth="O" marginheight="O">
, :
<body
leftmargin="0"
height="0">
topmargin="0"
marginwidth="O"
margin-
, , . leftmargin topmargin IE , , , , marginwidth

Netscape , marginheight - .
, IE Netscape, , , marginwidth IE.
, leftmargin
Netscape.
, CSS
HTML ( 26).
26.

CSS
25, HTML body
, - . , .

(CSS). body , :
<body style="margin:
Opx;">
- , , -
,
.
,
CSS, CSS-. .

(, , ) .
CSS . margin-top,
margin-left, margin-right margin-bottom . ,
26.1, , 200 , , 300 , , 400 , , 100 .
26.1. 26.1 '
<body style="margin-top: 200px; m a r g i n - l e f t :
400; margin-bottom: 100px;">
margin-right:
margin,
(, , ),
:
<body style="margin:
200 400 100 ;"> '
Web-
160
Fiie
Edit
View
Favorites
Tools
This page uses

CSS to control
the space on
all four
Puc. 26.1. CSS

3.
,

Web-

HTML

HTML

CSS

CSS-

Web-
27.

, . ,
, , , , ,
. Microsoft, ,
Windows (BMP),
Netscape. , ,
:
1.
2.
,
?
.
GIF, JPEG PNG, Web-
.
<
GIF PNG .

. ,
GIF CompuServe,
PNG - . GIF
.
.... ,
, .
, JPEG,

GIF PNG. ? JPEG , GIF PNG. GIF
PNG , ,
256 .
.
, 256 . GIF PNG, , ,
JPEG, .
27.
163
. GIF PNG , 256 ,

JPEG
256 .
256 , GIF PNG , .

. , JPEG GIF. ,
. , , Adobe Photoshop Macromedia Fireworks, ,
.
, . GIF PNG , GIF .
JPEG , 27.1.
GIF PNG
. , Web- .
. 27.1. Web-
GIF
Graphics Interchange
Format ( )
;
256
JPEG
Joint Photography
Experts Group ( )
PNG
Portable Network
Graphics ( )
; ;
256

28.
Web-
Web , . - Web-,
.
DSL- , ,
- . , ,
,
.
, , . , , , . : . , , . , , HTML- . ,
, ,
.
Web
,
.

Web ,
. , .
. Adobe Photoshop Elements,
Photoshop, Web-,
$100. Jasc Paint
Shop Pro, . Web- -
,
Photoshop Macromedia Fireworks. ,
.
28. Web-
165
Web-, , .

.

: , , , .
,
.
,
" . Web-
. , Windows,
96 ppi ( ), , , . Macintosh
, 72 ppi. - , 72 ppi Web-,
, 96 ppi.
:
, .
:
, - 72 96 ppi.
Web- , , 300 600 ppi,
.
, 28.1. , ?
Web-
166

Web- ?
72 ppi
, , .
.
,
.
Puc. 28.1. 600 ppi,

- 72 ppi - , , .
,

, , , . , , . ,
. ,
, , , , .
- , , .
28. Web-
167
, Web-
72 ppi.
.

. Web-,
(.. ). , . , , , , .
, , .
,
. HTML
300 150 , , 60 30 ,
w i d t h h e i g h t img ( 29). 60
30 , . 300 150 , .
, . , , .

6IF PNG
27, GIF PNG , 256 . ,
. GIF
PNG 256 , .
GIF PNG ,
.
Web-
168
, . , ,
. , , ,
, . GIF PNG. .
- ,
.

6 JPE6
JPEG , GIF PNG. JPEG ,
,
. , .

JPEG .
.
JPEG.
, , JPEG, , .
.
JPEG ,
. , . ,
.
29.

HTML
, , , . .
, , width height img,
29.1.
29.1. 29.1
<img src = "logo. jpg" width="150" height=-"75">
. 29.1. img,
,
, ,
. 29.2. width height,

HTML
170
Web-
, ?
, ,
29.2.
29.2. 29.2
<img s r c = " l o g o . j p g "
width="300"
height="35">
width height,
, 29.3.
' 29.3. 29.3
<img s r c = " l o g o . j p g "
width="300"
height="150">
mylOCO
. 29.3. width
heigh t, HTML
. HTML -
Photoshop , , . ,
.
HTML, ,
, .
, , HTML.
, , 29.2 29.3,
, .
HTML
.
.

HTML
- ,
. , , , , , ,
CSS- .
- ,
HTML-.
HTML img , , 30.1. , , .

, , .
30.1. 30.1
<h2>A complete b r a i n - t r u s t
solution</h2>
<p>When you consult with us, y o u ' l l be amazed at the r e s u l t s . We offer

the most i n t e r e s t i n g , c r e a t i v e , out-of-the-box, and forward-thinking
ideas <img src="images/bulb.gif" width="47" height="84"> in the
industry. You won't believe what w e ' l l come up with next. We have won
several i n t e r n a t i o n a l awards for our ideas alone, including the p r e s t i g i o u s Nobel P r i z e . You simply won't find b e t t e r ideas anywhere.</p>
a l ign img , 30.2. a l i g n 30.1.
,
, ,
, .
, .
Web-
172
A complete brain-trust solution

\When you consult with us, you'll be amazed at the results. We offer the most
interesting, cieative, out-of-the-box, and forward-thinking ideas in the industry
' Y o u won't believe what we'll come up with next We have won several
international awards for our ideas alone, including the prestigious Nobel Prize
You simply won't find better ideas anywhere.
When you consult with us, you'll be amazed at the

results. W e offer the most interesting, creative, outof-the-box, and forward-thinkjng ideas in the
industry You won't believe what we'll come up with
next We have won several international awards for
our ideas alone, including the prestigious Nobel Prize You
simply won't find better ideas anywhere.
Puc. 30.2.
Puc. 30.1. img
align
, ,

30.2. 30.2
<h2>A complete brain-trust solution</h2>
<pximg src="images/bulb.gif" width="47" height="84" align="left">
When you consult with us, you'll be amazed at the r e s u l t s . We offer
the most interesting, creative, out-of-the-box, and forward-thinking ideas in the industry. You won't believe what we'll come up with
next. We have won several international awards for our ideas alone,
including the prestigious Nobel Prize. You simply won't find better ideas anywhere.</p>
. . align img
bottom
; >
left
middle
right
top
, img ,
30.2.
31.

CSS
, ,
l e f t r i g h t a l i g n img
( 30),
(CSS). , CSS , a l i g n . , CSS ,
, CSS- .

, 31.1. , CSS- f l o a t : l e f t ; ,
f l o a t : r i g h t ; .
File
View
Favorites
Iwls

^ When you consult with us, you'll be amazed at the results We offer the most
resting, creative, out-of-the-box, and forward-thinking ideas in the industry
' You won't believe what well come up with next We have won several
international awards for our ideas alone, including the prestigious Nobel Prize
You simply won't find better ideas anywhere.
. 31.1.
CSS
31.1. 31.1
<pximg src = "images/bulb.gif" width="47" height="84" style="f loat:
left;">When you consult with us, you'll be amazed at the results.
We offer the most interesting, creative, out-of-the-box, and forward-thinking ideas in the industry. You won't believe what we'll
come up with next. We have won several international awards for our
ideas alone, including the prestigious Nobel Prize. You simply won't
find better ideas anywhere.</p>
174
Web-
, CSS ,
a l i g n img. , , 31.2. -.
.
31.2. 31.2
<h2>A complete b r a i n - t r u s t solution</h2>
<img src="images/bulb.gif"
left;">
width="47" height="84"
style="float:
<p>When you consult with us, y o u ' l l be amazed a t the r e s u l t s .

won't b e l i e v e what w e ' l l come up with next.</p>
You
<p>We have won s e v e r a l i n t e r n a t i o n a l awards for our ideas alone,

including the p r e s t i g i o u s Nobel P r i z e . You simply won't find better ideas anywhere.</p>
Eto
Edit
ttew
Favorite*
Ioois Mdp

;ults You won't believe what we'll come up with
We have won several international awards for our

ideas alone, including tiie prestigious Nobel Prize. You simply
won't find better ideas anywhere
Puc. 31.2. ,
,
, , ,
, 31.3.

:sults You won't believe what well come up with
next
We have won several international awards for our ideas

alone, including the prestigious Nobel Prize We have won
more awards Ihan any other brain trust in the greater
Cleveland area You simply won't find better ideas anywhere
In fact, we guarantee it How's that for a great idea?
Puc. 31.3. ,

3 1 .
175
31.3. 31.3
<h2>A complete brain-trust soiution</h2>
left;">
width="47", height="84"
style="float:
<p>When you consult with us, you'll be amazed at the r e s u l t s . You

won't believe what we'll come up with next.</p>
<p style="clear: left;">We have won several international awards for
our ideas alone, including the prestigious Nobel Prize. You simply
won't find better ideas anywhere.</p>
, , , ,
31.4. ,
.

"\When you consult with us, you'll b e amazed at the
-esuks You won't believe what we'll tome up with
next.
We have won several international awards for our

ideas alone, including the prestigious Nobel Prize
We have won more awards than any other brain trust
m the greater Cleveland area. You simply won't find better
ideas anywhere In fact, we guarantee it How's that for a
great idea?
. 31.4.
, ,

31.4. 31.4
left;">
width="47"
height="84"
style="float:
<p>When you consult with us, you'll be amazed at the r e s u l t s . You

won't believe what we'll come up with next.</p>
right; "> '
width="47"
height="84"
style="float:
<p styie="clear: left;">We have won several international awards for

our ideas alone, including the prestigious Nobel Prize. We have won
more awards than any other brain trust in the greater Cleveland
area. You simply won't find better ideas anywhere. In fact, we guarantee i t . How's that for a great idea?</p>
Web-
176
, right;.
clear:

, c l e a r : both;.
31.1 CSS- 1 [ .
. 31.1.
CSS
clear:
both;
clear:
left;
c l e a r : right;
float:
left;
float:
right;
32.

- , . Web-, DHTML, : , , ; onMouseOver, , ,
. ( ,
JavaScript, .) ,
Macromedia Flash, : onclick, , , .
- , .
, , Web-. , , .

?
JavaScript. onMouseOver
onCl i ck JavaScript.
, , . , , ,
. - , , - , ,
.
: . , , . , , .
178
Web-
onMouseOver , , , . o n c l i c k ( ) , ,
.
, , - , : - . ; , ,
, . .
,
? ,
, , ,
, Star Trek.
, - . ,
, 32.1 , 32.1 .
. 32.1.
,

32.
179
. 32.1.
onMouseOver
()
onClick ()
, ;
,
( onMouseOver
);

, onMouseOver;
(
);
(
onMouseOver);
( '
onMouseOver).

onMouseOver, , ,
. onCl ickn
- ..
, , onMouseOver.
,
.
onMouseOver,
, (.. ),
.
onclick , Flash.
.

- , , .
, . , JavaScript- , .
- ,
, .
, :
1. ;;
2.
onMouseOver , , ;
3. JavaScript-, .
. . . -, ,
. ,
, , .

. , , ,
.
JavaScript- , . getElementByld, .
: ,
, , onMouseOver,
onMouseOver .
33.
181

width height img .
, onMouseOver
, ,
onMouseOver, .
onMouseOver . ,
, onMouseOver;
, .
JavaScript.
onMouseOver , , onMouseOut . onMouseOut ,
,
, , .

DHTML- . <html>
<head>
<title>Rollover Graphics</title>
function doRollover(imagelD, imageSource) {
/* : imagelD (ID
, )
imageSource ( ,
).
JavaScript . */
document.getElementById(imagelD).src = imageSource;
</script>
</head>
<body>
<! '
,
. >
Web-
182
<img id="imageid"
s = "imagepath"
width="imagewidth"
height="imageheight"
onMouseOver="doRollover( 'rolloverid' ,
'mouseoverimagepath');"
onMouseOut="doRollover('rolloverid',
imagepath');">
'default-
<! :
imageid - ,
, , imgOl happyface.
.
imagepath - , ,
images/icecream.jpg. ,
.
imagewidth imageheight
.
rolloverid - , .
, rolloverid imageid.
,
rolloverid
, .
.
mouseoverimagepath - ?
,
,
, i images/icecream_ro.jpg.
, . .
defaultimagepath -
. -, ,
,
. ,
defaultimagepath imagepath. , defaultimagepath
src .
>
</body>
</html>
33.
183

, , , .
, onMouseOver onMouseOut , , , .
:
onMouseOver ,
, , , __ jbver. ,
button.gif,
onMouseOver
button_ro.gif
button_over.gif. .
,
.
, : NavHomeOff.gif
NavHomeOn.gif .
, .
, ,
.
: , , ,
, img, : imgO1, imgO2, imgO3 .
,
,
. ,
.
34.

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

. , . ,
Web-,
HTML-, .
. a l t img, :
<img src = "neptune. jpg" width="'3OO" height = "150" a l t = "
, Hubble.
- .">
,
,
alt, .
alt
.'
, . . , ,
. ,
a l t , , .
, .
,
. ,
:
<img src = "neptune. jpg"
" >
width="300" height = "150"
a l t = "ItaaHeTa -

,
. , ,
34.
185
, ,
, ,
. -, , , ,
.
. , , , :
. , , , ,
.
35.

- , , . , . , , , , .
- ,
.
. Web-.
HTML-, , .
, :
1. ;
2. , .
, - 35.1. ,
img usemap, , .
i.
HTML-,
, ,
. , , , .
35.1. 35.1
<img src="images/mars.jpg"
width="500" height="300" usemap="#mars">
<! >
<map name="mars">
<area shape="rect" coords="9,3,164,148"
href="mars01.htm">
href="marsO2.htm">
35.
187
<area shape="rect" coords="334,5,487,149" href="marsO3.htm">

<area shape="rect" coords="9,151,163,294" href="marsO4.htm">
<area
"marsO5.htm">
shape="rect"
coords="171,153,327,296"-
href=
<area
"marsO6.htm">
shape="rect"
coords="334,152,488,295'
href =
</map>
< l- >
Bis
E*
Bew
Favorlo.
Ms
H*
. 35.1.
HTML-,
map HTML-,
HTML-.
,
,
.
. name usemap img, ,
: usemap
(#), name .
a r e a . , , 35.1, a r e a . a r e a . , a r e a , :
Web-
188
shape , : (rect), ( c i r c l e )
(poly).
coords .
shape, coords
( 35.1).
(0,0). 500
300 (500,300).
href .
, (href="mailto:mars@email.eml")

(href =" j a v a s c r i p t :doMars () ; ").

?
,
HTML- .
,
Web-.
, ,
, , HTML-,
. . , , .
,
,
.
, , .
, . ,
, , .
35.
189
,
mars.jpg, shape :
<img s r c = " i m a g e s / m a r s . j p g "
width="500" h e i g h t = " 3 0 0 " usemap="#mars">
<! >
<map name="mars">
<area shape="clrcle" coords="85,76,60" href="mars01.htm">
<area shape="circle" coords="245,76,70" href="marsO2.htm">
. <area shape="circle" coords="85,225,70" href="mars04.htm">
<area shape='"circle" coords = "245 ,225 ,70" href = "marsO5 .htm">
</map>
<! >
. .
. 35.1. coords
circle

, ,
coords="10,12,20"
poly
, ,
6 2
( ,
)
rect
coords="100,150,
200,100,50,150"
coords="275,50,
300,150,350,100,
400,150,450,50"
- c o o r d s = " 0 , 0 , 1 0 0 ,
, 150"
,
,

36.

, . , , , , , ,
, .
, . , , . , , .
a l t img, , ,
:
<img src="images/mars.jpg" width="500" height="300" usemap="#ma: ="
alt="An image map showing the d e c l i n e of surface water on the planet Mars.">
a l t area :
<map name="mars">
<area shape="rect" coords="9,3,164,148" href="mars01.htu."

alt="Phase 1">
alt="Phase 2">
.
href="marsO2.him"
<area shape="rect" coords = "334 , 5 ,487 ,149"

alt="Phase 3">
href = "marsO3 .htir."
<area shape="rect" coords = "9 ,151,163 ,294"

alt="Phase 4">
href = "marsO4 .htrr."
<area
shape="rect"
"marsO5.htm" alt="Phase 5">
coords="171,153,327 , 296"
hre=
<area
shape="rect"
coords="334,152,488,295"
href=
</map>
, World Wide Web (W3C),
, , ,
, 36.1.
.
36.
191
-
, , ,
( ). , , , ,
.
, :
Phase 1 Phase 2 Phase 3 Phase 4
:
[Phase 1] [Phase 2] [Phase 3] [Phase 4]
:
(Phase 1) (Phase 2) (Phase 3) (Phase 4)
, , . - , :
Phase 1 I Phase 2 I Phase 3 I Phase 4
!KW
Favwtes
Toe*
Click the phases of surface water on Mars for more information

" [*j An mage map showing the decline of surface water on the rtanet Mais
Phaat 1 | PluseJ: | Phast 3 | PhiS4 | I t o s f J ) | Phase f
Puc. 36.1.
,

Web-
192
36.1. 36.1
<p>Click the phases of surface water on Mars for more information.</p>

<img src="images/mars.jpg" width="500" height="300" border="0"
usemap="#mars" alt="An image map showing the decline of surface
water on the planet Mars.">
< p x a href = "mars01 .htm">Phase l</a> I <a href = "marsO2 .htm">Phase
2</a> I <a href="marsO3.htm">Phase 3</a> I <a href="marsO4.httr"
>Phase 4</a> | <a href="marsO5.htm">Phase 5</a> I <a href=
"marsO6 .htm">Phase 6</ax/p>
<map name="mars">
<area shape="rect"
alt="Phase 1">
coords = "9 , 3 ,164 ,148"
href = "mars01 .hi- n "
<area shape="rect" coords="172,2,328,149" href="marsO2.htm"

alt="Phase 2">
<area shape="rect" coords = "334 , 5 , 487 ,149" href = "marsO3 .htrr."
alt="Phase 3">
<area shape="rect" coords="9,151,163,294" href="marsO4.hen."
alt="Phase 4">
<area
shape="rect"
coords="171,153,327,296"
href=
<area
shape="rect"
coords="334,152,488,295"
href=
</map>
37.

, :
< t d x i m g src = "mercury. jpg" width="200"
height="200"x/td>
, ,
:
<td
bgcolor="#FF0000">Behold, the planet Mercury</td>
,
? :
<td background="mercury.jpg"
p l a n e t Mercury</td>
width="200" height="200">Behold,
the

HTML-, 37.1.
width height td , .
,
, width
height, .
. 37.1.
HTML-
Web-
194
37.1. 37.1
<table>
<tr>
<! valign bottom,

. >
<td valign="bottom"
"images/mercury.j pg">
width="200"
height="200"
background=
Behold, the planet Mercury

</td>
</tr>
</table>
- .
, , , , width height .
, , 37.2,
, .
, ,
.
. , ,
. .
37.2. 37.2
<table>
<tr>
<!- valign,
2 00 200 . >
<td width="200" height="200" background="images/mercury.jpg">
37.
195
<p>Behold, the planet Mercury. It is one of the hottest

places in the solar system due to i t s proximity to the sun.</p>
<p>The planet Mercury is a small, arid, l i f e l e s s , sun-baked
excuse for a heavenly body. Hardly anyone bothers to study
' <p>Its only notable quality is the -speed with which i t orbits
the sun, from which i t derives i t s name. In Roman myth, Mercury,
with wings on his heels, was the messenger of the gods, a divine
postman and errand runner, the swiftest of deities.</p>
</td>
</tr>
</table>
. 37.2. ,
,

, HTML
, CSS ( 38).
38.

CSS-
, , 37. HTML-, , . ,
. , .
- .
CSS-. CSS . ,
, . ,
.
, :
<div id="mercury" style="width:
200px;">
<p>Behold, the planet Mercury. It is one of the hottest places

in the solar system due to its proximity to the sun.</p>
<p>The planet Mercury is a small, arid, lifeless, sun-baked
excuse for a heavenly body. Hardly anyone bothers to study
<p>Its only notable q u a l i t y i s the speed with which i t o r b i t s
the sun, from which i t d e r i v e s i t s name. In Roman myth, Mercury,
with wings on h i s h e e l s , was the messenger of the gods, a divine
postman and errand runner, the s w i f t e s t of d e i t i e s . < / p >
backgroundimage :
<div
id="mercury"
style="width:
(images/mercury.jpg);">
200px;
background-image:
url
, u r l (...).
CSS- background-image ,
, , , 38.1. CSS- .
,
, background-repeat, 38.2.
38. CSS-
197
38.1. 38.2
<div id="mercury" style="width: 200;
background-image:
url(images/mercury.jpg);
background-repeat: no-repeat;">
, b a c k g r o u n d - p o s i t i o n , 38.3.

, repeat-x.
background-repeat

repeat-,
.
. 38.1. CSS- background- image ,

38.2. 38.3
<div id="mercury" style="width: 200px;
background-image:
url(images/mercury.jpg);
background-repeat: no-repeat;
background-position: center;">
38.1 CSS-, . ,
, ,
, .
Web-
198
. 38.2.

,

background-repeat
no-repeat
. 38.3.

background-position
. 38.1. CSS-

background- - repeat-,
repeat-y,
repeat
no-repeat,
repeat
background-repeat:
repeat-y;
background-repeat:
repeat;
background- position

:
left, right,
center, top,
bottom
background-position:
left;
background-pos i t ion:
right bottom;
center left;
center;
39.

Web-
Web-.
HTML.
CSS. HTML ,
. CSS , .
HTML background body,
:
<body background="images/ufo.gif">
, . , .

, 39.1.
. 39.1.
HTML
,
Web-
200
:
<body style="background-image:
url(images/ufo.gif);">
, , , 39.1. CSS

, background-repeat, background-position background-attachment.
background-repeat , ( ) , 39.2.
39.1. 39.2
<body style="background-image:
background-repeat:
url(images/ufo.gif);
repeat-y;">
. 39.2. CSS

background-position, 39.3.
background-attachment ,
. background-attachment fixed,
; .. . , , 39.4.
39. Web-
Arriving UFOs:
Startling New Evidence That Th
. 39.3. ,

background-position
39.2. 39.3
<body style="background-image: url(images/ufo.gif);
background-repeat: repeat-y;
background-position: right;">
goes hen
Startling new evidence goes h e r
Startling new evidence goes heri
Stardmg
Startling
Startimg
Starthng
new evidence
new evidence
new evidence
new evidence
goes
goes
goes
goes
here.
here
here.
here.
Startling new evu

Startling new evidei
Startling new evidenci
Startling
Startling
Startling
Starting
new evideno
new evidei
new evidenc
new evidenc
Startling new evidence goi s here. Startimg new evidenc

Startling new vidence g here. Startling new evidenc
Startiing new :vidence go> here. Startling new evidenc
Startling new ividence go' ;s here Startling new evidei
is here. Starthng new evidence go>
Startimg new
s here. Starthng new evidence go
Startiing new
Startling new :vidence g :s here. Starthng new evidence
Starthng new evidence g< II here.
Startling new
Starting new
Startimg new
Startling new
ividence
evidence
evidence
ividence
go
goe s
go s
go s
here.
here.
hrre
here.
Startimg new evidence

Startimg new evidence
Startling new evidence
goes
goes
goes
goes
here
here.
here.
here.

Startimg new evidei
Starthng new evidei
Starthng new evidence
Puc. 39.4. CSS ,

39.3. 39.4
<body style="background-image: url(images/uf.gif);
background-repeat: no-repeat;
201
Web-
202
background-position: right;
background-attachment: fixed;">
background-attachment

, .
, background-attachment s c r o l l .
39.1
CSS, .
. 39.1. CSS

background-
repeat

repeat-x,
repeat-y,
no-repeat,
repeat
background-repeat:
repeat-y;
background-repeat;
repeat;
background- - background-position:
position
left;
:

background-position
right bottom;
left,right,
center, top,
bottom
center left;
center;
background-
fixed, scroll
attachment

background-attachmen
fixed;
background-attachmen
scroll;
4.
4 0 ,

Web- : HTML- , ,
. ? , ? ? ]
< b l o c k q u o t e > , .
, (CSS Cascading Style Sheets) , , , .
HTML- ,
,
, HTML- : . ,
- , Web-. -
<blockquote>, , ,
.
Web-,
, , , , HTML. 40.1.
. 40.1. HTML
address
, - <address>3flecb
, - apec</address>

blockquote
<blockquote>3flecb
OTCTynaMH</blockquote>
hi
<1>
/hi >
h2
<2>
</2>
h3
<>
40.
205
h4
<4> /h4>
h5
<5> </5>
h6
<6> </6>
<>3 </>
<q>3ec <7>

40.1, HTML
h i no h6 .
.
. ,
: , ,
, .
tile
Edit
Sew
Favort
Tods
Heading 1
Heading 2
Heading 3
Heading 4
Headings
. 40.1. HTML
HTML- . , Web- <hl >. , , <h2 >; -

<h3>, . . , ,
206
Web-
Web-, :
Web-
,
.
( 1)
( 2)
( 3)
( 3)
( 3)
( 2)
( 3)
( 4)
( 4)
( 4)
( 5)
( 5)
( 3)
( 4)
( 5)
, ( 5)
( 4)
( 5)
, ( 5)
( 3)
( 4)
/ ( 4)
( 4)
, ,
. , HTML.
4 0 .
207

, , HTML.
<> < /> ? , . , , , HTML (. 40.2).
,
, , ,
.
Edit
Favortes
took
etp
Behold the majestic HTML paragraph. It looks bonng, and that's putting it mildly
Here is another As you can see. the browser automatically inserts a carnage return
between paragraphs
. 40.2. HTML ,
.
,

HTML : <quote> <blockquote>.
<quote> , , <blockquote> , 40.3.
World Wide Web (W3C)
lang <quote>, :
<p>Her l i p trembled. <q l a n g = " e n - u s " > P l a s t i c , < / q > she r e p l i e d , wondering even as she s a i d i t if she should have asked for paper.</p>
Web-
208
Her hp trembled "Plasfac," she replied, wondering even as she said it if sr e should have asked for paper Tben
the words of her mentor returned:
Those who ask for plastic, do not ask for paper
"Yes, plastic wiU do fine," she said.
. 40.3. <quote> , <blockquote>
<blockquote>

, HTML,
<quote>.
? , . ( .) Netscape , <quote>,
Internet Explorer .

<address>,
:
<address>
The Old Software Company<br>
100 Main St. S t e . 500<br>
' -
Youngstown, OH 9212 3
</address>
<> , . , 40.4.
40.
209
Web- <address>. , ,
<address>
. , , , <address>
.
Fie
Vie*'/
Favorftes
look
The Old Software Company

100 Main St.SU. 500
YoungstoYm, OH92123
. 40.4. <address>
,

41.

HTML- , , .
, , . , . 40 . , . HTML- , . ,
, .
HTML-, , , .
, , 41.1.
,
.
- . ,
. , .
, . <, , , .
. 41.1. HTML
em
strong -

cite
<></> ?

<strong>cepbe3HbiM!</strong;
, ? < c i t e > < / i t e >
4 1 .
211
dfn
<dfn>Ter</dfn>
HTML
code
<code>em</code> ( -

)
samp

, . .
,
<>: .</>
kbd
, -
-

<kbd>BBOA</kbd>
var
, . .
, <var>x</var>.
abbr
, <abbr
title="World Wide Web
Consortium">W3C</abbr>
,

ocronym t i t l e = " N a t i o n a l
Aeronautics and Space
Administration">HACA</acronym>.
acronym
Netscape . , , . Internet Explorer

.
, , . . , , , .
, , , , . NASA (National Aeronautics and Space Administration
), , , , , ,
Web-
212
.
.
,
. , ,
.

?
.
,
, , , . (laser), (radar) (scuba) - .
? . 41.1, abbr
acronym
( , Internet Explorer, ). , National Aeronautics and Space Administration
NASA. , , .
, , , . ,
, . ,
, t i t l e . t i t l e , ,
HTML, , HyperTest
Markup Language.
42.

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

. Web-, : , , , .
Web-.
,
. . , HTML , , HTML , . Web-, .
HTML , , ,
. Web- ,
..
. Web- . Web-, HTML ,
. Web-,
, W3C, .
^ , , , , Web-. , ,
Web- , ,
, HTML . , , -
. , , , , HTML-.
,
Web-
214
, ,
-. ,
, , Microsoft Netscape, .
CSS-, HTML- CSS-.

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

Web-: CSS- , </ .

CSS-. HTML- ,
HTML-. ,
, , , /, , .
42.
215
:
<style
type="text/ess">
hi {
font-family: Arial;
font-weight: bold;
font-size: 24px;
P {
font-family:
font-size:
"Times New Roman";
16px;
</style>
: hi,
. , - , .
hi , . ({}), , .
/. HTML / :
=""
, ( = ) . HTML:
-: ;
(-) ; (:),
; (;). ,
, , , Times
New Roman .
. , ,
, Arial 24 , Times New Roman, 16 .
42.1.
Web-
216
This is a first-level head

TTus is a paragraph.
This is another paragraph
. 42.1. HTML- ,
hi up
:
<style
type="text/css">
hi {
font-family: "Times New Roman";
font-weight: bold;
font-size: 96px;
font-family: Verdana;
font-size: 8px;
</style>
Web- , 42.2.
. , . , , , . , . , , ,
42.
217
, . ,
, Verdana Arial, .
This is a firstlevel head

. 42.2.
Web-
, , ,
.
HTML-, HTML-.
' HTML-, .
HTML-:
Welcome b a c k ,
my f r i e n d s
t o t h e <em>Show That Never Ends</em>!
</p>
(<>) , (<em>) , .
:
<body>
Welcome b a c k , my f r i e n d s
t o t h e <em>Show That Never Ends</em>!
</body>
- ,
(<body>).
:
. , , <body>:
Web-
218
<style type="text/css">
body {
font-family: Arial;
}
</style>
, , 423, . Times New Roman,
Arial <body>.
, ,
, .
, .
<body>. , , , <body>

.
Welcome back, my friends, the Show That Never Ends)
Puc. 42.3.
.
Arial,
<body> Arial
42.
219
CSS (CSS Cascading Style Sheets) , .

:
body {
font-family: Arial;
P {
font-style: italic;
</style>
Arial, , h i Arial. <body>, ,
<body> Arial.

, )'
<>, . 42.4 .
, . ,
Verdana,
Arial, Arial.
, , .
, .
Web-
220
This is a first-level header. It inherits

Arial from the body style, but it does not
display in italic.
This is a paragraph It inherits Anal from the body style, and it displays in italic because
of the additional paragraph style
Puc. 42.4.
,

HTML-, CSS- , "
:
<html>
<head>
<title>MoH HTML-CTpaHMD;a</title>
<style
type="text/css">
body -{
font-family: Arial;
P (
font-style:
italic;
</style>
</head>
<body>
<! . >
42.
221
</body>
</html>
,
, ,
.
CSS- ,
, CSS-
(<!, >).
s tyl ,
s tyl e.

, , .ess,
, . , , . ,
CSS-. , CSS- ,
.
CSS-, import
:
<html>
<head>
<title>MoH HTML-CTparoma</title>
<style
type="text/css">
import u r l ( " s t y l e s / m y s t y l e s . e s s " ) ;

</style>
</head>
<body>
<! . >
Web-
222
</body>
</html>
import , : >
u r l (""). , , .
:
<style t y p e = " t e x t / c s s " >
import
url("styles/stylesOl.ess");
import
url("styles/stylesO2.ess");
import
</style>
, , , :
<style
type="text/css">
import
url("styles/stylesOl.ess");
import
import
color:
#ffOOOO;
</style>
,
, ,
:
import url("styles/stylesOl.ess"J
import url("styles/styles02.ess"!
import url("styles/stylesO3.ess"!
42.
223
(
color: #ffOOOO;
!important;
</style>
@import,
.
HTML- ,
@import ,
. , ! important,
, @import.
! important ,
. .
HTML-
, ,
.
,
, .
, , ,
, , .
, ,
. :
<p>This i s a normal paragraph,
n e i t h e r bold nor red.</p>
<p>This is another normal paragraph, neither bold nor red.</p>

<p style="font-weght: bold; color: #FF0000;"">This is a special
paragraph, both bold and red.</p>
<p>Back to normal paragraph style here, neither bold nor red.</p>
224
Web-
, , , 42.5, , .
, ,
HTML
FUe
Ibis is a normal paragraph, neither bold nor red
This is another normal paragraph, neither bold nor red
This special paragraph, both bold imti led.
Back to normal paragraph style here, neither bold nor red
Puc. 42.5: CSS-

HTML-,

43.

HTML-,
, , , .
, . , , .
: b ( ), i ( ),
( ) s, s t r i k e , ( ). 43.1 .
"Yes," he said boldly "By all means, use italics Ibev.look classier than underlines
Otherwise, just otiike tluuugli your copy and make you do it again"
. 43.1.
, ,

HTML-,
, , .
8-191
Web-
226
,
. . ,
, ,
, . , , , , Web-. , ,
.
, .. , HTML ,
. ,
.

HTML-. ,
, <span>, . 43.2. , , .

CSS HTML- , , ,
{
font-weight:.bold;
i {
font-style: italic;
u{
text-decoration: underline;
..s {
text-decoration: line-through;
43. 227
Ne
dit
wew Favorites
Tools
Help
This style gives you bold text.

This style gives you italic text.
This style gives you underlined text.
This style gives you iuiX-Llluuugli text.
Puc. 43.2.
.
, ,
HTML
43.1. ,
43.2
<p>This style gives you <span class="b">bold</span> text.</p>
<p>This style gives you <span class="i">italic</span>
text.</p>
<p>This style gives you <span class="u">underlined</span> text.</p>

<p>This
style
text.</p>
gives
you
<span
class="s">strikethrough</span>
b, i, u, s
, Web- . , bold italic,
. , <span>
.
44.

, HTML- Web-, .
: , , .
43 , HTML-
.
, 44.1.
HTML-,
, , . HTML b
(), i (), () s strike
().
. 44.1. CSS-
CSS-
font-weight
bold, bolder, lighter,

normal
font-weight: bolder,-
font-style
italic, oblique, normal
font-style: oblique;
font-variant
normal, small-caps'
font-variant:
small-caps;
text-decoration underline, overline,

line-through, none
text-decoration:
overline;
text-transform
text-transform:
capitalize;
capitalize, uppercase,
lowercase, none
, , ,
. , (oblique) , (italic),
, ,
-.
44.
229
? - . . 44.1.
44.1. ,
44.1
{
text-decoration: overline;
</style>
<q>I thought we went <span class="o">over</span> this,</q>

Captain Steward.
said
. 44.1. (CSS)

small-caps (),

(. 44.2).
Web-
230
Fie
View
Favortes
loots
THE B U C K STOPS HERE That's what the placard on his desk said
. 44.2.

44.2. ,
44.2
<style
type="text/css">
. sc {
font-variant: small-caps;
}
</style>
<span class="sc">The Buck Stops Here.</span>That's what t h e placard on h i s desk s a i d .
, c a p i t a l i z e , uppercase lowercase
t e x t - t r a n s f o r m , .
c a p i t a l i z e
. . 44.3, uppercase
, lowercase , .
44.
Fie
dtt
View
Favorites
loots
231
(jrip
An Ordinary Line Of Text, So Transformed By CSS

AN ORDINARY LINE OF TEXT, SO TRANSFORMED BY CSS
an ordinary line of text, so transformed by ess
. 44.3.
text-trans
form
44.3. ,
44.3
< style="text-transform:
transformed by CSS</P>
capitalize;">an ordinary iine of text,
so
<p style="text-transform:
uppercase;">an ordinary line of text,
so
<p style="text-transform:
lowercase;">an ordinary line of text,
so
45.

HTML . ,
, :.
hi
{
font-family:
Arial;
font-weight:
bold;
font-family:
Verdana;
, HTML-
. 45.1,
, .
- ,
HTML- , - . , , , , <strong>, . , , <strong>, , .
Internet
Explorer.
45.
233
. 45.1. CSS- HTML-
HTML-
- HTML- - table em
,
, -

HTML- - td >
, -
HTML- - hi
, ,
- , HTML- , , , <strong>, .
:
- -
, .
, <strong>, - , :
ol
strong {
font-style: italic;
. -
<strong>, , . , ,
, ?
,
<strong>, . *45.1,
, <strong>,
.
Web-
234
J/iew
Favorites
Tools
tJdp
Tins strong t a g doesn't appear in an ordered list

This strong tag appears in an unordered list
So does this on*
1. This strong tag appears in an ordered list
2 So does this one
. 45.1. -
<strong>,

- . , , , , div:
div
td p em {
font-weight:
bold;
45.2, .
Here is the regular content of the page. It doesn't appear inside a div A table follows:
Emphasis,
but no paragraph in this celt
Emphasis,
but no paragraph in this cell
Emphasis,
and a paragraph
This content appears insile a div element. A table

follows:
Emphasis,
b a t s o paragraph m this cell
4mphusts, but no paragraph in this celt
Puc. 45.2.
- . <>,
, , di v
45.
235

, HTML- ,
, , , , .
, .
:
- > -
(>). , :
td > {
'font-weight:
bold;
45.3, .
Here is a paragraph, but its parent is the body tag, not a table cell. A table follows:
Here is s ome text. Its parent is a table cell, but it isn't a paragraph.
Here ii a paragraph. Its parent is a table cell.
. 45.3.
,
. -
,
,
HTML- ,
, , ,
, .
Web-
236
Microsoft Internet Explorer ,

45.3,
Internet Explorer.
. , . ,
, :
t d > em {
font-weight:
bold;
HTML-:
<td>
<p>This i s a paragraph with <em>emphasis</em>.</p> '
</td>
:
<td>
This i s unformatted t e x t with <em>emphasis</em>.
</td>
?
, . , , .
, .
, , -
:
td em {
font-weight:
bold;
,
- .
. . , <hl>, :
td > hi > em {
font-weight:
bold;
45.
237

, HTML- , ,
. , . , .
, .
, :
<td>
>
<! This t a b l e
cell
<hl>I am t h e o l d e r
good.</hl>
<p>I am t h e younger
is
t h e proud p a r e n t of
sibling.
sibling.
I am way
too
t h e s e two
serious
children.
for
my own
I always g e t my own way.</p>
</td>
, , ,
:
^
- + -
, :
hi
+ {
font-weight: bold;
45.4, , ,
,
.
,
HTML- ,
, , , , , .
,
. ? , . , , , . , :
td
+ em {
font-weight:
bold;
Web-
238
XN
Favortes
look
a*
Here is a paragraph. It doesn't follow a Erst-level head
Here is a first-level head.

Here is a paragraph that follows a first-level head.
Here is a paragraph that follows a paragraph.
Here is a second-level head.

Here is A paragraph that follows a second-level bead
. 45.4. ,
,
HTML-:
<td>
This i s unformatted t e x t with <em>emphasis</em>.
</td>
, .
, ,
..:
hi
+ h2 + h3 + h4 + p {
font-weight:
bold;

, .
. :
p i , h i , h2 + h3, td > strong {
color-: #FF0000;
, ,
, ,
<strong>, . .
45.
239
, :
(
color: #FF0000;
hi {
color: #FFO0O0;
h2 + h3 {
color: #FF0000;
td > strong {
color: #FF0000;
, ,
.
, , ,
.
46.

45 , , HTML-. , ,
- HTML- ? .
. , .
,
-
HTML- .
:
.bolditalic {
font-weight:
bold;
font-style: italic;
, . b o l d i t a l i c .
HTML-
. .
- - ,
HTML-, . HTML- , , 46.1.
46.
Ejle
Ed*
View
Favotites
241
loots
This first-level heading belongs to the bolditalic

class.
This first-level heading does not.

Ibis paragraph belongs to the boUitalic class.
This paragraph does not.
. 46.1.
,
46.1. ,
46.1
.bolditalic {
font-weight: bold;
font-style: italic;
</style>
<hl class="bolditalic">This
bolditalic class.</hl>
first-level
heading
belongs
to the
<h^>This first-level heading does not.</hl>

<p class="bolditalic">This
class.</p>
paragraph
belongs
to the bolditalic
<p>This paragraph does not.</p>

46.1 . -,
. , ,
. -,
,
Web-
242
. , <hl>, ,
; .
, , <h 1. >,
, ,
, .
:
<p>This paragraph contains
class.</p>
text
that
belongs
to
the
bolditalic
, HTML <span>.
, text bolditalic ( | >)? , .. , text.

<span>, :
<p>This paragraph c o n t a i n s
b o l d i t a l i c class.</p>
<span>text</span> t h a t
belongs
to the
<span> . - (span) . , , <span> :

<p>This paragraph c o n t a i n s <span
class="bolditalic">text</spai>
t h a t belongs t o t h e b o l d i t a l i c class.</p>
46.2.
This paragraph contains text that belongs to the bolditaic class
Puc. 46.2. , <span> ,

, <span>
46.
243

, ,
, . , , , . , , .
:
p.bolditalic {
font-weight:
bold;
font-style: italic;
}
46.3 .
46.2. ,
46.3
< class="bolditalic">Only
class.</p>
paragraphs
can join
the p . b o l d i t a l i c
<p>This paragraph opts not to join, so i t doesn't enjoy the bene-f i t s of membership.</p>
<hl class="bolditalic">This f i r s t - l e v e l heading belongs to the
class, but i t doesn't get any of the benefits, because i t i s n ' t a
paragraph.</hl>
Only paragraphs conjoin the p.bolditalic class.
This first-level heading belongs to the class,

but it doesn't get any of the benefits.
. 46.3. , ,

244
Web-
, <hl> ,
, . , - , , . .

, . .
(, -, ) .
. 45.
47.

-'
Windows Times New Roman.
HTML ,
. :
<>
<font face="Arial">3TOT Arial.</font>
</>
face , .
<f ont>,
:
<font
face="Arial">
<1> Arial.</hl>
<> .</>
<>' .</>
</font>
, , < f ont >. font - f ami ly . HTML-:
<>
<font family: Arial;
</>
:
.arialtext

.
, Arial, , <f ont>.
Arial.
, Times New Roman

Courier New, ,
CSS-.
246
Web-
. , ,
Arial. f o n t - f a m i l y
<body>:
body {
,
<font> f o n t - f a m i l y , . ,
. , .
, , ? :
. .
. , 47.1,
. 47.1.
serif
sans-serif
monospaced
. 47.1.
, .

(sans serif) , Arial,

. (serif),
, Times New Roman, .
, , Courier New,
, .
4 7 .
247
, <font> CSS- f o n t - f a m i l y .
, :
<font face="Arial, Helvetica, sans-serif">
:
body {
font-family:
Arial, Helvetica,
sans-serif;
. 47,1. ,
Web-
Windows
Macintosh
Times New Roman
Times
Arial
Helvetica
Georgia
Times
Verdana
Geneva
Courier New
Courier

Arial. Arial,
Helvetica. ,
, .
: Windows, ,
: serif ( ), sans serif (
) monospace ().
Web-
248
serif, sans-serif monospaced \,

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

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

.
Web- , . , ,
, CSS ( ), , .
:
, , Times New Roman, Web- ;
, , Arial, Web- , ;
, , Verdana Georgia, .
;
, , .
4 8 .

47 , <font> HTML font-family
(CSS) Web. ,
s i z e <font> f o n t - s i z e .
< font >

s i z e <f ont> :
<font face="Arial, Helvetica, sans-serif" size="4">
, size, , ,
, , , . HTML.
Web- 3. , 4 . 48.1, 1, 7.
s i z e , . HTML :
<font face="Arial, Helvetica, sans-serif" size="+l">
<font face="Arial, Helvetica, sans-serif" size="-3">
File
dft
View
Favorites
tools
Few St* 1
Font Size 2
Font Size 3
Font Size 4
Font Size 5
Font Size 6
Font Size 7
. 48.1. <font>
, 1 7
Web-
250
, .
-6, +6.
font-size
, . ,
. f o n t - s i z e ,
:
font-family:
font-size:
A r i a l , Helvetica,
sans-serif;
18px;
, , , , 48.2.

HTML?
Web- HTML
<fon t > 7
. , , ,
, .
, HTML, 7. ,
, 7 ( 1).
48.1 , . ,
.
, , . 48.1, em, ex ;
, em ex.

.
48.
251
This paragraph appears in 18-pixel Arlal.

So does this paragraph.
So does this one.
. 48.2.

. 48.1.
cm
em
; 1

ex
-; 1

in
mm
pc
(1 12
4,23 )
pt
px
,
. . ,
. 800 600 ,
, , 1600 1200 , , .
. , , , ,
Web- , ,
. ,
252
Web-
, , < , .

- ,
. : HTML, 48.3.
, , Web- .
This paiagraphis small.

This paragraph is medium
This paragraph is large.
This paragraph is x-laige.
This paragraph is xx-large.
. 48.3.
,
HTML
, , : -small xsmall, small, medium, large, x - l a r g e xx-large. ^ , :
(
font-size:
x-large;

, . l a r g e r , , smaller, :
< s t y l e = " f o n t - s i z e :
x-large;">
This type s i z e i s x - l a r g e , but <span s t y l e = " f o n t - s i z e :

s m a l l e r ; " > t h i s type s i z e i s one s i z e smaller.</span>
48.
253
:

-. : ,
. . , , ..
, , -, ,
Web- .
, Web- Microsoft Internet Explorer , Windows.
. .
Internet Explorer Windows
. ,
. ,
Web- , Macintosh, Netscape Windows- , .
Web- .
,
. , Web-.
, . . , -
Web-. , Web-
, .
4 9 .

HTML . , , , . ,
<br>, . - , , , ,
, , . , . Web-, , , HTML.
, . : , , , .
26
. ,
, , .

. , , , , 49.1.
This paragraph has a bottom margin of 200 pixels This is the end of the paragraph
This is the beginning of the next paragraph, after a healthy stretch of white space
. 49.1. 200 ,

49.
255
49.1. ,
49.1
< style="margin-bottom: 200 px;">This paragraph ha.s a bottom margin of 200 pixels. This is the end of the paragraph.<7p>
<p>This is the beginning of
stretch of white space.</p>
the next paragraph,
after
a healthy

, , .
, ,
. , , ,
200- 200-
., 400 .
: margin-top, margin-bottom, margin-left

margin-right. ( , , . 48).
Web-, 49.1,
. , .
margin.
, :
margin: 200px;
,
, , , , :
margin:
100 50 2V0 25;
Web-
256

. *; ,
, , , , 49.2.
, : padding-top, paddingbottom, padding-left padding-right. , , :
(
padding-top: 20px;
padding-left: 10px;
#irst-level heading?f
-s
[3
This is a paragraph. This is a paragraph. This is a paragraph.

ttis is a paragraph. This is a paragraph. This is a paragraphJQ
This is a paragraph. This is a paragraph.
. 49.2.

,
padding. ;
,
, ,
, , :
padding:
20;
padding:
10 12 18 8;

l i n e - h e i g h t .
, , , 49.3.
49.
257
l i n e - h e i g h t , :
{
font-size: 18px;
line-height: 27px;
File
gdt View
Favorites
Tools
Help
Tliis is long paragraph. This is a long

paragraph. Tlii is a long paragraph. This
is a long paragraph. This is a long
paragraph.This is a long paragraph. This
paragraph. Tliis is a long paragraph.This
is a long paragraph. Tliis is a long
paragraph. This is a long paragraph. Tliis
paragraph. Tliis is a long paragraph. This
is a long paragraph. Tins is a long
paragraph. This is a long paragraph. Tliis
paragraph. This is a long paragraph.This
This is a long paragraph. This is a long

paragraph This is a long paragraph This
is a long paragraph This is a long
paragraph This is a long paragraph. This is
a long pragraph. This is a long
paragraph This is a long paragraph This is
a long paragraph. This is a long
paragraph This is a long paragraph. This
paragraph.This is a long paragraph Ibis is
paragraph This is a long paragraph This is
paragraph This is a long paragraph. This is
. 49.3.
. ?

, , 49.4.

line-height
, ?
. (leading)
. , , (lead plug).
, .
w o r d - s p a c i n g .
, , ,
,
. , :
word-spacing: ;
3 ,
. , :
258
Web-
word-spacing: -;
, . , , :
word-spacing: normal;
, , ,
. ,
10 , 15
,
, ,
. 2, .
sw
Fjycrtc
lock
Thli piugriph h i i xtrj word spjcing, TSu p*rgr*ph

h ixtr* word fpicing. This pjfigijph his extrj word
ipiolng. Thtt piugupn h *xtu void fpioing.
Thif piugnph dO'n't hiv* *xtrj wold ipioing. This

pjrjgrjph doesn't uv* vfrj word sptoirtfl, Thif pirjgrap
eti^ h*v xlrj i*ordfpiing. Thii pjrjjrjph doatn't
hju ixti* word piolne.
. /

,
HTML- l e t t e r - spac i n g .
49.5. w o r d - s p a c ing, l e t t e r - s p a c i n g , .
, .
49.
259

, . , , , Verdana, ,
.
l e t t e r - s p a c i n g :
letter-spacing:
lpx;
, ,
:
letter-spacing: -lpx;
-;
, ,
:
letter-spacing: normal;
THIS HEADING
LOSES SOME
LETTER SPACE
THIS HEADING
USES STANDARD
LETTER SPACING
Puc. 49.5. letter-spacing,

()
,
, , ,
. , ,

.
50.

.
, 50.1.
is a paragraph This IS a
paragraph This is a paragraph This
is a paragraph This is a paragraph
This is a paragraph This is a
paragraph This is a paragraph
This is a paragraph :; is a
paragraph This is a paragraph This
is a paragraph This is a paragraph
This is a paragraph :; is a
paragraph This is a paragraph
Puc. 50.1. .

,
HTML , a l i g n j u s t i f y :
<
align="justify">
.</>
. CSS- t e x t - a l i g n :
< s t y l e = " t e x t - a l i g n :
. </>
j u s t i f y ; " > -
. ,
, , Web-
50.
261
. ,
, ,
. , ,
, , ,
.
,
, ( ).
(ragged right)
, .
(ragged left) , .
(ragged center) ,
.
, , : ,
. ,
;
, .
, , 50.2. .
File
Ed* Vie
Favorites
This is a paragraph.
I t a . It really is. 1
can't stress that
enough
Lools
#1
Help
This is a paragraph.
It is It really is I
can't stress that
enough
This is a paragraph
It is. It really is. I
can't stress that
enough
. 50.2. ,
,
262
Web-
, ,
a l i g n HTML t e x t - a l i g n
, .
l e f t (), r i g h t ():
< align="left">3TOT
< s t y l e = " t e x t - a l i g n :
.</>
right;"> .</>
,
, ,
HTML .
, t e x t a l i g n : l e f t ; .
, center:
< align="center">3TOT .</>
< s t y l e = " t e x t - a l i g n :
center;"> .</>
51.

HTML <blockguote>,
. , <blockquote> .
51.1. , , , Web-, .
, <blockquote> , 51.2.
The Bliss of Ignorance

vine dwells in a constant state of stupor shares much in common with the
enlightened man. Karl Save
Paragraph paragraph paragraph
Paragraph paragraph paragraph.


Puc. 51.L , <blockquote>

,
tie
y<t
Vew
Favorite
Blah blah headline

Blah blah blah blah blah Blah blah blah blah blah. Blah blah blah blah blah. Blah blah blah
blah blah Blah blah blah bUh blah.
Blah blah blah blah blah Blah blah blah blah blah Blah blah blah blah blah. Blah blah blah
blab blah Blah blah blah blab blah Blah blah blah blah blah Blah blah blab blah blah Blah
blah blah blah blah Blah blah blah blah blah. Blah blah blah blah blah Blah blah blah blah
blah. Blah blah blah blah blah Blah blah blah blah blah
Puc. 51.2. <blockquote>

,
,
Web-
264
HTML- . < :quote> , , :

<blockquote>
<p>This paragraph i s indented.</p>
</blockquote>
<blockquote>,
:
<blockquote>
<blockquote>
<blockquote>
</blockquote>
</blockquote>
</blockquote>
, , . <blockquote> .
, . margin-left , ] , 51.3.
51.1. ,
51.3
<head>
margin-left:
</style>
</head>
50px;
5 1 .
265
<body>
<hl>Blah blah headline</hl>
<p>Blah blah blah....</p>
</body>
$&
Favorites
loots
Blah blah headline

Blah blah blah blah blah Blah blah blah blah blah Blah blah blah blah blah Blah blah blah blah
p
blah Blah blah blah blah blah.
Blah blah blah blah blah.
blah Blah blah blah blah
blah blah Blah blah blah
blah blah blah Blah blah
Blah blah blah blah blah Blah blah blah blah blah Blah blah blah blah
blah. Blah blah blah blah blah Blah blah blah blah blah Blah blah Uah
blah blah Blah blah blah blah blah Blah blah blah blah blah. Blah blah
blah blah blah
. 51.3. .

.
,
, - . t e x t - i n d e n t ,
51.4.
51.2. ,
51.4
<head>
text-indent: ;
. </style>
</head>
Web-
266
<body>
<hl>Blah blah headline</hl>

</body>
ite
View
Favorites
look
Blah blah headline

Blah blah blah blah blah Blah blah blah blah blah Blah blah blah blah blah. Blah blah blah blah blah
Blah blah blah blah blah Blah blah blah blah blah Blah blah blah blah b i n Blah blah blah blah blah Blah
blah blah blah blah Blah blah blah blah blah Blah blah blah blah blah. Blob blah blah blah blah Blah blah
blah blah blah Blah blah blah blah blah Blah blab blah blah blah Blah blsdi blah blah blah Blah blah blah
blah blah Blab blah blah blah blah Blab blab blah blah blah Blah blah blah blah blah Blah blah blah blah
blah Blah blah blah blah blah Blah blah blah blah blah Blah blah blah blah blah Blah blah blah blah blah.
Blah blah blah blah blah Blah blah blah blah blah. Blah blah blah blah blai. Blah blab blah blah blah. Blah
blah blah blah blah Blah blah blah blah blab Blah blah blah blah Hah Blah blah blah blah blah Blah blah
blah blah blah. Blah blah blah blah blah. Blah blah blah blah blah Blah blah blah blah blah. Blah blah blah
blah blah Blah blah blah blah blah
. 51.4. text:-indent

,
. t e x t - i n d e n t .
Web-, 51.4, 30 30 . , ) i.
:
{
margin-left: 50;
text-indent: ;
80 , 50 + 30.
50 .
, : . , :
, .
, (hanging) .
5 1 .
267
Blah blah blah blah blah. Blah blah blah blah blah Blah blah blah blah blah Hah blah blah blah blah
Blah blah blah blah blah Blah blah blah blah blah Blah blah blah blah blah Blah blah blah blah
blah Blah blah blah blah blah Blah blah blah blah blah Blah blah blah blah blah Blah blah blah
blah blah. Blah blah blah blah blah. Blah blah blah blah blah.
Blah blah blah blah blah Blah blah blah blah blah Blah blah blah blah blah Blah blah blah blah blah
Blah blah blah blah blah Blah blah blah blah blah Blah blah blah blah blah Blah blah blah blab
blah Blah blah blah blah blah Blah blah blah blah blah. Blah blah blah blah blah. Blah blah blah
blah blah Blah blah blah blah blah Blah blah blah blah blah.
. 51.5.
,
text-indent

(hanging indent)
. , .
, - , , 50 . t e x t indent , , -30 .
51.5. 30
, 50 .
51.3. ,
51.5
<head>
margin-left: 50;
text-indent: -;
</style>
</head>
268
Web-
<body>

</body>
, ,
text-indent
, -. , 50 , -80
, .
52.

HTML : () () . <ol>
<ul> , . <li> . .
52.1.
File
Edit
Yiew
Favorites
1. First item
2. Second item
3 Third item
4 Fourth item
5 Fifth item
loote
delp
First item
Second item
Third item
Fourth item
Fifth item
Puc. 52.1. HTML ()

() .
52.1. ,
52.1
<table>
<tr>
<td>
<! >
<li>First
<li>Second
<li>Third
<li>Fourth
<li>Fifth
Web-
<! >
</td>
<td>
<!- ->
<li>First i
<li>Second i
<li>Third i
<li>Fourth i
<li>Fifth i
<! >
</td>
</tr>
</table>
, HTML- , . , , <ul> <ol>.
,
.
.
HTML, , , . 52.1.
, , s t a r t n- . , 4 s t a r t D, D . , X, s t a r t 10.
271
52.
. 52.1. HTML
type
ol
( ), <ol type="A">
( ),
<ol type="i">
I (
),
i (
),
1 ()
type
ul
()
c i r c l e ( ),
d i s c ( ), square ()
<ul type=
"circle">
<ul type=
"square">
<ol
start="4">
start o l
6 HTML
, .
HTML- , :
<li>First item of the main list</li>
<li>Second item of the main list</li>
<li>Third item of the main list</li>
<!
>
<li>First item of the nested list</li>

<li>Second item of the nested list</li>
<li>Third item of the nested list</li>
<!
>
<li>Fourth item of the main list</li>
272
Web-
<li>Fifth item of the main list</li>

,
:
<li>First item of the main list</li>

<li>Second item of the main list</li>
<li>Third item of the main list</li>
<!
>
<li>First item of the nested list</li>

<li>Second item of the nested list</li>
<! , >
<li>First item of the very nested list</li>

<li>Second item of the very nested list</li>
<! ,
>
<li>Third item of the nested list</li>
<!
>
<li>Fourth item of the main list</li>

<li>Fifth item of the main list</li>
(nested lists) ,
.
52.
273

. ,
(disc), (circle),
(square), (disc) .
. 52.2.
First item of the mam list

Second item of the main list
Third item of the main list
First item of the nested list
Second item of the nested list
First item of the very nested list
Second item of the very nested list
Third item of the nestedlist
Fourth item of the main list
Fifth item of the main list
. 52.2

.
,

. .
.

, 52.?.

, l i s t - s t y l e image,
, . , , . 52.3.
Web-
274

l i s t - s t y l e - p o s i t i o n ,
. o u t s i d e
, l i s t - s t y l e - p o s i t i o n
i n s i d e
52.4.
. 52.2.
list-style- , - u r l ( image

),

ul {
list-style-image:
url(../images/bull e t , gif) ;
}
list-style-
position

inside, outside
list-style- d i s c , c i r c l e ,
type
decimal,

lower-roman,
upper-roman,
lower-alpha,
upper-alpha,
none
Ete
Edt &w FjvontM
ol {
list-style-position: inside;
}
ol {
list-style-type:
lower-roman;
},
'Firstfishitem
Secondfishitem
n u r dfishitem
Fourthfishitem
Fifthfishitem
. 52.3. list-style-image

52.
275
52.2. ,
52.3
<head>
ul {
list-style-image: url(images/fish.gif);
</style>
</head>
<body>
<li>First fish item</li>
<li>Second fish item</li>
<li>Third fish item</li>
<li>Fourth fish item</li>
<li>Fifth fish item</li>
</body>
h item. D e s e r t i o n of the item Description

of the item
' ^ F S e c o n d fish item. Description of the item.
Description of the item.
^ T h i r d fish item Description of the uem
*WFourth fish item Description of the item
ê^Fifth fish item. Description of the item Description
of the item.
First fish item. Description of the item. Description

of the item,
^ S e c o n d fish item. De3cnpticn of the item.
4 fish item. Description of the item.
Tourth fish item. Description of the item.
^Fifth fish item. Description of the item Description
of the uem.
. 52.4.
list-style-position

.
inside, -outside
Web-
276
52.3. ,
52.4
./* <ul> . */
ul {
list-style-image:
url(images/fish.gif);
/* list-style-position. */
ul.in {
list-style-position:
,
inside,-
ul.out {
list-style-position: outside;
</style>
Web-, 52.4, .
<ul>
.
,
list-style-position.
:
ul.in {
list-style-image: url(images/fish.gif) ;
list-style-position:
inside;
ul.out {
list-style-image: url(images/fish.gif);
list-style-position: outside;
, 52.3,
, list-style-image

. , . .
52.
277
,

l i s t - s t y l e - t y p e HTML- <ol> <ul>,
Web-:
ul {
list-style-type:
square;
Web- .
, list-style-type
, .
,
.

(. . 52.5).
< s t y l e > HTML-
, ,
CSS-.
,
. , .

, '
,
,
.
Web-
278
E.to E<* *"
Favor*
Iooh t
I First level
A- Second level
Second level
1 Third level
2. Third level
* Fourth level
Fourth level
i Fifth level
Fifth level
Fifth level
Fifth !eve!
Fourth level
d Fouth level
3. Third level
a, Fourth levet
b Fourh level
4 Third level
Second level
1 Third level
2 Third level
D. Second level
Firrtlevel
A Second level
1 Third level
2. Third level
a. Fouth level
b Fouth level
. Second level
Second level
D Second level
. First level
. 52.5.

/* * IX ( I , I I , I I I , . . ) . * /
ol {
list-style-type:
}
upper -oman;
/ * ^'
<ol>, -,::
<ol> - . */
ol ol {
/*
(, , , . . ) . */
list-style-type: upper-alpha;
/* <ol>, - <ol>, . <ol>. - . */
279
52.
ol ol ol {
/*
(1, 2, 3, . . ) . */
list-style-type: decimal;
/*

, , <ol>. */
ol ol ol ol {
/* (, , , . . ) . */
list-style-type: lower-alpha;
'
/*
,
<ol>. */
ol ol ol ol ol {
/*
(i, ii, iii,
. . ) . */
list-style-type: lower-roman;
, <>
<ol> Web-.
53.

5 , Web-
, . , , , .
Web-, <font>, ,
:
<font f a c e = " A r i a l ,
Helvetica,
s a n s - s e r i f " color="#FF0000">
<h3 ></h3 >

<> <strong>flc^>KHbi</strong>
.</>
</font>
<f ont> , , . , <h3 > ,
(#FF0000), ,
Web-.
c o l o r
:
<h3 style="color=""#FF0000;"> </>
< style="color="#FF0000;"> <strong>flonjffibi</strong>
' .</>
,
.
, .
, , Web- , , . , ,
, Web- .
, ,
, , .
,
<f ont> :
53.
<> - <font color="#FF0000">KpacHbie</font>,
color="#0000FF">CMHne</font>.</p>
281

- <font

,
?
background-color
, .
.
, , <span> ,
:
\
<> - <span s t y l e = " c o l o r : #FF0000;"> </>,
- <span s t y l e = " c o l o r : #0000FF">CHHne</span>.

, , 53.1.
Fte
Edit
Sev*
Favorites
Tools
Help
This paragraph is not highlighted This paragraph is not highlighted This paragraph is not highlighted .
This paragraph is not highlighted This paragraph is not highlighted This paragraph is not highlighted.
This paragraph is not highlighted. This paragraph is not highlighted This paragraph is not highlighted.
This paragraph is highlighted. This paragraph is highlighted. This paragraph is highlighted. This
paragraph is highlighted. This paragraph is highlighted. This paragraph is highlighted This paragraph is
highlighted. This paragraph is highlighted. This paragraph is highlighted This paragraph is highlighted
This paragraph is highlighted This paragraph is highlighted. This paragraph is highlighted. This
paragraph is highlighted. This paragraph is highlighted.
In this paragraph, this sentence is not highlighted This sentence is highlighted. This sentence is not
highlighted.
Puc. 53.1.

53.1. ,
53.1
<p>This paragraph is not highlighted....</p>
<p style="background-color="#FFFFOO;">This paragraph is
ed. . . . </p>
highlight-
<p>In this paragraph, t h i s sentence is not highlighted. <span

style="background-color: #FFFF00;">This sentence is highlighted. </span> This sentence is not highlighted.</p>
282
Web-
, .
. , Web- ,
. ? .
, , -
.
. ,
.
, , , : . , , Web-.
, , . .
, ? : - (#OOFFFF), (#FF0099), (#) - (#99FF00).

, :
font-weight:
bold;

Web-. , highlight. , c l a s s h i g h l i g h t :
< class="highlight">3flecb
, <span> c l a s s
<span> h i g h l i g h t :
<>3 . <span c l a s s = " h i g h light">3flecb .</span>
</>
<style>
Web- ,
CSS-.
.highlight
background-color:
#FFFF00;
5 4 .

,
HTML . , : Web-.
, . . Web- , Web-.
, , ,
, , 54.1. Web- Web- , . ,
, 54.2.
One Section of the Page

Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
Another Section of the Page

Blah blah blah blah blah blah blah blah blah blah blah blab blah blah blah blah blah blah blah blah blah
1 ILIKK | |LINK |
. 54.1. ,
HTML,
54.1 HTML <hr>, . , .
, , - :
<hr noshade>
nosh^de .
<hr>, .
Web-
284

Blah blah blah biah blah blah blah biah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah ^ blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah' >lah

Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah slah blah blah blah blah blah
iiOi | | in3: i;ii:n: |
. 54.2. ,

. 54.1. HTML-
align
left,right,
center
<hr a l i g n = " l e f t " >

<hr a l i g n = " c e n t e r " >
noshade
size
width
- - <hr width="50">

, - <hr width="33%">
<hr noshade>
- <hr size="10">
, ,
. Internet Explorer 2 3 Netscape. s i z e 1, , .
; ,
. :
<hr noshade
size="l">
)' .
,
, , ,
div. .
,
.
, :
54.
285
<hr noshade s i z e = " l " width="200">

, . , , ,
.
, , .
, .
f

,
. Internet Explorer
color, Netscape backgroundcolor. color Internet Explorer, Netscape , ,
background-color
Netscape,
Internet Explorer .
:
hr {
color: #FFOOOO; /* Internet Explorer */
background-color: #FFOOOO; /* Netscape */
, , , 4 5 , noshade. .
, , :
<hr noshade s i z e = " l "
width="20%">
20% 20% , . , 600 , 120 20% 600.

, . . , :
<hr noshade size="l" width="20%" align="left">
, 54.2.
Web-
286

,
width size,
. . 54.3.
(end sign)) ,
.
, .

Blah bUh blah blah blah Hah blah blah blah blah blah blah blah blah olah blah blah blah blah
Hah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah bUh blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blab blah Hah blah blah blah blah I .lah blah blah blah blah
blah blah blah

Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah Hah blah blah blah blab
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blab blah blah blah blah blah Hah blah blah blah blah blah Hah Hah blah Hah blah
blah blah Hah
kttffi II ffiS I L 4 3 I I
Puc. 54.3.
. (
margin-left
.)
, width s i z e :
<hr size="10" width="10">
noshade
noshade, . , 54.3 - ,
. , ,
.
, ,
Netscape , . .
55.

, . , , . Web-.
, , Web-. Web- ,
.
(dateline) , . (timestamp) , .

JavaScript. .

JavaScript .
< s c r i p t > HTML- JS-. Web-, , , < s c r i p t > .

,
.
function doDateline() {
/* .
Date JavaScript.
now. */
var now = new Date () ;
/* now , , . . */
Web-
288
var day = now.getDay();
var month = now.getMonth();
var date = now.getDate();
var year = now.getYear();
/* Web- Internet Explorer , Netscape Opera

1900 . if/then . */
if (year <2000) {
year += 1900;
/* dateline. . */
var dateline = "";
/* . ,
0 6,
Sunday () Saturday (). if/then dateline day.
. , ::
, ,
.
:,
, 12/22/2005, . "',
if (day == 0) {
dateline = "Sunday, " ;
if (day == 1) {
dateline = "Monday,
}
if (day == 2) {
dateline = "Tuesday,
if (day == 3) {
dateline = "Wednesday, ";
55.
289
if (day = = 4) {
dateline = "Thursday, ";
if (day == 5) {
dateline = "Friday, ";
}
if (day = = 6 ) {
dateline = "Saturday,
/* ,
January (), 1 February () , 2 March () 11
December ().
if/then
dateline. , ..

,
' .
, :
dateline += (month + 1) + "/";
V
if (month = = 0 )
dateline = "January ";
if (month == 1) {
dateline = "February ";
if (month == 2) {
dateline = "March ";
if (month = = 3 )
dateline = "April " ;
if (month = = 4 )
dateline = "May ";
290
Web-
if (month = = 5 ) {
dateline = "June ";
if (month == 6) {
dateline = "July "
if (month ==
dateline =
7 )
{
August
if (month == 8) {
dateline = "September
if (month
dateline
if (month
dateline
9) {
"October
10) {
"November ";
if (month == 11) {
dateline = "December ";
/*
dateline,
.
:;
, ,
.
, :
dateline += date + "/";
dateline += date + ", ";

/* -
dateline. */
dateline += year;
55.
291
/* dateline .
dateline
Web-. */
document.write(dateline);
. ,
, :
<script
</script>
language="JavaScript">doDateline();
<script> ,
:
<pxscript
language="JavaScript">doDateline() ;
</scriptx/p>
doDateline
, ,
55.1. 55.2.
. 55-.1.
Web-
. 55.2. ,

10"
Web-
292

JavaScript .
<script> HTML-
JavaScript. <script>
Web- .
,

.
function doTimestamp() {
/* ,
now. */
var now = new Date () ;
/* now (hour),
(minutes) (seconds). */
var hour = now.getHours() ;
var minutes= now.getMinutes();
var seconds = now.getSeconds();
/* timestamp,
, . */
var timestamp = "";
/* - time " A.M."
.
24- , 16:12:25 4:12:25
P.M., . */
var time =" A.M.";
/* hours JavaScript 24- .
, hour,
12. , 12
P.M.,
'.
55.
293
24- , :
if (hour < 10) {
hour = "0" + hour;
if/then
, , "", "6". */
if (hour > 12) {
hour -= 12;
time = " P.M.";
}
/* if/then
, , . */
if (minutes < 10) {
minutes = "0" + minutes;
if (seconds < 10) {

seconds = "0" + seconds;
/* . */
timestamp = hour + " : " + minutes + " : " + seconds + t ime;
/* .
*/
document.write(timestamp);
,
Web- :
<script
language="JavaScript">doTimestamp() ;
</script>
, :
<em>This page generated at
294
Web-
<script
language="JavaScript">doTimestamp{) ;
</scriptx/em>
55.3.
Thispage generated at 9:18:57 ..
. 55.3.
56.

, . W3C,
, ,
HTML <table> . W3C , <table> , , .
(data table) HTML-,

, .
56.1 HTML- .
, , , . , , .
. 56.1. HTML-
table
caption
col
colgroup
thead .
tfoot
tbody
tr
th
td
56.1 ,
56.1.
296
Web-
Web-, ,
HTML-.
File
yew Favwrtes
Edit
Iods
yefe
Table 1 M utageruc Effects of the Kenneth Frequency on HTML ,

Cells
x=
width
heiglit 18
valign [top
4
:67
1108
1202
";26~
[525"
J6S
[209
[center
[center
inght
right
[bottom
Ibottom
ibottom
bc'ttom
.bottoi
bgcolor SoOOOFF.eWOPFFF WFFOOFF * M F F 0 ' i

x=
25
jleft
J21
left
(is
17
.ilisii
JKCTO
5
CFF
. 56.1.
56.1
56.1. ,
56.1
stable border="l">
<!
<caption> '
Table 1. Mutagenic Effects of the Kenneth Frequency on HTML
Table Cells
</caption>
<! . <col>
<colgroup>
, ' . , <col> , <colgroup> . >
<col>
<colgroup span="6"x/colgroup>
<! , . <th>
56.
297
<td>, , . >
<thead>
<tr>
<th>x =</th>
<th>l</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
<th>6</th>
</tr>
</thead>
<! , .
.
, ,
, , . >
<tfoot>
<tr>
<th>x =</th>
<th>l</th>
<th>2</th>
' <th>3</th>
<th>4</th>
<th>5</th>
<th>6</th>
</tr>
</tfoot>
<! . . .
298
Web-
<tbody>
<tr>
<th>width</th>
<td>17</td>
. <td>19</td>
<td>25</td>
<td>67</td>
<td>108</td>
<td>202</td>
</tr>
<tr>
<th>height</th>
<td>18</td>
<td>21</td>
<td>26</td>
<td>68</td>
<td>209</td>
<td>525</td>
</tr>
</tbody>
<! . >
<tbody>
<tr>
<th>align</th>
; <td>left</td>
<td>left</td>
<td>center</td>
<td>center</td>
<td>right</td>
<td>right</td>
</tr>
<tr>
56.
299
<th>valign</th>
<td>top</td>
<td>bottom</td>
<td>bottom</td>
<td>bottom</td>
<td>bottom</td>
<td>bottom</td>
</tr>
</tbody>
<!
. >
<tbody>
<tr>
<th>bgcolor</th>
<td>#0000FF</td>
<td>#00FFFF</td>
<td>#FF00FF</td>
<td>#O0FFO0</td>
<td>#0000FF</td>
<td>#00CCFF</td>
</tr>
</tbody>
<! , . >
</table>

, , HTML- : <col>, <colgroup>, <thead>, <tf oot> <tbody>. , . <col> <colgroup> , <thead>, <tf oot> <tbody> . ?
300
Web-
<col> <colgroup>
<thead>,
<tfoot>n
<tbody> Netscape col colgrou;::
col colgroup thead, tfoot tbody.
,
.
,
, . , 56.1. ,
. :
<td align="right">
. align <col>:
<col align="right">
CSS-:
<col s t y l e = " t e x t - a l i g n :
right;">
<colgroup>:
<colgroup span="6" s t y l e = " t e x t - a l i g n : center,-"></colgroup>
width, :
<col s t y l e = " t e x t - a l i g n :
r i g h t ; width: 75px;">
<colgroup span="6" s t y l e = " t e x t - a l i g n : center; width: lOOpx; "x/col. group>

HTML- CSS-
thead, tfoot tbody:
<htead style="font-family: Arial, Helvetica,
s i z e : lOpx; f o n t - s t y l e : i t a l i c ; " >
sans s e r i f ;
font-
<! >
</thead>
colspan row/span
c o l span rowspan , , .
, , span rowspan HTML.
301
56.
col span , , rowspan . ,

colspan rowspan , 56.2.
colspan ,
, rowspan .
File
Edit
View
Favorites
loots
SJalp
Table 2. Color Transformations in Table Borders after Exposure to the Kenneth

Frequency .
Border Color
!
phase 1
Phftie 2
Before
After
#11111 ifniO
#000066
#000033
#000066
#000099
#FFFFFF
#FFFF33
#FFFKf
*
X
#FFFF33
.|
#CC6699
#3333FF
#000000
#000000
#000000
#FJFF99
#663399
Before
After
Puc. 56.2.
col span rowspan
56.2. ,
56.2
<table
border="l">
<caption>Table 2. Color Transformations in Table Borders after

Exposure to the Kenneth Frequency</caption>
<colgroup span= "2" style="width: lOOpx;"></colgroup>
<colgroup
span=""2"
center;"></colgroup>
style="width:
150px;
text-align:
<! . ( ).
.
302
Web-
colspan. 56.2, "Border Color"

: "Before" "After".
<thead>
<tr>
<th> </th>
<th> </th>
<th colspan="2">Border Color</th>
</tr>
<tr>
<th> </th>
<th>x</th>
<th>Before</th>
<th>After</th>
</tr>
</thead>
<tfoot>
<tr>
<th> </th>
<th>x</th>
<th>Before</th>
<th>After</th>
</tr>
</tfoot>
<! ,
<tbody>.
rowspan. , , "Phase 1" 1, 2, 3 4. ->
<tbody>
56.
303
<tr>
<th rowspan="4">Phase
<th>l</th>
<td>#0OOOOO</td>
<td>#000066</td>
</tr>
<tr>
<th>2</th>
<td>#000033</td>
<td>#FFFF33</td>
</tr>
<tr>
<th>3</th>
<td>#000066</td>
<td>#CC6699</td>
</tr>
<tr>
<th>4</th>
<td>#000099</td>
<td>#3333FF</td>
</tr>
</tbody>
<! ,
<tbody>. rowspan "Phase 2" . >
<tbody>
<tr>
<th rowspan="4">Phase 2</th>
<th>5</th>
<td>#FFFFFF</td>
<td>#OOOOOO</td>
</tr>
<tr>
Web-
304
<th>6</th>
<td>#FFFF33</td>
<td>#OOOOOO</td>
</tr>
<tr>
<th>7</th>
<td>#FFFF66</td>
<td>#OOOOOO</td>
</tr>
<tr>
<th>8</th>
<td>#FFFF99</td>
<td>#663399</td>
</tr>
</tbody>
</table>
56.2, colspan rowspah
<th> <td> , .
.
c o l span
rowspan.
, , ,
, -, . , , 56.2, :
<tr>
<th> </th>
<th> </th>
56.
305
<th colspan="2">Border Color</th>

</tr>
:
<tr>
<th> </th>
<th>x</th>
<th>Before</th>
<th>After</th>
</tr>
.
. col span 2 , .
: <colgroup>
:
<colgroup> , , ,
, .
colspan, 2, , .
, . <colgroup> , , , .
cellpadding cellspacing
<table> c e l l padding c e l l s p a c i n g 0. , c e l l p a d d i n g c e l l s p a c i n g . c e l l p a d d i n g ,
c e l l s p a c i n g
.
<table> cellpadding c e l l s p a c i n g
:
<table border="l" cellpadding="5" cellspacing="8">
56.3 , . , 56.2,
, - eel lpadding
cellspacing.
306
Web-
fe
View
Fjvorites
Iools
Help
Table 2 Color Transformations in Table Borders after Exposure to tii-i: nneth Frequency
Bci'drr Co
01
Before
After
#000000
#000066
#000033
#FFFF33
#000066
#CC6699
#000099
#3333FF
#FFFFFF
#000000
#FFFF33
#000000
#FFFF66
#000000
#FFFF99
#663399
Brfor.
After
Phase 1
Phase 2
f "
i1
. 56.3.
cellpadding
cellspacing
cellpadding c e l l s p a c i n g , , .
, . .
, . . ,
cellpadding c e l l s p a c i n g .
cellpadding
. cellspacing
.
, , c e l l padding . c e l l s p a c i n g ,
, , , 56.4. 56.5,
cellpadding ,
c e l l s p a c i n g 0.
56.
307

CSS- padding-top,
padding-bottom, padding-left
padding-right
:
<td style="padding-top:
; padding-bottom:
4px;
padding-left:
2px; padding-right:
5px;">
tfew
Fflycrtes
lools

Frequency
Border Color
After
Before
#CC6699
#000099
#3333SF
#FFFFFF
#000000
#FFFF33
#000000
#FFFF66
#000000
#FFFF99
#663399
Before
After
Puc. 56.4.
cellspacing,
.
cellspacing

gte
bit
Favorfces
Tpcb
v:
tielp
Table 2 Color Tranjformations in Table Borders after Exposure to the Kenneth Frequency
Border Color
X
Before
1
Ami
Phaie2
After
#00006
#000033
FFFF33
#000066
#CC6699
#000099
#3333FF
#FFFFFF
#000000
#FFFF33
#000000
#FFFF6
#000000
#FFFF99
#663399
Before
After
Puc. 56.5. ,
cellpadding,
cellspacing

Web-
308

- ,
. border , bordercolor :
<table border="5" bordercolor="#000000">
56.6 . 5 . , , ,
.
(rules) .

border, .

rules, :
<table border="5" bordercolor="#000000"
rules="cols">
r u l e s c o l s
, , , 56.7. 56.2
r u l e s .

Frequency
Border Color
Befoi
#000033
#FFFF33
#3333FF
Phase 2
#FFFF33
#000000
#000000
#FFFF99
Befoi
Puc. 56.6. (#000000)

5
56.
309
Netscape
. Internet Explorer
.

Frequency
Border Color
X
Phase 1
Phase 2
1
2
3
4
5
6
7
S
X
Before
#000000
#000033
#000066
#000099
#FFFFFF
#FFFF33
#FFFF66
#FFFF99
Before -
After
#000066
#EFFF33
#CC6699
#3333FF
#000000
#000000
#000000
#663399
After
Puc. 56.7. rules <table>,

, .
rules cols
. 56.2. r u l e s
all
cols
rows
groups
: col, colgroup, thead, t f oot tbody
none
:
<table border="5" bordercolor="#000000"
der-style: dotted;">
rules="groups"
style="bor-
56.8 , (dotted) .
. 56.3.
310
Web-
Edft
yew
Favorites
Iods
jjefp
Table 2 Color Transformations Table Borders after Exposure to the Kenneth

Frequency
Border Color
Phase:
Before
After
#000000
#000033
#000066
#000095
#000066
#FFFF33
#CC6699
#3333EF
#FFFFFF
#FFFF33
#FFFF66
#FFFF99
#000000
#000000
#000000
#663399
Before
After
. 56.8.

. 56.3. ,

solid
dashed
dotted
double
none
,
.
, 56.9:
stable border="5" bordercolor="#000000" rules="groups" s t y l e = " b o r d e r - t o p - s t y l e : dashed; border-bottom-style: d o t t e d ; b o r d e r - l e f t s t y l e : double; b o r d e r - r i g h t - s t y l e : none;">

. 56.4 CSS- , .
311
56.
Tible 2 Color Transformation; n Table Borders after Expo re to the Kenneth

Frequency
Bordr Color
Phaiel
Phase 2
Brfor.
After
#000000
#000066
#000033
#FFFF33
#000066
#CC6699
#000099
#3333FF
#FFFFFF
#000000
#FFFF33
#000000
FFFF66
#000000
#FFFE99
#663399
Before
After
Puc. 56.9. , ,

. 56.4. CSS-
border-color
- border-color: #FF0000;

border-style
- border-style:

border-width
- border-width: ;

dotted;
border-bottom-color
border-bottom-color: #00FF00;
border-bottom-style
border-bottom-style: none
border-bottom-width
border-bottom-width: 8px;
border-left-color
border-left-color: #O0OOFF;
border-left-style
border-left-style:
solid;
border-left-width
border-left-width:
5px;
border-right-color
border-right-color: #FFFF00;
border-right-style
border-right-style:
border-right-width
border-right-width:
border-top-color
border-top-color: #FFFFFF;
border-top-style
border-top-style:
border-top-width
dashed;
4px;
double;
border-top-width; 6px;
312
Web-
, .

( ), . .

?
. .
,
. ,

Web-.
:
< t h > I n t e n s i t y of the Kenneth Frequency</th>
<th>Fluctuation in Beta Transmission</th>
<th>Margin of Error</th>
abbr <th>. , .
<th
a b b r = " I n t e n s i t y " > I n t e n s i t y of the Kenneth Freguency</th>
<th
a b b r = " F l u c t u a t i o n " > F l u c t u a t i o n in Beta Transmission</th>
<th
abbr="Error">Margin of Error</th>
,
. , <th>
(ID). headers, :
<table b o r d e r = " l " rules="groups">
<caption>Table 3: I n t e n s i t y of the Kenneth Frequency and
F l u c t u a t i o n in Beta Transmission</caption>
<col width="300" a l i g n = " c e n t e r " >
<col width="300" a l i g n = " c e n t e r " >
56.
313
<col width="160" align="center">

<thead>
<tr>
<th id="intensity" abbr="Intensity">Intensity of the
Kenneth Frequency</th>
<th id="fluctuation" abbr="Fluctuation"fluctuation in Beta
Transmission</th>
<th id="error" abbr="Error">Margin of Error</th>
</tr>
</thead>
<! , .
. , . >
<tbody>
<tr>
<td headers="intensity">l</td>
<td headers="fluctuation">90</td>
<td headers="error">6%</td>
</tr>
<tr>
<td headers="intensity">2</td>
</tr>
<tr>
</tr>
<tr>
Web-
314
. </tr>
<tr>
<td
headers="fluctuation">2</td>
</tr>
</tbody>
</table>
(ID) . HTML- .
, , 56.10.
Fto
Edit
Jflew
Favoiites
Iools
Table 3: Intensity of the Kenneth Frequency and Fluctuations m Beta Transmission

Intensity of the Kenneth Frequency
Fluctuations in Beta Transmission

90
Intensity of the Kenneth Frequency
Margin of E n or
6%
128
35%
2726
32%
263443
32%
98%
Fluctuations in B.ta transmission
Margin of Error
Puc. 56.10. Bud

(ID) headers,

axis.
, ,
intensity axis i n t e n s i t i e s , fluctuation
axis f l u c t u a t i o n s , error axis errormargins.
56.
315
, (ID) , :
<td header="
">
<table border="l" rules="rows">
<caption>Table 4: Intensities of the Kenneth and Bradley
Frequencies and Fluctuations in Beta Transmission</caption>
<col width="150">
<colgroup span="3" width="150" align="center">
<thead>
<tr>
<th> </th>
<th id="intensity" abbr="Intensity"
axis="intensities">Intensity</th>
<th id="fluctuation" abbr="Fluctuation" axis="fluctuations">Fluctuations in Beta Transmission</th>
<th id="error" abbr="Error" axis="errormargins">Margin of
Error</th>
</tr>
</thead>
<tbody>
<tr>
<th id="kenneth" rowspan="5" abbr="Kenneth">Kenneth
Frequency</th>
<td he'aders="intensity kenneth" axis="intensities">l</td>
<td headers="fluctuation kenneth"
axis="fluctuations">90</td>
<td headers="error kenneth" axis="errormargins">6%</td>
</tr>
<tr>
<td headers="intensity, kenneth" axis="intensities">2</td>
Web-
316
<td headers="fluctuation kenneth" axis="fluctuations">128</td>

</tr>
<tr>
<td headers "intensity kenneth" axis="intensities">3</td>
<td headers1 "fluctuation kenneth" axis="fluctuations">2726</td>
<td headers="error kenneth" axis="errormargin">32%</td>
</tr>
<tr>
<td headers "intensity kenneth" axis="intensities">4</td>
<td headers1 "fluctuation kenneth" axis="fluctuations">263443</td>
</tr>
<tr>
<td headers="intensity kenneth" axis="intensities">5</td>
<td headers= "fluctuation kenneth"
axis="fluctuations' >2</td>
</tbody>
<tbody>
<tr>
<th id="bradley" rowspan="5" abbr="Bradley">Bradley
'Freguency</th>
<td headers="intensity bradley" axis="intensities">l</td>
<td headers="fluctuation bradley"
<td headers="error bradley" axis="errormargins">73%</td>
</tr>
<tr>
<td headers="intensity bradley" axis="intensities">2</td>
<td headers="error bradley" axis=:"errormargins">35%</td>
56.
317
</tr>
<tr>
<td headers="fluctuation bradley" axis="fluctuations">356</td>
</tr>
<tr>
axis = "f luctu'ations">32</td>
<td headers="error bradley" axis="errormargins">ll%</td>
</tr>
<tr>
</tr>
</tbody>
</table>
56.11.
Table 4 Intensities of the Kenneth and Bradley Frequencies and Fluctuations in Beta Transmission
Intensity
1
Bradley Frequency
"
Margin of Error
90
6%
128
35%
2726
32%
263443
32%
Kenneth Frequency
Transmission
98%
73%
45
35%
356
12%
32
11%
12
2%
Puc. 56.11. axis

,
axi s
57.

HTML-.
HTML-. : f i r s t - l i n e
f i r s t - l e t t e r . ,
, , <table> <div>.
:
(
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
(pseudo-element)
HTML-, .
,
, :
(
font-family: A r i a l , Helvetica,
sans-serif;
f o n t - s i z e : 14px;
p:first-line {
font-weight: bold;
font-variant: small-caps, 57.1.
57.
Fte
< View
Favortw
319
loots
TMS IS THE FIRST LME OF PARAGRAPH. IT GOES ON AND ON AND ON A M I ON AND ON AND ON AND ON AND ON AND ON AND ON AND ON AND O N .
When It finally ends, the style reverts to normal type
. 57.1. first-line

,

, ?
, .
,
first-line.

,
first-linen
<span> , . style <span>.
f i r s t - l e t t e r , , :
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
p:first-letter
font-family:
{
"Times New Roman", Times, serif;
font-weight: bold;
font-size: 48px;
57.2 .
Web-
320
: , first-letter
, first-line
-,
<table> <div>.
upon a time, in a land far away, tnere lived wickect wltcr. She had three fingers on
each hand, two fingernails on each finger, two noses on her face, and three warts on'each nose
"he was quite unhappy with her HMO, and she decided to do something about it
Puc. 57.2. first-letter

-
, .
,
57.2, :
, , 57.3.
(drop cap) , . , .
(descenders)
, , , ,
.
57.
Fte
321
Edit flew FavwitM - Tools Hefc
nce upon a time, in a land far away, there lived a wicked witch She had three
fingers on each hand, two fingernails on each finger, two noses on her face, and
three warts on each nose. She woke up every night prompty at 10:00 She ate a
sensible oreakfast of two frogs and a dried bat wing; then she retired to her study and
practiced the black arts until the first light of day To escape the sun, which rendered her
powerless, she slept deep in a drainage ditch under a blanket of sticks and rotten
leaves
. 57.3. - ,
.

.
. . ,
. .
, , Q
(serif), ,
.
CSS-, , .
p.dropcap:first-letter
font-family:
Times, s e r i f ;
font-weight:
font-size:
Georgia,
'Times New Roman",
bold;
63px;
/* ,
14 . */
float:
left;
/* float , . , .
. */
Web-
322
p a d d i n g - r i g h t : 2;
/*

. */
,
d r o p c a p :
< class="dropcap">Once upon a time, i n a l a r d
far away....</p>
dropcap ,
, . , dropcap , , ,
:
.dropcap:first-line {

Netscape. ?
, , ,
, Internet Explorer, Netscape, Netscape .
Netscape, .
.

,
:
margin-top: -12;
margin-bottom: -12;
, 12 .
, ,
Internet Explorer, .
58.

(ID) , )' , , . ,
,
: , ,
, .
, (#), :
#barney {
font-weight: bold;
color: #FF00FF;
(ID selector) ,
.
id , :
< id="barney">3TOT ID of
"barney"</p>
(ID) , s t y l e HTML-. , CSS-

s t y l e . (ID), ? ,
:
< s t y l e = " f o n t - w e i g h t :
bold; c o l o r :
#FF0000;">Alert!</>
-, :
#alert {
font-weight: bold;
color: #FF0000;
11'
324
Web-
</style>
<body>
<p id="alert">Warning!</p>
</body>
58.1, . ,
,
. ,
HTML-, .

,
(ID) ?
, , , (ID)
, ,
(ID) ,
(ID).
, JavaScript,
getElementBylD.
(ID) , .
, , .
.
Alert!
Alert!
Puc. 58.1. (ID) () ,

s tyl e HTML- (),
.
5.
59.

HTML Web-. <body>:
<body l i n k = " # 0 0 0 0 F F " vlink="#FFOOFF" a l i n k = " F F 0 0 0 0 " >
59.1. , HTML
: , . .
, .
.
, . -. ,
, . Internet Explorer
, .
, . (visited)
, . (active) ,
.
. 59.1. HTML-
link
vlink
alink
, IL
, :
l i n k , v l i n k a l i n k .
,

Web-. .
(CSS) HTML.
l i n k , v l i n k a l i n k l i n k , v i s i t e d a c t i v e .
-,
, .
59.
327
57 f i r s t - l i n e f i r s t - l e t t e r . , -.

?
, , , , , , ,
, Internet Explorer Netscape
Web- .
: , Tab,
Enter, . : Tab, , ,
-. Internet Explorer
, .
Tab, , ,
.
Netscape,
.
(pseudo-class) -, ,
.
CSS- , HTML-, <body> :

arlink
{.
color: #0000FF;
a:visited {
color: #FF00FF;
a:active
Web-
328
color:
#FF0000;
, .
?
a:link
color:
#0000FF;
font-weight:
bold;
a:visited {
color:
#FF00FF;
font-weight:
normal;
a:active {
color: #FF0000;
font-weight:
bold;
59.1. , Web- , .
Here is an mivisited link Here is an unvisited link Here is a
Here is an unvmted link
Puc. 59.1.
,
Web- , , 59.2.
59.
fje
Yievi
Favorites
loois
329
Help
Here is an unvmted link Here is an mivisiled link Here is a 1. Here is an uiivmter! link
. 59.2. background-color

,
59.1. ,
59.2
{
font-weight: bold;
/*
. */
a:link {
c o l o r : #0000FF;
background-color:
#CCFFFF;
a:visited {
color: #FF00FF;
font-weight: normal;
background-color: #CCCCFF;
a:active {
color: #FF0000;
background-color: #FFFFCC;
, 59.3.
Web-
330
Here is an imviiited link Here is an unviuted link Here is a visiteci link Here if an nvisitpd
link
. 59.3.
59.2. ,
59.3
{
font-weight: bold;
text-decoration: none;
/*' , -
, -,

. */ .
a:link {
color: #OOOOFF;
background-color: #CCFFFF;
a:visited {
color: #FFOOFF;
. '
background-color: #CCCCFF;
a:active {
color: #FFOOOO;
background-color: #FFFFCC;
59.
331
: 8
, .
HTML-.
.
- Web- ,
,
.
.
: . , .
, Web- , . , Web- .
. , ,
, , , . )' , . , .
- , , . , ,
. , Web- Web-, . , .
, . ,
Web- , - .
. , .
,
. ?
,
, Web-.
? ? ? , , . . ,
, , Web-, ,
,
.
, . . . .
. ,
.
6 0 .

59 . l i n k ,
v i s i t e d a c t i v e , HTML.
: (hover state), , .
,
.
(hover state) , .
hover, .
:
{
font-weight: bold;
text-decoration: none;
}
a:hover {
text-decoration: underline;
60.1, ,
, . , , -.
, , , , .
, npaiu i . , -, . , , , , (
). , , .
h o v e r , . ,
, , ;
.
. ,
, Web-
60.
333
, 60.2, Web-.
The visitor isn't l i o v n i n a ver this lmk The visitor isn't hovering ov-r this folk. The v
havering over this link The visitor isn't hovering over this lmk
. 60.1. hover ,

The visitor h n ' l hovering over ths tmk The inter }4 hovtmnK ver this bnk I h f visitor
is hover ing .
Puc. 60.2. 60.1, ,
,

,
, . , , , , , , . . , . ,
.
, ,
. , , . ,
, .
61.

. , Web-, .
v
(path) , , .
: , ,
, , . , ,
. , . , ,
Web-, ,
, , Web-. ,
.
(absolute) ,
.
, (document-relative):
,
Web-. ,
(root-relative), ,
Web-.

URL (Uniform Resource Locator ) Web-,
http://www, :
< h r e f = " h t t p : / / w w w . . / " >
</>
61
335
, URL,
. ,
URL,
Web-. , , .
(external links)
,
Web-. . , (document-relative) (root-relative), .
, ,
Web-. Web- , URL h r e f
.
'
(internal link) , Web-,

(external link)
Web-.
URL , (internal links)

, Web-. , , , . , ,
.

Web-, .

, ?
. , ,
.
336
Web- [ 11
,

, ,
Web-.
.
, , , . :
, .
, , o f
:
< href="/.htm">C
" </>
"-
,
, :
< h r e f = "//.11:">
""</>
, . , , :
61.
337
< href="/.htm">Co ""

""</>
, http://www . , . , , .
, , ,
Web-. , ,
?
:
< href="...htm">Co " " ""</>
(. .)
. , ,
, , , .htm. ,
, :
< h r e f = " . . / . . / i n d e x . h t m " > C o " " </>

, index.htm.
, ,
. , . , ,
:
< href="..///.1:"> " " ""</>
,
, .
, .htm.
, Macromedia Dreamweaver, Adobe GoLive

Microsoft FrontPage ,
.
, , , , . ,
Web-
338
, , , .
, , , . , , ,
.
, . , .
,

, (root-relative paths),
, (document-relative
paths), ,
. , ,
,
http://www, :
< href="/index.htm"> ,
/>
, ,
(/), (root)
. ,
, , . , .. .
(root) .
, , :
< href="///.htm">l43 ""</>
, http://www .
61.
339
, , , ,
. , , ,
- ,
. , ,
Web-. , , , ( Web-). Web-. , . ,
. , ,
.

, , ?
,
. Web- ,
, : Web- (staging server), Web-, .
62.

HTML . <body> l i n k , v l i n k a l i n k , , , , , .
, , i > , | [ .
, .
, , . .
, ,
. ,
, ,
, ,
.
,

, , , ,
s t y l e - :
< h r e f = " . . / s p e c i a l . h t m "

</>
style="color:
#FF0000;"> -
,
.
, , :
<style
type="text/css">
a.special
62.
color:
341
#FF0000;
}
</style>
<body>
<a class="special" href="../speciall."> </>
< class="special" href="../special2.htm">CMOTpMTe
</>
</body>
-, s p e c i a l , .

,
s t y l e - ,
-.
:
a. special:link {
color:
#FF0000;
a.special:visited {
color:
}
#CC0000;
.
a.special:active {
color:
#990000;
Web-
342
.special:hover {
color:
#660000-;
</style>
<body>
'
<a class="special" href="../speciall."> </>.
< class="special" href =" . ./special2 .111:">

</>
</body>
CSS-
, , , . - s p e c i a l - , - , . ,
.
. , . (visited)
(unvisited) , (active) (hover)
,
link visited.

,
.
63.

. - , .
. ,
-?
: , .
, , , .
. ,
, ,
, 63.1. ,
, .
63.1. ,
63.1
< href="../index.htm">HOME</a> I
<a href="../products.htm">PRODUCTS</a>
<a
href-'../services.htm">SERVICES</a>
<a href="../aboutus.htm">ABOUT US</a>
File
Edit
JJew
Favorites
Xools
Page Title
Content goes here. Content goes here. Content goes here. Content goes here Content goes here
Content goes here Content goes here Content goes here. Content goes here Content goes here.
Content goes here Content goes here.
. 63.1. ,
,
-
Web-
344
, , 63.2.
, . .
63.2. ,
63.2
< href = " h t t p : //external_site01">External
Site
1<//>
< href = " h t t p : //external_siteO2">External
Site
2</ax/p>
<pxa href = " h t t p : //external_siteO3">External Site
3</ax/p>
<pxa href = " h t t p : //external_siteO4">External
4</ax/p>
Site
Banner Goes Here

Content goes here. Content goes here.
Content goes here. Content goes here Content g s here. Content goes here
Content goes here. Content goes here Content g s here. Content goes here.
Content g ;s here. Content goes here. Content goi s here. Content goes here
Content goi s here. Content goes here. Content
:s here Content goes here.
Content goi shere. Content goes here. Content goi here. Content goes here.
Content go :shere. Content goes here. Content go1 ;s here Content goes here.
Content g :s here. Content goes here Content
i| here. Content goes here
Content g< 13 here. Content goes here. Content go> shere. Content goes here.
11
. 63.2.
, -,
, ,
. , ,
63.3.
,
, .
, : .
(inline links) ,
.
63.
345
Many of our Investors have expressed cor*

environment enpiioh. borne recent <:
into question, nanoprn tests at several cyiicorj

i alone found 3ir emissions up ^comfortable
J
air pollution is so severe witnm a ten : mile radius
cation rtoTonqef exists'
We at Evtlcorp take txillution very seriously. After all, how evil car a
corporation be satd to be if it does not despoil the world's naturalbeauty for
generations to come?
approach to B problem. In
no., we nave recently revised
toxic emissions at all tvlicorp
We at Evllcorp humbly thank you, our Investors, for your support during
triese turbulent times. Please teel tree to download the ftiii review docum*
. 63.3. .
. .
? , , . , , , , . , , , (Stephen King),
. . .
,
.
, ? . ,
- ( ), -
, .
63.4. , , , . .
. - .
Web- 63.5 .
, . , , - . ,
. ,
, , .
346
Web-
Many of our investors nave expressed concern that we are not polluting the %
environment enough. Some recent evidence suggests that world pollution
Levels are decreasing overall. Air pollution seems especially at risk. Two
now indicate trgtjoxtc emissions into i
internal study of the situation calls many of these assertions
question.. Random
ThTrcTWorld
Random tests
tests at
at several
several Evilcorp
Evilcorp faculties
faculties in
in trie
trieThTrcTWorld
e found air emissions up
p a comfortable 3 billion ppercent, while domestic
di off some Evilcorp
Eil
pollution is so severe within a ten-mite radius
plants that
ennial vegetation no longer exists.
We at Evittorp take pollution very seriously- After all, how evil cart a
corporation be said to be if it does not despoil the world's natural beauty for
That is why we have decided to take s proactive approach to the problem. In
the event that air polluti i i f
r t
d i
to
We at Evilcorp humbly thank you, our investors, for your support during
these turbulent times. Please teel dee to download the full review document
Puc. 63.4. , .
-
Many of our investors have expressed concern that we are not polluting the
environment enough. Some recent evidence suggests that world pollution
levels are decreasing overall. Air pollution seems especially at risk. Two
highly publicized studies now indicate that toxic emissions into the
atmosphere are dowTTby as much as 0.003%.
However, our internal study cf the situation calls many of these assertions
into question, Random tests at several Evltcorp facilities in the Thltd World
alone found air emissions up a comfortable 3 billion percent, while domest
air pollution is so severe within a ten-mile radius of some Evilcorp plants
perennial vegetation no longer exists.
We at Evilcorp take pollution very seriously. After all, how evil can a
corporation be said to be if it does not despoil the world's natural beauty I
. m>is to come*
That is why we have decided to take a proactive approach to the problem,
the event that air pollution Is in fact decreasing, we have recently revised
our five-year estimates, pledging to increase toxic emissions at all Evilcorp
f ,iii..4 another seventeen billion percent. Such measures should
address any inadvertent environmental protections that may have slipped
our notice.
We j t Evilcorp Lumbly thank /ou, investors, foi youi support dunng
these turbulent times. Please fee! free to download the full review docume
Puc. 63.5. . ,
,
, ,
.
, . , Pollution ( ). .
63.
347
, , , -, ,
; , , .

?
?
, , .
, , , .
, internal study ( ), studies ().
, , internal study. ,
, . study studies
. internal study , . ,
, , . studies
study , , .
, download (),
. ? download ()
, . Pollution
( ), download (), , , - , , .
Pollution ( ), review document,
, : , , -, Evilcorp, .
:
Click Here ( )?
Web-, 63.6,
, . ,
? , ?
: . , ? ,
? ,
information (), , .
Click Here ( ) . , .
348
Web-
, . , > '
. , . , , ?
6306.fmg 100%
lany of our investors have expressed concern that we are not polluting the
nvironment enough. Some recent evidence suggests that world pollution
veis are decreasing overall. Air pollution seems especially at risk. Two
highly publicized studies now indicate that toxic emissions Into the
atmosphere are down by as iruch as 0.003%. Click here for more
However, our internal study of the situation calls many of these assertions
into question. Random tests at several Evllcorp facilities in the Third World
alone found air emissions up a comfortable 3 billion percent, while domestic
ait pollution Is so severe within a ten-mile radius of some Evilcorp plants that
perennial vegetation no kjnger exists. Ciick here for more information.
We at EvHcorp take pollution very seriously. After all, how evil can a
corporation be said to be if it cioes not despoil the world's natural beauty for
'
That is why we have decided to take a proactive approach to the problem, in

the event that air pollution is in fact decreasing, we have recently revised
our five-year estimates, piedg ng to increase toxic emissions at all Evlkorp
facilities by another seventeer billion percent, Such measures should
address any inadvertent environmental protections that may have slipped
* mation.
our notice. Ctick here for r
informal
We at Evilcofp humbly thank you, our investors, for your support during
these turbulent times. Please ;ee! free to download the fijtt review document.
Click here for more information
. 63.6. He ,
Click Here ( ), .
,
, . , .
, , Click Here ( ) .
6 4 .

, ,
Web-, ,
. 34, , ,
, ,
a l t img:
<img s r c = " h o r s e . j p g " width="100" height="50" alt="
" >
a l t . ,
, a l t , !
.
, ,
.
, , ,
. ,
, , , . , , .
- a l t , t i t l e , .
< href="../index.htm"
"></> I
title="
< href="../products/products.htm"
npoflyKTbi">PRODUCTS</a> I
title="
< href="../services/services.htm" title=" nyrn">SERVICES</a> I

<a href="../aboutus/aboutus.htm"
Hac">ABOUT US</a> I
title="
Web-
350
,
. . , . , title
Home Page ( ). Go to home page ( ).
, t i t l e ,
. . , , ,
, t i t l e ,
, .
title
Click here ( ), , , Click here to go to the
Product page ( , ). . Go to the
Product page ( ).
65.

, ,
. ,
.
, -,
.
. , , , .
Web- .
, , (Freud) , . , , URL- ,
Back () , ,
. . File Not Found ( )
,
.
.
t a r g e t -
_blank, :
< h r e f = " h t t p : / / e x t e r n a l s i t e / " target="_blank">BHemHMU </>
6 6 .

- , HTML. , - :
< href="anotherpage.htm"> </>
'
(named anchor)
Web-, .
, - ,
, :
<
=""/>
- . - hr e f, , , , . - name, , ,
.
(source) , . (destination)
, .

, - ,
. name ^/
href, , .

Web- .
. (EAQ
Frequently Asked Questions), hre f. , , :
<
name="question01"x/a>
66.
353
<pxstrong>What i s the meaning of life?</strongx/p>

<p>The meaning of l i f e i s money.</p>
<a name="guestion02"x/a>
<pxstrong>What i s the meaning of money?</strongx/p>
<p>The meaning of money i s time.</p>
<a name="question03"x/a>
<pxstrong>What is the meaning of time?</strongx/p>
<p>The meaning of time i s life.</p>
66.1, . . , .
Fife
Edit
View
Ffivorftes
Tods
FAQs
1
"What is the mealing of life?
2
3.
What is the of money?

What is the meaning of time?
Answers
What is the meaning of life?
The meaning of life is money.
What is the meaning of money?

The meaning of money is time.
What is the meaning of time?

The meaning of tune is life.
'j
. 66.1. ,
.
,

, -, -, - .
h r e f - (#), , , :
Web-
354
clixa href = "#question01">What is the meaning of life?</ax/li>

clixa href = "#question02">What is the meaning of money ?</ax/li>
<lixa href = "#question03">What is the meaning of time?</ax/li>

, , ?
, , .
- . ,
. ,
, -
.
Back To (
) - . .
. ,
.
top.
:
< href="#top">Ha3aM
</>
, , ;( - ? . , :
< href="../movies/movies.htm#newreleases">New
Releases</a>
movie.htm, newreleases.
67.

, -.

. .
(email link)
.
:
< href-"mailto:name@emailaddress">IIomnMTe
</>
- , . href, . , mailto ().

, mailto, . , ,
, href mailto,
(:) .
(subject) ():
<&
href'="mail to:name@emai1
address?subject=Mail&cc=another@emailaddress"'> </>
, ,
.
12'
356
Web-
(. 62), .
, ,
.

.
?
,
. , Web-, , , , ,
. ,
.
6.

Tab -

68.

,
,
.
,
.
(Widgets), (Form fields) (Form objects), -

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

()
<input type= "button";-
<input
box" >
type="check-
<input
type="file">
<input type="hidden">

Web-
<input
3
(
)
<select
size="x"x/select>
3
(
)
<select></select>
<input
type="password":>
IX
<input
type="radio">
- <input

type="reset">
type="image">
359
68.

Web-
<input
< t e x t a r e a x / t e x t a r e a >
<input
type="submit">
type="text">

(. . 68.1) - ,
. ,
.
, JavaScript.
input onClick, .
68.1. ,
68.1
<form>
<input type=button" name="totalButton" value="Calculate Total"
onClick="doTotal();">
</form>
. 68.1.
, ;
onCl i ck
name input , value , . onClick
Javascript, , .
Web-
360

, 68.2, , ,
. ,
- .
File
d!t
tfew
Favorites
Tools
ijelp
Select the newsletters you would like to receive

D News
Sports
Business
Entertainment
Q Humor
Puc. 68.2. , ,
( )
68.2. ,
68.2
<form>
<table>
<tr>
<td>Select the newsletters
you would like to
receive:</td>
</tr>
<tr>
<tdxinput
>News</td>
type="checkbox"
name="newsCheck"
value = "yei"
type="checkbox"
name="sportsCheck"
value="yes"
</tr>
<tr>
<tdxinput
>Sports</td>
</tr>
<tr>
<tdxinput
>Business</td>
.
type="checkbox" name="businessCheck" value="yes"
68.
361
</tr>
<tr>
<tdxinput type="checkbox" name="entertainmentCheck" value=
"yes">Entertainment</td>
</tr>
<tr>
<td><input
>Humor</td>
type="checkbox"
name="humorCheck"
value="yes"
</tr>
</table>
</form>
, name input . value , , . ,
News, Sports Business,
Web- :
newsCheck=yes
sportsCheck=yes
businessCheck=yes
, 68.1. .
, Web-.

?
. .
,
checked input :
<input type="checkbox" name="news" value="yes"
checked>
, checked .

(Submission form).
Web-
362
Web- , ,
. 68.3, : Browse ().
68.3. ,
68.3
<form>
<input type="file" name="ImageFile" size="50" maxlength="70">
</form>
Fte
Edit
Wew
FavCTftss
Tools
beb
. 68.3. ,

Web-cepeep
: name . s i z e
, , maxlength , . 68.3
size, 50, maxlength, 70, 50 , 70 .

, ?
.
.
,
.

. Browse ( I.
68.
363
, , Web-.
.

Browse (). ?
. . HTML .

Web- , , ,
68.4, .
68.4. ,
68.4
<form>
<input type="hidden" name="referringPage"
value="newsletter.htm">
</form>
Puc. 68.4. ,
,
, . 68.4 ,
, ,
.
Web-
364
, Web- , :
referringPage=newsletter.htm

?
. , ,
JavaScript
.

- HTML- Submit ( &
). , , , Submit (),
.. Web-. Submit ()
, . 68.5.
.
68.5. ,
68.5
<form>
<input
type="image"
width="20" height="20">
name="goButton"
src="images/go.gif"
</form>
File
Edit
tfew
Fgrorrtes
Tools
Puc. 68.5.
Submit ()
68.
365
scr ,
width height , img.
4
Reset ()
. , , Reset
(). . . - ,
, JavaScript Reset ().
:
<head>
function doResetO {
document.formname.reset();
/*
<form>. */
formname
( )
name
</script>
</head>

<body>
<
href = " javascript :doReset (); "ximg
src = "images/reset .gif'
width="60" height="40" 1=", ."></>
</body>
366
Web-

JavaScript
.
, :
<head>
function () {
/* JavaScript. */
</script>
</head>
<body>
<a href="javascript:();"><img src="images/button.gif"
width="60"
height="40"
alt=",
. "></>
</body>

,
. 68.6.
, ,
, Web-.
s i z e < s e l e c t > . , ,
.
68.
Fie
367
14 îew
Select the newsletter you would like to receive:
NMt
Sports
Business
Entertainment
i Humor
Puc. 68.6.
68.6. ,
68.6
<form>
<table>
<tr>
<td>Select the newsletter you would like to receive:</td>
</tr>
<tr>
<tdxselect
name="newsletterList"
size="5">
<option value="news">News</option>
<option value="sports">Sports</option>
<option
value="business">Business</option>
<option value="entertainment">Entertainment</option>
<opt ion value="humor">Humor</option>
' >
<option
value="style">Style</option>
<option
value="travel">Travel</option>
<option value="science">Science</option>
<option value="culture">Culture</option>
</selectx/td>
</tr>
</table>
</form>
Web-
368
<option>. value
<option> , Web-
. ,
Culture (), Web- , )' :
newsletterList=culture
,
<select> multiple:
<select name="newsletterList"
s i z e = " 5 " multiple>
checked, m u l t i p l e . .

?
Ctrl (Windows) Command (Mac).
,
selected:
<option value="news"
selected>News</option>
, ,
:
<option value="news"
selected>News</option>
<option v a l u e = " s p o r t s "

<option value="business"
selected>Sports</option>
selected>Business</option>

. Internet Explorer ,
Netscape - .

. , , , .
, , 68.7.
68.7. ,
68.7
<form>
<table>
<tr>
68.
369
<td>Select the newsletter you would like to receive:</td>

</tr>
<tr>
<tdxselect name="select">
<option value="news" selected>News</option>
<option value="sports">Sports</option>
<option value="business">Business</option>
<option value="entertainment">Entertainment</option>
<option value="humor">Humor</option>
<option value="style">Style</option>
<option value="travel">Travel</option>
<option value="science">Science</option>
<option value="culture">Culture</option>
</selectx/td>
</tr>
</table>
</form>
Select the newsletter you would like to receive:
[Newr;:;;;;
. 68.7. ,

Web-, 68.7, ,
s i z e s e l e c t .
Web-
370

. ,
.
, ,
Web-, . , m u l t i p l e s e l e c t e d <select> <option>,
, , , , , .

, , 68.8. , ;
.

?
. .
(PIN), ,
.
68.8. ,
68.8
<form>
<srong>Password:</strong>
<input type="password" name="userPassword" value="ladda">
</form>
. ,
value .
, , :
<input type="password" name="userPassword">
, Web- , , :
userPassword=ladda;
68.
371
. 68.8. ,

, size,
w.axlength
, .

,
, 68.9.
, .
. -
- , , - .
68.9. ,
68.9
<form>
<table>
<tr>
<td>Select the n e w s l e t t e r you
would l i k e t o
receive:</td>
372
Web- I'M
</tr>
<tr>
<tdxinputchecked>News</td>
type="radio"
name="newsletter"
value- "news'
</tr>
<tr>
<tdxinput
>Sports</td>
type="radio"
name="newsletter"
value="sports"
</tr>
<tr>
<tdxinput
>Business</td>
type="radio"
name="newsletter"
value="business"
</tr>
<tr>
<tdxinput type="radio"
ment">Entertainment</td>
name="newsletter"
value="entertain-
</tr>
<tr>
<tdxinput
>Humor</td>
type="radio"
name="newsletter"
value="humor"
</tr>
</table>
</form>
Select the newsletter you would like to receive

News
Sports
Business
Entertainment
Humor
Puc. 68.9. ,

68.
373
checked i n p u t News (). .

. - ,
.
,
, .
v a l u e , .
, Humor (), :
newsletter=humor
, , .

(. 68.10)
.
, .
,
.
, Submit ().
. 68.10.

374
Web-
68.10. ,
68.10
<form>
<input t y p e = " r e s e t " name="fieldsReset" vaiue="Reset
Fields">
</form>
value , .
Submit ()
Submit ()
(. 68.11). , , a c t i o n <f orm>, method <form>.
. .

?
: GET POST. GET
, < / URL-
. POST
,
Web-.
68.11. ,
68.11
<form action="/forms/process.php" method="POST">
xinput type="submit" name="formSubmit" value="Submit Form">
</form>
Submit () POST. a c t ion )' , process.php. )' .
, , value Submit (), .
68.
375
. 68.11. Submit ()
Web- ,

?
, , .
, ,
HTML- JavaScript, , .

- , 68.12.
68.12. ,
68.12
<form>
<textarea name="typeTextHere"
here.</textarea>
cols="50"
rows="5">Type
text
</form>
cols <textarea>
, , rows
. , 68.12 50 5 .

<textarea>, value, .
376
Web-
, , :
< t e x t a r e a name="typeTextHere" cols="50"
rows="5"x/textarea>
. , . Enter Return .
, wrap t e x t a r e a v i r t u a l physical:
< t e x t a r e a name="typeTextHere"
</textarea>
cols="50"
rows="5"
wrap="virtual">
:Type text here.
. 68.12:
(virtual wrapping)
. (physical
wrapping)
.
.

, ( Enter Return). , , .
68.
377

- , . 68.13. , , .
( , ) s i z e . , , maxlength, , , value.
68.13. ,
68.13
<form>
<input type="text" name="typeTextHere" value="Type text here."
size="50" maxlength="80">
</form>
Jype text here
. 68.13.
, . , ,
, .
JavaScript :
<input type="tex" name="typeTextHere" value="Type
size="50" maxlength="80" o n F o c u s = " t h i s . s e l e c t ( ) ; " >
text
here."
onFocus
Tab. s e l e c t ()
.
378
Web-

, size ?
size, ,
. maxlength , .
onFocus="this. select (); " .
69.

CSS- , - HTML-. (CSS) ,
, Submit (). , HTML-,
CSS-, , Web- .

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

, , ,
, , , , . 69.1, CSS- , ,
.
69.1 , , 69.1. , , ,
.

, ,
HTML- .
380
Web-
. 69.1. CSS-

font-family
Anal
font-family:
Helvetica, sans-serif;
font-style
font-style:
font-weight
-font-weight: bold;

font-size
- font-size:
font-variant
- font-variant:

caps;
small-
text-transform
- text-transform:
- case;
lower-
italic;
12;
text-decora- , text-decoration: Undertion

- line ;

TYPE TEXT HERE. YOU'LL BE GLAD YOU

DID.
NO, TYPE TEXT HERE INSTEAD.
Puc. 69.1. CSS- ,

69.
381
69.1. ,
69.1
<head>
<style
type="text/css">
. textf ields
. . .
font-family:
font-style:
"Times New Roman", Times, serif;

italic;
font-weight: bold;
font-size:
.
'
18px;
font-variant:
small-caps;
font-decoration:
underline;
.buttons {
font-family:
font-size:
font-weight:
"Times New Roman", Times,
serif;
12px;
bold;
font-transform:
uppercase;
</style>
</head>
<body>
<form>
<table
<tr
cellpadding="10">
valign="top">
<td>
<textarea cols="50" rows="5" class="textfields">Type
here. You'll be glad you did.</textarea>'
</td>
<td>
text
382
Web-
<input type="text" class="textfields" size="50" value="Nc,

type text here instead. ">
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" value="Submit" class="buttons"x/td>
</tr>
</table>
</form>
</body>

CSS- color background-color
, 69.2.
border-color, border-width b o r d e r - s t y l e .
69.2. ,
69.2
<head>
.listsmenu {
color: #FFFFFF;
background-color: #000000;
.buttons {
color: #FFFFFF;
border-color: #999999;
border-width: 6px;
border-style: double;
font-weight: bold;
69.
383
</style>
</head>
<body>
<form>
<table cellpadding="10">
<tr valign="top">
<tdxselect name = "select" size="5" class="listsmenus">
<option value="l" selected>List Option l</option>
<option value="2">List Option 2</option>
</selectx/td>
<tdxselect name="select" class="listsmenus">
<option value="l" selected>Menu Option l</option>
<option value="2">Menu Option 2</option>
</select></td>
</tr>
<tr>
<td colspan="2" align="center"xinput
class = "buttons" value="Submit"x/td>
</tr>
</table>
</form>
</body>
type="submit
384
Web-
Puc. 69.2. color

background-color,

70.

, Web-, . (validation) .
, , ,
, , , . , ,
. , ,
, .
-
- , . ,
, ,
, ,
.
(validating) Web-.

. , , ,
. ,
Web-.
,
,
.
Web-
386

. .
.
.
<script
/*
J a v a S c r i p t , < s c r i p t > , :
, .
Web-, ,
, */
function validateFormf)
/*
*/
return true;
/* , , Web. */
</script>
, : ,
. onSubmit
<f orm> :
<form name="formname" action="formaction" method=
"formmethod"> onSubmit="return validateFormf);">
, name, a c t i o n method .

, :
var
email
* new
textfieldname.value);
String(document.formname.
/* ,
. "email" ,
. */
70.
if (email.indexOf
387
== -1) {
/* ! "
"@". , ,

. */
alert(" .");
/*
. . */
document.formname.textfieldname.select();
/* . */
return false;
/* . */

, . :
var
fieldOl
= new String(document.formname.
requiredfieldOl.value);
new
var
fieldO2
requiredfieldO2.value)
String(document.formname.
var
f ieldO3
= new String(document.formname,
requiredfieldO3.value);
var
fieldO4 = new String(document.formname
String(document.formname
var
fieldO5
= new
/*
.
,
. , , . */
var pass = true;
Web-
388
/*
(true/false) "pass" "true". */
/* if/then ,

. ,
pass false. >
if/then, :
, . */
if (fieldOl.length == 0) {
pass. = false;
if (fieldO2.length == 01
pass = false;
if -(fieldO3 .length == 0)
pass = false;
if (fieldO4.length == 0) {
pass = false;
if (fieldO5.length == 0) {
pass = false;
/* pass. pass
false, , ,
, .
. */
if (pass == false) {
alert(" .");
return false;
70.
389

, .
, , :
<option selected>Bbi6epi4Te nyHKT...</option>
...,
<option>,
. ,
:
var listOl = document.formname.requiredlistOl;

var listOlText = listOl.options[listOl.
selectedlndex].text;
var listO2 = document.formname.requiredlistO2;
var listO2Text = listO2.options[listO2.
var listO5 = document.formname.re<iuiredlistO5;
/*
. , . , .

"pass" "true". */
var pass = true;
/* if/then ,
-
, .

, , pass
false.
if/then,
390
Web-

, if/then. */
if (listOlText == " ...") {
pass = false;
if (listO2Text == " ...") {
pass = false;
pass = false;
pass = false;
pass = false;
/* if/then
pass. pass false, . */
if (pass == false) {
alert(" .
.
.") ;
return false;
-
, ,
- ,
:
var field = new String(document.formname.fieldname, value) ;
/*
. formname
, fieldname , .

"pass"
"true". */
70.
391
var pass = true;

/* for/nex.t.

, . , pass false. */
for (var x = 0; < field.length; x++) {
if (field.charCodeAt(x) < 48 I I
(field.charCodeAt(x) > 57 && field.charCodeAt(x)
< 65) II
;field.charCodeAt(x) > 90 && field.charCodeAt(x)
97!
field.charCodeAt(x) > 122) {
pass = false;
/* , pass
f a l s e , , ,
. */
if
(pass == f a l s e ) ' {
alert (" .")

document.formname.fieldname.value ="";
document.formname.fieldname.select();
return false;

, ,
. :
,
. .
var password = new String(document.formname.passwordname.value);
var retype = new String(document.formname.retypename.value);
/ *

Web-
392
. formname ,
passwordname retypename - , . */
if (password.valueOf() != retype.valueOf()) {
alert(" .");
document.formname.retypename.value
=""j
document.formname.passwordname.select ();
return false;
/* if/then
,
. , ;; , :
,
. */
I Agree ( )
, I Agree
( ), , , .
if
(document.formname.checkboxname.checked
false) {
==
alert(" ,
.")
return false;
/* if/then . ,
. formname
, checkboxname
"I agree" ( ). */
71.
Tab
.
. . , , ,
, , , Tab.
tabindex
.
,
Tab, HTML-.
, , , .
, Tab, ,

tabindex.
71.1, tabindex,
.
tabindex , Web-. Tab

.
394
Web-
You
Your Spouse
Name
Name
Email address
May we contact you? <> Tes No
Email address
May we contact your spouse? 0 Yes No
Puc. 71.1.
tabindex.
Tab
71.1. ,
71.1
<form>
<table>
<tr>
<td
colspan="2"><strong>You</strongx/td>
<td width="50" rowspan="4"> </td>

<td colspan="2"xstrong>Your
.
Spouse</strongx/td>
</tr>
<tr>
<td>Name</td>
ctdxinput type="text" name="yourName"</td>
<td>Name</td>
<tdxinput type="text" name="spouseName"</td>
</tr>
<tr>
<td>Emailaddress</td>
<td><input type="text" name="yourEmail"</td>
<td>Email address</td>
<td><input type="text" name="spouseEmail"</td>
</tr>
<tr>
<td>May we contact you?</td>
<tdxinput type="radio" name="contactYou" value="yes" checked>
Yes
71. Tab
395
<input type="radio" name="contactYou" value="no">

No</td>
<td>May we contact your spouse?</td>
<tdxinput
checked>
type="radio"
name="contactSpouse" value="yes"
Yes
<input type="radio" name="contactSpouse" value="no">
No</td>
</tr>
</table>
</form>
Tab- ,
HTML- . ,
yourName, - spouseName, - yourEmail, -
spouseEmail . .
, ,
, (Spouse).
t a b index:
<form>
<table>
<tr>
<td
colspan="2"xstrong>You</strongx/td>
<td width="50"
rowspan="4"> </td>
<td colspan="2"xstrong>Your
Spouse</strongx/td>
</tr>
<tr>
<td>Name</td>
<tdxinput type="text" name = "yourName" tabindex="l"x/td>
<td>Name</td>
<tdxinput type="text" name="spouseName" tabindex="5"x/td>
</tr>
<tr>
<tdxinput type="text" name= "yourEmail"
tabindex="2"x/td>
<tdxinput type="text" name="spouseEmail"
</tr>
tabindex="6"x/td>
396
Web-
<tr>
<td>May we contact you?</td>
<td><input type="radio" name="contactYou" value="yes" checked

tabindex="3">
Yes
<input
type="radio"
name="contactYou"
value="nc"
tabindex="4">
No</td>
<td>May we contact your spouse?</td>
<tdxinput type="radio" name="contactSpouse" value="y:s"
checked tabindex="7">
Yes
<input
type="radio"
name="contactSpouse"
value="r::O"
tabindex="8">
No</td>
</tr>
</table>
</form>
,
tabindex="l
"
. , .
, t a b i n d e x .
Tab-,
. ,
t a b i n d e x , yourName
yourEmail. contactYou yes, contactYou no (spouse)
.

,
tabindex ?

HTML-: , ,
Tab-.
72.

- .
.
.
, HTML-,
, 72.1.
(fieldset) -
.
File
dit
îew
Favorites
loots
Choose your newsletters:

Q News
D Sports
Weather
D Entertainment
Q Editorial
Arts
Style
fc
Pick the days to receive them:

Q Sunday
D Monday
G Tuesday
Wednesday
Thursday
a Friday
Saturday
Puc. 72.1. Ha
72.1. ,
72.1
<form>
<table cellpadding="10">
<tr valign="top">
<td width="50%">
<pxstrong>Choose you newsletters :</strongx/p>

<fieldset>
<table>
Web-
398
<tr>
<td>
<input name="news" type="checkbox" value="yes">

News
</td>
</tr>
<tr>
<td>
<input name="sports" type="checkbox" value="yes">
Sports
</td>
</tr>
<tr>
<td>
<input name="weather" type="checkbox" value="yes">
Weather
</td>
</tr>
<tr>
<td>
<input name="ent" type="checkbox" value="yes">
Entertainment
</td>
</tr>
<tr>
<td>
..
<input name="ed" type="checkbox" value="yes">

Editorial
</td>
</tr>
<tr>
<td>
<input name="arts" type="checkbox" value="yes">
Arts
</td>
</tr>
72.
399
<tr>
<td>
<input name="style" type="checkbox" value="yes">
Style
</td>
</tr>
</table>
' ,
</fieldset>

</td>
<td width="50%">
<pxstrong>Pick the days to receive them:</strongx/p>

. .
<fieldset>
<table>
<tr>
<td>
<input name="sun" type="checkbox" value="yes">
Sunday
</td>
</tr>
<tr>
<td>
<input name="mon" type="checkbox" value="yes">
Monday
</td>
</tr>
<tr>
<td>
<input name="tues" type="checkbox" value="yes">
Tuesday
</td>
Web-
400
</tr>
<tr>
<td>
<input name="wed" type="checkbox" value="yes">

Wednesday
</td>
;
</tr>
<tr>
<td>
<input name="thurs" type="checkbox" value="yes">

Thursday
</td>
</tr>
, <tr>
<td>
<input name="fri" type="checkbox" value="yes">
Friday
</td>
</tr>
<tr>
<td>
<input name="sat" type="checkbox" value="yes">
Saturday
</td> .
</tr>
</table>
</fieldset>

</td>
<tr>
</table>
</form>
401
72.
, , . <legend>
)' , 72.2.
Fte
dit
Wew
Favorites
Tools
Help
Choose your newsletters:

Days
Sunday
Monday
Tuesday
Wednesday
Thursday
D Friday
Newsletters
News
Sport
D Weather .
Q Entertainment
Editorial
D Arts
D Style
Saturday
Puc. 72.2. <legend>,

72.2. ,
72.2
<form>

<pxstrong>Choose
you newsletters :</strongx/p>
<fieldset>
<legend>Newsletters</legend>

</fieldset>

the days to receive
them:</strongx/p>
<fieldset>
<legend>Days</legend>

Web-
402
</fieldset>
< ! - - -->
</form>
<legend>
<fieldset>.
- Internet Explorer Netscape.

,
.
,
.
<legend>
:
<style
type="text/css">
legend {
color: #000000;
</style>
:
<style
type="text/css">
legend {
color: #000000;
font-weight: bold;
</style>
72.3.
72.
Choose your newsletter):
403

Days
Newsletters
News
D Sunday
Sports
Monday
D Weather
D Tuesday
Entertainment
D Wednesday
D Editorial
U Thursday
Arts
D Style
Fnday
Saturday
. 72.3.

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

, . border-color, b o r d e r - s t y l e border-width. color,
background-color. 72.4.
72.3. ,
72.3
<head>
<fieldset {
border-style: dashed;
border-width: 4px;
border-color: #FF0000;
color: #FFOOOO;
background-color: #FFCCCC;
Web-
404
}
</style>
</head>
i

Choose yoiu newsletters:
*
0 We*
D
D TueM,.
W,..:!Oi-,4
l],,;-i.,v
Am
a styfc
. 72.4. <ieldset>
73.

, , W3C (World Wide Web Consortium) .
, . , ,
,
. , , , ? , ?
, , . , ,
. . , HTML
.
,
. HTML ,
: <label >. 73.1.
(label) - , ,
.
Eile
tfew.
Favorites
Tods
Help
News
Sports
Business
Entertainment
Humor
Puc. 73.1.
<label>
406
Web-
73.1. , 73.1
<form>
<table>
<tr>
<tdxlabel>
<input type="checkbox" name="news" value="yes">
News</labelx/td>
</tr>
<tr>
<tdxlabel>
<input type="checkbox" name="sports" value="yes">
Sport s</labelx/td>
</tr>
<tr>
<tdxlabel>
<input type="checkbox" name="business" value="yes">
Business</labelx/td>
</tr>
<tr>
<tdxlabel>
<input type="checkbox" name="entertainment" value="yes">
Entertainment</label></td>
</tr>
<tr>
<tdxlabel>
<input type="checkbox" name="humor" value="yes">
Humor </labelx/td>
</tr>
</table>
</form>
73.
407
, - . . :
. , , .
-, , Web-
. -
, . , - , , ,
.
-, < l a b e l > . ,
. , , .
,
Web- , Web-.
<label> CSS-, .
, , . id for, .
-, CSS- < 1 abe 1 > . .
. , <label> <input>
.
<label>
cinput type="checkbox"
name="humor"
value="yes">
Humor
</label>
, . ,
:
<form>
<table>
<tr>
<tdxinput
type="checkbox"
<td>Humor</td>
name="humor"
value="yes"x/td>
Web-
408
</tr>
</table>
</form>
<input> <label >,
. <label>. , ,
: id for.
<form>
<table>
<tr>
<td>
<input. type="checkbox" name="humor" id="humor" value="yes";
</td>
<td>
<label for="humor">Humor</label>
</td>
</tr>
</table>
</form>
ID () .
.
7.

,

74.

,
, , .
, . 11
, , , Flash-, SVG- (Scalable Vector Graphics ), Acrobat , , HTML,
, . 74.1
.
(multimedia)
Web-, , HTML,
, . , , Flash-, SVG- Acrobat.
. 74.1.

Adobe Acrobat (Portable Document Format -

)
, PDF

Apple Audio Interchange Format
AIFF, AIF
Apple QuickTime
MOV
Macromedia Flash
, ,
SWF
Macromedia Shockwave
!1, ,
DCR
Microsoft Wave
WAV
Microsoft Windows Media
WMA, WMV
MIDI (Musical Instruments Digital ,

Interface -
)
MID
RealMedia
RM
Scalable Vector Graphics
SVG
Sun Audio Format
AU
74.
411
, . . ,
HTML-,
. . , , SVG-
HTML-.
, , . ,
Internet Explorer Acrobat.
, (plug-in), , ,
Acrobat. . Microsoft Internet Explorer Flash-
Macromedia, Flash-. ,
, , ,

, , .
, ,
.
Web- <embed>. , , : <embed> HTML-.
HTML. , ,
.
, W3C (World
Wide Web Consortium), , <embed> . , W3C , <object>,
. , , , <obj ect>
.
<ob j ect > , .
, .
,
. . <object>
, .
<embed>.
<embed> , 74.1.
74.1. ,
74.1
<body>
<p>Enjoy t h i s Flash movie!</p>
<embed src="movie.swf" width="550"
</body>
height="400"x/embed>
412
Web-
dt
tfew
Favorites
lools
yelp
Enjoy this Flash move!
. 74.1. <embed>

Web-, 74.1, <embed>
, ,
, <img>.
s r c , .
, w i d t h h e i g h t
. , <embed>
<img>, .
<embed> , <img>,
align. align <embed> ,
<img>, ,
. <embed> <div> align <div> :
<div
align="center">
<embed scr="movie.swf"
width="550"
height ="'40 0 ">< /'embed>
<embed>
, <img> . ,
Flash- , Flash-. , . (plug-in) , SWF-, Web- . p l u g i n s p a g e , Web-,

:
<embed src="movie.swf" width="550" height="400"
74.
413
pluginspage="http://www.macromedia.com/go/getflashplayer">
</embed>
width height ( Stop (),

Play (), Fast Forward ( ), Volume
() ). ,
, hidden <embed> true.
<embed> . , Flash- q u a l i t y : low (), medium () high ().

q u a l i t y , :
<embed src="movie.swf" width="550" height="400"
quality="high"
</embed>

,
Web- ; , http:/www.adobe.com/
http://www.macromedia, com/.
.
, , Flash-
, , play loop:<embed src="movie.swf" width="550" height="400" quality="high"
play="false" loop="false"
</embed>
74.2 <embed> . , , .
414
Web-
. 74.2. <embed>
autoplay
true, false

Flash-
height
hidden
, - t r u e , f a l s e
Web-
loop
, true,false

play
Flash-; ,

true,false
Flash-
playcount
- Internet
Explorer
quality
- low, medium,

high
Flash-
volume
1-100
width
loop Netscape , p l a y c o u n t Internet Explorer

t r u e f a l s e . , -, Flash- loop Netscape.

,
?
: . , ,
. , Flash play, , autoplay, . ,
Web-, , , , ,
.
75.

Web- Refresh (). , ,
,
- .
, Web- ,
. , , , , .
, , , , ,
, .
, Web-, , 75.1.
JavaScript, doLucky ().
,
Web- , , , , . , , .
,
.
Be
I * * Fjvortes
look *
Here are your lucky numbers for the d a y 4 1 6
Puc. 75.1. Ha Web- JavaScript,

,
416
Web-
75.1. ,
75.1
<html>
<head>
<title>Lucky Numbers</title>
/* 0 9
. */
function doLucky() {
var x = Math.round(Math.random()
* 9);
document.write(x);
</script>
</head>
<body>
/* doLucky()
. */
<p>Here are your lucky numbers for
the day:
<strong>
<script language="JavaScript">doLucky() ;</script>

<script
language="JavaScript">doLucky();</script>
<script
language^"JavaScript">doLucky();</script>
</strong>
</body>
</html>
<meta> Web-. HTML- <meta> , .
. , .
<meta> , Web-,
75.2.
75.
75.2. ,
75.2
<html>
<head>
<title>Lucky Numbers</title>
<meta http-equiv="refresh" content="3,#">
/* doLucky() . */
</script>
</head>
<body>
<p>Here are your lucky numbers for the next three seconds:
<strong>
<script
language^"JavaScript">doLucky();</script>
<script
language="JavaScript">doLucky();</script>
<script language="JavaScript">doLucky();</script>
</strong>
</body>
</html>
Here are your lucky numbers for the next three seconds 1 0 2
Puc. 75.2. <meta>

417
Web-
418

<meta>?
<meta> Web-. , <body>.
, type < input > ,

, h t t p - e q u i v <meta> . h t t p - e q u i v <meta>. h t t p - e q u i v refresh, <meta>
.
content.
Web-, 75.2, <meta> :
<meta h t t p - e q u i v = " r e f r e s h " content="3,#">
3 content . , . # content , . . , con-
t e n t : .
, , . :
<meta h t t p - e q u i v = " r e f r e s h " content="60,#">
<meta> .
(#) ,
. - ,
http://www:
<meta'http-equiv="'refresh'
content=3,
URL-]"
[ -
76.

75 , <meta> Web-. <meta> :
<meta h t t p - e q u i v = " r e f r e s h " content="x,#">
, ,
# , .
, Web-, . URL-
(#).

<meta>, , , ?
.
<meta> .
, . , , .
, .
. ,
, ,
.
. , ,
, , 76.1. .
76.1. ,
76.1
<html>
<head>
<title>Uh, o h ! < / t i t l e >
<meta h t t p - e q u i v = " r e f r e s h "
</head>
<body>
c o n t e n t = " 5 , http://newpage.htm">
Web-
420
<hl>Uh, oh!</hl>
<p>The page you're looking for no longer exists. Your browse:

will automatically jump to the new page in five seconds. Please
update your bookmarks.</p>
</body>
</html>
&le
,d*
View
Favorites
lods
Help
Uh, oh!
The page you're looking for no longer exists Your browser will automatically jump to the new page in five
seconds Please update your bookmarks
. 76.1. , ,

<meta> Web-, 76.1,
, <meta>, . 5
c o n t e n t , URL- , .

URL-
<meta>?
URL- <meta> : , ,
.
, ,
. , ,
, , , . , , . ?
. -
, 76.2.
76.2. ,
76.2
<html>
<head>
76.
421
<title>Uh, oh!</title>
<meta http-equiv="refresh" content="10, http://newpage.htm">
</head>
<body>
<hl>Uh, oh!</hl>
<p>The page you're looking for no longer exists. Your browser
will automatically jump to the <a href="http://newpage.htm">new
page</a> in ten seconds. Please update your bookmarks.</p>
</body>
</html>
Ffc
Edit
Wew Favorites
Xods
beip
Uh, oh!
The page you're looking for no longer easts. Your browser will automatically jump to the new page in ten
seconds. Please update your bookmarks.
. 76.2.
,
Web-
Click Here ( ) , , -, . , ,
.
77.
,

Web- : , .
. , , .
.
About Us ( ) .
Web- , . About Us ( ).
, ,
, , .
. : , , , . , .

Web-. . JavaScript, . , Web-. HTML- , .

?
.

.

.
77. ,
423
JavaScript:
/* JS, <script>, , .
HTML-, <script> . */
function doRandomlmage() {
/* 1 5.
, . : Math.round(Math.random() * [
- 1]) + 1. ,
Math.round(Math.random() * 9) + 1. ,
Math.round(Math.random() *
1) + 1 . */
var x = Math.round(Math.random() * 4) + 1;
/*
image, HTML-,
. */
var image;
/* if/then
image.
if /then.
,
if/then. */
if (x == 1) {
image - "<img src=\"src01\" width=\"width01\"
height=\"height01\" alt=\"alt01\">";
/* srcOl .
widthOl, heightOl altOl , .
,
,
.
424
Web-
, (\). . ,
. */
if (x == 2) {
image = "<img src=\"srcO2\" width=\"widthO2\"
height=\"heightO2\" alt=\"altO2\">";
if (x == 3) {
height=\"height03\" alt=\"altO3\">";
if (x == 4) {
image = "<img src=\"srcO4\" width=\"width04\"
height=\"heightO4\" alt=\"alt04\">";
if (x'== 5) {
height=\"heightO5\" alt=\"altO5\">";
/* HTML-
image Web-. */
document.write(image);
</script>
. . HTML- ,
.
<script
</script>
language="JavaScript">doRandomImage();
77. , 425

, , , HTML-,
, -:
<
href="targetpath"xscript
language= "JavaScript ">doRandomImage (); </scriptx/a>
, , - image doRandomlmage () :
if
(x == 1) {
image = "< href=\"targetpath01\"ximg

src=\"src01\" width=\"width01\" height=\"height01\"
alt = \"alt01\"x/a>"

Web-. : JavaScript Web-.
JavaScript:
<script
/* J S , < s c r i p t > , , - .
HTML-, <script> . */ .
function doRandomQuote() {
/* 1 5.
, .
: Math.round(Math.random() * [ 1]) + 1. */
var x = Math.round(Math.random(
1;
/*
quote, . */
var quote;
Web-
426
/*
tag.
,
: , blockquote, hi, . */
var tag = "blockquote";
/*
source.
, ,
, . */
var source;
/*
code, HTML-, . */
var code;
/* if/then
quote.
if/then.
. ,
: source = ""; */
if (x == 1) {
quote = " 1 .";
source
.";
= "
if (x == 2) {
quote = " 2 .";
source
.";
"
if ( == 3) {
quote = " 3 . .";
source
.";
"
77. ,
427
if ( == 4) {
quote = " 4 .";
source = "
.";
if ( == 5) {
quote = " 5 .";
source =
.";
"
/* HTML-
. */
code =
tag
/* , . ,* /
code += "“";
/* . */
code += quote;
/* ,
. */
code += "”";
/* <cite>
.
, . 7
code += "<cite>";
/* if/then ,
source. ,

.

, . , , (&#8212) , , (:). */
428
Web-
if (source.lqngth != 0) {
code += "—";
/t , <cite> ' . */
code += (source + "</cite></" + tag + ">");
/*
Web-. */
document.write(code);
</script>
HTML- , Web-.
<script
</script>
language="JavaScript">doRandomQuote1);

CSS-
.
doRandomQuote () :
code ="<
tag
:
code = "<" + tag +
class=\"\">"
77. , 429

<body> . ,
, ,
.
.
, . JavaScript, . HTML, <body> Web.
:
/* CSS, <style> . '
HTML-,
<style> .
, . . , <body>. */
body.styleOl {
color: #FFFFFF;
font-family: Arial, Helvetica,' sans-serif;
body.style02 {
background-color: #FFFF00;
color: #FF0000;
font-family: "Times New Roman", Times, serif;
430
Web-
body.styleO3 {
background-color: #FFFFFF;
color: #000000;
font-family: "Courier New", Courier, mono;
</style>
JavaScript:
/* JS, <scripfe>; , .
HTML-, <script> , , .
*/
function doRandomProperties() {
/* 1 2.
,
. : Math.round(Math.random() * [ - 1]) + 1. */
var x = Math.round(Math.random() * 2) + 1;
/*
style, ,
. */
var style;
/* if/then
style.
if/then. */
if (x == 1) {
style = "styleOl";
77. ,
if
431
( == 2) {
s t y l e = "styleO2";
}
if
(x == 3)
s t y l e = "styleO3";
/* , <body>
Web-. (\), ,
HTML-,

J a v a S c r i p t . */
document.write("<body c l a s s = \ " " + s t y l e + " \ " > " ) ;
</script>
<body> HTML-:
<script
language="JavaScript">doRandomProperties();</scrip
t>
, ,
<body>, :
<body>
<script
language="JavaScript">doRandomProperties();</scrip
t>
<!
</body>
Web-
432

<body>?
. , Web- <body>: , HTML-, , :
doRandomProperties
(). , Web, ,
<body>. .
, ,
<body> doRandomProperties
(). , , , ,
, JavaScript, HTML-,
<body>.
78.

Web- , ,
,

, .
: , . , .
, , , , , , , , .
Web- . , , .
,
. , - - Internet
Explorer 4.0 Netscape Navigator 3.0 (, ,
Netscape),
.
,
. .
. -,
, ,
, , . -,
, , , ,

. , . , , , .
,
, , , , ,
.
Web-
434

,
, . JavaScript navigator?
, JavaScript navigator, , appCodeName, appName appVersion,
. userAgent. , userAgent ,
,
,
, .
userAgent JavaScritp-
navigator. userAgent . HTML- :
<html>
<head>
<title>userAgent T e s t < / t i t l e >
</head>
<body>
< s c r i p t language="JavaScript">
document.write(navigator.userAgent);
</script>
</body>
</html>
Microsoft Internet Explorer 6.0 Windows :
Mozilla/4.0
1.0.3705)
(compatible;
MSIE
6.0;
Windows
NT 5 . 1 ;
.NET CI.R
Netscape 7.1 Windows :

Mozilla/5.0
(Windows;
U; Windows
Gecko/20030624 Netscape/7.1 (ax)
NT
5.1;
en-US;
rv:1.4)
Opera 7.23 :
Mozilla/4.0
(compatible; MSIE 6.0; Windows NT 5.1)
Opera 7.23
[en]
, . ,
userAgent ,
,
, :
78.
435
Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1) Opera 7.23 [en]

:
Opera 7.23
, , :

HTML- <script>
JavaScript.
/* <script> , ' JavaScript. */
function doBrowserCheck() {
/* .
userBrowser userAgent navigator,

.
pass (true/false)
. pass
true,
, .
,
true.
versionStart versionEnd
userBrowser. , , . */
var userBrowser = navigator.userAgent;
var pass = true;
var versionStart;
var versionEnd;
/*
: Internet Explorer, Netscape
Opera. 5.5, 6.0 5.0,
. .
Web-
436
versionMSIE,
versionNetscape
versionOpera , userBrowser. */
var targetMSIE = 5.5;
var versionMSIE;
var targetNetscape = 6;
var versionNetscape;
var targetOpera = 5;
var versionOpera;
/* if/then
Microsoft Internet Explorer. */
if (userBrowser.indexOf("MSIE") != -1 &&
userBrowser.indexOf("Opera" ) == -1) {
/* userBrowser "MSIE". userBrowser "MSIE"
"Opera" ( userAgent Opera "MSIE"),
, Microsoft Internet Explorer. */
versionStart = userBrowser.indexOf("MSIE") + 5;
/*
userBrowser, "" "MSIE". */
versionEnd = userBrowser.indexOf(";" ,
versionStart);
/*
userBrowser, " ". */

versionMSIE = userBrowser.substring
(versionStart, versionEnd);
/* userBrowser
versionMSIE. */
if (versionMSIE < targetMSIE) {
pass = false;
437
7 8 .
/* if/then
Internet Explorer .'
, pass false.
if/then
Netscape. */
if (userBrowser.indexOf("Netscape")
!= -1) {
/*
userBrowser (
"N" "Netscape" )
versionNetscape. */
versionStart =
userBrowser.indexOf("Netscape"]
9;
versionEnd = userBrowser.indexOf(" ",

versionStart);
versionNetscape =
userBrowser.substring(versionStart, versionEnd);
/* , Netscape , pass false. */
if (versionNetscape < targetNetscape) {
pass = false;
/* Opera. */
if (userBrowser.indexOf("Opera")
!= -1) {
/*
userBrowser. "" "Opera",

. */
versionStart = userBrowser.indexOf("Opera") + 6;
versionEnd = userBrowser.indexOf(" ",
versionStart);
versionOpera =
userBrowser.substring(versionStart, versionEnd);
/* Opera , pass
false. */
Web-
438
if
(versionOpera < targetOpera) {

pass = false;
',
/* if/then , pass false. , .

, ,
. */
if (!pass) {
alert("

JavaScript .
.
, ,
.")
</script>
.
(Ipass), JavaScript if
, .
onLoad
<body> HTML-:.
<body onLoad="doBrowserCheck() ; ">
doBrowserCheck ().
79.

" "
, :
You Are Now Leaving ( ),
.
Web-, , Web-. ,
, , .
,
.
Web- . , , , . .
,
. , . , . , , .
, .
JavaScript, ,
.

JavaScript ,
.
<script
/* <script> , J a v a S c r i p t . */
function doYouAreNowLeaving(url) {
/*
if/then.

, Cancel
(). ( .) , URL-, , .
Cancel (),

. */
Web-
440
if (confirm(" .
.")) {
location.href ~ url;
</script>
, ,
. :
<
href="javascript:doYouAreNowLeaving(scr);"
>3 </>
s r c - (
http://www) , ,
.
JavaScript -
, , :
< href="#" onClick="doYouAreNowLeaving(scr);"
>3 </>
, s r c -
.
, target = "_blank"
- .
, .. JavaScript, Web. ,
doYouAreNowLeaving
(url)
location.href
:
open (url);
= url;
8.

HTML-

Web-

8 0 .
HTML-
Web- HTML-. HTML Hypertext Markup Language ( ). , Web-.
HTML Hypertext Markup Language ( ). , Web-.
HTML- .
,
. ? ,
. Microsoft
Notepad (),
Windows: Start All Programs Accessories Notepad ( Notepad). Mac OS
SimpleText,
Mac OS TextEdit. , .
Teru(tags) HTML, HTML-.

, : , , .
HTML- , HTML,
. ,
, , , . , HTML- Web-.
, HTML- :
Take my w i f e .
Please.
HTML- , . , , :
<p>Take my w i f e .
Please.</p>
80. HTML-
443

.
?
. , , Microsoft Word.
,
, HTML-.
,
HTML-. , HTML-.
, HTML-, :
(<>), , (</>), . , ,
, , 80.1.
Take my wife Please.
Puc. 80.1. ,

, . , , , - . :
<hl>Take my wife.
Please.</hl>
80.2, , .
HTML- . txt . HTML-: .htm.
Web-
444
Take my wife. Please
. 80.2. ,

, HTML >
, .
,
.
HTML- :
1.
(head section),
HTML-, , . . .
2.
(body section), Web-. .

,
. ?
. ?
, ,

(CSS Cascading Style Sheets). . IV.
<head> <body>,
:
<head>
<! . >
</head>
<body>
<! . >
</body>
80. HTML-
445
. , ,
:
<head>
<! . >
</head>
<body>
<p>Take my wife.
Please.</p>
</body>
,
:
<head>
<! . >
</head>
<body>
My F a v o r i t e Jokes
We could t a l k about women.
<p>Take my wife.
Please.</p>
</body>
'
He :
<head>
<! ' . >
</head>
<body>
<hl>My Favorite Jokes</hl>
<p>We could t a l k about women.</p>
<p>Take my wife.
Please.</p>
</body>
Web- My Favorite Jokes (
). , My Favorite Jokes , ,
. My Favorite Jokes ,
< t i t l e > :
<head>
<title>My Favorite Jokes</title>
446
Web-
</head>
<body>
<hl>My Favorite Jokes</hl>
<p>We could talk about women.</p>
<p>Take my wife. Please.</p>
</body>
.
:
<head>
<title>My Humor S i t e : The Jokes P a g e < / t i t l e >
,</head>
<body>
<hl>My F a v o r i t e Jokes</hl>
<p>Take my wife.
Please.</p>
</body>
<html>. , HTML-:
<html>
<head>
<title>My Humor S i t e : The Jokes
Page</title>
</head>
<body>
<hl>My F a v o r i t e Jokes</hl>
<p>Take my wife.
Please.</p>
</body>
<html>
, , 80.3.
, . ? ,
HTML-. Web-
.
80. HTML-
File
View
Favorites
Toot*
447
tjeip
My Favorite Jokes
We could talk about women.
Take my wife Please.
. 80.3. My Favorite Jokes

( ) ,
Web-
Web- HTML-, Web-
HTML- , , Web-. , Web-: , .
: , .
Web- (Web site) HTML-

, ,
.
(local folder), (local

root folder), , Web-.
Web- ,
. . :
. - ,
.
. ,
448
Web-
Web-. ,
. , .
(structure) Web-
.
,
.
HTML-. Web-
. HTML- .
.
, .
, . ,
:
My Hobbies ( )
My Favorite Books ( )
My Favorite Jokes ( )
About Me ( )
.
:
. . ,
,
.
(level) . ,
.
? , ( ).
(_) - .
80. HTML-
449
. :
hobbies ()
books ()
jokes ()
about_me ( ). aboutme, about
, . ,
, . hobbies (). jokes (). , .
, .
:
hobbies ()
sports ()
films ()
computers ()
games ()
books ()
jokes ()
about_me ( )
.
, , .
.
hobbies ()
sports ()
films ()
computers ()
games ()
books ()
jokes ()
about_me ( )
images ()
' .
, , . images () , .
Web-
450

,
?
. . ,
, . HTML-. ,
.
, . . , , ,
, . Web- , , . . ,
.
, ,
-. HTML-
,
. .
. ,
index.htm. , 6p;iv;iep
, .
,
.
(index.htm)
80. HTML-
451
HTML-

HTML-.
Web-.
<html>
<head>
<1> . < / t i t l e >
<! <meta> >
<! JavaScript <script> >
<! <style> >
</head>
<body>
<! >
</body>
</html>
81.

, , Google Alta Vista, ,
,
. google.com altavista.com , shoelaces ( ), , ,
shoelaces ( ).
, (shoelaces),
shoelaces ( ) ?
, . book () amazon.com? , .
(keywords) . (page description) , .

.
,
.
, ,
. .
-. -
HTML-, . HTML- (page title)
.
- (meta tags) HTML-, .
8 1 .
453
<head>
<title>06yBHbie .. Home</title>
<meta name="Keywords" content^" , , ,
, , , , , ">
<meta name="description" content=" 24- ,

, .">
</head>
- .
. <meta>. ,
name. <meta> ,
name keywords. <meta> , name d e s c r i p t i o n . content , .
,
.
(robot) , .
, , . , , . ,
-, . .
, , . ,
, .
.
, , , ,
... , , .
82.

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

,
.
robots.txt (remote)
. robots.txt
, .
,
robot.txt , .txt. , HTML-,
. txt.
: , (Robots Exclusion Standard), (Three
Laws of Robotics) - (Asimov).
82.
455
, ,
robot.txt. . .
, , -, , , (I, Robot). , .
robot.txt : '
User-agent: *
Disallow:
/popups/
Disallow:
popup.htm
Disallow:
/images/
Disallow:
/;js/
Disallow:
/ess/
Disallow , .
popups, images, js ess , ,
popup.htm.
User-agent ,
Disallow.
(*) User-agent ,
sal low . :
googlebot
User-agent:
Disallow:
/popups/
Disallow:
popup.htm
User-agent:
Roverdog
Disallow:
/popups/
Disallow:
popup.htm
Disallow:
/images/
Disallow:
/js/
Disallow:
/ess/
googlebot google
popups popup.htm, Roverdog popups
popup.htm images, js ess.
_,
, Disallow , . , ,
, , :
User-agent:
Roverdog
Web-
456
Disallow: /swf/sourcefiles/
( ),
:
User-agent: *
Disallow: /
robots.txt
. , , Disallow: *.gif,
GIF GIF . User-agent , .
robots.txt,
, ,
.
www. robots txt. org/.
, google
:
User-agent: googlebot
Disallow: /
, :
"User-agent: *
Disallow:
( , pofio
google), :
User-agent: googlebot
Disallow:
User-agent: *
Disallow: /
, . ,
82.
457
: products (), services (), aboutus ( ), images () apps () HTML- contact.htim. robots.txt :
User-agent:
Disallow:
/products/
Disallow:
/services/
Disallow:
/aboutus/
Disallow:
/images/
Disallow:
/apps/
Disallow: c o n t a c t . h t m
(remote) , (index.htm).
83.

Web- .
Web-. Web-
HTML-,
Web- (local files) ,

. (remote files) ,
Web-. , .
.
Web-, .
, Web-.
. ,
. Web- , .
Web-. File () Open (). Netscape
Open File ( ). . .
, , , (remote)
.

?
, .
, , ,
, , Web-. . 61,
, .
83.
459

. Internet Explorer
Netscape, Web-,
, . , , .
Web- -
, .

Mac-? Linux-?
Windows?
, , Windows,
Microsoft Netscape, -
. , , , Macintosh. , , . , ,
-.
Netscape Opera , . Mozilla,
Netscape, , , - , .
, ,
.
(, , ), ,
,
.
,
. , Mozilla Time
Warner, Netscape,
Web-, - .
, : , , ,
Internet Explorer. , ,
www. mozilla. org/.
460
Web-
Microsoft Internet Explorer

Windows. , , . , Internet Explorer,
Netscape Windows. , ,
,
Internet Explorer, Netscape.
Opera Windows,
, Opera.
www.netscape.com/,
Netscape, Opera www.opera.com/.
84.
Web-xocma
Web- .
. , , Web-.
, . ,
.
Web- (Web host) ( ) , Web- .
Web-xocma
Web- ( ) ,
W7eb-caiiTa , .
,
Web-. , Web- , - (ISP). , . ,
.
,
(, ).
, Web-, . Web-.
Web- . , . , , , ,
, &..

, Web hosting (Web-), .
, .
, Web-. . . ,
462
Web-
: Yahoo, Earthlink, Netfirms,

. , ,
.

Web- .
Web-, ?
?
-,
.
, , . , , , ,
,
.
, Web-, . , . .
Web- .
,
, .
, , , . , !
, Web- . - . , , .
( ), , , . ,
, .
. - . . Web- , , , .
, ,
, .
84. Web-
463
Web- . . , Web- ,
Web- .
,
Web-:
. ,
'
10 25 . Web

. , , , ,
.
( ). Web Web-. 35
. . ,
( , 35 .).
( ) . Web-
. . Web- . . ,
, - , , . , , 35 , ,
, . Web-, ,
.
. . . , Web- .
. .
( ).
. .
24/7 (24 7 ).

24/7. ? , . . 7
, , 24/7. Web-, , Web-, 24/7
.
Web-
464

Web- . , , . , Web-, , :
. ? . Web, . 5 , , , 5 .
,
, , .
. Web- , , >
. ,
, . 1 . , 20 000 ..
20 000
5000 , 20 000 . , , .
,
. :
1 , .
(bandwidth) , Web- .
. , , ,
. , Web-, .
Web-. 1
, , Microsoft Outlook Eudora, , .
Web- ,
. Web- , , , .
84. Web-
465
/ . , Flash- , Web- . Web- JPEG, GIF PNG -

.
FrontPage. Web-, , , Microsoft FrontPage, Web-, FrontPage.

,
.
CGI ( ),
. , Web-, . , : HTML, JavaScript
CCS ( ). .
. , ,
Web- . , , ,
.
.
. , , .
*
, , .
, Web-, , , , ,
.
Web-, ,
.
85.

Web-. Web-. , , .
, FTP-. FTP
File Transfer Protocol ( ) , . FTP Web- ( ) (
). ,
, FTP- . . FTP- WSFTP CuteFTP,
. , .
, .
FTP File Transfer Protocol (

) ,
.
Web- FTP, :
1. . URL- , .
, , . , Web-.
2. (user ID). ,
Web- .
3.
. .
Web- . - , .
(remote) , . . , ,
,
. FTP (directories), .
, .
FTP.
,
. Web-.
85.
467
(structure) Web- .
(directory) .
. ,
-- , index.htm.
,
. ,
, . ? .
,
Web-. , . , Web- )' FTP .
Web- , (remote) . Web-,

.

Web-.
, . ,
Web-,
, , .
.
.
, (, , , ). .
86.

W3C (World Wide Web) , , Web- .
, , .
, W3C, Web-, !
.
,
W3C
, Amazon eBay.
Web-,
http://validator.w3.org/. URL- Web-,
. !
, W3C ,
,
Web-:
<
href="http://validator.w3org/check/referer">
<img s r c = "http://www.w3.org/Icons/valid-xhtmllO"
1.0!" height="31" width="88" />
a l t = "Valid 'XHTMb
, :
.
.
, checked selected, .
, , :)
:
<input type="checkbox" checked="checked" /> -
86.
469
.
, . -
.
, <img>, <br> <hr>, ,
:
<img src="image.jpg"
width="200" height="100" alt="An image" />
1 i , :
<> 1 </>
<> 2 </11>
<> 1 </>
<> 2 </>
.
JavaScript CSS.
, , .

JavaScript.
Web-.
Web- (Web page). HTML- ,
, .
(absolute path). , Web-

. ,
, . , .
, . , , . > ,
, .
(expando layout). , . , (
(liquid layout).
(active link). , .
(attribute). (CSS), .
(ragged). ,
, .
(justified).
(ragged left). , sa , .
(ragged right). , , .
(sans serif). , , Arial,
. (serif).
(block). , HTML-.
, ,
.
471
(branding). , : , , ,
.
(drop cap). , . , .
(real-time). -
.
(visual weight). , . , , ,
, .
(virtual wrapping). ,
, . (physical
wrapping).
(nested table). ,
.
, (nested div, nested layer). (div
element), (div
element).
(below the fold). Web-, . , . !
(embedding). , ,
JavaScript, HTML-
. (attaching).
(external link). , .
. (internal link).
(internal link). ,
Web-.
.
(external link).
(inline link). ,
.
(inline image). ,
HTML-.
472
Web-
(popup menu). ,
. (div) DHTML
(hover state). .
HTML-. .
(ragged center). , , .
(image map). , .
(hotspot). , - .
(span). , HTML- .
HTML (DHTML Dynamic HTML).
HTML, JavaScript (CSS). ,
Web-.
, (remote folder, remote root
folder). ( ) Web-,
.
(remote). ,
.
(remote file). Web-.
(cellspacing).
.
0.
(end sign). ( ) ,
.
, .
(named anchor). Web-,
.
(source). ,
.
(CSS Cascading Style Sheets). ,
HTML-.
473
Web-, , .
, , ,
.
(class). , - HTML- .
(keywords). , Web-
. -.
(contextual selector). ,
HTML- , - , , (strong tags),
.
(root). .
(rule). . , .
, (local folder, local root folder).
,
.
(local). .
(local file). ,
.
(fixed-width layout). ,
. , , , .
(layout table). HTML-, . HTML . (data table).
(jump menu). Web-, .
- (meta tag). HTML-,
Web-, , . -.
474
Web-
(label) . .
(label) . , .
(timestamp). ,
.
(tiling).
.
(monospace). , Courier New,
.
(media). Web-,
, HTML, CSS ( ),
. , , Flash-, (SVG)
Acrobat.
(fieldset). .
(nav bar navigation bar). Web-, .
(affordance). , . , ,
HTML- - , , .
(unvisited link). ,
.
(out of sync). Web-,
.
(descender). ,
,
.
(hanging indent). ,
, .
(colspan). , . , ! .
(rowspan).
475
(rowspan). , . ,
!
.
(colspan).
(style definition).
(CSS),
.
(optimizing). , .
(cellpadding).
. (layout table)
0.
(palette). . GIF
PNG , 256 , JPEG
256 .
, (form field, form object). (widgets) , .
(visited link). , .
(style rule).
. .
(presentation). Web- . ,
HTML; , . HTML
(formatting tags), .
(CSS) HTML .
(attaching). JavaScript
(CCS) HTML-.
(embedding).
(validating) .
, . , .
(validating) . Web- .
476
Web-
(FTP File Transfer Protocol). .

(pseudo-class).
-, , .
(pseudo-element). HTML-, , , .
(destination). , ,~
.
(path).' , , .
(document-relative path). ,
. , , .
, . ,
, . .
(root-relative path). ,
Web-. ,
, .
, , ,
. Web-.

, .
(slicing). , , Fireworks Photoshop.
, , .
HTML-, Web-.
(resolution). : , , .
(robot). , Web- .
(rollover graphic). ,
. JavaScript
.
477
(justified). , . ,
.
(ragged).
(serif). , , Times New Roman,
.
(sans serif).
(antialiasing). , . , (Noel)
(Felicity), , (Jennifer Garner),
(Alias), .
(child selector). ,
HTML- , , , , .
(ID selector). , .
(style selector). , , .
- (sibling selector). , HTML- , ,
, , .
(compression). .

.
(synchronized). Web-, .
(layer). Web- , . , ,

. (div element).
(link state). . : (unvisited), (visited)
(active), . (hover).
(button states). ,

478
Web-
. , (rollover)
: ,
.
(accessibility). Web-,
. , , . , , ,
, .
(email link). , .
(dateline). , . Web-, (
) .
( ) (breadcrumb trail). ,
,
.
(structure) Web-. .
(structure) HTML. , Web-. HTML- ,
, .
(data table). HTML-,
HTML. (layout table).
(style sheet). ,
HTML
(CSS). .
(tag). HTML, .
(formatting tag). HTML-,
.
(text equivalents). . .
479
(liquid layout). ,
. , (expando layout).
(URL - Universal Resource Locator).
.
.(level). .
(physical wrapping). ,
,
.
(virtual wrapping).
Web- (Web host). ( ),
Web-.
(div element). .
Web-.
(widget). , .
.
(phrase element). HTML-,
, , . , em, s t r o n g , c i t e dfn.
(HTML Hypertext Markup Language). , Web-.
Ul/eb-
HTML CSS

- 3000
25
: (095) 720-07-65, (095) 772-19-56.

E-mail: opt@triumph.ru
-: www.3st.ru
-: 125438, ., / 18 .
E-mail: post@triumph.ru
.. , ..
..
.
..
..
..
..
..
- 23.08.2005 .
70 100'/)6. . .. 30. 191.
3 500 .
.
, 125438, . , / 18.

143200, . , . , 93

Триумф - Строим Web-сайты. Дизайн. HTML. Css. Garage.2006

Загружено:

Сведения о документе

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Триумф - Строим Web-сайты. Дизайн. HTML. Css. Garage.2006

Загружено:

Авторское право:

Доступные форматы

GARAGE

Prentice Hall Professional Technical reference

Web-. HTML CSS. GARAGE : . . . /

Content goes here Content goes here

Content goes here

Content goes here, content goes riere. Content

goes here. Content goes here. Content ooes liere

Content goes here. Content

oes here. Content goes here. Content goes iiere

Content goes here. Content goes here. Content

your package j Shop for shoes I Compare

Content goes here. Content goes here. Content

Track your package

Your shopping cart

^ P Molt titanium shoelace

Square pegs vs. round holes:

Square pegs vs. round holes:

Text goes here, Text goes here

Tex! goes here Text

Text goes here. Text goes here.

Text goes here Text goes here.

Text goes here. Texi

Text goes here. Text

Text goes here

Text goes here Text

here. Text goes here Text goes here. Texi

Text goes here. Text goes here

Text goes nore. Text goes

Text goes here Text goes here, rexl

Text goes here. Texi

Text g o e * here. Text goes here. Text

Tex- goes here. Text goes here. Text goes

Text go h e m Text goes here. Text goes

Text goes here Text goes

Text goes here

Text goes here

Text goes here Text goes

Text goes here Text goes here Texi goes

Texl goes here Text

Text goes here

Tex- goes here

The truth you ! at the price yoinan afford | # NEWS

WYOMING MAN FINDS NEEDLE IN HAYSTACK

WYOMING MAN FINDS NEEDLE IN HAYSTACK

alt=" " " . " >

The planet Saturn is the sixth planet from the sun in

The planet Saturn is the sixth planet from the sun in

Home > Fairy Tato > Brotfaere Grimm > Rapunzel

goes here. Story goes here. Story jitws hen , Story

here. Story goes . Story got

value="thirdpath">Third page name

<! form . >

<option v a l u e = " f i r s t p a t h " > F i r s t

Collectively, the planets, moons,

. . , File Not Found (

window, open (popupPath, popupName, popupProperties);

HTML, DHTML, - HTML

HTML, DHTML, - HTML JavaScript

Puc. 10.2. CSS - .

New & Used Planets

<tdxa href =" javascript :doHide ( 'menul' ) ;"

<div id="menu2" style="position: absolute; left:

<tdxa href = "path08">Subcategory

< t d x a href = " javascript :doHide ( 'menu2 ' ) ; "