основи вебдизайну

. . , . . , . .

-

.

, ,

. .

BHV 2009

004.7 32.973 -19

: . . ' , . , .-.

.

. . ' , -

- . .

.

,

1/11-988 31.03.2008 .

. ., . ., . .

-19 - / . . , . . , . . : [. .]. .: . BHV. 2009. 336 : . ISBN 978-966-552-228-7

-. HTML JavaScr ipt , -, FrontPage, ,

-. , ,

, .

, .

.

, - .

32.973

.

- -

. , ,

.

, ' .

.

ISBN 978-966-552-228-7 BHV, 2009

7 8

1. - 9 9

9 10 - - 12 13 - 14

- 16 - 16 - 20 24

1 28 2 37 40 41

2. H T M L 45 HTML 45

46 L- 47 49 54 57

HTML- 61 61 ' 64 67 68

69 ' - 70

HTML-, 74 , 75 78 80

81 4 84 5 86 89 91

3. , - - 95 - 95

, 96 - 97 GIF- 109 113

- 119 - 119 121 - 123

6 126 131 132

4. - 135 135

136 - 137

- 138 - 138 140 141 145 147

- 150 151 - 153

4

7 157 165 165

5. - 169 169

170 - 171 - 178

FrontPage 182 183 186

' 189 , 190 ' Internet Explorer 193

198 JavaScript 199 204

FrontPage 212 213 218 HTML FrontPage 222

8 229 9 234 242 242

6. 247 - 247

URL- 248 249 FTP-3' 256

258 258 262

10 268 272 272

5

7. - 276 276

277 277 279

- 282 - 285

285 288 - 289

291 291 295 299

- 301 - 302 304 306

- 311 311 311

- 314 315 - 318 - 322

- 323 11 326 330 331

6

-

,

,

,

,

' ,

' . '

, -

, -

.

, ,

-

. , ,

- ,

,

- - .

35- , 11 ( 20-25 ). ,

, ,

'.

. ,

,

, ,

.

, -

-

. ,

-,

, '

-. , -

.

, HTML, , - - ,

- .

,

. ,

1 7 ,

- .

2-4 6, HTML, , - Microsoft FrontPage -. -

5, HTML. --

, ,

,

, ,

,

,

.

- ,

.

.

BHV (http://www.bhv.kiev.ua) . (http://osvitaonline.googlepages.com). - .

8

1

-

-,

-,

, .

,

. ,

, , - -.

,

-

, -

- .

'

. '

, '.

.

'

. -

- , '-,

'-.

, . ,

,

.

, ,

,

. ,

,

.

TCP (Transmission Control Protocol ),

IP (Internet Protocol ). ,

,

.

(World Wide Web WWW), . , '

.

.

HTTP (Hyper Text Transfer Protocol ). ,

, FTP (File Transfer Protocol ). , , , , .

, , FTP--.

.

, ,

(, ICQ), Usenet .

', ,

, .

'

IP, ,

10 1. -

IP-. : ..., 0 255 (, 193.205.31.47). - .

- ', '

.

,

zirka.lviv.ua. ,

, lviv . .

. ,

, .

(In-ternetNIC), , .

:

, ru , fr , sl , , jp , au , uk . :

com , gov , edu , org , mil .

,

,

,

.

, , -

, ', '

. -

- - '

', ,

' . , ,

, ,

. , , URL (Uniform Resource Locator ) .

URL : ://, , http, ftp;

11

,

'.

URL, . .

URL-: http://www.syhiv.com/pub/files/school.html school,

html, pub/files www.syhiv.com. HTTP;

http://www.syhiv.com www. syhiv.com;

ftp://ftp.syhiv.com/pub/files/school.txt school.txt, pub/files ftp.syhiv.com. FTP.

- -

, -

().

. -,

HTTP, URL HTML ( ) , .

,

HTTP. , . --

,

HTML. - URL, .

-

, Internet Explorer, Mozilla Opera. - URL Enter. - ,

. ,

, ,

12 1. -

, , -

.

(, ' -) ' -, - .

' ( ) .

. ,

.

-, , .

- ,

-. -

' ,

.

-

- .

,

.

,

; .

-, '

, - .

-

, http://bhv.kiev,ua/. - ,

, ,

.

, , ,

.

90- . ( . home page) , ,

13

.

. ,

,

, .

,

,

, ,

.

-

,

. -

.

, ,

,

, , ,

, , .

, , ,

, .

, .

,

, .

,

. ,

,

, ,

.

, ,

. , ,

, ,

. .

. 1.1 . . .

. 1.2 BHV. .

14 1. -

. 1.1.

. 1.2. BHV

15

, '

,

.

, ,

' . .

- ,

. ,

,

. .

,

. .

,

. ,

,

' .

-

,

'

.

.

. .

, ,

-

.

-

( ), ( ) -- .

-.

-

www.narod.ru (. 1.3). 100 . ' : _.narod.ru.

16 1. -

. 1.3. www.narod.ru

www.ho.com.ua (. 1.4). ' : _.ho. com.ua.

, '

,

, .

'

( ) - .

,

, .

.

- 17

. 1.4. www.ho.com.ua

1.1 .

www.narod.ru. 1. , '.

2. www.protvaryn.narod.ru.

3. (. 1.5). .

:

, -

.

4. (. 1.6).

1 8 1. -

. 1.5. protvaryn.narod.ru

. 1.6. ,

-

5. , .

6. . .

-

-

, .

,

.

.

, ,

. ,

. ,

,

.

. ,

( , ) ,

.

.

,

, , .

,

.

1.2 , - www.

protvaryn.narod.ru. 1. , '. 2.

www.protvaryn.narod.ru.

20 1. -

,

.

.

,

(. 1.7).

. 1.7. .

, ,

, (. 1.8). E-mail . (), , '

.

,

(. . 1.8).

- 21

, .

. 1.8. ,

7. , . , .

' ( ) (. 1.9).

8. ( ). , ,

. (, !) , , (). .

,

,

, ,

. 1.10.

22 1. -

. 1.9.

. 1.10. protvaryn.narod.ru

9. , ().

- 23

(. blog weB LOG) ,

.

, , ,

.

, .

,

, ,

- --

.

(, ). .

, -.

-

. (, WordPress, Pivot), , -, ,

.

90- ,

, . -

www.livejournal.com, www.blogger.com, www.jj.ru, www.rax.ru, blog.net.ua. www.live-journal.com (. 1.11) , ,

.

' .

, ,

. , ,

, .

,

.

.

, ,

.

24 1. -

. 1.11. www.livejournal.com ,

. , :

, , ,

, .

( ) , , .

,

.

,

, , , ,

, .

,

.

,

- 25

.

'.

, .

,

.

, ,

. -

, ,

.

-

,

.

1.3 , prot-varyn.livejournal.com.

1. , '. 2. http://protvaryn.livejour-

nal.com/. , . 1.12.

. 1.12. protvaryn.livejournal.com

26 1. -

;

.

link. , post comment. post comment . -

(. 1.13). , ,

. ,

. 1.13.

. 1.13.

4. . '

(. 1.14).

- 27

. 1.14.

5. protvaryn .

1 -

: -, -,

, .

:

', ,

.

,

.

28 1. -

1. , '. 2. www.narod.ru.

(. . 1.3). 3. ( '

) . : , kyivpavl.

4. () (. 1.15).

5. (). ( ). , ( ) , ( ). , . '.

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

. 1.15. ( 1)

1 29

. 1.16. ( 2) ,

.

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

( ). , ' index.html. .html -

.

,

, (). , : ( ) , : (. 1.17).

,

, .

1. -

. 1.17.

8. , , (. 1.18).

. 1.18.

1 31

.

( ). 9. , .

- ,

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

10. . .

,

.

( ). , ( ). ,

. (). simple.html. , .

, legk.html. , :

( ); , ,

: ; :

',

,

.

.

. 1.19. 1 1 . vant.html

.

32 1. -

. 1.19.

12. , index.html. .

(), ( ) , . 1.20.

.html , . index, html. , . 1.17. (1 , 2 ) . -

' ,

.

,

(. 1.21).

1 33

. 1.20.

. 1.21.

13. . , -

34 1. -

(), () ( ), , . 1.22.

. 1.22.

14. http://narod.yandex.ru/userforum/ ?owner=kyivpavl, -.

15. (), ( ) index.html.

16. 12 , .

( ) ( ). (. 1.23).

17. , . 18. .

, (), () ( ). , . 1.24.

1 35

. 1.23.

. 1.24.

19. (, http://narod.yandex.ru/chat/chat_enter.xhtml?mychatjd= 70352085), .

36 1. -

20. (), ( ), index.html ,

.

2 1 . (, http://www.kyivpavl.narod.ru/). (. 1.25) , .

. 1.25. www.kyivpavl.narod.ru

22. , , -

.

2

: -

.

www.livejournal.com. 1. , '.

http://www.livejournal.com/.

2 37

Live-Journal (. . 1.11).

2. (. 1.26).

. 1.26.

Create Account ( ), .

Basic (), . Gender (), ( ) Interests () Save and continue ( ). .

.

.

38 1. -

, , ,

,

,

.

6. - .

(. 1.27).

. 1.27.

7. ' .

(. 1.28). - , : http://kyivpavl.livejournal.com/.

8. .

.

2 39

. 1.28.

9. , , ,

www.livejournal.com.

- ; ,

; www.narod.ru.

-:

'

'

'

40 1. -

1. URL- : ) ; ) -; ) ', ; ) ; ) .

2. , , :

) , ' ;

) '; ) TCP/IP; ) ; ) -.

