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

!

:
L)

, ,

HTML^_

L^'cro


!
Web-
.

Web-,


v
;

If 41 I
t
:
,
,
,
,
,

-
--

2002


HTML



.
.
.
.
.
, .

32.973-0187
681.3.06(075)
.
65 HTML. .: , 2002. 240 .: .
ISBN 5-272-00072-2
HTML ,
. ,
Web-,
, HTML-.
.

, 2002

.
.
, , , .
, ,
, .

ISBN 5-272-00072-2

. 196105, -, . , . 67.
05784 07.09.01.
- 005-93, 2; 953005 - .
18.09.02. 70 100'/,,. . . . 19,35. . 4500 . 1304.
. A.M.
, .
197110, -, ., 15.

13

1
2 HTML4

14
35

3 HTML 4

52

4
5 "

97
115

132
148

184
209

210
229

232

231

13

13

1



.'
HTML


Web-
Microsoft Internet Explorer
Netscape Communicator

2 HTML 4
HTML
Web-
<HTML> </html>
<HEAD></head>
<TITLE> </title>
<STYLE></style>
<META>
<BODY></body>
<!-- -->
<Hl></hl>
<HR>
<A> </a>
<BASE>




..14
14
15
15
19
20
23
25
25
30

35
35
36
38
38
38
38
39
40
40
41
41
42
42
43
45
46
48
... 48

3 HTML 4

52


<TITLE> </title>
< STYLE > </style> <LINK>
<META>



</>
<BR>
<NOBR> </nobr>
.-.
<PRE> </pre>
<CENTER> </center>
<B></b>
<BIG></big>
<SMALL> </small>
<!></!>
<STRIKE> </strike> <S> </s>
<U></u>
<SUB></sub>
<SUP></sup>
<TT></tt>
<INS> </ins> <DEL> </del>
<BASEFONT>
<FONT> </font>
<BDO> </bdo>
, ,

<> </> <DFN> </dfn>
<BLOCKQUOTE> </blockquote>
<Q></q>
.'
<CITE></cite>
<ADDRESS></address>
<STRONG> </strong>
<CODE> </code>, <SAMP> </samp> <VAR> </var>
<KBD></kbd>
<ABBR></abbr>
<ACRONYM></acronym>

<STYLE></style>

: id
: <LINK>
<DIV> </div> <SPAN> </span>

52
52
52
53
53
55
56
56
57
57
58
58
58
58
58
59
59
59
59
59
59
59
60
60
61
61
62
62
62
63
63
63
63
63
64
64
64
64
65
66
66
67
68
68

<DL> <DT> <DD> </dl>

<A></a>
<LINK>
:

<TABLE> </table>
<CAPTION> </caption>

<TR>
<>
<TD>
: <THEAD>, <TFOOT> <TBODY>
: <COLGROUP> <COL>

<FRAMESET> <FRAME> </frameset>


<NOFRAMES> </noframes>

<IFRAME> </iframe>

<BGSOUND>
<BLINK> </blink>
<DIR> </dir> <MENU> </menu>
XMP LISTING
<COMMENT> </comment>
<PLAINTEXT> </plaintext>
<EMBED></embed>
<NOEMBED> </noembed>
<MARQUEE> </marquee>
<HPn> </hpn>
<BANNER> </banner>

71
73
73
76
76
76
78
79
79
79
80
82
83
84
84
87
87
91
92
92
93
93
93
93
93
94
94
94
96
96

97



<IMG>
<> <AREA> </map>

<APPLET> </applet>
<OBJECT> </object>
<PARAM>

97
98
98
99

104
105
106

69


<ISINDEX>
<FORM></form>
<INPUT>
<LABEL></label>

<SELECT> <OPTION> </select>
<TEXTAREA> </textarea>
<BUTTON> </button>
<FIELDSET> <LEGEND> </legend> </fieldset>

106
106
107
108
110

Ill
112
113
113

115


<SCRIPT></script>
<NOSCRIPT> </noscript>
JavaScript





setTimeout

115
115
118
118
118
120
122
122
125
127
129
131

6

,







Web-
Web-

7

HTML-
GIF- PNG-
Gif Construction Set

132
132
134
134
135
136
137
138
139
140
141
143

148
148
150
152
154
162

10
GIF-

Web-

GIF
Microsoft Office 2000
WordArt
MS Image Composer
Microsoft GIF Animator

8
HoTMetaL PRO 5.0
Microsoft Word 2000
Microsoft FrontPage Express
Microsoft FrontPage 2000
Netscape Composer

164
165
167
168
170
171
175
179
181

184
184
195
199
201
205

A M

209
210

font-family
font-style
font-variant
font-weight
font-size
font

text-indent
text-align
text-decoration
text-shadow
letter-spacing
line-height
word-spacing
text-transform
white-space
direction

list-style-type
list-style-image
list-style-position
list-style

210
210
210
211
211
211
211
211
212
212
212
212
212
213
213
213
214
214
214
214
214
215
215
..215

_^_________


display
row-span
column-span
border-collapse
border
vertical-align
table-layout

width
min-width max-width
height
min-height max-height
position
top, bottom, right, left
margin-top, margin-right, margin-bottom, margin-left
margin
padding-top, padding-right, padding-bottom, padding-left
padding
border-top-width, border-right-width, border-bottom-width, border-left-width
border-width
border-top-color, border-right-color, border-bottom-color, border-left-color
border-color
border-top-style, border-right-style, border-bottom-style, border-left-style
border-style
border-top
border-bottom
border-left
border-right
border
overflow
float
clear
clip
visibility
z-index

color
background-color
background-image
background-repeat
background-attachment
background-position
background

11
215
215
216
216
216
216
216
217
217
217
217
217
217
218
218
218
218
218
219
219
219
219
219
220
220
220
220
220
220
220
221
221
221
221
222
222
222
222
222
222
223
223
223
224

12


volume
speak
speech-rate
pause-before, pause-after
pause
cue-before, cue-after
cue
play-during
azimuth
elevation

cursor
color, background-color

224
224
224
224
224
225
225
225
225
226
226
227
227
227

229

232

231


(
) .
, , . . , , . -, , , .
, . , , , , (
!),
. , . : , .
, . HTML ,
1997 . , . .
! : .
- ,
, Web ( http://webcenter.ru/~agonch).
, .
( )
agonch@online.ru.
!


, ,
comp@piter-press.ru ( , ).
!
Web-
http://www.piter-press.ru.

HTML, : HTML
(HyperText Markup Language),
, , , , , -, ,
. : , .


, , , , -. ,
. , , Microsoft Office,
- , , .
- ,
-. ,
-, HTML.
, , , , , ,
,
.

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

15

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


. ,
. 23 HTML:
, , . , .
57 Web-. 8
,
.
,
HTML- , . , , .


,
. , ,
, , ( ) .
, ,
. : , .
1994 , , ,
.
. (
1992 ) ,
.
,
, . , ,
, , ,

16

1.

. , , ,
, ,
, . .
, , 56 000 . , ,
, , , , ,
. , . ,
.
, .
. , , ,
, , .
. , , , , , (
, ). . , : , ,
. , , , 12 .
.
: , . , , ,

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

17

14 400 (bps)
, .
, : -
, - .
. , .
. : World Wide Web ,
(CERN).
1989 - (Tim Berners-Lee) , 1990 , : WWW.
,
. , ( Web-),
. - :
- .
. , , . :
? , , .
(, ) (, ). World Wide Web
HTTP (HyperText Transfer Protocol), FTP (File Transfer Protocol), (E-mail) .
, , , . (IP-), (, 123.45.678.9),
. - (
). .
, www.piter-press.ru ,
( ), ().
( )
. :
_@_.___

, , Eudora Pro
Outlook Express.
, ,
,
. ,
. E-mail

18

1.

, ,
E-mail .
( ) .
FTP .
, - ,
-.
, Norton Commander Windows.
,
. - (, ), FTP.
Web- , .
1994 : , FTP World
Wide Web. , , , , telnet (telnet ). ,
- . , , , ,
.
. , .
.
Gopher
. , , . Gopher
,
, , , . Gopher
, . , gopher .
, . : Happy gophering! ( !). , Gopher : .
. ,
. World Wide Web
. Mosaic () . ,
, , . , Netscape Microsoft
WWW,

HTML

19

. World Wide Web . , , . ,


, , ! , , . Mosaic, , , , , .
.
,
: Gopher Mosaic? : , , . Gopher
. , ...
: , Gopher,
. ? ,
, . , , . . .

Netscape, ,
HTML.
. Web-.
.
, , . ,
. Gopher telnet .
FTP
. World Wide Web .
. HTML , .

HTML
HyperText Markup Language ( )
. HTML
, , , . , , , , , .

. , , -.

20

1.

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

-
, Windows.
.
- ! .
? .
- , file , .
,
. ,
,
. , . ,
. ,
.
. , .
. .
Del Ins.
. ,

21


. .
, .
: , , , ...
, . . . :
Internet . , , , ?
.
.
, (
),
. , :
.
. .
(element) HTML. ,
.
Web- .
.
(tag) . . Web , .
(attribute) . , , , : . ,
, . ,
. .
,
. ,
.
(frame) . .
() ( ).

HTML- HTML- ,
HTML. , , htm
html.
.

1.

22

(applet) , Web-.

(script) , Web- . Internet Explorer :


? .
(extension) , ,
,
.
CGI (Common Gateway Interface) , ,
, Web-. , .
.
HTML ,
.
World Wide Web, WWW Web , , .
HTML WWW.
, , , ,
.
Web- (),
World Wide Web.
(site) Web-, .
(browser) Web-.
(user agent) , -.
(downloading) .
URL (Uniform Resource Locator) . URL WWW :
http://www../

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

23

,
.
.
- . , -, ,
. . . 1.1
.

270
2-W

Gamma=1,7

210
180
1SO

120
00
60
30

30

60

90

120

150

180 210 240

. 1.1. (|) ()


, ,
,
. , , MS Word.
: , ,
, , . . Word
,
, . , Microsoft. .
, . ,
.
- ,
.

24

1.

HTML- . MS-DOS ,
ASCII-. ,
HTML. . Web . .
. , , Web-
.

. Web- ,
Windows, ,
,
UNIX .
HTML , , . HTML , .
, . , , , , , . .
,
.
.
, . , . , . ,
, ,
,
-. , .
, HTML , (). Web-
. , WWW, Web- .
HTML .
HTML,
, , .

Web-

25

Web-
HTML-, , . , , FTP.
: Web-
( HTML).
, HTML- , . , ,
. Mosaic,
.
, .
, Cello, Global
Network Navigator Netcom's NetCruiser! : Microsoft Netscape.
, . ,

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

Microsoft Internet Explorer


Microsoft , . 4 5. Microsoft
Internet Explorer (MSIE) Windows, . , .

,

26

1.

( ). URL. IP-, , .
, ,
. , Microsoft, : http://www.microsoft.com.
http , (HyperText Transfer
Protocol). . , ftp
, FTP, mailto
, file . , , -
ftp://ftp.microsoft.com.
URL
, (. 1.2).

ilfit

...., -

http://www.miciosoft.com/'

..

' j '"'

microsoft, corn Guide

|The 1 Business i internet I


clicl< here to learn more

Microsoft
microsoft com Home

Search (Exact Phrase)

Product Family Sites


peuektper Tools
Office
Wjridg_ws
Customer Sites
Horn -a ^..Personal
..
IT Professional
Partner/Reseller

M aou f turi n q
The business operating system for the next
generation of PC computing is en route to computer
manufacturers and stores, and should be generally
available to customers on February 17, In the
meantime, you can peruse Microsoft's new
comprehensive online resource designed to help you
evaluate and deploy W i n d o w s 2000,
There's Still T,me to Shop at the
Microsoft Online Store

Behind the Scenes of tfe


Windows 2000 Fffort

> Introducing 'Ask Naxwelt' to


Personal Online Support

Fighter II Debuts on the MSN


Gamino gone

MSDN Online Launches New.

Microsoft Essay; Protecting Our

3*

. 1.2. MS Internet Explorer

- ,
(home page). .
. () ,
.
. , ,

Web-

27

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

(home page) . , , .
,
, . ( > ).
.
, , .
Web-. , ,
.

28

'

1.

. Web- , , .
. . , . : , , .
Web- , . , ,
, MSIE.
, ,
.
Web- .
,
. , : .
.
( Go, OK, Send, Submit
), . , , -
.
Web- (, )
:
. Internet Explorer, . :
:\ crpaHHuaXStart.htm

, :
file:///:/ /Start, htm

MSIE :
://:\ CTpaHMua\Start. htm

: , ,
,
.
, > .
, . 1.3. .
, , Windows
Web- .
.
1. Windows, .
2. (Start.htm) .

29

Web-

. 1.3. HTML-

3. .
4. .
5. ,
( ).
,

.
Web- .
. , Web.
. , . > , .
,
. , ,
.
, . ,
. .
. ,
.
. >
Web- ,
. HTML-, .
.
HTML-
. > Microsoft Front Page
, . > HTML .

30

1.

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

HTML. , .
: Windows-1251
-8. , , .
. ( ) , .
, .
,
.
, (HTML-, .).

Netscape Communicator
( 4.06)
. , ,
. , ,
,
. , , . Netscape Navigator, Netscape Composer. ,
.
.
. 1.4.

31

Web-

-^.""

ittp://home.nelscape.com/inde
:

,; Jirsiart Message. BJ'Menfes ^

Take a survey for a


chance to win $500
4.7: CD/Download
5y Long Distance

Netscape
Netcenter

Update

^Business: - : . f- -Iu
Guided Tour
Home Pages

Onlirift Games
Personals

|:

loday'llifpl
browsers ml
features. TH|
shopping 1|
old will ex
Easy and Free.

;iri.

. 1.4. Netscape Navigator

. , , ,
MSIE.
, .

, .

.

(home page) Netscape,
, ( > ).
.
Netscape. Netscape ,
.

32

1.

.
,
, , .
. .
- . ;
, !
Netscape. ,
.

, , . MSIE, i

, , .
( > ). 1<
, .
. Windows. .
.
, .
, ,
GIF. !
( ).
Windows, Netscape Communicator !
, (
). . , , . , <
, - :
. , ,
. ( > ). (. 1.5),
.
.
Netscape Navigator (NN) , MSIE
, ,
.
.
.

. , , !
, .
NN .

33

Web-

- Navigatw -

!
I-
' Smatl Browsing |
ffi
Composer
j ;
8

9 |

.^|

tp./Vwww.netscape.ru

;
I -
!
.-(:.

%&'
[

"'''"

(fiffitt i

" ISI

;*

. 1.5. Netscape Navigator

, >
,
.
, , MSIE NN : , , .

. , , , HTML-
.
,
, .
: HTML . MSIE,
Web- , NN
.
, .
, , ,
, .
Netscape Composer, ( ).

34

1.

HTML NN > .
, , i
.

, ]
, ( :
). , , i
.
,
.
. ,
: ,
.

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

HTML
HTML 90- -
Mosaic. ,
. 1993
HTML+, . 2.0, 1994 .
W W W . ,
2, .
3.0 HTML, , ( , ,
, . .) . (Arena). .
1996 HTML 3.2. , , ,
Web-. . 3.2,
.
, W3C (W3 ), - (). , ,

36

2. HTML

. , , , ,
3.2. , ,
HTML, ,
. , ]
-. 4 .
, APPLET SCRIPT, HTML
, 3.2 ,
. , -
Java, JavaScript, Visual Basic (VBScript
,
HTML .
HTML 4 (Dynamic HTML) 1997
,
-.
, .
(Netscape Navigator 4, Microsoft Internet Explorer 4 .) !
(
). .
,
, .
, ;
. ,
. !
Microsoft Netscape, ]
...
Dynamic HTML yeo^
,
.
Web-
, HTML-.

Web-
Web-. HTML-. Strukt.htm.
1.1. () Web-

<HTML>
<HEAD>
<11> -<>
<STYLE> H2 {font-family: Arbat;}
CODE {font-family: Arial;} </style>
<META http-equiv="Content-Type" content="text/html; charset=windows-1251">
<META name="Author" content="Alexei Goncharov">

Web-

37

< name="Keywords" content="WWW, HTML, document, element">


</head>

<BODY bgcolor=#FFFFFF>
<!-- -->
<A name="top"x/a>
< href="#bottom">KOHeu</a> <>
< "="#5001"> K/bx/axP>

<>
<HR>

<1> 1</h1>
<2> 2</h2>
<> 3</h3>
<4> 4</h4>
<5> 5</h5>
<6> 6</h6>
<HR>
<> K/bxA name="S001"x/a>
<HR>

<> Web-
<HR>
< name="bottom"x/a><P>
< href="jftop">Ha4ano</a>
</body>
</html>

Web-, . , . HTML ISO 8879:1986


Information processing. Text and office systems. Standard Generalized Markup
Language (SGML). ,
. HTML , , , , .
Web-, ,
.
: . : <I> </i>.
,
. ,
( ), ,
. , .
, . Web-.

2. HTML

38

<HTML> </html>
HTML. , :
.
, !
Web-. ,
. v e r s i o n , l a n g d i r ,
, HEAD, BODY
FRAMESET , Web-.
</html> .

<HEAD> </head>
Web-. , . , \
, HEAD
. l a n g d i r , TITLE BASE, , LINK, OBJECT, SCRIPT, STYLE.

<TITLE> </title>
Web-. , , , . WWW.
, Web- ,
, , ,
.

<STYLE> </style>
Web-. Strukt.htm 2 CODE. . 2.1 , . ,
,
STYLE , .

1
2
3
4
5

. 2.1. , 1...6.

Web-

39

, HTML
. , , BLINK , , ( !) .
(blink) , , .
, STYLE, ,
Windows, , ,
, Word Excel.

<>
, Web-. ,
. , , .
meta-.
, :
name="Expires" content="//ara"
:
name="Reply-to"

content="@"

Web-:
="Author" content="^M "
:
name="Keywords" content="cnoBo1, 2, . . . "
Web-:
n a m e = " D e s c r i p t i o n " content=" "
Web-:
name="Content-Type" content=" "
, Web-:
name="Generator"

content="Wa3eaHne HTML-"

, . name -
Web- .
h t t p - e q u i v .
.
, URL. :
URL="http://"

40 _

2.

HTML

<BODY> </body>
, Web
. ,
. ,
HTML-. BODY
, Web-.
BODY ,
. .
,
WWW,
Web- :
background="/7yrb "
:
bgcolor="#ff/?GGSS"
,
,
. .

: - ]
, .
, ]
.
text="#/?/?GGB5"
:
:
vlink="#/?/?GGflS"

