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

-

-
2011

681.3.068
32.973.26-018.1
75

. .
75

HTML 5, CSS 3 Web 2.0. Web-. .:


-, 2011. 416 .: . ( )
ISBN 978-5-9775-0596-3
Web-, Web 2.0. HTML 5 CSS 3, , , Web-.
Web- JavaScript Ext Core. Web-,
, Web-
.
, ,
Web-. Web- Web-, , HTML 5.
Web-
681.3.068
32.973.26-018.1

:

.
.

02429 24.07.00. 31.08.10.


70 1001/16. . . . . 33,54.
1500 .
"-", 190005, -, ., 29.
-
77.99.60.953..005770.05.09 26.05.2009 .
.

" ""
199034, -, 9 , 12

ISBN 978-5-9775-0596-3

. ., 2010
, "-", 2010

.......................................................................................................................... 11
Web- ............................................................................................... 11
............................................................................................................................. 12
............................................................................ 13
........................................................................................................... 13
............................................................................................................................... 14

I. WEB-. HTML 5............................ 15


1. Web-. Web 2.0.
Web- ................................................................................................ 17
Web-. Web 2.0 ........................................................................ 17
Web- ........................................................................ 17
Web 2.0 ............................................................................................................... 19
: .................................................................................................... 22
. - .............................................................. 22
Web- Web- ................................................................................................... 24
Web-. HTML 5 ................................................... 25
HTML .......................................................................................................... 26
................................................................................................................ 29
Web- .......................................................................................................... 30
Web- ....................................................................................... 31
HTML- ......................................................................................................... 32
, ......................................................................... 33
Web- ................................................................................................................. 33
Web- ............................................................................................................................ 34
? ................................................................................................................................... 35

2. ........................................................................... 36
........................................................................................................................................... 36
....................................................................................................................................... 38
............................................................................................................................................ 39
........................................................................................................................................... 42

.................................................................................................. 42
................................................................................................................. 45
............................................................................................................................................ 46
................................................................................................................................. 47
? ................................................................................................................................... 47

3. ....................................................................................... 48
..................................................................................................... 48
.................................................................................................................................. 50
. ............................................................................. 51
? ................................................................................................................................... 54

4. .............................................................................. 55
Web- ........................................................................................... 55
.......................................................................................................................................... 56
- ................................................................................................. 56
..................................................................................... 57
................................................................................................................................. 60
......................................................................... 60
MIME ........................................................................................................................... 62
............................................................................................................ 63
............................................................................................................ 65
<AUDIO> <VIDEO> .......................................... 68
? ................................................................................................................................... 69

5. .......................................................................................................... 70
............................................................................................................................ 70
........................................................................................................ 75
........................................................................................................... 78
? ................................................................................................................................... 80

6. ..................................................................................... 81
................................................................................................................ 81
.......................................................................................................... 81
- WWW ..................................................................................................... 83
......................................................................................................... 85
...................................................................... 86
........................................................................................................... 87
-................................................................................................... 87
- .............................................................................................................. 88
......................................................................................................................... 90
.............................................................................................................................................. 91
? ................................................................................................................................... 92

II. WEB-.
CSS 3 ............................................................ 93
7. CSS................................................................................... 95
CSS................................................................................................................... 95

CSS .................................................................................................................... 96
........................................................................................................................... 101
........................................................................ 103
........................................................................................................... 105
................................................................................... 106
CSS ....................................................................................................................... 107
? ................................................................................................................................. 108

8. . .............................................. 109
..................................................................................................................... 109
, .............................................................................. 114
................................................................................. 116
............................................................................................................ 117
.......................................................................................................................... 118
. ...................................................................................... 120
Web-, 1 ........................................................................ 122
? ................................................................................................................................. 125

9. , ........................................ 126
.......................................................................................................... 126
..................................................................................................................... 127
............................................................................................................ 129
Web-, 2 ........................................................................ 131
...................................................................................................... 132
..................................................................................................................... 133
? ................................................................................................................................. 134

10. Web- .................................................................... 135


.................................................................................................................. 135
Web-........................................................................................ 136
Web- .......................................................... 137
Web- ............................................................................ 139
Web-, 3 ........................................................................ 140
, ............................................................................... 142
........................................................................................................... 142
. ........................................................... 143
Web-, 4 ........................................................................ 145
. ............................................................ 146
Web-, 5 ........................................................................ 148
? ................................................................................................................................. 150

11. , ................................................................. 151


................................................................................................................... 151
........................................................................................................................ 154
Web-, 6 ........................................................................ 156
........................................................................................................... 160
................................................................................................................ 163
? ................................................................................................................................. 165

12. .................................................................................... 166


.......................................................................................................... 166
..................................................................................................... 167
................................................................................................................... 168
...................................................................................................................... 169
Web-, 7 ........................................................................ 170
? ................................................................................................................................. 171

13. ......................................................................... 172


............................................................................................................................... 172
.................................................................................................... 174
.......................................................................................................................... 176
.............................................................................................................................. 177
................................................................................................ 177
................................................................................................ 178
:not * ......................................................................................................... 182
Web-, 8 ........................................................................ 182
? ................................................................................................................................. 184

III. WEB-. WEB- ..................... 187


14. Web-. JavaScript ...................... 189
Web- ........................................................................................................... 189
Web- ............................................................................................... 189
Web- ........................................................................................... 190
Web- Web- .................................................................... 192
JavaScript ........................................................................................... 193
JavaScript ............................................................................................. 194
JavaScript ...................................................................................................... 195
................................................................................................................................. 197
.................................................................................................... 197
.................................................................................................... 197
................................................................................................................................... 198
.............................................................................................. 198
............................................................................................. 199
................................................................................................... 199
......................................................................................................... 200
........................................................................................................ 201
typeof ........................................................................................ 202
............................................................. 203
........................................................................................................ 204
JavaScript ................................................................................................. 206
.................................................................................................................................... 206
.......................................................................................................... 206
? .......................................................................................................... 207
............................................................................................................. 208
................................................................................................................................... 209
..................................................................................................... 209
................................................................................................. 210

................................................................................................. 211
............................................................................... 211
....................................................................................................................................... 212
.......................................................................................................... 212
. ............................................................ 213
.................................................................................................................... 213
. .................................................. 215
....................................................................................................................................... 215
......................................................................................................................................... 217
....................................................................................................................................... 218
............................................................................ 218
.......................................................................................... 219
........................................................................................... 222
JavaScript .............................................................................. 223
Object ............................................................. 225
Web-. DOM ................................. 226
............................................................................ 227
................................................................................................. 228
JavaScript ............................................................................................................. 229
? ................................................................................................................................. 229

15. Ext Core Web-........................... 230


Ext Core ................................................................................................................... 230
Ext Core ..................................................................................... 230
Ext Core ................................................................................. 232
Ext Core .......................................................................... 233
Web-..................................................................... 234
Web-.................................................... 236
, Web- ................. 239
Web-................ 241
Web- Web- ... 243
................................................................ 243
......................................................................... 244
.............................................................. 246
Web- ........................................................ 248
Web- .......................................................... 249
............................................................................................................. 254
............................................................................ 254
Element .......................................................................................... 255
.......................................................... 256
........................................................................ 258
. EventObject ............................................. 260
CompositeElementLite ............................................................................................. 261
Web- ....................................................................................................... 263
? ................................................................................................................................. 265

16. Web- ............................................... 266


......................................................................... 266
...................... 269

Web- ..................... 270


................................................................................. 273
,
Web- .............................................................................................................................. 275
...................................................................................... 279
? ................................................................................................................................. 282

IV.
. ........................................... 283
17. ...................................................................... 285
Web- .................................................................................... 285
Web- ...................................................................................... 287
......................................................................................... 288
? ................................................................................................................................. 296

18. ....................................................................... 297


. .............................................................. 297
................................................................................. 299
........................................................................................................ 300
..................................................................................... 301
.................................................................................................... 303
? ................................................................................................................................. 304

19. .......................................................... 305


........................................................................... 305
JavaScript ................................................... 306
". " ................................................................................................... 308
? ................................................................................................................................. 314

V. ....................................................................... 315
20. Web- .................................................... 317
Web- HTML ............................................................................. 317
Web- . ............................ 318
Web- .......................................................................... 320
Web- ........................................................................................................... 320
........................................................................................ 320
.................................................................................................................. 321
...................................................................................................... 322
............................................................................... 323
............................................................................................ 323
......................................................................................................................... 324
........................................................................................................................ 325
........................................................................................................... 325
, .................................................................. 326
....................................................................................................................... 328
......................................................................................................................... 329

................................................................................... 330
CSS,
.................................................................................................................. 330
....................................................................................... 331
HTMLElement,
.......................................................................................... 331
Element,
.................................................................................................................. 336
................................................................................ 336
Web-............................................................................................... 337
.................................................................................................... 338
Web- ......................................................................................................... 338
Web-, ............................................................ 339
? ................................................................................................................................. 345

21. Web- .................... 346


................................................................................. 347
Web- .................................... 347
........................................................... 348
Ext Core
.......................................................................................................................... 351
.............................................................................. 351
Web- .................................................................... 352
Web-, ............................................................ 354
? ................................................................................................................................. 358

22. .................................................................... 359


............................................................................................................................................ 359
.................................................................................................................... 360
.................................................................................................... 361
, .......................................................... 362
......................................................................................................... 363
........................................................................................ 363
. .................................................................................................... 364
..................................................................................................................... 364
...................................................................................................................................... 365
....................................................................................................................... 366
.................................................................................................................. 368
........................................................................................................... 369
............................................................................................................................... 370
................................................................................................ 372
............................................................................................. 372
.......................................................................................... 375
................................................................................................................ 376
.................................................................................................... 378
.......................................................................................... 380
......................................................................................... 380
...................................................................................... 381
............................................................................. 381

10

.............................................................................................. 382
......................................................................... 383
............................................................................................. 384
........................................................................................................................... 386
Web- ........................................................................... 386

.................................................................................................................. 391
. CSS................................................................................. 393
.................................................................................................................. 394
................................................................................................. 394
........................................................................................ 396
.......................................................................................................... 397
CSS................................................................................................................... 401

.............................................................................................. 405


Web- . !

Web-
, , , Web-
HTML, , CSS. JavaScript, Web-
, Web-.
, ( HTML
). Web- .
,
: HTML 5 CSS 3. Web- .
Web- - .
Web-.
.
( ).
.
Web- .
, , - .
, ... "" , "", , .
-?
Web-, , , ""
-, HTML 5 CSS 3, -

12

. , Mozilla Firefox, Opera,


Google Chrome Apple Safari -
HTML 5, Web- . , - !
" " Microsoft Windows Internet Explorer. Microsoft Web-
9. "" -
. , : Internet Explorer 9, - "",
.
HTML CSS
:
Web-

;
Web-

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


:
HTML Web-.
CSS Web-.
HTML 5 CSS 3, Web-

.
Web-, JavaScript -

Web-.
Ext Core , Web-.
Web- .
-

JavaScript.
Web-,


Web-.
Web- HTML 5.

13

Web-
HTML CSS. ,
Web-.


, ,
... ?
!
,

Windows.
Firefox 3.6.* Web-. .
Opera 10.52 Apple Safari 4.* Web-.

.
.


HTML, CSS JavaScript. , .
!
HTML, CSS JavaScript.
.

(<>) ,
, , , .
Web-, , , .
:
<MAP NAME="< >">
</MAP>

< > .
:
<FORM>
<, >
</FORM>

<, > HTML-, .

14

([]) :
<LEGEND [ACCESSKEY="< >"]>< ></LEGEND>

ACCESSKEY , .
(|) ,
:
SHAPE="rect|circle|poly"

SHAPE
: rect, circle poly.
, .
:
var s = "<LI><CODE><A HREF=\"" + aDataBase[i].url + "\">" +
aDataBase[i].name + "</A></CODE></LI>";

, .
.

, .
, -

(. .), , .
-

.
, .
.
.
,

"-", ,
.
" -" .
Web- Firefox, Opera, Chrome Safari

Ext Core, , .
.
, , .

Web-.
HTML 5
1.

Web-.
Web 2.0. Web-

2.

3.

4.

5.

6.

Web-.
Web 2.0. Web-
, WWW, Web-, Web-, Web- ,
. , Web Web-?
. , Web- Web-,
Web-, HTML 5
, . , ...

Web-. Web 2.0


.
.
, .
; , Web-
...
" ", . " .
!"

Web-
... , Web-,
? .
1. -.
2. Web-.
3. Web-.
.
, , -

18

I. Web-. HTML 5

. ,
Intel Microsoft Windows ( ,
). -
Samsung. -,
.
-
-. Web , .
Web-
Web- , (, )
.
, -. : . , , " "
-.
, , Adobe Flash Microsoft ActiveX.
-, Web-,
World Wide Web Consortium ( ),
W3C. , Web- http://www.w3.org. .
- ,
. ? , , , . , WWW.
. ,
, . .
Web-
Web-.
Web- , -

, .
Web- "" .
, -

. :
, ,
, .
Web- ,

Web-, .

1. Web-. Web 2.0. Web-

19

! (, -

...)
: , , , .
Web-. ?
Web- Web.
Web- .
, .
Web- . Web-

, .
Web- -

. Web.
? - Web-, , W3C (. 1.1).
, - http://www.w3.org.
?
Web- -. -

Web- .
Web- , -.
Web-

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

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

, , . !
Web- .

Web 2.0
.

20

I. Web-. HTML 5

. 1.1. Web- Web- W3C

Web- -

.
-, Web Web-.
Web-.

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

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

1. Web-. Web 2.0. Web-

21

. , , Web-, .
Web 2.0 , " " Web-. Web- ( "" Web- W3C, , ...). .
, Web. , Web, , Web- . , , , , , .
.
Web- ,
, . ( ) -
.
. - Web- , , Web-.
.
.
Web- - . ,
HTML, ,
- , , .
Web-, , Web- Ext Core, - http://www.extjs.com/products/core/docs/ . 1.2.
, Web- -

, .

. Web-, , .
-

. .
. -

"" .
Web- Web 2.0 !
- ? - "
" W3C? !

22

I. Web-. HTML 5

. 1.2. Web- Ext Core

:
Web- Ext Core.
, .
? Web- Web-?
?

. -
Web- Web-, .
- . ? , ( ),
Web-, ,
(-). ,
, "" .

1. Web-. Web 2.0. Web-

23

? -,
, , . , , , ,
. .
:
, - , , , , . .
Web- Web-. ; - Web-, , , .
,
. ,
.
. ""
. .
.
, ,
. , . , , ,
- . ,
.
Web- Web-, . ; , ,
, . .
. .
, ?
-.
, , ,
, -, , .
- :
- -, ;
, , ,

, . ( ).

24

I. Web-. HTML 5

-.
- http://www.somesite.ru/folder1/file1.htm . http://www.somesite.ru - -,
Web-, /folder1/file1.htm .
- http://www.othersite.ru -
Web-. (Web), .
user@mail.someserver.ru - (mail.someserver.ru) (user).
- . 6, Web-, , . Web-
"".

Web- Web-
, - . , -
. ,
.
WWW Web, Web-. .
. ,
- ...
Web- htm html (,
, htm[l]). Web- .
Web- Web-, (
6). , Web- , , , .
! "" Web-, .
, , Web-, , Web. Web-,
"".
, , Web-, , . ,
, Web- . ,
.

1. Web-. Web 2.0. Web-

25

- , Web-
. .
http://www.somesite.ru/page1.htm page1.htm,
Web-.
http://www.somesite.ru/chapter2/page6.htm
page6.htm, chapter2,
Web-.
http://www.somesite.ru/downloads/others/archive.zip
archive.zip, others, downloads, , , Web-.
-, . - , , http://www.somesite.ru. Web-?
?
Web- . Web- , -
, . Web-
default.htm[l] index.htm[l],
Web-.
, - http://www.somesite.ru, Web-
Web- , Web-.
Web- ,
"" Web-.
- http://www.somesite.ru/chapter2/.
Web- Web- ,
chapter2, Web-.
Web- Web- . Web , , , Web. HTML 5, Web .

Web-.
HTML 5
Web- : ,
, , , .
. -, Web- ,
, Windows! (, .)
Web-
HTML (HyperText Markup Language, ).

I. Web-. HTML 5

26

, , ,
.
HTML , 1992 .
... HTML .
HTML 5, Web- .
- .

HTML
HTML .
Web-. Windows .

, Web-
Web-. Web-, HTML,
Microsoft Word, .
, Web- Web- . , , Web- Adobe Dreamweaver.
.
HTML.

(, ,
), 1.1.
1.1
<!DOCTYPE html>
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
<TITLE> Web-</TITLE>
</HEAD>
<BODY>
<H1> HTML</H1>
<P> Web- , Web-!
-,
Web-. ,
<STRONG>HTML</STRONG>.</P>
</BODY>
</HTML>

1.1.htm.
.
1. HTML- UTF-8.
UTF-8.

1. Web-. Web 2.0. Web-

27

2. . txt,
1.1.htm.txt.
, Web- ! Web .
Windows Web Microsoft Internet Explorer. Internet Explorer
HTML 5; 9,
. HTML 5 Mozilla Firefox,
Opera, Apple Safari Google Chrome, -
.
Web- Web- ( Firefox)
(. 1.3).

. 1.3. Web-

? Web-, "" ,
,
, ( "HTML").
"" , !
, 1.1.htm. HTML- ( 1.2).
1.2
<H1> HTML</H1>
<P> Web- , Web-!
-,
Web-. ,
<STRONG>HTML</STRONG>.</P>

. ,
< >. ?

I. Web-. HTML 5

28

HTML, .
HTML- Web-: , , .
<H1> </H1>, .
, , . <H1>
, , . </H1> ""
. ,
, . .
HTML < >,
, . ,
; /, < .
<H1> </H1> HTML
<H1>. .
. <P> Web- ;
.
. Web-, ; Web-
. ( .)
<STRONG> . , <STRONG> <P>. , <STRONG> ( <P>).
"Web-" . <EM>:
<P> Web- ,
<EM>Web-</EM>!
. . .

Web- Web-, <F5>. ! Web-!


, HTML-.
(), (-

) . HTML
.
<, >, / , -

.
, , <

>. ( .) Web , , Web- .

1. Web-. Web 2.0. Web-

29

. , HTML,
.


1.2 HTML-,
, . , <STRONG> <P>, . <P>, , <BODY>,
"" <HTML>. ( <BODY> <HTML> .)
HTML .
Web- , , "" "". ,
<STRONG> <P>, , .
"Web-",
<EM>, <STRONG>. :
<P> Web- ,
<EM><STRONG>Web-</STRONG></EM>!
. . .

. , <STRONG> <EM>.
! , . ,
, ""
.
HTML- (
):
<P> Web- ,
<EM><STRONG>Web-</EM></STRONG>!
. . .

Web- Web- .

, Web- ""
Web-. !

. ,
, , . , ,
, , . , <EM>
<P> , <STRONG> .
, (, , ).
Web-, , ,
, . Web-,

30

I. Web-. HTML 5

, , . ,
.
,
. <P>, <EM> , . . <P>.
<STRONG> ,
<EM>, , , <P>. Web-
.
HTML- , ( 1.3). Web- .
1.3
<BODY>
<H1> HTML</H1>
<P> Web- , Web-!
-,
Web-. ,
<STRONG>HTML</STRONG>.</P>
</BODY>

, <H1> <P> <BODY>, .

Web-
HTML- Web-.
1.4.
1.4
<!DOCTYPE html>
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
<TITLE> Web-</TITLE>
</HEAD>
<BODY>
. . .
</BODY>
</HTML>

, .
, Web. , Web , .

1. Web-. Web 2.0. Web-

31

Web- <BODY>.
Web-, , .
.
<HEAD> Web-. ( , <H1>!) Web-,
Web-.
, Web- <HTML>,
() .
Web- : .
HTML.

Web-
Web-,
. ? ?
. Web-,
Web-, .
, , Web. HTML-, , .
, Web-.
Web-, Web, "" ( Web). <TITLE> Web-:
<HEAD>
. . .
<TITLE> Web-</TITLE>
</HEAD>

, , , Web-. ""
<META>:
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
. . .
</HEAD>

UTF-8, Web. , 1251, -8, .



UTF-8 Unicode, Web. Unicode ( , UTF-8)

I. Web-. HTML 5

32

, . Web-.

, <META>? , ! ,
. HTML-,
, ,
Web- - , .
.
, HTML Web-. ""
<HTML>. , , ... :
<!DOCTYPE html>

<!DOCTYPE> , -, HTML,
Web-, -, . , <!DOCTYPE>, HTML 5, "" "" HTML 4.01 ( HTML,
) XHTML ( HTML, ).
, <!DOCTYPE html>, Web, HTML 5. ! !

HTML-
, , HTML. HTML Web-.
<META>, Web-:
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">

, < >, ,
- . , . ,
<META> ,
Web-, .
, ,
, . , HTTP-EQUIV
"Content-Type", ,
. CONTENT "text/html; charset=utf-8",
, Web-, , UTF-8.
. . -

1. Web-. Web 2.0. Web-

33

; , .
HTTP-EQUIV CONTENT <META>
... ID,
HTML, , :
<H1 ID="header1"> HTML</H1>

II III, CSS Web-,


ID. .
HTML-. .
(),
() . HTML , , , ,
.
< > -

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

HTML. I
.

,

, . (
), : Web-
Web-.

Web-
Web- . , : Microsoft Internet Explorer, Mozilla Firefox,
Opera, Google Chrome Apple Safari.

I. Web-. HTML 5

34

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

HTML 5 CSS 3 ( CSS):
Mozilla Firefox 3.5;
Opera 9.5;
Google Chrome 2.0.158.0;
Apple Safari 4.0.

HTML 5 CSS 3
. , Web-, , .

Microsoft Internet Explorer? HTML 5 CSS 3 ? , . HTML 5 CSS 3 9.0, .


Web- ?
" " Firefox, Opera, Chrome Safari. , , Web-
.

Web-
Web-,
Web-, Web-. ,
, Web- -
. Web- ,
Web- Web-. .
Web-.
, . Windows XP/2003/Vista/Se7en
Web- Microsoft Internet Information Services.
,
.
Internet Information Services, ,
Windows. , ,
" ". , Web- Microsoft
Web-, C:\Inetpub\wwwroot. Web-.

Internet Information Services,
. , Web- Apache,
.

1. Web-. Web 2.0. Web-

35

, Web- , .
.

Web- . (, Windows ). Web- ( Internet Information Services


C:\Inetpub\wwwroot).
!
Internet Information Services, Windows Vista
Windows Se7en, , C:\Inetpub\wwwroot UAC (User
Access Control, ) , . , , . ,
(Run As Administrator)
UAC.

, .
Web- 1.1.htm.
Web- http://localhost/1.1.htm. - http://localhost
( ), /1.1.htm 1.1.htm,
Web-.
, Web- Web-
(. . 1.3). , Web- .

?
Web-,
Web 2.0, , WWW ,
HTML, Web-,
Web- Web-. , ...
- , HTML. : , , . ,
"".


"" Web-, Web 2.0, - HTML.
, Web- Web-. .
HTML
,
.
, , .

"", - . "" ,
, , .
. ,
, , , . ,
"" .
1, HTML <P>. :
<P> .</P>
<P> . , Web-
.</P>

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

2.

37

Web-:
;
;
, ,

Web-. (
HTML- , .)
,
.
. Web-
Web- HTML CSS.
HTML-, 2.1.
2.1
<!DOCTYPE html>
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
<TITLE> HTML CSS</TITLE>
</HEAD>
<BODY>
<P> HTML CSS</P>
<P> Web- , Web-!
-,
Web-. , HTML
CSS.</P>
<P> HTML :</P>
<P>HTML ( . HyperText Markup Language
)
.</P>
<P>, ...</P>
<P>HTML Web-
:</P>
<P>;</P>
<P>;</P>
<P>;</P>
<P>;</P>
<P>;</P>
<P> ;</P>
<P>- .</P>
<P> HTML</P>
<P>. . .</P>
<P> HTML</P>

I. Web-. HTML 5

38

<P>!DOCTYPE, BODY, EM, HEAD, HTML, META, P, STRONG, TITLE</P>


</BODY>
</HTML>

Web-. .
, "" , Web-.
HTML-, index.htm.
1, Web- Web- index.htm[l] ( default.htm[l], ).
!
, Web-, . - - , .

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

,
: , , .
HTML . , , , .
"" .
, , HTML , ,
.
, 1 6.
(1) . , Web-. Web-
.
(2) .
. Web-
, .
(3) ; . Web-
.
, (4 6)

, , . Web
, , , .

2.

39

Web-
, .
Web-, .
HTML <Hn>, n . ( 2.2).
2.2
<H1> Web-, </H1>
<H2> </H2>
<H3> </H3>
<H4> </H4>
<H5> </H5>
<H6> . ,
!..</H6>

Web-.
Web- , .
, Web- index.htm.
( 2.3).
2.3
<H1> HTML CSS</H1>
. . .
<H2> HTML</H2>
. . .
<H2> HTML</H2>

<P> HTML-
<H1> <H2>. Web- Web- .

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

I. Web-. HTML 5

40

Web- .
.
.
HTML . , , <LI>.
<UL> ( ) <OL> ( ) ( 2.4).
2.4
<UL>
<LI>
<LI>
<LI>
</UL>
. . .
<OL>
<LI>
<LI>
<LI>
</OL>

.</LI>
.</LI>
.</LI>

.</LI>
.</LI>
.</LI>

, .
. "" ( ) ,
. HTML-, , </LI>. "" ,
<LI> "" . ,
, .
2.5 HTML-, ,
. , HTML-, .
2.5
<UL>
<LI> .</LI>
<LI> .
<UL>
<LI> .</LI>
<LI> .</LI>
<LI> .</LI>
</UL>

2.

41

</LI>
<LI> .</LI>
</UL>

HTML . .
HTML , .
<DL>. " ",
<DT>, <DD> ( 2.6).
2.6
<DL>
<DT></DT>
<DD>, Web-</DD>
<DT></DT>
<DD> , </DD>
<DT></DT>
<DD> , Web-
</DD>
</DL>

, Web, Web-
, .
Web- , HTML. ( 2.7).
2.7
<UL>
<LI>;</LI>
<LI>;</LI>
<LI>;</LI>
<LI>;</LI>
<LI>;</LI>
<LI> ;</LI>
<LI>- .</LI>
</UL>

Web- .

42

I. Web-. HTML 5

Web-, , . - .
HTML <BLOCKQUOTE>,
HTML-, ( 2.8). Web .
2.8
<BLOCKQUOTE>
<P> .</P>
<P> .</P>
</BLOCKQUOTE>

, <BLOCKQUOTE> . ( ).
HTML .
, , ( 2.9).
2.9
<BLOCKQUOTE>
<P>HTML ( . HyperText Markup Language
)
.</P>
</BLOCKQUOTE>


. Web, . .
!
Web- ( 2.10) <TITLE>.
2.10
<!DOCTYPE html>
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
<TITLE> TITLE</TITLE>
</HEAD>

2.

43

<BODY>
<H1> TITLE</H1>
<P> TITLE Web-.
.</P>
<H6>:</H6>
<P>!HEAD!
!TITLE! Web-!/TITLE!
!HEAD!</P>
</BODY>
</HTML>

<TITLE> ,
:
!HEAD!
!TITLE! Web-!/TITLE!
!/HEAD!

< >, , 1, , . 3 , , .
t_title.htm Web. ?

. 2.1. Web- t_title.htm Web-.

. 2.1, Web-
. , HTML- ! ?
, Web-
,

I. Web-. HTML 5

44

. ,

. Web- : , .
, .
Web- ! ,
.
, , ,
, HTML <PRE>. ( 2.11).
2.11
<PRE> ,

Web-

.</PRE>

.
:
(

, , );
( );
Web-

, . - Web-.
(, -, Web-...);
HTML- (

3 5).
.
HTML- Web- t_title.htm ,
( 2.12).
2.12
<!DOCTYPE html>
<HTML>
. . .

2.

45

<H6>:</H6>
<PRE>!HEAD!
!TITLE! Web-!/TITLE!
!HEAD!</PRE>
</BODY>
</HTML>

Web- Web- , (. 2.2).

. 2.2. Web- t_title.htm Web-.