3. -: ) ; )

; ) ,

' ; ) ,

; ) .

4. : ) -; ) -; ) ' -,

- -

; ) ' -; ) -, ' .

41

5. - : ) - , '

;

) , - URL-;

) ; ) -,

-;

) , ' .

6. -: ) - - ,

;

) , -

;

) - ' ;

) -; )

' .

7. : ) - '; ) -, ; ) -; ) ,

-;

) , index.html. 8. :

) ; ) - ;

42 1. -

) ; ) ; ) , .

9. : ) , -

;

) , ;

) , ;

) , index.html; ) .

10. : )

;

) , ;

) ; )

;

) . 11. :

) ;

) -; ) ,

;

) ;

) .

43

12. : ) , ; ) ,

;

) ;

) ; ) .

44 1. -

2 HTML

, ,

, -

. , -

. ,

.

, ,

-.

!

-

HTML, , ,

, ' -

. ,

- , .

HTML - ,

, , .

, ,

, ,

. HTML (Hyper Text Markup Language ). - HTML. HTML . HTML -

( ,

). , , .

HTML, , .

,

. < > . ,

. ,

. HTML: , , , , , .

,

.

( ). , .

/ (). : , , , , , . ,

. : , , , , , . ,

HTML, . ,

, .

,

.

,

=. ,

.

.

:

46 2. HTML

,

HTML, , .

>. - , >, , .

HTML- HTML- . ,

- .

HTML- .htm .html. HTML .

, , HTML-.

( ). . , , , . ,

, ( ), ( ), .

,

. , HTML- . ;

HTML 47

,

,

. HTML . ... .... ( ). HTML , ,

.

, ,

. 1, 6. , ALIGN. : Te ( \ c e n t e r , r i g h t l e f t ) . . 2.1 .

. 2 .1.

HTML . , , . ',

48 2, HTML

HTML- . -,

.

. ,

, .

. : BACKGROUND="URL" URL ,

; BGC0L0R= ,

; = ; LINK=

; ALINK=

; VLINK=

.

HTML- , , ,

,

. ,

,

,

, ,

. TeKCT. , ,

.

HTML- . . 2.1 , , .

HTML 49

2.1.

bold italic underlined striken superscrtpt

subscript

, .

, (), . , ,

, .

FACE="" . ' ,

. FACE ,

:

. . .

FACE= ( 1 7). :

COLOR= . ,

red, green, b lue , ( ), # , , .

, #FF0000, #008000, #0000FF . ,

. 216 . ,

,

-

50 2. HTML

, -. -

00, 33, 66, 99, FF, . SIZE COLOR . ,

. , , SIZE: ( ) , ( ) . .

,

.

Te .

.

Te .

.

. .

Te . .

- - , .

2.1 HTML- .

1. (Notepad). 2. HTML- :

\

HTML 51

< 1 > ' .

' . < >

"".

. .

3. , , , 1.html. .

4. Internet Explorer 1.html. .

5. , -. , HTML- . -

F5 . . 2.2 , Internet Explorer.

. 2.2. -

52 2. HTML

2.2 - ,

.

, ,

' .

, .

,

' .

,

, , .

,

.

,

.

.

.

,

'

.

( .., .., )

1. HTML- -, .

, , - . ' ,

. ,

,

, .

2. html- .html. -

. 2.3.

HTIVIL 53

. 2.3. -

,

,

. HTML- : (); (); .

(, ). , . . TYPE, . :

d i s k ; c i r c l e ; s q u a r e .

54 2. HTML

.

, . . TYPE, . :

; ; ; ; 1 .

START ,

, , , '

, :

(definition list) .

: .

. ,

.

.

2.1 . ,

HTML 55

< / F O N T > < / L I > ioeo

Ha . 2.4 Internet Explorer.

. 2.4.

2.2. ,

o

56 2. HTML

Ha . 2.5 Internet Explorer.

. 2.5. , 6, .

, '

HTML- .

- , .

'. - ,

.

, ,

.

, HREF. URL, . .

HTML 57

-, ,

-, HREF URL- ; .

,

; .

, -.

, HREF NAME, ' . ,

. ,

.

' URL , #. # , , ' .

:

.

HREF m a i l t o : , ,

.

, ,

.

2.3. HTML-,

-

Microsoft.

58 2. HTIVIL

A . , ' ,

,

. [email protected] HTML- (. 2.6).

. 2.6. -

Microsoft ,

.

,

HREF, ' --, ,

, HTML-. [email protected] , , HREF .

HTIVIL 59

- -

Microsoft, , : http://www.microsoft.com/. -,

main.htm, , .

text.doc, .

, -

, [email protected], ' , .

[email protected] , ,

'

HREF [email protected]. .

, HTML-, , 1.html 2.html. - ,

:

.

.

, , -

.

: . , -

,

, (. 2.7). , - ,

60 2. HTML

: -

.

. 2.7. - ,

BGCOLOR=cyan, - -.

HTML- ,

.

, ,

,

. HTML- , ,

.

.

...; ..., ... .... .

, BORDER, , ,

.

, . ALIGN

HTML 61

t o p bot tom, ( t o p ) . , P o a . . , , . , 1. .

, 1. .

2 . 4 . HTML-, . 2.2. ' , 4-5 . 2.2.

1.

2.

3.

4.

1.

2.

3.

4.

5.

1.

2.

3.

4.

5.

1.

2.

3.

4.

'

1.

2.

3.

4.

HTML- :

62 2. HTML

' 1. 1. 1. 1. 1.

2. 2. 2. 2. 2.

3. 3. 3. 3. 3.

4. 4. 4. 4. 4.

5. 5.

- ,

. 2.8. ,

.

HTML- 63

, (non-breaking space ). .

. 2.8. ,

'

' ,

. ' ,

.

, '

.

' : COLSPAN (' , ) ROWSPAN ( , ) . ' . , C0LSPAN=3 , , R0WSPAN=2 2 .

2.5. HTML-, '

HTML-, , ' (. 2.3, . 2.4).

64 2. HTML

2.3. , '

10- 10-

2.4. , '

11- 11- 11-

.