:
, BODY,
. , , Web- .

<!-- >
,
. HTML . ,
, . -

Web-

41

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

<Hlx/hl>
. , 1...6. 1 , 6
. . 2.1
. , , :
align="left"
align="center"
align="right"

<HR>
(horizontal rule) .
-, .
-, . , HTML
, - . , , ,
.
,
, , , :
align="left"
align="center"
align="right"
align="justify"

:
51=
:
fiitifn-
width=/^twa /

:
1=""

42

2. HTML

HTML- ,

. .
.
3,
:
< name=" "> </>

, , ,

, .
,
:
<> < href=" "></></>

Web-
, .

<BASE>
(URL) . ]
. ;
:
<BASE href : ="http:// / 1">

1' .
. , *

< \\ref =" 2/ , htm' '> </>,


URL
11:///2/ . htm

, (.
D:), :
<BASE href="file://D:\nyrb\">


, , . ,
: .
, , , .
(file : //).
"\", .

43


, , Web-, HTML.
,
. ,
HTML, HEAD, TITLE BODY ,
, , . ( 3), BODY FRAMESET.
, . , , .

: .
, (, . .) . ,
, .
Web-,
.
, , . . :
.
( ) :
< style="border: solid "> 1</>
<TABLE> . . . </table>
<> 2</>
. , , .
:
< style="border: solid "> 1
<TABLE> . . . </table>
<> 2</>
.
, .
, : , TD .

Web-. , ,

44

2. HTML '

. ,
:
<1> 1 <2> 2 </h1> 3 </h2>

, ,
. , -

, , . *
.

. HTML.
, .
, . v.
. ,
. , .
. , BR, , .
.
. , , , : , IMG, UL, TABLE . .
,
,
.
, , , ,
. , . , Web- . , , ,
, HTML, .
, ,
Hn, P BR,
, , . Web- ,
,
, , .
, ,
.

45


, , . . ISO Latin I (ISO 8859-1). MS-DOS (
ASCCII), Windows,
HTML, . Unicode 2.0 (ISO10646), . ,
( 0-255) (0-65 535).
charset (. 1.1),
- ,
, charset ? MSIE , . ,
: (Windows) / (8-). . , Web-
, .
, . , . , .
, : .
,
.
,
( ,
128-255) . 32-127,
, , , 128-255
-.
.
.
, . , MS Word MS FrontPage Express
charset=xxxxx,
. : charset=windows-1251 ( ,
).
, , : Windows -8.

2. HTML

46

, Unicode?
: - ;
. , '
. HTML , ;
. Unicode, ;
, , Norton Commander
WordPad, . !
: &#1040 ( !
). . <
,
.
.
: , !
, .


HTML , ,
. , , HTML .
. . , : &#65.
. . 2.1 ( ISO 8859-1). .
2.1.

34

&#34

&quot;

38

&#38

&amp;
&lt;

&

<

>

60

&#60

62

&#62

153

53

&gt;
&trade;

160

&160

&nbsp;

162

&#162

Scent;

163

&#163

&pound;

164

&#164

165

&#165

&curren;
&yen;

166

&#166

Sbrvbar;

i
i

167

67

&sect;

169

&#169

&copy;

47

171

&171

172

&0172

&laquo;
&not;
&reg;
&deg;
&plusmn;
&sup2;
&sup3;
&mlcro;
&para;
&middot;
&sup1;
&raquo;
&frac14;
&frac12;
&times;
udivide;

174

&174

176

&176

177

&177

178

&#178

179

&#179

181

&181

182

&#182

183

83

185

&#185

187

&U187

188

88

189

&189

215

&#215

247

&#247

11

-
1

'/4

'/2

()

:
, . , :
640&times;480
, (", <, >, &)
HTML. Web-,
.
, . ( Windows-1251)
, ,
. . HTML
. HoTMetaL PRO 5.0 8.
Spec.htm .
.
(charset=windows-1251).
, . ,
( , . .). , . ,
. , Web-.

48

2. HTML j


, Web- . , .
, , &. , , . , ,
.
.
( ) : , .
,
h r e f .
. , , .
Web- . , , IMG src. Web-, , FRAME src.
. ,
, . , , 100 :

<HR w.idth=100>

:

<HR width=50%>
, .
* . (
cols ),
, .
<FRAMESET cols="25%, 75%">
<FRAMESET cols="1*. 3*">


,
, .
. -

49

, .
. ,
, FONT:
color="red"
. 2.2. .
RGB-, .
(R), (G) () , .
2.2.

RGB-

aqua
white
yellow
green
gold
indigo
maroon

OOFFFF
SFFFFFF
#FFFFOO
008000
HFFD700
#460080
#800000

red
olive
orange
purple
lime
silver
gray
teal
blue
navy
violet
fuchsia
black

#FFOOOO
#808000
SFFA500
#800080
#OOFFOO
ttCOCOCO
#808080
#008080
OOOOFF
#000080
#EE80EE
#FFOOFF
#000000

.
0 255. ,
, Web- 16 777 216 . Windows 95
True Color (24- ). . , , ,

50

2. HTML 4

. , Web- .
, . 2.2, ,
00 FF, 80.
,
, , . , .
, , ,
.
RGB- , .
Web- .
Color.htm .
. .
HTML- :
<TABLE border=3 width=200>
<TR>
<TD align="cerrter" bgcolor="white" ><></>
<TD align="center" bgcolor="white" ><></>
<TRXTD>#FFBOOO <TD bgcolor=#FFBOOO >1
<TRXTD>#FFA800 <TD bgcolor=#FFA800 >2
<TRXTD>#FFAOOO <TD bgcolor=#FFAOOO >3
<TR><TD>#FF9800 <TD bgcolor=#FF9800 >4
<TRxTD>#FF9000 <TD bgcolor=#FF9000 >5
<TRxTD>FF8800 <TD bgcolor=#FF3800 >6
<TRxTD>#FF8000 <TD bgcolor=#FF8000 >7
<TRxTD>#FF7800 <TD bgcolor=#FF7800 >8
<TRXTD>#FF7000 <TD bgcolor=#FF7000 >9
<TRXTD>#FF6800 <TD bgcolor=#FF6800 >10
<TR><TD>#FF6000 <TD bgcolor=#FF6000 >11
<TR><TD>#FF5800 <TD bgcolor=#FF5800 >12
</table>

, :
bgcolor=#/?/?GGfl6

,

. .
.

51

. , HR,
, .
. , ,
- , , 20 18 :
<HR color="lime" size=20 width=18 align="left">

.
( , ), :
HR .
, , HTML-, Web-:
<FONT color="red"> </font>
<TABLE border=0 width=100% >
<TR><TD bgcolor=#FF3030
<TR><TD bgcolor=FFDOOO >0
<TR><TD bgcolor=#F3FF5F >
<TR><TD bgcolor=#OOFFOO >3
<TR><TD bgcolor=#6FD3F7 >F
<TR><TD bgcolor=f}5F72FDF >C
<TRXTD bgcolor=#B568F4 >
</table>

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

, , Color.htm
.

HTML 4
HTML , .
,
- ,
. , .
, Netscape Microsoft .
. Web- , , ?


Web- , () HEAD. Web- 2
, .

<TITLE> </title>
TITLE ,
. ,
.

: , , ,
TITLE.

< STYLE > </style> <LINK>


STYLE HEAD.
, , . . , . LINK.
.

S3

<>
, .
, .
, , , . , ,
. ,
. Windows :
< http-equiv="Content-Type" content="text/html; charset=windows-1251">
, ,
Web- .
HEAD:
<HEAD profile='W>
HEAD ,
. , ,
BGSOUND (. ).


, .
Web-,
. id .
, (. 4).
classid ,
.
style .
. .
class. ,
HEAD STYLE
(. ).
a l i g n ,
. ,

54

3. HTML 4

. .
. :
l e f t ;
right ;
j u s t i f y ( );
c e n t e r ( );
middle ( );
top ;
bottom .
lang , :
1=" "
:
;
de ;
el ;
en ;
en-us ;
es ;
f ;
he ;
hi ;
it ;
ja ;
n l ;
pt ;
;
zh .
: . dir :
d i r = " L T R " ;
dir="RTL" .
d i r ,
. BDO (. ).
type , . MIME (Multipurpose Internet Mail Extensions).

55


,
Web-. :
t e x t / p l a i n ;
text/ess ;
t e x t / h t m l HTML;
a p p l i c a t i o n / p o s t s c r i p t PostScript;
i m a g e / g i f , image/] pg, image/png GIF, JPG PNG
;

video/mpeg ;

a p p l i c a t i o n / J a v a ;
t e x t / j a v a s c r i p t () JavaScript;
t e x t / v b s c r i p t () VBScript.
type :
(, . .).
c h a r s e t , , :
charset="ISO-8859-1".
longdesc (long description) ,
- ()
. :
longdesc="(M"
title, , .
,
. .


,
.
. , , (
), :
onmouseover=" 1("!")"
onmouseout="/7porpaMMa2( ",?")"

() , , , . .
, :
onclick ;
o n d b l c l i c k ;

56

3. HTML 4

onmousedown ;
on mo use up ;
onmousemove ;
onmouseover ;
onmouseout .
, :
o n f o c u s ( );
onselect ;
o n c h a n g e ;
o n b l u r ( ).
, :
onkeydown ;
onkeyup ;
onkeypress .


Web-,
. ,
.
. , , : id, class, lang, dir, title, style .
HTML
, . , . ,
. ,
t e x t - i n d e n t
.
:
, , . . . id, class, lang,
d i r , title, style, , , .

(paragraph) . ,
, . , -

57

,
. :
, <BR> ( ).
:
<> .
<> .</>
.<>

a l i g n :
a l i g n = " l e f t " ;
a l i g n = " c e n t e r " - ;
align=" r i g h t " .
:
< align="center">
, , ,
. .

<BR>
, .
. , .
clear (, ) , BR. align, BR clear, :
<BR clear="right">
:
;
left ;
right ;
all , .
: id, class, title, style.

<NOBR> </nobr>
. , , .
,
.

58

3.

HTML

<PRE> </pre>
, (preformatted).
, ,
. , , . .
:
, , .
, NOBR.
.

, .
P R E
, line feed carriage return (. . 3.1 ).
, Web-
, , , . , . PRE
,
: - GIF.
,
:
Width= -

. :
id, class, lang, d i r , title, style, .

<CENTER> </center>
, .
. , ,
a l i g n = " c e n t e r " .

. . , .

<BIG>
.

<SMALL> </small>
.

59

<STRIKE> </strike> <S> </s>


. STRIKE S.

<SUB> </sub>
, (subscript).

<SUP> </sup>
, (superscript).

Text.htm, . 3.1.
.
, , .

SUP
. 3.1. SUB SUP

<> </tt>
, (teletype).
, .

<INS> </ins> <DEL> </del>


, ( INS) ( D E L ) .
, .
, ,
, ,
:
cite=" (URL)"

60

3.

HTML

:
datetime="/?ars"

:
datetime="2000-04-26" cite="f lie :///C: /Pages/. htm">

<BASEFONT>
, ( ) .
:
12=

1 7.
3. , , FONT (. ), . , FONT.

<FONT> </font>
, . . size ():
512=

1 7. . 3.2 , .

7 6
5

4 3 2
1

. 3.2.
:
size^-


. . , , 3,
-2 +4. , 7, 1. . 3.3 , .
FONT :
!=""

61

+4 +3
+2 + 1 +

*..

. 3.3.

face () ( ), :

face="Arial; Verdana; Tahoma"


, . Web-
, .
, : , .
FONT 1...6. , , . , FONT, , : CENTER, , I, P . .
: id, class, lang, dir, title, style.

<BDO> </bdo>
. d i r , : LTR (
) R T L ( ). :
<BDO !="1_"> </>

, , ...
. 3.1 ,
, . ( line feed carriage
return) ,
. PRE,
.
. ,
, . , . , .
.
.

3. HTML 4

62
3.1.

(HTML)

&#9

10

&10

(line feed)

12

(form feed)

13

&#13

(carriage return)

32

45

160

&#160

173

. &#173

203

8203

DM M CU A U

Text.htm, .


, , .
, - , .

<> </> <DFN> </dfn>


, (emphasis)
- (definition).
I, .
. , ( ) ,
. , ,
, :
-. , . , .
: id, class,
lang, dir, title, style, .

<BLOCKQUOTE> </blockquote>
. . , .

63

: ,
. , .
,
:
cite=" -"
, URL.

, . BLOCKQUOTE , 0
( ).

<CITE> </cite>
,
. ,
, .

<ADDRESS> </address>
CITE . .
, a l i g n . , .
, .
, , . ADDRESS CITE, CODE, KBD, SAMP VAR .
, HTML
. -
. ,
Web-.

<STRONG> </strong>
, .
.

<CODE> </code>, <SAMP> </samp>


<VAR> </var>
, . CODE . SAMP

3. HTML 4

64

(sample) . V A R
(variable). ,
.

<KBD> </kbd>

,
(keyboard). , ,
, .

<ABBRX/abbr>
, : MSIE, HTML, WWW.

< ACRONYM ></acronym >

(, ), : . .; . .

Phrase.htm .

(style sheets) HTML 4. .