,
,
.
(http://www.lib.ru), .


Web-... Web- index.htm ,
HTML. ?
HTML ,
<HR>:
<P> .</P>
<HR>
<P> .</P>

46

I. Web-. HTML 5

HTML Web, -
( Web-). Web- " ".
,
Web-.
. HTML-
index.htm ( 2.13).
2.13
<P> Web- , Web-!
-,
Web-. , HTML
CSS.</P>
<HR>
<P> HTML :</P>
. . .
<P>, ...</P>
<HR>
<P>HTML Web- :</P>

. 2.3. , ?

. 2.3. Web- index.htm

Web- (
, , .). HTML

2.

47

<ADDRESS>. , <P>,
:
<ADDRESS> Web-: , ,
.</ADDRESS>

HTML, ,
Web-, Web.
HTML-, Web Web-. ,
Web- .
<!--
--> . , HTML:
, . !
:
<!-- . Web-. -->

HTML- Web- , ,
. :
<!-- . -->
<!-- Web-, HTML. -->

?
Web- "" , , , ,
. , .
,
. HTML , . ,
, , < >.


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


, HTML 1. <STRONG> <EM>, .
<STRONG> <EM> , . , ,
Web-. , , .
<STRONG> , <EM> ( 3.1).
3.1
<P><STRONG>
!</STRONG>
<P><EM>
,


!</P>
. </EM>
.</P>

HTML (. 3.1),
:
;
(, ,
, ;
. 2).

3.

49

3.1. HTML,

Web-

<ABBR>

<ACRONYM>

. ,
<ABBR>

<CITE>

<CODE>

<DEL>

, Web-

<DFN>

<EM>

<INS>

, Web-

<KBD>

<Q>

. ,
<CITE>

<SAMP>

, -

<STRONG>

<TT>

, - .
, <SAMP>

<VAR>

, ,
, , ( 3.2).
Web-, , "", .
Web- .
3.2
<P> HTML Web-.
<STRONG> !</STRONG><P>
<P> <CODE>P</CODE> <DFN></DFN> HTML.</P>
<P> <ABBR>HTML</ABBR> <INS></INS>
Web-.</P>
<P> Web- -
<KBD>http://www.w3.org</KBD>.<P>

<STRONG> <EM>.
Web-.

50

I. Web-. HTML 5

Web- index.htm
, . 3.1 ( 3.3).
3.3
<P> Web- , Web-!
-,
Web-. , <DFN>HTML</DFN>
<DFN>CSS</DFN>.</P>
. . .
<P><CODE>!DOCTYPE</CODE>, <CODE>BODY</CODE>, <CODE>EM</CODE>,
<CODE>HEAD</CODE>, <CODE>HTML</CODE>, <CODE>META</CODE>, <CODE>P</CODE>,
<CODE>STRONG</CODE>, <CODE>TITLE</CODE></P>

: !
!


Web-
, . . . . Web 2 <ADDRESS>:
<ADDRESS> . , 2010 .</ADDRESS>

, . ,
, .
?
, , <ADDRESS>: ,
.
. ( <ADDRESS> , . . .) .
HTML. , , , . <BR>:
<P> <BR>.</P>

Web-.
, .
:
<ADDRESS> .<BR>, 2010 .</ADDRESS>

Web- Web- (. 3.1). ,


, <BR>.

3.

51

. 3.1.

, , .
Web- ,
Web-.

Web- t_title.htm
<TITLE>. ?
< >, HTML. . , .
- ?
, .
HTML , ,
, , , . , Web- "", ,
Web-.
HTML & ; ( ). . , < &lt;, > &gt;.
( 3.4).
3.4
<!DOCTYPE html>
<HTML>
. . .
<BODY>
. . .
<H6>:</H6>
<PRE>&lt;HEAD&gt;
&lt;TITLE&gt; Web-&lt;/TITLE&gt;
&lt;HEAD&gt;</PRE>
. . .
</BODY>
</HTML>

52

I. Web-. HTML 5

Web- Web-. < >!


HTML . . 3.2.
3.2. HTML

HTML

( )

&mdash;

( )

&ndash;

"

&quot;

&

&amp;

<

&lt;

>

&gt;

&copy;

&reg;

&ldquo;

&laquo;

&lsquo;

&hellip;

&nbsp;

&rdquo;

&raquo;

&rsquo;

&euro;

. 3.2
. , &nbsp;. Web- .
, -
. , . :
<P> &nbsp;&mdash; .<P>

&nbsp; , &mdash;
.

3.

53

, ,
. :
<ADDRESS> .<BR>&copy; , 2010 .</ADDRESS>

HTML , Unicode, .
&#< >;.
? .
, Windows. (. 3.2).

. 3.2. ( )

, ,
. ,
. :
Alt+< >. - !
!
: Alt+< > , .

, ,
&#0169;, 0169 (. . 3.2):
<ADDRESS> .<BR>&#0169; , 2010 .</ADDRESS>

HTML. .

54

I. Web-. HTML 5

?
. , . , HTML. .
HTML . . Web , . HTML 5.


. WWW.
Web- ( ). , Web. ,
. , Web-, ,
Web- , !
. - HTML 5, .

.

Web-
, : HTML-
, - ! - ...
, , . - .
HTML . ,
. HTML- Web-
, -. -, Web Web- ,
- Web- , .
, - , Web- ,
Web-.

1 , Web- . Web .

56

I. Web-. HTML 5

Web- . 3.2 HTML, 1997 .


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

-

. Web- . WWW , .
, . , , .
GIF (Graphics Interchange Format, )
"" . 1987 1989 . , .
. -, GIF "" ;
"", ""
. -, GIF- , ( GIF). -, -

(, , .).
GIF
(, . .). ,
GIF- 256 ,
.
GIF Web- (
, . .) .
JPEG (Joint Photographic Experts Group,
) 1993
. .
JPEG, GIF, , .
, "" .

4.

57

PNG (Portable Network Graphics, )


1996 . GIF, , , JPEG. " " GIF.
PNG , .
.
,
. GIF PNG "" gif png,
JPEG jpg, jpe jpeg.


Web-
<IMG>. Web- Web-, <IMG>.
1 HTML, .
, . . <IMG> .
SRC - .
:
<IMG SRC="image.gif">

Web- , image.gif,
, Web-.
:
<IMG SRC="/images/picture.jpg">

Web- ,
picture.jpg, images, Web.
:
<IMG SRC="http://www.othersite.ru/book12/author.jpg">

Web- , - http://www.othersite.ru/book12/author.jpg, . .
Web-.

- , WWW, 6.

, Web- . , , Web-

58

I. Web-. HTML 5

. , " ",
, , .
.
-, :
<IMG>,

<P> <IMG SRC="image.gif"></P>

-, Web- , ,
:
<P><IMG SRC="/images/picture.jpg"></P>

. , Web-.
@, image.gif. , , HTML- 4.1.
Web- index.htm <IMG> Web-. Web- Web-.
HTML- 4.1.
4.1
<!DOCTYPE html>
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
<TITLE> IMG</TITLE>
</HEAD>
<BODY>
<H1> IMG</H1>
<P> IMG Web-
.</P>
<H6>:</H6>
<PRE>&lt;P&gt;&lt;IMG SRC=&quot;image.gif&quot;&gt;&lt;/P&gt;</PRE>
<H6>:</H6>
<P><IMG SRC="image.gif"></P>
</BODY>
</HTML>

, , Web-, image.gif. , HTML-.


Web- t_img.htm Web (. 4.1). Web-
<P><IMG SRC="image.gif"></P>

4.

59

. 4.1. Web- t_img.htm Web-

, Web- .
HTML- .
<IMG>,
.
Web- , Web Web- .
Web- Web-.
.
. Web- , , , . , Web-
, . Web-
.
. -,
. -, ,
, .
,
. <IMG> ALT, .

I. Web-. HTML 5

60

, , :
<P><IMG SRC="image.gif" ALT=" "></P>

Web- t_img.htm "


".

Web-
. , Web-,
.

-. 6, - -.
...

, , .
Web- - , Web-.
Web- -
HTML-, " " . , HTML 5 ( ) Web-, .
? , <IMG>!
!
HTML 5. ( , <OBJECT>) .


,
. -, Web- , . (
Web-, Web-, ...)
Web-
. ""
- () .
, .
, - .

. (

4.

61

) ,
.
, Web- Web-.
WAV (WAVe, ) "" . -

Microsoft 90- .
wav.
OGG . -

Xiph.org - .
ogg ( ), oga () ogv (); .
MP4 "". Motion Picture Expert

Group ( ; MPEG) 1998 - .


mp4.
QuickTime , WAV. Apple

1989 - .
mov.
, Web-.
PCM (Pulse-Coded Modulation, - )

. . .
Vorbis . Xiph.org ( OGG) 2002 .
.
AAC (Advanced Audio Coding, )

. Motion Picture Expert Group


1997 . .
Theora , "" . Xiph.org . .
H.264 "". Motion Picture

Expert Group Video Coding Experts Group (


) 2003 . .
.
QuickTime, Apple, H.264, .
,
Web- Web- . -

I. Web-. HTML 5

62

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

Firefox

Opera

Safari

Chrome

,
WAV-PCM

OGG-Vorbis

MOV-AAC

*
,

OGG-Vorbis

OGG-Theora

MOV-AAC

MOV-H.264

MP4-AAC

MP4-H.264

, Web- . -
Web- ...

MIME
: Web-, , - , , . . , , , -. , Web- Web ,
.
, , MIME (Multipurpose Internet Mail Extensions,
). MIME , , , Web-. (
Web-) MIME ,
, , , .
Web- MIME text/html. GIF
MIME image/gif. MIME application/
x-msdownload, ZIP application/x-zip-compressed. MIME
.
MIME .
, Web- . , Web- -

4.

63

. Web- ,
, . . . ,
MIME .
. 4.2 MIME , Web- .
4.2. MIME ,
Web-

MIME

WAV

audio/wave
audio/wav
audio/x-wav
audio/x-pn-wav

OGG

audio/ogg ( )
video/ogg ( )
application/ogg

MP4

video/mp4

QuickTime

video/quicktime

, MIME. .
, . ,
HTML 5 Web-.


Web- HTML 5
<AUDIO>. - , ,
SRC :
<AUDIO SRC="sound.wav"></AUDIO>

<AUDIO>, Web-
, .
( Web-;
Web- III.) Web , , , .
<AUDIO>, .
<AUDIO> Web-. Web- . ,

64

I. Web-. HTML 5

, ( ).
Web- .
, <AUDIO> AUTOPLAY. : , ( ):
<P> !</P>
<AUDIO SRC="sound.ogg" AUTOPLAY></AUDIO>

Web- (, ,
, ). <AUDIO>
CONTROLS, Web- Web, <AUDIO>,
. ,
:
<P> , .</P>
<AUDIO SRC="sound.ogg" CONTROLS></AUDIO>

AUTOBUFFER <AUDIO>
, AUTOPLAY. , Web Web- .
,
Web- .
WAV-PCM sound.wav.
, , , HTML- 4.2
, .
Web- index.htm <AUDIO>.
Web-, HTML- 4.2.
4.2
<!DOCTYPE html>
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
<TITLE> AUDIO</TITLE>
</HEAD>
<BODY>
<H1> AUDIO</H1>
<P> AUDIO Web- .</P>
<H6>:</H6>
<PRE>&lt;AUDIO SRC=&quot;sound.wav&quot;
CONTROLS&gt;&lt;/AUDIO&gt;</PRE>

4.

65

<H6>:</H6>
<AUDIO SRC="sound.wav" CONTROLS></AUDIO>
</BODY>
</HTML>

Web- t_audio.htm.
( sound.wav) , Web ( t_audio.htm ). Web Web- (. 4.2).

. 4.2. Web- t_audio.htm Web-

, , .
.


Web- <VIDEO>. - SRC
:
<VIDEO SRC="film.ogg"></VIDEO>

, Web- Web-,
, . <VIDEO> ,

I. Web-. HTML 5

66

, .
Web-
.
<AUDIO>, <VIDEO> Web- AUTOPLAY, CONTROLS AUTOBUFFER:
<VIDEO SRC="film.ogg" AUTOPLAY CONTROLS></VIDEO>

,
(
Web-). ,
. POSTER <VIDEO>;
- :
<VIDEO SRC="film.ogg" CONTROLS POSTER="filmposter.jpg"></VIDEO>

-,
filmposter.jpg.
, ? .
OGG film.ogg.
, , , HTML .

, ,
, . SUPER , - http://www.erightsoft.com/
SUPER.html. ,
OGG.

Web- index.htm <VIDEO>.


Web-, HTML- 4.3.
4.3
<!DOCTYPE html>
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
<TITLE> VIDEO</TITLE>
</HEAD>
<BODY>
<H1> VIDEO</H1>
<P> VIDEO Web- .</P>
<H6>:</H6>
<PRE>&lt;VIDEO SRC=&quot;film.ogg&quot;
CONTROLS&gt;&lt;/VIDEO&gt;</PRE>
<H6>:</H6>

4.

67

<VIDEO SRC="film.ogg" CONTROLS></VIDEO>


</BODY>
</HTML>

Web- t_video.htm. ( film.ogg) , Web-


( t_video.htm ). Web- t_video.htm Web (. 4.3).

. 4.3. Web- t_video.htm Web-


.
"". , ; ,

68

I. Web-. HTML 5

. ,
.


<AUDIO> <VIDEO>
! ,
Web- . ,
- , Web-, Web- " ". ?
HTML 5
<AUDIO> <VIDEO> . Web , .

<AUDIO> <VIDEO>, .
1. <AUDIO> <VIDEO> , . . SRC .
2. <AUDIO> <VIDEO> <SOURCE>, - .
<SOURCE> - ,
MIME. SRC TYPE :
<VIDEO>
<SOURCE SRC="film.ogg" TYPE="video/ogg">
<SOURCE SRC="film.mov" TYPE="video/quicktime">
</VIDEO>

<VIDEO> ,
: OGG, QuickTime. Web-,
OGG, , Web, QuickTime, .
, MIME (, , TYPE
<SOURCE>) . Web-
, , .
. MIME
.
Web- <AUDIO> <VIDEO>?
Web- . ,
- (, Web-).
<AUDIO> <VIDEO> <SOURCE> (
), , 4.4.

4.

69

4.4
<VIDEO>
<SOURCE SRC="film.ogg" TYPE="video/ogg">
<SOURCE SRC="film.mov" TYPE="video/quicktime">
Web-
HTML 5. .
</VIDEO>

, , . <AUDIO>
<VIDEO> , .
- HTML 5 .

?
Web- ,
- . HTML 5.
.

, Web- , - .
Web-. .
, ? !
,
, . .
.
HTML ? , .
.


HTML .
HTML- <TABLE>
:
<TABLE>
</TABLE>

HTML Web-. ,
: , , , - .
. ( , ,
, ...)
.
<TR>; . <TR>
<TABLE> ( 5.1).
5.1
<TABLE>
<TR>

5.

71

</TR>
<TR>
</TR>
<TR>
</TR>
</TABLE>

, <TD>
<TH>. , , "" . <TD> <TH>
<TR>, ,
( 5.2).
5.2
<TABLE>
<TR>
<TH></TH>
<TH></TH>
<TH></TH>
</TR>
<TR>
<TD></TD>
<TD></TD>
<TD></TD>
</TR>
<TR>
<TD></TD>
<TD></TD>
<TD></TD>
</TR>
</TABLE>

, , ,
<TD> <TH> ( 5.3).
5.3
<TABLE>
<TR>
<TH> 1</TH>
<TH> 2</TH>
<TH> 3</TH>
</TR>
<TR>
<TD> 1.1</TD>
<TD> 1.2</TD>

I. Web-. HTML 5

72
<TD>
</TR>
<TR>
<TD>
<TD>
<TD>
</TR>
</TABLE>

1.3</TD>

2.1</TD>
2.2</TD>
2.3</TD>

,
<TD> <TH> ( 5.3).
, , .
- ,
3 . , , <EM>; ( 5.4).
5.4
<TABLE>
. . .
<TR>
<TD> <EM>1.1</EM></TD>
<TD> <EM>1.2</EM></TD>
<TD> <EM>1.3</EM></TD>
</TR>
. . .
</TABLE>

:
<TD><IMG SRC="picture.jpg" ALT=" "></TD>

,
. 2 , . <TD> <TH>
( 5.5).
5.5
<TD>
<H4> </H4>
<P> ,
.</P>
<P> ,
.</P>
<P><IMG SRC="picture.jpg" ALT=" "></P>
<P> <STRONG> </STRONG> .</P>
</TD>

5.

73

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

.
.
Web-, "" . ( Web- . 1.) , , , . II.
, HTML- .
, Web-
.
<TR> <TABLE>. -

<TABLE> ( , ) .
<TD> <TH> <TR>. -

<TR> .
<TD> <TH>.
- , Web-

. -
, (HTML-
&nbsp;).
, . . Web index.htm , HTML
. .
5.6 HTML- Web- index.htm,
.

74

I. Web-. HTML 5

5.6
. . .
<P>, ...</P>
<HR>
<P> HTML:</P>
<TABLE>
<TR>
<TH> HTML</TH>
<TH> </TH>
<TH></TH>
</TR>
<TR>
<TD>1.0</TD>
<TD>1992</TD>
<TD> </TD>
</TR>
<TR>
<TD>2.0</TD>
<TD>1995</TD>
<TD> </TD>
</TR>
<TR>
<TD>3.2</TD>
<TD>1997</TD>
<TD> </TD>
</TR>
<TR>
<TD>4.0</TD>
<TD>1997</TD>
<TD>&quot;&quot; </TD>
</TR>
<TR>
<TD>4.01</TD>
<TD>1999</TD>
<TD> , </TD>
</TR>
<TR>
<TD>5.0</TD>
<TD>?</TD>
<TD> </TD>
</TR>
</TABLE>
<P>HTML Web- :</P>
. . .

Web- Web- (. 5.1).

5.

75

. 5.1. HTML Web- index.htm

, . Web- , , .
II, ( Web-) .


HTML .
, .
, <CAPTION> . , , , <TABLE> ( 5.7).
5.7
<TABLE>
<CAPTION> </CAPTION>
<TR>
<TH> 1</TH>
<TH> 2</TH>
<TH> 3</TH>
</TR>
. . .
</TABLE>

, . - ,
3 :
<CAPTION><STRONG> <STRONG></CAPTION>

<CAPTION> <TABLE>
. , HTML- Web- .
, HTML
:
, , "";

I. Web-. HTML 5

76

, , ;
, "" (

"" ).
<THEAD>, <TBODY>, <TFOOT>. ,
<TABLE> <TR>, ,
( 5.8).
5.8
<TABLE>
<THEAD>
<TR>
<TH> 1</TH>
<TH> 2</TH>
<TH> 3</TH>
</TR>
</THEAD>
<TBODY>
<TR>
<TD> 1.1</TD>
<TD> 1.2</TD>
<TD> 1.3</TD>
</TR>
<TR>
<TD> 2.1</TD>
<TD> 2.2</TD>
<TD> 2.3</TD>
</TR>
</TBODY>
<TFOOT>
<TR>
<TD> 2.1</TD>
<TD> 2.2</TD>
<TD> 2.3</TD>
</TR>
</TFOOT>
</TABLE>

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

<TABLE> SUMMARY,
. -

5.

77

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

,
HTML, Web- index.htm.
" HTML:", . . (""
, .)
5.9 HTML- Web-
index.htm, .
5.9
. . .
<P>, ...</P>
<HR>
<TABLE>
<CAPTION> HTML:</CAPTION>
<THEAD>
<TR>
<TH> HTML</TH>
<TH> </TH>
<TH></TH>
</TR>
</THEAD>
<TBODY>
<TR>
<TD>1.0</TD>
<TD>1992</TD>
<TD> </TD>
</TR>
. . .
<TR>
<TD>5.0</TD>
<TD>?</TD>
<TD> </TD>
</TR>
</TBODY>
</TABLE>
<P>HTML Web- :</P>
. . .

Web- Web-.
, " HTML" .
.
( Web-
).

78

I. Web-. HTML 5


HTML. .
, HTML- 5.10.
5.10
<TABLE>
<TR>
<TD>1</TD>
<TD>2</TD>
<TD>3</TD>
<TD>4</TD>
<TD>5</TD>
</TR>
<TR>
<TD>6</TD>
<TD>7</TD>
<TD>8</TD>
<TD>9</TD>
<TD>10</TD>
</TR>
<TR>
<TD>11</TD>
<TD>12</TD>
<TD>13</TD>
<TD>14</TD>
<TD>15</TD>
</TR>
<TR>
<TD>16</TD>
<TD>17</TD>
<TD>18</TD>
<TD>19</TD>
<TD>20</TD>
</TR>
</TABLE>

,
. . 5.2 Web-.
. 5.3.
. ,
. ?
<TD> <TH>
. COLSPAN , ROWSPAN .

5.

79

10

11

12

13

14

15

16

17

18

19

20

. 5.2. ,

2+3

4+5

1+6
7

11

16

10

12+13+14+15

17

18

19

20

. 5.3. , . 5.2,
( )

, .
1. HTML <TD> (<TH>),
( ).
2. COLSPAN , .
3. <TD> (<TH>),
.
2 3 (. 5.10). , , 5.11.
5.11
<TR>
<TD>1</TD>
<TD COLSPAN="2">2 + 3</TD>
<TD>4</TD>
<TD>5</TD>
</TR>

4 + 5 12 + 13 + 14 + 15.

80

I. Web-. HTML 5

. ,
.
1. HTML ( <TR>), ( ).
2. <TD> (<TH>), .
3. ROWSPAN , .
4. <TD> (<TH>),
.
1 6 . 5.12 HTML- (
).
5.12
<TR>
<TD ROWSPAN="2">1 + 6</TD>
<TD COLSPAN="2">2 + 3</TD>
<TD COLSPAN="2">4 + 5</TD>
</TR>
<TR>
<TD>7</TD>
<TD>8</TD>
<TD>9</TD>
<TD>10</TD>
</TR>

, <TD>,
, .
. ,
Web- ( Web- . 10), . ,
.

?
HTML, , ,
HTML. Web- , ...
Web-.
, , ( -). - Web Web-!


Web- : , , - . ,
, Web- . ( .)
Web- Web-.
? .
;
, " ". Web- Web-, - ( Web-).
,
.


,
.


. (, ) , , <A>. - Web-
HREF .
(. . <A>) Web-,
. . , , :
, Web- page125.html,
pages, , http://www.somesite.ru:
<A HREF="http://www.somesite.ru/pages/page125.html"> 125</A>

I. Web-. HTML 5

82

archive.zip,
, Web-, Web-
( Web-):
<A HREF="archive.zip"></A>

Web-
, .
:
<P><A HREF="22.html"> </A>,
<A HREF="24.html"> </A>.</P>

HTML- , , Web-.
, , , , 3.
:
<A HREF="http://www.somesite.ru/pages/page125.html">
<EM>125</EM></A>

<A> TARGET. ,
, Web-. , TARGET
"_blank", Web.
, ( ):
<A HREF="http://www.somesite.ru/pages/page125.html" TARGET="_blank">
125</A>

" 125" Web-.


( Web- Web-), TARGET "_self" ( )
<A>.
,
("" ).
HREF # (""):
<A HREF="#"> !</A>

.

"" III IV, Web-.

6.

83

Web-:
;
, "" ( ),

- ;
, ( -

), - ;
;
Web-

" ".
, , . , , II.

- WWW
- 1. WWW
- , .
. : http://www.somesite.ru/pages/page125.html. Web-, , .
. - , ,
, Web-.
, Web, Web-, -, (- Web-
Web-).
-.
, ( ),
Web-. / (),
Web-, .

1. : ,
, Web- Web; Web-.

, -
/page3.html
page3.html, Web-.
-
/articles/article1.html
article1.html, articles,
Web-.

I. Web-. HTML 5

84

- ,
, "" Web- (, ,
Web-).
- Web-.
-.
-.
-
archive.zip
archive.zip, ,
Web-.
-
chapter3/page1.html
Web- page1.html, chapter3,
, Web-.
-
../contents.html
Web- contents.html, ,
, Web-. ( .)
- . ,
, , Web, .

-,
, .

!
Web-, Web-,
, -. , ,
,
-. (, , Web-,
-.)

-, , , Web Web-. , ,
Web-, tags. Web, HTML ( ),
( : , - ). index.htm
Web- .

6.

85

Web- index.htm HTML-,


. , Web.
HTML-, , Web- <AUDIO>:
<CODE><A HREF="tags/t_audio.htm">AUDIO</A></CODE>

.
Web-, - ,
Web-. ,
, Web <Backspace> .
Web- , Web-
.
Web-, . Web- .
HTML-:
<P><A HREF="../index.htm"> Web-</A></P>

Web- Web-
, , HTML.
( 6.1).
6.1
<BLOCKQUOTE>
<P>HTML ( . HyperText Markup Language
)
. (<A HREF="http://ru.wikipedia.org/wiki/HTML"
TARGET="_blank"> </A>)</P>
</BLOCKQUOTE>

<A> TARGET "_blank". Web HTML Web. "" , Web-.


HTML ,
( ). , . -
.
, :
user@mailserver.ru

86

I. Web-. HTML 5

HTML, :
mailto:user@mailserver.ru
mailto .
:
<A HREF="mailto:user@mailserver.ru"> </A>

Web- .
"" .
HTML- :
<A HREF="mailto:user@mailserver.ru"></A>

. , .


HTML
. , .
, "" . , <Alt>, Web-
.
"" ACCESSKEY
<A>. ,
:
<A HREF="http://www.somesite.ru/pages/page125.html"
ACCESSKEY="d"> 125</A>

"" <D>. ,
, <Alt>+<D>.
. "" .
,
. , ,
.
<Enter>, Web- , .
<Tab>, Web- .
<Shift>+<Tab>, Web-

.
,
<Tab> <Shift>+<Tab>, -

6.

87

. , HTML- Web-.
TABINDEX <A>. 32 767
32 767 .
, -

. , 1, 2, 3 . .
, , , HTML- Web-.
TABINDEX .
,

.
.
:
<P><A HREF="page1.htm" TABINDEX="3"> 1</A></P>
<P><A HREF="page2.htm" TABINDEX="2"> 2</A></P>
<P><A HREF="page3.htm" TABINDEX="1"> 3</A></P>

HTML- "" .
" 3", " 2" " 1".


,
, . .

-
HTML
, , . .
-.
<A>
<IMG>:
<A HREF="http://www.w3.org"><IMG SRC="w3logo.gif"></A>

HTML- -, Web- W3C. , ,


Web-.
<A HREF="mailto:user@mailserver.ru"><IMG SRC="email.gif"></A>

HTML- -.

I. Web-. HTML 5

88

- Web-:
- , -

: , -
. .;
- Web-

" ", .
- , , .
Web- II.

-
HTML . , ,
, -.
-, - "" .
- Web-,
, Web. - , .
- . <IMG>:
<IMG SRC="map.gif">

, Web-, "" -. Web-


.
<MAP>:
<MAP NAME="< >">
</MAP>

!
<MAP> , . .

NAME <MAP>
Web- . ,
,
:
<MAP NAME="samplemap">
</MAP>

6.

89

. USEMAP
<IMG>. ,
# (""). ( , NAME <MAP>, # .)
<IMG SRC="map.gif" USEMAP="#samplemap">

"" . <MAP>
<AREA>:
<AREA [SHAPE="rect|circle|poly"] COORDS="< >"
HREF="<- >"|NOHREF
TARGET="< >">

SHAPE "" . COORDS , .


SHAPE:
"rect" "" . COORDS COORDS="<X1>,<Y1>,<X2>,<Y2>", X1 Y1 , X2 Y2 . , SHAPE , ;
"circle" "" . COORDS
COORDS="<X >,<Y >,<>";
"poly" "" . COORDS

COORDS="<X1>,<Y1>,<X2>,<Y3>,<X3>,<Y3>...", Xn Yn
.
HREF - , , . NOHREF, ,
-.
-, , , ""
.
TARGET . (,
, "" ,
"" NOHREF.)
6.2 HTML-, -.
6.2
<IMG SRC="map.gif" USEMAP="#samplemap">
. . .
<MAP NAME="samplemap">
<AREA SHAPE="circle" COORDS="50,50,30" HREF="page1.html">
<AREA SHAPE="circle" COORDS="50,150,30" HREF="page2.html">
<AREA SHAPE="poly" COORDS="100,50,100,100,150,50,100,50" NOHREF>

90

I. Web-. HTML 5

<AREA SHAPE="rect" COORDS="0,100,30,100" HREF="appendix.html"


TARGET="_blank">
</MAP>

"" , Web-
page1.html page2.html, , , , Web- appendix.html. "" Web-
Web-.
- .


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

( ).
( ,
), (
) ( ).
. -. - , .
( Web- III.)
, .
, ,
. Web-.
Web- Web-
, Web-: CSS,
. , .
Web-, ( 6.3).
6.3
. . .
<BODY>
<P><A HREF="css_index.htm">CSS</A> |

6.

91

<A HREF="samples_index.htm"></A> |
<A HREF="about.htm"> </A></P>
<H1> HTML CSS</H1>
. . .

, , | ( ).
Web- ...
Web- Web. .

, HTML
.
, .
(anchors). Web-
(, ), Web, .
"" , . !
<A>, .
HREF . <A> ID, Web . ,
(. , ).
. , <A>
( ), . , ( ).
, .
6.4 HTML-, .
6.4
. . .
<P> ...</P>
<A ID="chapter3"></A>
<P> ...<P>
. . .

chapter3
.
! . Web-?
. , -

92

I. Web-. HTML 5

- . -
# ("").
, Web-, chapter3,
novel.htm. , Web-, :
<A HREF="novel.htm#chapter3"> 3</A>

Web- Web-
novel.htm , ,
chapter3.
Web-, ,
- ,
"":
<A HREF="#chapter3"> 3</A>

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

II

Web-.
CSS 3
7.

CSS

8.

9.

10.

Web-

11.

12.

13.

CSS
Web-
HTML 5, . , HTML Web- Web. Web- , ,
, - . .
Web- - . ,
, , - ... - . ?..
Web- "" .
, ,
, Web- (, ). Web- .
, .
! Web , .
- Web-.

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

II. Web-. CSS 3

96

, Web- ,
, Web, .
HTML- Web- . Web 2.0;
1, , Web-
. ,
HTML, Web-; , , .
, CSS. , (CSS 1), 1996 .

CSS 2 CSS 3,
Web-.
CSS 3 (, , ) .

CSS
CSS 7.1.
7.1
<>
<
<
. . .
<
<
}