ROWSPAN COLSPAN ROWSPAN 10-A

10-B

COLSPAN

11-A 11-B 11-B

Ha . 2.9 HTML- . .

,

.

HTML- 65

. 2.9. '

2 . 3 - , ,

. 2.5, ' , .

2.5. , '

11- 15

11- 19

11- 10

11- 5

11- 11

11- 8

1. HTML-, ... ROWSPAN COLSPAN.

2. .html. . 2.10 , . ,

, ' .

. 2.10. , '

66 2. HTML

, ,

. ,

, .

WIDTH , . ,

,

.

2.6. HTML-,

HTML-, , .

10-A

10-B

Ha . 2.11 , .

. 2.11. , WIDTH

HTML- 67

500 . 50 % , 10- 250 . 10- 250 ( ), .

,

.

ALIGN ; . ALIGN center , r i g h t , l e f t j u s t i f y , , .

: ; l . .

, VALIGN, top, bottom middle, .

FRAME . , :

box ; above ; below ; lhs ; rhs ; hs ides ; vs ides ; void .

RULES .

68 2. HTML

:

a l l ; 4 rows ; cols ; none .

2.4 .

1. HTML-, : 15 ,

.

300 . 2. .html. . 2.12

, .

. 2.12. 15

BGCOLOR. , # . , BGCOLOR , , .

HTML- 69

:

BORDERCOLOR ; BORDERCOLORLIGHT ; BORDERCOLORDARK .

. , BORDER, .

.

2.7. HTML-,

ll-A ll-B ll-B

,

. : TeKCT

' -

-

,

HTML-. HTML,

70 2. HTML

. -

'.

, . 2.6, - .

2.6. ,

10-

10-

11-

11-

11-

HTML-, - . 2.6.

10-A

10-B

11-A

11-B

11-B

HTML- 7 1

. 2.13 , HTML- .

. 2.13. -

,

, .

.

:

1 1 - B < / A > < / T D >

2.5 -,

,

. ' ,

.

1. . 2.7.

2.7.

7 2 2. HTML

2. -, ' .

-

,

, .

-

' ,

, , .

-

.

3. HTML- , (Notepad).

4. HTML- - 1.html. ,

, .

5. HTML- - 2.html. iai ' ,

, ,

.

6. HTML- - 3.html.

HTML- 73

ie -Ha .

7. HTML- index.html. . 2.7. .

. 2.14 , .

. 2.14. ,

8. , ,

.

9. . ,

.

HTML-, , , ,

,

. HTML , , ; . ,

7 4 2. HTML

,

.

, -

,

.

,

.

.

,

-.

,

- ,

, .

HTML-. , -,

.

- ,

HTML-. , ,

.

, , . . , . .

. COLS, ROWS < FRAME >. ,

. .

.

, ,

, *.

, , 150 .

HTML- 75

a , . , 20 % , 55 %, , .

,

.

HTML-, . , :

SRC ' , ; NAME ' ; SCROLLING ( yes)

( ) ( yes);

NORESIZE ; BORDER

;

BORDERCOLOR ;

MARGINHEIGHT , ,

;

MARGINWIDTH , ,

.

,

, , ' ,

. .

2.6

(. 2.5) , . 2.8.

76 2. HTML

2.8. ,

(2.html)

(3.html) (l.html)

,

60 % 40 %, ,

- . 1.html, 2.html 3.html 2.5.

1. main.html , .

2. main.html. . 2.15.

. 2.15. , HTIVlL-

HTML-, 77

,

,

.

2.6 '. :

,

.

- ,

,

,

. 2.9. 2.9. ,

,

, '. ,

2. HTML-, , np.html. , , ,,

3. index.html . . 2.16 ,

-,

.

. 2.16. - index.html

HTML-, 79

index.html ' , , NAME, - .

, SRC ,

. -

.

. 2.17 , , -

. ,

,

.

. 2.17. ,

-

-. ' , -

,

,

80 2. HTML

- . , -

. -,

, ,

.

-

: -,

, , .

1. , -, ,

.

1

' ',

' , '

III . . . V . . . '

' ,

-. ,

' ,

V-IX . XIV .

: , , ,

, , .

2

, -',

.

HTML-, 81

,

,

,

, .

.

, ,

- ., . , ,

, . -, ,

, . , . .

. , . , .

.

.

HTML 1969 (ARPA)

.

' (- ) . 80- XX . (, ) . 90- XX . , .

4 HTML

WWW (World Wide Web) Hyper Text Markup Language (HTML) . HTML - 1989 ooei exooi WWW, .

HTML W3C (World Wide Web Consortium) 1996

82 2. HTML

, IBM, Microsoft, Netscape Communication Corporation, Novell, SoftQuad, Spyglass Sun Microsystems. W3C

HTML .

5

, '

,

, .

( ), ( ). ,

,

,

.

6

150 , ,

.

( ) ',

.

',

,

.

',

' .

83

7

-

() (). 1500 KM. . -

240 , - 340, -, ,

100-120 . , ,

, .

, ,

,

,

, , , ,

.

2. HTML-, ,

-.

3. .html. 4. - . 5. -.

HTML-. 6. .

4 -

: .

84 2. HTML

1. HTML-, , :

-

, : 60 % , , -

, ' .

.

30 % , '

.

.

.

.html. (. 2.18).

. 2.18. -,

4. HTML-: , .

85

. 2.19 , HTML- .

.

. 2.19.

5 -

: - , .

1. - '

.

(. 2.10). , .

.

. ,

-

.

, .

86 2. HTML

, -

, .

2.10.

-

- :

HTML-, ; logo.html;

HTML-, , ; 1.html, 2.html, 3.html;

HTML- , ,

1.html, 2.html,3.html; g.html;

- index.html, , ,

1.html, 2.html, 3.html, ' NAME.

2. HTML- logo.html.

3. HTML- l.html.

4 87

4. HTML- 2.html.

. 2.20.

1. .

1

-

2

-

89

4

5

6

7 -

-

8

9

10

-

-

11 --

9 0 2. HTML

12

2. HTML-: ,

,

, ,

, , ; , ;

.

1. : ) ; ) '

-; ) ,

, ,

' ; ) ,

-; ) -.

2. : ) -; )

-; ) - ,

; ) -

; ) HTML.

91

3. : ) ,

;

) -; ) ,

HTML-; ) ; ) - .

4. : ) HTML- -; ) ,

;

) , -

;

) -; ) -, -

.

5. : ) -; ) ; ) , ,

;

) ; ) .

6. : ) ; ) ; ) ; ) ; ) .

92 2. HTML

7. : ) ,

;

) ; ) -; ) ; ) .

8. : ) ,

;

) , ;

) ; ) ; ) .

9. ... : ) ,

;

) ; ) ; ) ; ) .

10. : ) ; ) ; ) ; ) ; ) -.

11 . : )

HTML-; ) , HTML-

;

93

) ; ) -; ) .

12. ' - :

) ' ; ) -; )

; )

; ) ,

.

94 2. HTML

, -

-

, , -,

, , -

. , ,

,

.

, , ,

- ' ,

,

.

, -

, ,

, -

.

-,

.

, ,

- ,

' .

-

, .

- ,

.

,

.

,

-.

,

GIF, J P G (JPEG) PNG. .

GIF (.gif) GIF (Graphics Interchange Format ) 1987 ' .

, 256 , '. ,

-

interlaced ( ).

.

GIF- :

.

, , .

GIF-, -.

PNG (.png) PNG (Portable Network Graphic ) -, GIF. PNG . ,

256- GIF-.

96 3. , - -