. o6uieN
:
. _ {"!: ; 2: ; . . . }

(!
). HTML, $
( ) .

,
,
. , BODY,
Web-. -
.
HTML, , ,
( HEAD) -:
< http-equiv="Content-Style-Type" content="text/css">

65

, .
CSS (Cascading Style
Sheets). , HTML.
(CSS1 CSS2), . ,
: .
.
, :
(, JavaScript). ,
. 5.

, :
< s t y l e = " f o n t - s i z e : 10pt; f o n t - s t y l e : italic; c o l o r : b l u e " >
, .
, . style, .

<STYLE> </style>
style , ,
STYLE , :
<STYLE type="text/css">
1 { b o r d e r - w i d t h : 1; b o r d e r : groove; t e x t - a l i g n : c e n t e r ; c o l o r : g r e e n }
H2 {color: maroon; font-style: italic}
CODE { f o n t - f a m i l y : A r i a l , V e r d a n a ; b a c k g r o u n d : w h i t e }
P { t e x t - i n d e n t : 10; c o l o r : g r e e n ; f o n t - s i z e : 12pt}
P CODE { f o n t - w e i g h t : b o l d ; c o l o r : violet; f o n t - s i z e : 12pt}
</style>

. CODE .
() , .
:
, .
.
, CODE
. :
( t e x t - i n d e n t : 10); CODE ( b a c k g r o u n d : white). ,
P CODE :
(font-weight: bold); (color: violet)
(font-size: 12pt).

3. HTML '

66

,
: , ,
. ,
, , ? '
.
.
,
CODE .
, , .
, Style.htm

STYLE style
, style,
, ,
STYLE. , style .
STYLE : type, l a n g , dir, title.

.
.
.
. . ,
STYLE, :
<STYLE type="text/css">
H1.red1 {color: RGB(215,40,40); text-align: center}
</style>
RGB(). ,
, , :
<1 class="red1"> </h1>
red2, red3 . . ,
: .

: id
, , , , . . , ,
- . steel.
( STYLE) :
#steel {color: RGB(155,180,190): font-weight: bold}

___

67

, R G B ( ) . , ,
. ,
. () : . id, :
<2 id="steel"> "steel" </h2>
< id="steel"> , "steel" </p>
:
. :
: ,
, .
.

: <LINK>
Web-. (CSS).
, CSS- ( , , ) .
, .
, LINK HEAD:
<LINK href="_.ess" rel="stylesheet" type="text/css">
,
. , CSS- :
P.sped {color : green; font-variant: small-caps;}
P.newl {color : maroon;font-style: italic;}
P.new2 {color : maroon;font-style: italic;letter-spacing: 2pt;}
, . 3.4.
(CI.ASS-"SPEC1") -

(!.= "newl") - .
(class = "new2 ") - .
. 3.4.

Class.htm Formats.ess .

68

3.

HTML

<DIV> </div> <SPAN> </span>


,
. , :
. .
, . DIV , ,
, .
DIV:
<HEAD>
<STYLE type="text/css">
DIV.I/ { : ', . . . }

</style>
</head>
<BODY>
<DIV 1="?">
<H1> </h1>
<>
<>
</body>
SPAN, , :
<HEAD>
<STYLE type="text/css">
SPAN./^ { : ;

...

</style>
</head>
<BODY>
<H1> </h1>
<P><SPAN !=""> 7</span> 2 </p>
</body>

, ,
.
, HTML.

, :
(inline); ;
; , CSS-.

69

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

(list) HTML, , . ,
:
. ,
.
: , ,
. ,
.
: ( ),
. . .

<UL>
(unordered list).
:
<UL>

<11> 1
<1_1> 2
<1_1> 3

UL .
. LI . . 3.5.
1
2
3 .
. 3.5.

<OL>
(ordered list) :
<OL type="I">
<1_1> 1

70

3.

HTML

<1_1> 2
<11> 3
<11> 4

: 01. : , . . 3.6
.

. 3.6.

type. . 3.2
.
3.2. type

type="1"
type="i"
type="I"
type="a"
type="A"

1,2,3,4,...
i, ii, iii, iv; ...
I, II, III, IV, ...
a, b, c, d, ...
A, B, C, D, ...

, :

, , start=4
, D.
LI ,
:
value=HOep
, . .
v a l u e , LI, , start,
,
.

71

<DL> <DT> <DD> </dl>


(definition list) :
<DL>
<> 1
<00>0 1
<00> 1
<> 2
<00>0 2
<> 3
<00>0 3

. 3.7.

() DD. .
. , ,
, , . ,
, .
1
1
1
2
2
3
3
. 3.7.

.
, , . . , .
, , .
.
.
:
<UL>
<11> 1
<OL>
<11> 1.1
<1_1> 1.2

3. HTML 4

72

<1_1> 2
<OL>
<11> 2. 1
<1_1> 2 . 2
<11> 3
<OL>
<1_1>

3.1

<1_1> 3 . 2

. . 3.8 , .
1
1. 1.1
2. 1.2
2
1. 2.1
2. 2.2
3
1. 3.1
2. 3.2
. 3.8.

(. ). , HEAD
(circle):
<STYLE type="text/css">
<OL>c01 {list-style-type; circle}
</style>
BODY :
<OL class="c01">
<LI> 1
<LI> 2

List.htm .

73

, .
:
1

< =" "> </>

:
< href =" "> <IMG src=" "> </>

, . h r e f , . , , .
, . ,
, .
, . , . ,
,
f i l e , :
h ref=" file: // :\ "

href=" file: ///: / "

(, Web-). , : page2.html, s t r e l k a . g i f , photo35.jpg.


:
. ,
, :
href =" . //, "

.
, ,
, :
href=" , . //, "

,
. , :
href='W

tref-" : //

"

74

3.

HTML

:
href="http://www. netscape. com"
, URL, .
, . .
, . , , , .
.
. , , . .
WWW ,
, , ( ftp).
:
f i l e ;
f t p (file transfer
protocol);
h t t p WWW;
mailto ;
news USENET;
n n t p USENET NNTP;
telnet telnet;
wais WAIS.
, ,
. Web- .
:
< href="mailto:goncharov@online. "> </>
, ,
:
< ="/">

:
< name=" h t t p : ///. htmltwerra "> </a>
(
Web- 2):
< href="#A/er/<a"> </>

75

. h r e f l a n g , lang, , .

, . ,
HTML- .
, , , , , .
.
(forward)
(reverse). , , . ,
. ( , ).
!=" "
rev="Tnn "

a l t e r n a t e ;
stylesheet ;
s t a r t ;
next ( ) ;
prev ( ) ;
c o n t e n t s , ;
index , ;

g l o s s a r y , ;
c o p y r i g h t ;
chapter ;
section ;
s u b s e c t i o n ;
appendix ;
h e l p ;
b o o k m a r k .

, . Shape coords (. 4). t a r g e t


(. ). accesskey t a b i n d e x
, (.
4).
: id, class, l a n g , d i r ,
title, type, style, .

3. HTML 4

76

<LINK>
, , LINK
, HEAD.
<HEAD>

<11>

1</title>

<LINK rel="prev" href="BsefleHMe,htm">


<LINK rel="next" href="HiaBa2. htm">

<LINK rel="index" hef="aae.htm">


</head>
LINK , , , h r e f , , LINK.
, , , A: c h a r s e t , h r e f ,
h r e f l a n g , id, class, lang, d i r , media, rel, rev, style, t a r g e t , title, type, .

Web. ,
. , ,
. ,
: , , . .
: (TABLE) , (TR),
(,).
, , . , TABLE TR, , . ,
, ( ).
TD (), . .
TR, , . . ( </table>).

<TABLE> </table>
.
Web-. .
.

77

a l i g n :
a l i g n = " l e f t " ;
a l i g n = " c e n t e r " - ;
align=" right" .

. :

width=400
width=50%
. ,
, () .
(. 3.9).

2
3

. 3.9.

:
1=
.
:
111=/
, , .
, :
-

cellpadding="15%"
.
.
, .
:
1=""
1=

3. HTML 4

78

:
1="0"

bgcolor background , CAPTION.


f r a m e ( TABLE)
:
f=""

void ;
above ;
below ;
hsides ;
vsides ;
Ihs ;
rhs ;
b o r d e r box .

, f r a m e , .
r u l e s , .
:

;
g r o u p s ;
rows ;
cols ;
all .

.
(, - ):
summary='Te/ccr "

: id, class, lang, dir, title, style, .

<CAPTION> </caption>
. TABLE, (. . 3.9). :
align="top" ;
align="bottom" ;

79

a l i g n = " l e f t " ;
a l i g n = " r i g h t " .
: id, class, lang, dir, title, style, .


,
. align . :
l e f t ;
right ;
center .
v a l i g n .
:
top ;
bottom ( );
center ;
baseline .
baseline:
<TR valign="baseline"> <> 1<> 2 <> 2
, . v a l i g n 1 2 .

<TR>
, . . , , TR.
TD, .
align l e f t , c e n t e r r i g h t .
, :
v a l i g n = " t o p " - ;
valign="center" - ;
valign="bottom" .
: id, class, lang, style, d i r , title, c h a r , c h a r o f f , .

<>
, .
T R . -

80

3.

HTML

, ( ,
) . .
, , . , , .
n o w r a p ( ) . ,
.
rowspan colspan ,
. , .

rowspan=n

, >1, , , , , , .
, c o l s p a n , . 6.
align . left ( ), center ( ) r i g h t ( ). . .
, a l i g n .
valign , TR.
:
height=sb/cora

<TD>
.
, .
.
, .
, , , :
<TABLE

border=4

cellspacing=3>

<CAPTION> </caption>
<TR><TH 1="11">3 1
<TH 1="11">3 2

81

<> 1
<> 2
<> 3
<> 4
</table>

, -. . 3.9. , TD, .
( ) .
.
, :
<TABLE border=4 cellspacing=3>
<CAPTION> </caption>
<TR><TH bgcolor="yellow">
<TH bgcolor="yellow">3aronoBOK 1
<TH bgcolor="yellow">3arcmoBOK 2
<TR><TH bgcolor="yellow">3arcmoBOK 3
<> 1
<> 2
<TR><TH 1="11">3 4
<> 3
<> 4

</table>
. 3.10. : ,
, ,
-. ,
.

!

[ 2

. 3.10.

. . r o w s p a n c o l s p a n , :
<TABLE border="4" cellspacing=3 background="fon01.gif">
<> </caption>
<TR><TH rowspan="2">&nbsp;< !="2">3 1

3. HTML 4

82

<><> 1.1<> 1.2


<><> 2<> 1<> 2
<> 3<> 3<> 4
</table>
. 3.11. , , , &nbsp;.
, .

-:"-' it)-:'-"

El/

:*': |1 ;>:

vsf'-'ll

1:1 |3 1.2

|]2:|-1

- : : ] : 2 " - ' \

'

''^

. 3.11.

: <THEAD>, <TFOOT> <TBODY>


.
THEAD, TBODY
TFOOT. ( TR). , . :
<TABLE border=2>
<THEAD>
<TR> <> 2
<TFOOT>
<TR> <> <>&;
<TBODY>
<TR> <> 1 <> 1.2
<TR> <> 2 <> 2.2
<TBODY>
<TR> <> 3 <> 3.2
<TR> <> 4 <> 4.2
<TR> <> 5 <> 5.2
</table>
(. 3.1,2),
. ,
.

83
1 [ 1

2-

| 1

|1.2 !

|| 2

|2.2

|| 3

3.2

} 4

. 4. 2

^ 5

5.2 1

^[
. 3.12.

.
THEAD TFOOT,
TBODY.
: THEAD, TFOOT, TBODY.
TFOOT .
.

: <COLGROUP> <COL>
COLGROUP . :
<TABLE border=4>
<COLGROUP span=1 width="30" bgcolor="lime">
<COLGROUP

bgcolor="yellow">

<COL span=2 width="30">


<COL width="60">
<COLGROUP bgcolor="aqua">
<COL width="50"'>

<TR><TD> 1-1 <TD> 1-2 <TD> 1-3 <TD> 1-4 <TD> 1-5
<TR><TD> 2-1 <TD> 2-2 <TD> 2-3 <TD> 2-4 <TD> 2-5

</table>
. 3.13. COLGROUP , span.
. COL . , COLGROUP, . ,
, () . . , .

3. HTML

84

JI2-2 ij2-3 12-4

'|HP

. 3.13. COLGROUP COL

.
COLGROUP , COL
COLGROUP. !
COLGROUP. span
COL . COL , span COLGROUP , !
COL. 01
span.

Table.htm .

<FRAMESET> <FRAME> </frameset>


,
. , . .
Web-. HTML . (layout)
, , . (content) , , Web- ?
, . rows,
cols. . , * . :

cols=50%, 50% (
Norton Commander);
cols=25%, 75% .
, ;
rows=150, 30%, * 150 ,
, , ;
cols=*, 4* .
. : cols=20%, 80%.

85

FRAMESET id, class, title,


style, o n l o a d , o n u n l o a d .
HTML- . , .
, . , ,
: . ,
. , HTML-.
.
, .
FRAMESET BODY.
<FRAME>
id, class, t i t l e style
, .
FRAMESET , . , FRAME name. (. 3.5). FRAME :
<FRAME =" , htm" =" ">
, . no resize
.
s c r o l l i n g . Y E S ( ), N0
( ) AUTO ( , ). ,
, .
, .
longdesc (URL). ' . title,
.
f r a m e b o r d e r ,
. 1 , 0 .
, ,
.
m a r g i n h e i g h t
. , :

marginheight="75"
, r n a r g i n w i d t h , , :
marginwidth="10"

3. HTML

86

, , . !
( Frame.htm) Web-.
3.1.

<1>
<HEAD>
<TITLE> </title>
</head>
<FRAMESET rows="20%,60%,20%">
<FRAME src="fr1.htm" noresize>
<FRAMESET cols="22%,78%">
<FRAME src="fr2.htrrf>
<FRAME src="fr3.htm" scrolling="yes" marginwidth="10" marginheight="75">
</frameset>
<FRAME src="fr4.htm" >
</frameset>
</html>
, . 3.14. ;
,
. ,

FRAMESET.
il

lipgll |l

'i'arVi ;!f. .;if,i tun (!

i |, :


}
: ,
; ,
1
;
:

1 .

...

. . , -

|
|

||

]*|

-.:-:>::.-:.>>..;.X;.:>x.y-,-::;-:.

. . . ~ ''

:.:..^..,.

. 3.14. Web-

87
-

Frame.htm, Frl.htm, Fr2.htm, Fr3.htm, Fr4.htm,


.

<NOFRAMES> </noframes>
, , . . .
3.2. NOFRAMES

<HTML>
<HEAD>
<11_>7 </11>

</head>
<FRAMESET cols="nn%, /%">
<FRAME src=" 1. htm">
<FRAME ="2. htm">

<NOFRAMES>
<> ,
</>
<>
< \\ref="-. htm"> </> </>
</noframes>
</frameset>
</html>
, , , NOFRAMES.


(. 3.15).
(Main.htm) ,
: , . Framel.htm. . , , , ,
.
.
.

88

3. HTML

main, htm

framel htm

frame 1 htm

ml. htm right 1 . htm

ml . htm rightZ .htm

t
1
. 3.15.

3.3. Main.htm

<HTML>
<HEAD>
<11> <>
</head>

<BODY bgcolor="aqua">
<2> </2>
<HR>
< href="framel.htm"> </>
<HR>
</body>
</html>
3.4. Framel.htm

<HTML>
<HEAD>
<11> <>
</head>

<FRAMESET frameborder=1 framespacing=5 cols="160,*">


<FRAME name="menu01" NORESIZE src="m1.htm">
<FRAME name="info01" src="right"!. htm">
<NOFRAMES>

<>
</noframes>
</frameset>
</html>
.5. Ml.htm

<HTML>
<HEAD>

<11> </1>
</head>
<BODY text="black" bgcolor="gold" link="green" vlink="purple" alink="red"

89

<></>
<HR>
< target=_parent href="main.htm" > </>
<A target="info01" href="right1.htm" > 1 </a>
<A target="info01" href="right2.htm" > 2 </a>
<HR>
</body>
</html>
3.6. Rightl.htm

<HTML>
<HEAD>
<11> <>
</head>

<BODY text="black" bgcolor=#9CB3BE link="green" vlink="purple" alink="red">


<H2> 1 </h2>
<A href=main,htm target=_parent> </>
&nbsp; &nbsp; &nbsp;&nbsp;
<A href=right2.htm> </>
<HR>
</body>
</html>
.7. Right2.htm
<HTML>
<HEAD>
<11_> <>

</head>
<BODY text="black" bgcolor="pink" link="green" vlink="purple" alink="red">
<2> 2</h2>
<HR>
<A href=right1.htm> </>
&nbsp;&nbsp;&nbsp;&nbsp;
<A href=main.htm target=_parent> </>
<HR>
</body>
</html>
, .
(Main.htm) : Framel.htm.
, .

90

3. HTML

, name,
name="info01"
, , ,
.
Ml.htm,
:
: ,
. (. 3.16).

'
';

:. ...

:,.

. 3.16. Ml.htm Rightl.htm

, :
Framel.htm. ,
, TITLE

Rightl.htm Right2.htm !
.
, ,
.

: ( )
( ).

Ml.htm .
target _parent
: <
Main.htm . \
:
< target=_parent href="/uw. htm"> </>

91

t a r g e t :
_self t a r g e t ,
;
_top , _parent;
_ b l a n k .
, . target
( , ):
target="info01"

Rightl.htm Right2.htm , ,
. :

target=_parent
()
target : .

Main.htm, Framei.htm, Ml.htm, Rightl.htm Right2.htm


.

<IFRAME> </iframe>
(inline
frame) . ( .htm) :

<IFRAME =" , htm" width="nnn" height="m/">


.
< href="^Mfl . /?1">. </>
</iframe>
w i d t h h e i g h t .
, 300x150 .
sc r o l l i n g :

auto ;

yes ( );
.
target f rameborder,
:
longdesc="(7flL"
=" "

92

3.

HTML

fnarginwidth=" "
marginheight=" "

align, class, id, style, title


,
. -,
,
. *
Web-. -, , ( )
. , , , . ,
, Web-
. ,
, .
, HTML .
, .
, , , - , .
: - ( W3 Consortium), (- ). ,
, , . ,
HTML. , .

<BGSOUND>
HEAD.
src . loop .
(1=-1 l o o p = " i n f i n i t e " )
, (1=1):
<BGSOUND ="3. wav" loop=1>

.
: id, class, l a n g , t i t l e .

93

<BLINK> </blink>
, . , , - . - . ,

.

<DIR> </dir> <MENU> </menu>


, .
. , UL
D I R :
<DIR>
<1_1> 1
<11> 2
<1_1> 3

DIR MENU List.htm .

<> <LISTING>
HTML 3.2 . . P R E .

<COMMENT> </comment>
. (,
, ),
.
:
. , , , ,
COMMENT . , , , . , : ,
( ).

<PLAINTEXT> </plaintext>
HTML,
. ,
, .

94

3.

HTML

'

, HTML.
P R E .

<EMBED> </embed>
, .
(plug-in)
:
<>
src="

height=efc/cora

attribute_1=" "
attribute_2=" " . . . >
</embed>

<NOEMBED> </noembed>
EMBED
, .

<MARQUEE> </marquee>
, . , , .
:
1=""

, , . :
height=sb/cora

, !
30. ..50. . .
, , .
, a l i g r
,
:

align="top"
align="middle"
align="bottom"

95

, . , 50 , :
<MARQUEE bgcolor="green" height=50 align="middle">
</marquee>
:
direction="left"
direction="nght"
, , ,
(behavior) . , . (), , . :

behavior="scroll"
: -
, . :
be|iavior="slide"
, .
, . :
behavior="alternate"
:
=
:
vspace=swcora
:
1=
, .
, .
:
scrollamount=4HC/]o
1, . 10, .
,
.
, ( ) :
1=

3. HTML

96

Text.htm .

<HPn> </hpn>

, = 1,2, 3... .
. ,
.

<BANNER> </banner>

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


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


(IMG, OBJECT, APPLET) a l i g n , b o r d e r , width, height, hspace, vspace .
, ,
, (border):
border=

. ,
.
:
height=sb/cora

width=(/ipMHa
:
align="bottom" ;
a l i g n = " l e f t " ;
a l i g n = " m i d d l e " ;
align=" r i g h t " ;
align="top" .

98

4.

. "
:
=
:
=


<IMG>
(image).
: , , Web-, , . .
s r c :
src=" "

URL.
- Web . , . HTML- :
. . , ,
src, .
alt. , .
, , ,
. , ,
. :
alt="My p h o t o " ;
alt="SEND" ;
alt="www. , com" ;
alt="pict15. g i f " .
, ,
height width. , , ,
. ,
. , . ,
. , , .

99

: class, dir, id, lang, longdesc,


style, title, .
IMG , . (). ,
, , ismap. :
ismap="ismap"

.
, , usemap.
:
AREA MAP (. ), .
, usemap IMG , , . ,
, : AREA, IMG MAP.

<> <AREA> </map>


. AREA :
=""

AREA.
. , :
:

href =" "

, , :
alt= " "

,
.
, , .
: (circle), (rect)
(polygon).
(), . () ()
(. 4.1). :
shape="circle" coords=x,y,r

4.

100

(, ]
, :
shape="poly" coords=x7, y1, x2,y2, , . . .
. 4.1.
i
:
shape="rect

coords=xt, y1,

x2,y2

. 4.1.

nohref ( ) .
4.1 Map.htm,
. , k a r t a l , . k a r t a 2 .
4.1. Web-
<HTML>
<HEAD>
<.> 1/-<>
</head>
<BODY bgcolor="#FFFFFF" text="#000000" link="#OOOOFF"
vlink="#FFOOOO" >
<><2> xapT</h2></center>
<A NAME="verh"x/a>
<>

<HR>
<2

101

< name="karta1">
<AREA alt="Kpyr" shape="circle"
coords="119, 114, 83" href="http://www. piter-press. ru">
<AREA ]:="" shape="poly"
coords="74, 242, 180, 250, 249, 239, 242, 278, 31 , 276"
href="Start.htm">
</map>
<MAP name="karta2">
<AREA ]=" 2" shape="rect"
coords="27,31,191,101" href="verh">
</map>