{
1>: < 1>;
2>: < 2>;
n-1>: < n-1>;
n>: < n>

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

7. CSS

97

< >:<> ; (

).
< >:<>
; , Web- .
.
. ,
, Web- .
CSS- ,
HTML-.
, . :
P { color: #0000FF }

.
P . <P>.
color . .
#0000FF color. -

, RGB. ( RGB- 8.)


Web- ,
Web- ( <P>). , ,
.
, , . HTML-
< >. , ; .
.
<EM>:
EM { color: #00FF00;
font-weight: bold }

, <EM>, Web- . font-weight "" ,


bold .
<BODY>:
BODY { background-color: #000000;
color: #FFFFFF }

Web- (RGB- #FFFFFF)


(RGB- #000000). background-color, ,
.

98

II. Web-. CSS 3

:
.redtext { color: #FF0000 }

(RGB- #FF0000). HTML- <REDTEXT> .


CSS .
. ,
.
, , .
, .
. CLASS,
.
:
<P CLASS="redtext">!</P>

redtext "!". .
7.2
.attention { color: #FF0000;
font-style: italic }
. . .
<P><STRONG CLASS="attention">
CLASS!</STRONG></P>

7.2 attention,
. ( font-style
, italic .) <STRONG>. ;
"" <STRONG>,
attention.
CLASS
, .
. ( Web-
.)
7.3
.attention { color: #FF0000;
font-style: italic }
.bigtext
{ font-size: large }
. . .
<P><STRONG CLASS="attention bigtext">
CLASS!</STRONG></P>

7. CSS

99

7.3 <STRONG> :
attention bigtext. . (
font-size , large , , .)
.
, ,
. .
# ("-

"). Web-, .
ID, -

. , #.
ID Web-.

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

#bigtext { font-size: large }
. . .
<P ID="bigtext"> .</P>

" " .
, . CSS
. , .
, , ,
, ,
.
, CSS .
,

.
-

, : , , , .

, ,
.

100

II. Web-. CSS 3

.
, .

, ?.. , .
:
P EM { color: #0000FF }

<P> <EM>.
<P>, <EM>. , <EM>

<P>.
<EM>.
<P><EM> </EM> .</P>
<P> .</P>
<P><STRONG></STRONG> .</P>

" " .
:
P.mini { color: #FF0000;
font-size: smaller }

<P> mini. ,
<P>, mini. ( smaller font-size
.)
<P CLASS="mini"> .</P>

:
P.sel <STRONG> { color: #FF0000 }

<STRONG>, <P>, sel.


<P CLASS="sel"><STRONG></STRONG> .</P>

"" .
CSS , :
H1, .redtext, P EM <STRONG> { color: #FF0000 }

: <H1>,
redtext P EM.
.
CSS
. HTML- Web-, , , .

7. CSS

101

HTML- Web, . . .
, . . .

.
, , .
, .
STYLE
, :
<P STYLE="font-size: smaller; font-style: italic">
.</P>

, . .
, . .
Web 2.0 Web-. - Web ( ) .
14 CSS. .


CSS.
, ,
. .
, , .
Web-, css. CSS- .
7.4 .
7.4
.redtext { color: #FF0000 }
#bigtext { font-size: large }
EM { color: #00FF00;
font-weight: bold }
P EM { color: #0000FF }

, . , .

102

II. Web-. CSS 3

Web-, ,
- Web-.
<LINK>, Web-.
( Web- 1.) :
<LINK REL="stylesheet" HREF="<- >"
TYPE="text/css">

-
HREF .
<LINK> . REL ,
, <LINK>, Web-;
"stylesheet" , .
TYPE MIME , ;
MIME text/css.
7.5
<HEAD>
. . .
<LINK REL="stylesheet" HREF="main.css" TYPE="text/css">
. . .
</HEAD>

7.5 ,
main.css, Web-.
, Web-. , ,
,
"".
( 7.6) HTML- Web. <STYLE> .
"".
7.6
<HEAD>
. . .
<STYLE>
.redtext { color: #FF0000 }
#bigtext { font-size: large }
EM
{ color: #00FF00;
font-weight: bold }
P EM
{ color: #0000FF }
</STYLE>
. . .
</HEAD>

7. CSS

103

,
Web- , , "". . , , ,
Web-, . -,
Web 2.0, Web- .
Web- : ( 7.7).
7.7
<HEAD>
. . .
<LINK REL="stylesheet" HREF="styles1.css" TYPE="text/css">
<LINK REL="stylesheet" HREF="styles2.css" TYPE="text/css">
. . .
<STYLE>
. . .
</STYLE>
. . .
</HEAD>

. .


, Web-
. ( , , , ) ( ).
, Web- .
Web- ,
Web-? , . ?
, ( 7.8).
7.8
.redtext { color: #FF0000 }
#bigtext { font-size: large }
EM
{ color: #00FF00;
font-weight: bold }

Web-, ( 7.9).

104

II. Web-. CSS 3

7.9
<STYLE>
.redtext { color: #0000FF }
EM { font-size: smaller }
</STYLE>

Web- HTML-:
<P CLASS="redtext"> .</P>
<P ID="bigtext" STYLE="color: #FFFF00"> .<P>
<P><EM> .</EM></P>

, Web-
. , <P>
bigtext, . ,
redtext
<EM>!
?
HTML- <EM>.
Web- ,
.

. , <EM>, , , , CSS,
:
EM { color: #00FF00;
font-size: smaller;
font-weight: bold }

Web- <EM>,
Web-.
HTML-, , . Web-
bigtext . , CSS, :
#bigtext { color: $FFFF00;
font-size: large }

, , HTML-. redtext
( color) Web- . , , ,
. ,
CSS, ,
" ". :
.redtext { color: #0000FF }

7. CSS

105

,
. Web- , .
, Web-
. .
, ( <LINK>) HTML-

, , .
.
, -

.
. -

, , , .
.
, , ,


. , ,
7.10.
7.10
.redtext { color: #FF0000;
font-weight: normal }
EM
{ color: #00FF00;
font-weight: bold }

normal font-weight "" ,


. . , .
Web- :
<P><EM CLASS="redtext"> .</EM></P>

, , .
.
, , , <EM>,
! ?
, ?

106

II. Web-. CSS 3

. CSS . , ,
, , .
CSS.
,
. , ,
.
,
!important ( ,
"important"). :
EM

{ color: #00FF00;
font-weight: bold !important }

, <EM>,
, .
Web, , Web-,
. 14,
.
. ...


. , . , , .
, ,
Web- .
, Web-, , .
, , Web-.
, .
Web Web-. .
,
Web-. -
(, -), , , , . , , ,
CSS- .

7. CSS

107

, .

.
(), Web-, ;
, "" .
,
Web-. , Web-,
, Web- (
10). , , .

. . ,
Web-.
, , Web-,
. , . ,
, , .
.
.
, Web, .
, Web . 1, Web 2.0
Web-.
.
, ,
, , Web-. .
, ,
Web-. , .

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

108

II. Web-. CSS 3

CSS. , .
, , / ()
, :
/
P { color: #0000FF }

/ .
, , /* */. , ( 7.11).
7.11
/*
,

.
*/
P { color: #0000FF }

/* */.

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

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


, , .
Web- .
font-family , :
font-family: < , >|inherit

, , Arial Times New Roman.


, :
P { font-family: Arial }
H1 ( font-family: "Times New Roman" }

,
:
<P STYLE="font-family: 'Times New Roman'">

, Web . ,
, . Web-, ,

II. Web-. CSS 3

110

, . (, Arial Times New


Roman , Windows.)
:
P { font-family: Verdana, Arial }

Web- ,
, . .
, . :
serif ( ), sans-serif ( ), cursive (,
), fantasy ( ) monospace
( ):
H2 { font-family: Verdana, Arial, sans-serif }

inherit , Web-
, . , Web- "" . , , font-family .
font-size :
font-size: <>|xx-small|x-small|small|medium|large|x-large|
xx-large|larger|smaller|inherit

.
, CSS (. 8.1).
8.1. , CSS

CSS

px

pt

in

cm

mm

pc

"m"

em

"x"

ex

:
P { font-size: 10pt }
STRONG { font-size: 1cm }
EM { font-size: 150% }

8. .

111

, . 8.1 CSS.
, font-size . ,
xx-small xx-large ,
. larger smaller , , .
, medium,
larger large.
inherit , Web-
, . fontsize .
color :
color: <>|inherit

7 , RGB- (Red,
Green, Blue , , ).
#< >< >< >,

00 FF.
:
H1 { color: #FF0000 }

:
ADDRESS { color: #CCCCCC }

, CSS . , black , white , red , green ,


blue .
:
H1 { color: red }

Web http://msdn.microsoft.com/en-us/library/aa358802%28v=VS.85%29.aspx.
inherit , Web-
, . fontsize .
!
inherit CSS.
Web-, Web-, , "" . . ; - ,
.

112

II. Web-. CSS 3

color , ,
HTML.
opacity Web:
opacity: < >|inherit

0 1. 0 (. . ), 1
( ).
( 0,5) :
PRE { opacity: 0.5 }

, .

. , . .
.

font-weight "" :
font-weight: normal|bold|bolder|lighter|100|200|300|400|500|600|
700|800|900|inherit

100 900, "" , ;


"" 400 ( normal), 700 ( bold).
400 (normal). bolder lighter ""
.
:
CODE { font-weight: bold }

font-style :
font-style: normal|italic|oblique|inherit

, (normal), (italic)
, (oblique).
text-decoration "" ( ), :
text-decoration: none|underline|overline|line-through|blink|inherit

( inherit):
none "", ;
underline ;

8. .

113

overline "" , . . ;
line-through ;
blink ( Safari).
!
.
, Web- ,
, , .

font-variant , :
font-variant: normal|small-caps|inherit

small-caps , , , .
normal .
text-transform :
text-transform: capitalize|uppercase|lowercase|none|inherit

( uppercase )
(lowercase) , (capitalize) (none).
line-height :
line-height: normal|<>|inherit

, CSS (. . 8.1).
. ,
, :
P { line-height: 2 }

normal Web.
letter-spacing
:
letter-spacing: normal|<>

, ; , Web-.
, CSS (. . 8.1). ; . normal , .

114

II. Web-. CSS 3

letter-spacing inherit.
:
H1 { letter-spacing: 5px }

, , .

:
H6 { letter-spacing: -2px }

,
, . ,
.
word-spacing
:
word-spacing: normal|<>

:
H1 { word-spacing: 5mm }

, 5 , , ... .
font,
:
font: [<>] [< >] [<"">]
[<>[/< >]] < >

,
.
Times New Roman 10 :
P { font: 10pt "Times New Roman" }

Arial 12 :
H6 { font: italic 12pt Verdana }

,
Web- ,
.
, . ,
(. 2) , , .
CSS , , Web- . .

8. .

115

white-space , Web- . ,
, 2.
:
white-space: normal|pre|nowrap|pre-wrap|pre-line|inherit

white-space .
normal ,

. Web-
, .
Web- , 2.
pre ; , HTML-. Web . ,
<PRE> ( ).
nowrap ,

. Web- .
pre-wrap . Web , .
pre-line , -

. Web-
, .
whitespace, . 8.2.
8.2. white-space

pre

nowrap

pre-wrap

pre-line

normal

, <PRE> , :
PRE { white-space: pre-wrap }

116

II. Web-. CSS 3

word-wrap ,
. , Web- :
word-wrap: normal|break-word|inherit

.
normal Web-,

. Web-.
break-word Web-

. ,
, .
:
P ( word-wrap: break-word }

Web-
<P> (. . ).


, , , . .
.
vertical-align :
vertical-align: baseline|sub|super|top|text-top|middle|bottom|
text-bottom|< >|inherit

:
baseline

( ).
, .
sub

.
super -

.
top -

.
text-top -

.
middle -

.
bottom -

8. .

117

text-bottom

.
, , , :
STRONG { vertical-align: super;
font-size: smaller }

<STRONG> , , .
<STRONG>.
,
:
<P> : <IMG STYLE="vertical-align: text-bottom"
SRC="picture.png">.</P>

HTML- . . , .
,
vertical-align.
, .
Web- !..


CSS 3 . Web-.
text-shadow:
text-shadow: none | <> < >
< > [< >]

none ( ) .

RGB- .

, CSS (. . 8.1). , , .
; .
, .

, CSS. ,

118

II. Web-. CSS 3

, . ; .
,
CSS. , ;
.
:

H1 { text-shadow: black 1mm 1mm 1px }

( <H1>) ,
1 1 .


, . ( ), , ,
Web-. Web- .
!
, Web-, . Web- .

background-color :
background-color: transparent|<>|inherit

RGB- . transparent
; Web- "" .
Web- , Web-
Web-.
:
BODY { color: white;
background-color: black }

Web- .
background-image
( ):
background-image: none|url(<- >);

, - : , url:
TABLE.bgr { background-image: url("/table_background.png") }

none .
,
background-color. , "-

8. .

119

" ( GIF PNG),


"" .
:
TABLE.yellow { background-color: yellow;
background-image: url("/yellow_background.png") }

, . , , Web-.
, Web- ( Web), , Web- , "" .
background-repeat:
background-repeat: no-repeat|repeat|repeat-x|repeat-y|inherit

.
no-repeat ;

Web- .
repeat

( ).
repeat-x .
repeat-y .

background-position
Web-, :
background-position: < > [< >] |
inherit;

< >|left|center|right


Web- CSS (. . 8.1). :
left Web ( );

center ;
right .

:
< >|top|center|bottom


Web- CSS .

II. Web-. CSS 3

120

:
top Web-

( );
center ;
bottom .

- Web-
,
center.
:
TABLE.bgr ( background-position: 1cm top }

1 Web- .
, Web :
TABLE.bgr ( background-position: right }

Web- Web-, ( ). CSS


Web .
background-attachment:
background-attachment: scroll|fixed;

scroll Web- Web- ( ). fixed


, .

, ,
Web-. Web-
.

CSS. Web-, . ...

.
,
Web-: , . , ( <P>),
( <STRONG> <EM>). .
, - , ? , -

8. .

121

,
<STRONG>. CSS ?
CSS . HTML.
Web- , ,
. .
Web-, - .
(, , , .),
. Web- Web-.
. -,
Web- ;

. -,
Web-; ,
. ( Web- III.)
.
10, Web-.
.
,
Web-. ,
, , , .
<SPAN>. , ,
:
<P><SPAN></SPAN> CSS.</P>

.
. - ( 8.1).
8.1
.bolded { font-weight: bold }
. . .
<P><SPAN CLASS="bolded"></SPAN>
CSS.</P>

"" .
, Web- . ,
.

122

II. Web-. CSS 3

Web-, 1
, .
Web-.
, Web-, main.css. Web-.
Web-, .
7, <LINK>.
Web- index.htm :
<LINK REL="stylesheet" HREF="main.css" TYPE="text/css">

Web-, tags, :
<LINK REL="stylesheet" HREF="../main.css" TYPE="text/css">

HTML- Web- .
<LINK>, Web-, -. Web-,
Web- Web-. .
. , . Web , "" .
Web 2.0, 1,
Web-.
, , () . , , .
, Web- .
Verdana. -

, Arial.
Arial. -

, .
12 .
20 .
18 .
12 .
.
10 . -

.
10 . -

.
.

8. .

123

10 .

. .
.
#3B4043 (- , ).
#F8F8F8 (- , ).


Web-, - http://www.tarusa.ru/~golovan
http://avy.ru. , " " "-";
.

CSS- ( 8.2).
8.2
BODY

P
H1, H2, H6

{ color: #3B4043;
background-color: #F8F8F8;
font-family: Verdana, Arial, sans-serif }
{ font-size: 12pt }
{ font-weight: normal;
font-family: Arial, sans-serif }
{ font-size: 20pt }
{ font-size: 18pt }
{ font-size: 12pt }
{ font-size: 10pt }

H1
H2
H6
TABLE
BLOCKQUOTE P,
ADDRESS
{ font-size: 10pt;
font-style: italic }

. .
<BODY>. ,
Web-: (,
), . Web-
, , , , :
BODY

{ color: #3B4043;
background-color: #F8F8F8;
font-family: Verdana, Arial, sans-serif }

<P>.
. <BODY>, :
P

{ font-size: 12pt }

! ,
<H1>, <H2> <H6>:

124

II. Web-. CSS 3

H1, H2, H6

{ font-weight: normal;
font-family: Arial, sans-serif }

, : "" (, ""). , <BODY>,


. , , , ,
<BODY>.
<H1>, <H2> <H6>,
. ,
.
:
H1
H2
H6

{ font-size: 20pt }
{ font-size: 18pt }
{ font-size: 12pt }

<TABLE>,
<BODY>. ,
( , ):
TABLE

{ font-size: 10pt }

:
BLOCKQUOTE P <ADDRESS>:
BLOCKQUOTE P,
ADDRESS

{ font-size: 10pt;
font-style: italic }

. <P>,
<BLOCKQUOTE>, BLOCKQUOTE P.
<BODY>.
, . ,
, . , "" .
Web- Web- index.htm.
! Web-
CSS! HTML- ( <LINK>, ). , Web 2.0, !
?.. ,
. , 1 .

8. .

125

? CSS-,
<H1>, <H2> <H6>. :
H1, H2, H6

{ font-weight: normal;
font-family: Arial, sans-serif }

:
H1, H2, H6

{ font-weight: normal;
font-family: Arial, sans-serif;
letter-spacing: 1mm }

, ! , UTF-8 (. 1), Web- index.htm, Web, <F5>. , !


, CSS 3 .
, , CSS-, <H1>, <H2> <H6> ( 8.3).
8.3
H1, H2, H6

{ font-weight: normal;
font-family: Arial, sans-serif;
letter-spacing: 1mm;
text-shadow: #CDD9DB 1px 1px }

#CDD9DB (-) , 1 . , .
Web-. . ...
. .

?
,
. Web-.

.

,

, (, , , .) Web-. Web- , .
Web- Web- .
,
. , , , . , , 2 .
, ( ).
, Web- (. .
) .
(. III).


,
. .
.
text-align :
text-align: left|right|center|justify|inherit

left ( ;
Web-), right ( ), center ( ) justify (
).
:
P { text-align: justify }
H1 { text-align: center }

9. ,

127

text-indent " ":


text-indent: < " ">

( )
. " " . ,
text-indent inherit.
:
P { text-indent: 5mm }

" ".


. , - , , , ( ), , , Web. , , , , .
list-style-type
:
list-style-type: disc|circle|square|decimal|decimal-leading-zero|
lower-roman|upper-roman|lower-greek|lower-alpha|lower-latin|
upper-alpha|upper-latin|armenian|georgian|none|inherit

, . , .
disc (

).
circle .
square . , -

Web-.
decimal ( -

).
decimal-leading-zero 01 99

.
lower-roman .
upper-roman .
lower-greek .
lower-alpha lower-latin .
upper-alpha upper-latin .
armenian .

II. Web-. CSS 3

128

georgian .
none ( -).

list-style-type,
CSS 3. CSS 2 ,
Web-.
Web- https://developer.mozilla.org/en/CSS/list-style-type.

list-style-type ,
. , . .
:
UL { list-style-type: square }

9.1
.
9.1
.squared { list-style-type: square }
. . .
<UL>
<LI> </LI>
<LI CLASS="squared"> ( )</LI>
<LI> </LI>
</UL>

list-style-image
- ( ).
list-style-type, , :
list-style-image: none|<- >|inherit

- ,
- (. 8):
UL { list-style-image: url(/markers/dot.gif) }

none , .
.
list-style-image ,
.
list-style-position
:
list-style-position: inside|outside|inherit

9. ,

129

:
inside , -

;
outside (

).
, , ,
, . ,
CSS, , ...
:
OL { list-style-position: inside }


,
Web-, . . , . Web-.
visibility ,
Web-:
visibility: visible|hidden|collapse|inherit

:
visible Web- ( );
hidden Web-,

. , Web-
"";
collapse , ,

( 13).
Web-, (. . ""). Web- , Web .
Web-.
visibility , Web.
( Web- III).
display .
Web-: , .
:
display: none|inline|block|inline-block|list-item|run-in|table|
inline-table|table-caption|table-column|table-column-group|

130

II. Web-. CSS 3

table-header-group|table-row-group|table-footer-group|table-row|
table-cell|inherit

.
none Web-,

HTML-.
inline .
block .
inline-block , "" -

.
list-item .
run-in .

, (
),
.
table .
inline-table , . (-

, - ! ...)
table-caption .
table-column ( -

13).
table-column-group (

13).
table-header-group .
table-row-group .
table-footer-group .
table-row .
table-cell .
!
display Web-
.

display
Web-. , block, (, 4, ) inline.
,
:
IMG.block { display: block }

9. ,

131

, :
LI { display: inline }

:
.hidden { display: none }

Web- .
, Web- ,
.
none, block inline display. ,
.

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

.
. -

.
.
.
.
.
, ,
main.css, :
P

{ font-size: 12pt;
text-align: justify }

<P>,
, .
, Web- ( ) .
CSS-:
ADDRESS
UL

{ text-align: right }
{ list-style-type: circle }

<ADDRESS> <UL>. , 8, -

II. Web-. CSS 3

132

( ).
.
Web- index.htm Web-.
, Web- .
. , . , !..


Web- .
.
6 ,
, , ,
.
, , .
.
. HTML-,
.
6, , , Web- index.htm,
HTML. Web- , Web- Web- ,
, .
; .
9.2 HTML- Web- index.htm, .
9.2
<UL>
<LI><A
<LI><A
<LI><A
<LI><A
</UL>

HREF="index.htm">HTML</A></LI>
HREF="css_index.htm">CSS</A></LI>
HREF="samples_index.htm"></A></LI>
HREF="about.htm"> </A></LI>

Web-
. , , . ?
.

9. ,

133

.
Arial. .
14 . .
. -

.
. .

Web-
,
(. 7). navbar. CSS- 9.3.
9.3
#navbar

{ font-family: Arial, sans-serif;


font-size: 14pt;
text-transform: uppercase;
list-style-type: none }

main.css.
,
ID 7. :
<UL ID="navbar">
. . .

Web-
Web-. , .


CSS , Web-.
.
cursor
Web-. Web-, , :
cursor: auto|default|none|context-menu|help|pointer|progress|wait|cell|
crosshair|text|vertical-text|alias|copy|move|no-drop|not-allowed|
e-resize|n-resize|ne-resize|nw-resize|s-resize|se-resize|sw-resize|
w-resize|ew-resize|ns-resize|nesw-resize|nwse-resize|col-resize|
row-resize|all-scroll|inherit

, cursor ,
. .

134

II. Web-. CSS 3

auto Web- .

.
default , .
none .
help .
pointer " ". -

.
progress . ,

- .
wait . , Web- -

.
text .

.
cursor

Web-
https://developer.mozilla.org/en/CSS/cursor. ,
.
" " , :
#navbar LI { cursor: pointer }

?
, , Web-. , Web-.
""
8 . , Web- CSS
. , .
Web-.

10

Web-
CSS, . , .
Web-. Web-, , . .
Web- . , "" 8. Web-.
, , (
). Web-.
CSS . , , ...


, :
, , , , , , - .
, .
<DIV>, HTML-, ( 10.110.3).
10.1 .

136

II. Web-. CSS 3

10.1
<DIV>
<H3> </H3>
<P> .<P>
<P> .<P>
</DIV>

10.2 , .
10.2
<DIV>
<TABLE>
<CAPTION> </CAPTION>
<TR>
<TH> </TH>
<TH> </TH>
</TR>
. . .
</TABLE>
</DIV>

, 10.3,
"" .
10.3
<DIV STYLE="text-align: center">
<VIDEO SRC="film.ogg" CONTROLS>
</VIDEO>
<P> , .</P>
</DIV>

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

Web-
Web- .
Web-. .

10. Web-

137

Web-
Web-: ,
. .
Web-
.
, , Web-.
Web- : ,
, , , . Web- Web-. Web-, , Web- index.htm Web- , , .
Web-
HTML-. , Web- ,
, . , Web- , .
Web- . -, Web- . -,
Web-
. -...
.
, Web-,
: Web-, , (, Web-, ,
Web- ) . ,
,
.
Web-, Web-, Web-, . Web- ( ).
Web-, , HTML- Web-.
. ? HTML- Web , Web-
!
HTML- Web-, , . , .
, , Web .
Web- , ? , Web- ...

138

II. Web-. CSS 3

, , "" HTML
. Web-, Web-, -
. , Web- .
Web- Web-
. Web, -
. Web- . ,
Web-.
Web- . Web-.
, - .
. -, W3C, Web- -, , , , , ,
. -, Web; .
Web- . Web- HTML,
Web-, , . Web- ; Web-.
Web-:
HTML, , ,
Web- Web.
HTML ,
. Web, , .

CSS, , , , .
Web- :
"" Web-, Web-.
Web- Web- , ,
, , .

HTML-.

10. Web-

139

Web-

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

Web- . "" Internet Explorer, , , . .

, Web-, ,
. , , ...

Web-
Web-
Web- ,
. Web-, , . , .
CSS. ( ), .
, , ( 11).
, Web- ?
Web- , .
Web-
Web-. Web- : , ,
, - . CSS
.
"" Web- Web-. -

Web- Web-, ,
. . . 18.
"" Web-. -

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

, . ,
<DIV>.

140

II. Web-. CSS 3

Web- Web-. Web-

,
Web- .
, Web- ? ?
, ...
Web-
Web-. Web- , .
, ,
, , , ,
Web- . ,
, Web-.
, Web- . . Web- Web- "", , .

Web-, 3
Web-
.
.
Web- ( )
. 10.1. , Web-,
, .
.
Web-


. 10.1. Web-

Web- index.htm. HTML- Web-: Web-, , -

10. Web-

141

. .
. 10.1 , Web- ,
. HTML-,
.
, Web-.
Web- ,
. :
cheader Web-;
cnav ;
cmain ;
ccopyright .

"c" "container" . , .
ID. .
10.4 HTML- Web- index.htm
.
10.4
<DIV ID="cheader">
<H1> HTML CSS</H1>
</DIV>
<DIV ID="cnavbar">
<UL ID="navbar">
<LI><A HREF="index.htm">HTML</A></LI>
<LI><A HREF="css_index.htm">CSS</A></LI>
<LI><A HREF="samples_index.htm"></A></LI>
<LI><A HREF="about.htm"> </A></LI>
</UL>
</DIV>
<DIV ID="cmain">
<P> Web- , Web-!
-,
Web-. ,
<DFN>HTML</DFN> <DFN>CSS</DFN>.</P>
<HR>
. . .
<H2> HTML</H2>
<P><CODE>!DOCTYPE</CODE>,
<CODE><A HREF="tags/t_audio.htm">AUDIO</A></CODE>,

142

II. Web-. CSS 3

<CODE>BODY</CODE>, <CODE>EM</CODE>, <CODE>HEAD</CODE>,


<CODE>HTML</CODE>, <CODE><A HREF="tags/t_img.htm">IMG</A></CODE>,
<CODE>META</CODE>, <CODE>P</CODE>, <CODE>STRONG</CODE>,
<CODE><A HREF="tags/t_title.htm">TITLE</A></CODE>,
<CODE><A HREF="tags/t_video.htm">VIDEO</A></CODE></P>
</DIV>
<DIV ID="ccopyright">
<ADDRESS> .<BR>&#0169;
<A HREF="mailto:user@mailserver.ru"></A>, 2010 .</ADDRESS>
</DIV>

Web- index.htm Web-. - , ? .

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


. , , .
width height , ,
Web-:
width: auto|<>|inherit
height: auto|<>|inherit

, CSS . :
#cnavbar { width: 100px }


.
Web-:
#cheader { height: 10% }

auto Web-
( ). Web- Web-, , .

10. Web-

143

- Web- , ,
. , .
min-width min-height Web-:
min-width: <>
min-height: <>

, .
:
TABLE { min-width: 500px;
min-height: 300px }

max-width max-height , , Web-:


max-width: <>
max-height: <>

, :
TABLE { max-width: 90%;
max-height: 60% }

.
( )
Web- .
Web- ,
, , HTML-.
, Web-.

( , ,
Web-). , .
float ,
Web-:
float: left|right|none|inherit

:
left Web-

, ;

144

II. Web-. CSS 3

right Web-

, ;
none Web-,

.
:
TABLE.left-aligned { float: left }


, .
float
?
, HTML-,
. !
, Web-. .
float . .
Web-, , - , .
float none, . CSS ,

, .
clear:
clear: left|right|both|none|inherit

, :
left Web- ,

float left;
right Web- ,

float right;
both Web- ,

float left right;


none . , -

, , .
:
#ccopyright { clear: both }

ccopyright ( ,
) ,
.

10. Web-

145

Web-,
4
,
Web-. .
, .
Web- (cheader):
100% ( Web-).

(cnavbar):
30% ( Web-);
240 ( -

; );
(. . ).

(cmain):
70% ( Web-);
.

(ccopyright):
100% ( Web-);
,

.
, . Web-
,
.
CSS-,
( 10.5).
10.5
#cheader
#cnavbar

#cmain
#ccopyright

{ width: 100% }
{ width: 30%;
min-width: 240px;
float: left }
{ width: 70%;
float: left }
{ width: 100%;
clear: both }

main.css,
. Web- index.htm Web- , (. 10.2).

146

II. Web-. CSS 3

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

. 10.2. Web- index.htm, Web-,


Web-

.

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

10. Web-

147

. ,
.
overflow :
overflow: visible|hidden|scroll|auto|inherit

:
visible , -

( );
hidden .

;
scroll ,

. , ;
auto ,

.
:
#cmain { overflow: auto }

cmain ,
.
. overflow
, .
, ,
overflow visible:
#cmain { height: 500px;
overflow: auto }

cmain .
overflow
cmain ,
visible:
#cmain { height: 50%;
overflow: auto }

overflow-x overflow-y
, , .
, overflow:
#cnavbar { width: 270px;
overflow-x: hidden }

, Web ! -

148

II. Web-. CSS 3

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

Web-, 5

Web-. , cmain.
? -, , , . -,
.
cmain cnavbar.

.
cnavbar cmain.
cnavbar:
240 ;
620 ;
.

cmain:
780 ;
620 ;
;
.

.
, Web- , Web- .
, .
, cnavbar,
cmain. , ,
,
( 11).
CSS-. 10.6
main.css, , cnavbar cmain.

10. Web-

149

10.6
#cnavbar

#cmain

{ width: 240px;
height: 620px;
float: left }
{ width: 780px;
height: 620px;
float: left;
overflow: auto }

, , . , . 10.3.

. 10.3. Web- index.htm, ,


Web-

Web- "",
. Web-
?..

150

II. Web-. CSS 3

Web-. Web- ...


III , Web- . . Web-.

?
: , , Web- , . "" !
, , Web-. ,
. Web- .

11

,
Web-:
,
CSS. Web-.
- ... - , Web . , ?
, ! Web-.


CSS .
1. Web- . Web, .
2. Web- Web- .
Web-,
.
,
. , , ,
.

.
.

padding-left, padding-top, padding-right padding-bottom , , , ,


Web-:

152

II. Web-. CSS 3

padding-left|padding-top|padding-right|padding-bottom:
<>|auto|inherit


. auto ,
.
11.1 ,
.
11.1
TD, TH { padding-left: 2px;
padding-top: 2px;
padding-right: 2px;
padding-bottom: 2px }

, ,
:
.indented { padding-left: 2cm;
padding-right: 2cm }

, .
padding
Web-:
padding: < 1> [< 2> [< 3> [< 4>]]]

, -

Web-.
, ,
.
, , , .
, , , , .
:
TD, TH { padding: 2px }
.indented { padding: 0cm 2cm 0cm 2cm }

padding.
margin-left, margin-top, margin-right margin-bottom
, , , , :
margin-left|margin-top|margin-right|margin-bottom: <>|auto|inherit

. auto
, , .

11. ,

153

:
H1 { margin-top: 5mm }

5 .
:
UL { margin-left: -20px }

Web- "" . , Web- , ,


.
margin.
Web-:
margin: < 1> [< 2> [< 3> [< 4>]]]

, "" padding.
:
H1 { margin: 5mm 0mm }

margin-left, margin-top, marginright, margin-bottom margin (. .


) .
border-spacing:
border-spacing: < 1> [< 2>]

.
,
.
, ,
.
( <TABLE>):
TABLE { border-spacing: 1px }

, .
!
, , , Web-. , , Web-,
, , .
, Web- , , Web- , .
, 100%, ,
Web- ,
Web-, . , Web-,
. ...

154

II. Web-. CSS 3


CSS ,
Web-.
border-left-width, border-top-width, border-right-width borderbottom-width , , , ,
:
border-left-width|border-top-width|border-right-width|
border-bottom-width: thin|medium|thick|<>|inherit

, : thin (), medium () thick ().


Web-. Web, .
11.2 , .
11.2
TD, TH { border-left-width: thin;
border-top-width: thin;
border-right-width: thin;
border-bottom-width: thin }

,
5 :
H1 { border-bottom-width: 5px }

.
border-width
:
border-width: < 1> [< 2> [< 3> [< 4>]]]

, .
, , -

.
, ,

, .
, , -

, , .
:
TD, TH { border-width: thin }

11. ,

155

border-left-color, border-top-color, border-right-color borderbottom-color , , , ,


:
border-left-color|border-top-color|border-right-color|
border-bottom-color: transparent|<>|inherit

transparent "" , "" .


!

.

:
H1 { border-bottom-width: 5px
border-bottom-color: red }

border-color :
border-color: < 1> [< 2> [< 3> [< 4>]]]

, border-width:
TD, TH { border-width: thin;
border-color: black }

border-left-style, border-top-style, border-right-style borderbottom-style , , ,


, , :
border-left-style|border-top-style|border-right-style|
border-bottom-style: none|hidden|dotted|dashed|solid|double|groove|
ridge|inset|outset|inherit

:
none hidden ( );
dotted ;
dashed ;
solid ;
double ;
groove "" ;
ridge "" ;
inset "";
outset "".

:
H1 { border-bottom-width: 5px
border-bottom-color: red
border-bottom-style: double }

156

II. Web-. CSS 3

border-style :
border-style: < 1> [< 2> [< 3> [< 4>]]]

, border-width bordercolor.
:
TD, TH { border-width: thin;
border-color: black;
border-style: dotted }

border-left, border-top, border-right border-bottom


, , , , :
border-left|border-top|border-right|border-bottom:
<> <> <> | inherit

:
H1 { border-bottom: 5px double red }

"" border
:
border: <> <> <> | inherit
TD, TH { border: thin dotted black }

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

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

Web-
Web-.

Web- (cheader)

20 . Web-, .

11. ,

157

(cnavbar) -

(cmain) 10 .
(cmain) 5 .
(cmain)
10 . cnavbar cmain.

(ccopyright) 20 . Web-.
.
.
.
cheader .
cmain .
ccopyright .
. #B1BEC6
(-).
11.3 CSS-
main.css, .
11.3
BODY

. . .
#cheader

#cnavbar

#cmain

#ccopyright

{ color: #3B4043;
background-color: #F8F8F8;
font-family: Verdana, Arial, sans-serif;
margin: 0px }
{ width: 1010px;
padding: 0 20px;
border-bottom: thin dotted #B1BEC6 }
{ width: 250px;
height: 570px;
float: left;
margin-right: 10px }
{ width: 760px;
height: 570px;
float: left;
overflow: auto;
padding: 5px;
border-left: thin dotted #B1BEC6 }
{ width: 1010px;
clear: both;
padding: 10px 20px 0px 20px;
border-top: thin dotted #B1BEC6 }

158

II. Web-. CSS 3

.
Web-
Web-, margin.
<BODY> 0 :
BODY

{ color: #3B4043;
background-color: #F8F8F8;
font-family: Verdana, Arial, sans-serif;
margin: 0px }

cheader, , , 20 ,
. :
#cheader

{ width: 1010px;
padding: 0 20px;
border-bottom: thin dotted #B1BEC6 }

, .
: Web ,
. ,
Web-, , .
,
, Web- .
cnavbar 10
cnavbar cmain:
#cnavbar

{ width: 250px;
height: 570px;
float: left;
margin-right: 10px }

cmain
cmain cnavbar:
#cmain

{ width: 760px;
height: 570px;
float: left;
overflow: auto;
padding: 5px;
border-left: thin dotted #B1BEC6 }

ccopyright 20 ,
10 . , ,
ccopyright "":
#ccopyright

{ width: 1010px;
clear: both;

11. ,

159

padding: 10px 20px 0px 20px;


border-top: thin dotted #B1BEC6 }

. main.css Web- index.htm


Web-. , . .
.
.
.
cnavbar, !..
, "", ,
.
, ,
.
:
, , 30 .

, .
10 . -

.
, , #B1BEC6.
: 5 ,

10 . .
CSS- main.css ( 11.4).
11.4
#navbar

. . .
#navbar LI

{ font-family: Arial, sans-serif;


font-size: 14pt;
text-transform: uppercase;
list-style-type: none;
margin-left: -30px }
{ padding: 5px 10px;
margin: 10px 0px;
border: thin solid #B1BEC6 }

.
navbar, , , , 30 .
, :
#navbar

{ font-family: Arial, sans-serif;


font-size: 14pt;

160

II. Web-. CSS 3


text-transform: uppercase;
list-style-type: none;
margin-left: -30px }

, , :
#navbar LI

{ padding: 5px 10px;


margin: 10px 0px;
border: thin solid #B1BEC6 }

Web-
Web- index.htm, <F5>. ,
(. 11.1)?

. 11.1.
Web- index.htm

CSS HTML. Web , Web-.


, . - ... Web- , , Web- Web-. ?
, ,
. !
. , .
, Web-, HTML, , Web- index.htm
( HTML).
, "HTML". , Web-, CSS .
. .
, Web- , . HTML, 2, .
Web- index.htm HTML-, ( 11.5).

11. ,

161

11.5
<UL ID="navbar">
<LI><A HREF="index.htm">HTML</A></LI>
<LI><A HREF="css_index.htm">CSS</A></LI>
<LI><A HREF="samples_index.htm"></A></LI>
<LI><A HREF="about.htm"> </A></LI>
</UL>

, . 11.6 .
11.6
<UL ID="navbar">
<LI><A HREF="index.htm">HTML</A>
<UL>
</UL>
</LI>
<LI><A HREF="css_index.htm">CSS</A></LI>
<LI><A HREF="samples_index.htm"></A></LI>
<LI><A HREF="about.htm"> </A></LI>
</UL>

<UL>, ,
"" </LI>. "" .
HTML-, Web- . Web-,
cmain. , , Web- ,
( 11.7).
11.7
<UL ID="navbar">
<LI><A HREF="index.htm">HTML</A>
<UL>
<LI><CODE>!DOCTYPE</CODE></LI>
<LI><CODE><A HREF="tags/t_audio.htm">AUDIO</A></CODE></LI>
<LI><CODE>BODY</CODE></LI>
. . .
<LI><CODE><A HREF="tags/t_video.htm">VIDEO</A></CODE></LI>
</UL>
</LI>
<LI><A HREF="css_index.htm">CSS</A></LI>

162

II. Web-. CSS 3

<LI><A HREF="samples_index.htm"></A></LI>
<LI><A HREF="about.htm"> </A></LI>
</UL>

cmain , , Web- , .
.
Web- index.htm Web-. "HTML" "" , , .
. , , .
,
, cnavbar.
,
( 11.8).
11.8
#cnavbar

{ width: 250px;
height: 570px;
float: left;
overflow: auto;
margin-right: 10px }

.
.
, ,
30 .
.
10 .
"" , .
10 .
"",
.
.
.
, main.css
CSS- 11.9.
11.9
#navbar LI UL

{ list-style-type: none;
margin-left: -20px;
margin-top: 10px }

11. ,

163

#navbar LI UL LI { font-size: 12pt;


padding: 0px;
margin: 0px;
border-style: none }

.
. .
.
, ,
, . , , ""
, .
.
main.css
Web- Web- index.htm,
<F5>. ,
. 11.2.
, ! - , , .
HTML Web-.
CSS .

. 11.2.
Web- index.htm



Web-, HTML CSS.
CSS 3 .
.
CSS 3 , Web-.
: , .
, CSS, -

Web-. , , .

II. Web-. CSS 3

164

CSS 3 . .
outline-width :
outline-width: thin|medium|thick|<>|inherit

, borderwidth.
:
DFN { outline-width: thin }

<DFN> .
outline-color :
outline-color: <>|inherit

!
.

:
DFN { outline-width: thin;
outline-color: black }

<DFN> .
outline-style , :
outline-style: none|dotted|dashed|solid|double|groove|ridge|inset|
outset|inherit

, border-style.
:
DFN { outline-width: thin;
outline-color: black;
outline-style: dotted }

outline :
outline: <> <> <> | inherit
DFN { outline: thin dotted black }

, ! main.css :
DFN

{ outline: thin dotted #B1BEC6 }

(. . <DFN>) Web - .

11. ,

165

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

12


Web- ,
, Web . - , Web- Web-. "" .
CSS . ,
.


text-align, 9:
TD, TH { text-align: center }

( <CAPTION>):
CAPTION { text-align: left }


vertical-align:
vertical-align: baseline|sub|super|top|text-top|middle|bottom|
text-bottom|< >|inherit

Web- 8,
-.
top ( -

).
middle .
bottom .

12.

167

, Web- (. 8):
TD, TH { vertical-align: middle }


,
11.

padding-left, padding-top, padding-right, padding-bottom
padding.

border-spacing.
,
11 ( 12.1).
12.1
TABLE

{ align: center;
border: medium solid black;
border-spacing: 1px }
TD, TH { border: thin dotted black;
padding: 2px }

12.1
, ,
, .
, Web-
. , - (. 12.1).

. 12.1. Web-

.
(. 12.2).

II. Web-. CSS 3

168

. 12.2. , ,

border-collapse Web-,
:
border-collapse: collapse|separate|inherit

separate


(. . 12.1). .
collapse , (. . 12.2).
( <TABLE>).
:
TABLE { border-collapse: collapse }


width height, 10.
,
:
TABLE { width: 100%;
height: 300px }

, width -

, ( 12.2).
12.2
<TABLE>
<TR>
<TH> </TH>
<TH STYLE="width: 40px"> 40 </TH>
<TH> </TH>
</TR>
. . .
</TABLE>

, height -

( 12.3).

12.

169

12.3
<TABLE>
. . .
<TR>
<TD STYLE="height: 30px"> 30 </TD>
. . .
</TR>
. . .
</TABLE>

, ,
Web-. , Web- .
, CSS , Web-.
table-layout , Web- , :
table-layout: auto|fixed|inherit

auto Web- ,

. .
fixed .
, ,
overflow, overflow-x overflow-y
(. 10).
( <TABLE>).
:
TABLE { table-layout: fixed;
overflow: auto }


.
caption-side :
caption-side: top|bottom|inherit

top ( ).
bottom .

( <TABLE>).
:
TABLE { caption-side: bottom }

170

II. Web-. CSS 3

empty-cells , Web-
( ) :
empty-cells: show|hide|inherit

show . -

, , ,
.
hide .
Web-, , , empty-cells.
empty-cells ( <TABLE>).
:
TABLE { empty-cells: hide }

Web-, 7
, , , . ...
HTML. .
, , .
10 .
"".
, , #B1BEC6.
, . .
2 .
, , #B1BEC6.
.
CSS-. 12.4 main.css.
12.4
TABLE

. . .
TD, TH
CAPTION

{ font-size: 10pt;
margin: 10px 0px;
border: thin solid #B1BEC6;
border-collapse: collapse }
{ padding: 2px;
border: thin dotted #B1BEC6 }
{ text-align: left }

12.

171

<TABLE> <TD>, <TH> <CAPTION>. , .


main.css Web- index.htm Web. . .

?
,
, , . .
CSS . , Web- , ,
, CSS 3.
...

13


II , , CSS.
; , ,
. , ,
Web-, , CSS.
, , . -,
, 7 ,
, (, ). ,
, ?
. .
,
Web- , , . , , ,
(
), ( ) .
, .
,
.

,
Web-
.
+ Web-, .
:
< 1> + < 2> { <> }

13.

1.

173

2,

13.1
H6 + PRE { font-size: smaller }
. . .
<H6> </H6>
<PRE> .</PRE>
<P> .</P>
<H6> </H6>
<P> .</P>
<PRE> .</PRE>

, 13.1, , . . .
~ () Web-, , , .
:
< 1> ~ < 2> { <> }

2

2, 1.
1 .

13.2
H6 + PRE { font-size: smaller }
. . .
<H6> </H6>
<PRE> .</PRE>
<P> .</P>
<H6> </H6>
<P> .</P>
<PRE> .</PRE>

13.2 :
, , , .
> Web-, :
< 1> > < 2> { <> }

2, 1.

174

II. Web-. CSS 3

13.3
BLOCKQUOTE + P { font-style: italic }
. . .
<BLOCKQUOTE>
<P> .</P>
<DIV>
<P> .</P>
</DIV>
</BLOCKQUOTE>

13.3 , . ,
, .
<> Web-, , :
< 1> < 2> { <> }

2, 1.
2 , 1,
.

13.4
BLOCKQUOTE P { font-style: italic }
. . .
<BLOCKQUOTE>
<P> .</P>
<DIV>
<P> .</P>
</DIV>
</BLOCKQUOTE>

13.4 : , ,
.
, 13.4, . , 7! ,
. ...


,
,
.

13.

175

, .
.

< >[< >] { <> }

, .
:
TD[ROWSPAN] { background-color: grey }

,
ROWSPAN, . . , .

< >[< >=<>] { <> }

,
.
:
TD[ROWSPAN=2] { background-color: grey }

,
ROWSPAN 2, . . , .

< >[< >~=
< , >] { <> }

< >[< >|=


< , >] { <> }

,
, .
:
TD[ROWSPAN~=2 3] { background-color: grey }
TD[ROWSPAN|=2,3] { border: thin dotted black }

,
ROWSPAN 2 3, . . ,
.

< >[< >^=<>] { <> }

,
, .

176

II. Web-. CSS 3

:
IMG[SRC^=http://www.pictures.ru] { margin: 5px }

, SRC , "http://www.pictures.ru", . .
, Web- http://www.pictures.ru.

< >[< >$=<>] { <> }

,
, .
:
IMG[SRC$=gif] { margin: 10px }

,
SRC , "gif", . .
GIF.

< >[< >*=<>] { <> }

,
, .
:
IMG[SRC*=/picts/] { margin: 10px }

, SRC , "/picts/", . . , picts Web-, .

,
Web-.
.
,
. :
< ><> { <> }

::first-letter
Web-, , , , .
:
P::first-letter { font-size: larger }

13.

177

::first-line
Web-:
P::first-line { text-transform: uppercase }

. Web- ( ) .
, . :
< ><> { <> }

, , . .



: ,
.
, CSS 3:
:link ;
:visited ;
:active , ;
:focus , (

. 6);
:hover , .

, . <A> , <A> ( 13.5).


13.5
A:link
A:visited
A:active
A:focus
A:hover

{
{
{
{
{

text-decoration:
text-decoration:
text-decoration:
text-decoration:
text-decoration:

none }
overline }
underline }
underline }
underline }

178

II. Web-. CSS 3

13.5 <A>.
Web-.
13.6
A.special:link
A.special:visited
A.special:active
A.special:focus
A.special:hover

{
{
{
{
{

color:
color:
color:
color:
color:

darkred }
darkviolet }
red }
red }
red }

13.6 , <A> special.


, .
, :
A:visited:hover { text-decoration: underline }

,
.
, . , ...


Web-
.
:first-child :last-child Web, , , :
UL:first-child { font-weight: bold }

,
-, . . .
:
TD:last-child { color: green }


.
13.7 .
13.7
#cmain P:first-child { font-weight: bold }
. . .

13.

179

<DIV ID="cmain">
<P> .</P>
<BLOCKQUOTE>
<P> .</P>
</BLOCKQUOTE>
<BLOCKQUOTE>
<P> .</P>
<P> .</P>
</BLOCKQUOTE>
</DIV>

, 13.7, ,
. , ,
,
.
:
#cmain > P:first-child { font-weight: bold }

,
cmain. >, ,
, ,
.

CSS :first-of-type :last-of-type. , , :firstchild :last-child, . ,
CSS 3...

:only-of-type Web-,
,
, .
13.8 .
13.8
P:only-of-type { color: green }
. . .
<BLOCKQUOTE>
<P> .</P>
</BLOCKQUOTE>
<BLOCKQUOTE>
<P> .</P>
<ADDRESS> .</ADDRESS>
</BLOCKQUOTE>

180

II. Web-. CSS 3

<BLOCKQUOTE>
<P> .</P>
<P> .</P>
</BLOCKQUOTE>

13.8 ,
, . . , <P>. , , .
:nth-child Web-, ,
:
< >:nth-child(<a>n+<b>) { <> }

, , .
, Web-: a b. .
, , :nthchild.
Web- CSS- , , Web-, , ,
. Web- .
Web- . a .
Web- .
Web- n
, .
, .
:
TR:nth-child(2n+1) { text-align: center }

, .
Web- , .
Web- n 0. -

1. Web- .
Web- n 1. -

3. Web- .
Web- n 2. -

5. Web- . 2 , .

13.

181

.
:
TR:nth-child(2n+0) { text-align: center }

() .
, :
TR:nth-child(2n) { text-align: center }

.
, .
Web- b-
.
, :
TR:nth-child(0n+2) { text-align: center }

Web- .
:
TR:nth-child(2) { text-align: center }

Web- .

odd even. ,
:
TR:nth-child(odd) { background-color: grey }
TR:nth-child(even) { background-color: yellow }

, .
:nth-last-child
:nth-child , , .
:
TR:nth-last-child(1) { text-align: center }

.
:
#cmain P:nth-last-child(2) { font-weight: bold }

( ) cmain.

CSS :nth-of-type :nth-last-of-type. , , :nthchild :nth-last-child. , , -.

182

II. Web-. CSS 3

, , :empty. , .
:
P:empty { display: none }

( ) .

:not *
:not Web, .
:
< >:not(< >) { <> }

Web-,
.
:
DIV:not(#cmain) { background-color: yellow }


<DIV>, cmain.
,
cmain.
, ,
:
TR:not(:nth-child(1)) { background-color: grey }

* ("") Web-.
:
#cmain > *:first-child { border-bottom: medium solid black }

, cmain.

Web-,
8
, ...
. .
Web- Web-, .
, #576C8C

(-).

13.

183

, , -

, #576C8C. .
, ,

, #A1AFBA ().
, #576C8C.
, , ,
#576C8C.

, , , #576C8C.
cmain 18 -

HTML . , .
, main.css
( 13.9).
13.9
A:link

{ color: #576C8C;
text-decoration: none }
A:visited
{ color: #A1AFBA;
text-decoration: none }
A:focus, A:hover,
A:active
{ color: #576C8C;
text-decoration: underline }

13.9 , . .
13.10
#navbar A:link,
#navbar A:visited { color: #576C8C;
text-decoration: none }
#navbar A:focus,
#navbar A:hover,
#navbar A:active { color: #576C8C;
text-decoration: underline }

13.10 . , , navbar, , .

184

II. Web-. CSS 3

, cmain
(. . Web-):
#cmain > P:first-child:first-letter { font-size: 18pt;
font-wight: bold }

, , . .
#cmain > P cmain.
#cmain > P:first-child ,

( ).
#cmain > P:first-child:first-letter , ,

. .
, cmain. , :
#cmain P:first-child:first-letter { font-size: 18pt;
font-weight: bold }

,
.
.
,
:
.table-html-versions TD:first-child,
.table-html-versions TD:nth-child(2) { text-align: center }

, , table-html-versions.
,
<TABLE>:
<TABLE CLASS="table-html-versions">
<CAPTION> HTML:</CAPTION>
. . .
</TABLE>

. main.css, Web- index.htm, Web- index.htm


Web-. , ?
Web- .

?
, II CSS . , , .

13.

185

Web- CSS, , . ,
Web-: ,
, , , , . Web-
.
III Web-.
Web-, JavaScript
Ext Core, .
!

186

II. Web-. CSS 3

III

Web-.
Web-
14.

Web-.
JavaScript

15.

Ext Core Web-

16.

Web-

14

Web-.
JavaScript
Web- : , .
1. I,
II. .
, , Web- . , ,
,
. Web- , ,
, Web- Web- .
Web- , HTML- Web- , ,
. JavaScript. Web-
JavaScript- ,
Web-.
Web-,
JavaScript , Web- Web. ,
.

Web-
JavaScript , .
.

Web-
Web-, , .
Web- .

III. Web-. Web-

190

, HTML,
Web- 1.1.htm. . HTML, </BODY>, 14.1.
14.1
<SCRIPT>
var dNow = new Date();
var sNow = dNow.toString();
document.write(sNow);
</SCRIPT>

Web-. HTML- Web-.


Web- Web-.
, ""
.
Web- Web- !
,
<>.<>.<> ( 14.2).
14.2
<SCRIPT>
var dNow = new Date();
var sNow = dNow.getDate() + "." + dNow.getMonth() + "." +
dNow.getFullYear();
document.write(sNow);
</SCRIPT>

Web- Web-, <F5>.


.

Web-
- ,
Web- index.htm,
. , Web .
CSS- .
, #navbar LI #navbar LI UL LI
, 14.3.
14.3
#navbar LI

{ padding: 5px 10px;


margin: 10px 0px;

14. Web-. JavaScript

191

border: thin solid #B1BEC6;


cursor: pointer }
. . .
#navbar LI UL LI { font-size: 12pt;
padding: 2px;
margin: 0px 0px;
border: thin solid #F8F8F8;
cursor: pointer }

-, "" , , " ".


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

{ border-color: #3B4043 !important }

, . , , ,
, . ( . 7.)
, , "" , . "" ,
.
- http://www.extjs.com/products/
core/download.php?dl=extcore31
ext-core-< >.zip Ext Core,
Web-. ( 15.) , ext-core.js
Web-, Web- index.htm main.css. Ext Core .
!
- Ext Core
, Web- http://www.extjs.com/products/core/
download.php, (
"Download") .

Web- index.htm ( <HEAD>) :


<SCRIPT SRC="ext-core.js"></SCRIPT>

HTML- Web-,
</BODY>, :
<SCRIPT SRC="main.js"></SCRIPT>

192

III. Web-. Web-

Web- main.js
14.4.
14.4
Ext.onReady(function() {
var ceLinks = Ext.select("UL[id=navbar] LI");
ceLinks.on("mouseover", function(e, t) {
Ext.get(this).addClass("hovered");
});
ceLinks.on("mouseout", function(e, t) {
Ext.get(this).removeClass("hovered");
});
});

Web-. main.js.
, UTF-8 ( , 1).
, . Web- index.htm Web-. ,
.

Web-
Web-
, Web-, Web, Web-, .
, .
Web- HTML-
<SCRIPT>. , Web- , Web, , .
Web- <SCRIPT>,
Web- ( 14.5). , ,
Web-.
14.5
<SCRIPT>
var dNow = new Date();
var sNow = dNow.getDate() + "." + dNow.getMonth() + "." +
dNow.getFullYear();
document.write(sNow);
</SCRIPT>

14. Web-. JavaScript

193

Web- .
Web-, ,
"". Web-
Web 2.0, , ,
Web- . ,
( ; 7).
Web- Web-,
Web-. ( Web- .)
Web- ,
Web- HTML js.
Web- Web-, , <SCRIPT> :
<SCRIPT SRC="<- Web->"></SCRIPT>

<SCRIPT> ,
SRC, - Web-:
<SCRIPT SRC="main.js"></SCRIPT>

Web- Web 2.0.


, Web- Web-,
. Web-.
Web- Ext Core,
Web-. ( ,
), , . , JavaScript,
Ext Core, Web-.
. Web- HTML- Web-,
. , HTML-
.
. Web- -
Web-, HTML, . ,
, Web- . , , .

JavaScript
JavaScript. Web- .

194

III. Web-. Web-

JavaScript
Web-, :
x = 4;
y = 5;
z = x * y;

- . ,
JavaScript;
, Web-.
Web- . :
x = 4;

4. JavaScript , , , .
, 4 !
x. ?
, ! ,
,
- .
x.
, (=), . ! (, , Web-, - .) , Web. , = .
, (), , , 4 x. , .
JavaScript (;),
; Web.
:
y = 5;

y 5. .
:
z = x * y;

, - z. ? , x y. , JavaScript ( ) (*). .

14. Web-. JavaScript

195

Web- z 4 5 20.
, :
y = y1 * y2 + x1 * x2;

:
1. y1 y2.
2. x1 x2.
3. 1 2 (
+).
4. y.
2 x1 x2,
y1 y2 x1. , . ,
, ,
.
:
x = x + 3;

JavaScript, .
x 3,
x. Web- .

JavaScript
:
, Web-, , . , Web-
Web- - .
JavaScript , .
.
, .
( ) , , ,
, .
:
"JavaScript"
"1234567"
' .'

(
), . -

III. Web-. Web-

196

2 ,
.
, , , (. 14.1).
14.1. , JavaScript,

\f

\n

\r

\t

\"

\\

\x<>

Unicode

, ,
:
"\" \" "

( ) , ,
. , ;
( !).
:
13756
454.7873
0.5635

:
<>E<>.

, ( ):
5

1E-5 (10 )
23

8.546E23 (8,546 10 )

. (, 047
-012543624), 0x,
(, 0x35F). , JavaScript
.

14. Web-. JavaScript

197

: true false ""


"", true false. ( , .)
, , (
).
JavaScript . null
null . NaN NaN , (, ). undefined , , , ,
undefined.
!
undefined , null!

, JavaScript , .

- . .


, ,
. .
, ,
(_),
, . , pageAddress, _link,
userName , 678vasya .
JavaScript , . , pageaddress pageAddress .
JavaScript .


Web-
. var, :
var x;

III. Web-. Web-

198

- :
x = 1234;

Web-:
y = x * 2 + 10;

:
var x = 1234;

:
var x, y, textColor = "black";

, var . - , JavaScript .
var
.
, - Web-, Web-, Web-. .
!
, undefined.

. (, ,
.) JavaScript.

JavaScript .
.



. , JavaScript,
. 14.2.
14.2.

14. Web-. JavaScript

199
14.2 ()

++

( )

--

( )

: .
;
, . , . :
++r;

r , . :
s = ++r;

r, , s.
,
. , , . ,
, .
.

. :
l = r * 3.14;
f = e / 2;
x = x + t / 3;


+ . ,
:
s1 = "Java";
s2 = "Script";
s = s1 + s2;

s JavaScript.


= .
, :

200

III. Web-. Web-

a = 2;
b = c = 3;

3
b c.
JavaScript ,
:
a = a + b;
a += b;

. +=.
, JavaScript, . 14.3.
14.3.

a += b;

a = a + b;

a -= b;

a = a b;

a *= b;

a = a * b;

a /= b;

a = a / b;

a %= b;

a = a % b;

a <<= b;

a = a << b;

a >>= b;

a = a >> b;

a >>>= b;

a = a >>> b;

a &= b;

a = a & b;

a ^= b;

a = a ^ b;

a |= b;

a = a | b;



(, , ) .
, true, false.
JavaScript . 14.4.
:
a1 = 2 < 3;
a2 = -4 > 0;
a3 = r < t;

14. Web-. JavaScript

201

a1 true (2 3), a2
false ( 4 ), a3 r t.
14.4.

<

>

==

<=

>=

!=

===

!==

, :
a = "JavaScript" != "Java";

a true, . . "JavaScript" "Java" .


. 14.4 " " " " .
. "" " ",
, (
. ). , false.
:
a1 = 2 == "2";
a2 = 2 === "2";

a1 true, . . "2"
2, . a2 false, . . .


.
. 14.5. . 14.6 14.7
.

( . ). :

III. Web-. Web-

202
a = (b > 0) && (c + 1 != d);
flag = !(status = 0);

14.5.

( )

&&

( )

||

( )

14.6.
1

&& ()

|| ()

true

true

true

true

true

false

false

true

false

true

false

true

false

false

false

false

14.7.

! ()

true

false

false

true

typeof
typeof ,
. , ,
:
s = typeof("str");

s
"string", .
, typeof, . 14.8.
14.8. , typeof

"string"

"number"

14. Web-. JavaScript

203
14.8 ()

"boolean"

(. )

"object"

(. )

"function"

null

"null"

undefined

"undefined"



:
.
, ? . ? ... JavaScript

, . , , . , . , Web- 14.6
b a ;
, c 23.
14.6
var
a =
b =
c =
d =
e =
f =

a, b, c, d, e, f;
11;
"12";
a + b;
"JavaScript";
2;
d + e;

d , e , f
"JavaScript2".
, , . true 1
"1", false 0 "0". , 1 true, 0 false. false null undefined.

III. Web-. Web-

204

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


, , .
, , .
:
a = b + c 10;

b c,
10.
.
:
a = b + c * 10;

c 10, b.
, , " " .
. , .
, : ,
. ( ).
. 14.9
.
14.9. ( )

++ -- ~ ! typeof

, , , ,

* / %

, ,

+ -

< > <= >=


== != === !==
&&

14. Web-. JavaScript

205
14.9 ()

||

(. )

= <>=

!
.
,
.

, ? .
:
a = (b + c) * 10;

b c, 10.
, , .
:
a = ((b + c) * 10 d) / 2 + 9;

:
1. b c.
2. 10.
3. d .
4. 2.
5. 9 .
:
a = b + c * 10 d / 2 + 9;

:
1. c 10.
2. d 2.
3. b c 10.
4. d 2.
5. 9 .
, ?

206

III. Web-. Web-

JavaScript
, . , .

JavaScript . . , :
{
b = "12";
c = a b;
}

, .
.


- .

.
14.7 .
14.7
if (<>)
< "">
else
< "">

, "" ,
, , :
if (<>)
< "">

if
else. , .
true, "".
false, "" ( -

14. Web-. JavaScript

207

). "" ,
Web-.
!
null undefined false. .

.
14.8 x
f h .
14.8
if (x
a =
b =
}
else
a =
b =
}

== 1) {
"";
1;
{
" ";
22222;

( 14.9).
14.9
if ((x == 1) && (y > 10))
f = 3;
else
f = 33;

, true ,
x 1 y 10.
, , . .
, .

?
, . , ?:
<> ? < ""> : < "">;

, . :
f = (x == 1 && y > 10) ? 3 : 33;

,
. . ? ,
.

208

III. Web-. Web-

. .


, . 14.10.
14.10
switch (< >) {
case < 1> :
< 1>
[break;]
[case < 2> :
< 2>
[break;]]
<... case>
[default :
<, >]
}

switch, case default.


1, 2 . . , ,
( 1, 2 . .).
, , default (,
, ).
14.11 .
14.11
switch (a) {
case 1 :
out = "";
break;
case 2 :
out = "";
break;
case 3 :
out = "";
break;
default :
out = " ";
}

14. Web-. JavaScript

209

, a 1, out
"", 2 "", 3 "". a - , out
" ".

,
. .
JavaScript . .


, - . , .
:
for (< >; <>; <>)
< >

for.
" for".
. , , ( 1). ,
, .

. ,
. , .
true, ,
, .
, . (
). , ,
. ., false.
:
for (i = 1; i < 11; i++) {
a += 3;
b = i * 2 + 1;
}

10 . i 1 .
, 11, .

210

III. Web-. Web-

,
. i
1 10, .
:
for (i = 10; i > 0; i--) {
a += 3;
b = i * 2 + 1;
}

. 10.
10 , i 0; 10 1.
for (i = 2; i < 21; i += 2) b = i * 2 + 1;

2, 21,
, , 10 . ,
2 2, 4, 6... 20.


:
, .
, , . ,
.
:
do
< >
while (<>);

do while, " do-while".


:
do {
a = a * i + 2;
++i;
} while (a < 100);

:
var a = 0, i = 1;
do {
a = a * i + 2;
++i;
} while (i < 20);

14. Web-. JavaScript

211


, . , ()
, :
while (<>)
< >

while.
" while" ( " do-while"!).
:
while (a < 100) {
a = a * i + 2;
++i;
}


. JavaScript Web- break continue.
break
:
while (a < 100) {
a = a * i + 2;
if (a > 50) break;
++i;
}

, a
50.
continue , . . , ,
: ,
. .
:
while (a < 100) {
i = ++i;
if (i > 9 && i < 11) continue;
a = a * i + 2;
}

, a, i 10 20.

212

III. Web-. Web-


JavaScript, Web- Web ( , ). , - Web-, .
, , . , , ,
.
, .


- Web-, . function:
function < >([< , >])
< >
, , Web. , .

,
. (
.) . .

;
. , .

( ) , , . return ,
:
return < >;

,
.
:
function divide(a, b) {
var c;
c = a / b;
return c;
}

14. Web-. JavaScript

213

a b, a b
.
:
function divide(a, b) {
return a / b;
}

, :
function divide(a, b) { return a / b; }

JavaScript
, ,
.
b, 2:
function divide(a, b) {
if (typeof(b) == "undefined") b = 2;
return a / b;
}

, - , b. typeof (
). b , "undefined";
b, ,
2 , . ,
, b , , .

.
.
.
, .
.
, ,
( Web-).
. ,
Web-, , . Web "" "".


Web-, Web-. :
< >([< , >])

III. Web-. Web-

214

, .
, .
!
, , .

divide:
d = divide(3, 2);

3 2.
:
s = 4 * divide(x, r) + y;


, , . , divide
:
s = divide(4);

s 2 4 (
) 2 ( , , ).
, :
initVars(1, 2, 3, 6);

, , ,
. , , , Web-.
,
, Web-:
s = computeValue();

. :
function cmp(c, d, e) {
var f;
f = divide(c, d) + e;
return f;
}

cmp divide.

14. Web-. JavaScript

215

.

JavaScript .
:
var someFunc;
someFunc = cmp;

someFunc cmp. ,
.
, ,
:
c = someFunc(1, 2, 3);

cmp someFunc.
, , ,
. , JavaScript.
:
var someFunc = function(c, d, e) {
var f;
f = divide(c, d) + e;
return f;
}

. ,
.
JavaScript
. JavaScript- Web-:
ceLinks.on("mouseover", function(e, t) {
Ext.get(t).addClass("hovered");
});

on (-, , ,
) , .
.
, Ext Core,
, . , .

(), .

III. Web-. Web-

216

, . .
!
.

, , :
var someArray = [1, 2, 3, 4];

, , someArray.
, :
a = massive[2];

. (
!)
:
someArray2 = [1, 2, , 4];

, (. .
undefined).
, :
someArray[4] = 9;

, , 4 9.
:
someArray[7] = 9;

,
9. , (undefined).
(,
, ):
someArray[2] = ["n1", "n2", "n3"];

, : "" , :
str = someArray[2][1];

str ,
, n2.
, . JavaScript ,
( , ).

14. Web-. JavaScript

217

:
var hash;
hash["AUDIO"] = "t_audio.htm";
hash["IMG"] = "t_img.htm";
hash["TITLE"] = "t_title.htm";

JavaScript ,
( ). ""
:
var someArray;
someArray = [];

, :
someArray[0] = 1;
someArray[1] = 2;
someArray[2] = 3;

,
.
.

, . ( ),
.
, JavaScript
. ,
, , .
- , JavaScript
, , .
, ,
. ,
, .
:
var myArray = ["AUDIO", "IMG", "TITLE"];
var newArray = myArray;

myArray newArray ( ).
myArray:
myArray[0] = "VIDEO";

III. Web-. Web-

218

newArray:
s = newArray[0];

s "VIDEO"
. myArray newArray
.
!
,
( ), ( ).
, , .

, ( ),
. , JavaScript,
.

, . , , , .

, , , , , , . ,
, , . JavaScript .


,
, .
, , , .
. ,
, .
JavaScript .
.
.
. , .
, ;
, . , ,
, .

14. Web-. JavaScript

219

, .
, "", , .
. ,
, . ,
"JavaScript" ,
.
, .
- ,
.
. .
, , . , .
()
() . , , Web, , ,
,
. "" .
, .
,
. , , , Web-.
, Web-, :
JavaScript ( );
Web- ( Web-);
JavaScript ( ). , JavaScript-,
Ext Core, .
Web- .
.


?
JavaScript, Web .
-

III. Web-. Web-

220

, -

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

, Math ,
:
var a = Math.sqrt(2);

a 2. sqrt Math , .
sin Math , :
var b = Math.sin(0.1);

, Math, JavaScript,
Math .
Web- , Web-, Web. , Web- HTMLDocument,
document, Web-.
, HTMLDocument write, Web-,
:
document.write(", !");

document, Web, HTMLDocument


write.
. ,
Ext Core Ext,
:
var ceLinks = Ext.select("UL[id=navbar] > LI");

select Ext. Element, Web-

14. Web-. JavaScript

221

,
CSS. (, Element Ext Core.)
. ,
. :
var elNavbar = Ext.get("navbar");

get Ext, Ext Core,


Element, Web-.
, ID "navbar"
get .
, .
, , new , :
new < >([< , >])

new . -
.
, . ,
.

JavaScript Date, . , new:


var dNow = new Date();

dNow Date, .
, dNewYear
Date, 31 2009 :
var dNewYear = new Date(2009, 12, 31);

?
, .
Web-, Web-

Web-, .
Web-,

Web-, .
JavaScript, Math, -

new.

222

III. Web-. Web-

Math JavaScript -

.
.
, Web-
.


, :
.
,
. , ,
, . ""
, (. ,
).
:
var elNavbar = Ext.get("navbar");

get Ext, Ext, "navbar". ,


get Web- , ID, .
Element,
navbar, elNavbar.
:
var elParent = elNavbar.parent();

parent Element, elNavbar .


Element, Web, navbar, elParent.
, - ( 1), , ( 2).
1 ,
2.
:
elNavbar.parent().addClass("hovered");

parent Element,
elNavbar ( 1). 1 Element, -,
addClass ( 2).

14. Web-. JavaScript

223

,
, , ,
JavaScript- .
. , , , .
:
var sID = elParent.id;

id Element, elParent. ID
Web-.
:
Ext.enableFx = false;

enableFx Ext, Ext.


:
var sID = elNavbar.parent().id;

Web-, elNavbar, ID .
, , .
"" ,
Web-. JavaScript
Web-; ,
Ext Core, 15.

JavaScript
Date,
JavaScript :
var dNow = new Date();

Date , . , getDate
, getMonth , getFullYear . , .
:
var sNow = dNow.getDate() + "." + dNow.getMonth() + "." +
dNow.getFullYear();

, , . <>.<>.<>.

III. Web-. Web-

224

JavaScript
.
String .
var s = "JavaScript";

String, JavaScript.
JavaScript,
.
. , String.
length String :
var l = s.length;
var l = "JavaScript".length;

l JavaScript.
substr , :
substr(< >[, < >]);

, .
!
JavaScript , .

, , . ,
.
Web-
var s1 = s.substr(4);
var s2 = s.substr(4, 2);

s1 "Script", s2 "Sc".
Number , Boolean :
var n = 123;
var b = false;

JavaScript
.
Array :
var a = [1, 2, 3, 4];

length, ,
. . :
var l = a.length;
var l = [1, 2, 3, 4].length;

14. Web-. JavaScript

225

Math,
JavaScript Math, .
JavaScript . JavaScript.

Object
. Object,
.

, .
Object ,
.
Object ,
. - ( 14.12).
14.12
{
< 1>: < 1>,
< 2>: < 2>,
. . .
< n-1>: < n-1>;
< n>: < n>
< 1>: <, 1>,
< 2>: <, 2>,
. . .
< n-1>: <, n-1>,
< n>: <, n>
}

JavaScript Object, - .
:
var oConfig = { tag: "DIV",
id: "cother",
html: " ." };

Object tag, id html,



oConfig.

226

III. Web-. Web-

:
var oConfig2 = { url: "pages/t_img.htm",
success: function (response, opts){
var obj = Ext.decode(response.responseText);
}
};

Object url success


oConfig2. ( Ext Core.)
. -, ,
success, . -, , , ,
. , ,
(. , ).
Object Ext Core . .

Web-.
DOM
, Web-, :
, Web- ,
(, , , .);
, Web-.
.
, Web- HTMLDocument. document
Web-, Web-.
Web-, ,
, HTMLElement.
, Web-,
. , HTMLParagraphElement,

HTMLImageElement,

HTMLLinkElement, HTMLTableElement.
Web- Web-
. ,
HTMLParagraphElement,
HTMLImageElement,
HTMLLinkElement, HTMLTableElement.
, Web-. -

14. Web-. JavaScript

227

, DOM ( Document Object


Model ).
HTMLDocument
Web-,
. Web- ID. 15.
HTMLElement , Web-. -
, , Web-
. ,
HTMLElement, .
DOM , W3C. Web- .
, . , ,
Window, Web-
, . ,
Web-, window.
, , Web-, .
Web- 15.
.


, , "" . ,
, ,
. .
JavaScript
, . .
:
var dNow = new Date();
dNow.someProperty = 3;

Date, dNow, someProperty 3. Date.


:
elNavbar.someMethod = function() { . . . };

Element Ext Core, elNavbar, someMethod. , .

228

III. Web-. Web-

oConfig
style
:
oConfig.style = "color: red;";

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


JavaScript.
, .
.
, ,
.
, , , , , . .
(;).

:
y = y1 * y2 + x1 * x2;

, :
y = y1 * y2 +
x1 * x2;

:
y =
y1 *
y2 +
x1 *
x2;

, . . .
, y2:
y = y1 * y
2 + x1 * x2;

14. Web-. JavaScript

229

JavaScript , . JavaScript-
.

JavaScript
2 7
HTML CSS, Web- ,
Web- - .
, JavaScript .
JavaScript .
, , / (),
:
/
var dNow = new Date();

/ .
, , /* */. , :
/*
,

.
*/
var dNow = new Date();

/* */.
JavaScript.

?
JavaScript, , , , . , Web- . Web.
Ext Core,
. Web-,
. .

15

Ext Core
Web-
, Web-, Web- JavaScript,
. Web-,
Web- ,
. Web...
Ext Core, Web- . , !..
, . Web-, , .
, Ext Core!

Ext Core
Ext Core. ,
"" Web-.

Ext Core
? Web-, ? ,
Web-, ?
- , Ext Core , .
, 14. Web- Web -

15. Ext Core Web-

231

Web-.
, Web-. , DOM.
W3C , DOM , HTML CSS. , Web .
Web-
Web- . , - , ,
Web-, .
.
, , , . , , Web , ,
, , DOM, .
Web- , , DOM, , , . Ext Core.
. , Web- -
. , Web , , Firefox, Internet Explorer. , Internet Explorer, ,
, HTML 5 CSS 3, Opera,
Chrome, Safari DOM . Web-, -
.
, Web- , , , . , Web, , Window.
, DOM, Web-. Ext Core .
Prototype, jQuery "" Ext Core
. Web-. ; , , jQuery.
Ext Core.

232

III. Web-. Web-

Ext Core
Ext Core Web- http://www.extjs.com/
products/core/?ref=family "" Web-. Web- , .
Ext Core ZIP,
ext-core-< >.zip , "" .
3.1.0, - .
Ext Core Web- ext-core.js, . JavaScript , ,
, Web-
.
Ext Core Web-,
, .
Web- ( <HEAD>) <SCRIPT>
:
<SCRIPT SRC="ext-core.js"></SCRIPT>

Web- Web-, extcore.js , , Web-. , Web- , Ext Core " ".


Web-, Web-, Web 2.0. <SCRIPT>, Web-, HTML-
Web-, </BODY>:
<SCRIPT SRC="<- Web-,
Web->.js"></SCRIPT>

Web-, Web-,
, Web-
, DOM . ?
<SCRIPT>, ,
HTML- Web-, . , Web , DOM Web- ,
.
Ext Core : Web-, Web-, , .
onReady Ext:

15. Ext Core Web-

233

Ext.onReady(function() {
<, Web->
});

onReady Ext , Web-


, DOM , .
, 14, Web-.

Ext Core
, Ext Core , Web-,
, , .
.

JavaScript " ",
. , Web- . .

, Ext, . Web-,
onReady . , ""
Ext.
Ext Ext Core Ext.
Element (, Ext.Element, Ext)
14. Web-,
.
Element "" Web-
HTMLElement ,
. , Web-, , .
Element ,
Web-.
Element .
CompositeElementLite (, Ext.CompositeElementLite) Element (
14). - , , , ,
( ).

234

III. Web-. Web-

CompositeElementLite . Element, Web-, , , CSS.


DomHelper ( Ext.DomHelper) Web- , . Element, .
DomHelper Ext Core
Ext.DomHelper.
EventObject (Ext.EventObject)
Web- . ( , .)
EventObject Ext Core
.

Web-
, Web-,
, Element, -
. ?
Ext, .
get Element,
Web-:
Ext.get(< ID>|< HTMLElement>)

, . , ID,
Web-.
:
var elNavbar = Ext.get("navbar");

Element, ""
navbar, .
7 , ID Web . , Web- . , -
Web- - , , "" , , navbar.
get HTMLElement, Web-. ,
HTMLElement

15. Ext Core Web-


Element

235

Ext Core. , -

.
get , .
, Ext Core
, , , (. 14). -
Web- get Element .
Web-
Element . ,
, .
- .
( Ext Core ) .
. , Web , ,
Web-.
, Web- Web-,
. ""
Element, Web-. .
Ext Core fly, :
Ext.fly(< ID>|< HTMLElement>)

get
Web- ( Element) , .
, Web-,
:
var elNavbar = Ext.fly("navbar");

fly , get, ,
Element,
Web-, , .
.
get , Web- -

.
fly , Web-

.
getBody
Element, Web- ( <BODY>):
var elBody = Ext.getBody();

236

III. Web-. Web-

getDom Web- HTMLElement, Web-:


Ext.getDom(< ID>|< Element>)

, Web- ( ID )
Element, .
:
var htelNavbar = Ext.getDom("navbar");

HTMLElement, ""
navbar.
:
var elCMain = Ext.get("cmain");
var htelCMain = Ext.getDom(elCMain);

HTMLElement,
cmain. get Element Ext Core, getDom HTMLElement Web-.
dom Element Web-
HTMLElement, Web-:
var elCMain = Ext.get("cmain");
var htelCMain = elCMain.dom;

Ext Core
HTMLElement. dom getDom .

Web-
,
Web-,
( CSS).
select Ext CompositeElementLite, Element, Web, CSS:
Ext.select(< CSS>)

. ,
.
Ext Core
CSS. .

15. Ext Core Web-

237

< > , .
< 1> < 2> , 2 -

1, ( ,
1, ).
< 1> > < 2> < 1>/< 2> , -

2 1.
< 1> + < 2> , 2, -

1 .
< 1> ~ < 2> , 2, -

1 , .
* , .
.< > .
[< >] , .
[< >=<>] ,

.
[< >!=<>] ,

, .
[< >^=<>] ,

, .
[< >$=<>] ,

, .
[< >*=<>] ,

, .
[< >%=2] , -

, 2.
:first-child .
:last-child .
:only-child .
:nth-child(<>) .
:nth-child(even) :even .
:nth-child(odd) :odd .
:first .
:last .
:nth(<>) .
:contains(<>) ,
.

238

III. Web-. Web-

:nodeValue(<>) , .

:not(<>) , .
:has(<>) , , -

.
:next(<>) ,

.
:prev(<>) ,

.
{< >=<>} ,
.
{< >!=<>} ,
, .
{< >^=<>} ,
, .
{< >$=<>} ,

, .
{< >*=<>} ,
, .
{< >%=2} , -

, 2.
Web- , select
CompositeElementLite,
Element ("" ).
CompositeElementLite, Element, :
var clContainers = Ext.select("DIV");

cmain:
var clContainers = Ext.select("DIV[id=cmain]");

"" navbar,
:
var clOuterItems = Ext.select("UL[id=navbar] > LI");

, :
var clP = Ext.select("DIV > P:first");

, :
var clHR = Ext.select("P + HR");

15. Ext Core Web-

239

Web-:
var clPA = Ext.select("P, ADDRESS");

,
Web-
, - Web , "" . Ext Core Element,
.
parent Web- Element:
< Element>.parent([< CSS>[, true]])

, , CSS, , ;
. , . .,
( <HTML>).
,
.
, , true,
parent Web- HTMLElement.
, null.
elNavbar "" navbar, , elCNavbar :
var elNavbar = Ext.get("navbar");
var elCNavbar = elNavbar.parent();

cnavbar.
navbar,
<SPAN>:
var elSpan = elNavbar.parent("SPAN");

, elSpan
null.
select , ,
CompositeElementLite:
< Element>.select(< CSS>)


CSS.

240

III. Web-. Web-

:
var clUL = elNavbar.select("LI > UL");

clUL navbar,
.
child Web Element:
< Element>.child([< CSS>[, true]])

, , CSS, , ;
. , .
, .
, , true,
child Web- HTMLElement.
, null.
:
var elUL = elNavbar.child();

elUL navbar.
:
var elUL = elNavbar.child("LI:nodeValue=CSS");

elUL navbar, "CSS".


down child , Web-:
< Element>.down([< CSS>[, true]])

down , parent child.


:
var elUL = elNavbar.down();

elUL navbar.
next prev , , Web- , :
< Element>.next|prev([< CSS>[, true]])

, parent child.
:
var elDiv = Ext.get("cmain").next();

15. Ext Core Web-

241

elDiv ccopyright
cmain.
:
var elP = elNavbar.prev();

elP null, . . navbar



.
first last , ,
Web- , :
< Element>.first|last([< CSS>[, true]])

, parent child.
:
var elCHeader = Ext.get("cmain").first();
var elCCopyright = Ext.get("cmain").last();

elCHeader cheader,
elCCopyright ccopyright. , ,
"" cmain.
is true, Web- , false .
15.1 , cmain
<P>. , .
15.1
< Element>.is(< CSS>)
var elCMain = Ext.get("cmain");
if (elCMain.is("P"))
var s = " ."
else
var s = " . !";


Web-
Web-, ,
,
Element.
getWidth getHeight , , Web- :
< Element>.getWidth|getHeight([true])

242

III. Web-. Web-

,
Web-, .
true, , .
:
var iWidth = Ext.get("cmain").getWidth();

iWidth cmain.
setWidth setHeight , ,
Web-:
< Element>.setWidth|setHeight(<>)

, ,
:
Ext.get("cmain").setWidth(700);

getX getY , ,
Web-
. , , Web-. .
:
var elCMain = Ext.get("cmain");
var x = elCMain.getX();
var y = elCMain.getY();

getOffsetTo Web- :
< Element>.getOffsetTo(< Element>)

Element, Web-, .
getOffsetTo ( ): , .

var m = Ext.get("cmain").getOffsetTo(Ext.get("cnavbar"));
var x = m[0];
var y = m[1];

x y, , cmain cnavbar.

15. Ext Core Web-

243

Web-
Web-
Web-
Web-, Web- ( ). Ext.lib.Dom.
getDocumentWidth getDocumentHeight , , Web- .
:
var pageWidth = Ext.lib.Dom.getDocumentWidth();
var pageHeight = Ext.lib.Dom.getDocumentHeight();

getViewportWidth getViewportHeight , , Web-


. :
var clientWidth = Ext.lib.Dom.getViewportWidth();
var clientHeight = Ext.lib.Dom.getViewportHeight();

!
- Ext Core.
JavaScript- .


, Web-. Ext Core
Element.
getAttribute :
< Element>.getAttribute(< >)

. .
:
var s = Ext.get("cmain").child("A:first").getAttribute("href");

HREF (-) cmain.


set :
< Element>.set(<>)

14 JavaScript Object , . , Ext Core


. , set ,
.

III. Web-. Web-

244

Object.
, , .
Ext Core Object,
, .
:
var oConf = { target: "_blank" };
var s = Ext.get("cmain").select("A").set(oConf);

cmain
TARGET, "_blank". ,
target "_blank".
id ID, . .
Web-:
var sID = Ext.getBody().child("DIV:last").id;

Web- "ccopyright".
, Web-
id . , ,
ID .
set:
Ext.getBody().child("DIV:last").set({ id: "lastdiv" });

!
, Web- Web- . .


""
Web- . , Ext Core .
Element, ,
Web- ("").
addClass Web-. ,
:
< Element>.addClass(< >)


:
Ext.select("P").addClass("someclass");

Web- someclass.

15. Ext Core Web-

245

removeClass Web-. , :
< Element>.removeClass(< >)

:
Ext.select("P").removeClass("someclass");

Web-
someclass.
toggleClass Web, ,
:
< Element>.toggleClass(< >)

:
Ext.select("P").toggleClass("someclass");

replaceClass Web- :
< Element>.replaceClass
(< , >,
< , >)

"" :
Ext.select("P").replaceClass("someclass", "otherclass");

radioClass Web :
< Element>.radioClass(< >)

:
elNavbar.child("UL LI:nodeValue=IMG").radioClass("hovered");

hovered ,
, "IMG",
.
hasClass true,
Web-, false :
< Element>.hasClass(< >)

:
if (Ext.get("cnavbar").hasClass("hovered")) {
var s = " "
else
var s = " ?..";

246

III. Web-. Web-


, -
Web-, . Element, .
getStyle Web-:
< Element>.getStyle(< >)

.
.
, getStyle,
, Web-
.
, getStyle , Web-.
:
var marginLeft = elNavbar.getStyle("margin-left");

getColor , :
< Element>.getColor(< >,
< >[, <>])

. , ; , , , .
. ,
.
, , , . ,
#.
getColor RGB-
<>RRGGBB,

RR, GG BB , , , .
:
var color = Ext.getBody().getColor("color", "#FFFFFF");

color "#3B4043" Web-.


getColor, #.
:
var color2 = Ext.getBody().getColor("color", "#FFFFFF", "");

15. Ext Core Web-

247

color2 "3B4043".
, getColor (, ).
setStyle .
:
< Element>.setStyle(< >,
< >)

, . .
:
Ext.getBody().setStyle("color", "black");

Web- black.
setStyle . ,
:
< Element>.setStyle(<>)

:
Ext.getBody().setStyle({ color: "black", background-color: "white" });

Web-.
setOpacity
Web-:
< Element>.setOpacity(< >)

0 ( ) 1 ( ):
Ext.get("cheader").setOpacity(0.5);

clearOpacity Web- . :
Ext.get("cheader").clearOpacity();

clearOpacity , Web . setOpacity , ,


Web-.
setDisplayed display:
< Element>.setDisplayed(< >)

display.
true false;
Web- , .

248

III. Web-. Web-

:
Ext.get("cheader").setDisplayed(false);
Ext.get("cheader").setDisplayed("none");

cnavbar.

Web-
Ext Core Element, Web- .
setVisibilityMode , Web-: display
visibility. ( 9.)
< Element>.setVisibilityMode(< >)

. Ext.Element.DISPLAY
Ext.Element.VISIBILITY; display, visibility.
:
Ext.get("navbar").setVisibilityMode(Ext.Element.DISPLAY);

setVisibilityMode Web-
, Web-
visibility.
setVisible Web-
:
< Element>.setVisible(true|false)

true, Web- , false :


Ext.get("navbar").setVisible(false);

show hide, , Web. :


Ext.get("navbar").show();

toggle Web-,
, , . :
Ext.get("navbar").toggle();

isVisible true, Web- ,


false, . .
:
var elNavbar = Ext.get("navbar");
if (elNavbar.isVisible())
elNavbar.show();

15. Ext Core Web-

249

, Web-
setDisplayed, .
display.

Web-
Web-!
Web- . DomHelper.
append Web-
:
Ext.DomHelper.append(< >, <>
[, true])

Web-,
. , Element.
, , Web-.
:
tag ;
html HTML-, ;
cls , ;
children cn ,

;
< > .

append HTMLElement, Web-. , , true, Element.


15.2
var oConf = { tag: "P",
html: " Web-!",
cls: "someclass",
id: "newparagraph"
}
Ext.DomHelper.append("cmain", oConf);

15.2 cmain , :

250

III. Web-. Web-

<P> ( tag );
" Web-!" ( html -

);
someclass ( cls);
newparagraph ( id, ID).

, ( 15.3).
15.3
var oConf2 = { tag: "UL",
children: [
{ tag: "LI",
{ tag: "LI",
{ tag: "LI",
]
};
Ext.DomHelper.append("cmain",

html: " " },


html: " " },
html: " " }

oConf2);

children .
,
, .
insertFirst append
, Web-
:
Ext.DomHelper.insertFirst(< >, <>
[, true])

, , append.
:
Ext.DomHelper.insertFirst("cmain", oConf);

, oConf, cmain.
insertBefore insertAfter Web-,
, :
Ext.DomHelper.insertBefore|insertAfter(< "">,
<>[, true])

Web-, "" , Element. append.

15. Ext Core Web-

251

:
var oConf3 = { tag: "HR" }
Ext.DomHelper.insertBefore("navbar", oConf3);
Ext.DomHelper.insertAfter("navbar", oConf3);

navbar .
insertHtml Web- HTML- :
Ext.DomHelper.insertHtml(<>,
< "" >, <HTML->)

, , Web-:
"beforeBegin"

"" ;
"afterBegin"

;
"beforeEnd"

;
"afterEnd" -

"" .
Web-, "" . HTMLElement ( Element!).
HTML-, .
insertHtml HTMLElement,
Web-. ,
Element .
:
var htelCMain = Ext.getDom("cmain");
Ext.DomHelper.insertHtml("afterBegin", htelCMain,
"<P ID=\"newparagraph\" CLASS=\"someclass\"></P>");

cmain newparagraph
someclass.
:
var htelNavbar = Ext.getDom("navbar");
Ext.DomHelper.insertHtml("beforeBegin", htelNavbar, "<HR>");
Ext.DomHelper.insertHtml("afterEnd", htelNavbar, "<HR>");

252

III. Web-. Web-

, , HTML.
overwrite Web- , :
Ext.DomHelper.overwrite(< >,
<>|<HTML->[, true])

Web-,
. , Element.
,
, HTML-, .
overwrite HTMLElement, Web-. , , true, Element.
:
var oConf4 = { tag: "P",
html: " ."
}
Ext.DomHelper.overwrite("cmain", oConf4);

cmain, .
markup HTML-.
:
Ext.DomHelper.markup(<HTML->)
var s = Ext.DomHelper.markup(oConf4);

s "<P> .</P>".
Web- Element. ,
.
createChild Web-
:
< Element>.createChild(<>
[, <, >])

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

15. Ext Core Web-

253

createChild Element, .
:
var elCMain = Ext.get("cmain");
elCMain.createChild(oConf, elCMain.first());

, oConf,
cmain .
insertFirst ,
Web- :
< Element>.insertFirst(<>)
Ext.get("cmain").createChild(oConf);

replaceWith ,
Web- .
15.4 cmain
, oCont5, .
15.4
< Element>.replaceWith(<>)
var oConf5 = { tag: "DIV",
html: "<P> .</P>",
id: "cmain"
}
Ext.get("cmain").replaceWith(oConf5);

wrap ,
Web- ,
:
< Element>.wrap([<>])

, . wrap <DIV>.
:
Ext.select("UL[id=navbar]").wrap();

navbar, ,
. , wrap "", .
,
cmain, :
Ext.select("DIV[id=cmain] > P").wrap({ tag: "BLOCKQUOTE" });

254

III. Web-. Web-

, Ext Core
Web-. , remove Element. Web , .
:
Ext.get("cmain").remove();

cmain .


Web-:
, .


Web-, ,
Web-. 14, Web HTML- Web-, <SCRIPT>. , Web- ( HTML-) (
Web-).
Web-,
, Web- . - .
Web- , Web-
Web-. ,
Web- " ",
Web- " ".
" ", " ".
, , .
, .
, Web-
Web-. Web- Web . Web- .
? !
Web- , . ( 14.)
Web-
, . -

15. Ext Core Web-

255

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

Web-, . Web .

Web- . ,
" " .
, .

Element
,
Element Ext Core, . 15.1. , Web.
15.1. Element

abort

, -
. . ,

blur

, . .
,

click

Web-
mousedown mouseup. .
,

dblclick

Web. . ,

error

, - .
. ,

III. Web-. Web-

256

15.1 ()

focus

, . . ,

keydown

. . , ,

keypress

- keydown keyup. ,
, . . , ,

keyup

. .
, ,

load

, - .
.

mousedown

. .

mousemove

Web-.
.

mouseout

, Web-. .

mouseover

, Web-. .

mouseup

. .

, . .


on Element
Web- :
< Element>.on(<>, <->)

,
. . 15.1.
, .
:
EventObject,

( );

15. Ext Core Web-

257

HTMLElement, Web-

, .
, - HTMLElement, Web-,
, ,
. ,
;
. - this.
:
Ext.get("navbar").on("mouseover",
function(e, t) {
Ext.get(this).addClass("hovered");
}
);

navbar mouseover. on , .
-.
- this,
HTMLElement, Web-, . Element, get. Element hovered addClass.
, - , , , .
-:
Ext.get("navbar").on("mouseover",
function() {
Ext.get(this).addClass("hovered");
}
);

, ,
on:
function navbarMouseOver() {
Ext.get(this).addClass("hovered");
}
Ext.get("navbar").on("mouseover", navbarMouseOver);

, Web-.
removeAllListeners Element Web- . .

258

III. Web-. Web-

:
Ext.get("navbar").removeAllListeners();


, , .
, , "", . mouseOver
mouseOut Web-, 14.
15.5.
15.5
var ceLinks = Ext.select("UL[id=navbar] LI");
ceLinks.on("mouseover", function(e, t) {
Ext.get(this).addClass("hovered");
});
ceLinks.on("mouseout", function(e, t) {
Ext.get(this).removeClass("hovered");
});

Web- index.htm Web-


"HTML" "" . .
. mouseOver
mouseOut .
, ,
"AUDIO". . ,
.
"HTML" "" !
, "AUDIO"
, "HTML" "" , . ?
. , -
Web-, ,
. ., Web- ( <BODY>).
, "" ""
.
.
"AUDIO" . ( <LI>)
mouseOver. , Web- . "" ( <UL>).
, "HTML" "" -

15. Ext Core Web-

259

, . , , mouseOver, Web-.
"" "" , cnavbar Web-,
.
"AUDIO" .
<CODE>, , , ( <A>),
"AUDIO". , mouseOver
- <A>! "" <CODE>,
<LI>, "AUDIO", .
, mouseOver . ,
, <LI>, <CODE> <A>. , !
...
Web-. ,
Web-,
. , , .
. , : , .
EventObject,

. .
HTMLElement,

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

HTMLElement, Web, , . . ,
.
, .
Web- ,
Web-.
!
Web-, 14, , 15.6.
15.6
var ceLinks = Ext.select("UL[id=navbar] LI");
ceLinks.on("mouseover", function(e, t) {
Ext.get(t).addClass("hovered");
});

260

III. Web-. Web-

ceLinks.on("mouseout", function(e, t) {
Ext.get(t).removeClass("hovered");
});

- , ( this), ,
( t). ?
"AUDIO" . <A> mouseover, <CODE> <LI>.
<LI> . hovered
<LI>, <A>!
( hovered
. 14), . !
. 15.1, Element, , , . -, ...
"" , , .

. EventObject,
. .
, Web-, Web , .
, click Web-, focus .
, , Web-
, ,
. (
) EventObject.
.

. EventObject
, - EventObject,
. ,
.
getCharCode - ,
, Unicode . .
-
, Windows.
getKey Unicode
. .

15. Ext Core Web-

261

Web- http://msdn.microsoft.com/
en-us/library/ms927178.aspx.
getPageX getPageY , , Web-
. .
preventDefault . .
stopPropagation .
.
stopEvent
. preventDefault
stopPropagation.
.
Web-, 14,
15.7, , .
15.7
var ceLinks = Ext.select("UL[id=navbar] LI");
ceLinks.on("mouseover", function(e, t) {
Ext.get(this).addClass("hovered");
e.stopEvent();
});
ceLinks.on("mouseout", function(e, t) {
Ext.get(this).removeClass("hovered");
e.stopEvent();
});

CompositeElementLite
,
Web-.
Web-:
var elCMain = Ext.get("cmain");

:
var clContainers = Ext.select("DIV");

, select Ext
CompositeElementLite Element,
CSS Web-.
CompositeElementLite .
, CompositeElementLite
Element, ,

262

III. Web-. Web-

, . . Web. (, .)
getCount .
:
var i = clContainers.getCount();

i
clContainers 5.
item
Element:
< CompositeElementLite>.item(<>)

,
.
:
var elDiv = clContainers.item(i 1);

elDiv clContainers. , , , , item , ,


.

clContainers - :
for(var k = 0; k < i; k++) {
var elDiv = clContainers.item(k);
// -
}

indexOf
:
< CompositeElementLite>.indexOf(<>)

.
, Element HTMLElement.
, indexOf 1.
:
var ind = clContainers.indexOf("cnavbar");

ind cnavbar clContainers 1.


each :
< CompositeElementLite>.each(<>)

15. Ext Core Web-

263

, .
:
Element;
CompositeElementLite;
.

,
this.
15.8 ,
clContainers, hovered.
15.8
clContainers.each(function(el, cl, ind)
{
el.addClass("hovered");
}
);

Web- 15.9.
15.9
clContainers.each(function(el, cl, ind)
{
this.addClass("hovered");
}
);

:
clContainers.addClass("hovered");

Ext Core.
.

Web-
, Ext Core , JavaScript-.
Web-, .
Ext Core . Web-.
HTMLDocument, Web-. , Web-,
document. .

264

III. Web-. Web-

HTMLDocument .
.
title Web- ( <TITLE>)
. , 1,
Web-, Web-.
:
var sTitle = document.title;

sTitle Web-.
Web- :
document.title = "";

location Location, Web-. href, Web- :


var sHREF = document.location.href;

sHREF - Web-.
:
document.location.href = "http://www.w3.org";

Web- http://www.w3.org. -, href Location Web-


Web-, -!
Window Web-. , Web-, window. .
Window.
alert - K. - ,
:
window.alert(<, ->)

,
-:
window.alert(" Window!");

confirm -
K . - ,
- :
window.confirm(<, ->)

,
-.

15. Ext Core Web-

265

confirm true, K, false,


.
resize , Web.
:
Ext.fly(window).on(function()
{
// -
}
);

, resize
Web- ( ).
HTMLElement, , Web-. .
textContent Web-
. , null.
:
var htelCHeader = Ext.getDom("cheader");
var s = htelCHeader.textContent;
htelCHeader.textContent = "!" + s + "!";

cheader,
cheader.
innerHTML HTML- Web .
:
var htelCHeader = Ext.getDom("cheader");
var s = htelCHeader.textContent;
htelCHeader.innerHTML = "<EM>" + s + "</EM>";

Web-
. , Ext Core. Web-, .

?
Ext Core ,
Web-.
,
.
. , !

16

Web-
Ext Core. ,
, ... ?
. Web, ( ) ,
Web-.
, "" Web-.
, Web-,
Web-.

. (, 14; ,
.)
Web- , .
, ,
"" , .
, -

Web-.
Web-, ,
":".
, ? Ext Core .


, , Web ,
Web- .

16. Web-

267

main.css
<BODY>. , 16.1.
16.1
BODY

{ color: #3B4043;
background-color: #F8F8F8;
font-family: Verdana, Arial, sans-serif;
margin: 0px;
overflow: hidden }

overflow hidden,
Web- . , ,
,
.
. Web- main.js. , onReady Ext, 16.2.
16.2
function adjustContainers() {
var clientWidth = Ext.lib.Dom.getViewportWidth();
var clientHeight = Ext.lib.Dom.getViewportHeight();
var cNavbarWidth = Ext.get("cnavbar").getWidth();
var cHeaderHeight = Ext.get("cheader").getHeight();
var cCopyrightHeight = Ext.get("ccopyright").getHeight();
Ext.get("cheader").setWidth(clientWidth);
var cNavbarHeight = clientHeight cHeaderHeight cCopyrightHeight 30;
Ext.get("cnavbar").setHeight(cNavbarHeight);
Ext.get("cmain").setHeight(cNavbarHeight);
Ext.get("cmain").setWidth(clientWidth cNavbarWidth 10);
Ext.get("ccopyright").setWidth(clientWidth);
}

, onReady
Ext, :
Ext.fly(window).on("resize", adjustContainers);
adjustContainers();

main.js. Web- index.htm Web-


, ,
Web-.
, .

268

III. Web-. Web-

? .
, main.js, adjustContainers, resize Web-.
. .
Web-:
var clientWidth = Ext.lib.Dom.getViewportWidth();
var clientHeight = Ext.lib.Dom.getViewportHeight();

,
. ,
.
cnavbar, cheader
ccopyright:
var cNavbarWidth = Ext.get("cnavbar").getWidth();
var cHeaderHeight = Ext.get("cheader").getHeight();
var cCopyrightHeight = Ext.get("ccopyright").getHeight();

.
cheader
Web-:
Ext.get("cheader").setWidth(clientWidth);

cnavbar cmain:
var cNavbarHeight = clientHeight cHeaderHeight cCopyrightHeight 30;

cheader
ccopyright 30
ccopyright .
cnavbar cmain:
Ext.get("cnavbar").setHeight(cNavbarHeight);
Ext.get("cmain").setHeight(cNavbarHeight);

cmain:
Ext.get("cmain").setWidth(clientWidth cNavbarWidth 10);

,
cnavbar 10 (
navbar margin-right).
ccopyright Web-:
Ext.get("ccopyright").setWidth(clientWidth);

adjustContainers .

16. Web-

269

, , onReady Ext.
adjustContainers resize
Web-:
Ext.fly(window).on("resize", adjustContainers);

,
Web-:
adjustContainers();

. .



, . 16.3 14
JavaScript-.
16.3
var ceLinks = Ext.select("UL[id=navbar] LI");
ceLinks.on("mouseover", function(e, t) {
Ext.get(this).addClass("hovered");
});
ceLinks.on("mouseout", function(e, t) {
Ext.get(this).removeClass("hovered");
});

.
, ,
"", :
var ceLinks = Ext.select("UL[id=navbar] LI");

mouseover -, :
ceLinks.on("mouseover", function(e, t) {
Ext.get(this).addClass("hovered");
});

this
HTMLElement, , , , .
get Element addClass hovered ( . 14), .

270

III. Web-. Web-

mouseout :
ceLinks.on("mouseout", function(e, t) {
Ext.get(this).removeClass("hovered");
});

hovered , .

Web-

Web- , .
main.css
#navbar A<>. , 16.4.
16.4
#navbar A:focus,
#navbar A:hover,
#navbar A:active,
#navbar A:visited { color: #576C8C;
text-decoration: none }

navbar .
, .
Web- main.js , onReady Ext , 16.5.
16.5
ceLinks.on("click", function(e, t) {
var elA = Ext.get(this).child("A");
if (elA) {
var href = elA.getAttribute("HREF");
e.stopEvent();
window.location.href = href;
}
});

16.5 click , , -, .
.

16. Web-

271

this HTMLElement, Web-, ,


Element ,
<A>:
var elA = Ext.get(this).child("A");

, , .
,
, :
if (elA) {

, child
Element, JavaScript true. , ,
"" .
, child null. JavaScript false, , "" .
"" HREF <A> - :
var href = elA.getAttribute("HREF");

:
e.stopEvent();

...
Web-, ""
.
click Web-.
click, , ,
"" ,
. Web, "" ,
. .
-:
window.location.href = href;
}

"" .
. Web-, Web, ,
.

III. Web-. Web-

272

, Web- Web-. ,
.
tags, Web-,
HTML. , bak.
Web- index.htm.
Web- t_audio.htm, <AUDIO>.
1. Web- index.htm t_audio.htm
tags.
2.
t_audio.htm.bak.

Web-,

3. HTML- Web- t_audio.htm.bak


cmain Web- t_audio.htm. , Web- index.htm,
.
4. Web- t_audio.htm -,
Web-, Web-. :
, , -
.
<LINK> <SCRIPT>,
Web-:
<LINK REL="stylesheet" HREF="../main.css" TYPE="text/css">
<SCRIPT SRC="../ext-core.js"></SCRIPT>
<SCRIPT SRC="../main.js"></SCRIPT>

HTML-, Web- index.htm


t_img.htm:
<LI><A HREF="../index.htm">HTML</A>
<LI><CODE><A HREF="t_img.htm">IMG</A></CODE></LI>

- .
5. Web- t_audio.htm.
Web-, ,
.
Web- CSS, . css_index.htm,
samples_index.htm about.htm.
"" , ,
,
. - , .

16. Web-

273

Web-, - CSS . Web- .


, Web- , Web . , ,
.


.
, "" , ?
!
.
Web-, Web-
("HTML", "CSS" ""), ,
"" .
Web-, , , , Web .
.

display (. 9) Element, Web-.
Web- main.js - , onReady Ext, , 16.6.
16.6
function showInnerList(iIndex) {
var elNavbar = Ext.get("navbar");
var ceInnerLists = elNavbar.select("UL");
ceInnerLists.setDisplayed(false);
if (iIndex) {
var sSelector = "UL:nth(" + iIndex + ")";
elNavbar.child(sSelector).setDisplayed(true);
}
}

showInnerList
,
. ,
.

274

III. Web-. Web-

.
"" , :
var elNavbar = Ext.get("navbar");

:
var ceInnerLists = elNavbar.select("UL");

, setDisplayed
:
ceInnerLists.setDisplayed(false);

, showInnerList :
if (iIndex) {

, iIndex , true, .
iIndex null, false,
.
showInnerList , .
CSS, ,
:
var sSelector = "UL:nth(" + iIndex + ")";

:
elNavbar.child(sSelector).setDisplayed(true);
}

showInnerList .
,
onReady Ext, :
showInnerList(outerIndex);

showInnerList,
outerIndex.
, .
Web- index.htm ( <HEAD>)
:
<SCRIPT>
outerIndex = 1;
</SCRIPT>

outerIndex 1 , Web- index.htm ( "HTML"). Web-,

16. Web-

275

main.js, showInnerList, .
Web 2.0,
Web- .
, . . Web- Web- Web-
, Web- "" Web- .
Web- Web-, HTML. Web-.
Web- css_index.htm Web-,
CSS, :
<SCRIPT>
outerIndex = 2;
</SCRIPT>

, Web-
"CSS".
Web- samples_index.htm Web-,
, ... , . (: .)
Web- about.htm :
<SCRIPT>
outerIndex = null;
</SCRIPT>

"" ,

.
Web- . , ?

,

Web-
, , ,
"" Ext Core .
.
- , Web-.
"" ( , ). .

276

III. Web-. Web-

"" .
"" , , -

"" .
"" , ,
.

.
main.css 16.7.
16.7
.selected,
#navbar .selected
#navbar .selected
#navbar .selected
#navbar .selected
#navbar .selected

A:link,
A:focus,
A:hover,
A:active,
A:visited { color: #F8F8F8;
background-color: #576C8C }

selected, , , "" ,
, , .
. Web- main.js.
showInnerList, , , 16.8.
16.8
function selectItem(iIndex, sText) {
var elNavbar = Ext.get("navbar");
elNavbar.select("LI").removeClass("selected");
var ceInnerLists = elNavbar.select("UL");
ceInnerLists.setDisplayed(false);
var sSelector = "> LI:nth(" + iIndex + ")";
var elOuterItem = elNavbar.child(sSelector);
var elInnerList = elOuterItem.child("UL");
if (elInnerList) {
elInnerList.setDisplayed(true);
if (sText) {
sSelector = "LI:has(:nodeValue(" + sText + "))";
elOuterItem.child(sSelector).addClass("selected");
}
} else
elOuterItem.addClass("selected");
}

16. Web-

277

selectItem :
"" ,

,
.
"" ,

, ""
, , .
, -

, . , .
.
"" , :
var elNavbar = Ext.get("navbar");

, , "", selected:
elNavbar.select("LI").removeClass("selected");

.
:
var ceInnerLists = elNavbar.select("UL");
ceInnerLists.setDisplayed(false);

showInnerList .
, CSS, "" selectItem , :
var sSelector = "> LI:nth(" + iIndex + ")";
var elOuterItem = elNavbar.child(sSelector);

, , ,
:
var elInnerList = elOuterItem.child("UL");

, child Element, null.


, child :
if (elInnerList) {

Element,
true, . null,
false, .

III. Web-. Web-

278

, :
elInnerList.setDisplayed(true);

, selectItem
, :
if (sText) {

, CSS,
, ,
:
sSelector = "LI:has(:nodeValue(" + sText + "))";

,
, selected:
elOuterItem.child(sSelector).addClass("selected");
}

"" ,
selected:
} else
elOuterItem.addClass("selected");

.
, onReady Ext,
showInnerList. :
selectItem(outerIndex, innerText);

selectItem, outerIndex innerText.


, , , .
Web- index.htm, , , :
<SCRIPT>
outerIndex = 1;
innerText = null;
</SCRIPT>

, innerText null.
Web-, main.js,
selectItem,
. ,
.

16. Web-

279

Web- t_audio.htm
:
<SCRIPT>
outerIndex = 1;
innerText = "AUDIO";
</SCRIPT>


"AUDIO".
Web- Web- .


Web-, HTML CSS, .

Web- .
Web-. .
, -

sample. : -,
"" , -, , Web-.
-

.
,

( ":" ).
(. . -

) .

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

Web-.
main.css :
.sample

{ padding: 5px;
border: thin dotted #B1BEC6 }
.sample > :first-child { margin: 0px 0px;
cursor: pointer }

280

III. Web-. Web-

sample, "" .
.

(
) " ".
Web- main.js - , onReady Ext, 16.9.
16.9
function showHideSample(e, t) {
var elDiv = Ext.fly(t).parent(".sample");
var ceSampleText = elDiv.select("*:not(:first-child)");
ceSampleText.setVisibilityMode(Ext.Element.DISPLAY);
ceSampleText.toggle();
}
function prepareSamples() {
var ceSamples = Ext.select(".sample");
ceSamples.each(function(el, cl, ind){
var elH6 = el.child(":first");
elH6.on("click", showHideSample);
elH6.on("mouseover", function(e, t) {
Ext.get(this).parent("DIV").addClass("hovered");
});
elH6.on("mouseout", function(e, t) {
Ext.get(this).parent("DIV").removeClass("hovered");
});
var ceSampleText = el.select("*:not(:first-child)");
ceSampleText.setDisplayed(false);
});
}

showHideSample prepareSamples. click


.
: Web-
.
. prepareSamples.
sample, . .
:
var ceSamples = Ext.select(".sample");

:
ceSamples.each(function(el, cl, ind){

16. Web-

281

:
var elH6 = el.child(":first");

click

showHideSample:
elH6.on("click", showHideSample);

mouseover,
:
elH6.on("mouseover", function(e, t) {
Ext.fly(this).parent("DIV").addClass("hovered");
});

Web-, , . . ,
hovered.
- mouseout, hovered:
elH6.on("mouseout", function(e, t) {
Ext.fly(this).parent("DIV").removeClass("hovered");
});

- (
):
var ceSampleText = el.select("*:not(:first-child)");

:
ceSampleText.setDisplayed(false);
});

showHideSample.
Web-, :
var elDiv = Ext.fly(t).parent(".sample");


, .
- , :
var ceSampleText = elDiv.select("*:not(:first-child)");

,
display, (, , ,
):
ceSampleText.setVisibilityMode(Ext.Element.DISPLAY);
ceSampleText.toggle();

toggle , setDisplayed , Web- . , -

282

III. Web-. Web-

,
display, .
prepareSamples ,
onReady Ext:
prepareSamples();

Web-, HTML CSS,


sample. 16.10 HTML- Web-
t_audio.htm.
16.10
<DIV CLASS="sample">
<H6>:</H6>
<PRE>&lt;AUDIO SRC=&quot;sound.wav&quot;
CONTROLS&gt;&lt;/AUDIO&gt;</PRE>
<H6>:</H6>
<AUDIO SRC="sound.wav" CONTROLS></AUDIO>
</DIV>

Web- .

?
Web-.
Web- , , ,
Web-, . ,
Web. , , .
IV Web- Web: . Web- .
Ext Core .

IV

.

17.

18.

19.

17


Web-:
JavaScript, Web- Ext Core Web-, . Web .
Web-, ,
Web-, ""
, , . .
Web-, "". Web-.
- . . . - ,
.
, Web-.
Web-, -, ,
-, , -, .
.
.

Web-
10, Web-. .
Web-, , index.htm, Web. ? ,
Web-, , . Web HTML-.
HTML- Web-, . , HTML- ... ,
Web-: , , .

286

IV. .

( ) , ,
, , . Web-,
( , Web- .)
, .
: HTML-, index.htm, Web- . Web-
Web- . Web-, , .
Web-, , css_index.htm.
: Web-, .
.
Web-,
. Web-, , .
, Web- .
, HTML-
Web- Web-
, . ( 16, , .)
: Web-, Web-,
.
Web- .
Web- Web-, , . , Web-, , .
, Web-, ,
Web-. Web-.
Web-.
- Web- , , , HTML- Web- Web-. , , , , ...
.
1. : Web- Web-
Web-, .
, .
Web-, , -

Web- Web-, ,

17.

287

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

HTML-, .
Web- ( )
, , , ,
.
Web .
. -,
Web- ,
HTML-, , Web- Web-. -, - Web-, :
Web-, .
, Web-, ""
, , .
Web-, ? , Web-
. Ext Core ,
JavaScript-.

Web-
Web- Web- Ext Core
load Element:
< Element>.load(<->|<>)

load - ,
Web-,
, .
:
url - .

.
success , ,

.
failure , ,

.
callback , ,

, .

288

IV. .

timeout

(-), Web . , Ext Core , . - ;


30 000 (30 ).
, success failure, .
, callback, : , load , ,
true false .
load Web-, .
.
! load Web-
( , ). ,
. .
, - ? , load . success,
, .
, ,
. ( , callback
, ,
.)
!
Web- , Ext Core, ,
, Web- Web-. Web-, , Web-.

1 Web- Microsoft Internet


Information Services. , , "" .
.


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

17.

289

!
Web-, , Web-. Web- ! "" Web- ,
.

, , Web-. Site 2. Web- (Site 1) main.css, main.js ext-core.js. chapters (


Web- ), tags ( Web- HTML), attrs
( Web-, CSS) samples ( Web-
).
Web- index.htm Web-
Site 2. cmain
.
Web- index.htm Web-
chapters, Site 2, html.htm. ,
cmain, .
Web- Web-.
, - Web- .
Web- index.htm Web- , Web-.
, - (, - ) Web-
index.htm .
Web- . .
Web- index.htm Web-
, outerIndex innerText. , .
main.js Web-,
selectItem . , ,
, onReady Ext.

-, "".
?
,
. .
, click
. . -, , -

290

IV. .

, , cmain. ,
( , 16). -, .
"" ,

, , :
(
). , ;
(
, , , ).
, ;
, , .
"" , , :
( );
(
,
, ,
);
, .
, :
(
,
);
, .
. , , Web- index.htm .
,
sample ("" ). cmain , , . .
, , .
, . !

17.

291

main.js :
var elLastInnerList = null;
var elLastItem = null;

elLastInnerList elLastItem null.


, .
loadFragment, click
( 17.1). :
, , Element EventObject, . .
17.1
function loadFragment(elLI, e) {
if (e)
e.stopEvent();
var elA = elLI.child("A");
if (elA) {
cleanupSamples();
var href = elA.getAttribute("HREF");
Ext.get("cmain").load({ url: href, success: prepareSamples });
if (elLI.parent("UL").id == "navbar") {
var elInnerList = elLI.child("UL");
if (elInnerList) {
if (elLastItem) {
elLastItem.removeClass("selected");
elLastItem = null;
}
if ((elLastInnerList) && (elLastInnerList.dom !=
elInnerList.dom))
elLastInnerList.setDisplayed(false);
elInnerList.setDisplayed(true);
elLastInnerList = elInnerList;
} else {
if (elLastInnerList) {
elLastInnerList.setDisplayed(false);
elLastInnerList = null;
}
if ((elLastItem) && (elLastItem.dom != elLI.dom))
elLastItem.removeClass("selected");
elLI.addClass("selected");
elLastItem = elLI;
}

292

IV. .
} else {
if ((elLastItem) && (elLastItem.dom != elLI.dom))
elLastItem.removeClass("selected");
elLI.addClass("selected");
elLastItem = elLI;
}

}
}

17.1 .
loadFragment
EventObject, ,
:
if (e)
e.stopEvent();

- click Web- ( 16).


, , :
var elA = elLI.child("A");

, :
if (elA) {

cleanupSamples,
:
cleanupSamples();

.
- :
var href = elA.getAttribute("HREF");

cmain , -:
Ext.get("cmain").load({ url: href, success: prepareSamples });

prepareSamples,
. 16.
,
, , navbar :
if (elLI.parent("UL").id == "navbar") {

, , "" navbar,
.

17.

293

"" , , , , :
var elInnerList = elLI.child("UL");

, :
if (elInnerList) {

, ,
- , . . elLastItem - , null:
if (elLastItem) {
elLastItem.removeClass("selected");
elLastItem = null;
}

, selected,
, elLastItem null, , .
, - ( elLastInnerList - , null),
, , :
if ((elLastInnerList) && (elLastInnerList.dom !=
elInnerList.dom))
elLastInnerList.setDisplayed(false);

, .
, , ,
. Element,
Ext Core, HTMLElement Web-.
, Ext Core Element, , Web-. HTMLElement, Web-,
.
HTMLElement,
dom Element. 15.
, ,
:
elInnerList.setDisplayed(true);

... elLastInnerList:
elLastInnerList = elInnerList;

IV. .

294

"" ,
, , :
} else {

, - (
elLastInnerList - , null):
if (elLastInnerList) {
elLastInnerList.setDisplayed(false);
elLastInnerList = null;
}

,
elLastInnerList null, ,
.
, - ( elLastItem - , null),
, :
if ((elLastItem) && (elLastItem.dom != elLI.dom))
elLastItem.removeClass("selected");

HTMLElement Web-.
- ,
, , selected
.
, ,
selected:
elLI.addClass("selected");

elLastItem:
elLastItem = elLI;
}

, , , :
} else {

:
if ((elLastItem) && (elLastItem.dom != elLI.dom))
elLastItem.removeClass("selected");
elLI.addClass("selected");
elLastItem = elLI;
}
}

, - ,
, . , -

17.

295

, selected . ,
, selected,
elLastItem. loadFragment
.
hideInnerLists,
Web- index.htm. :
function hideInnerLists() {
var ceInnerLists = Ext.get("navbar").select("UL");
ceInnerLists.setDisplayed(false);
}

. ,
"" navbar, .
cleanupSamples ( 17.2). , (,
sample).
17.2
function cleanupSamples() {
var ceSamples = Ext.select(".sample");
ceSamples.each(function(el, cl, ind){
var elH6 = el.child(":first");
elH6.removeAllListeners();
});
}

Web- sample,

.
, onReady Ext. , , click .
, :
ceLinks.on("click", function(e, t){ loadFragment(Ext.get(this), e) });


loadFragment. Element, , , HTMLElement, this, EventObject, - .
, onReady Ext,
:

296

IV. .

hideInnerLists();
loadFragment(Ext.get("navbar").child("> LI:first"));

hideInnerLists, . Web index.htm.


loadFragment "" navbar ("HTML"). cmain HTML ( html.htm, chapters).
main.js. Web- . , Web-, Microsoft
Internet Information Services. ( 1.)
( )
Web- Web-
( c:\Inetpub\wwwroot).
Site 2 (
Web-).
!

Web-. .


, : Web Web- .

Web- Web-,
- http://localhost. -,
1, .
Web- Web- , ,
cmain HTML ( "HTML" ).
,
cmain. , .
!

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

18


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

.

Web-, ,
, HTML-,
, Web-.
Web-, , .
Web- ?
! , , , Web-,
Web- Web- ( main.js).
, Web- - ( ". ").
, ,
. Web-
( , , ).
.
HTML- Web-. , - Web- , ,

298

IV. .

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

Ext Core, , HTML-,
. Web- .
, , ,
. Web-,
, , : , , . ?
, . , , .
?
. ? , ,
: , , Web- . .
.
.
: , , , .
JavaScript, : , , . , , .
. ,
. , , , ,
. , - ; ,
, Web , .
JavaScript.
.
, ,

, Object, . . . (
, , .)
,
JavaScript, ,
. .
, "" ,
, , Web-. ""

18.

299

, "" . ,
"" .
JavaScript-, , Web. Web-, .
,
Web- Web-, .

, . ""
, Microsoft Access, Microsoft SQL Server, Oracle,
MySQL, Embarcadero Interbase ., .

.
?
, -.
"" -

, Web- .
"" -

, Web-.
-

Web- .
, ,
, Web-.
!


Web-.
, Web- ( ) .

.
19 Web- ". ",

Web- "" .
Web-, ,

, .
Web-
Element Ext Core (. 15).
, .

300

IV. .


Web- - ,
. .
, Web, , , HTML, CSS
. ,
Web- - .
, . !
data.js Site 2.
, 18.1.
18.1
var aHTML =
aHTML[0] =
aHTML[1] =
aHTML[2] =
aHTML[3] =
aHTML[4] =
aHTML[5] =
aHTML[6] =
aHTML[7] =
aHTML[8] =
aHTML[9] =
aHTML[10] =
aHTML[11] =
var aCSS =
aCSS[0] =
aCSS[1] =
aCSS[2] =

[];
{ name:
{ name:
{ name:
{ name:
{ name:
{ name:
{ name:
{ name:
{ name:
{ name:
{ name:
{ name:

"!DOCTYPE", url: "tags/t_doctype.htm" };


"AUDIO", url: "tags/t_audio.htm" };
"BODY", url: "tags/t_body.htm" };
"EM", url: "tags/t_em.htm" };
"HEAD", url: "tags/t_head.htm" };
"HTML", url: "tags/t_html.htm" };
"IMG", url: "tags/t_img.htm" };
"META", url: "tags/t_meta.htm" };
"P", url: "tags/t_p.htm" };
"STRONG", url: "tags/t_strong.htm" };
"TITLE", url: "tags/t_title.htm" };
"VIDEO", url: "tags/t_video.htm" };

[];
{ name: "border", url: "attrs/a_border.htm" };
{ name: "color", url: "attrs/a_color.htm" };
{ name: "margin", url: "attrs/a_margin.htm" };

var aSamples =
aSamples[0] =
aSamples[1] =
aSamples[2] =

[];
{ name: "", url: "samples/a_hyperlinks.htm" };
{ name: "", url: "samples/a_containers.htm" };
{ name: "", url: "samples/a_tables.htm" };

aHTML, aCSS aSamples,


Web-, , , HTML, CSS
.
:
name ;
url - .

18.

301

UTF-8. , , .
Web- index.htm
:
<SCRIPT SRC="data.js"></SCRIPT>

Web- data.js.
.
, Web- Web- index.htm. , Web, main.js ( Web), .


, .
Web- index.htm , .
HTML-, ,
, . 18.2.
18.2
<UL ID="navbar">
<LI><A HREF="chapters/html.htm">HTML</A>
<UL>
</UL>
</LI>
<LI><A HREF="chapters/css.htm">CSS</A>
<UL>
</UL>
</LI>
<LI><A HREF="chapters/samples.htm"></A>
<UL>
</UL>
</LI>
<LI><A HREF="chapters/about.htm"> </A></LI>
</UL>

Web- main.js
onReady Ext 18.3.
18.3
function generateInnerList(aDataBase, elInnerList) {
for (var i = 0; i < aDataBase.length; i++) {

302

IV. .
var s = "<LI><CODE><A HREF=\"" + aDataBase[i].url + "\">" +
aDataBase[i].name + "</A></CODE></LI>";
elInnerList.insertHtml("beforeEnd", s);

}
}

generateInnerList,
. :
;

;
, ,

Element.
. .
, :
for (var i = 0; i < aDataBase.length; i++) {

i, 0, , (
length Array; 14), .
, ,
.
HTML-, :
var s = "<LI><CODE><A HREF=\"" + aDataBase[i].url + "\">" +
aDataBase[i].name + "</A></CODE></LI>";

- , .
, :
elInnerList.insertHtml("beforeEnd", s);
}

, , "beforeEnd"
.
.
. , , generateInnerList.
, onReady Ext, :
generateInnerList(aHTML, Ext.get("navbar").child("> LI:nth(1) UL"));
generateInnerList(aCSS, Ext.get("navbar").child("> LI:nth(2) UL"));
generateInnerList(aSamples, Ext.get("navbar").child("> LI:nth(3) UL"));

18.

303

generateInnerList,
, , , .
,
. .
, Web-, HTML-.
Web- index.htm, - http://localhost
Web-, .


, Web-, , . .
Web- data.js aCSS :
aCSS[3] =
aCSS[4] =

{ name: "font-family", url: "attrs/a_font-family.htm" };


{ name: "font-size", url: "attrs/a_font-size.htm" };

Web- index.htm Web-. ,


( CSS)
. , .
, aCSS.
generateInnerList ""
, .
- , ! , aCSS.
JavaScript Array sort.
, :
<>.sort([< >])

,
.
( ,
, ).
, .
,
, . ,
.
sort , .

, ,
"".

304

IV. .

"" ,

( 1).
"", 0.
"" , ( 1).
( 18.4),
aHTML, aCSS aSamples name . 14 .
18.4
function sortArray(c1, c2) {
if (c1.name < c2.name)
return -1
else
if (c1.name > c2.name)
return 1
else
return 0;
}

18.4 Web- data.js, .


, , .
, :
aHTML.sort(sortArray);
aCSS.sort(sortArray);
aSamples.sort(sortArray);

. Web- index.htm ,
.
.

?
Web- ,
Web-. , , JavaScript .
,
, .
. ,
JavaScript. JavaScript ...

19


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

". " Web- Web-.
Web- : HTML CSS, , . ". "
.

JavaScript. - .


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

306

IV. .

, " ",
Web-, , .
, Web- ,
.
Web- Web-, ,
Web-, . , .
, , 18.
, - Web-,
Web. ,
JavaScript.
, , , , "" .
, , , . , -, W3C. -,
Web-. .
,

, "" :
JavaScript, .
, , , Web- . ,
Web-
.


JavaScript
, ". " Web.
Web-, HTML

CSS .
Web- -

19.

307

Web- , -

.
". " , Web-. - .
?
18 , Web-
Web- - .
; Web- , - - , .
: Web- , "" , Web-. Web-, ""
". ". 18, , .
"" Web, -. 18, . "" , data.js, - ,
, , "" ,
.
.
( ) "" , , . , 14:
, . , ""
, ""
.
"" "" JavaScript. " ".
"" Web-, ( ), ,
HTML- Web- (,
). Web-
, .
. , , Web-, Web-, .
.

308

IV. .

?
,
". ", "" . , Web-, related.
aHTML, aCSS aSamples, Web-. , . .
- , Web-,
". ", .
" ".
JavaScript.
! Web- data.js, ,
, aHTML, aCSS aSamples,
:
aHTML[0].related =

[aHTML[4], aHTML[7], aHTML[10]];

aHTML ( 0),
related
, , ( 4, 7 10) . , Web-
<!DOCTYPE> Web- <HEAD>, <META> <TITLE>.
,
aHTML, aCSS aSamples? , , , .
undefined,
.
:
aHTML[8].related =

[aHTML[3], aHTML[9], aCSS[0]];

, Web- <P> ( Web aHTML 8)


Web- <EM> <STRONG> border.
Web- Web. , ,
.

". "
". " .

Web-.
". " Web-.
Web- .

19.

309

". ".
.
Web- main.js
generateInnerList, , ,
. , ,
19.1.
19.1
function generateInnerList(aDataBase, elInnerList) {
for (var i = 0; i < aDataBase.length; i++) {
var s = "<LI><CODE><A HREF=\"" + aDataBase[i].url + "\">" +
aDataBase[i].name +
"</A></CODE></LI>";
var htelItem = elInnerList.insertHtml("beforeEnd", s);
htelItem.related = aDataBase[i].related;
}
}

14 ,
,
, . , , - Web-,
related.
HTMLElement, , Web-. insertHtml (. 19.1) HTMLElement, .

.
prepareSamples, , , . , each,
:
generateRelated();

generateRelated, ". " .


. 19.2
generateRelated.
19.2
function generateRelated() {
var s = "";

310

IV. .

var oRelated = elLastItem.dom.related;


if (oRelated) {
for (var i = 0; i < oRelated.length; i++) {
if (s != "")
s += ", ";
s += "<CODE><A HREF=\"" + oRelated[i].url + "\">" +
oRelated[i].name + "</A></CODE>";
}
var htelRelated = Ext.get("cmain").insertHtml("beforeEnd",
"<P>. : " + s + "</P>");
Ext.fly(htelRelated).select("A").on("click", function(e, t) {
var href = Ext.fly(this).getAttribute("href");
var elA = Ext.get("navbar").child("A[href=" + href + "]");
var elItem = elA.parent("LI");
loadFragment(elItem, e);
});
}
}

.
s, HTML-,
". " :
var s = "";

, , ,
Web- (, ). ? , 17 elLastItem. ,
.
:
var oRelated = elLastItem.dom.related;

elLastItem Element. HTMLElement dom.


HTMLElement, ,
related, , Web-
;
( generateInnerList).
, HTMLElement, . .
Web- :
if (oRelated) {

, ,
:
for (var i = 0; i < oRelated.length; i++) {

19.

311

HTML-, ". ", , s:


if (s != "")
s += ", ";

, . , s , . .
, , ,
.
HTML-, Web-
, s:
s += "<CODE><A HREF=\"" + oRelated[i].url + "\">" +
oRelated[i].name + "</A></CODE>";
}

.
HTML- ,
". ". cmain (
):
var htelRelated = Ext.get("cmain").insertHtml("beforeEnd",
"<P>. : " + s + "</P>");


click,
:
Ext.fly(htelRelated).select("A").on("click", function(e, t) {

HREF -
, :
var href = Ext.fly(this).getAttribute("href");

navbar -:
var elA = Ext.get("navbar").child("A[href=" + href + "]");

-,
.
, :
var elItem = elA.parent("LI");

, EventObject,
, "" 17 loadFragment.
:
loadFragment(elItem, e);
});
}

312

IV. .

generateRelated .
, cleanupSamples. , ,
. , Ext Core Web-.
, ". ". cmain .
19.3 cleanupSamples.
19.3
function cleanupSamples() {
var ceSamples = Ext.select(".sample");
ceSamples.each(function(el, cl, ind){
var elH6 = el.child(":first");
elH6.removeAllListeners();
});
var ceA = Ext.get("cmain").select("A");
ceA.removeAllListeners();
}

, . ". " Web- .


. - , Web- Web-
". ". , Web- HTML ( "HTML"), , Web- CSS ( "CSS"). , Web- HTML
( ); , , Web-
, ,
.
". ",
Web- CSS ( ),
Web- . , ( Web- )
, , , . ! .
, , 17 Web-, , , .

19.

313

, ,
Web-.
loadFragment , , .
generateRelated,
". "
click. , -, , , "" . "" !
: loadFragment ,
, "", , ,
. , 19.4.
19.4
. . .
} else {
if ((elLastItem) && (elLastItem.dom != elLI.dom))
elLastItem.removeClass("selected");
elLI.addClass("selected");
elLastItem = elLI;
}

,
"" . , 19.5.
19.5
} else {
var elInnerList = elLI.parent("UL");
if ((elLastInnerList) && (elLastInnerList.dom != elInnerList.dom))
elLastInnerList.setDisplayed(false);
elInnerList.setDisplayed(true);
elLastInnerList = elInnerList;
if ((elLastItem) && (elLastItem.dom != elLI.dom))
elLastItem.removeClass("selected");
elLI.addClass("selected");
elLastItem = elLI;
}

,
, , , , , , .
... --!

314

IV. .

Web- index.htm
. Web-, -
http://localhost,
". " Web- . !
". " .
.
. , ,
. ; .

?

JavaScript.
Web- Web- ". ", Web- .
, Web-
. .
,
.


20.

Web-

21.

Web-

22.

20

Web-

. -,
Web- Web. -, Web-,
, Web-. -, Web-,
HTML, CSS , ". ",
Web- .
,
.
. , Web. : , Web-
Web- Web-.
, :
- , ;
Web-, , ,
;
Web-, .
. , , , Web-.
Web-, ,
, ,
, Web-.
? ,
Web- Windows: , , , .
?

Web- HTML
. HTML
. "" -

V.

318

: , , , , , , . Web-;
.
, HTML, .
, , , , , . (, "" ,
.) . , ,
Web- .

JavaScript- : , , "", , ,
"" Microsoft Office 2007 "". , , Ext, Ext Core.

HTML , Web. Web- Web-, "" . Web- (, , - ); Web-


. Web- HTML
.
HTML ,
Web- .
.

Web- .

HTML Web- Web- JavaScript. ?
Web-, : ,
Web-, -, -, .
Web- ,
Web-, . Web-
Web-.
HTML Web-
, .

20. Web-

319

.
, Web-

Web-, .
, Web- -

.
Web- -

, -.
Web- , -

.
.
Web-

Web-.
Web- Web-

.

, Web- "" .
- . -, -

, http://www.somesite.ru/apps/
app.exe.
, , -

. HTML .
GET
< >=< >. ( ,
Web- .) , ? ( ); & (). - Web-,
- .
POST <
>=< >. -, , .
.

POST; GET .
, Web- .
-, . HTML,
.

V.

320

!
Web-
, Web-. , ,
.

Web-
HTML CSS, Web- , Web Ext Core . .

Web-
Web- <FORM>, , , Web-:
<FORM>
<, >
</FORM>

Web- Web-. (
. 2.)
<FORM> ACTION, - . Web- ,
Web-, "" - #:
<FORM ACTION="#">
. . .
</FORM>


HTML
<INPUT>. ,
TYPE . ,
, . .
ID, CLASS STYLE. , ,
Web-,
.
, , ,
Web-, ,
< >=< >, -

20. Web-

321

. , ,
, NAME ID! , .
ID, ,
Web-, . ,
.
ID NAME
.
.
HTML Web (. 3).
HTML .


Web-
<INPUT>:
<INPUT [TYPE="text"] [VALUE="< >"] [SIZE="<>"]
[MAXLENGTH="< >"] [DISABLED]
[TABINDEX="< >"] [ACCESSKEY="< >"]
[READONLY] [AUTOFOCUS]>

TYPE, , .
"text" Web- .
, TYPE ( , ).
VALUE , . , .
SIZE .
, Web-.
MAXLENGTH , , . ,
.
TABINDEX ACCESSKEY , ,
"" .
(. 6).
DISABLED
; ,
. , ,
.
READONLY ; - , -

V.

322

. , , , .
AUTOFOCUS ,
Web-. , <Tab> <Shift>+<Tab>.
!
AUTOFOCUS
Web-.
20.1
<FORM ACTION="#">
<P>: <INPUT TYPE="text" ID="name1" NAME="name1" SIZE="20"
AUTOFOCUS></P>
<P>: <INPUT TYPE="text" ID="name2" NAME="name2" SIZE="30"></P>
</FORM>

20.1 Web- : name1


20 , Web-,
name2 30 . ,
.
, Web-
. , Web : , , .


, .
.
<INPUT>:
<INPUT TYPE="password" [VALUE="< >"]
[SIZE="<>"] [MAXLENGTH="< >"]
[TABINDEX="< >"] [ACCESSKEY="< >"]
[DISABLED] [READONLY] [AUTOFOCUS]>

"password" TYPE Web-


. .
20.2
<FORM ACTION="#">
<P>: <INPUT TYPE="text" ID="login" NAME="login" SIZE="20"

20. Web-

323

AUTOFOCUS></P>
<P>: <INPUT TYPE="password" ID="password" NAME="password"
SIZE="20"></P>
</FORM>

20.2 Web- . login, 20 ,


Web-. password, 20 .


HTML 5.
, .

<INPUT>:
<INPUT TYPE="search" [VALUE="< >"]
[SIZE="<>"] [MAXLENGTH="< >"]
[TABINDEX="< >"] [ACCESSKEY="< >"]
[DISABLED] [READONLY] [AUTOFOCUS]>

"search" TYPE Web-


.
( 20.3).
20.3
<FORM ACTION="#">
<P>: <INPUT TYPE="search" ID="keyword" NAME="keyword"
SIZE="40"></P>
</FORM>


<TEXTAREA>:
<TEXTAREA [ROWS="<>"] [COLS="<>"] [WRAP="off|soft|hard"]
[TABINDEX="< >"] [ACCESSKEY="< >"]
[DISABLED] [READONLY] [AUTOFOCUS]>
< >
</TEXTAREA>

, ,
<TEXTAREA>. HTML-.
ROWS . , Web.

324

V.

COLS . , Web.
WRAP
. WRAP :
"soft"
. , , .
"hard"

. , , .
WRAP , ,
"soft".
, <TEXTAREA>, ( 20.4).
20.4
<FORM ACTION="#">
<P>
Web-:<BR>
<TEXTAREA ID="opinion" NAME="opinion" COLS="60" ROWS="10">
Web-!
</TEXTAREA>
</P>
</FORM>

- .
<INPUT>:
<INPUT TYPE="button" VALUE="<>"
[TABINDEX="< >"] [ACCESSKEY="< >"]
[DISABLED] [AUTOFOCUS]>

"button" TYPE Web- . VALUE, , . ( 20.5).


20.5
<FORM ACTION="#">
<P>
:
<INPUT TYPE="search" ID="keyword" NAME="keyword" SIZE="40">

20. Web-

325

<INPUT TYPE="button" ID="find" NAME="find" VALUE="!">


</P>
</FORM>

Web- , , - .
<INPUT>:
<INPUT TYPE="checkbox" [CHECKED]
[TABINDEX="< >"] [ACCESSKEY="< >"]
[DISABLED] [AUTOFOCUS]>

"checkbox" TYPE Web-


.
CHECKED . , , .
( 20.6).
20.6
<FORM ACTION="#">
<P>
<INPUT TYPE="checkbox" ID="updates" NAME="updates" CHECKED>
Web-
</P>
</FORM>

Web-, Windows-,
.
.
.
! , Web- ,
NAME. ,
.
.
NAME . , , , , NAME,
.
, , ID,
. Web- , .

326

V.

<INPUT>:
<INPUT TYPE="radio" [CHECKED]
[TABINDEX="< >"] [ACCESSKEY="< >"]
[DISABLED] [AUTOFOCUS]>

"radio" TYPE Web-


. .
. , CHECKED
. 20.7 .
20.7
<FORM ACTION="#">
<P>
<INPUT TYPE="radio" ID="updates_yes" NAME="updates" CHECKED>
Web-
</P>
<P>
<INPUT TYPE="radio" ID="updates_no" NAME="updates">
Web-
</P>
</FORM>

,
, , ,
<SELECT>, <OPTION>,
.
<SELECT>, :
<SELECT [SIZE="< ()>"] [MULTIPLE]
[TABINDEX="< >"] [ACCESSKEY="< >"]
[DISABLED] [AUTOFOCUS]>
< <OPTION>, >
</SELECT>

SIZE (
). , , , , .
, ( ).
MULTIPLE ,
. ,
,
. , -

20. Web-

327

( SIZE ,
1);
.
.
<OPTION> .
<SELECT>:
<OPTION [LABEL="< >"] [SELECTED] [DISABLED]>
[< >]
<OPTION>

<OPTION>, LABEL.
SELECTED . ,
, .
DISABLED
. 20.8 .
20.8
<FORM ACTION="#">
<P>

<SELECT ID="search_in" NAME="search_in">
<OPTION></OPTION>
<OPTION> </OPTION>
<OPTION SELECTED> </OPTION>
</SELECT>
</P>
</FORM>

HTML - . <OPTGROUP>;
, , .
<OPTGROUP> <SELECT>:
<OPTGROUP LABEL="< >" [DISABLED]>
< <OPTION>, , >
<OPTGROUP>

LABEL .
DISABLED ( 20.9).

328

V.

20.9
<FORM ACTION="#">
<P>

<SELECT ID="search_in" NAME="search_in">
<OPTGROUP LABEL=" ">
<OPTION></OPTION>
<OPTION> </OPTION>
</OPTGROUP>
<OPTION SELECTED> </OPTION>
</SELECT>
</P>
</FORM>

, .
, .
, .
<LABEL>:
<LABEL [FOR="< , >"]
[TABINDEX="< >"] [ACCESSKEY="< >"]>
< >[< >]
</LABEL>

,
. .
( 20.10) , , ID. (,
.) FOR <LABEL>, .
20.10
<FORM ACTION="#">
<P><LABEL FOR="keyword">:</LABEL>
<INPUT TYPE="search" ID="keyword" NAME="keyword"
SIZE="40"></P>
</FORM>

( 20.11) , , <LABEL>, ,
.

20. Web-

329

20.11
<FORM ACTION="#">
<P><LABEL>: <INPUT TYPE="search" ID="keyword" NAME="keyword"
SIZE="40"></LABEL></P>
</FORM>

Web- . Web-
, .

"" . , .
, , ,
, .
<FIELDSET>:
<FIELDSET>
< , >
</FIELDSET>

, , , , <FIELDSET>.
, <FIELDSET> <LEGEND>, :
<LEGEND [ACCESSKEY="< >"]>< ></LEGEND>

.
<LEGEND>
<FIELDSET>, </FIELDSET>. , . 20.12 .
20.12
<FORM ACTION="#">
<FIELDSET>
<LEGEND>:</LEGEND>
<P>
<INPUT TYPE="search" ID="keyword" NAME="keyword" SIZE="40">
<INPUT TYPE="button" ID="find" NAME="find" VALUE="!">
</P>
</FIELDSET>
</FORM>

330

V.


HTML , . Web-
, Web-,
.
, ,
. TYPE
<INPUT> "submit".
, Web- .
Web- ,
HTML-. TYPE <INPUT>, , "reset".
, ( , ).
,
Windows,
.

TYPE <INPUT> "file". <INPUT>
ACCESSKEY, AUTOFOCUS, DISABLED, SIZE TABINDEX.
, Web- . ,
.
<INPUT>.
TYPE "image". SRC , ALT ( . 4). ACCESSKEY, AUTOFOCUS,
DISABLED TABINDEX <INPUT>.
,
Web-. - , ,
.
<INPUT>. TYPE
"hidden". VALUE <INPUT>
.

CSS,

CSS ,
.
.

20. Web-

331

:enabled , -

.
:disabled , -

.
:checked .

20.13 .
20.13
:disabled { color: #B1BEC6 }
:checked { font-weight: bold }
. . .
<FORM ACTION="#">
<P>
<INPUT TYPE="radio" ID="updates_yes" NAME="updates" CHECKED>
Web-
</P>
<P>
<INPUT TYPE="radio" ID="updates_no" NAME="updates" CHECKED >
Web-
</P>
<P> : <INPUT TYPE="text" ID="email" NAME="email"
DISABLED></P>
</FORM>


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

HTMLElement,

Web, . :
Web-, HTMLElement.

332

V.

disabled . true
, false . 20.14 .
20.14
<FORM ACTION="#">
<P>
<INPUT TYPE="checkbox" ID="updates" NAME="updates">
Web-
</P>
<P> : <INPUT TYPE="text" ID="email" NAME="email"></P>
</FORM>
. . .
Ext.getDom("email").disabled = false;

getDom HTMLElement, email,


, disabled false.
readOnly . true , false :
Ext.getDom("email").readOnly = false;

value , , :
var sEmail = Ext.getDom("email").value;

checked . true , , false :


Ext.get("updates").on("click", function() {
var htelEmail = Ext.getDom("email");
htelEmail.disabled = this.checked;
});

updates click,
.
email, , .
, this, Web-, , HTMLElement.
Ext Core!
20.15.

20. Web-

333

20.15
<FORM ACTION="#">
<P>
<INPUT TYPE="radio" ID="updates_yes" NAME="updates" CHECKED>
Web-
</P>
<P>
<INPUT TYPE="radio" ID="updates_no" NAME="updates">
Web-
</P>
<P> : <INPUT TYPE="text" ID="email" NAME="email"></P>
</FORM>
. . .
Ext.get("updates_yes").on("click", function() {
var htelEmail = Ext.getDom("email");
htelEmail.disabled = this.checked;
});

20.15 ,
updates2. ,
updates_yes.
,
, . .
selectedIndex
. :
,
;
,

;
, 1.
, selectedIndex ,
.
, . 20.16 .
20.16
<FORM ACTION="#">
<P>

<SELECT ID="search_in" NAME="search_in">
<OPTION></OPTION>
<OPTION> </OPTION>

334

V.

<OPTION SELECTED> </OPTION>


</SELECT>
</P>
</FORM>
. . .
var iIndex = Ext.getDom("search_in").selectedIndex;
if (iIndex == -1) {
// ,
} else {
// - ,
}

options .
HTMLOptionsCollection:
var clItems = Ext.getDom("search_in").options;

length HTMLOptionsCollection , . . :
var iItemsCount = clItems.length;

, :
var htelSecondItem = clItems[1];

.
HTMLOptionElement.
disabled,
.
selected, ,
. true , , false
. , ,
, ( 20.17).
20.17
<FORM ACTION="#">
<P>
HTML ?
<SELECT ID="answer" NAME="answer" SIZE="5" MULTIPLE>
<OPTION>TR</OPTION>
<OPTION>DIV</OPTION>
<OPTION>TABLE</OPTION>
<OPTION>TH</OPTION>
<OPTION>TT</OPTION>
<OPTION>HEAD</OPTION>
<OPTION>TD</OPTION>
</SELECT>

20. Web-

335

</P>
</FORM>
. . .
var clItems = Ext.getDom("answer").options;
if ((clItems[0].selected) && (clItems[2].selected)
&& (clItems[3].selected) && (clItems[6].selected)) {
var s = " !";
} else {
var s = "! .";
}

20.17 - .
answer , HTML, . ,
.
form HTMLElement, Web, :
var htelForm = Ext.getDom("answer").form;

focus . :
Ext.getDom("email").focus();

blur , , ;
.
:
Ext.getDom("email").blur();

select .
:
Ext.getDom("email").select();

click . ( 20.18).
20.18
<FORM ACTION="#">
<P>
:
<INPUT TYPE="search" ID="keyword" NAME="keyword" SIZE="40">
<INPUT TYPE="button" ID="find" NAME="find" VALUE="!">
</P>
</FORM>
. . .
Ext.getDom("find").click();

V.

336

Element,

Element Ext Core ,
.
getValue , , :
< Element>.getValue(< >)

false, .
true,
; :
var sEmail = Ext.get("email").getValue(false);

focus . . Web, , :
Ext.get("email").focus();

blur ;
:
Ext.get("email").blur();

.
Web-, , .
select :checked.
:
var clChecked = Ext.get("cmain").select(":checked");


, ,
. 20.1. .
20.1. ,

blur

, . . ,

change

.
. ,

20. Web-

337
20.1 ()

click

, , . .
,

focus

, . .
,

select


. . ,

dblclick, keydown, keypress,


keyup, mousedown, mousemove, mouseout, mouseover mouseup, . 15.1.

Web-
, Web- , . .
Web-. , , 18. . , 19 ". " Web-, .
, ,
-, Web-, -, ,
Web-. , .
, , <AUDIO>, "" "", Web , .
, : , ,
. , . . Web- .
, .
, , ,
, ,
, .
, , ,
Web-, cmain. ". ".

V.

338

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


, Web-, .

keyword, .
, , .
Web- data.js ,
related , , ,
:
aHTML[0].keyword =

",";

aHTML ( 0),
keyword "" "". , , Web-
<!DOCTYPE> .
Web- Web. ,
.

Web-
Web-,
. ?
cnavbar, ,
</DIV>, . 21 Web-
.
"" Web- :
"", , Web-;
,

;
, ;
( , -

).

20. Web-

339

Web- ,
(. 3). , , .
, , , Web Web- .
keyword, find,
search_in.
20.19 HTML-, Web-.
20.19
<FORM ACTION="#">
<P>
:<BR>
<INPUT TYPE="search" ID="keyword" NAME="keyword" SIZE="20">
<INPUT TYPE="button" ID="find" NAME="find" VALUE="!"><BR>
<SELECT ID="search_in" NAME="search_in">
<OPTION> </OPTION>
<OPTION> </OPTION>
<OPTION SELECTED> </OPTION>
</SELECT>
</P>
</FORM>

html.htm.
, Web- Web. HTML- ,
.

Web-,
Web-, Web-, .
Web- main.js - , onReady Ext, :
Ext.get("find").on("click", searchData);

click find - searchData,



. find Web- ,
click, , .
searchData. ,
. ( 20.20) - onReady Ext.

340

V.

20.20
function searchData() {
var sKeyword = Ext.get("keyword").getValue(false);
if (sKeyword != "") {
var iSearchMode = Ext.getDom("search_in").selectedIndex;
var aResult = [];
searchInArray(sKeyword, aHTML, aResult, iSearchMode);
searchInArray(sKeyword, aCSS, aResult, iSearchMode);
searchInArray(sKeyword, aSamples, aResult, iSearchMode);
if (aResult.length > 0) {
var s = "";
for (var i = 0; i < aResult.length; i++) {
s += "<LI><A HREF=\"" + aResult[i].url + "\">" +
aResult[i].name + "</A></LI>";
}
var htelResult = Ext.get("cmain").insertHtml("beforeEnd",
"<P> :</P><UL>" + s + "</UL>");
Ext.fly(htelResult).select("A").on("click", function(e, t) {
var href = Ext.fly(this).getAttribute("href");
var elA = Ext.get("navbar").child("A[href=" + href + "]");
var elItem = elA.parent("LI");
loadFragment(elItem, e);
});
}
}
}

.
, keyword:
var sKeyword = Ext.get("keyword").getValue(false);

, - :
if (sKeyword != "") {

, ,
search_in:
var iSearchMode = Ext.getDom("search_in").selectedIndex;

, aHTML, aCSS
aSamples, , :
var aResult = [];

.
aHTML, aCSS aSamples searchInArray,
:

20. Web-

341

searchInArray(sKeyword, aHTML, aResult, iSearchMode);


searchInArray(sKeyword, aCSS, aResult, iSearchMode);
searchInArray(sKeyword, aSamples, aResult, iSearchMode);

, ,
, , , , . , search_in,
.
, , . . :
if (aResult.length > 0) {

, , HTML-,
:
var s = "";

( , Web-
HTML;
Web-.)
,
:
for (var i = 0; i < aResult.length; i++) {


HTML-, :
s += "<LI><A HREF=\"" + aResult[i].url + "\">" +
aResult[i].name + "</A></LI>";
}

HTML-
cmain:
var htelResult = Ext.get("cmain").insertHtml("beforeEnd",
"<P> :</P><UL>" + s + "</UL>");

click,
Web-:
Ext.fly(htelResult).select("A").on("click", function(e, t) {
var href = Ext.fly(this).getAttribute("href");
var elA = Ext.get("navbar").child("A[href=" + href + "]");
var elItem = elA.parent("LI");
loadFragment(elItem, e);
});
}
}

342

V.

generateRelated,
19. ( ,
, , .)
searchData .
searchInArray, , ,
, . ( 20.21)
- searchData.
20.21
function searchInArray(sKeyword, aDataArray, aResultArray, iSearchMode) {
var sN, sK;
var sKw = "," + sKeyword.toLowerCase();
for(var i = 0; i < aDataArray.length; i++) {
sN = "," + aDataArray[i].name.toLowerCase();
if (aDataArray[i].keyword)
sK = "," + aDataArray[i].keyword.toLowerCase()
else
sK = "";
if (((iSearchMode == 0) || (iSearchMode == 2)) &&
(sN.indexOf(sKw) != -1))
aResultArray[aResultArray.length] = aDataArray[i]
else
if (((iSearchMode == 1) || (iSearchMode == 2)) &&
(sK.indexOf(sKw) != -1))
aResultArray[aResultArray.length] = aDataArray[i];
}
}

, :
;
, , ;
, ;
, . ,
search_in.
.
, . . ,
.
:
var sN, sK;

,
:
var sKw = "," + sKeyword.toLowerCase();

20. Web-

343

. ,
, .
Web- Web- ,
. , , ,
, ; , "title" "TITLE",
, , .
-
, , . toLowerCase JavaScript String. , ,
, . .
? .
, <IMG>. , , , "I".
JavaScript , - . ( , ""
String.) ,
, , - . , , "IMG" "I", "!DOCTYPE"
.
"I" "AUDIO", "VIDEO" "TITLE"!
, , . , ! , JavaScript ,
...
, . , Web - , , . .
, "I", "IMG" "AUDIO" ,
",I", ",IMG" ",AUDIO". , : ",IMG" ",I", ",AUDIO" . . , , . , ...
,
, :
for(var i = 0; i < aDataArray.length; i++) {

, , :
sN = "," + aDataArray[i].name.toLowerCase();

V.

344

, keyword:
if (aDataArray[i].keyword)
sK = "," + aDataArray[i].keyword.toLowerCase()
else
sK = "";

( , .) ,
, .
, ""
.

search_in (. . ; search_in ) :
if (((iSearchMode == 0) || (iSearchMode == 2)) &&
(sN.indexOf(sKw) != -1))

,
:
aResultArray[aResultArray.length] = aDataArray[i]

, ,
.

(, ,
, ).

search_in (. .
)

else
if (((iSearchMode == 1) || (iSearchMode == 2)) &&
(sK.indexOf(sKw) != -1))

,
:
aResultArray[aResultArray.length] = aDataArray[i];
}

searchInArray .
, . Web-, -
!. , -

20. Web-

345

cmain ,
Web-.
!

?
Web- ,
HTML Web- Ext
Core . - Web!
... , ! , Web-
.

21


Web-
Web- ,
HTML- Web- Ext Core . Web-. Web-
!
- ,
, "",
- ( ).
.
Web- . ,

Web-, .
- , , Web "" , , , . , Web- Web-, !

: ,
,
, .
, , -

, . ,
. ,
, .
,
. , Web- , "" . , , ;

21. Web-

347

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


, HTML CSS, ,
-, . !


Web-
Web- .
?
, Web- Web. .
,
HTML-. , cheader HTML Web- index.htm, , . .
.
none float (. 10)

,
. : cheader cnavbar, .
float -

. : cnavbar cmain, left


float.
Web-
. .
Web- Web- . CSS

348

V.

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

. .
Web- .
"" -

Web-, "" .
.

Web- .
"" ,

Web-, ,
.
,

.
CSS
. ,
, .


Web-
CSS, .
position.
Web-:
position: static|absolute|relative|fixed|inherit

:
static ( );
absolute Web- . -

. Web . ,
;
relative Web- . -

, ,
. Web- ;

21. Web-

349

fixed Web- .

, . -, Web-. -, ,
.
:
#search { position: absolute }

search .
left top , , ,
Web-:
left|top: <>|auto|inherit

, CSS (. . 8.1). auto Web-.


21.1 search.
21.1
#search { position: absolute;
left: 200px;
top: 100px;
width: 300px;
height: 200px }

, .
, HTML- , ,
. ,
z-. ,
; z-
z-. Z- "" z-index:
z-index: <>|auto|inherit

, z- . auto Web-. 21.2 .


21.2
#search { position: absolute;
left: 200px;
top: 100px;
width: 300px;

V.

350

#main

height: 200px;
z-index: 2 }
{ position: absolute;
left: 100px;
top: 0px;
width: 600px;
height: 500px;
z-index: 0 }

search main,
z-.
, , clip. ,
. , (, ,
), Web-,
.
clip:
clip: rect(< >, < >, < >,
< >)|auto|inherit

;
-

.
auto clip . . 21.3
.
21.3
#search { position: absolute;
left: 200px;
top: 100px;
width: 300px;
height: 200px;
z-index: 2;
clip: rect(100px, 200px, 200px, 0px) }

21. Web-

351

Ext Core

Element Ext Core,
Web. .
position , z-
:
< Element>.position(< >
[, <z->[, < >
[, < >]]])


position : "absolute", "relative" "fixed". , , z-, ;
.
:
var elSearch = Ext.get("search");
elSearch.position("absolute", 2);

setX setY , , Web-:


< Element>.setX|setY(< >)

:
elSearch.setX(400);
elSearch.setY(200);

setLocation Web-:
< Element>.setLocation(< >,
< >)

:
elSearch.setLocation(400, 200);

clearPositioning .
:
elSearch.clearPositioning();


, , , . .

352

V.

20 Web- . ,
, , . .
, , csearch
Web- . , Web-, , . ( , Web, 20.) search_result
.
, ,
search_result - (. .
), , , . , search_result , Web-, . ,
search_result .
Web- ( , , , ), search_result.
,
.
, .

Web-
Web- index.htm , 20 , Web- , .
<BODY> , 21.4.
21.4
<DIV ID="csearch">
<FORM ACTION="#">
<P>
<INPUT TYPE="search" ID="keyword" NAME="keyword" SIZE="20">
<INPUT TYPE="button" ID="find" NAME="find" VALUE="!"><BR>
<SELECT ID="search_in" NAME="search_in">
<OPTION> </OPTION>
<OPTION> </OPTION>
<OPTION SELECTED> </OPTION>
</SELECT>
</P>
<UL ID="search_result">
</UL>
</FORM>
</DIV>

21. Web-

353

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


search_result, .
csearch, . main.css
CSS-, 21.5.
21.5
#csearch

{ background-color: #F8F8F8;
position: absolute;
left: 600px;
top: 0px;
padding: 2px;
border: thin solid #B1BEC6 }

, , csearch , , . , , Web- .
csearch , Web. , ,
Web-, "" . .
Web-,
search_result, .
.
, ,
search_result , csearch :
#csearch P,
#search_result

{ margin: 0px }

10 :
INPUT, SELECT { font-size: 10pt }

, , , , .
search_result , , , :
#search_result LI { list-style-type: none;
margin-left: -40px; }

354

V.

csearch .
Web- .

Web-,
(, 20) Web-, , , .
Web- main.js :
var cSearchHeight = 0;

,
csearch. . , .
, onReady Ext.
:
Ext.get("search_result").setDisplayed(false);
cSearchHeight = Ext.get("csearch").getHeight();

search_result, csearch .
adjustContainers, ,
16 . .
, adjustContainers:
var elCSearch = Ext.get("csearch");
elCSearch.setLocation(clientWidth elCSearch.getWidth(),
Ext.get("cmain").getY() cSearchHeight);

csearch ,
cmain. ,
csearch, .
searchData, 20. , 21.6.
21.6
function searchData() {
var elSearchResult = Ext.get("search_result");
elSearchResult.select("A").removeAllListeners();
elSearchResult.dom.innerHTML = "";
elSearchResult.setDisplayed(false);
var sKeyword = Ext.get("keyword").getValue(false);

21. Web-

355

if (sKeyword != "") {
var iSearchMode = Ext.getDom("search_in").selectedIndex;
var aResult = [];
searchInArray(sKeyword, aHTML, aResult, iSearchMode);
searchInArray(sKeyword, aCSS, aResult, iSearchMode);
searchInArray(sKeyword, aSamples, aResult, iSearchMode);
if (aResult.length > 0) {
var s = "";
for (var i = 0; i < aResult.length; i++) {
s += "<LI><A HREF=\"" + aResult[i].url + "\">" +
aResult[i].name + "</A></LI>";
}
var htelResult = elSearchResult.insertHtml("beforeEnd", s);
Ext.fly(htelResult).select("A").on("click", function(e, t) {
var href = Ext.fly(this).getAttribute("href");
var elA = Ext.get("navbar").child("A[href=" + href + "]");
var elItem = elA.parent("LI");
loadFragment(elItem, e);
});
elSearchResult.setDisplayed(true);
}
}
}

21.6 .
,
search_result. , , ,
:
var elSearchResult = Ext.get("search_result");
elSearchResult.select("A").removeAllListeners();
elSearchResult.dom.innerHTML = "";
elSearchResult.setDisplayed(false);

search_result.
, search_result.
15 , Web- HTMLElement innerHTML, HTML-,
Web-, . , , HTMLElement
( dom Ext Core Element) innerHTML
. .
21.7
var sKeyword = Ext.get("keyword").getValue(false);
if (sKeyword != "") {
var iSearchMode = Ext.getDom("search_in").selectedIndex;

V.

356

var aResult = [];


searchInArray(sKeyword, aHTML, aResult, iSearchMode);
searchInArray(sKeyword, aCSS, aResult, iSearchMode);
searchInArray(sKeyword, aSamples, aResult, iSearchMode);
if (aResult.length > 0) {
var s = "";
for (var i = 0; i < aResult.length; i++) {
s += "<LI><A HREF=\"" + aResult[i].url + "\">" +
aResult[i].name + "</A></LI>";
}
var htelResult = elSearchResult.insertHtml("beforeEnd", s);
Ext.fly(htelResult).select("A").on("click", function(e, t) {
var href = Ext.fly(this).getAttribute("href");
var elA = Ext.get("navbar").child("A[href=" + href + "]");
var elItem = elA.parent("LI");
loadFragment(elItem, e);
});

, 21.7, searchData . , .
search_result, :
elSearchResult.setDisplayed(true);
}
}

searchData .
cleanupSamples, 16,
, ". " .
,
, searchData.
cleanupSamples , 21.8.
21.8
function cleanupSamples() {
var ceSamples = Ext.select(".sample");
ceSamples.each(function(el, cl, ind){
var elH6 = el.child(":first");
elH6.removeAllListeners();
});
}

, .
search_result Web-.
, onReady Ext,
:

21. Web-

357

Ext.getBody().on("click",
function(){ Ext.get("search_result").setDisplayed(false); });

click Web- ,
search_result.
15 , , click, , , ,
, , Web-. click, Web, , Web-
, search_result .
: click
Web-. ,
. ,
searchData ,
click, Web, . !
, onReady Ext,
:
Ext.get("find").on("click", searchData);

click , . :
Ext.get("find").on("click", function(e){
searchData();
e.stopPropagation();
});

click searchData,
, . ,
stopPropagation Ext Core EventObject
(. 15).
. click (
loadFragment) . , (
". ", ), click
Web-, , search_result . .
, loadFragment,
:
Ext.get("search_result").setDisplayed(false);

, .
.
!..

358

V.

?
Web .
, , Web-
Web- , .
, ,
HTML 5 .
Web-. Web- .

22


Web- ,
Web-. , ?
Web. - .
, Web- . ?
. ,
Web- - , .
Web- ,
4.
, HTML 5. , , Web-.
.
. HTML 5,
.

,
HTML 5 . Web-, , ( ). (, , ,
.) .
<CANVAS>:
<CANVAS ID="<>" [WIDTH="<>"] [HEIGHT="<>"]></CANVAS>

V.

360

, , Web-.
- , .
, ID.
.
WIDTH HEIGHT , ,
( 300 150 ).
!
CSS .

HTML-, cnv 400 300 :


<CANVAS ID="cnv" WIDTH="400" HEIGHT="300"></CANVAS>

Web- HTMLCanvasElement,
HTMLElement.
, .


...
, HTMLCanvasElement, CanvasRenderingContext2D.
, , .
, , -
Web- CanvasRenderingContext2D . getContext HTMLCanvasElement:
<>.getContext("2d")

, getContext "2d". , ,
CanvasRenderingContext2D, .
Web-, ctxCanvas
cnv:
var htelCanvas = Ext.getDom("cnv");
var ctxCanvas = htelCanvas.getContext("2d");

.
, ,
CanvasRenderingContext2D, .
!
, ,
CanvasRenderingContext2D, .

22.

361

,
.
;
. .


,
.
(. . ) strokeRect CanvasRenderingContext2D:
< >.strokeRect(< >,
< >, <>, <>)

. , , , . strokeRect .
:
ctxCanvas.strokeRect(20, 20, 360, 260);

fillRect :
< >.fillRect(< >,
< >, <>, <>)

, , strokeRect:
ctxCanvas.fillRect(40, 40, 320, 220);

clearRect
:
< >.clearRect(< >,
< >, <>, <>)

strokeRect.
, ,
cnv, "":
ctxCanvas.fillRect(0, 0, 400, 300);
ctxCanvas.clearRect(100, 100, 200, 100);

:
ctxCanvas.clearRect(0, 0, 400, 300);

V.

362

,

,
. CanvasRenderingContext2D.
strokeStyle . , , .
, #RRGGBB,
, .
:
rgb(< >, < >, < >)

0 255.

:
rgba(< >, < >,
< >, < >)

0 255.
0.0 ( ) 1.0
( ).
:
ctxCanvas.strokeStyle
ctxCanvas.strokeStyle
ctxCanvas.strokeStyle
ctxCanvas.strokeStyle

=
=
=
=

"red";
"#FF0000";
"rgb(255, 0, 0)";
"rgb(255, 0, 0, 1)";

, :
ctxCanvas.strokeStyle = "rgb(0, 0, 0, 0.5)";

, Web-,
.
fillStyle , , .
, . .
, - :
ctxCanvas.fillStyle = "rgb(0, 127, 0)";

22.1.
22.1
ctxCanvas.strokeStyle = "rgba(255, 0, 0, 1)";
ctxCanvas.fillStyle = "rgba(255, 0, 0, 1)";

22.

363

ctxCanvas.fillRect(0, 100, 400, 100);


ctxCanvas.strokeStyle = "rgba(0, 255, 0, 0.5)";
ctxCanvas.fillStyle = "rgba(0, 255, 0, 0.5)";
ctxCanvas.fillRect(100, 0, 200, 300);

Web- 22.1 ,
, ,
, .

. , !
!
strokeStyle fillStyle .
Web-.

lineWidth .
:
ctxCanvas.lineWidth = 20;
ctxCanvas.strokeRect(20, 20, 360, 260);

Web-
20 .
globalAlpha, , . , . 0.0 ( )
1.0 ( ).
, , ,
10%:
ctxCanvas.globalAlpha = 0.1;


, ,
. ,
, CanvasRenderingContext2D.


.
1. Web- , .
2. , , .
3. Web- , ,
, , .

364

V.

Web-,
.
beginPath,
.
, ,
, .
, Web . closePath,
.
, .
: stroke fill. , , ,
, , .
.
,
, .

.

. . , . , .
, Web- ,
[0,0], . . .
, , moveTo:
< >.moveTo(< >,
< >)

, , . moveTo
.
:
ctxCanvas.moveTo(200, 150);

cnv
[200,150].


. lineTo:
< >.lineTo(< >,
< >)

22.

365

,
( ).
lineTo. .
.
.
22.2
ctxCanvas.beginPath();
ctxCanvas.moveTo(20, 20);
ctxCanvas.lineTo(380, 20);
ctxCanvas.lineTo(200, 280);
ctxCanvas.closePath();
ctxCanvas.stroke();

Web- 22.2 . .
1. beginPath Web-, .
2. moveTo , .
3. lineTo , .
4. , closePath,
Web- , .
5. stroke, .

. arc:
< >.arc(< >,
< >, <>, < >, < >,
true|false)


. ,
.
; . true, , false . arc
.
, .
, .

V.

366

, , . JavaScript:
radians = (Math.PI / 180) * degrees;

degrees , radians
, . PI JavaScript Math
.
Web-, :
ctxCanvas.beginPath();
ctxCanvas.arc(200, 150, 100, 0, Math.PI * 2, false);
ctxCanvas.stroke();

, arc, , , .


, : , . , , ,
, .

. 22.1.

. 22.2.

. 22.1 ,
, . ,
( )
. - , , , , .
. 22.1 . .
, "", (. 22.2).
, .

22.

367


bezierCurveTo:
< >.bezierCurveTo
(< >,
< >,
< >,
< >,
< >,
< >)

.
. .
,
. .
Web-, :
ctxCanvas.beginPath();
ctxCanvas.moveTo(100, 100);
ctxCanvas.bezierCurveTo(120, 80, 160, 20, 100, 200);
ctxCanvas.stroke();


quadraticCurveTo:
< >.quadraticCurveTo
(< >,
< >,
< >,
< >)

.
. .
,
.
.
Web-, :
ctxCanvas.beginPath();
ctxCanvas.moveTo(100, 100);
ctxCanvas.quadraticCurveTo(200, 100, 200, 200);
ctxCanvas.stroke();

.
22.3.
22.3
ctxCanvas.beginPath();
ctxCanvas.strokeStyle = "red";

368

V.

ctxCanvas.fillStyle = "red";
ctxCanvas.moveTo(100, 100);
ctxCanvas.quadraticCurveTo(200, 100, 200, 200);
ctxCanvas.lineTo(100, 200);
ctxCanvas.lineTo(100, 100);
ctxCanvas.fill();

Web- 22.3
. ,
,
.
22.4.
22.4
ctxCanvas.beginPath();
ctxCanvas.moveTo(20, 0);
ctxCanvas.lineTo(180, 0);
ctxCanvas.quadraticCurveTo(200, 0, 200, 20);
ctxCanvas.lineTo(200, 80);
ctxCanvas.quadraticCurveTo(200, 100, 180, 100);
ctxCanvas.lineTo(20, 100);
ctxCanvas.quadraticCurveTo(0, 100, 0, 80);
ctxCanvas.lineTo(0, 20);
ctxCanvas.quadraticCurveTo(0, 0, 20, 0);
ctxCanvas.stroke();

Web- 22.4 .
.

,
strokeRect fillRect. , , , -
. ,
rect:
< >.rect(< >,
< >, <>, <>)

. , , , . rect .
rect [0,0], . . .

22.

369

Web- 22.5 , , .
22.5
ctxCanvas.beginPath();
ctxCanvas.rect(50, 50, 50, 50);
ctxCanvas.rect(75, 75, 50, 50);
ctxCanvas.rect(100, 100, 50, 50);
ctxCanvas.fill();


, ,

. .
lineCap .
:
"butt" (

);
"round" ;
"square" .

Web- 22.6 , .
22.6
ctxCanvas.beginPath();
ctxCanvas.lineWidth = 10;
ctxCanvas.lineCap = "round";
ctxCanvas.moveTo(20, 20);
ctxCanvas.lineTo(180, 20);
ctxCanvas.stroke();

lineJoin . :
"miter" (

);
"round" , , ;
"bevel" , , -

.
Web- 22.7 ,
, , .

370

V.

22.7
ctxCanvas.beginPath();
ctxCanvas.lineWidth = 10;
ctxCanvas.lineJoin = "bevel";
ctxCanvas.moveTo(20, 20);
ctxCanvas.lineTo(380, 20);
ctxCanvas.lineTo(200, 280);
ctxCanvas.closePath();
ctxCanvas.stroke();

miterLimit , ,
, ,
lineJoin "miter". , , .
.
, .
22.8 Web-, .
22.8
ctxCanvas.beginPath();
ctxCanvas.lineJoin = "miter";
ctxCanvas.lineWidth = 10;
ctxCanvas.miterLimit = 1;
ctxCanvas.moveTo(20, 20);
ctxCanvas.lineTo(380, 20);
ctxCanvas.lineTo(200, 280);
ctxCanvas.closePath();
ctxCanvas.stroke();

, ,
, . ,
, .


, . .
strokeText .
, ; strokeStyle:
< >.strokeText(< >,
< >, < >
[, < >])

22.

371

.
, , .
.
, , ,
. ,
( ),
.
strokeText .
:
ctxCanvas.strokeStyle = "blue";
ctxCanvas.strokeText(" !", 200, 50, 100);

fillText .
, ; fillStyle:
< >.fillText(< >,
< >, < >
[, < >])

, strokeText:
ctxCanvas.fillStyle = "yellow";
ctxCanvas.fillText(" !", 50, 100);

font ,
. ,
font (. 8), :
ctxCanvas.fillStyle = "yellow";
ctxCanvas.font = "italic 12pt Verdana";
ctxCanvas.fillText(" !", 50, 100);

textAlign
, (
strokeText fillText). :
"left" ;
"right" ;
"start" ,

, ( );
"end" ,

, ;
"center" .

372

V.

:
ctxCanvas.fillStyle = "yellow";
ctxCanvas.font = "italic 12pt Verdana";
ctxCanvas.textAlign = "center";
ctxCanvas.fillText(" !", 100, 100);

textBaseline
, . :
"top" () ;
"hanging" () ;
"middle" ;
"alphabetic"

( );
"ideographic"

( );
"bottom" .

:
ctxCanvas.fillStyle = "yellow";
ctxCanvas.font = "italic 12pt Verdana";
ctxCanvas.textAlign = "center";
ctxCanvas.textBaseline = "top";
ctxCanvas.fillText(" !", 100, 100);


, , .

: .


( )
.
Windows 2000 Windows
; .
.
createLinearGradient :
< >.createLinearGradient
(< >,

22.

373

< >,
< >,
< >)

, "" . .
createLinearGradient CanvasGradient, .
, .
, , ""
[0,0] [100,50], lgSample:
var lgSample = ctxCanvas.createLinearGradient(0, 0, 100, 50);

, , "" . .
.
, addColorStop CanvasGradient:
<>.addColorStop(< >, <>)


, "" . 0.0 ( ) 1.0 ( ).
, ,
; ,
.
addColorStop .
:
lgSample.addColorStop(0, "black");
lgSample.addColorStop(0.4, "rgba(0, 0, 255, 0.5)");
lgSample.addColorStop(1, "#FF0000");

Web-
:

;
, 40%
, ;

.
.
CanvasGradient

374

V.

fillStyle. , ,
, :
strokeStyle

ctxCanvas.fillStyle = lgSample;

.
.
,
. [0,0] (
, , ), [30,20] ( ), [80,40] ( ). , ""
.
? .
, , ,

.
, ,

, .
, , ,

.
, "" , , "" ,
. , , , , .
, - ,
, "" . .
22.9
var lgSample = ctxCanvas.createLinearGradient(0, 0, 100, 50);
lgSample.addColorStop(0, "black");
lgSample.addColorStop(0.4, "rgba(0, 0, 255, 0.5)");
lgSample.addColorStop(1, "#FF0000");
ctxCanvas.fillStyle = lgSample;
ctxCanvas.fillRect(0, 0, 200, 100);

Web- 22.9
, .
, .

22.

375


( ) . "" . .
.
createRadialGradient :
< >.createRadialGradient
(< >,
< >,
< >,
< >,
< >,
< >)

, . .
createRadialGradient CanvasGradient, .
:
var rgSample = ctxCanvas.createRadialGradient(100, 100, 10, 150, 100, 120);


rgSample. "" , [100,100],
10 , [150,100]
120 .
addColorStop CanvasGradient:
<>.addColorStop(< >, <>)


.
0.0 ( , . . ) 1.0 (
, . . ). , ,
, .
,
.
:
rgSample.addColorStop(0, "#CCCCCC");
rgSample.addColorStop(0.8, "black");
rgSample.addColorStop(1, "#00FF00");

376

V.

Web-
:
-

(. . ) ;
, 80%

, ;
-

(. . ) .

, , . . strokeStyle
fillStyle:
ctxCanvas.fillStyle = rgSample;

,
"" , .
22.10 .
22.10
var rgSample = ctxCanvas.createRadialGradient(100, 100, 10, 150, 100,
120);
rgSample.addColorStop(0, "#CCCCCC");
rgSample.addColorStop(0.8, "black");
rgSample.addColorStop(1, "#00FF00");
ctxCanvas.fillStyle = rgSample;
ctxCanvas.fillRect(0, 0, 200, 200);

Web- 22.10 , . , , , , ,
.


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

22.

377

14 new Image:
var imgSample = new Image();

Image src, -
. -
- , :
imgSample.src = "graphic_color.jpg";

Image .

createPattern:
< >.createPattent(< >,
< >)

Image
HTMLCanvasElement.
, ,
, . , "" . createPattern.
:
"repeat" ;
"repeat-x" ;
"repeat-y" ;
"no-repeat" ;

.
createPattern CanvasPattern, :
var cpSample = ctxCanvas.createPattern(imgSample, "repeat");

,
, . . strokeStyle fillStyle.
:
ctxCanvas.fillStyle = cpSample;
ctxCanvas.fillRect(0, 0, 200, 100);

Web-
.
,
. .

V.

378


, graphic_color.jpg
Web- . , , " ", Web-
. , ,
, .


,
, .
:
.
drawImage, ,
:
< >.drawImage(< >,
< >, < >)

Image
HTMLCanvasElement. ,
; .
drawImage .
Web-, someimage.jpg , [0,0], . .
:
var imgSample = new Image();
imgSample.src = "someimage.jpg";
ctxCanvas.drawImage(imgSample, 0, 0);

,
drawImage:
< >.drawImage(< >,
< >, < >
<>, <>)

. ,
, .
Web-, , , :
ctxCanvas.drawImage(imgSample, 0, 0, 400, 300);


.
drawImage:

22.

379

< >.drawImage(< >,


< >,
< >
< >, < >,
< >, < >,
< >, < >)

.
. .
. .
,
.
.
.
Web-, [20,40], 40 20
, , :
ctxCanvas.drawImage(imgSample, 20, 40, 40, 20, 0, 0, 400, 300);

, ,
, ( , Web-.)
, , , Web. ?
. Image onload,
.
, .
Web- 22.11 .
22.11
var imgSample = new Image();
function imgOnLoad() {
ctxCanvas.drawImage(imgSample, 20, 40, 40, 20, 0, 0, 400, 300);
}
imgSample.src = "someimage.jpg";
imgSample.onload = imgOnLoad;

V.

380


Web - , . Ext Core,
.


. , .
shadowOffsetX shadowOffsetY , ,
. , .
0, . . .
:
ctxCanvas.shadowOffsetX = 2;
ctxCanvas.shadowOffsetY = -2;

shadowBlur .
, . 0, . . .
:
ctxCanvas.shadowBlur = 4;

shadowColor .
, . .
:
ctxCanvas.shadowColor = "rgba(128, 128, 128, 0.5)";

, , .
.
:
ctxCanvas.fillText(": .", 150, 50);


( , ),
.
. ;
.

22.

381


, , . .
:
( );
globalAlpha, globalCompositeOperation ( ),
fillStyle, lineCap, lineJoin, lineWidth, miterLimit strokeStyle;

( ).

save.
.

. , ;
.
restore.
.
.
. .
.


.
.
translate:
< >.translate(< >,
< >)

translate , .
, .
.
,
. ,
[50,50] , [100,50],
[150,100],
( ).
22.12 .

V.

382
22.12
ctxCanvas.save();
ctxCanvas.translate(100,
ctxCanvas.fillRect(0, 0,
ctxCanvas.translate(100,
ctxCanvas.fillRect(0, 0,
ctxCanvas.restore();
ctxCanvas.fillRect(0, 0,

100);
50, 50);
100);
50, 50);
50, 50);

Web- 22.12 :
1. .
2. [100,100].
3. 50 50 , .
4. [100,100]. ,
, translate.
5. 50 50 ,
.
6. ,
( , . .
).
7. 50 50 ,
.
, ,
.
!
,
.
.


rotate
;
:
< >.rotate(< >)


; . .

22.

383

, . ,
- , . - , .
22.13 .
22.13
ctxCanvas.translate(200, 150);
for (var i = 0; i < 3; i++) {
ctxCanvas.rotate(Math.PI / 6);
ctxCanvas.strokeRect(-50, -50, 100, 100);
}

Web- 22.13 (
[200,150]), /6 (30)
. , ,
.


scale
:
< >.scale(< >,
< >)


. 1.0 ,
1.0 ; -
, 1.0 .
scale .
,
: ,
.
22.14 .
22.14
ctxCanvas.save();
ctxCanvas.strokeRect(0, 0, 50, 50);
ctxCanvas.scale(3, 1);
ctxCanvas.strokeRect(0, 0, 50, 50);
ctxCanvas.restore();

V.

384
ctxCanvas.save();
ctxCanvas.scale(1, 3);
ctxCanvas.strokeRect(0, 0, 50, 50);
ctxCanvas.restore();
ctxCanvas.save();
ctxCanvas.scale(3, 3);
ctxCanvas.strokeRect(0, 0, 50, 50);
ctxCanvas.restore();

Web- 22.14 :
1. .
2. 50 50 , .
3. 3 .
4. 50 50 , .
5. .
6. 3 .
7. 50 50 , .
8. .
9. 3 .
10. 50 50 , .
11. .
50 50,
150 50, 50 150 150 150 .


,
, , .
, .

globalCompositeOperation.

:
"source-over" , (-

);
"destination-over" ;

22.

385

"source-in" , -

. ;
"destination-in" ,

. ;
"source-out" , -

. ;
"destination-out" ,

.
;
"source-atop" , -

; .
;
"destination-atop" , -

; . ;
"lighter" -

, , ;
"darker" ,

, , ;
"xor" , -

;
"copy" ; .

,
. .
22.15 .
22.15
ctxCanvas.fillStyle = "blue";
ctxCanvas.fillRect(0, 50, 400, 200);
ctxCanvas.fillStyle = "red";
ctxCanvas.globalCompositeOperation = "source-over";
ctxCanvas.fillRect(100, 0, 200, 300);

Web- 22.15

globalCompositeOperation. , Web <F5> , .

386

V.


21.
, "", ,
. , "", .
.
, .
.
.
1. , .
2. .
3. stroke fill clip, .
4. , .
4
. .
22.16 .
22.16
ctxCanvas.beginPath();
ctxCanvas.moveTo(100, 150);
ctxCanvas.lineTo(200, 0);
ctxCanvas.lineTo(200, 300);
ctxCanvas.closePath();
ctxCanvas.clip();
ctxCanvas.fillRect(0, 100, 400, 100);

Web- 22.16 , , .

Web-
HTML 5,
, Web-.
Web-,
cheader .
.
Web-
" HTML CSS" .
,
cheader Web- .

22.

387

Web--

.
Web- index.htm ,
cheader HTML-:
<CANVAS ID="cnv" WIDTH="600" HEIGHT="80"></CANVAS>

cnv, .
, . Web-,
,
.
Web- main.js . .
, ? ,
, onReady Ext?
Web-.
, Web-. . -,
cnv . -, .
: , ,
adjustContainers. , , , Web-, Web- , .
adjustContainers :
Ext.get("cnv").set({ width: elCSearch.getX() 40 });
drawHeader();

cnv, cheader Web- . .


1. csearch,
Web- (. 21). ( csearch elCSearch.) ,
, .
2. 20
, , cheader.
3. 20 ( 40) csearch Web . , Web-
.
WIDTH <CANVAS> set Ext Core Element (. 15).

388

V.

drawHeader,
. 22.17 , ;
main.js.
22.17
function drawHeader() {
var elCanvas = Ext.get("cnv");
var cnvWidth = elCanvas.getAttribute("width");
var ctx = elCanvas.dom.getContext("2d");
ctx.beginPath();
ctx.strokeStyle = "#B1BEC6";
ctx.moveTo(0, 60);
ctx.lineTo(cnvWidth, 60);
ctx.stroke();
ctx.shadowOffsetX = 2;
ctx.shadowOffsetY = 2;
ctx.shadowBlur = 2;
ctx.shadowColor = "#CDD9DB";
ctx.font = "normal 20pt Arial";
ctx.textAlign = "right";
ctx.textBaseline = "bottom";
ctx.fillStyle = "#3B4043";
ctx.scale(2, 1.3);
ctx.fillText(" HTML CSS", cnvWidth / 2, 60 / 1.3,
cnvWidth / 2);
}

22.17 .
cnv:
var elCanvas = Ext.get("cnv");

:
var cnvWidth = elCanvas.getAttribute("width");

, "" , :
ctx.beginPath();
ctx.strokeStyle = "#B1BEC6";
ctx.moveTo(0, 60);
ctx.lineTo(cnvWidth, 60);
ctx.stroke();

:
ctx.shadowOffsetX = 2;
ctx.shadowOffsetY = 2;
ctx.shadowBlur = 2;
ctx.shadowColor = "#CDD9DB";

22.

389

. <H1>,
main.css:
ctx.font = "normal 20pt Arial";


:
ctx.textAlign = "right";
ctx.textBaseline = "bottom";

.
:
ctx.fillStyle = "#3B4043";

:
ctx.scale(2, 1.3);

, , , , .
" HTML CSS" :
ctx.fillText(" HTML CSS", cnvWidth / 2, 60 / 1.3,
cnvWidth / 2);

.
. ,
, .
,
. ,
,
, ; , .
, .
Web-
( . , ).
, . , , ,
. ,
(2 1,3).
drawHeader .
Web- Web-. . , , .
.
. Web-
HTML CSS! Web-!

390

V.


...
(, , "") Web HTML CSS . Web-, HTML, CSS . , Web- Web-...
Web-, HTML, CSS JavaScript, Web- Ext Core. , , Web-. , , "" Web Web-. ,
, ,
.
, HTML 5 CSS 3. Web-
, .
, "" ,
, .
, . .
HTML 5 CSS 3 , Web-, ""
, . , , , Web-, .
...
, .
. .1 - Web-,
Web-
. , ,
!

392

.1. Web-
-

https://developer.mozilla.org/en

Mozilla Developers Network (MDN).


Web- Mozilla, Web-
Firefox. HTML, CSS,
JavaScript, DOM,
. ,

http://dev.opera.com/

Opera Developer Community (DevOpera).


Web-
Opera,
Web-. , HTML 5
CSS 3

http://www.w3.org/

Web- World Wide Web Consortium


(W3C). ,
"",

http://www.sencha.com/products/core/?ref=family

Web-, Ext Core. Web- ,


,
,

! !

CSS
CSS ,
Web- , ,
CSS.
CSS ( CSS 3), , . CSS
Web-.
CSS , CSS
, Web-, .
:
-moz- Mozilla Firefox;
-o- Opera;
-webkit- Web-,

Webkit. Google Chrome Apple Safari.


.
CSS Web-, CSS . , -, CSS
Web-; Web- "" . -, Web-
CSS, .

Web- https://developer.mozilla.org/en/CSS/CSS_transitions CSS, CSS. , , Firefox , , , . ,
, Firefox
.
, CSS .

CSS, Web-, .

394


, CSS Web-.
, ,
. Web .
, , , , , . .
CSS -moz-border-leftcolors, -moz-border-top-colors, -moz-border-right-colors -moz-border-bottomcolors. , , , ,
.
-moz-border-left-colors|-moz-border-top-colors|-moz-border-right-colors|
-moz-border-border-colors: < , >|none

none "" . .
CSS Firefox CSS.
:
#cheader { width: 1010px;
padding: 0 20px;
border-bottom: medium dotted;
-moz-border-bottom-colors: #B1BEC6 #F8F8F8 #B1BEC6 }

cheader , , , .


. !
CSS -moz-border-radius-topleft (Firefox), border-top-left-radius
(Opera CSS 3) -webkit-border-top-left-radius (Web-
Webkit) :
-moz-border-radius-topleft|border-top-left-radius|
-webkit-border-top-left-radius: < 1> [< 2>]

, ,
. , , ,
. , CSS.

CSS

395

CSS, .
-moz-border-radius-topright (Firefox), border-top-right-radius (Opera -

CSS 3) -webkit-border-top-right-radius (Web- Webkit) .


-moz-border-radius-bottomright (Firefox), border-bottom-right-radius (Opera

CSS 3) -webkit-border-bottom-right-radius (Web-


Webkit) .
-moz-border-radius-bottomleft (Firefox), border-bottom-left-radius (Opera

CSS 3) -webkit-border-bottom-left-radius (Web-


Webkit) .
, CSS,
( 1).
1
#cheader { width: 1010px;
padding: 0 20px;
border-bottom: medium dotted;
-moz-border-radius-bottomleft: 2px;
-moz-border-radius-bottomright: 2px;
border-bottom-left-radius: 2px;
border-bottom-right-radius: 2px;
-webkit-border-bottom-left-radius: 2px;
-webkit-border-bottom-right-radius: 2px }

cheader , , ,
, Web-,
. , Firefox, Opera, Web- Webkit .
CSS -moz-border-radius (Firefox), border-radius (Opera
CSS) -webkit-border-radius (Web- Webkit) :
-moz-border-radius|border-radius|-webkit-border-radius:
< 1 1>[/< 1 2>]
[< 2 1>[/< 2 2>]
[< 3 1>[/< 3 2>]
[< 4 1>[/< 4 2>]]]]

, , , /. ,
, .
, , , .

396

, .
, .
,

,
.
,
, ,
.
,

, , , .
2.
2
#navbar LI { padding: 5px 10px;
margin: 10px 0px;
border: thin solid #B1BEC6;
-moz-border-radius: 3px/1px 3px/1px 0px 0px;
border-radius: 3px/1px 3px/1px 0px 0px;
-webkit-border-radius: 3px/1px 3px/1px 0px 0px;
cursor: pointer }

"" , ,
.
3 , 1 .


"" ""! !
CSS -moz-outline-radius-topleft
:
-moz-outline-radius-topleft: <>

,
CSS.
CSS, .
-moz-outline-radius-topright -

.
-moz-outline-radius-bottomright

CSS

397

-moz-outline-radius-bottomleft -

.
, CSS,
.
3 .
3
DFN { outline: thin dotted #B1BEC6;
-moz-outline-radius-topleft: 3px;
-moz-outline-radius-topright: 3px;
-moz-outline-radius-bottomright: 3px;
-moz-outline-radius-bottomleft: 3px }

, <DFN>, ,
3 .
CSS -moz-outline-radius
:
-moz-outline-radius: < 1> [< 2> [< 3>
[< 4>]]]|inherit

.
, .
,
, .
,
, , .
, , , ,
.
CSS Firefox
CSS 3.
:
DFN { outline: thin dotted #B1BEC6;
-moz-outline-radius: 3px }


, Web-. .

398

"" , CSS.
CSS -moz-column-count (Firefox) -webkit-column-count (Web- Webkit) :
-moz-column-count|-webkit-column-count: < >|auto

, Web-, ;
, Web- ,
.
auto, , .
:
#cmain { -moz-column-count: 2;
-webkit-column-count: 2 }

cmain .
CSS -moz-column-width (Firefox) -webkit-column-width (Web Webkit) :
-moz-column-width|-webkit-column-width: < >|auto

, Web-,
Web-, .
auto Web-.
4 .
4
#cmain { -moz-column-count: 2;
-webkit-column-count: 2;
-moz-column-width: 300px;
-webkit-column-width: 300px }

cmain 300 .
CSS -moz-column-gap (Firefox) -webkit-column-gap (Web-
Webkit) :
-moz-column-gap|-webkit-column-gap:
< >|normal

normal .
Web-.
5 .

CSS

399

5
#cmain { -moz-column-count: 2;
-webkit-column-count: 2;
-moz-column-width: 300px;
-webkit-column-width: 300px;
-moz-column-gap: 5mm;
-webkit-column-gap: 5mm }

5 cmain 5 .
CSS -moz-column-rule-width (Firefox) -webkit-column-rule-width
(Web- Webkit) , :
-moz-column-rule-width|-webkit-column-rule-width: thin|medium|thick|
< >

, , (. 11).
6 .
6
#cmain { -moz-column-count: 2;
-webkit-column-count: 2;
-moz-column-width: 300px;
-webkit-column-width: 300px;
-moz-column-gap: 5mm;
-webkit-column-gap: 5mm;
-moz-column-rule-width: thin;
-webkit-column-rule-width: thin }

cmain .
CSS -moz-column-rule-style (Firefox) -webkit-column-rule-style
(Web- Webkit) ,
:
-moz-column-rule-style|-webkit-column-rule-style:
none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset

, ,
(. 11).
7 .
7
#cmain { -moz-column-count: 2;
-webkit-column-count: 2;

400
-moz-column-width: 300px;
-webkit-column-width: 300px;
-moz-column-gap: 5mm;
-webkit-column-gap: 5mm;
-moz-column-rule-width: thin;
-webkit-column-rule-width: thin;
-moz-column-rule-style: dotted;
-webkit-column-rule-style: dotted }

cmain
.
CSS -moz-column-rule-color (Firefox) -webkit-column-rule-color
(Web- Webkit) ,
:
-moz-column-rule-color|-webkit-column-rule-color:
< >

8 .
8
#cmain { -moz-column-count: 2;
-webkit-column-count: 2;
-moz-column-width: 300px;
-webkit-column-width: 300px;
-moz-column-gap: 5mm;
-webkit-column-gap: 5mm;
-moz-column-rule-width: thin;
-webkit-column-rule-width: thin;
-moz-column-rule-style: dotted;
-webkit-column-rule-style: dotted;
-moz-column-rule-color: #B1BEC6;
-webkit-column-rule-color: #B1BEC6 }

cmain
- .
CSS -moz-column-rule (Firefox) -webkit-column-rule (Web Webkit) , :
-moz-column-rule|-webkit-column-rule: <> <> <>

9 .
9
#cmain { -moz-column-count: 2;
-webkit-column-count: 2;
-moz-column-width: 300px;

CSS

401

-webkit-column-width: 300px;
-moz-column-gap: 5mm;
-webkit-column-gap: 5mm;
-moz-column-rule: thin dotted #B1BEC6;
-webkit-column-rule: thin dotted #B1BEC6 }

, Opera . ...

CSS
22, ,
. CSS
Web-:
, , .
,
Web-, CSS -moz-transform (Firefox), -o-transform
(Opera) -webkit-transform (Web- Webkit):
-moz-transform|-o-transform|-webkit-transform: <>

. .
rotate Web-
:
rotate(<>)

: ,
. ,
deg, rad, grad.
.
cheader 3,14 ( 180):
#cheader { -moz-transform: rotate(3.14rad);
-o-transform: rotate(3.14rad);
-webkit-transform: rotate(3.14rad) }

cheader 30:
#cheader { -moz-transform: rotate(30deg);
-o-transform: rotate(30deg);
-webkit-transform: rotate(30deg) }

scale Web- , :
scale(< 1>[, < 2>])

, , .
, ,
. 1 (), -

402

1 (); 1 .
cheader ,
:
#cheader { -moz-transform: scale(2);
-o-transform: scale(2);
-webkit-transform: scale(2) }

cheader :
#cheader { -moz-transform: scale(2, 0.5);
-o-transform: scale(2, 0.5);
-webkit-transform: scale(2, 0.5) }

scaleX scaleY Web, , :


scaleX|scaleY(<>)
#cheader { -moz-transform: scaleX(2);
-o-transform: scaleX(2);
-webkit-transform: scaleX(2) }

skew Web- , "" :


skew(< 1>[, < 2>])

, , . , , . , .
cheader 10.
, 0:
#cheader { -moz-transform: skew(10deg, 0deg);
-o-transform: skew(10deg, 0deg);
-webkit-transform: skew(10deg, 0deg) }

skewX skewY Web-, , .


:
skewX|skewY(<>)
#cheader { -moz-transform: skewX(10deg);
-o-transform: skewX(10deg);
-webkit-transform: skewX(10deg) }

translate Web- :
translate(< 1>[, < 2>])

CSS

403

, , . , , .
, CSS.
cheader 5 2 :
#cheader { -moz-transform: translate(5mm, 2mm);
-o-transform: translate(5mm, 2mm);
-webkit-transform: translate(5mm, 2mm) }

translateX translateY Web-, , .


cheader 2 :
translateX|translateY(<>)
#cheader { -moz-transform: translateY(2mm);
-o-transform: translateY(2mm);
-webkit-transform: translateY(2mm) }

Web- . ,
. , .
:
#cheader { -moz-transform: skewX(10deg) translateY(2mm);
-o-transform: skewX(10deg) translateY(2mm);
-webkit-transform: skewX(10deg) translateY(2mm) }

cheader
10, 2 .

Web-. , - ,
. ,
.
CSS -moz-transform-origin (Firefox), -o-transform-origin (Opera)
-webkit-transform-origin (Web- Webkit):
-moz-transform-origin|-o-transform-origin|-webkit-transform-origin:
<>|left|center|right [<>|top|center|bottom]

, ,
, ; Web-.
, ,
.
, CSS.

404

left (

Web-), center (), right ( ), top


( ) bottom ( ).
10 .
10
#cheader { -moz-transform: rotate(30deg);
-o-transform: rotate(30deg);
-webkit-transform: rotate(30deg);
-moz-transform-origin: left;
-o-transform-origin: left;
-webkit-transform-origin: left }

cheader 30 , . , ( ), left ( ) ; , ,
.
11.
11
#cheader { -moz-transform: rotate(30deg);
-o-transform: rotate(30deg);
-webkit-transform: rotate(30deg);
-moz-transform-origin: right bottom;
-o-transform-origin: right bottom;
-webkit-transform-origin: right bottom }

cheader 30 .

A
AAC 61

C
CSS 95

P
PCM 61
PNG 57

Q
QuickTime 61

D
DOM 227

R
RGB 111

G
GIF 56
56

H
H.264 61
HTML 25, 28, 33

J
JavaScript 189
JPEG 56

M
MIME 62
MP4 61

O
OGG 61

T
Theora 61

U
UAC 35
UTF-8 31

V
Vorbis 61

W
W3C 18
WAV 61
Web 2.0 20
Webkit 393
Web-
139
138

406

Web- (.)
137
138
Web- 24
Web- 23
Web- 24
287
287
25
266
286
31

36
46
96
background-attachment 120
background-color 118
background-image 118
background-position 119
background-repeat 119
border 156
border-bottom 156
border-bottom-color 155
border-bottom-style 155
border-bottom-width 154
border-collapse 168
border-color 155
border-left 156
border-left-color 155
border-left-style 155
border-left-width 154
border-right 156
border-right-color 155
border-right-style 155
border-right-width 154
border-spacing 153
border-style 156
border-top 156
border-top-color 155
border-top-style 155
border-top-width 154
border-width 154
caption-side 169

25
82
81
Web- 189
193
192
Web- 318

Z
Z- 349

clear 144
clip 350
color 111
cursor 133
display 129
empty-cells 170
float 143
font 114
font-family 109
font-size 110
font-style 112
font-variant 113
font-weight 112
height 142
left 349
letter-spacing 113
line-height 113
list-style-image 128
list-style-position 128
list-style-type 127
margin 153
margin-bottom 152
margin-left 152
margin-right 152
margin-top 152
max-height 143
max-width 143
min-height 143
min-width 143
opacity 112
outline 164
outline-color 164

outline-style 164
outline-width 164
overflow 147
overflow-x 147
overflow-y 147
padding 152
padding-bottom 151
padding-left 151
padding-right 151
padding-top 151
position 348
table-layout 169
text-align 126
text-decoration 112
text-indent 127
text-shadow 117
text-transform 113
top 349
vertical-align 116, 166
visibility 129
white-space 115
width 142
word-spacing 114
word-wrap 116
z-index 349
106
96
32
ACCESSKEY 86
ACTION 320
ALT 59
AUTOBUFFER 64
AUTOFOCUS 322
AUTOPLAY 64
CHECKED 325
CLASS 98
COLS 324
COLSPAN 78
CONTENT 32
CONTROLS 64
COORDS 89
DISABLED 321
FOR 328
HEIGHT 360
HREF 81, 89, 102
HTTP-EQUIV 32
ID 91, 99, 234
LABEL 327
MAXLENGTH 321

407

MULTIPLE 326
NAME 88, 321
NOHREF 89
POSTER 66
READONLY 321
REL 102
ROWS 323
ROWSPAN 78
SELECTED 327
SHAPE 89
SIZE 321, 326
SRC 57, 63, 193
STYLE 101
SUMMARY 76
TABINDEX 87
TARGET 82
TYPE 68, 102, 320
USEMAP 89
VALUE 321
WIDTH 360
WRAP 324
64
32
32
33
32

299
116
193
36, 206

29
258
163
194, 228
206
208
194
206
206

81
83

408

(.)
87
83
85
82
81
82
45
86
88

372
375
329
325
327

260
199

CSS 110

38
38

378
87
88
118

99
88
219
194, 197
98
212
Web- 234
91
216
225
199

- 23
84
84
83
83
- 22

359
88
95
23
243
197, 337
case 208
default 208
do 210
else 206
false 197
for 209
function 212
if 206
NaN 197
null 197
switch 208
true 197
undefined 197
while 210, 211
324
319, 330
330
330
233
233
172
47, 107, 108, 229
194
121
135
121
147
144
147
348
348
360
244
366
235
235

51
35

39
128
350, 386
215
216
216
216
215
31
31
219
addClass 244
addColorStop 373
alert 264
append 249
arc 365
beginPath 364
bezierCurveTo 367
blur 335, 336
child 240
clearOpacity 247
clearPositioning 351
clearRect 361
click 335
clip 386
closePath 364
confirm 264
createChild 252
createLinearGradient 372
createPattern 377
createRadialGradient 375
down 240
drawImage 378
each 262
fill 364
fillRect 361
fillText 371
first 241
fly 235
focus 335, 336
get 234
getAttribute 243
getBody 235

409

getCharCode 260
getColor 246
getContext 360
getCount 262
getDate 223
getDocumentHeight 243
getDocumentWidth 243
getDom 236
getFullYear 223
getHeight 241
getKey 260
getMonth 223
getOffsetTo 242
getPageX 261
getPageY 261
getStyle 246
getValue 336
getViewportHeight 243
getViewportWidth 243
getWidth 241
getX 242
getY 242
hasClass 245
hide 248
indexOf 262
insertAfter 250
insertBefore 250
insertFirst 250, 253
insertHtml 251
is 241
isVisible 248
item 262
last 241
lineTo 364
load 287
markup 252
moveTo 364
next 240
on 256
onReady 232
overwrite 252
parent 239
position 351
prev 240
preventDefault 261
quadraticCurveTo 367
radioClass 245
rect 368
remove 254

410

(.)
removeAllListeners 257
removeClass 245
replaceClass 245
replaceWith 253
restore 381
rotate 382
save 381
scale 383
select 236, 239, 335, 336
set 243
setDisplayed 247
setHeight 242
setLocation 351
setOpacity 247
setStyle 247
setVisibilityMode 248
setVisible 248
setWidth 242
setX 351
setY 351
show 248
sort 303
stopEvent 261
stopPropagation 261
stroke 364
strokeRect 361
strokeText 370
substr 224
toggle 248
toggleClass 245
toLowerCase 343
translate 381
wrap 253
288
319
227
319
228

328
52

323
254

78
218
Array 224
Boolean 224
CanvasGradient 373
CanvasPattern 377
CanvasRenderingContect2D 360
CompositeElementLite 233, 261
Date 223
DomHelper 234
Element 233
EventObject 234
Ext 233
Ext.lib.Dom 243
HTMLCanvasElement 360
HTMLDocument 226, 263
HTMLElement 226, 265
HTMLOptionElement 334
HTMLOptionsCollection 334
Image 376
Location 264
Math 225
Number 224
Object 225
String 224
Web- 219
Window 227, 264
219
219
227
194
194
194, 198
199
212
201
199
197
211
202
211
194
199
200
221
200
201
199
207

137

151
151

Web- 24
212
213
214
212
325
194
document 226
Ext 233
Ext.DomHelper 234
this 257
window 227
213
197
Web- 213
364
21
321
323
330
322
90
87
87
105
21
380, 401
318
195, 204
177
177
178, 330
176
39

305
50
CSS 393

218
checked 332

411

disabled 332
dom 236
fillStyle 362
font 371
form 335
globalAlpha 363
globalCompositeOperation 384
href 264
id 244
innerHTML 265
length 224, 334
lineCap 369
lineJoin 369
lineWidth 363
location 264
miterLimit 370
options 334
PI 366
readOnly 332
selected 334
selectedIndex 333
shadowBlur 380
shadowColor 380
shadowOffsetX 380
shadowOffsetY 380
src 377
strokeStyle 362
textAlign 371
textBaseline 372
textContent 265
title 264
value 332
227
228
305
Web- 30
31
31
75
76
75
76
96
174
172
21
110
23

28
196

412

205
330
254
abort 255
blur 255, 336
change 336
click 255, 337
dblclick 255
error 255
focus 256, 337
keydown 256
keypress 256
keyup 256
load 256
mousedown 256
mousemove 256
mouseout 256
mouseover 256
mouseup 256
onload 379
resize 265
select 337
21
21
21
39, 326
40
39
39
41
326
217
98
95
101
99
99
97
105
70, 195
209

70
75
76
95
101

102
107
106
- 288
26, 28
!DOCTYPE 32
A 81, 91
ABBR 49
ACRONYM 49
ADDRESS 47
AREA 89
AUDIO 63
BLOCKQUOTE 42
BODY 31
BR 50
CANVAS 359
CAPTION 75
CITE 49
CODE 49
DD 41
DEL 49
DFN 49
DIV 135
DL 41
DT 41
EM 49
FIELDSET 329
FORM 320
HEAD 31
Hn 39
HR 45
HTML 31
IMG 57
INPUT 320
INS 49
KBD 49
LABEL 328
LEGEND 329
LI 40
LINK 102
MAP 88
META 31
OL 40
OPTGROUP 327
OPTION 327
P 36
PRE 44
Q 49
SAMP 49

SCRIPT 192
SELECT 326
SOURCE 68
SPAN 121
STRONG 49
STYLE 102
TABLE 70
TBODY 76
TD 71
TEXTAREA 323
TFOOT 76
TH 71
THEAD 76
TITLE 31
TR 70
TT 49
UL 40
VAR 49
VIDEO 65
29
28, 29
28
30
32
28, 29
28
29
91
29
29
28
59, 68
195
NaN 197
null 197
undefined 197
197
218
203
218
218
203
195
215
196

373
366

413

30
206

Web- 193
83
44
325
86
138
212
213
212
212

359
216

376
372
372
375
372
209
211
211
210
211
209
209
42

196

44
44

414

219
Web-
36
55
130
49
30
347
348
30

29
29
348
348
349

91
71
71