JPEG (.jpg) JPEG (Joint Photographic Experts Group ' ) , , GIF.

. JPEG .

, .

JPEG- .jpg.

, , -

.

, ,

.

-

-: , ,

.

HTML-, -.

-

, ,

.

.

BACKGROUND, URL- . , , -

1.jpg. HTML- , , mone.jpg.

- 97

< / / 1 > < / / 1 >

. 3.1 , - .

. 3 . 1 . -, , .

, BACKGROUND gorobci.jpg, . ,

. 3.2.

- ,

.

,

.

98 3. , - -

,

.

. 3.2. -, ,

,

Adobe PhotoShop. ( File Open ( )), Image Adjustments Hue/Saturation ( / ) Lightness () . . 3.3 gorobci.jpg, .

. 3.3. gorobci.jpg

- 99

, ,

,

.

3.1 Adobe PhotoShop , -.

1. . , Tools () Swatches () . , Window ().

2. File New ( ). , , : Width () 150 . Height () 100 , IVIode () RGB Color.

3. Paint Bucket () Swatches () , .

4. Filter > Texture > Texturizer ( ). , , Texture () Canvas () Scaling (), Relief () Light Direction ( ). , . 3.4. ( ) Image Adjustments > Hue/Saturation ( /) Lightness (), .

5. 1.jpg, -. Adobe PhotoShop.

6. HTML-, BACKGR0UND="1. j p g " .

100 3. , - -

Ha

Ha . 3.5 -.

. 3.4.

. 3.5. -, Adobe PhotoShop

- 1 0 1

-

HTML- . ' SRC, URL- , () ( ; (. . /)).

, . ' -

. ( '), WIDTH HEIGHT,

. ,

.

',

,

. , , ,

, .

-

, ALT. , .

HTML-, fla-mingo.jpg, . WIDTH,HEIGHT ALT.

Ha . 3.6 , - .

.

.

102 3. , - -

. 3.6. -,

,

, .

ALIGN , , , :

l e f t , ;

r i g h t , ;

top , , ;

bottom , ,

;

middle , , .

ALIGN l e f t . ,

. HSPASE

- 103

VSPASE . ,

.

, , ,

,

. 10 . ,

,

,

,

' ...

.

,

.

+ 2628.

. 3.7 , - .

. 3.7.

104 3. , - -

, , .

. - ,

,

.

3.1 . -, ,

.

 < / A > < / A >

gorobci.jpg ' gorobci.html, flamingo.jpg flamingo.html. . 3.8 , - .

. 3.8. -, ,

.

- 105

3.2. ,

-.

: .

--

, .

PAGE10 ,

,

, ,

' ...

. ,

.

+ 26-28. ' page9.html, page11.html. . 3.9 , - .

. 3.9. -,

106 3. , - -

.

, -. ,

, :

,

' , .

3.3. HTML- , - .

foto. , , ,

HTML-, -.

3.html.

- 107

, ' HTML- ,

180x150 . .

. 3.10 -, . -

. .

HTML-, ' , : TARGET b l a n k . , , 900 , 750. , , ,

,

. ,

, ,

WIDTH HEIGHT.

. 3.10. -,

1 0 8 3. , - -

. 3.11 , ,

.

. 3 . 1 1 . ,

GIF-

.

.

, ,

GIF. , , -

. ,

, GIF- , ,

. GIF-

- 1 0 9

,

.

GIF- Adobe PhotoShop Adobe ImageReady.

3 . 4 . GIF- ,

, . . 3.12 ,

1.jpg 2.jpg.

1.jpg 2.jpg . 3.12. GIF-

Adobe PhotoShop. , Tools () Layers (). , Window (). File New ( ). , ,

: Width () Height () , 1.jpg 2.jpg, Mode () RGB Color, Background Contents ( ) Transparent (). File Open ( ) 1.jpg 2.jpg. Move (), 1 .jpg 2.jpg . : Layer 1 () . Layer 2 () 1 .jpg Layer () 2.jpg. Layers () (. 3.13).

1 1 0 3. , - -

. 3.13. Layers () Edit in ImageReady ( ImageReady), Tools (), Adobe ImageReady, , Tools (), Layers () Animation (). Animation () ' . , -

Layers (), (. 3.14). .

. 3.14.

5. . Animation () Duplicates current frame ( ). , ,

- 111

Layers () (. 3.15).

. 3.15. Adobe ImageReady

, -

(. 3.16). Plays/stops animation (/ ) Animation (), .

.

. 3.16. 7. File Save Optimized ( -

) GIF- .gif.

112 3. , - -

HTML-, , ,

, .

' , ' -. -: ,

.

, .

,

.

,

. ,

, ,

. ,

, ,

.

.

SRC, , USEMAP, ' ( #). NAME, ' ( USEMAP, #) . , . :

HREF , ' ; SHAPE ,

:

r e c t ; polygone poly ; c i r c l e ;

COORDS , .

- 113

,

, .

.

,

, -

, ,

COORDS. -

.

(0;0). , .

, 400x300 , ,

, :

COORDS : (0;0) (200; 150) ( , 400x300). ,

, ,

:

,

400x300. (200;150), 40 . ,

. -

114 3. , - -

, 400x300 ,

,

, .

:

.

, ,

, 400;150;0;150;200;0, , ' . ,

.

,

.

,

.

,

,

HTML-.

.

3.2 .

,

. ,

: , , .

- :

map.jpg (. 3.17); HTML- 1.html, 2.html, 3.html,

;

HTML- map.html, map.jpg 1.html, 2.html, 3.html.

- 115

. 3.17. map.jpg, , ,

.

1. Paint Adobe PhotoShop map.jpg.

2. , , 1.html, 2.html, 3.html. "" "" " " ""

"" 0

""

116 3. , - -

'

3. map.html, :

""

4. map.html . . 3.18 .

. 3.18. map.html,

- 117

, - : -

,

.

,

.

, , :

, -

.

, ,

, .

,

ALT .

- .

', ,

.

, ,

' -.

, .

, '

,

. .

- , '

-,

.

,

,

, .

-

.

,

.

118 3. , - -

-

, .

, ,

.

.

,

. , ,

, ,

. ,

, .

-

-

, . ,

, ,

,

. , ,

- .

-

, .

,

, (, , ) , . - .

AVI (Audio Video Interleaved - , ) . AVI- , , , Adobe Premiere, Adobe After Effects . AVI- .avi. ,

. .

- 119

MOV, QuickTime, , .

' , , . MOV- .mov.

.

MPEG (Moving Pictures Experts Group ) - -. MPEG- . ,

MPEG-1 MPEG-4. .mpeg. ASF (Advanced Streaming Format ) , ( ). .asf.

WAV, AJFF, MIDI, . .

WAV (Windows Audio)

' . WAV- .wav . , ( ), .

AIFF (Audio Interchange File Format -) Macintosh, -.

AIFF- .aif, - ,

.

(MPEG-1 Audio Layer-3) ( .). .

120 3. , - -

,

' ,

.

, .

.

.

.

,

. ,

' .

:

,

.

-.

.

.

.

, ,

.

.

,

.

'

,

' -.

.

RealAudio/Video - , Progressive Networks. RealPlayer. , RealAudio/Video, .ra, .ram, .rm, .rmm, .rmd.

- 121

QuickTime Streaming Server , , MIDI-.

Windows Media Server ,

-

. ,

-, -

, -,

,

. Windows Media WAV, AVI, MIDI, MPEG, VOD, AIFF, MPS.

3 Windows Media (Windows Media Player). -

.

' -, -.

Windows-, Windows Media (. 3.19) , , , .

. 3.19. Windows Media

122 3. , - -

.

,

.

. '

: , -

( ).

', .

-

Internet Explorer ,

. .

:

LOOP : t r u e ,

;

f a l s e ; .

: . HTML- ,

. ,

. ',

, ,

- -

, , .

, - .

, , school.avi, :

Bieoi (600 )

- 123

'

.

DYNSRC : - ,

.

:

audio.wav , - .

, , :

audio.wav ( , HTML-). :

SRC ( URL-) ; ALIGN ( l e f t , r i g h t , top, middle, bottom)

; WIDTH ( ) ; HEIGHT ( ) ; AUTOSTART ( t r u e false)

; REPEAT ( t r u e false)

; PLAY_LOOP ; HIDDEN ( t r u e fa l se)

.

:

Ha . 3.20 -, .

124 3. , - -

. 3.20. -

'

. :

DATA URL- , TYPE . :

ALIGN ; WIDTH ; HEIGHT ; HSPACE ; VSPACE .

, '

.

. : ', ,

' . .

, :

- 1 2 5

( MPEG). , , , , AIFF. ,

TIFF, GIF. : .

STANDBY, ( ) , '. , :

1.wav , , .

6 '

-

: -

, - '

, .

-, .

.

: -,

,

.

.

-,

http://protvaryn.narod.ru/.

126 3. , - -

1. site_home_pets , - protvaryn.narod.ru (. 3.21).

amadiny.jpg frosya.jpg . 3.21. -

2. site_home_pets , . 3.22, .

1.jpg 2.jpg 3.jpg 4.jpg . 3.22.

3. Adobe PhotoShop '

6 127

(. 3.23). .

. 3.23.

4. Adobe PhotoShop 4.jpg 41.jpg 42.jpg, . 3.24. .

4.jpg 41.jpg 42.jpg . 3.24. GIF-

, ,

.

3.4 , Adobe PhotoShop GIF- 4.jpg, 41.jpg, 42.jpg. 4.gif. HTML- (richi. html), (bonya.html), (amadiny.html) (frosya.html). richi.html: , ,

. ,

' .

.

128 3. , - -

.

bonya.html: . -

. ,

. ,

, . ,

, .

.

amadiny.html: .

. ,

,

.

.

frosya.html: / . 4 , .

, :

6 129

- BACKGROUND . GIF-.

7. np.html , .

TARGET, ' , .

8. index.html, .

- ,

, .

3a -.

9. index.html , . . 3.25

13 3. , - -

,

.

. 3.25.

1. - , .

.

2. -:

';

'.

'

' ,

'.

131

3. - , ,

.

1. - : ) ; ) ; ) ; ) ; ) .