<IMG src="Map1.gif" usemap="#karta1" alt="KapTa 1">


<HR>
<P>Ha ,
.
,
<B>src</b> <B>href</b>,
<> Web-
"",
Start.htm.
,
<HR>
<2 2</2>
<IMG src="Map2.gif " usemap="#karta2" alt="KapTa 2">
</body>
</html>
, IMG
. , , , ,
- Map.htm .
OBJECT, :
<OBJECT data="w.gif" t y p e = " i m a g e / g i f " usemap="#/<artar> </object>
Windows 95
Paint. BMP.
. Ctrl+G. .
,

4.

102

. . coords (, ).
GIF, , , . , MS Photo Editor, Microsoft
Office, Adobe Photoshop.
( ) GIF,
JPG PNG.
, , . ,

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

. : , .
. 4.2 .

| windows ]
KOI-8

. 4.2.

103


<APPI_ET> </applet>
,
Java. , HTML- Java, :
<!_ $=" .class" width=nnn height=fflmm>

</applet>
code , , Java-. ,
, , . codebase.
mmm . APPLET . , Java,
, , PARAM
(. ). , Java, PARAM
.
APPLET .
codebase :
codebase="(M "

, URL-.
alt , . , ,
:
alt="

"

name . , , , :
=" "

w i d t h h e i g h t : .
, align . : bottom, left, middle, right, top.
:
vspace=
8=;70

: id, class, title, style.

4.

104

<OBJECT> </object>
:
<OBJECT data="#Mfl , png" type="image/png">
. ,
, ,
IFRAME. OBJECT APPLET:
<OBJECT codetype="application/Java" classid="Java:"
width="nnn" height="/nmm">

</object>
:
classid="ziwz " ;
codebase=" URL" URL, a r c h i v e , classid data;
data="adpec " URL , ;
archive="cwwcoK " data, ;
codetype="mttn" ( classid);

type="mMn" (MIME) ;

declare , ;

standby= " " , , .


OBJECT : id, class, lang, title, dir,
style, tabindex, usemap, name, align, width, height, border, hspace, vspace,
.
, .
,
, :
<OBJECT classid="HfleHTM<j)MKaTop" data="/. ">

</object>
. .

105

, , - .
:
<OBJECT title=" "
classid="/ . ">
<OBJECT title=" "
data="/fM# , gif" type="image/gif">
</object>
</object>

<PARAM>

APPLET OBJECT. :
<APPLET =" , class" width=nnn height=mmm>
<PARAM =" " !=3 >

</applet>
:
<OBJECT classid="Aflpec "
standby=" ...">
<PARAM =" " 1=3 >
<PARAM ="^ " ].=3
valuetype="7w7 ">
</object>
PARAM , (name) (value).
:
=$1ramete (" ")
valuetype :
data ;
object ;
ref (URL).
, v a l u e t y p e ref,
type :
1=""

106

4.


, : , , , . . HTML. !
, .
.
, ,
.
name.
.
, .
v a l u e .

tabindex=Hcwep

, ;
Tab. t a b i n d e x = 1 .
, (, ), ,
. Alt , . HTML npneiv
accesskey. :
accesskey="R"

disabled . ;
, .
.
, :
o n f o c u s ();
o n c h a n g e ;
o n b l u .


<ISINDEX>

, , .
, . p r o m p t :
<ISINDEX prompt="Crpora ">

1Q7

, . 4.3. URL. , :
<BASE href="http://www../">
h r e f
. ISINDEX ("!, 2, ), :
http://www../?1+2+
. , ,
. ? +.
.
: id, class, l a n g , d i r , title, style.

;a

,r.

. 4.. ISINDEX

<FORM> </form>
. , CGI-, . action , :
<FORM action="http://www. ./ " method="post">

</form>
:
action="mailto:Aqpec(5)cepeep. "
method
. GET ,
, POST.
enctype .
, ,
:
accept-charset=" "

4.

108

:
accept=" "

, (reset"
(submit) . -, *
,
onsubmit on reset.
: id, class, lang, style, dir, title, target,

<INPUT>
,
, . , .
type:

type="text" , !
, value;

t y p e = " p a s s w o r d " , ;

type="checkbox" ;

t y p e = " r a d i o " . INPUT. :


<> </h3>
<INPUT type="radio" name="S001" !="">
<INPUT type="radio" name="S001" !="">
<INPUT type="radio" name="S001" !="" checked>
checked ,
. . 4.4 .

. 4.4.

type="button" ;

t y p e = " s u b m i t " ,
. v a l u e
;
type="reset" , ;

109

type="image" .
src. align . :
bottom, left, middle, right, top.
, ;
type="f ile" . . , , ( ) ;
t y p e = " h i d d e n " . ,
. , .
.
,
.
name INPUT, . ,
, . .
value .
.
, checked .
. , . ,
.
size . ,
.
, . , , . , .
m a x l e n g h t . -,
,
. -, , .
r e a d o n l y , .
u s e m a p (. ) ,
.
, FORM, INPUT accept.
: accesskey, tabindex, readonly, disabled.
: id, class, lang, title, dir, style, .

110

4.

FORM INPUT, , , ISINDEX.


, , ISINDEX (. . 4.3):
<FORM action="" method="post">
<> <BR>
<INPUT type="text">
</form>

<LABEL></label>
.
:
<LABEL>flaffl : <INPUT type="text" id="arfres"x/label>
LABEL ,
for, id :
<LABEL Tor="adress">Baui : </label>
<INPUT type="text" id="adress">
LABEL .
,
.
: accesskey, id, class, lang, dir, title, style, .


, . , :
<TABLE border=3>
<FORM 11="1:@." method="post">

<TR>
<TD><LABEL ="1">: </label>
<TD><INPUT type="text" id="imya">
<TR>
<TD><LABEL for="familiya">(t>aM^MH: </label>
<TD><INPUT type="text" id="familiya">
<TR>
<TD><LABEL fo="telefon">Teeo: </label>
<TD><INPUT type="text" id="telefon">
<TR>
<>:&; &nbsp;

<INPUT type="radio" name="pol" value="Male"> M&nbsp;


<INPUT type="radio" name="pol" value="Female">
<TD align="bottom">
<INPUT align="bottom" type="submit" !="0">
<INPUT type="reset">
</form>
</table>
. (. 4.5).
, (, ). . , .
, Web-. ,
. ,
, , Reset.
:

;!|

^:

;;]

^:

!|)123-15-67J

(:

<
. 4.5.

,
. , . ,
: .

<SELECT> <OPTION> </select>


SELECT '
, OPTION .
, :
<SELECT>

<OPTION !=>
<OPTION !=>
<OPTION 1=>
<OPTION value=d>4eTBep
</select>

4.

112

, . 4.6. , , .

. 4.6. Web-

SELECT . name !
(. ).
m u l t i p l e ( )
. size . size ,
: , . , , , .
: disabled, tabindex, id, class, lang, dir, title, style, .
OPTION . Selected ( ) , ,
. OPTION
. value .
name value.
OPTION: disabled, id, class, lang, d i r , title, style,
.

<TEXTAREA> </textarea>
.
. 4.7 ,
:
<2> TEXTAREA
<TEXTAREA name="text001" rows=5 cols=30>

</textareax/h2>

rows ( ) cols ( ). name , .


INPUT, TEXTAREA readonly.
, .
: disabled, tabindex, id, class, lang, dir, title, style, .

113

. 4.7.
SELECT TEXTAREA ,
Web-. , .
SELECT , ,
, 3.
, .

< BUTTON > </button >


, INPUT. , , ( ). ,
, , (. 4.8):
<BUTTON ="^" value="submit" type="submit">
7~e/<cr<IMG =". gif"

. 4.8.
type :
button , ;
s u b m i t , , ;
reset .
: accesskey, disabled, tabindex, name, value, id, class, lang, dir,
title, style, .

<FIELDSET> <LEGEND> </legend> </fieldset>


. , , .
<FIELDSET>
<LEGEND>3a rpynnb/</legend>

4.

114
: <INPUT name="ifflya2" type="text">
: <INPUT name="familiya2" type="text"XBR>
: <INPUT name="telefon2" type="text"><BR>

</fieldset>
FIELOSET :
(. 4.9). .
: I
: j

: j

. 4.9.

LEGEND . , HTML.
, <BR>.
.
a l i g n :
top ( . 4.9);
bottom ( );
left ( );
right .
LEGEND: accesskey, id, class, lang, d i r , style, title,
.

Form.htm .

,
, . HTML : , ,
. . , .
JavaScript, Netscape,
Visual Basic Script (VBScript), Microsoft.
JavaScript , , ,
- ( ),
.


<SCRIPT> </script>
- . SCRIPT language,
:
j a v a s c r i p t JavaScript;
tcl Tel;
vbscript VBScript.
.
SCRIPT :
src="URL"

, JavaScript, JS.
type , . , :
type="text/javascript"

. ,

5.

116

. d e f e r ( ]
, . )
.
charset.
SCRIPT ( )
HEAD, BODY. :
BODY, , - ,
SCRIPT,
, :
<SCRIPT 1="">
<!-- ,

-->

</script>


. , !
: //.
,
. 5.1
5.1. (1 )
<1>
<HEAD>
< http-equiv="Content-Type" content="text/html;
charset=windows-1251">
<11_> <>
<SCRIPT language="javascript">
alert(" !")
</script>
</head>
<BODY background="fon01.gif">

<P>
<CENTER>
<H1 style="color : maroon">3 1</h1>

</center>
</body>
</html>

, .
a l e r t ( ) ( ), . 5.1.
, .

117


' - Microsoft intern! |
1
|
|
|
|
|
1
||f|||i|t
:
:

' .

1 l^
f' '*:'

iiiiii .^

| HTML\simple.htm

?V

^'.... ^ v . . . ' . .

11-... ,;):.

MJ

'I - !
'.

'

" . ' ' ' ' .

. 5.1.

:
. o n l o a d BODY ( 5.2).
5.2. (2 )

<HTML>
<HEAD>

< http-equiv="Content-Type" content="text/html;


