основи вебдизайну
-
Upload
anna-meschishena -
Category
Documents
-
view
244 -
download
6
description
Transcript of основи вебдизайну
-
. . , . . , . .
-
.
, ,
. .
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 > ' .
' . < >
"".
. < B R > .
3. , , , 1.html. .
4. Internet Explorer 1.html. .
5. , -. , HTML- . -
F5 . . 2.2 , Internet Explorer.
. 2.2. -
52 2. HTML
-
2.2 - ,
.
, ,
' .
, .
,
' .
,
, , .
,
.
,
.
.
.
,
'
.
( .., .., )
1. HTML- -, .
, , - < / U > < / I > . ' ,
. ,
,
, .
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], ' , .
'
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 . -, ,
.
< I M G S R C = " g o r o b c i . j p g " > < / 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 : ) ; ) ; ) < I M G S R C = " l . h t m l "
NAME="1.jpg">; r) < I M G S R C = " l . j p g "
NAME="l.html">; ) ,
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- :  
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. () , :
()