2. - :

) ; ) ; ) ; ) ; ) .

3. URL- :

) SRC; ) HREF; ) IMG; ) BACKGROUND; ) BODY.

4. ', -, :

) URL- ; ) WIDTH HEIGHT IMG; ) ALT; ) SRC; ) WIDTH HEIGHT BODY.

132 3. , - -

5. 1.jpg - 1.html : ) ; ) ; ) ; r) ; ) ,

6. : ) -; )

;

) , --;

) -, ; ) ,

.

7. USEMAP : ) URL-

;

) ' ; ) , '

;

) ; ) NAME .

8. : ) , -

;

) -, ' ; ) ; ) , ' -; ) -, '

.

133

9. : a) HREF, SHAPE, COORDS; 6) RECT, POLYGONE, CIRCLE; B) USEMAP, NAME; r) SHAPE, RECT, POLYGONE, CIRCLE; ) HREF, USEMAP, NAME.

10. : ) .avi, .mov, .mpeg, .wav; ) .gif, .jpg, .png; ) .html, .mp3; r) .avi, .mov, .html; ) .ra, .ram, .rm, .rmm, .rmd.

11. - :

) Mya; ) Meoi; ) ; ) My3MKa; ) . 12. : ) ; ) ,

; ) ; )

audio.wav; ) audio.wav

l.jpg.

134 3. , - -

4

-

, -

,

.

! ,

? , . ' Microsoft FrontPage, ,

- .

, ,

,

,

- .

.

, - ,

,

, . ,

WYSIWYG (What Your See Is What Your Get , ), Microsoft FrontPage -.

, HTML, FrontPage , ,

.

-.

FrontPage -: FrontPage Explorer, - FrontPage Editor, .

. 4.1 FrontPage 2003. Microsoft Office 2003 .

() (). , .

, .

. 4 . 1 . FrontPage 2003

136 4. -

FrontPage --.

(), .

()

()

-

( -)

()

()

() ()

,

-

-

-,

-

-

-

-

,

-

().

-

() , -

.

() ,

, , , ,

'.

137

() HTML-.

HTML- -, , ,

.

( ) , :

HTML- , .

() , .

-

, FrontPage , -.

-

- .

1. () ( ) () () ( ).

2. - ( -) , -.

(). , FrontPage , .

, .

FrontPage , 6, . 4.2.

FrontPage , ' ,

.

-

FrontPage. , . ,

1 3 8 4. -

-, ,

.

. 4.2. - ( ) FrontPage , , - ,

-

, .

- :

(); ()

; Ctrl+0.

( ), - ().

- 139

-,

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

, ,

',

, .

(). , -

( ) . -

( ) (), - ( -) . index.html, image _private , .

HTML- (), Word. HTML. , , ,

, , .

.

() . ( ),

140 4. -

,

.

,

Microsoft Office, FrontPage HTML-. () . FrontPage , , .

:

() ( );

( ) ;

(); ( ).

, ,

.

.

-,

.

( ). , :

() ();

( ); Alt+Enter.

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

- 141

() (. 4.3) , .

.

. 4 . 3 . ()

() () , , :

( ) ;

( ) , ;

( ) , ;

( ) , ,

; ( ) ,

,

; ( ) ,

,

.

142 4. -

() ( ) ( ). , () :

( ) ;

( ) ( ) , ;

( ) ( ) , .

() () () , .

( ). ( ) , .

, Word.

() (. 4.4) (), URL- . (), --

, (), .

( ) GIF, JPEG PNG. , .

( ) , ,

-

- 143

.

( ) ,

. () , '

.

. 4 .4. ()

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

() - - ;

.

FrontPage ,

1 4 4 4. -

.

(), , , :

GIF-

'

,

, () ( ).

- 145

( ) (. 4.5), .

. 4.5.

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

( ) HTML- , ;

( ) ;

( ) ;

( ) .

1 4 6 4. -

( )

.

() () .

. ,

( ), ( ) .

( ), (). , ,

.

,

:

() ();

(); Ctrl+K; (

) (). (. 4.6), ', , .

, , ':

-

-,

;

-, - URL- ()

- 147

() ;

, '

( ) ;

; ( ) . ( ) .

- ( () (), ), ,

() ( ) .

. 4.6.

,

( ), .

,

( ).

148 4. 5-

4.1 -, .

1. , my_web, FrontPage -. -.

2. -, ( ) ().

3. - () (. 4.7),

, ,

' .

, .

,

' .

,

.

. 4.7.

4. (), , . 4.8.

- 149

. 4.8. -

5. ( ), , . ',

,

,

_ .

, -

.

-

-

, FrontPage. ,

. ,

.

, .

,

.

-,

.

150 4. -

I , , , .

, -

, ,

-.

-

.

1. () () () - ( -). (. 4.9). ( ).

. 4.9. -

2. (. . 4.9) . () .

3. - ( -) .

4. .

- 151

,

FrontPage 2003. - ( -) . :

,

, ;

,

;

;

,

.

- ( - ) , ,

,

. :

; -; ; ,

.

- ( -) , ,

, FrontPage. .

URL-. ,

.

, :

() , ;

() ;

() ; ()

.

152 4. -

. () , FrontPage , .

-

. .

- (- ) , ,

.

- ( -) .

, FrontPage.

- (- ) ,

.

, ,

, , ,

-,

.

, , , ,

, FrontPage , -

JavaScript. .

, ,

FrontPage Server Extensions. , .

-

FrontPage -

, . ,

.

- 153

-

.

1. () ()

( ). () ( ) ().

2. ( ), , (. 4.10).

. 4.10.

.

, . ; (. ) , ,

( ). , ,

,

.

FrontPage ; , -

154 4. -

. HTML: ,

, , ,

',

. , ,

; ,

. ( ) ( ) , .