charset=windows-1251">
<11> <>
<SCRIPT language="javascript">
function DoFirstO
{

alert(" !")
</script>
</head>
<BODY background="fon01.gif" onload="DoFirst()">
<P>
<CENTER>
<H1 style="color : maroon">3 1</h1>

</center>
</body>
</html>

5.

118

, ,
. 3 ,
HTML.
Simple.htm Simple2.htm .

<NQSCRIPT> </noscript>
, ,
, NOSCRIPT.
.
. -,
: ,
! -,
, . -,
. NOSCRIPT
. id style.

JavaScript
JavaScript. :
. , , JavaScript (
1999 .). , ,
. , ,
( ). .

, JavaScript , ,
, - ,
, , .
.
:
function (1,


return

2. . . )

JavaScript

119

: f u n c t i o n ,
, . , :
()

, , , . , , .
r e t u r n .

.
. , ,
. , , , . . var, :
var ColorOI = "red"
ColorOI = "red"
. .
, , :
WelcomeMessage = ' "Tip Top"'
:
count = 1

1 = 3 . 5 5
F5 = 7 . 6 7 4 - 5

f a l s e () t r u e ().
:
mass[23]
:
varOI = var02+3 ;
varOS = 1 0 * ( v a r 0 4 - v a r 0 5 ) .
Math:
var06 = M a t h . s q r t ( v a r 0 7 ) ( ).
,
, :
var08=var09 % 4

120

5.

:
var10++ 1;
varOS --- 1.

, ,
:

== ;
! = ;
> ;
>= ;
< ;
<= .

, :
! ;
| ;
&& .

do. . . w h i l e , .
do {

1 ;
2 ;

while ()

, , , . (, , .) ( )
.
:
while () {
1 ;
2 ;

f o r , . ,
.

JavaScript

121

var Massiv = new ArrayO;


var n = 25;
for (i = 0; i < n; i++) {
Massiv[i] = 0;
}
:
, .
, . , , . ,
. ,
, .
, . break . continue
.

.
i f . , . else ,
(). :
if () {

}
else {

}
else (, false), .
s w i t c h . , . case , , , . . ,
case. .
, d e f a u l t .
. , , case.
switch () {
case ? :

case 2 :

default :

122

5.


.
( ),
, ,
5.3 . , ]
.
5.3.
<1_>
<HEAD>
< http-equiv="Content-Type" content="text/html;
<11_> <>
<SCRIPT language="javascript">
AgentName = navigator.appName;
AgentVer = parselnt(navigator.appVersion):
if (AgentName == "Netscape" && AgentVer <= 2){
version = "n2";

1
else {
version = " x 3 " ;

if (version == "x3") {
//
IMAGEIon = new Image;
IMAGEIon.src = "str~lon.jpg";
IMAGEIoff = new Image;
IMAGEIoff.src = "str1.jpg";
//
IMAGE2on = new Image;
IMAGE2on.src = "str2on.jpg";
IMAGE2off = new Image;
IMAGE2off.src = "str2.jpg";
}

//
function mouse_on(objekt) {
if (version == "x3") {
imgOn = eval(objekt + " o n . s r c " ) ;
document[objekt].src = imgOn;

charset=windows-1251">

_____

123

//
function mouse_off (objekt) {
if (version == "") {
imgOff = eval(objekt + " o f f . s r c " ) ;
documentfobjekt]. src = imgOff;

</script>
</head>
<BOOY>
<TABLE align="left" border=0 cellspacing=3 cellpadding=8>
<TR>
<!-- -->
<TD><A href="URL" onMouseover="mouse_on( 'IMAGE1 ' )"
onMouseout="mouse_off ( 'IMAGE"! ' )"><IMG src="str1 . jpg" name=" IMAGE"!"
alt="Page 1" border=0 height=36 width=151x/a></td>
<!-- -->
<TD><A href="L)RL" onMouseover="mouse_on( 'IMAGE2' )"
onMouseout="mouse_off( 'IMAGE2' )"><IMG src=" str2.jpg" name="IMAGE2"
alt="Page 2" border=0 height=36 width=151></a></td>
</table>
</body>
</html>
SCRIPT.
. ,
JavaScript, ,
, . Netscape Navigator 2.x. A g e n t N a m e A g e n t V e r ,
.
n a v i g a t o r ( ). :
appName , ;
a p p V e r s i o n , ;
p a r s e l n t . (. .
).
, , version,
2,
Netscape Navigator. .

124

5.

.
src :
IMAGEIon IMAGEIoff
Image. :
strlon.jpg , ;

strl.jpg , , , .

. ( 1'
8 . 8.23,
, .

: *
, .
, ;
JPG.

, ,
.
: onMouseover="mouse_on( ' I M A G E 1 ' ) " . ,
. , !
m o u s e _ o n ( o b j e k t ) . I M G ,
name="IMAGE1". ,
, ,
. , eval, '
Netscape Navigator.

.
JavaScript. eva]
. *
" I M A G E I o n . src", imgOn >
. " s t r 1 o n . j p g " , , a URL,
file:///://st on.j pg

.
document IMG. document !
,
. , src .
(mouse_of f )

, : ? , -
, :
document["IMAGE1"J. src '= "str1on.jpg";

, IMG.

125

mouse_on . , , : :
function mouse_on(objekt, risunok) {
if (version == " " ) document[objekt].src = risunok;

>

:
1

< href =" URL" onMouseover="mouse_on( 'IMAGE1 ' , 'str1on.jpg )"


onMouseout="mouse_off( 'IMAGE"! ' , ' s t r 1 . j p g ' )"><IMG src=" str1.jpg"
name="IMAGE1" alt="Page 1" border=0 height=36 width=151></a>

. ,
: , , .
, , ,
.


Web-, 5.4,
. ,
.
5.4.

<HTML>
<HEAD>
<> <>
< http-equiv="Content-Type" content="text/html; charset=windows-1251">
<SCRIPT>

//
function TextOnMouseOver( ){
Element"! = window. event. srcElement ;
Text"! = document. all("Par1") ;
if (Elementl.tagName == "H2") {
Element"! .style. color = "red" ;
Text"!. 11=" ?"
Text"! . style. color="maroon"

//
function TextOnMouseOutO {
Element"! = window, event. srcElement ;
Textl = document. all("Par1") ;

126

5.

5.4 ()

if (Elementt.tagName == "2"){
Elementl .style. color = "green" ;
Text"! . innerText=' ""'
Text"! . style. color="blue"

</script>
</head>
<BOOY bgcolor="white" text="green">
<P id="Par1">ycTaHOBHTe ""</>
<TABLE border=0 cellspacing=0 cellpadding=0><TR>
<TD><H2 onmouseover=TextOnMouseOver( ) onmouseout=TextOnMouseOut( )>
</2><>
</body>
</html>
, 2 : :
. SCRIPT
,
T e x t O n M o u s e O v e r ( ).
,
Element! :
w i n d o w , ;

event , ;

srcElement , ,

Text"! ( ) id, .

. tagName , 2. ,
, . style, c o l o r
innerText . , , ,
, , , .

, 2 TABLE.
, , (. 5.2). , . ,

127

, ,
( ). , ,
2 .

?^f_
color.htm

""

. 5.2. 5.4

Txtcolor.htm .

setTimeout
: setTimeout, .
5.5, . 5.3.

...
.

| :. : : : !
s - - .. ;- \

I,

.: ^.

,., . ,

'-*

Qc|
i|S|||

" .1

DAHTML\clocklhtm
:
J03/17/200012:37:58"]
:
|12:37:58
1

. 5.3.

128

5.

5.5.
<HTML>
<HEAD>

<11_> <>
</head>
<SCRIPT language="javascript">
function Timer1() {
var D1 = new Date();
var TIME1 = " ";
TIME1 = D1 . getHours( )+" : "+D1 . getMinutes( )+" : "+D1 . getSeconds( )
document . f ormaO.1 . dat . value=D1 , toLocaleSt ring( ) ;
document, formad . vremya. value=TIME1;
setTimeout( 'Timer1( ) ' , 2000)
}
</script>
<body onload=Timer1( ) bgcolor="white" text="blue">
<FORM name="forma01">
<P> :<>
<INPUT type="text" size=40 name="dat">
<P> :<BR>
<INPUT type="text" size=8 narne="vremya">
</form>
</body>
</html>
.
, ,
, i
, , ( name).
.
:
<BODY

Timer"! ( ) D1 Date( ) . ^
TIME1 g e t H o u r s ( ), g e t M i n u t e s ( ) getSeconds( ) {
, . t o L o c a l e S t r i n g ( ]
.

,
, .
, .
. setTimeout

129

. .
,
. ,
. T i m e r 1 ( )
( ), .
() , . 0,2 .
setTimeout ,
, , .
Clockl.htm .


,
. 5.6 , TEXTAREA. . 5.4
.

gnn

-.

... ...

D:\HTML\buttons.htm

. 5.4.

5.6.

<HTML>
<HEAD>

<11> </1:11:1>
</head>

5.

130

5.6 ()
<SCRIPT language="javascript">
var Stroka = " "
function DoFirst(){
document.forma02.textOI .value = " "
}

</script>
<BODY bgcolor="white" text="blue" onload=DoFirst()>
<FORM name="forma02">
<TABLE border=3 cellspacing=0 cellpadding=10>
<TR><TD>&nbsp; <TD rowspan=2>
<TEXTAREA name="text01" rows=5 cols=30x/textarea>
<TRXTD>
<INPUT type=button !="3 "
onClick="document.forma02.textOI.value=Stroka">

<P>
<INPUT type=button !=" "
onClick="document.forma02.textOI.value=' ' ">
</table>
</form>
</body>
</html>
forma02 , . TEXTAREA.
, . , , value,
innerText, , . D o F i r s t ( ) , .
( INPUT button)
ondick.
Stroka, SCRIPT. . , , : .
.
.

Buttons.htm .

131


, .
.
,
.
t h i s ,
.
,
, :
<1 onmouseover="this.style.color='green'
onmouseout="this.style.color='black' ">3 K/h1>
JavaScript, .
, ,
.
, . ,
.
. , ,
(color: blue), ( f o n t - w e i g h t :
bold), (text-decoration: none). :
< style="color: blue; font-weight: bold; text-decoration: none"
href="/." onmouseover="this. style. color=' red'
onmouseout="this.style.color='blue' " > </>

Simplest.htm .


HTML , . ]
, ? , .
HTML, , Web- ,
. ,
. !*
,
, , :
. , , . ;
.

: , >
, ,
.
Web- , . , .
.
. , MS-DOS
, WWW . , .
. , , ,
.
. , 23 .
: .
Internet Explorer 3.0:
, Web-.

133

HTML , .
, .
, . ,
: .
: ,
(. 6.1,).
.
, . ,
, - 1:4
, - .
, , . , . , .
.

britannlca'.com

Web Directory
Arts & Entertainment
Movies. TV. Music...

Recreation & Travel


Food. Outdoors. Humor...

Autos
Classic. Dealers.
Manufacturers...

Reference
Maps. Education.
Libraries...

Business & Finance


Industries. Jobs. Investing

Regional
US. Canada. UK. Europe.,

Computers
Software. Hardware,
Graphics...

Science
Biology. Psychology.
Physics...

. 6.1. :
; 5 Alta Vista

.
. , . ,
. ,
: ,
640x480 .
, , . . ,

6. ;

134

.
.
, , i
.
- . ,
, : ,
, . . ;
- (navy):
, , :
(, , ). ,
.
,
. *
. !
. 6.1,6, , .
,
.
:
, Web-,
. .

,
. <
b o r d e r , cellspacing cellpadding, !
. :
<TABLE

border=4

cellspacing=3

cellpadding=10>

<TR><TD 1="11"> 2
</table>

, , . 6.2.

. 6.2.

. , ,
.
, -. -

135

, , border.
:
<TABLE border=0>
<TRXTD><H3>A03T <1> </1></>
<TD><IMG src="treug1.gif">
</table>
, , , . 6.3. Web-.


. 6.3.


.
. 250x250 :
<TABLE border=0 cellspacing=0 cellpadding=0>
<TR><TD><img src="dragon41.jpg" width="125" height="125"x/TD>
<TD><img src="dragon42.jpg" width="125" height="125"x/TD></TR>
<TR><TD><img src="dragon43.jpg" width="125" height="125"x/TD>
<TDximg src="dragon44.jpg" width="125" height="125"x/TDx/TR>
</table>
, . -, border, cellspacing n c e l l p a d d i n g
. , . -, </TD> , : IMG. . 6.4
.
(border=3). ,
.
.
, .
GIF, , , . , .

136

6.

. 6.4.



. TABLE , ;
.
. , *
. 6.5 ,
.
<TABLE border=4 cellspacing=0 width=70%>
<><><>

1</>

<><> 2</b>
<TR><TD rowspan=3 > 1
<> 2
<> 3
<><> 4
<TR><TD colspan=2 11="1"> 5
</table>

ipl

2
3
4

. 6.5.

, rowspai
, . <

137

.
. , , , . , ,
.
.
colspan. TD.
rowspan colspan TD.

. . 6.6. :
<TABLE border=4 cellspacing=0 width=70%>
<> 1</b>
<><> 2</b>
<> 3</>
<TR><TD rowspan=4 !=2> 1
<> 2
<> 3
<> 4
<TRxTD colspan=3 align="center">$4eiiKa 5
</table>
: , (
), rowspan 1.
[

2
3
4
'-
. 6.6.


, ,
.
.
, .
. 6.7. :
<TABLE border=4 cellspacing=0 width=70%>
<TR><TD 1="11"> 1

138

6.

<TD bgcolor="yellow">
<TABLE

border=2>

<><> 2
<>

2-2

<><> 3-2
<> 4-2
</table>

<TR><TD 1="11"> 3-1


<TD bgcolor="yellow">ea 4-1
</table>
2 |, 2-2
3-2 4-21

. 6.7.


HR
Web-. ,
,
. . 6.8 .
,
: size=100 width=2. ,
, ]
, (
. (width=25%)
, .
.

,

[
^

. 6.8.

139


,
.
, CENTER TABLE, :
<CENTER>
<FONT 1=""> <//1:>

<>

<1 border=0>
<TR><TD><FONT size=4 color="maroon">
<>
.<BR>
, <>
, ,<BR>
<Px/font>
<TR><TD><FONT size=4 color="maroon">
<>
<>
<>
.<>
<P></font>
<TRXTD><FONT size=4 color="maroon">
,<BR>
.<BR>
, -<BR>
.<>
<Px/font>
<TR><TD><FONT size=4 color="maroon">
,<BR>
<>
<>
, .<>
<Px/font>
</table>
<HR width=100><HR width=50><HR width=25>
</center>
. BR. , ( FONT) (

140

6.

TABLE) CENTER. ,
:
style="color: maroon"
, ]
.
,
. !
( HR). CENTER.

Table.htm


, HTML-
, .
, , , .
, .
, Web- WAV
( Windows). :
< href="^M# . wav"> </>

, ,
, .
, .
, , HTML-,
.
. , ,
. ,
( ) , . , Windows 95 AVI. , , . ,
, , :
< href="#Mfl .avi"> </>

Web-

141

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

2
f

'

^4

. 6.9. :
; ; ;
2,3,4

. , , , .
, . . .
,
.
, , , .
, . .

142

6.



.
,
.
. , Web

.
. . :
, , ..
,
, . ,
, ,
(Back ).
,
.
?
Web-, , i
HTML-. , ;
Web-
.
. , http: //www. . coir
,
. , Web- ,
. , - ;
Web-, .
, , -
. (. . 6.9)
. , , HI
, (
). , pecypcoi
. ,
, ,
. ,
, , , ,
, . , ( ) . !
, .
.
. 6.10 AOLpress ( America Online) , -Web ( HTML-, ).

Web-

143

File Edit View : Icpls Browse Window Help

. 6.10. AOLpress

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

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

144

6.

? -, ?
HTML (, 1997),
, , , Web-
HTML,
. Web-, .
, . , HTML Paint !
. Web. , . , !
Web-, ( ;
) .
, .
- .
: , , .
( "silver" ) . Wingdings.
,
Windows. , : .
: , (
). ,
. : ,
, Internet Explorer
Windows. ( ) : Print Screen
.

(border=0): .
,
(. 6.11). (, ) .
(,
, , ),
HTML- .

Web-

145

. 6.11.

.
-,
, .
( ) GIF.
:
( ) . , :
, , .
- ():
<TABLE align="center" border=5 cellspacing=0 cellpadding=3>
<TR><TD background="set/<a. gif'XA href="knigi. htm">
<IMG src="mybooks.gif" alt="MY BOOKS" border=0 width=181 height=31></a>
</table>
2x2 (. 6.12,).
Setka.gif. -
,
(. 6.12,6). TD - Mybooks.gif, . .
-
. . , , .

146

6.

.
. -
, . .

. 6.12. : - ( 800%);
6

, . : , !
, . . . ,
, - ,
( HTML), ,
, . ,
. .
. , , , .
, ,
, . .
.
( ,
. .).
,
.
.
, .
JPG.

MS Photo Editor ( MS Office).
JPG- . - , . , .
100% 80%,
. 60-
. : High
Color True Color.

Web-

147

.
,
(. . 3.15). ,
() .
, ,
. , ( ).
, .
CuteFTP .
, .
, , .
.
,
(, ). .


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


, ( ) . . :
(Save As),
GIF, JPG PNG.
PhotoShop 5.x Adobe
Microsoft Photo Editor. ,
, , Gif Construction Set for Windows 95,
Alchemy Mindworks (. ). ,
, , , , MS Paint.
HTML- GIF (Graphic Interchange Format). 8 , 256 . () . GIF-
,
. , . ,
256 , . , .

149

8- , . , ,
. GIF-: , . ,
- .
,
, . 1, 5, 9 . ., 2, 6,10 . ., ,
. ,
.
,
, .
GIF . . ,

, .
GIF . GIF89a .
HEADER .
PLAIN TEXT .
IMAGE , GIF. .
CONTROL
,
.
APPLICATION .
COMMENT . GIF.
LOOP
. .
JPEG
(JPG), Join Photographic Experts
Group. 24- , .
.
PNG (Portable
Network Graphics). GIF.

150

7.

8-, 24-
. , . -
, . 24-
,
( 0 100). , .

HTML-
HTML-, , . , , .
- ,
. ,
. '
.
.
. , -
. , , , , . , . ,
.
, .
( ),
, - ( ).
.
, , .
() , .
, ,
.
.
.
. , , , .
, .
. , , . .
. Web-. . 7.1

HTML-

151

, .

. 7.1.

, .
. 7.2 . . Paint
, > /. , , . .
, . JPG GIF.

. 7.2. : ; ,
; , ; ,

. 7.3 , .
, Web, . ,

152

7.

.
,
, .

. 7.3.

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

Graphics.htm .

GIF PNG-
, , ,
GIF . . , , . ,
.
. ,
. 7.4 MS Photo Editor. , , Set Transparent
Color ( ). ,

GIF- PNG-

153

, . ,
. , , .

. 7.4. MS Photo Editor

. 7.5 Web- Graphics.htm, : .


GIF- ,
, .
.;:.:,,. L.,.:. /....-.:;...:.:..;:-.;.......;:::::'^...;.;.::;..::.::.:;$;vv*, v:;:-. :;::;:::;>;.;;::; --.' ::'?;:::':.-\*\;..?.;..

. 7.5.

MS Photo Editor
PNG. . 7.4 , . 24-
. ,
.

154

7.

Gif Construction Set



() GIF-. , .
, Gif Construction Set (GCS) Windows 9x, . . . 7.6 GCS GIF-.
( IMAGE)
.

File Edit Block Help


Viev^j Insert |

Edit

} Delele^J Manage [

HEADER GIF89a Screen (640 x 480)


CONTROL
IMAGE Sailboat 160 x 100, 256 colours
CONTROL
IMAGE Waterfall 160 x 120,256 colours
CONTROL
IMAGE Zoe 160 x 100, 256 colours
CONTROL
PLAIN TEXT The Alchemy Mindworks Sound and
CONTROL
PLAIN TEXT The Alchemy Mindworks Sound and
CONTROL
PLAIN TEXT The Alchemy Mindworks Sound and
CONTROL
IMAGE Logo 320 x 200,256 colours
COMMENT-
COMMENT The Graphics and Sound CD-ROM Vo

GIF Construction
Set (32-bit)i.OP :
UNREGISTERED.:
COPY (patch3) : :

. 7.6. Gif Construction Set

, .
. View
Esc .
. . 7.7 ,
Insert;^ , (.
).
. ,
Edit
.
.
Delete

155

Gif Construction Set

Mmage
Control
Cornment
Plain Text';
Loop
Cancel;

. 7.7. GIF-
1

CONTROL
UUIN i . Manage;:!

' . 7.8.

: Control blocks
. Insert before selected irnageW
Jnseffwriere required
ff' Set all existing controls

CONTROL
MAGE Sailboat 160 100, 256 colours
CONTROL
MAGE Waterfall 160 x 120, 256 colours

Qfs I et e sete ct e d eqnt re I s

MAGE Ray trace 160 x 120,256 colours


CONTROL
MAGE Zoe 160 x 100, 256 colours
; Image blocks

CONTROL
MAGE Logo 320 x 200, 256 colours

Select All;

: :

: Clearai|:

View:

. 7.8. Manage

, .
Insert before selected images. CONTROL
. ,
CONTROL. .
Insert where required selected images. CONTROL , CONTROL . ,
.

7.

156


. : , , .
Set all existing controls.
. .
1. CONTROL Block Management.
2.
Apply.
3. Edit Control Block .
4. Block Management.
Delete selected controls. .
Image blocks .
CONTROL .
Select All CONTROL Block
Management. Clear All CONTROL.
View GIF-, Block Management.
About

- .

; ( . . 7.9 Setup.
HIM ;.;..-..... J , . .

|;7 Display interlace

Dither contrast: gj 20
W Check animations
p; Write THN thumbnail

:.';';.' "Ditherbrightness: [|o


Maximum blocks: jj| 1024

P' Identify: files ;


17 Adtl controls for drop

216 colours/Netscape
16 colours
32 colours
4 colours
128 colours

"3-

Interlace delay (msec): |^j 4

Edit vjew mgde ba


| Light grey

jftware and received your key word, entw your name in the field sejow
:ipt. Click on Accept. A dialog will appear asking you to enter yt ur key .

256 colours
256 colours with grey
256-level grey scale

. 7.9. GCS

Gif Construction Set

157

Display interlace.
.
Draw frame guides.
.
,
.
Use image offsets.
,
GIF-.
Dither view background. , 256 . .
True transparency. .
, High Color True Color.
Write directory block. , TITLE, , IMAGE .
.
Adjust header on save.
.
Check animations. GIF-, ,
. , .
Add controls for drop. GCS- Drag and Drop (
) .
CONTROL, IMAGE .
Dither contrast Dither brightness.
. - GIF-
. .
M a x i m u m blocks. GIF-. ,
.
Interlace delay. ( )
, ,
.
Default palette. . . 7.9 .
Edit view mode background. .

158

7.

. . 7.10 . ,
Edit. (Screen width) (Screen depth) , . ,
, .
B a c k g r o u n d .
, GIF- . Global palette GIF-. . ,
. Save .
,
GIF-.

Screen width: 640


Screen depth::
Background:

Palette
F Global palette
Sorted aalette

. 7.10. HEADER

, . 7.11. Image left Image top


. Interlaced . Palette
.
Block title .
GCS GIF- . V i e w
. (edit view mode).
. GCS
. CONTROL IMAGE,
.

159

Gif Construction Set

Image

image Jeff;- J^f 400

||

;>:Bioci< title :
Ray trace

. 7.11. IMAGE

. 7.12. ,
( ) .
. Transparent colour
, .
, . ,
. , , ,
. , 256 .
. , . , .
Delay ( )
. Remove by ,
, . ,
. :
Nothing ;
Leave as is ;
Background ;
Previous image .

160

7.
\ Control Block

7 ffrarisjiarent coioutj
(7 V^ait for user input
100

.Delay:
:

1/100ths of a second

:- ;;Remove :by; ]Leave as is

jj .'".;'.::';;

Set Remove By to Background for transparent


animated GIF files,
:

. 7.12. CONTROL

GIF- WWW Nothing


Background.
CONTROL: Set
Remove by to Background for transparent animated GIF files. : Remove by Background
GIF-. ,
.
, GIF-
. .
1. Block Management Manage.
2. Select All.
3. Set all existing controls Control blocks Apply.
4. Edit Control Block Transparent Colour
, .
5. .

, Remove by N o t h i n g . .
.
. 7.13 .
, , .
. . 7.14

GIF-.

161

Gif Construction Set


Edit Plain trut
Display lent:

location.

,
GIF-!

:
:

:Gridwide;:(fj

Grid deep;
: Cell wide: |
j
| 8
- Cell deep; ril 21
Foreground;
:

. Back pround|'|215_

)rmat :

/iew .

'&

. 7.13. PLAIN TEXT

. , . ,
GIF-: . . ,
, . LOOP , .
If.*t loop Slock
I The; loop; block is only v^v ; :
! 'Netscape:Navigator2,0:orbe!ier, At present,;
Netscape:ignores^ the iteratiotvioounter. S-;;;;:;
:l(6ratiotis::::

. 7.14. LOOP

, . 7.14, , LOOP Netscape 2.0 . ,


Web- , ? Web-, . ,

162

7.

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

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

7 N

I ! 1 ITI

If

I1

. 7.15. : ;
; ;
, ,


, .

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

163

, , .
(. 7.15, -). ,
, , 90 , , , , .
,
. ,
.

. :
. ,
.
. , .
. . ,
( ).
BMP, GIF, JPG, PCX, PNG.
. 7.16 , ,
,
. , , .
.

. 7.16.


. ,
.

7.

164

Paint : ,
. .

Graphics.htm .

GIF-
, GIF-.
Gif Construction Set. .
1. File > New.
HEADER.
2. LOOP, ,
(). Insert, Loop.
. Edit .
3. IMAGE. Insert,
Image , .
.
, . 7.17.
. :

D Use a local palette for this image ;


Use a local grey palette for this image ;
D Remap this image to the global palette ;
Use this image as the global palette .
4. . .
.
5. CONTROL.
Manage. Block Management (. . 7.8) Select All.
Insert where required Apply.
Edit Control Block (. . 7.12) , ( ) Remove by.
Gif Construction Set. .

165

The'palette of the image you have/imported does


match the global palette for this file: You can: : .
*~ Use a local palette for this image
f~ Use ajocal palette for this: Image
:

:{:,

^ ! l.!!??.jM?i?!!^ V
Qther this iriiage to the global palette
Use Jhis image : as the : alpbal palette;: : :: : : : ::; : ; : ;
Use it as it is (may introduce colour shifts).
::

:
:

Use-this selection tor subsequent images'


Help ::]:

OK

. 7.17.

6. . View
GCS. , (50-1000).
GIF- GCS. ,

.


, . ,
. . , . ,
, . , , , . , ,
. ,
, .
. ,
.

106

'

7.

,
.
.
. Paint :
(. 7.18, ). 4:1 6:1
( Ctrl+G). , .
. , , .
.
, . ,
, , , , . .
. ,
. , , .
,
. .
, ,
(. 7.18, -). , 1:1 .
100x100 .

. 7.18. ( 4:1):
; , ,

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

Web-

167

. . 7.19 , .

. 7.19. ,

Web- Graphics.htm
.

Web-
Web- , . ,

, .
, , . , Web-
( !) , .
, .
, , . , , ,
. , ,
. GIF-. , . , .
. 7.20. .
,
. Paint
Ctrt+E.
.
, .
,

7.

168

.
.

. 7.20.
. 7.21 postbox.gif, .
16 65x135 .
D

. 7.21. postbox.gif
,
, Web- :
<> </>
<ADDRESS><A href-"'.. " >
<IMG src="postbox.gif" width="65" height="735"x/a></address>
ADDRESS ,
IMG ,
.

Web- Graphics.htm .

169

. Photo Morph North Coast Software, , .


. : . , - . , , . ,
, , ,
. . , .
, . ,
. . , , .
. 7.22 .
. JPG.

1 rmiif'h tiltw

Create Animation

Hide Window

2 \1 2 I

. 7.22. PhotoMorph


(. 7.23). ,

170

7.

( AVI).

Project Editor. . 7.24
.

. 7.23.

. 7.24.

Create Animation .
,
, , .
( 1
, .
Web- (.
6) GIF-.
,
, ()
. ,
.

GIF
Gif Construction Set
AVI () GIF-.
File > Movie to GIF, . -

Microsoft Office 2000

, . 7.25.
GIF-. Dither to 256-colour orthogonal palette Remap to 256-colour orthogonal
palette. Loop .
. , , , . ,
Setup. , GIF-. ,
.

: The dithering and remapping :


;
ns can take a long time for movies
umber :Qf frames or large image
r to tletscape: 21 6-colpur .palette;^; ;i[
rto 256-colour orthogonal palettei
p to Netscape 21-1||||||
to 256-colour orthoonal paletfe

1:s:

OK
. 7.25. GIF-

Microsoft
Office 2000
, MS Office 2000,
. ,
. MS Office ,
. ,
.
MS Office: , , ,
. . Web- , ,
, , , . . 7.26 , MS Office 2000.
.

7.

172

^^^

<

. 7.26. , MS Office

MS Office (Access, Excel, Power Point, Word) ,


. . 7.27,
:
. : , , , . .
,
.
, , , , .
.
. . 7.28 , .

11

1
:-;;[^ {) () jdj. \
= 0
1
1
>|
Word Art



*1

>
|
:

^^

. 7.27.

MS Office '

,
, !
. 7.29. ,
.

173

Microsoft Office 2000


r^nwijofcsrfc. ." ' .'.': ! '.';'.":-.-"
fj

? :' > .;

' :;>8;;:,

:
:

/-~' - ::; ;*
:

i ; ; :: :: ;:.;:.
2 nsb-SHKHHs ^ -': ; ':

sl

> -

flj ClfAviiflb ':15>.!1!

.
: :

>

-:

'.;';

^ - Cft

'
:

' ^
1
[If.

v $ ^ ,:.: . . i i ::;:?!::!^;:'
'Cj : :: : : ;

^k ..: ; '"':: ''.


^L
^ ' : ; :

"
:

<.

;;

!
!0
g

. 7.28.

: : :>

>'
:
4
- >'>
:

>
>

.:::

>
' >
'; :!>

DO

:
. 7.29. : ; ;
; ; ; -;
;

,
. MS Office . , , .
(. . 7.27), , .
. 7.30 ,
.

7.

174

". .

." v'v'':':. : :

' ;:;

.'.-22'- ::-:'.
144:

::
:

...,:;

& -283. v:'::: ;.:..;-. ;::::


^
:. 36.00

| .:.

...

J.lV
pjf :

:;

. 7.30. : ; ;
; ; ;

, . 7.30, . ,
, . , , . 7.30, -.
. ,
. 7.30, . , .
.
, , .
. !

.
, , ;

(. 7.31).
, . MS Office . :
,
. ,
, '
: , , . Bci
. , ]
,
.

WordArt

175

-
g
(Jf
(;
Soft'
:|

= -I

i]

I
. 7.31.

, . , .
, .
Web? , . , . ,
, , , ,
.
(. WordArt).

, . .

. ,
GIF-.

WordArt
, MS
Office 2000 Web-, WordArt. , . 7.32.

7.

176

WordArt
|

WordArt
WordArt
WordArt
(*)'.-
,"] WordArt
WordArt
WordArt
WordArt
. 7.32. WordArt

WordArt
WordArt .
. 7.33.

OK

\0

. 7.33.

177

WordArt

Web-
, , WordArt
.
WordArt, ,
. 7.34. .
, .
WoiuAil
;.

1:

. 7.34.

,
WordArt. WordArt. ,
(. 7.35).

. 7.35.

. , . 7.36.
,
. WordArt ,
, , . .

7.

178

. 7.36. WordArt

. i
,
. ,
.
, WordArt, (
. . WordArt
, Print Screen
( ) . -
. .
. MS Office.
WordArt m
(. 7.37). !
, ,
. , , 360. !
. .

, !
Gif Construction Set .
, .
, ,
.
. :
0,1-0,2 , 10-15 .
, WordArt, Web- Graphics.htr
.

WordArt .
, , , , i
. . 7.38
.

179

MS Image Composer


;.
I

.''

'.';.; ' . ' . ' '.'

|4,"3

p ;:

W'

! .

|100%

.. ~ &'
*

:

'. 7.37. WordArt

. 7.38. WordArt: a ; 6
-; ; ;
; ;

MS Image Composer
MS Image Composer (. 7.39) Web- MS Front Page 2000.
.
. , , . File > Composition Setup.
.

180

7.

; Microsoft (mage Compa&er


""I Fife

Edit

View

insert

Took

Hefc

Hiufj-liis

^1^:||:;^:1:1:^1

Mesa

Mosaic

Negative

Neon Glow

Paint Daubs

. 7.39. Image Composer

Insert Image File.


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

(. 7.40). ,
.

. 7.40.

181

Microsoft GIF Animator

.
Ctrl, .
Select All ( ).
Flatten Selection.
. ,
, .
(. . 7.39).
, . ,
Apply () , .
, Edit > Undo. ,
.
Selection. , :
.
Arrange. . , , . .
Cutout. . ,
, Stencil (). (. 7.41).
Text. .
: , , , .
Shapes. : , , . . .

. 7.41.

Paint. : ,
, , , .
, .
: .
Effects. . Adobe Photoshop . . , ,

182

7.

, , , . . 7.3
.

Effects. , . -
: , .
Zoom. .

Pan. .
Color Tuning. .

Microsoft GIF Animator

:
MS Image Composer. . 7.42. ]
Gif Construction Set. !
,
: AVI GIF.
'

..... .....

'

ji
':

': Animation Width | I


Kr

11
. 7.42. Microsoft GIF Animator

183

Microsoft GIF Animator

AVI, , .
GIF ,
Save. .
GIF, ,
Insert. (. 7.42).
Looping () Repeat Forever ( )
.
Image
HTML. . , :
Transparent Color ( ), . Duration () , (
). , Undraw Method . Leave
. Restore Background .
Preview. , (. 7.43).

. 7.43.

,
,
, HTML-.
, ,
MS-DOS.
, , , ( )
HTML.
, Web-. ,
HTML. , , .
, Web- , , .
: , , .
:
, , . . Windows, ,
, .

HoTMetaL PRO 5.0

HoTMetaL
. , .
Windows MS-DOS. Windows .
- HTML, , ,
, .
SoftQuad . . 8.1 HoTMetaL PRO 5.0. . ,

185

HoTMetaL PRO 5.0

, .
Web-. , .
. , ,
. ,
.
& HoTMetaL PRO (Pagel him)
.- .' -..l' - : l ' "

1 ffi'

;11!
:

-.':
ilPatagtaph

I; " gill
Ullf Courier New

:.1:15';r

"
S!"j
IB )
: :
-

<

I'MJ

. 8.1. HoTMetaL PRO 5.0

Recource Manager. ,
, .
Previouus Document Next Document ( ). .
, ,
.
Spelling ( ). , . 8.2. . toolbar, .
. , (Add to Dictionary), (Replace),
(Next), (Set
Restriction).

8.

186
;::

/| |

. ,
1
1

Next
.

gioouiar
October
outboard
tabular
tollbar
topiary
tubular

Replace

[,

^dd to Dictionary

ignore

Restrict

Replace with: [toolbar


Misspelled word: toolbar

\:

'''"

. .:;

, - :

. 8.2.

, ;
, Tools > Thesaurus. ,
, . 8.3. assign. ,
, . , !
( ) ( A n t o n y m s ) ,
(Related Words) , (Contrasted Words).
.
, , . , .

Word:
:

assign

1)verb

admeasure
allocate
allot
allow
apportion
give
lot
mete out

4 meanings
:

to give as one's share, portion, role, or place

Next Meaning
Previous Meaning
Get Word
^ Replace
Cancel

Replace with:

. 8..

HoTMetaL PRO 5.0

187

HoTMetaL PRO .
. -, , ,
, .
, Windows. -,
HTML .
Web-, . ,
HTML- : , ,
. . ,
. , .
:
, ?
,
, : , , . .
. .
, , Word. , , . ,
,
. : , , , . . ,
, : , , ,
. ,
, , . -'
.
.
:
FONT, , I, L) .
.
, .
- ? , ,
Windows.
HTML Source ( HTML).
: ,
, , .
.
Tags On. ,
(. . 8.1).

188

8. ;

WYSIWYG view. : , .
.
WYSIWYG Frames view. .
Browse (). ,
.
Insert Element ( ). ,
. 8.4. Web-.
,
,

Recent: J M i v a

HTML

ABBR
ACRONYM
APPLET

BASEFONT
BDO
BIG
BUNK
BR
CITE
CODE

Structure: IndL
Structure: Indi..
Embed Object..
Char. Format:..
Char. Format:..
Char. Format:..
Char. Format:..
Char. Format:..
Layout: Force..
Char. Format:..
Char. Format:..

. 8.4.

Insert Element W i n d o w ( ). !
, . 8.4.

Remove Tags ( ). . .
(, ) . . ( ) Del,
. Backspace, ,

Check HTML ( HTML). .

Check Accessibility ( ).
. , -
, alt. ,
.

189

HoTMetaL PRO 5.0

Insert Heading ( ). 1...6.


. 8.5
( FONT ,
). ,
. , Insert Element ( )
(. . 8.4). Select
Element ( ) . Element
Attributes ( ) . . 8.6. , .

. 8.5,

. 8.6. 2

Attribute Inspector. .
Insert Paragraph ( ). .
Insert Line Break ( ). BR.
Insert Horisontal Rule ( ).
HR.

8.

190

18! isil.

jj

Emphasis, Strong, TeleType, Citation (, , , ). .


3. ,
.
Italic, Bold, Underline (, , ).
|
|
|
| (. 3).
Text Color ( ). FONT
.
, . 8.7. ,
color.

" :

. 8.7.

Increase Text Size, Decrease Text Size ( ,


ppl ). , , FONT, size.

-v

Align Left, Align Center, Align Right ( , , ). , , .


a l i g n .
Indent (). .
Special Characters (). (. 8.8) . . 2.

HoTMetaL PRO 5.0

'

aiilp^

191

illil

. 8.8. ( )

Insert > Symbols ,


. 8.9. .

. 8.9.

Billeted List ( ). . : UL LI.


LI, Enter . U L ,
Enter, .
Numbered List ( ). Sill .
Insert Definition List ( ).
, DL .
Insert Definition Type ( ). DT
.
Insert Definition Data ( ). DD
.
Insert Preformatted ( ).
PRE ,
.
Block Quote (). BLOCKQUOTE .
Address (). ADDRESS .
Insert Comment ( ). COMMENT
.
Insert Image ( ). IMG g,:
;| .
, . 8.10.
,
Image File. URL,
Choose. , URL.

192

8.

lilllb

::hort

description of image

. 8.10.

Insert Link ( ).
. , .
Insert Bookmark ( ).
name ( ). , Web-, . .
, ,
.
- .
Insert Link to Bookmark ( ).
h r e f . , ,
. ( Insert Bookmark),
, . : , , , ,
, .
, ,
.
Insert Table ( ).
.
. 8.11. 3
, . , . 8.12.
, TABLE.
.
. . ,
.

193

HoTMetaL PRO 5.0


Inseit Table

: ' J 5 0

8.11.

. 8.12.

, .
Forms.
Insert Form ( ). FORM (. 4).
Insert Text Box ( ).
INPUT type="text".
Insert Password Entry ( ).
INPUT type="password".
Insert Check Box ( ). ,
INPUT type="checkbox".
Insert Option Button ( ).
( ), INPUT
type="radio".

194

8.
Insert Submit Button ( ).
, INPUT
type="submit".
Insert Reset Button ( ).
, INPUT type="reset".
Insert Image Button ( ).
, INPUT type="image".

Insert Push Button ( ). .


Insert File Upload ( ).
, INPUT t y p e = " f i l e " .
Insert Hidden Input ( ). , INPUT type="hidden".
Insert List Box ( ). ,
: <SELECT size=3>.
Insert Dropdown Box ( ). , : <SELECT size=1>.
Insert Text Area ( ).
, ( TEXTAREA rows cols).
Insert Java Applet ( Java-).
. APPLET .
Insert ActiveX Control ( ActiveX).
ActiveX. OBJECT .

, , , , . . , , Format > CSS Styles


. . 8.13 , TD. ( ). ,
, .
HoTMetaL.
, . ,
. .
.
, -: &Ag rave;,
S A a c u t e ; . .

Microsoft Word 2000

195

: . , , ,
. , . , HoTMetaL ,
, , ,
.
Cascading Style Sheet Editor

jYou are now creating


ja new rule to specify j
lthe style for this
I element. If you change!
lrules before setting
!
jany properties, your

. 8.13.

Web- Spec.htm HoTMetaL.

Microsoft Word 2000


Microsoft , , .
, . MS Office 2000
(Access, Excel, Power Point, Word) Web-

196

8.

. .
, .
MS Word 2000, , .
HTML- Word
Web-. .
> ,
Web-. Web-. Webpage.wiz.
. 8.14. , Web-
. HTML-.
Web-
<> . V/cb-ysna

. 8.14. Web-

, . 8.15. . , 6:
.
(. 8.16) Web- .
,
. , . 8.17. Web- ( ,
).

Microsoft Word 2000

197

|'

Yeb- * > . . >

,
'..3ZT

':..'."

. 8.15. Web-
Web-

|
|
|
|
|
|

;||||||1||- ' : | '^:1^;

.-
^ .,; |
|
|
. Web-yiflt . -.
""-'"': "" : '.

I "" :
!
1
2

. 8.16. Web-

1 1

198

8.
default htm - Microsoft Word
i l,>'it.r..i l,Hi; l.;,;l.it.ivi ff'Opbjgl

I (("|>

: <= 1 ; <l ; tlu JS ^;


1
1
2
3
4

ii

1
2
3_

i
1
I ,
I
I ,

;
|:,
- 1^3"
"",

. 8.17. Word 2000 Web-

, . , *
. , Web-, , , .
.
, htm.
.
> HTML. Web- . ,
, :

charset=windows-1251
, . HTML, ,
. , . Word, .
. , HTML.
Web- Web-,
html.dot.
, .

Microsoft FrontPage Express

199

, Web- Word. , HTML,


Word . ,
, , , .
> .
Word Web. ,
.
. , , : , , , .
.
HTML- Web.
:
, , (home page),
.

Microsoft FrontPage Express


MS FrontPage
Express. Windows, . ,
. fpxpress.exe . , , :
C:\Program Files\Microsoft FrontPage Express\BIN\FPXPRESS.EXE

. ,
, .
- , , , . : (. 8.18).
, .
> HTML. ,
. , , . 8.1.
8.1. Web-
<html>
<head>
<meta http-equiv="Content-Type"

8.

200
!;,|4

-,-,,,,-.,

Illllllif

B|!li|lia ^

| 3 1 | Times New Roman


&^^

-JMlxl

^ & ' S= 3S S

''..'....'...'.

;.!......'....,..',.'.':': .-.';.*.

'-:-:-,o- -.., -,;.,, ......;...,,,..;..;.: :.;.:.;,-...;,y.,;,. - -..

. 8.18. FrontPage Express:

8.1 ()
content=" text/html;

charset=iso-8859-1">

<meta name="GENERATOR" content="Microsoft FrontPage Express 2 . 0 " >


</head>
<body bgcolor="#FFFFFF">
<p>&nbsp;</p>

</body>
</html>
. . ISO-8859-1 Windows- 1251.
. HTML, 8.2. FrontPage Express.
, .
8.2. Web-

<html>

<head>
<meta http-equiv= "Content-Type"
content="text/html; charset=windows-1251 ">
<meta name="GENERATOR" content="Microsoft FrontPage Express 2,0">
<1> 1</title>

</head>
<body bgcolor="#FFFFFF">

Microsoft FrontPage 2000

201

<p>&nbsp;
<h2>3arcmoBCK</h2>
<> . </>
</body>
</html>
, . ,
. , .
FrontPage Express , : HTML . . > .
GIF JPG.
, , ,
. .

. .
.
Web- , . , .
Web-
, , , (, ).
.
mai'lto:. ( U R L ) . : . ,
, .

Microsoft FrontPage 2000


, FrontPage 2000
. , 1.
, HoTMetaL PRO,
.
:
Insert. , .
1

: Microsoft Frontpage
2000: Microsoft Frontpage 2000.

202

8.

FrontPage MS Office, . ,
. . ,
(. 8.19) default font (
).
, Web- . , .

Pile Ldit Vic-w iiiitrl t'wHnaf : lte Trans-;

jit font)

piNormal

|
|

1 2

. 8.19. FrontPage 2000

, : Normal (), HTML Preview ( ). 1


. \
, ,
. , , Normal , *
Preview , ,
: .
( . 8.19)
, Word
( !
), HTML
colspan rowspan.

203

Microsoft FrontPage 2000

, 6, ,
,
, (, , ). ,
. ,
border=0.
Tables .
Draw Table ( ). ,
. ,
, , . , .
Eraser (). , ,
( ).
Insert Rows, Insert Columns ( , ). ( ) ( ). .
Delete Cells ( ). . ( ), ( ), , .
Merge Cells ( ).
, .
Split Cells ( ). (
), .
(. 8.20).
, (Split into columns) (Split into rows). . , ,
.

. 8.20.

Align Top, Align Vertically, Align Bottom.


:
, , .

204

8.

Distribute Rows Evenly.


. , .
Distribute Columns Evenly. , .
Fill Color ( ). .
AutoFit. .
, : , .
.
, .
,
File > New > Page, . Frames Pages
Nested Hierarchy, (. 8.21).
,
Frames Page HTML.

. 8.21.

.
New Page ( ),
,
Set Initial Page. . 8.21 , .
, , . , , -

Netscape Composer

205

: ,
.
FrontPage 2000 . File > New > Page
Style Sheets .
CSS, .
Style (), .
Modify,
Format. . , ,
, .
. -, ,
. -, , , .
, ,
.
CSS Web-, FrontPage 2000, Format > Style Sheet Links. CSS-,
LINK . .
Web-.
File > New > Web .
( File > Open Web).
Web- Corporate Presence Wizard, . , .
Web-.
Hyperlinks (. 8.22). ()
, , index.htm,
. .
, ,
.

Netscape Composer
Netscape Communicator
(. Netscape Communicator 1).
: ( ) ( ).
, .
,
. . 8.23.

206

8.

W*S

1- _
i+1- images ;
feedbac
index.hti
news. hti

. 8.22.

;::::..:v;;& .

. 8.23. Netscape Composer

>;}-iJ

Netscape Composer

207

Netscape Composer
, . HTML . ,
. .
,
() , . (
) HTML .
. , Netscape Composer , .
, .
__
. (
mm , . .).
. . , .
, .
.
.
1

. ,
HTML, :
<FONT SIZE=+2>
. .
, .
. , . ,
. , . ,
, , ...
, . .
1 , . HTML I , , , . , BLOCKQUOTE, . ,
. ! :

208

8.

<BLOCKQUOTE>
<BLOCKQUOTE>
<> </>
</BLOCKQUOTE>
</BLOCKQUOTE>

i|jgp| . .
, .
. , , . Netscape Composer .
BLOCKQUOTE ,
, .


dec hex dec hex dec hex dec hex dec hex dec hex dec hex dec hex
0 00 32 20 64 40
96 60 128 80
160 92 224 EO
1 01 33 21 65 41
97 61
129 81
161 1 193 Cl 225 El
2
3
4
5

02
03
04
05

8
9

08

06
07
09

1C

12

13

00

14

15
16
17
18

OF

19
20

13
14
15
16
17

21
22
23
24
25

26
27
28
29
30

31

10

11

12

18
19
1
1
1C
ID
IE
IF

3-1
35
36
37
38
39
40
41
42
43
44
45
4G
47
48
49
50
51
52

22

23
24
25
26
27
28
29
2A
2
2C
2D
2E
2F
30
31

32
33

53

34
35

54

36

55

37
38
39

56
57
58
59
60
61
62
63

:
3D

3F

66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85

42.
43
44
45
46
47
48
49
4
4
4
4D
4
4F

86
87

56
57
58
59
5
5

88

89
90

91
92
93
94
95

52

98 62.
99 63
100 64
101 65
102 66
103 67
104 68
105 69
106 6
107 6
108 6
109 60
110 6
111 6F
112 70
113 71
114 72

53
54

115 73
116 74

55

117
118
119
120
121
122.
12.3
124
125
126
127

50
51

5
5D
5
5F

130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147

148

75
76
77

149
150

78

152

79

153

154
155
156
157
158
159

7
7
7D
7
7F

151

82
83
84
85
86
87
88
89
8
8
8

8D
8
8F

90
91
92
93
94
95
96
97
98
99
9
9
9
9D
9
9F

162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188

2
A3
4
AS
6
7
8
9

AD

AF

1
2

4
5
6
7
8
9

189 BD
190 BE
191 BF

194

195
196 4
197 5
198
199
200
201
202
203

6
7
8
9

206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223

CF
DO
D1
D2
D3
D4
D5
D6
D7
D8
D9
DA
DB
DC
DD
DE
DF

204
205 CD

226
227
228
229
230
231
232
233
234
235
236

237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255

E2
E3
E4
E5
E6
E7
E8
E9
EA
EB
EC
ED

EF
FO
Fl
F2
F3
F4
F5
6
F7
F8
F9
FA
FB
PC
FD
FE
FF

, . '
CSS2
, .
i n h e r i t
.

, , :
.
:

cm ;
in (2,54 );
mm ;
(1/6 );

pt (1/72 );
.
:
ms ;
s .
, , %.

font-family
: , Web-
.
:

BODY {font-family: Times New Roman, Verdana, Tahoma}

211

font-style
.
:
normal ;
italic, o b l i q u e .

font-variant
.
:
normal ;
s m a l l - c a p s .
:
1, 2 {font-variant: small-caps}

font-weight
() .
:
normal (400);

bold (600 700);

b o l d e r , ;
l i g h t e r , ;
100, 200, 300, 400, 500, 600, 700, 800, 900 - .

font-size
.
:
xx-small, x-small, small, medium, large, x-large, xx-large ;
Npt , ;
N% , ;
larger, s m a l l e r .
:
< style="font-size: 16pt ">

font
, . .

212

f o n t - s t y l e , f o n t variant, font-weight, font-size, line-height, f o n t - f a m i l y . :

caption ();
icon ;
menu ;
messagebox ;
smallcaption ;
s t a t u s b a r .

:
P. iconl {font: icon}


text-indent
.
: .

text-align
.
:

left ;
r i g h t ;
center ;
j u s t i f y .

text-decoration
.
:

;
u n d e r l i n e ;
o v e r l i n e ;
l i n e - t h r o u g h ;
b l i n k ( ).

text-shadow
.
.
.

213

:
:
1 {text-shadow: }


(3 ) :
{text-shadow: 2px 2 green}

letter-spacing
.
:
normal ;
;
a u t o , .
.
:
2 {letter-spacing: 5pt}

line-height
.
:
normal ( 1.0-1.2);
;
( f o n t - s i z e ) ;
font-size.
:
{ line-height: 1.2; font-size: 16pt }
{ line-height: 1 . 4 c m }
{ line-height: 150%; font-size: 10pt }

word-spacing
.
:
normal ;
.

214

text-transform
.
:
;
c a p i t a l i z e ;

u p p e r c a s e ;

lowercase .

white-space
.
:

normal . , , ;
( P R E ) ;
n o w r a p .

direction
.
:
Itr ;

rtl .


list-style-type
.
:

disc ;
c i r c l e ;
s q u a r e ;
d e c i m a l ;
l o w e r - r o m a n (i, v, x...);

upper- roman (I, V, X...)


l o w e r - a l p h a (, , ...);
u p p e r - a l p h a (, , ...).

215
:
LI {list-style-type: lower-alpha}

list-style-image
, .
:
;
(URL) .
:
UL {list-style-image: url(marker.gif)}

list-style-position
.
:
inside ( );
o u t s i d e .

list-style
. list-style-type, l i s t - s t y l e - p o s i t i o n , list-style-image ( ).
:
UL {list-style: circle outside}


display
.
:
table ( TABLE);
table-caption ( CAPTION);
t a b l e - c o l u m n ( COL);
t a b l e - c o l u m n - g r o u p ( COLGROUP);
table-row ( TR);
t a b l e - r o w - g r o u p ( TBODY);
table-header-group ( THEAD);
t a b l e - f o o t e r - g r o u p ( TFOOT);
table-cell ( TD);

216

row-span
, .

column-span
, .

border-collapse
.
:
separate ( );
collapse ( ).

border
.
: , , .
:

hidden ;
dotted ;
dashed ;
solid ;
d o u b l e ;
g roove ;
ridge , groove, ;
inset , ;
outset , inset, -.

TABLE { border: 1px solid blue; }


<TABLE style=border-collapse: collapse; border: solid green; >
<TD style=border: double>

vertical-align
() .
:

;
top ;
m i d d l e ;
bottom ;
b a s e l i n e .

217

table-layout
.
:
auto ;

f i x e d .


width
.
:
auto ;

min-width max-width
.
:
auto ;

height
.
:
auto ;
;
.

min-height max-height
.
:
auto ;

218

position
.
:
normal ;
relative , ;
a b s o l u t e , ;
f i x e d , , .

top, bottom, right, left


, , .
:
auto ;
;

margin-top, margin-right, margin-bottom, margin-left


.
:
auto ;
;
.

margin
.
:

auto ;
;
.
:
{ margin: 12px 12 12 12 }

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


padding-left
.

219
:

auto ;
;
.

padding
.
:
auto ;
;
.
:
OL { padding: 4px 4 4 4 }

border-top-width, border-right-width,
border-bottom-width, border-left-width
.
:
t h i n ;
medium ;
t h i c k ;
.

border-width
.
:
t h i n ;
medium ;
t h i c k ;
.

border-top-color, border-right-color,
border-bottom-color, border-left-color
.

border-color
.

220

border-top-style, border-right-style, border-bottomstyle, border-left-style


.
:

h i d d e n ;
dotted ;
dashed ;
solid ;
d o u b l e ;
groove ;
ridge , groove, ;
inset , ;
outset , inset, -.

border-style
.
, .

border-top
b o r d e r - t o p - w i d t h , b o r d e r - t o p - s t y l e
border-top-color.
:

1 { border-top: thin solid blue }

border-bottom
b o r d e r - b o t t o m - w i d t h , b o r d e r - b o t t o m - s t y l e
border-bottom-color.

border-left
b c r d e r - l e f t - w i d t h , b o r d e r - l e f t - s t y l e
border-left-color.

border-right
border-right-width, border-right-style
border-right-color.

border
b o r d e r - w i d t h , border-style border-color.

221
:
{ border: medium double red }

overflow
, .
:
auto ;
v i s i b l e ,
;
h i d d e n
;
scroll .

float
.
:
;
left ;
r i g h t .
:
IMG { f l o a t : left }

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

clip
.
:
auto ;
, .
:
{ clip: rect(5px, , , 5 ) ; }

222

visibility
.
:
visible ;
h i d d e n .

z-index
. , , .
:
auto , ;
;
.


color
.
:
U { color: red }
{ color: rgb(255,120,120) }

background-color
.
:
transparent ;
.
:
1 { background-color: #9AC159 }

background-image
.
:
;
.
:
TABLE { background-image: url(karandash.gif) }

223

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

BODY { background-image: url(kvadrat.gif); background-repeat: repeat-y; }

background-attachment
, ,
.
:
scroll ;

f i x e d .

background-position
.
( )
, :
0% 0% ;
top left left top 0% 0%;
top, top center c e n t e r top 50% 0%;

r i g h t top top r i g h t 100% 0%;

left, left center center left 0% 50%;

center center c e n t e r 50% 50%;

r i g h t , r i g h t c e n t e r center r i g h t 100% 50%;

bottom le- F t left b o t t o m 0% 100%;

bottom, b o t t o m center center bottom 50% 100%;

bottom right r i g h t bottom 100% 100%.

, , 50%.
:
BODY { background-image: u r K b a n n e r . g i f ) ; background-position: top center }

224

background
. background-color, background-image,
background-repeat, background-attachment background-position.
:
TD { background: url(http://cepBep.com/metal.jpg) }
P { background: url(sphere.gif) gray 50% repeat fixed }


volume
.
:

0-100;
0-100%;
silent ;
x-soft 0 ( );
soft 25;
medium 50;
loud 75;
x-loud 100 ( ).

speak
. ,
.
:
;
normal ;
spell-out .

speech-rate
.
. : x-slow, slow, medium, fast, x - f a s t , f a s t e r , s l o w e r .

pause-before, pause-after
.

225
:
;
speech-rate ( ).

pause
p a u s e - b e f o r e p a u s e - a f t e r .
:
P.golos { pause: 20ms 40ms }

cue-before, cue-after
, .
:
;
(URL) .
:
A.zvuk {cue-before: url(zvuk01.wav); cue-after: url(zvuk02.wav) }

cue
c u e - b e f o r e c u e - a f t e r .
:
A . z v u k {cue: u r l ( z v u k 0 1 .wav) u r l ( z v u k 0 2 . w a v ) } ;
A . z v u k { c u e : u r l ( z v u k 0 1 .wav) } .

play-during
,
.
:
;
auto .
(URL) ;
m i x ( play-du r i n g ) ;
repeat ,
.
:
ADDRESS {play-during: url(golos,wav) mix}

226

azimuth
,
.
(deg) -360deg 360deg :

left-side 270deg;

f a r - l e f t 240deg;

l e f t 320deg;

c e n t e r - l e f t 340deg;

center Odeg;
c e n t e r - r i g h t 20deg;

r i g h t 140deg;

f a r - r i g h t 60deg;

r i g h t - s i d e 90deg;

l e f t w a r d s 20 ;
r i g h t w a r d s 20 ;
b e h i n d , ( 180 ).
:

1 { azimuth: 15deg }
2 { azimuth: center-right}
{ azimuth: center-right behind }

elevation
,
.
(deg) -90deg 90deg :
below -90deg;
level Odeg;
above 90deg;
h i g h e r 10 ;
lower 10 .
:
{ e l e v a t i o n : above }

227


cursor
, .
:
auto ;
d e f a u l t ;
c r o s s h a i r ;
p o i n t e r ;
move ;
-, ne-, nw-, n-, se-, sw-, s-, w-resize . (sw -);
text ;
wait ;
h e l p ;
(URL).
:
{ cursor : pointer url(giper.cur) }

color, background-color
(color) ( b a c k g r o u n d color) , .
:
a c t i v e b o r d e r ;

activecaption ;
a p p w o r k s p a c e ;
b a c k g r o u n d ;
b u t t o n f a c e ;
b u t t o n h i g h l i g h t ( );

b u t t o n t e x t ;
c a p t i o n t e x t ;

graytext ();
h i g h l i g h t ;
h i g h l i g h t t e x t ;
i n a c t i v e b o r d e r ;

228

inactivecaption ;
i n a c t i v e c a p t i o n t e x t ;
i n f o b a c k g r o u n d ;
i n f o t e x t ;
menu ;
m e n u t e x t ;
s c r o l l b a r ;
t h r e e d d a r k s h a d o w ;
th reed face ;
t h r e e d h i g h l i g h t ;
t h r e e d l i g h t s h a d o w ;
th reedshadow ;
w i n d o w ;
w i n d o w f r a m e ;
w i n d o w t e x t .
:
{ color: windowtext; background-color: window }


Web- .
. Start.htm, . Windows, .
Web- ,
. Start.htm .
Web-, , ,
. .
2. HTML 4

() Web- Strukt.htm, .

Spec.htm.

: Color.htm.

3. HTML 4
Web- Text.htm .
Web- Phrase.htm .
Web- Style.htm .
Class.htm
Formats, ess.
List.htm.

Table.htm.

Frame.htm, Frl.htm, Fr2.htm, Fr3.htm


Fr4.htm.

M a i n . h t m , Framel.htm, Ml.htm,
Rightl.htm Right2.htm.
4.

Web- Map.htm Mapl.gif Map2.gif.

Web- Form.htm Gifl.gif, Knopkal.gif.

230
5.

Simple.htm Simple2.htm.

Txtcolor.htm.
setTimeout Clockl.htm.
Buttons.htm.
Two-pict.htm Tb2.htm.
Simplest.htm.
6.

Table.htm ( fonOl.gif, treugl.gif, dragon41.jpg, dragon42.jpg, dragon43.jpg, dragon44.jpg).


7.
' Web- Graphics.htm.

ACME Laboratories

http://www.acme.com

HTML

Alchemy Mindworks

http://www.mindworkshop.com

GIF-
Gif Construction Set

America Online

http://www.aol.com

AOLpress

Microsoft

http://www.microsoft.com

MS Office 2000, MS
Internet Explorer .

Netscape

http://home.netscape.com

Netscape Communicator

North Coast Software

http://www.mv.com/biz/ncs/

PhotoMorph

SoftQuad

http://www.softquad.com

HoTMetaL PRO

W3 Consortium

http://www.w3c.org

HTML,
HTML

Web-

http://www.dipart.com

http://www.piter-press.ru

Web-

http://webcenter.ru/~agonch


A-Z

Access, 172
AOLpress, 142
CGI, 22
CSS2, 210
Drug and Drop, 157
I Jynamic HTML, 36
H-mail, 17
Kudora Pro, 17
Excel, 172
FrontPage 2000, 201
FTP, 17
Gif Construction Set, 154,170
Gopher, 18
High Color, 157
homepage, 26
IloTMetaL, 184
HTML, 14
HTTP, 17
(-, 17
ISO, 37
Java, 36
JavaScript, 36, 115
MIME, 54
Mosaic, 18, 19
MS FrontPage Express, 199
MS Image Composer, 179
MS Photo Editor, 152
MS-DOS, 184
Netscape Composer, 205
Outlook Express, 17
PhotoMorph, 169
PowerPoint, 172
SGML, 37
Tel, 115
telnet, 18
True Color, 157
UNIX, 24
URL, 22,26
VBScript, 36, 115
W3C, 35
Web-, 205
Word, 172
World Wide Web, 18,19

, 64
, 56
, 104
, 172
, 22

, 42
, 17
, 104
, 17,134
, 64
-, 145,150
, 47
, 16
, 154
, 186
, 22,55,103

, 41,57
, 52
, 55
, 78
, 97
, 21
, 44
, 55
, 39
, 53,65
, 39
, 40,50
, 54
, 42
, 103
, 60
, 96
, 94,129
, 29
, 18,22
, 137,167

, 55, 167,170
, 129


, 87
, 43
, 137
, 71
, 162
, 128
, 63
, 41, 97

-, 23
, 26
, 134
, 75
, 21
, 40
, 40
, 75
, 73
, 75
, 75
, 40
, 19
, 119
, 138
, 148
, 144
, 98
, 102
, 224

, 83
, 108
,
, 82
, 128
, 127

, 84, 204
, 84, 204
, 26
, 22
, 52

3
, 32
, 38, 52
, 22, 130
, 32
, 122
, 106
, 59

, 92
, 92, 224
, 92
, 92
, 53
, 140, 225
, 225

233

, 22
, 85,90
, 119

, 59
, 59

, 213
, 213
, 63
, 163
, 75, 99
, 55, 65,67, 205
, 47,194
, 64
, 66
, 18
, 45
, 55
ISO Latin I, 45
Unicode 2.0, 45
Windows, 45
-8, 45
, 46
, 40,93, 191
, 179

Web-, 141
, 164
, 141
, 142
, 37
, 132
, 68
, 218
, 99
, 59
, 27,29,85, 151

, 16
, 138
, 16
, 16
, 16
, 120
, 120
, 119
, 215
Web-, 196
, 181
, 98
, 118
, 213

234

, 102
, 111
, 102
, 42, 73, 74
, 93
-Web, 142
, 47
, 99
, 16
, 135
, 30
, 140
, 61

-
, 108
, 94
, 214
, 64,210
, 37

, 99
, 99
, 99
, 221
, 136

, 97
, 172
, 97
, 104
, 103
, 174
, 91
, 123
, 162

, 120
, 118
, 120
, 120
, 120
, 120
, 185
, 163
, 104
, 108

, 148

, 175

, 73
, 29
, 73

-, 145
, 105
, 105
, 105
, 121
, 108
, 106, 108
, 222

, 119
, 119
, 119
, 119
, 61
, 187
, 129
, 96
, 59
, 106
, 85
, 58
, 56
, 227
, 56
, 43
, 202
, 118
, 214
, 142
, 185
, 115
, 150,152,157,174
, 30

telnet, 18
, 17
, 17
, 53
, 99

, 182
, 221
, 30,60,211
, 132
, 149
, 57

(|, 114
, 97
, 144
, 76, 78,132
, 85
, 194
, 22

, 142, 184,199,205
, 144,148, 151,152,162,179
, 152
, 194
, 184

235


, 129

, 215
, 149
, 122

, 102
, 98
, 98
, 135
, 135
, 104
, 40

, 17,22

, 217
, 210
, 224
, 227
, 214
, 215
, 210
, 222
, 212
, 210

azimuth, 226
background, 224
background-attachment, 223
background-color, 222, 227
background-image, 222
background-position, 223
background-repeat, 223
border, 216,221
border-bottom, 220
border-boltom-color, 219
border-bottom-style, 220
border-bottom-width, 219
border-collapse, 216
border-color, 219
border-left, 220
border-left-color, 219
border-left-style, 220
border-left-width, 219
border-right, 220
border-right-color, 219
border-right-style, 220
border-right-width, 219
border-style, 220
border-top, 220
border-top-color, 219
border-top-style, 220
border-top-width, 219
border-width, 219
bottom, 218
clear, 221
clip, 221
color, 222, 227
column-span, 216

()
cue, 225
cue-after, 225
cue-before, 225
cursor, 227
direction, 214
display, 215
elevation, 226
float, 221
font, 211
font-family, 210
font-size, 211
font-style, 211
font-variant, 211
font-weight, 211
height, 217
left, 218
letter-spacing, 213
line-height, 213
list-style, 215
list-style-image, 215
list-style-position, 215
list-style-type, 214
margin, 218
margin-bottom, 218
margin-left, 218
margin-right, 218
margin-top, 218
max-height, 217
max-width, 217
min-height,- 217
rain-width, 217
overflow, 221
padding, 219
padding-bottom, 218
padding-left, 218
padding-right, 218
padding-top, 218
pause, 225
pause-after, 224
pause-before, 224
play-during, 225
position, 218
right, 218
row-span, 216
speak, 224
speech-rate, 224
table-layout, 217
text-align, 212
text-decoration, 212
text-indent, 212
text-shadow, 212
text-transform, 214
top, 218
vertical-align, 216
visibility, 222
volume, 224
white-space, 214
width, 217
word-spacing, 213
z-index, 222

236
, 133
, 18
, 162

, 15
, 15
, 15
, 149
, 186

HTML, 43
JavaScript, 118
, 224
, 22
, 142
, 194
, 129
, 55

, 148
, 83
, 108
, 113
, 78
, 163
, 108
, 102, 111
, 108
, 119
, 85
, 108
, 111
, 107
, 111
, 98
, 79
, 76,215
, 165
, 108
, 150
, 106,110, 130, 193
, 84
, 118
, 215
, 108
, 104
, 106
, 46,190
GIF89a, 149

, 104
, 71
, 69, 93
, 69
, 69
, 69
, 194
, 71,191
, 111
, 180

, 42
, 42
, 53
, 226
, 38,63
, 65
, 139
, 187
, 66
, 211
, 139
, 118
, 139

, 42, 74
, 205
, 141
, 22,115

, 137
, 82
, 134
, 65
, 76
, 136
, 192
, 132
, 76,215
, 76
, 64
, 79
, 76

, 37,44
, 37,44
, 21,44
, 186

, 63
, 93
, 65
, 104
, 139
, 59
, 56
, 55
, 184
, 39
, 150
, 59
, 16

, 120
, 119, 120
, 121
, 224
, 132
, 174,212

MIME, 104
, 75
, 48
, 104
, 119
, 141
, 180

, 47
, 101

, 55, 131,227
, 98
, 22
, 120
, 66
, 66
, 129
, 120
, 41
, 120

, 98
, 140,225
, 140
, 149
, 131
, 106, 108

, 56
, 56

, 40
, 150
, 40
, 150

,"40, 222
, 224
, 150
, 28, 75,106
, 108
, 108
, 107
, 106, 130,193
, 129

AVI, 140, 170


, 158
GIF, 55,148
HTML, 55
JPEG, 149
JPG, 55, 169
PNG, 55,149
PostScript, 55
WAV, 140

237

, 138
, 217
, 56, 187,212
, 146
, 168
, 75
, 21
, 43
, 84,204

, 119
, 118
, 123
, 118
, 129
, 118

-
, 49
, 40
, 48
, 41
, 40
, 40
, 97,219
, 140
, 134
, 40,48,134,222
, 48,134
, 131
, 120
, 121
, 121
, 121
, 62,191
, 16
, 149,157
, 120

-
, 60
, 30
, 202
, 58
, 30
, 133
, 58
, 58
, 74, 107,201

A, 42,48,73, 168
ABBR, 64
ADDRESS, 63,168
APPLET, 103, 104
AREA, 99
B, 58
BANNER, 96

238
()
BASE, 42
BASEFONT, 60
BDO, 61
BGSOUND, 53,92
BIG, 58
BLINK, 39,93
BLOCKQUOTE, 62,207
BODY, 40
BR, 57, 139
BUTTON, 113
CAPTION, 78
CENTER, 58
CITE, 63
CODE, 63
COL, 83
COLGROUP, 83
COMMENT, 93
DD, 71
DEL, 59
DFN, 62
DIR, 93
DIV, 68
DL 71
EM, 62 '
EMBED, 94
FIELDSET, 113
FONT, 49, 60
FORM, 107
FRAME, 48
FRAMESET, 85
HEAD, 38, 52
Hn, 41
HPn, 96
HR, 41,51, 138
HTML, 38
I, 59
IFRAME, 91,104
IMG, 48,98, 168
INPUT, 108
INS, 59
ISINDEX, 106
KBD, 64
LEGEND, 114
LI, 69
LINK, 52, 76
LISTING, 93
MAP, 99
MARQUEE, 94
MENU, 93
META, 39,53, 198
NOBR, 57
NOEMBED, 94
NOFRAMES, 87
NOSCRIPT, 118
OL, 69
OPTION, 111


()
P, 56, 168
PARAM, 105
PLAINTEXT, 93
PRE, 58,93,94,214
Q, 63
SAMP, 63
SCRIPT, 115
SELECT, 111
SMALL, 58
STRIKE, 59
STRONG, 63
STYLE, 38,52
SUB, 59
SUP, 59
TABLE, 76, 136
TBODY, 82
TD, 80,136
TEXTAREA, 112
TFOOT, 82
TH, 79
THEAD, 82
TITLE, 38, 52
TR, 79
TT, 59, 207
U, 59
UL, 69, 93
VAR, 64
XMP, 93

ActiveX, 194
, 106
, 106
, 106, 107
, 106

, 56
, 42
, 38, 43
, 41
, 38,41
, 42
, 92
, 103
, 21,44
, 57
, 43
, 39
, 62
, 38
, 40
, 92
, 130
, 49
, 163

, 161
, 152

239


()
, 154
, 181
, 181
, 181
, 165
, 152
, 170
, 153
, 181
, 160

()
, 226
, 165
, 157

Java, 36
JavaScript, 36,118
VBScript, 36
, 15
, 14
, 28
, 139

WWW.PITER.COM


, ,
,


. , . , . 176, 207, 240
./ (095) 777-54-67
E-mail: sales@piter.msk.ru
-

. , . ., . 29
. (812) 103-73-73, (812) 103-73-82
E-mail: sales@piter.com


. , . 138
. (0732) 49 68 86
E-mail: piter-vrn@vmail.ru


. , . 31
.(8312)58-50-15
E-mail: piter@infonet.nnov.ru
--

. , . 17
. (8632) 95-36-31, (8632) 95-36-32
E-mail: jupiter@rost.ru


. , . 29, 610
. (0572) 23-75-63, (0572) 28-20-04,
(0572) 28-20-05, (0572) 14-96-09
E-mail: piter@tender.kharkov.ua


. , . 6, . 1
./ (044) 490-35-68, 490-35-69
E-mail: office@piter-press.kiev.ua


. ., 21, . 3
/ (37517) 239-35-26
E-mail: piterbel@tut.by

-
. , 65, 345
. (3732) 226952, : (3732) 272482
E-mail: lili@auratip.mldnet.com

, .
: (81 2) 1 03-73-73.
E-mail: grigorjan@piter.com
, , , , ,
( )
.
: - -.: (812) 103-73-72,
-.: (095) 234-38-15, 777-54-67.

HTML
,
.
HTML 4,
,
Web- ,
HTML-.
,
HTML-, :
, .
:

Internet
I

IEITUE 11

itimif

IttflHl

Web-,

ISBN 5-272-00072-2

Web-: http:/www.piter-press.ru

( :


9 7 8 5 2 7 2 000729

WWW.PITER-PRESS.RU