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

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 Content goes here
Content goes here. Consent 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

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


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

480

[ 100%

. 2.7. Contact Us ( )
,

24

Web-

. , .

shoelacewarehoi
Content goes here. Content goes here. Content

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

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.

contact us

io

ioo%V

. 2.9.

your package j Shop for shoes I Compare

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.

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


goes nere. Text goes
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


goes nere. Text goes
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


goes nere. Text goes
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. , ,

transcendental procrastination
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, , , , ,
.

transcendental procrastination

. 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
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, 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. , ,

The planet Saturn is the sixth planet from the sun in


>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> &gt;
<! &gt; - "". >
< 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

language="JavaScript">

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

language="JavaScript">

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

language="JavaScript">

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";
document.getElementByld("menu3").style.vi
sibility="hidden";
document.getElementByld("menu4").style.vi
sibility="hidden";
document.getElementByld("menu5").style.vi
sibility="hidden";
if (popupMenu ==' "menu3") {
document.getElementByld("menul").style.vi
sibility="Hidden";
document.getElementByld("menu2").style.vi
sibility="hidden";
document.getElementByld("menu3").style.vL
sibility="visible";
document .getElementByld ("menu4") . style, vi.
sibility="hidden";
document.getElementByld("menu5").style.vi
sibility="hidden";
if (popupMenu == "menu4") {
document .getElementByIdv( "menul") .style, v::.
sibility="hidden";
document.getElementByld("menu2").style.vi
sibility="hidden";
document.getElementByld("menu3").style.vi
sp.bility="hidden" ;
document.getElementByld("menu4").style.vi
sibility="visible";
document.getElementByld("menu5").style.vi
Sibility="hidden";
if (popupMenu == "menu5") {
document.getElementByld("menul").style.vi
sibi1ity="hidden" ;
document.getElementByld("menu2").style.vi
sibility="hidden";

10.

83

document.getElementById("menu3").style.vi
sibility="hidden";
document.getElementByld("menu4").style.vi
sibility="hidden";
document.getElementByld("menu5").style.vi
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>
<tdxa href="path02">Subcategory

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>
<tdxa href="path06">Subcategory

l</ax/td>

</tr>
<tr>
<tdxa href="path07">Subcategory

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
. >
<div id="menu3" style="position: absolute; left:
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>
<tdxa href ="pathl4">Subcategory 4</ax/td>
</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:'
456px; top: 19px; width: 152px; height: 114px; visibility: hidden;">
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>
<tdxa href ="pathl8">Subcategory 3</ax/td>
</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
. >
<div id="menu5" style="position: absolute; left:
608px; top: 19px; width: 152px; height: 114px; visibility: hidden;">
<table width="152" border="0"
cellspacing="O">

cellpadding="O"

<tr>
<tdxa href="path21">Subcategory

l</ax/td>

</tr>
<tr> .
<tdxa href = "path22">Subcategory

2</ax/td>

</tr>
<tr>
<tdxa href="path23">Subcategory

3</ax/td>

</tr>
<tr>
<tdxa href="path24">Subcategory

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

language="JavaScript">

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>
<script language="JavaScript">
/* 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
/*

language="JavaScript">

, . */

</script>
<!

. >

</body>
</html>


JavaScript, CSS,
HTML-, . s t y l e CSS ,
s c r i p t JavaScript-. ,
, CSS-, HTML:
<html>
<head>
<title>Page T i t l e < / t i t l e >
< 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 language="JavaScript">

</script>
HTML-.


, JavaScript-
. Web- , , .
s r c s c r i p t , :
<html>
<head>
<title>Page T i t l e < / t i t l e >
< 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>
<title>Page T i t l e < / t i t l e >
<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 .
. . : , }'
:
<div id="logo" s t y l e = " p o s i t i o n :
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:
<div id="logo" s t y l e = " p o s i t i o n :
; 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"

cellpadding="O" cellspac-

<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="150">Nav</td>
<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="150">Nav</td>
<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 " >

cellpadding="O" cellspac-

<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 width="125">Nav</td>
<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>
<td colspan="2">Top</td>
</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
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>
<td colspan="2">Top</td>
</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. 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
<div 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;">

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

*
border-styledashed, dotted, double,
groove, inset, outset, ridge, left: double;
solid

border

styleright
border
style-top

border-styledashed, dotted, double,


groove, inset, outset, ridge, right : groove;
solid
border-styledashed, dotted, double,
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.

A complete brain-trust solution

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

A complete brain-trust solution


^ 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
<h2>A complete brain-trust solution</h2>
<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

A complete brain-trust solution


When you consult with us, you'll be amazed at the
;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.

A complete brain-trust solution


When you consult with us, you'll be amazed at the
: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>
<img src="images/bulb.gif"
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. ,
.

A complete brain-trust solution


"\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
<h2>A complete brain-trust solution</h2>
<img src="images/bulb.gif"
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>
<img src="images/bulb.gif"
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>
<script language="JavaScript">
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"
<area shape="rect" coords="172,2,328,149"

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="410,76,70" href="marsO3.htm">
. <area shape="circle" coords="85,225,70" href="mars04.htm">
<area shape='"circle" coords = "245 ,225 ,70" href = "marsO5 .htm">
<area shape="circle" coords="410,225,70" href="marsO6.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">
<area shape="rect" coords="172,2,328,149"
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"
"marsO6.htm" alt="Phase 6">

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"
"marsO5.htm" alt="Phase 5">

coords="171,153,327,296"

href=

<area
shape="rect"
"marsO6.htm" alt="Phase 6">

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;
background-position:
center left;
background-position:
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
Startling new evidence

goes
goes
goes
goes

here
here.
here.
here.

Startling new evidence


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,
background-position:
bottom
center left;
background-position:
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) , .


:
<style type="text/css">

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

url("styles/stylesO3.ess");

</style>
, , , :
<style

type="text/css">

import

url("styles/stylesOl.ess");

import

url("styles/stylesO2.ess");

import

url("styles/stylesO3.ess");

color:

#ffOOOO;

</style>
,
, ,
:
<style type="text/css">

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
<style type="text/css">

{
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:
transformed by CSS</P>

uppercase;">an ordinary line of text,

so

<p style="text-transform:
transformed by CSS</P>

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
<style type="text/css">
.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

<font family: Arial;


.
, 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 family: Arial;

,
<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.


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. This is a paragraph.
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
is a long paragraph. This is a long
paragraph. Tliis is a long paragraph.This
is a long paragraph. Tliis is a long
paragraph. This is a long paragraph. Tliis
is a long paragraph. Tliis is a long
paragraph. Tliis is a long paragraph. This
is a long paragraph. Tins is a long
paragraph. This is a long paragraph. Tliis
is a long paragraph. Tliis is a long
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
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 Ibis 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 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

. 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
Paragraph paragraph paragraph.
Paragraph paragraph paragraph.
Paragraph paragraph paragraph
Paragraph paragraph paragraph
Paragraph paragraph paragraph
Paragraph paragraph paragraph
Paragraph paragraph paragraph

Paragraph paragraph paragraph


Paragraph paragraph paragraph.
Paragraph paragraph paragraph.
Paragraph paragraph paragraph.
Paragraph paragraph paragraph
Paragraph paragraph paragraph.
Paragraph paragraph paragraph
Paragraph paragraph paragraph
Paragraph paragraph paragraph

Paragraph paragraph paragraph


Paragraph paragraph paragraph.
Paragraph paragraph paragraph
Paragraph paragraph paragraph
Paragraph paragraph paragraph
Paragraph paragraph paragraph
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>
<p>This paragraph i s indented.</p>
<p>This paragraph i s indented.</p>
</blockquote>
<blockquote>,
:
<blockquote>
<blockquote>
<blockquote>
<p>This paragraph i s indented.</p>
<p>This paragraph i s indented.</p>
<p>This paragraph i s indented.</p>
</blockquote>
</blockquote>
</blockquote>
, , . <blockquote> .
, . margin-left , ] , 51.3.
51.1. ,
51.3
<head>
<style type="text/css">

margin-left:

</style>
</head>

50px;

5 1 .

265

<body>
<hl>Blah blah headline</hl>
<p>Blah blah blah....</p>
<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>
<style type="text/css">

text-indent: ;

. </style>
</head>

Web-

266
<body>
<hl>Blah blah headline</hl>

<p>Blah blah blah....</p>


</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>
<style type="text/css">

margin-left: 50;
text-indent: -;

</style>
</head>

268

Web-

<body>
<p>Blah blah blah....</p>

<p>Blah blah blah....</p>


</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>
<style type="text/css">
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
Description of the item.
*WFourth fish item Description of the item
Description of the item.
^e^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.
Description of the item.
4 fish item. Description of the item.
Description of the item.
Tourth fish item. Description of the 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
<style type="text/css">
./* <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
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

1 ILIKK | |LINK |

. 54.1. ,
HTML,
54.1 HTML <hr>, . , .
, , - :
<hr noshade>
nosh^de .
<hr>, .

Web-

284

One Section of the Page


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 blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah' >lah

Another Section of the Page


Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah slah 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

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)) ,
.
, .

One Section of the Page


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

Another 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 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:

<! . (&nbsp;).
.

302

Web-

colspan. 56.2, "Border Color"


: "Before" "After".

<thead>
<tr>
<th>&nbsp;</th>
<th>&nbsp;</th>
<th colspan="2">Border Color</th>
</tr>
<tr>
<th>&nbsp;</th>
<th>x</th>
<th>Before</th>
<th>After</th>
</tr>
</thead>
<tfoot>
<tr>
<th>&nbsp;</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>&nbsp;</th>
<th>&nbsp;</th>

56.

305

<th colspan="2">Border Color</th>


</tr>
:
<tr>
<th>&nbsp;</th>
<th>x</th>
<th>Before</th>
<th>After</th>
</tr>
.
. col span 2 , .
: <colgroup>
:
<colgroup span="2"x/colgroup>
<colgroup span="2"x/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

Table 2. Color Transformations in Table Borders after Exposure to the Kenneth


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 .

Table 2. Color Transformations in Table Borders after Exposure to the Kenneth


Frequency
Border Color
Befoi
#000033

#FFFF33
#3333FF

Phase 2

#FFFF33

#000000
#000000

#FFFF99
Befoi

Puc. 56.6. (#000000)


5

56.

309

Netscape
. Internet Explorer
.

Table 2. Color Transformations in Table Borders after Exposure to the Kenneth


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>
<td headers="fluctuation">128</td>
<td headers="error">35%</td>
</tr>
<tr>
<td headers="intensity">3</td>
<td headers="fluctuation">2726</td>
<td headers="error">32%</td>
</tr>
<tr>
<td headers="intensity">4</td>
<td headers="fluctuation">263443</td>
<td headers="error">32%</td>

Web-

314

. </tr>
<tr>
<td headers="intensity">5</td>
<td

headers="fluctuation">2</td>

<td headers="error">98%</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>&nbsp;</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>


<td headers="error kenneth" axis="errormargins">35%</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>
<td headers="error kenneth" axis="errormargins">32%</td>
</tr>
<tr>
<td headers="intensity kenneth" axis="intensities">5</td>
<td headers= "fluctuation kenneth"
axis="fluctuations' >2</td>
<td headers="error kenneth" axis="errormargins">98%</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"
axis="fluctuations">4</td>
<td headers="error bradley" axis="errormargins">73%</td>
</tr>
<tr>
<td headers="intensity bradley" axis="intensities">2</td>
<td headers="fluctuation bradley"
axis="fluctuations">45</td>
<td headers="error bradley" axis=:"errormargins">35%</td>

56.

317

</tr>
<tr>
<td headers="intensity bradley" axis="intensities">3</td>
<td headers="fluctuation bradley" axis="fluctuations">356</td>
<td headers="error bradley" axis="errormargins">12%</td>
</tr>
<tr>
<td headers="intensity bradley" axis="intensities">4</td>
<td headers="fluctuation bradley"
axis = "f luctu'ations">32</td>
<td headers="error bradley" axis="errormargins">ll%</td>
</tr>
<tr>
<td headers="intensity bradley" axis="intensities">5</td>
<td headers="fluctuation bradley"
axis="fluctuations">12</td>
<td headers="error bradley" axis="errormargins">2%</td>
</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!</>

-, :
<style type="text/css">
#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 - ,
-.
:
<style type="text/css">
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
generations to come?
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
generations to come?

'

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>
<script language="JavaScript">
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>
<script language="JavaScript">
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 ^iew

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>
<style type="text/css">
.listsmenu {
color: #FFFFFF;
background-color: #000000;

.buttons {
background-color: #000000;
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>
<option value="3">List Option 3</option>
<option value="4">List Option 4</option>
<option value="5">List Option 5</option>
</selectx/td>
<tdxselect name="select" class="listsmenus">
<option value="l" selected>Menu Option l</option>
<option value="2">Menu Option 2</option>
<option value="3">Menu Option 3</option>
<option value="4">Menu Option 4</option>
<option value="5">Menu Option 5</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

language="JavaScript">

/*
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
requiredfieldO4.value);
String(document.formname
var
fieldO5
= new
requiredfieldO5.value);
/*
.
,
. , , . */
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.
selectedlndex].text;
var listO3 = document.formname.requiredlistO3;
var listO3Text = listO3.options[listO3.
selectedlndex].text;
var listO4 = document.formname.requiredlistO4;
var listO4Text = listO4.options[listO4.
selectedlndex].text;
var listO5 = document.formname.re<iuiredlistO5;
var listO5Text = listO5.options[listO5.
selectedlndex].text;
/*
. , . , .

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

, , pass
false.
if/then,

390

Web-

, if/then. */
if (listOlText == " ...") {
pass = false;
if (listO2Text == " ...") {
pass = false;
if (listO3Text == " ...") {
pass = false;
if (listO4Text == " ...") {
pass = false;
if (listO5Text == " ...") {
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">&nbsp;</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">&nbsp;</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>
<td>Email address</td>
<tdxinput type="text" name= "yourEmail"

tabindex="2"x/td>

<td>Email address</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

^iew

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:

Pick the days to receive them:


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>
<!--
<pxstrong>Pick

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

Pick the days to receive them:


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>
<style type="text/css">
<fieldset {
border-style: dashed;
border-width: 4px;
border-color: #FF0000;
color: #FFOOOO;
background-color: #FFCCCC;

Web-

404
}

</style>
</head>
i

<!-- -->

Choose yoiu newsletters:

Pick the days to receive them:

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

pluginspage="http://www.macromedia.com/go/getflashplayer">
</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"
pluginspage="http://www.macromedia.com/go/getflashplayer">
</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>
<script language="JavaScript">
/* 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,#">
<script language="JavaScript">
/* 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:
<script language="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) {
image = "<img src=\"srcO3\" width=\"widthO3\"
height=\"height03\" alt=\"altO3\">";

if (x == 4) {
image = "<img src=\"srcO4\" width=\"width04\"
height=\"heightO4\" alt=\"alt04\">";

if (x'== 5) {
image = "<img src=\"srcO5\" width=\"widthO5\"
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

language="JavaScript">

/* 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 += "&#8220;";
/* . */
code += quote;
/* ,
. */
code += "&#8221;";
/* <cite>
.
, . 7
code += "<cite>";
/* if/then ,
source. ,

.

, . , , (&#8212) , , (:). */

428

Web-
if (source.lqngth != 0) {
code += "&#8212;";
/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.
:
<style type="text/css">
/* CSS, <style> . '
HTML-,
<style> .
, . . , <body>. */
body.styleOl {
background-color: #000000;
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:
<script language="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 language="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

language="JavaScript">

/* <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>We could t a l k about women.</p>
<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>We could t a l k about women.</p>
<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