4.2 .

1. () ( ) ().

2. , , ( ) ().

FrontPage (. 4.11). ,

FrontPage: -,

( ), ( ).

,

, FrontPage .

,

,

.

.

, ,

.

- ,155

. 4.11.

4.3 .

1. () ( ). .

2. ', . , , ,

, .

3. ( ). ( ) , , FrontPage ( FrontPage) ().

4. ( ) , ' (). -

156 4. -

:

(), , .

, FrontPage.

7 FrontPage :

FrontPage -, , .

(. 4.12). , .

,

.

.

. 4.12.

1. roslyny : karta.jpg ( , ), kalyna.jpg (), topolya.jpg (), barvinok.jpg () lyon.jpg ().

2. FrontPage. () ( -) roslyny. ,

7 157

, .

.

3. , ,

kalyna.htm, topolya.htm, barvinok.htm lyon.htm. ( ) ( ) .

4. . :

, , ,

. ,

, ,

, ,

, , .

: . (Popu-lus) - . .

, ' ,

, , , , ,

: , , , ,

....

.

: , ,

(Vinca). ' , , - , ,

.

-. ,

.

:

,

. , ,

, , , ,

. , ,

158 4. -

' ,

.

( ), () , .

( ) .

,

' ,

. . 4.13 - ,

.

. 4.13.

.

. dereva.htm Takvity.htm.

, ,

, (

7 159

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

-,

( ). ,

() ( ). () ().

( ).

.

( -). , , . dereva.htm . 4.14.

. 4.14. dereva.htm -

160 4. -

10. . 11. .

.

( ) 2 3. () () ( ). . -.

' ,

( ' ).

12. ' 1 ( ). . :

. -

- , ,

,

- . ,

.

:

,

.

.

,

, . :

'

'.

13. , (. 4.15). , , ,

() . () .

14. (), .

7 161

,

( ). , , '

dereva.htm (. 4.16).

. 4.15.

15. kvlty.htm.

16. HTML. HTML- , , ,

TITLE, , .

'

, ' -

162 4. ^ -

(. 4.17).

.

.

. 4.16. dereva.htm

. 4.17. HTML-

7 163

17. , dereva.htm kvity.htm, , , , ' '.

, ,

() ' .

index.htm.

() . 4.18. ,

, .

, .

18. .

. 4.18. ()

164 4. -

,

1, . ,

Microsoft FrontPage .

1. - HTML- :

) - -, HTML;

) , H T M L - -;

) , , ', HTML-;

) ,

HTML;

) , -- .

2. FrontPage Microsoft Office :

) Microsoft Office -,

FrontPage;

) FrontPage;

) Microsoft Office , FrontPage HTML- - ;

1 6 5

) Microsoft Office -, FrontPage ;

) Microsoft Office - FrontPage .

3. - FrontPage : ) (), (), (); ) (), (), (

); ) (), (), (),

(); ) () (); ) (), (), ().

4. () () : ) , ; ) ; ) -

; ) -

HTML; ) ,

.

5. FrontPage : ) , FrontPage

; ) ; ) ,

; ) , , ,

-; ) .

6. FrontPage : ) HTML-

;

166 4. -

) ; ) , FrontPage

; ) -

; ) , -,

,

FrontPage. 7. :

) , ; ) , ; ) ,

; ) ; ) - .

8. FrontPage : ) HTML; ) ,

Word; ) ,

FrontPage; ) ;

HTML; )

FrontPage. 9. -,

:

) () (); ) () (); ) (

); )

(); )

().

167

10. , :

) () ();

) () () ;

) . () ( );

) () ;

) HTML ().

11. - : ) ()

( ); ) () (

); ) () (

); ) ,

(); ) (

). 12. -

,

, :

) ' ; ) ; ) 0; ) () (

) ; ) , ,

.

168 4. -

5

-

, ,

, .

, -,

,

? -,

, ,

, ,

?

-,

. ,

,

,

.

-

HTML --.

, -.

. -

, ,

: , .

- .

,

-.

HTML (, ) .

,

-.

(, ), . ,

.

(CSS, Cascading Style Sheets) -.

,

, .

,

,

.

,

HTML. . :

{font-size: 40pt; color: green; font-family: "Comic Sans MS"}

, 40 , , Comic Sans MS. ... ,

.

,

HTML. 40 , HTML SIZE 7, 36 . ,

.

170 5. -

,

, . , :

b a c k g r o u n d ; f o n t - f a m i l y (); f o n t - s i z e ; f o n t - w e i g h t ; c o l o r ; t e x t - d e c o r a t i o n ; t e x t - a l i g n ; m a r g i n - t o p ; l i n e - h e i g h t .

HTML- ' HTML-: ; HEAD ; .

(External Style Sheet) .css. HTML- , , :

REL TYPE , . HREF (mystyle.css).

5.1 - .

1. :

{font-size: 40pt; color: green; font-family: "Comic Sans MS"}

171

2. mystyle.css. 3. :

CSS ,

mystyle.css: 40 , , Comic Sans MS.

4. pryklad1.html , mystyle.css.

5. pryklad1.html (. 5.1). ,

..., , mystyle.css.

. 5 .1.

172 5. -

CSS , ,

.

(Embedded Style Sheet) HEAD, , . { 1 1 : 1 1 ; 1 2 : 1 2 ; ...;

1 n : 1 n } 2 { 2 1 : 2 1 ; 2 2 : 2 2 ; ...;

2 m : 2 m }

,

, ,

, . '

,

,

. .

. H1 {font-size: 48pt; color: red} H2 {font-size: 20pt; color: blue} CSS 48 pt, 20 pt, ,

.

173.

1 2. , 48 , 20 . , . 5.2.

. 5.2.

,

.

, LASS=' _, ' .

.

, CLASS , : 38 , ,

46 , .

.stylel {font-size: 38pt; color: white; background-color: olive} .style2 {font-size: 46pt; color: magenta; background-color: mistyrose}

174 5. -

CSS stylel style2

,

. 5.3.

. 5.3. ,

. ,

, ' ( ) . 5 . 1 .

: Arial 16 . , , .

, , 1 2. , . ,

175

, 1 2. HTML-. :

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

c o l o r ; f o n t - s i z e ; font- fami ly (); l i n e - h e i g h t .

:

. #DBDBDB (-), , ,

80 , 270 , Times;

. , -230 , 70 , 250 , Times;

.1 , -100 , 50 , 65 , Arial;

.2 , 30 , 35 , 45 , Arial.

HTML- . , , '. CLASS

, . CSS BODY {color: black; font-size: 16px; font-family: Arial} . {color: #DBDBDB; text-align: center;; margin-top: ; font-size: 80px; line-height: 270px; font-family: Times}

176 5. -

. (color: red; margin-top: -230px; font-size: 70px; line-height: 250px; font-family: Times} .1 {color: black; margin-top: -lOOpx; medium; font-size: 50px; line-height: 65px; font-family: Arial} .2 {color: green; margin-top: ; font-size: 35px; line-height: 45px; font-family: Arial}

,

. 5.4.

. 5.4.

177

(Inline Styles) ... , , , , STYLE, . :

,

.

.

STYLE :

...

-

.

,

: , . POSITION, :

s t a t i c ; '

;

r e l a t i v e ; ' , ,

;

abso lute ; ' .

l e f t () r i g h t (), ' , top () bottom () .

178 5. -

.

:

', , ,

.

,

. '

Z - i n d e x , a u t o ( ). ' z - i n d e x '

, . '

, ',

HTML-.

5.2 , '-

. , '

. , STYLE, .

1. -:

, , , , .

: , , ,

STYLE. , , .

179

70 ; 50, 100 . , , , , ,

10 15 , 600, 100 ; 1 STYLE .

60 400 , 50, 100 . .

2. pryklad2.html. fly.jpg ( ,

HTML-). 3. pryklad2.html (. 5.5)

.

. 5.5.

4. -, ( ).

HTML- (View Source). , ', :

1 8 0 5. -

. HTML- , ,

,

'.

5. ( > ), -

F5. . 5.6.

. 5.6. z-index

, z - i n d e x '

HTML-. ,

. ,

. o v e r

flow (). : ,

;

181

c l i p ', , ;

s c r o l l . HTML- , , , , ,

, :

, , , ,

7. - . , . 5.7.

. 5.7. overflow

FrontPage FrontPage - , .

, '

, -.

,

.

1 8 2 5. -

.

1. , . - roslyny, 7.

2. ()

( ), () , , ( ), ,

FrontPage (. 5.8).

. 5.8. ,

(), . FrontPage __1 .CSS. , (. 5.9). , : ' - (, , , ) '

FrontPage 183

( ), .

. 5.9.

4. , () (). , , (' ) (, style1) (). , - (-), ' (stylel.css).

'

. .

1. -. 2. ()

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

184 5. -

). , ,

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

. 5.10. '

3. (). , ( stylel.css) . ' ' URL (URL-) (' ). ,

(

,

()). - () ().

FrontPage 185

-.

( ), - . -

- HTML-. , :

, .

(), ( ). -

() ().

5.3

-.

1. -, . , ,

- .

2. () (). ,

,

.

3. (). ( ), (') . s t y l e l .

4. (), , . ' .

186 5. -

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

() (). , , :

) () , ,

Trebuchet MS; ) (),

, ();

) 24pt; ) (),

; ) .

( ) () (. 5.11). .

. 5 . 1 1 . style1

7. style2 : Monotype Corsiva, 18 , , (). () '

FrontPage 187

(. 5.12). , .

. 5.12. style1 style2

8. HTML-. , stylel style2: .Stylel {font-family: Trebuchet MS; font-size: 24pt; color: #808000; font-weight: bold} .style2 {font-family: Monotype Corsiva; font-size: 18pt; color: #008080; font-weight: bold}

9. stylel , .

() , () () stylel. , HTML- : &nbsp

10. style2 ; CLASS= s t y l e 2 .

11. , .

188 5. -

' - FrontPage .

() (): STYLE .

'

() ,

( ). ( ), ( ) (. 5.11), '.

-, ,

().

'

HTML ' ,

.

. ,

, ,

, .

'

HTML- - . ' (Document Object Model, DOM) , HTML .

HTML, HTML . '

,

.

' HTML- ' , , . .

, . '

, . ,

' 189

, l e f t , r i g h t c e n t e r . ' '. ' ,

. ,

OnMouseOver, , .

',

. DOM - ,

HTML-, .

' HTML-, .

' ,

. , ,

'.

HTML-, . , Internet Explorer '- JScript VBScript , (), HTML-. .

,

' . ,

' Window, HTML-, , ' Document. ,

. ,

. '

:

' .

, D o c u m e n t . L o c a t i o n URL- HTML-. ' '.

' (parent), (child).

190 5. -

' Object2, ' O b j e c t l , :

Objectl.object2. Objectl.Object2.() , ' Document ' Window. ,

, Write . :

window.Document.Write ("")

' ' ,

, .

:

' . (_) , Window.Open {"www.protvaryn.narod.ru") ,

.

'

. : Onl, OnMouseUp, OnLoad . .

', ,

.

'

. , ' Document Images. , :

Document.Images ("my_image") Document.Images (0)

( ) HTML-. ' .

:

All , -; Frames ;

' 1 9 1

Images ; Links .

5.2. ' HTML- HTML-.

Ha . 5.13 , .

. 5.13. -

192 5. -

.

. 5.14 ' HTML- .

. 5.14. ' HTML-

' Document. HTML- Image 1 ( f ly . jpg) ' Images (0) ( ,

0). L i n k l l . h t m l ' L i n k s .

HTML- NAME, , ', ,

. ,

Document. Images (0) Document. I m a g e l . , , ,

.

' Internet Explorer ' Internet Explorer :

Window ' , Internet Explorer;

Frame ; Frames; H i s t o r y '-,

; L o c a t i o n '-, URL-

;

' 193

Event '-, , ' - ;

Parent ; Document , ,

.

' Window ' window ' , , ,

, .

, ,

, ' window ' , '.

' Window .

, ,

, ,

. '

Window. ' Window ( , ): Window. Window.([])

' window , ' :

([]) ' Window.

Status

-

URL- . , ,

. , -

194 5. -

, ,

,

S t a t u s .

n() , ,

Window.Open () . , , URL- , .

b ( 500 , 250) HTML- 1.html, : NewWindow= Window.Open ("l.html","abc","HEIGHT=500, WIDTH=250") NewWindow . , ,

Close () : NewWindow.Close ()

alert() -,

, . ,

, ,

, .

confirm() , ,

, . -

Cancel (). .

ConfirmO t r u e (), , f a l s e () Cancel (). , ,

.

' 195

promptO .

, ,

, .

, , Cancel ,

( ) n u l l ( Cancel). , ,

: , ,

.

,

' Window.

' Window Parent ; Self ; ; Name .

' Window Open ; Close ; Focus ; S e t l n t e r v a l

; SetTimeOut

.

' Window On Focus ; OnResize ; OnScroll ; OnLoad .

' Window '-: Document, History, Navigator, Location, Event Screen.

196 5. -

' Document ' '

HTML-, . .

' Document . Write .

' Document :

[Window.]Document. [Window.]Document.([])

Window ' Document '. , '.

' Document ALinkColor ; BgColor ; LastModif ied ,

; LinkColor

; Location URL- ; Referer URL- , ; VIink .

' Document Clear ; Close (

); Write ,

; WriteLn ,

, ;

Open .

' 197

' Document O n c l i c k ,

;

OnMouseDown , ;

OnMouseOver , ;

OnMouseMove , ;

O n D r a g S t a r t , ' ;

, ;

OnKeyDown ; OnKeyPress ,

;

OnKeyUp , ; OnLoad .

,

, '

'. , Document. Images ( ) . S r c = " l . g i f " , Src Images ' Document 1.gif; , i- -- 1.gif.

- ,

, , ,

. (script, ) , HTML-. HTML- (, ,

).

198 5. -

JavaScript - JavaScript ,

, HTML. , JavaScript, ,

. .

JavaScript , JScript, . Microsoft Internet Explorer JScr ipt , - Visual Basic Script (VBScript). JavaScript, , , ,

.

, ,

.

-

. ,

, ,

,

JavaScript. ' , ,

, ,

, '

HTML.

JavaScript: HTML ; HTML

;

; ,

;

;

,

.

,

' HTML-.

199

JavaScript HTML :

, ,

; (, ')

..., ;

( .js), .

,

JavaScript, HTML- LANGUGE="JavaScript": J a v a S c r i p t

Internet Explorer JavaScript, ..., '.

, ,

JavaScript, ... ..., - .

JavaScript, - , , .

Java. - .

!!!. a l e r t ( ) . a l e r t { " ! ! ! " ) ;

200 5. -

. 5.15.

. 5.15. -

, Internet Explorer -,

.

, ' ,

.

, (. 5.16), .

.

. 5.16. Internet Explorer ,

2 0 1

5.4 ,

JavaScr ipt . A l e r t ( -- ). Confirm ( t r u e (), , f a l s e (), Cancel ) Prompt, .

.

,

s = = t r u e s==f a l s e .

, ,

1 (++).

( ) . A l e r t , . .

1. -: test v a r s , i = 0 s=confirm ( "2+2=4 ? " ) ; i f ( s = = t r u e ) { a l e r t { " ! " ) ; i + + } e l s e a l e r t ( " H i ! " ) s=conflrm ( " 2 + 3 = 6 ? " ) ; i f ( s = = f a l s e ) { a l e r t ( " ! " ) ; i + + } e l s e a l e r t ( " H i ! " ) s=confirm ("2+4 = 6 ? " ) ; if (s==true) {alert ("!"); i++} else alert ("Hi!") s=prompt ("2+2= ?", " " ) ; if (s==4) {alert ("!"); i++} else alert ("Hi!") s=prompt ("2+3= ?"," " ) ; if (s==5) {alert ("!"); i++} else alert ("Hi!") s=prompt ("2+4= ?"," " ) ; if (s==6) {alert ("!"); i++} else alert ("Hi!") if (i>=5) alert ("")

2 0 2 5. -

else if (i>=3) alert ("") else alert ("") alert (" ="+)

2. test.html. 3. - test.html .

.

4. . . 5.17. :

(2+2=4?) Confirm;

A l e r t ; (2+2=?) Prompt;

A l e r t ; A l e r t ; A l e r t .

5. , 8 .

. 5.17.

203

, -

.

,

.

-.

,

, ,

, .

.

, TYPE t e x t : :

NAME ' , ; VALUE ; SIZE ; MAXLENGTH .

, TYPE password .

.

: ROWS ; COLS ; WRAP (off

Enter, v i r t u a l ); NAME ' --

.

204 5. -

,

,

.

.

.

, TYPE () r a d i o . , , '

' (NAME). VALUE ,

. CHECKED. :

. TYPE checkbox. :

, ,

, -

,

.

205

, . : :

, .

SIZE=N N, .

,

.

, T Y P E = " s u b m i t " . , VALUE. : TYPE r e s e t . , ' - , T Y P E = " b u t t o n " .

. :

, -

,

Confirm Prompt . ,

.

.

206 5. -

HTML , ,

. . .. , :

METHOD p o s t g e t , URL- -, ACTION. ,

.

.

, ACTION=mailto:aflpeca_nomTM. ENCTYPE , .

,

% ASCII-.

, t e x t / p l a i n .

5.5 ,

.

.

p o s t .

( ). , , ,

. , , .

,

.

207

,

NAME INPUT, .

.

.

1. HTML-. olena@zirka. lv iv .ua . : , : , : :

208 5. -

2. anketa1.html. 3. . 4. , .

- ,

. 5.18. . 5. . ,

.

, ,

' (, Microsoft Outlook).

. 5.18. -

5.6 -

v i r k a ,

209

. ,

2, 1, 3.

. NAME INPUT NAME="one", NAME="two", NAME="three" . .

:

i f ( t e s t s . [ 1 ] . C h e c k e d ) {++;} , t e s t s one ( 0), , .

document . t e s t s . d r u k . Value = , ' d r u k :

, t e s t s . document.

p e r e v i r k a ( t h i s . form) ( ). t h i s . form , .

if (tests.one[1].checked) {i++;} if (tests.two[0].checked) {i++;} if (tests.three[2].checked) {i++;} document.tests.druk.value = i; } 2+2=? 5 4 3 3+3=? 6 5 7 4+4=? 7 9 8

2. test.html. 3. .

- (. . 5.16). 4. , .

. -

,

. 5.19.

211

. 5.19.

FrontPage FrontPage , HTML '. , , FrontPage , FrontPage Server Extensions. .

FrontPage . .

, , ,

, ,

.

.

,

, .

.

212 5. -^

.

, . FrontPage () (). .

,

FrontPage, () () ( ). , ,

() (. 5.20).

. 5.20.

FrontPage :

( ) ;

( ') ;

( ) ;

FrontPage 213

,

; ( ) ;

; ( )

,

; ( )

.

5.7 ( ) .

1. FrontPage.

(). 2. (

) . , (), ' (. 5.21), : ()

; () ,

; () ; ()

; ()

; () ,

.

3. (). , , ,

. () ,

214 5. -

.

( ).

. 5 . 2 1 .

4. ( ). : (. 5.22). ().

. 5.22.

5. , ,

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

FrontPage 215

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

. 5.23.

6. () (), :. (). , ,

..(..), ' (, data), ' . (). , . 5.21, , . ().

7. .

(. 5.24).

( ) , ,

:

( ); ( ); ( ); ( ).

2 1 6 5. -

. 5.24.

? ( ?) . ( ). , .

( ) , .

8. ,

. (). 9. ,

, . :

- ( -);

( );

CGI ( CGI).

-

( ' ).

10. - results. ().

FrontPage 2 1 7

11. . ().

12. . : , , (. 5.25).

. 5.25.

FrontPage , ,

-

( ) (. 5.26). , , :

;

; ; ;

218 5. -

, ; .

. 5.26.

5.8 -,

.

1. FrontPage. ( ) ().

2. (. 5.27).

3. : ( ( )). Enter () () .

FrontPage 219

4, , :, ( Shift+Enter) ( ( )).

. 5.27.

5. ( ) . , ,

(), () .

' (. 5.28). 6. -

.

, .

220 5. -

7. , : ( ( )). , : , , .

. 5.28. ,

8. : . ,

: , , .

, . 5.29. 9. ' .

.

( ) .

() ( ), (' ) ,

() . (, ) ,

(). , , , , ,

FrontPage 221

, FrontPage Server-Extensions.

10. .

. 5.29.

FrontPage , ,

. ,

, ,

', .

,

, ,

( ) , , ().

222 5. -

,

(. 5.30). , , ,

,

.

,

, , ,

.

,

,

( ) , , , , .

. 5.30.

HTML FrontPage FrontPage

,

.

.

,

, HTML .

FrontPage 223

,

,

,

.

.

1. FrontPage ( , )

( ) ().

2. () - (-), , ', ( ) () (). ( ) (. 5.31), URL- .

. 5.31.

3. ( - ) .

4. ( ). . () - - .

5. zmist.htm.

224 5. -

6. ;

( ). . ,

, .

(). ( ) ( ) -

() ().

: , , , . ,

, . ,

.

1. - (, ), , .

2. DHTML ( HTML) (. 5.32). , DHTML ( DHTML).

. 5.32. DHTML

3. () ( ). , HTML , .

4. () ().

5. .

FrontPage 2 2 5

6. () DHTML ( DHTML) ( ) HTML ,

.

7. () (), () ( ). (), .

8. .

,

' .

,

. ,

.

1. - , .

2. () ( ). (. 5.33).

. 5.33. ,

3. () ( ) . () ( -

226 5. -

) . () , ( ).

4. .

5.9 -

,

.

FrontPage. , .

- ,

, .

,

. .

1. FrontPage . 2. (

, , . 5.34). , .

. 5.34.

FrontPage 2 2 7

3. () ().

4. , , ( ) .

.

5. . ,

, (. 5.34). 6.

() () ( ) .

( , ) (. 5.35) .

. 5.35.

,

, ,

( , ) ( ). .

2 2 8 5. -

,

() .

, .

,

,

(. 5.36). .

. 5.36.

8

-

: FrontPage - .

1. ( ), FrontPage roslyny, 7.

8 229

()

( ), (), , , ( ) .

,

. -

( .css). .

- ,

() ( ' ) , , ( ). (), , .

( ' ) (). .

( ), - .

- HTML-. ,

, . index.htm .

DHTML ( DHTML) DHTML ( DHTML) (. . 5.32). () , :

() ;

( ) ;

230 5. -

( ) ;

( ) -.

7. () , . ,

( ) :

() ' ; () '

;

() ' ; () ' ; () ' ; () ' ; () ' '; () ' .

() . 8. ,

( ).

9. index.htm. ( ). , (. . 5.33), ,

:

( ) ;

( ) ;

( ) ; ( )

.

8 231

10. () ( ). (). .

11. , . , .

.

12. -. - ( -), , ', ( ) () (). , (. 5.31), , ,

. ( ) () . zmist.htm.

13. . 14. - ,

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

. 5.37.

232 5. -

15. (), : () ().

16. () , :

()

Documents

основи вебдизайну