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

. .

. .

WEB-
-


2012
1

004.738.5(075.8)
32.988.02-0187
14
:
, . .
( - );
, . .
( )

, . .
14
web- : . / . . ; . .
. -. , 2012. 136 .
ISBN 978-5-86433-526-0

web- HTML.
.
.
,
-, web-,

,
-,
web- .
,
-.

004.738.5(075.8)
32.988.02-0187

ISBN 978-5-86433-526-0


. . , 2012
. ., 2012
2

..................................................................................................

1. web- ..........................................
1.1. ..........................................................................
1.2. ......................................................................
1.3. ...........................................................
1.4. ..................................................................................................
. web- ........................................
..................................................................
..........................................................

6
6
18
23
25
28
29
30

2. web- .........................................................
2.1. ........................................................................................
2.2. web- .........................................
. web- ............
..................................................................
..........................................................

33
33
37
45
46
47

3. ....................................................................
3.1. ................................
3.2. .................................................................
3.3. ...........................................................................
3.4. web- ................................
. .....................................................
..................................................................
..........................................................

49
49
59
62
63
66
68
68

4. .........................................
4.1. ...............................................................
4.2. ..........................................................
4.3. ...................................................................
4.4. ............................................................................
. web-
.......................................................................................................
..................................................................
..........................................................

70
70
75
78
82
84
85
86

5.
....................................................................... 87
5.1. ......................................... 88
5.2. CSS ........................................................... 92
5.3. ....................................................................... 95
5.4. CSS .............................................................................. 98
5.5. .............................................108
3

. CSS
web- ...........................................................112
..................................................................114
..........................................................115
6.
web- .......................................................................................117
6.1. ....................................................................................117
6.2. .......................................................119
6.3. ........................................................128
. .....................................................129
..................................................................131
..........................................................132
...................................................................................................133
.......................................................................134

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


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

,
,

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

, web-.

.
, .
.
,
. , ,

.
, HTML
.
, 5

,
.

1.
WEB-

web-
,
,
, .
1.1.

HTML-
()

, .
, HTML
( . Tag ). <>.
,
, : <> </>.
<> </>

HTML-
(. 1.1).
HTML-



. 1.1. HTML-

HTML- , ,
HTML- .
<HTML> </HTML>

,
,
.
<HEAD> </HEAD>

,
.
<TITLE> </TITLE>


, HTML-
.
<BODY>

</BODY>

.
< 1>
<2> </ 2>
</1>

, HTML- ,
.
<HTML>
<HEAD>
<TITLE> WEB- </TITLE>
</HEAD>
<BODY>

</BODY>
</HTML>

,
, .

, .htm .html .
, page1.htm.
,
(*.*)
.
.
,
, . 1.2. Windows
.htm .html Internet Explorer,
. :
,
:
Internet Explorer, Mozilla, Opera.
8

- HTML-, ,
Internet Explorer,

() HTML-

.
. ,


.
HTML-.

. 1.2. HTML-

index.htm.
, , ( ,
) .
web- index.htm
(,
web- ). ,
, .
HTML- .
,
. ,
. ,
,
.
,
.
, , <HTML> .
:
< _1="" _2="", ...>

:
9

<TABLE BORDER="1" WIDTH="100">

TABLE , BORDER="1" ,
, 1,
WIDTH="100" , 100.
,
-
. web-
.
.

1. ,
.
< _ ="1;'2'">

HTML
:

, ;
0 9;
.
ALIGN="center"

(ALIGN) (center).
2. .

.

HTML, . URL escape-.
3. ,
,
escape-.
escape-:
>
&et;
<
&gt;

&quot;
&
&amp;
c
&copy.

10

4. ,
, , ,
HTML-.
, <PRE></PRE>.
, ,
,
.
.
5. HTML- .

.
:
<!-- -->

, ,
HTML- .
,
HTML-.
HTML :
1) , <!DOCTYPE>,
HTML;
2) , <HAD>.
, ,
,
.;
3) , <BODY> <FRAMESET>.
HTML. HTML
<!DOCTYPE>, HTML-.
.
HTML, HTML
HTML. <!
DOCTYPE> SGML
. SGML DTD
(Document Type Definition ),
.
DTD, .
,
Transitional HTML 4.01 DTD,
:
<!DOCTYPE HTML PUBLIC "-//W3C// HTML 4.01 Transitional // EN">

,
Transitional HTML 4.01 DTD,
11

W3C. EN
HTML.
HTML- .
<HTML>, ,
HTML-, </HTML>
. , HTML
.
. HTML
: HEAD ( ) BODY (
, , ).
HEAD ,
<HTML> web-.
<HEAD> web-,
HTML-. ,
,
,
.

<HEAD></HEAD>.
HEAD HTML:
TITLE ( )
( HTML-),
LINK ( ) ,
META ( )
HTML-, SCRIPT ( )
(), STYLE ( )
.
TITLE META ,
,
HTML-.
. HTML-
, <TITLE>.
, <TITLE> </TITLE>,
web-.
<TITLE> .
web- ,

.
. 2 6 .

, <META>,
HTML-.
12

HTTPEQUIV NAME.
,
,
( ).

:
<META HTTP-EQUIV="" CONTENT="">

HTML- Windows-1251.
:
<META HTTP-EQUIV="content-type" CONTENT="text/html;
charset=Windows-1251">


NAME (. 1.1).
1.1
NAME

keywords
description
author
robots

rating

document-state
revisit

()

()


13

all
none
index
noindex
follow
nofollow

distribution

URL

. 1.1

copyright

generator

META NAME="keywords"
,
( ).
.
<META NAME="keywords" CONTENT="HTML, web, WWW, web-, " >

META NAME="description"
HTML-, (

-).
<META NAME="description" CONTENT="HTML. :
HTML" >

META NAME="author".
() .
<META NAME="author" CONTENT=" " >

META NAME="robots" ,

().

CONTENT:
all
();
none
;
index ;
14

noindex ;
follow
;
nofollow
.
META NAME="robots" ,

( all index, follow).
<META NAME="robots" CONTENT="all" >

,
. ,

.
.
. BODY
HTML-,
,
. <BODY> </BODY>
.
BODY
HTML-.
<BODY> , .
, HTML-
:
<!DOCTYPE HTML PUBLIC -//W3C// HTML 4.01
Transitional//EN>
<HTML>
<HEAD>
<TITLE> WEB </TITLE>
<META HTTP-EQUIV=Content-Type
CONTENT="text/html; charset=Windows-1251">
</HEAD>
<BODY>

</BODY>
</HTML>

<BODY> ,
: ,
, (. 1.2).
1.2
<BODY>
15


BACKGROUND
BGCOLOR

URL- ,


. 1.2

BGPROPERTIES
LEFTMARGIN
RIGHTMARGIN
TOPMARGIN
BOTTOMMARGIN
TEXT
ALINK
LINK
VLINK

FIXED,








: BGCOLOR, BACKGROUND
BGPROPERTIES.
BGCOLOR ,
,
RGB (. . 1.3).
: , .
()
:
<BODY BGCOLOR="white">
<BODY BGCOLOR="#ffffff">
<BODY BGCOLOR="255, 255, 255">

BACKGROUND
.
<BODY BACKGROUND="images/bg.gif" >

BGPROPERTIES Internet
Explorer . ,

<BODY BACKGROUND="images/bg.gif" BGPROPERTIES="fixed">

,
.

16

,
BGCOLOR :

, , ,
,
. ,

, .
.,
.
: LEFTMARGIN, RIGHTMARGIN,
TOPMARGIN, BOTTOMMARGIN
, , .
.
<BODY TOPMARGIN="5" BOTTOMMARGIN="5" LEFTMARGIN="10"
RIGHTMARGIN="10">


, Netscape,
: .
<BODY MARGINWIDTH="10" MARGINHEIGHT="10">

, ,
HTML- .
<BODY TOPMARGIN="5" BOTTOMMARGIN="5" LEFTMARGIN="10"
RIGHTMARGIN="10" MARGINWIDTH="10" MARGINHEIGHT="10">

: TEXT .
<BODY TEXT="black" >

: ALINK, VLINK, LINK


, .
<BODY ALINK="#00ffff" VLINK="blue" LINK="#0000ff" >

, HTML-.
:
<!DOCTYPE HTML PUBLIC "-//W3C// HTML 4.01
Transitional//EN">
<HTML>
<HEAD>
<TITLE> WEB </TITLE>
<META HTTP-EQUIV="content-type" CONTENT="text/html;
charset=Windows-1251">
</HEAD>
<BODY TEXT="green">
17


</BODY>
</HTML>

18


web-

WEB- :

, (. 1.3).

. 1.3. HTML-

RGB
(. 1.3).
1.3

RGB
255 255 255
0 0 0
0 128 0


white
black
green


#FFFFFF
#000000
#008000

-
-

0 255 0
128 128 128
192 192 192
128 0 0
0 0 255

lime
gray
silver
maroon
blue

#00FF00
#808080
#C0C0C0
#800000
#0000FF

0 0 128
0 255 255

navy
aqua

#000080
#00FFFF
. 1.3

19

RGB
0 128 128
255 0 0
128 0 128
255 0 255
128 128 0


teal
red
purple
fushia
olive


#008080
#FF0000
#800080
#FF00FF
#808000

<BODY BGCOLOR="#c0c0c0", TEXT="blue">

BODY BGCOLOR
- (#c0c0c0), ,
TEXT (blue) (. . 1.3).
.
1.2.

HTML
, :
.
. ,
,
HTML.
,
CSS
.

(. 1.4).
1.4

<ACRONYM>
</ACRONYM>


TITLE

- (. 2.1)
<CITE>

,

</CITE>
,
<BLOCKQUOTE>

CITE
<CODE>


</CODE>

. 1.4

20

<DEL>
</DEL>

<EM></EM>
<H1></H1><H6></H6>
<STRONG>

- ,


<S> <STRIKE>

,
,

(1-
)

<B>

HTML-,
(. 1.4).
<!DOCTYPE
HTML
PUBLIC "-//W3C//
HTML 4.01
Transitional//EN">
<HTML>
<HEAD>
<TITLE> </TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html;
charset=Windows-1251">
</HEAD>
<BODY >
<ACRONYM TITLE="Hypertext">
HTML</ACRONYM> -
.
<BR><BR><BR>
<CITE>

</CITE>
<BR><BR>
<CODE> !DOCTYPE HTML
PUBLIC -"//W3C// HTML 4.01
Transitional // EN"</CODE>
<BR><BR>
<DEL>
,
</DEL>
<BR><BR>
<EM> </EM>
<BR><BR>
<H1> 1</H1>
<BR>
<STRONG>
</STRONG>
</BODY>
21

</HTML>

<BR>,
, .

. 1.4.

web-
<Hn> </Hn>, n ,
1 6. 1- .
<Hn> ALIGN,
: right, left, center.
.
,
<H1 ALIGN="center"> </H1>

1- .

HTML- ,
. ,

, (. 1.5).
HTML-
. (
). :
( Times) ( Arial).
22

:
(Normal), (Bold), (Italic) (Bold
Italic).
1.5

<B></B>
<I></I>
<U></U>
<TT></TT>
<SUB></SUB>
<SUP></SUP>
<FONT></FONT>

<BASEFONT></BASEFONT>
<BIG>
<SMALL>

size
color
face


<FONT>




.
().

(1 pt = 0,353 ).
HTML- 12 .
,
<FONT> </FONT> FACE, SIZE, OLOR.
FACE , , FACE="arial".
,
, ,
.
SIZE .
.
1 7, +
. ,
( 3 ).

23

COLOR ,
.
,
<FONT FACE="arial" SIZE="16 "OLOR="olive"></FONT>

arial, 16 .
<FONT FACE="arial" SIZE="+2" OLOR="olive"></FONT>

SIZE="+2"
2 , , . . 5 .
,
. 1.
7,
7. <FONT> .

,
<BIG> <SMALL>.
, <BIG><BIG> </BIG></BIG>
2 ; <SMALL> </SMALL>
.
,
, , ,
,
,
.
,
.
:
<B></B> ;
<I></I> .

,
<B> </B><I> , </I><B></B>
<I> </I>

,
(. 1.5).

24

. 1.5.

<B><I></I> </B><I> , </I><B><I


></I></B> <I> </I>

1.3.

HTML
,
: , , ,

(. 1.6.).
.
<P> </P>.

ALIGN, : right (
), left ( ), jastify ( )
center ( ).
<P ALIGN="right"> </P>

right, left, jastify center


, , <RIGHT></RIGHT >.
<P>
: (. 1.6).
1.6


25

<P></P>

ALIGN (left,
right, center, jastify)
<DIV></DIV>

ALIGN (left,
right, center)
<CENTER></CENTER>

&nbsp



<BR>

<NOBR></NOBR>

<HR>
ALIGN ,
WIDTH ,
SIZE ,
COLOR
<PRE></PRE>


<!-- -->

.
<DIV>. <DIV> ,
,
.
(. .
5).
<DIV ALIGN="center" STYLE="color: green; "></DIV>


.
. HTML <CENTER>,
ALIGN="center" ,
. ,

<CENTER>
<TABLE><TR><TD></TD></TR></TABLE>
</CENTER>

<TABLE ALIGN="center" ><TR><TD></TD></TR></TABLE>

.
. ,
, &nbsp. ,
26

, ,
,
,
.
.
<BR>. , . .
.
.
<NOBR></NOBR>.
.
HTML- <HR>.
,
, 2 .
, .
, , :
ALIGN , WIDTH , SIZE , COLOR .
<HR WIDTH="80%" SIZE="5" COLOR="red">


5 80 % .
<HR> .
.
,
:
<!-- -->

.
,
, <PRE></PRE>. ,
, .
, -
Web-,

<PRE>,
.
1.4.

:
(<UL></UL>), (<OL></OL>)
(<DL></DL>).
(<LH></LH>), .
.
<UL></UL>, <LI>
27

</LI>. ,
TYPE.
: disc, circle, square.
Disc
.
Circle .
Square
.
(. ., TYPE),
disc.
,
<UL>
<LH> </LH>
<LI> 1 </LI>
<LI> 2 </LI>
<LI> 3 </LI>
<LI> 4 </LI>
</UL>

(. 1.6).

. 1.6.
HTML

HTML-
.
<UL> <LI>
<IMG>, SRC :
<UL>
<IMG SRC="marker.gif"> 1
<IMG SRC="marker.gif"> 2
<IMG SRC="marker.gif"> 3

<IMG SRC="marker.gif"> n
</UL>

,
marker.gif.
.
<OL></OL>,

28

<LI> </LI>. TYPE


:
1 1, 2, 3;
I ;
i i, ii, iii . .;
A A, B, C;
a a, b, c.
START ,
. , START="5" 5,
START="D" D.
<OL TYPE="1" START="4">
<LI> 1 </LI>

<LI> n </LI>
</OL>


4.

<DL></DL>
,
<DT> </DT> ( ) <DD> </DD> (
).
<DL>
<DT> </DT>
<DD> </DD>
<DT> </DT>
<DD> , </DD></DL>

. 1.7.

. 1.7.

***


, web-,
,
29

. web-
, ,
, ,
, .


WEB-

1. web-.
. HTML-.
<HTML>
<HEAD>
<TITLE> </TITLE>
</HEAD>
<BODY> </BODY>
</HTML>

,
index.htm. Internet Explorer.
, .
.
2. .
<BODY>.
. <BODY>:
-,

- (BGCOLOR="silver"
TEXT="navy").

.
.
( <H1></H1>).
, ( . )
,
( <P></P>, <B></B>, <BR>).
.
, .
( ALIGN
).

, ( <UL> <LI>):
;
;
.
30

.


( <FONT> SIZE <UL> TYPE).

, ( ,
). <HR>.
.
.
: ,
, . .
,
.
.
,
,
.
page1.htm, page2.htm, page3.htm ,

.

1. HTML-.
2. .
3. .
4. HTML-
?
5. HTML?
6. HTML?
7. , web?
8. HTML-?
9. .
10. .
11. .
12. escape-?
13. HTML-
?
14.
?
15. HTML-?
31

16.
HTML?
17. .
?
18. <BODY>
?
19. HTML-?
20.
?
21. ?
22.
HTML-?
23.
?
24.
?
25.
?
26.
HTML-?
27. ,
?
28. ,
.
29.
?
30. HTML-?
31. HTML-?
32. HTML-?

web-,
<BODY>, (. 1.7).
,

. DZn.htm, n
.
1.7
web-

32


<BODY>


: 1- left, 2- right.
Arial 1- ,
5 , 2- 2

2
-, ,

5 ,
,

3
-
1- : right,
1- , Arial, ;
2- : left, 2-
, New Roman,

4

,

5
,

,


5

( )

.

,
, ,
2
6

2 , 1-
,
, 2-
.


7

(
,
),

: 1- 1-
(RGB)
, , 2- 2-
,
8

, : 1- ,

2-
.

20
. 1.7

<BODY>


33

10

: 1-

, ,
6 , 2-
, 2

11

,
,

,
,
.

12


2 .

.

13

14

15


,
.
.
.

16

-

,

,
.

. ,

,
4 .
.
,
.

(RGB)

34

2. WEB-

web .
, , ,
.
2.1.

, web .
() web-
HTML- ,
.
,

.
,
.
:
( . anchor) ,
.
,
, ( ).
(,
) .
<A></A>,
HREF.
URL- , .
<A HREF="URL"> ( )
</A>

:
.
HTML- ,
.
.
: .
HREF .
HREF
.
35


:
://_:/#

URL :
,
(web-);
, ;
( ).
,
. :
http ( WWW), ftp ( ),
mailto ( SMPT).
<A HREF="http://www.kodak.com/us/en/health"> </A>
<A HREF="mailto://medinews@kodak.com" > </A>

HREF <A>
(. 2.1).
2.1
<A>

HREF
TARGET

NAME

URL- ,

,


HREF

ID

NAME,

<A>,
METHODS

(FTP, HTTP . .)
FRAME
,


TITLE

ACCESSKEY ,

36


<A HREF="URL"> c
</A>
<A HREF="URL" TARGET="_blank">
</A>
<A NAME="_">
</A>
<A HREF="#_">
</A>
<P ID=" ">
<A HREF="# ">
</A>
<A METHODS="">
</A>
<A FRAME"= "> </A>

<A TITLE=" ">


</A>
<A ACCESSKEY=" ">
</A>

<A>:
<A HREF="http:// www. server.ru/page.htm" TARGET="_blank"
TITLE="__" > </A>

HREF , ;
TARGET ,
( TARGET _blank
(TARGET="_blank"), HTML-
; , HTML-
); TITLE ,
,
, (. 2.1).

. 2.1.


,
, , .
,
HREF
:
<A HREF="page1.htm"> </A>

.
.

.
.
1. .
( ), HTML37

-, .
NAME <A>.
<A NAME= > </A>

,
, ,
: <A NAME="1"></A>, , .


1.
.
, ,
, , , .
2. .
,
URL-, ,

#
.
, ,
:
<A HREF="# ">
</A>.
<A HREF="#2"></A>
<A HREF="#1"> </A>
<A HREF="#3"> </A>

,
, ,
1.
.
, .

. :
LINK , VLINK
, ALINK .
<BODY>.
<BODY LINK="olive" ALINK="green" VLINK="red">


(. . 5), .
, .
<A> <IMG>
:
38

<A HREF="page1.htm"> <IMG SRC="ap1.gif"></A>

<IMG> , SRC
.

(. 2.2):

. 2.2.

<A HREF="page1.htm"> <IMG SRC="image003.gif" WIDTH="50"


HEIGHT="50"> &nbsp </A>
<A HREF="page2.htm"> <IMG SRC="image006.jpg" WIDTH="50"
HEIGHT="50" > &nbsp </A>

2.2.

WEB-

WWW
,
web- .
, , , ,
-, - .
39

2.2.1. HTML-


,
.
.

,
, -
.
web-
:
,
, , , ;
,
( ,
);
,
(
, , ,
).
.

. , .

GIF, JPEG PNG.
,
.
GIF-. 1978

(LZ78 ).

(LZW)
.
1987 LZW
GIF. :

, GIF
, . .
40

. : ,
256 .
GIF HTML-
-: , , ,
256.
GIF , . .
, ( 1-, 5-, 10- ,
2-,
6-, 11- . .), . . .
1989 CompuServe GIF89,

-
. ,
, .
GIF89 ,

, .
JPEG-. ,

JPEG. JPEG-,
,
, LZW,
.
.
1.

LAB,
: L
, .
2. :
,
88 .
,
.
3.
, ,

. ,
,

.
JPEG .
,
JPEG, 16 .

41

PNG-. 1995 ,
GIF Unisys
LZW.
,
.
web-. HTML <IMG>.
<IMG SRC="URL">

SRC () URL- (. 2.3).

. 2.3. <IMG>

<IMG>
(. 2.2).
2.2
<IMG>

SRC

ALIGN


(
)

WIDTH


URL-


<IMG SRC="picture.gif">

<IMG SRC="picture.gif"
ALIGN="RIGHT">
LEFT
RIGHT
MIDDLE

TOP
BOTTOM


<IMG SRC="picture.gif"
(
WIDTH="50">
)
42

HEIGHT

(
)

<IMG SRC="picture.gif"
WIDTH="50"
HEIGHT="50">
. 2.2

ALT

(
)
BORDER

VSPACE

HSPACE

<IMG SRC="picture.gif"

ALT="

">
<IMG SRC="picture.gif "
BORDER="5">

<IMG SRC="picture.gif"
VSPACE="20"
<IMG SRC="picture.gif"
VSPACE="20"
HSPACE="20"

<IMG SRC="image006.jpg" ALIGN= "RIGHT" WIDHT="325"


HEIGHT="215" BORDER="5" ALT="">


,
(. . 2.3).

2.2.2.
HTML-


HTML-.
web-.
HTML-
.
1. .
<A HREF="music.mp3"> . </A>


, .
2. ,
(EMBED BGSOUND).
43

,
,
, .
WWW
, .
:
WAV (.wav)
Windows. Windows.
MIDI ( .midi .mid)
, ,
.
AU (.au) 8- ,
.
,
.
MP3 (.mp3)
,
.
, . .
.
RealAudio (.ra)
, .

<BGSOUND> (. 2.3).
2.3
<BGSOUND>

SRC
LOOP

VOLUME
BALANCE




SRC="URL-"

LOOP="5"

(1, 2, 3 . . infinite
)

VOLUME="100" ( 10 000 0)

BALANCE="0" ( 10 000 10
000)

,
<BGSOUND SRC="music.mp3">

: loop
, 1.
44

<BGSOUND
BALANCE="0">

SRC="music.mp3"

LOOP="5"

VOLUME="0"


(0) (0).

45


. <EMBED>
,
.
, .
<EMBED> (. 2.4),
.
<EMBED SRC="music.mp3" HIDDEN="true" LOOP="true">


.
2.4
<EMBED>

SRC

URL-
SRC="music.mp3"

(-)

WIDTH

WIDTH="30%"

HEIGHT

HEIGHT="200"

AUTOSTART

LOOP

HIDDEN

HIDDEN="false" ( )


true

AUTOSTART="true"

(
)
false

LOOP="2" ( )
true
false
( )
ralidrom
,


web- .
,
, , .
46

.
MPEG (.mpeg)
.
.
AVI (.avi) Windows
- .
QuickTime (.mov .gt) .
Internet,
, .
SWF (.swf .fla) flash-.
, ,
, , .
Flash Player,
Internet Explorer Netscape.
web-
<EMBED>:
<EMBED SRC="Belyi.avi" CONTROLLER="false" HEIGHT="150"
WIDTH="150">


,
(. 2.4).

. 2.4.
<EMBED>


Internet Explorer, c
<IMG>. SRC
DYNSRC, URL .

47

***

, ,
, , web-
, .

WEB-

1. .
, ,
: GIF JPG.

,
Word ,
.
IMAGE, (
).
(page1.htm) ,
<IMG> SRC
.
.
.
.
,
.
.
ALIGN="right".
,

WIDTH
HEIGHT.
ALT

( BORDER).
. (
)
,
.
.
2. .
.
(index.htm) . ,
, ,
(page1.htm, page2.htm, page3.htm).
<A></A>, .
HREF . ,
,
48

.
.
,
.
.
.
(page2.htm) , ,
<A></A>
NAME=" ". ,
, ,
,
<A HREF="# ">.
,
.
, , , ,
. ,
.

1. .
2. ?
3. ?
4. HTML?
5. .
6. .
7. ?
8. ?
9.
.
10. , <A>.
11. TARGET?
12. ?
13. .
14. ?
15. ,
?
16. web-?
17. ,
web-.
18. .
19.
web-?
49

20. <IMG>?
21.

web-?
22. .
23. ?
24. <BGSOUND>?
25. <EMBED>?
26. <EMBED>.
27. web-?

1. web-
.
,


.
2. web-
.
, ,
flash-.
3. web-
. web-,
,
.
4. web-.

. ,
.
5. web- ,
.
.
GIF-, web-
,
.
6. web-,
, .

.
7. web- .
, ,
50

. ,
, ,
,
. .
8. web-,
. ,
, ,
. ,
.
9. web-,
. ,
.
,
(), .
10. web-,
, .
, .
,
.
11. web-,
,
.
,
.
12. web- ,
.
, ,
, ,
.
13. web-.

, 34 .
14. web-,
,
. ,
,
.
,
.
15. web-,
GIF- .
,
.
51

16. web- ,
,
. .
,
,
,
.

3.

, web HTML, , , .

.
. ,
.
:
, ,
. . ,
web.
3.1.

HTML -
<TABLE>, , .
<TABLE>
<!-- -->
</TABLE>

:
<TABLE> ,
<TR>,
<TD> .
, ,
,
<TH> <CAPTION>.
,
. , HTML
52

, ,
.
.
.
,
.
.
,
, .
: , , ,
.
(. 3.1).
<TABLE ALIGN="center" BORDER="2" BORDERCOLOR="blue"
WIDTH="50%">
<!-- -->
</TABLE>

,
2 , ,
50 % .
3.1
<TABLE>

ALIGN

WIDTH

HEIGHT

BORDER

CELLSPACING



left,

right, center
ALIGN ="left"


(
)
WIDTH="50%"

HEIGHT="500"

,
= 0,

BORDER="2"

CELLSPACING="3"
. 3.1


53

CELLPADDING
BGCOLOR
BACKGROUND
BORDERCOLOR
HSPACE
VSPACE
COLSPEC


CELLPADDING="5"

BGCOLOR=""

BGCOLOR="red"
BACKGROUND="URL"

URL

. BORDERCOLOR=""

BORDERCOLOR="blue"
BORDER


HSPACE="5"


VSPACE="5"
,


COLSPEC="20%"

. <TR>, <TD> <TH>



. ,
, <TR>
, , HTML .
<TD> <TH>,
.
<TR> , .
<TR></TR>.
,
, .
<TR> . 3.2.
<TABLE ALIGN="center" BORDER="2" BORDERCOLOR="blue"
WIDTH="50%">
<TR VALIGN="middle">
<TD></TD> <TD></TD>
</TR>
</TABLE>

, ,
, . .
.
3.2

<TR>

,
54

ALIGN

VALIGN

left, right, center


ALIGN="left" ( )
: top (
), middle (), bottom
( ), baseline (
)
VALIGN="middle"

BORDERCOLOR BORDERCOLOR=""

. BORDERCOLOR="blue"

BORDER

<TD></TD> <TH></TH>.
,
. ,
<TH> <TD>
<TD>
, <TH> .
<TD> <TH> ALIGN VALIGN
<TR>. ,
-
, .
. 3.3.
3.3
<TD> <TH>

ALIGN

VALIGN

WIDTH

HEIGHT

COLSPAN

,
left, right, center
ALIGN="left"
: top (
), middle (), bottom
( ), baseline (
)
VALIGN="middle"

( )
WIDTH="10%"

HEIGHT="50"
. 3.3
,

55

ROWSPAN
NOWRAP

BGCOLOR

COLSPAN="3"

ROWSPAN="2"
NOWRAP

BGCOLOR=""
BGCOLOR="red"
BORDERCOLOR BORDERCOLOR=""
. BORDERCOLOR="blue"
BORDER
BACKGROUND
BACKGROUND="URL"

URL


. ALIGN VALIGN
<TABLE>, <TR>, <TD> <TH>. HTML
,
.
<TABLE> <TR>, <TD> <TH>.
.
HTML :

,
(,
<P>,
, <P>);
<TD> <TH>;
;
<TABLE>;
,
.
<TABLE ALIGN="center" BORDER"="2 BORDERCOLOR="blue"
WIDTH="50%">
<TR>
<TD VALIGN="bottom"></TD><TD VALIGN="middle">
</TD>
</TR>
</TABLE>


,
, <TR>.

56


<CAPTION> </CAPTION>,
<TABLE> </TABLE>, .

. .
<CAPTION> ALIGN VALIGN. ALIGN
,
ALIGN top (
), bottom ( ), left (
), right ( ). VALIGN
.
Internet Explorer.
.
1. HTML ,
(. 3.1). 50 %,
,

.
1
1

. 3.1. 1

HTML,
. 3.2.
<HTML>
<HEAD> <TITLE> 1
</TITLE>
</HEAD>
<BODY>
<TABLE ALIGN="center" VALIGN="middle" WIDTH="50%"
BORDER="1" BORDERCOLOR="green">
<CAPTION> 1</CAPTION>
<TR ALIGN="center"> <TD> 1 </TD> <TD> 2 </TD> <TD> 3 </TD>
</TR>
<TR ALIGN="center"> <TD> 4 </TD> <TD> 5 </TD> <TD> 6 </TD>
</TR>
</TABLE>
</BODY>
57

<HTML>

. 3.2. 1

2.
(. 3.3), HTML.

()


1965
1968
1992

()

. 3.3. 2

HTML,
. 3.4.
<HTML>
<HEAD> <TITLE> 2</TITLE>
</HEAD>
<BODY>
<TABLE BORDER ="1">
<CAPTION ALIGN="top"> </CAPTION>
<TR><TH> </TH><TH> </TH>
<TH> () </TH></TR>
<TR><TD> </TD><TD> 1965 </TD><TD> </TD></TR>
<TR>
<TD> </TD><TD> 1968 </TD><TD> -
</TD></TR>
<TR>
<TD> () </TD><TD> 1992 </TD><TD> </TD>
58

</TR>
</TABLE>
</BODY>
</HTML>

. 3.4. 2

. ,
.
: , , , . .
1.
BORDERCOLOR <TABLE>,
.
, ,
:
<TABLE BORDERCOLOR="green" BORDER="5">

5 ,
1 .
, ,
BORDERCOLOR, <TR>, <TH>
<TD>. , <TR BORDERCOLOR="red">
,
<TH BORDERCOLOR="yellow">.
HTML .

, .
:
.
, , ,
, (
59

) ( ) ,
. ,
<TABLE BORDERCOLORDARK="brown"
BORDERCOLORLIGHT="yellow" BORDER="5">

5 ,
, .
BORDERCOLORDARK BORDERCOLORLIGHT
<TR>, <TD> <TH>,
.

BGCOLOR. , (<TABLE> <TR>, <TD>
<TH>) BGCOLOR,
: , ,
. , <TABLE BGCOLOR="red">
, <TD BGCOLOR="yellow">.
3. HTML (. 3.5),
.

. 3.5. 3

HTML,
. 3.6.
<HTML>
<HEAD>
<TITLE> ,
( 3)
</TITLE>
</HEAD>
<BODY>
<CENTER>
<FONT COLOR="red" SIZE="5"></FONT>i
<TABLE WIDTH="40% " BORDER="3" CELSPACING="15"
CELLPADING="10" BORDERCOLOR="tomato">
<TR><TD BGCOLOR="#ff3030" ALIGN="center">
<TR><TD BGCOLOR="#ffd000" ALIGN="center">
60

<TR><TD BGCOLOR="#f3ff5f" ALIGN="center">


<TR><TD BGCOLOR="#00ff00" ALIGN="center">
<TR><TD BGCOLOR="#fd3f7" ALIGN="center">
<TR><TD BGCOLOR="#5f2ff0" ALIGN="center">
<TR><TD BGCOLOR="#b568f4" ALIGN="center">
</TR>
</TABLE>
</BODY>
</HTML>

. 3.6. 3

4. ,
web- (. 3.7).

. 3.7. 4

<HTML><HEAD> <TITLE> ( 4) </TITLE>


</HEAD>
<BODY BGCOLOR="red">
<H2 ALIGN="center"> </H2>
<CENTER><TABLE BGCOLOR="greenyellow" BORDER="5">
61

<CENTER><CAPTION> </CAPTION>
<TR><TD></TD><TD></TD></TR>
<TR><TD></TD><TD></TD></TR>
</TABLE></CENTER></CENTER>
</BODY>
</HTML>

3.2.


. ,
.
<TD> <TH> COLSPAN
ROWSPAN, ,
. ROWSPAN
, .
, <TD ROWSPAN="3">
, COLSPAN
.
. ,
<TD COLSPAN="3">.
,
, <TD> <TH>
COLSPAN ROWSPAN. , ,
,
<TD COLSPAN="3" ROWSPAN="2">.
5. (. 3.8):
, .
, 5.
A

B
C

. 3.8. 5

HTML
, . . 3.9.
<HTML>
<HEAD> <TITLE> 5
</TITLE>
62

</HEAD>
<BODY>
<FONT SIZE="6"><TABLE VALIGN="bottom" WIDTH="200"
BORDER="5" BORDERCOLOR="red">
<TR ALIGN="right"><TD> A </TD><TD> B </TD></TR>
<TR ALIGN="right"><TD COLSPAN="2"> C </TD> </TR>
</TABLE> </FONT>
</BODY>
</HTML>

. 3.9. 5

6. HTML to be
(. 3.10).
to be:
I

am

You
We

are

They
He
She

is

IT
. 3.10. to be

HTML
, . . 3.11.

63

. 3.11. 6

<HTML>
<HEAD> <TITLE> 6
</TITLE>
</HEAD>
<BODY>
<TABLE BORDER ="1" ALIGN="center" CELLPADDING="3"
WIDTH="252">
<CAPTION>
<EM> to be : </EM>
</CAPTION>
<TR><TH WIDTH="34"> & nbsp:</TH>
<TH WIDHT="198"> <EM> to be: </EM></TH></TR>
<TR><TH WIDHT="34"> I </TH>
<TD ALIGN="center" WIDHT="198" > am </TD></TR>
<TR> <TH WIDHT="34"> You </TH>
<TD ALIGN ="center" WIDHT="198" ROWSPAN="3"> are </TD></TR>
<TR><TH WIDTH ="34"> We </TH></TR>
<TR><TH WIDTH="34"> They </TH></TR>
<TR><TH WIDHT="34"> He </TH>
<TD ALIGN ="center" WIDHT="198" ROWSPAN="3"> is </TD></TR>
<TR><TH WIDTH="34"> She </TH></TR>
<TR>< TH WIDHT="34"> IT </TH></TR>
</TABLE>
</BODY>
</HTML>
3.3.

HTML
. ,
64

, , , . .

,
.
7. HTML , . 3.12.

TOYOTA

BMW FORD

ISUZU IVECO

. 3.12. 7

7 HTML ,
. 3.13.

. 3.13. 7

<HTML>
<HEAD> <TITLE> 7
</TITLE>
</HEAD>
<BODY>
<CENTER><TABLE BORDER="2"> <TR>
<TD COLSPAN="2"><H3>
</H3></TD>
</TR>
<TR><TH></TH><TH></TH></TR>
<TR><TD><TABLE><TR><TH>TOYOTA</TH><TH>BMW</TH>
<TH>FORD</TH><TH></TH></TR></TABLE></TH>
<TD><TABLE>><TR><TH>ISUSU</TH><TH>IVECO</TH>
<TH></TH><TH></TH></TR></TABLE></TD></TR>
</TABLE>
65

</CENTER>
</BODY>
</HTML>

3.4. WEB-

web-
. web-.
.

,
(WIDTH=100%).
,
(.
3.14). , ,
.
, ,
.

. 1
. 2

. 3.14. web-
( )


, . .
, ,
. ,
,
.
, . 3.14, HTML,
. 3.15.
<HTML><HEAD>
<TITLE> </TITLE>
</HEAD>
<BODY BGCOLOR="silver" TEXT="white">
<TABLE BORDER="1" WIDTH="100%" HEIGHT="100%">
<TR HEIGHT="10%">< TD WIDTH="10%">
<IMG SRC="image006.jpg" HEIGHT="30" WIDTH="30"></TD>
66

<TD ALIGN="center "BGCOLOR="teal">


</TD></TR>
<TR> <TD> <TABLE> <TR ALIGN="center"> <TD>
</TD> </TR>
<TR ALIGN="center"> <TD> 1 </TD> </TR>
<TRALIGN="center" > <TD>2 </TD> </TR> </TABLE>
<TD ALIGN="center"> </TD> </TR>
</TABLE></BODY></HTML>

. 3.15.
( )

760 ,
. 760
.
,
(. 3.16). ,
,
( . . 3.17).


. 3.16. web- ( )

67

. 3.17. ( )

, . 3.16, HTML:
<HTML>
<HEAD>
<TITLE> </TITLE>
</HEAD>
<BODY BGCOLOR="blue" TEXT="white">
<TABLE BORDER="1" WIDTH="760" HEIGHT="600"
BGCOLOR="silver">
<TR HEIGHT="100"><TABLE BORDER="1" HEIGHT="100"><TR>
<TD WIDTH="60">
<IMG SRC="image006.jpg" HEIGHT="30" WIDTH="30"></TD>
<TD ALIGN="center" BGCOLOR="teal" WIDTH="700">
</TD></TR></TABLE>
<TR> <TD> <TABLE BORDER="1"> <TR ALIGN="center"
HEIGHT="30">
<TD WIDTH="253"> </TD>
<TD WIDTH="253" > 1 </TD><TD WIDTH="253">2 </TD>
</TR> </TABLE></TD></TR>
<TR><TD ALIGN="center" HEIGHT="470">
</TD> </TR>
</BODY></HTML

***

HTML. <TABLE>,
<TR>, <TD>,
<TH>. ,
68

, ,
, .
,
web-.

1. .
<TABLE> ( ), <TR> (
), <TD> ( ).
web- ( page4.htm)
(. 3.18), .
1

. 3.18.

<TABLE> BORDER="1" ALIGN="center".


.
, .
<WIDTH="60%">,
, ,
CELLPADDING="20"
CELLSPACING="10" .
- (BGCOLOR="lime"),
(BORDERCOLOR="red")
.
.
ALIGN="center" <TR> () .
2. . ,
,
COLSPAN ( ) ROWSPAN ( )
<TD>.
web- (. 3.19).
. page5.htm.
, .
69

,
BORDERCOLORLIGHT BORDERCOLORDARK.

. 3.19.

.
.
3.
. , ()
, <CAPTION> <TH>.
(. 3.20) web- (
page6.htm).
2011

11

. 3.20.

,
, <TABLE> <CAPTION>
ALIGN="top" ( )
<TH>
. .
.
4. web- . web, . 3.21.


. 1
. 2


. 1
. 2
. 3.21.
70

web ( ) (. 3.14).
page7.htm.

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

web- ,
.
1

71

10

11

12

13

14

15

16

72

4.

web,
HTML-. ,
.
.
, , ,
web-

, .
,
.
HTML-, , , . .

.
, .
, , .
.
,
.


web-.
.
4.1.

.
(content page)
HTML,
. ,
(frameset page),
,
, ,
. ,
,
,
.
HTML-
. BODY
FRAMESET, <FRAMESET> </FRAMESET>.
73

HTML- (,
)
HTML-. <FRAMESET> ,
. 4.1.
4.1
<FRAMESET>

ROWS

COL

FRAMEBORDER

FRAMESPACING

BORDER
BORDEROLOR

,

ROWS="",

, ,

ROWS="30%, 70%"
COLS="",

, ,

COLS="*, 2*", *

1
( ),
0
FRAMEBORDER="1"
FRAMESPACING=""

FRAMESPACING="2"
BORDER=""
BORDER="5"
BORDEROLOR=""
BORDERCOLOR="red"

<FRAMESET> ROWS
COLS.
. :
, , .
. ROWS
<FRAMESET> ,
; COLS,
.

.
<FRAMESET ROWS="30%, 70%">

74

,
() 30 % ,
() 70 % ( 100 %).
<FRAMESET COLS="50%, 50%">

.

:
<FRAMESET COLS="*, 2*, 3*">

*

( ).
, ,
,
. , 1 + 2 + 3 = 6, . .
1/6 , 2/6 (1/3) 3/6
(1/2) .
HTML ROWS COLS
.
<FRAMESET ROWS ="250, 10%, *">

: 1-
250 , 2- 10 %
, 3- ,
.
,

(), , , ,
.
<FRAMESET>
ROWS COLS.
.
<FRAMESET ROWS ="40%, 60%" COLS="50%, 50%">

,
.
.
,
<FRAMESET>
.
<FRAME> ,

75

<FRAME>,
<FRAMESET>. <FRAME>
,
. 4.2.

,
.
SCROLLING, (yes), (no)
(auto
) .
4.2
<FRAME>

SRC

NAME

TARGET
SCROLLING

FRAMEBORDER
BORDERCOLOR
NORESIZE

MARGINWIDTH
WARGINHEIGHT

,

SRC="URL"

URL

NAME=""

-
TARGET=""

yes


no
auto

SCROLLING="yes"

FRAMEBORDER="5"
BORDERCOLOR=""
BORDERCOLOR="red"


MARGINWIDTH="1cm"

WARGINHEIGHT="2cm"


, .
76

,
<FRAME>.
FRAMEBORDER, : 0
, 1
.
BORDERCOLOR.
BORDERCOLOR, .

FRAMESET.
, RGB, .
, . : aqua, black, blue, fuchsia, gray,
green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow.
1.
HTML (. 4.1):
<HTML>
<HEAD> <TITLE>
</TITLE>
</HEAD><FRAMESET ROWS ="40%, 60%" COLS ="50%, 50%"
BORDER="5">
<FRAME><FRAME><FRAME><FRAME></FRAMESET>
</HTML>


-, 5
. -.

. 4.1. 1

.
SRC, web-.
,
(. 4.2).
77

<HTML>
<HEAD> <TITLE>
</TITLE>
</HEAD><FRAMESET ROWS ="40%, 60%" COLS ="50%, 50%"
BORDER="5">
<FRAME SRC="page1.htm"><FRAME SRC="page2.htm">
<FRAME SRC="page3.htm"><FRAME SRC="page4.htm">
</FRAMESET>
</HTML>

. 4.2.

MARGINWIDTH WARGINHEIGH
.

.
<FRAME MARGINWIDTH="5" WARGINHEIGH="3">

5 ,
3.
NAME TARGET,
,
.
4.2.

<FRAMESET> ,
( ).
(, ),
.

78


,
<FRAMESET>.
, <FRAMESET>, .

(. 4.3).
2
1

3
4

. 4.3.

.
-, . -,
.
:
. HTML ,
, . . 4.4.
<HTML>
<HEAD><TITLE>
</TITLE>.
</HEAD>
<FRAMESET COLS="40%, 60%">
<FRAME SRC="page2fl1.htm">
<FRAMESET ROWS="*, *, *">
<FRAME SRC="page2fl2.htm">
< FRAME SRC="page2fl3.htm">
<FRAME SRC="page2fl4.htm">
</ FRAMESET>
</FRAMESET>
</HTML>

79

. 4.4.

, <FRAMESET> .
<FRAME>,
. ,
.

web- (. 4.5, 4.6).

. 4.5.

<HTML>
<HEAD>
<TITLE>
</TITLE>
</HEAD>
<FRAMESET ROWS="25%, 50%, 25%">
<FRAME SRC="page2fl1.htm">
<FRAMESET COLS="25%, 75%">
<FRAME SRC="page2fl2.htm">
<FRAME SRC="page2fl3.htm">
</FRAMESET>
<FRAME SRC="page2fl4.htm">
</FRAMESET>

</HTML>

80

.
<FRAMESET>
,
(25, 50 25 %).
page2fl1.htm page2fl4.htm.
<FRAMESET>.
<FRAMESET COLS="25%, 75%">
<FRAME SRC="page2fl2.htm">
<FRAME SRC="page2fl3.htm">
</FRAMESET>

,
. 25 %,
75 % , page2fl2.htm
page2fl3.htm.
, ,
. 34
,
.


.

.

. 4.6.

81

<NOFRAMES></NOFRAMES>,
<BODY> </BODY>,
HTML-,
web-, .
4.3.

,

.
,

HTML-.


.
, ( )
NAME.

. ,
, :
- ,
,
. , ,
.
, NAME
<FRAME>.
<FRAME SRC="info.htm" NAME="perv">

, "perv"
info.htm.
TARGET <A>.
<A HREF="moreinfo.htm" TARGET="perv"> </A>

TARGET .
perv, . . info.htm,
, moreinfo.htm.
,

, .
, .
,
:
82

_blank ;
_self , ;
_parent ()
; ,
self;
_top ,
.
:
<A HREF="stuft.htm" TARGET="_blank">

,
stuft.htm.
HTML- .
<A HREF="stuft.htm" TARGET="_self">

, ,
, stuft.htm.
<A HREF="stuft.htm" TARGET="_parent">

,
, stuft.htm.
<A HREF="stuft.htm" TARGET="_top">

,
stuft.htm.

TARGET.
(. 4.7).

( )

. 4.7.

<HTML>
<HEAD>
<TITLE>
</TITLE>
</HEAD>
<FRAMESET ROWS="2*, *">
<FRAME NAME="menu" SRC="menu.htm" NORESIZE
83

FRAMEBORDER="1">
<FRAMESET COLS="50%, 50%">
<FRAME NAME="left" SRC="page2fl2.htm">
<FRAME NAME="right" SRC="page2fl3.htm">
</FRAMESET>
</FRAMESET>
</HTML>

,

, .
:
<HTML><HEAD>
<TITLE>
</TITLE></HEAD>
<BODY
BGCOLOR="#ffffff"
TEXT="black"
LINK="#ff0000"
ALINK="#00ff00" VLINK="blue">
<H3> ></H3>
<UL TYPE="square">
<LI><A HREF="page2fl4.htm" TARGET="left">
</A>
<LI><A HREF="page2fl4.htm" TARGET="right">
</A>
<LI><A HREF="page1121.htm" TARGET="left">
</A>
<LI><A HREF="page1121.htm" TARGET="right">
</A></UL></BODY></HTML>


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

84

. 4.8.

, ,
.
NAME TARGET.
. ,
,
.
, TARGET
, <BASE>,
HTML-.
, ,
TARGET
<BASE>. , HTML-,

, :
<HTML>
<HEAD>
<TITLE>
</TITLE>
<BASE TARGET="right" >
</HEAD>

85

4.4.

, HTML-
<BODY> </BODY> <IFRAME>
</IFRAME>, ,
inline frame.
<IMG>.

:
SRC URL- ;
WIDTH, HEIGHT ;
ALIGN
;
MARGINWIDTH, MARGINHEIGHT, FRAMEBORDER SCROLLING
,
;
NAME ,
.
,
, NORESIZE
<IFRAME>
HTML-, ,
, . 4.9.

. 4.9. HTML-

<HTML><HEAD>
<TITLE>
</TITLE></HEAD>
<BODY>
<P> </P>
<IFRAME NAME="plav" SRC="page2fl4.htm" MARGINWIDTH="30"
FRAMEBORDER="1" WIDTH="200" HEIGHT="200" ALIGN="center">
86

</IFRAME>
<P> </P>
<P> </P>
<P> </P>
</BODY>
</HTML>

***
,
,
.
. <BODY>
<FRAMESET>,
. <FRAME>.
, ,
.

87


WEB-

1. web-
.
.
<HEAD>
<TITLE>

</TITLE>
</HEAD>
</HTML>

</HEAD> <FRAMESET>
( )
ROWS COLS .
BORDER
BORDERCOLOR.
. ?
, ?
<FRAMESET> 6 <FRAME>
</FRAME>, .
. , .
SR ( ,
page1.htm, page2.htm . .,
).
.
,
.
.
:
.
2. web-
.
. ,
. 4.10.

88

. 4.10.

3. . web, (. 4.11).


. 4.11.


.
.

.

1. ?
2. ?
3.
?
4. HTML-
?
5. ?
6. <FRAMESET>
?
7.
?
8.
?
9. ?
10. <FRAME>?
11. NORESIZE <FRAME>?
12. <FRAME>
.
13. web-
?
14. web-
?
15. NAME TARGET
<FRAME>?
89

16.
17.
18.
19.
20.

.
?
.
?
?


, .
1

10

11

12

90

web-

13

14

15

16

5.


, , Microsoft Word,
.

, .
web- .

, <P> <H1>.
- , ,
.
, ,
,
. , HTML ,
, ,
. (CSS Cascading style
shuts) :
,
,
,
;
, ,
, , ,
, .
91

, CSS ,
HTML-.

web-,
HTML-.
5.1.

,
.

{ : ; }

CSS : .
,

. ,

<H1> <P>, ,
<A> <TD>.
,
P {color: red;}

P , {color: red;}
.
, , :
.
,
CSS.
, ,
.
, .
.
.
, , , ,
, . .
, .
, , 8pt,
1cm.
(,
15px).
(. 5.1).
P { font-size: 14pt;}
92


14 .
5.1

in
cm
mm
pt
pc

px
%


, .
, ,
font-family, text-align.
color
background-color, RGB. , CSS
, HTML: (,
rgb(128, 0, 128)) (, rgb(50%, 0, 50%)).
. ,
,
. CSS,
, .

. ,
.
P {color: blue; background: white;}

,
.
.
H1 {
Font-family: Helvetica;
Font-style: italic;
Font-size: 30pt;
93

Color: black;
}
P {
Font-size: small;
}


( , , )
( ).
CSS
. class id,
, HTML.

, , :
BODY {
Font-family: "Lucida Grande", Verdana, Arial, sans-serif;
}

.
Lucida Grande,
.
Verdana. Verdana Arial . .
, ,

.
.
,
. ,

.

.
:
, ()
,
.
,
,
.
:
:
P {font-size: small;}
TD {font-size: small;}
94

UL {font-size: small;}
OL {font-size: small;}
LI {font-size: small;}

:
P, TD, UL, OL, LI {font-size: small;}

:
:
BODY {margin-top: 12pt; margin-right: 10pt; margin-left: 15pt;}

:
BODY {margin: 12pt 10pt 15pt;}

CSS
: , , , .
. HTML- ,
, .
,
, .
:
. {}
, HTML-,
, .
,
. ,
1 blue:
H1.blue {color: blue}


( ;
,
).
HTML-
CLASS, . ,
1 CLASS="blue" .

HTML-. CSS , .
. {}
.green {color: green;}
95

CLASS="green"
.
<H2 CLASS="green" >
<DIV CLASS="green" >
<P CLASS="green">


: ,
.
ID-. , id-
() CSS,
,
.
#id {}
# .
,
.
BODY
.
HTML- web-
ID.
, ,
CSS :
#red {color: ff0000;}

ID:
<P ID="red">

5.2. CSS

web-
:
;
;
.

. :

96

,
.
. CSS ,
HTML-.
STYLE, ,
. STYLE
( ),
( ).
, .
STYLE :
< P STYLE="fontsize: 1.5cm; color: green;">

STYLE HTML ,
. 5.1.
<HTML>
<HEAD>
<TITLE> </TITLE>
</HEAD>
<BODY BGCOLOR="white" TEXT="black">
<H2> </H2>
<HR>
<UL>
<LI>
<LI STYLE="color: red; font-size: 1cm; font-style: italic;">
1
<LI STYLE="color: blue; font-size: 0.5cm margin-top: 2cm;">
0.5 2
</UL>
</BODY>
</HTML>

97

. 5.1.

,
<SPAN>. ,
.
<H1>
<SPAN STYLE="color: red;"> </SPAN>
</H1>

,
,
.
<DIV STYLE="fony-family: serif; color: brown;">
<H1> </H1>
<H2> 1</H2>
<BR><BR>
<CITE>. <CITE>
</DIV>

H1, H2, CITE DIV


serif .
, .
. ,
, web-.
,
<STYLE> </STYLE>.
<STYLE TYPE="text/css">
<! -- -- >
</STYLE>

text/css TYPE ,
CSS.
, CSS-,
STYLE.
.

.
( )
{
: ;

: ;
}
98


HTML-:
<HTML>
<HEAD >
<STYLE TYPE ="text /css">
H1, H2, H3, H4, H5, H6
{
textalign: right;
color: maroon;
font family: "Arial Cyr", Geneva, Helvetica, Sans-serf;
}
</STYLE>
</HEAD>

. , ,
web-.
.css,
HTML-,
. ,
, .
,
, .
,
( ) ,
, , , style.css.
.
<STYLE TYPE="text/css">
BODY{background: black; font-size: 9pt; color: red; font-family: Arial;}
.base {color: blue; font-style: italic;}
H1 {color: white;}
#bold {font-weight: bold;}
</STYLE>

HTML-
<LINK>.
<LINK REL="stylesheet" TYPE="text/css" HREF=" ">

HTML-, .
<HTML>
<TITLE> </TITLE>
</HEAD>
<LINK REL="stylesheet" TYPE="text/css" HREF="styles.css">
<BODY>
</BODY>
</HTML>
99

5.3.

CSS HTML-
. HTML-
.
HTML,
HEAD BODY. ,
, . ,
HEAD
TITLE STYLE, BODY Hx,
P, DIV, IMG . ,
,
.
HTML- BODY.
, ,
.

(. 5.2).
<HTML>
<HEAD>
<TITLE> </TITLE>
<STYLE type="text/css">
BODY {
background: white;
color: black;
font-family: sans-serif;
font-size: 10 pt;
}
H1, H2 {
color : green;
}
</STYLE>
</HEAD>
<BODY>
<H1> <I> ! </I >
</H1>
<H2> </H2>
<H3> </H3>
</BODY>
</HTML>

100

. 5.2.

(1) (2)
, .
! , <I>
<H1> , <I>
.
BODY
,
BODY .

HTML .
.
,
. ,
.
HTML-
.

.
,
. CSS-
, ( ) .
<STYLE type ="text/css">
TABLE TH BIG {color: blue;}
</STYLE>

BIG,
(TH) (TABLE).
,
,
.

, .
101

.
. ,
. ,
web-.
, web. , STYLE,
. .
. .
(
) (. 5.3).
<HTML>
<HEAD>
<TITLE> </TITLE>
<STYLE TYPE="text/css">
BODY H2{
font-family: Arial;
font-size: 10pt;
text-align: right;
color: red;
}
</STYLE></HEAD><BODY>
<H2> ! </H2>
<H2 STYLE="font-family:Courier New; font-size: 17pt;
text-align: center; color: green;">
</H2>
<H3> </H3>
</BODY></HTML>

. 5.3.

102

2
( Arial 10
). 2
Courier New,

17 ,
STYLE .

5.4. CSS


HTML- .
, HTML - <B> (STRONG), CSS font-weight: bold.
HTML <U>, CSS
text-decoration: underline; . .
70 . ,
, : ,
.
CSS . CSS HTML
, HTML.
(, , ,
) CSS
, ,
( ) .
. 5.1.
5.1
CSS

Font-family
Font-style
Font-size
Font-weight
Font-variant
Text-align
Text-decoration
Text-indent
Line-height










103



font-family: Tahoma, Arial;
font-style: italic;
font-size: 14pt;
font-weight: bold;
font-variant: small-caps;
text-align: center;
text-decoration: underline;
text-indent: 1.25cm
line-height: 15px;

Text-transform
Color
Background-color
Background-image
Background-repeat
Background-attachment
Background-position

text-transform: uppercase;
color: blue;
background-color: white;
background-image:
images/picture.gif

background-repeat: repeat-x;

background-attachment: scroll;

background-position: middle;

Font-family
.
( ) Serif
(), Sans-serif ()
Monospace (
).
Windows: Times New Roman , Arial
, Courier .
,
H1, H2, H3, H4, H5, H6
{font-family: "Arial Cyr", Geneva, Helvetica, sans-serif;}

.
Arial Cyr, Geneva, Helvetica ,
, - .
Font-style .
: normal (), italic (), oblique
().
Font-size
, .
(
): large , smaller .

: in, cm, mm, px, pt, pc.
:
xx-small ;
x-small ;
small ;
medium ;
large ;
x-large ;
xx-large .
104

Font-weight : normal
- , lighter ,
bold , bolder ;
Font-variant
: normal , smallcaps .
Text-align
web-, :
.
: P, H1H6, TD, TR . Text-align
: left , right, center, justify.
P {text-align: justify; font-weight: bold; font-variant: small-caps; }


.
Text-decoration
: none , underline
, line-through , overline
, blink .
Text-indent ,
, , .
P {text-indent: 10pt; text-decoration: underline;}


( ) 10 .
Line-height web- , , % ,
.
P {line-height : 5px;}


5 .
Text-transform
: normal -
, apitalize ,
uppercase , lowercase
.
.caption {text-transform: lowercase; }

,
HTML-, .
:
color, background-color.

: (, #eee5db);
105

, (, red);
RGB (, RGB(255, 64, 0)).
<P STYLE="color: white; background-color: black">


: background-image ,
background-repeat .
Background-image
.
BODY {background-image: URL;}

URL .
Background-repeat ()
HTML-:
repeat , repeat-x
, repeat-y .
BODY {background-image: images/picture.gif;
background-repeat: repeat-x;}


.

: background-attachment
; background-position
( backgroundrepeat repeat-x repeat-y).
Background-attachment
: scroll
, fixed
.
BODY {background-image: images/picture.gif;
backgroundattachment: scroll;}


.
Background-position ,
background-repeat repeat-x repeat-y.

: top ,
middle , bottom , left
, right

, center .
BODY {background-position: 30cm 0cm;}
TD {background-position : middle;}


.
106

<DIV> <SPAN> CSS.


,
. , , ,
, <DIV> </DIV> <SPAN> </SPAN>.
<DIV> <SPAN> : <DIV>
, <SPAN> .

CSS HTML-.
. 5.4.
<HTML>
<HEAD>
<IL> CSS</TITLE>
<STYLE TYPE="text/css">
<! - .text {font-family: Tahoma; color: #003366;
line-height: 7mm; font-size: 12pt;}
#kursiv {font-style: italic;}
SPAN.font {font-size: 11px;}
.color {background-color: #cecece; } - ->
</STYLE>
</HEAD>
<BODY BGCOLOR="#ffffff" TEXT="black "LINK="#00ff00"
ALINK="#00ff00" VLINK="blue">
<FONT CLASS="text">
CSS

, HTML.

(<FONT
STYLE="text-decoration:
underline;">

</FN>, <FONT ID="kursiv">ypc</FONT>, <FONT STYLE="fontweight: bold;"> </FN>, <FONT STYLE="fontfamily: Times New Roman;"> </FONT> <SPAN
CLASS="font"> paep pa </SPAN>), CSS
<FONT LSS="lr">
</FONT>, <FONT STYLE="letter-spacing: 3;"> eye
</FONT> , <FONT STYLE="text-transform:
uppercase;"> perpa</FONT>
( ) .
</FONT>
</BODY>
</HTML>

107

. 5.4.

.

: P, DIV
.
CSS . 5.2.

,
HTML <LI>. CSS
: list-style-type , liststyle-image .
5.2
CSS

List-style-type
List-style-image
Margin-left
( Padding-left)
Margin-right
( Padding-right)
Margin-top
( Padding-top)
Margin-bottom
( Padding-bottom)
Margin (padding)



list-style-type: circle;

list-style-image:

image/marker.gif;

margin-left: 10mm;
(padding-lef: 10mm;)

margin-right: 10mm;
(padding-right: 10mm;)

margin-top: 15mm;
(padding-top: 15mm;)

margin-bottom: 15mm;
(padding bottom: 15mm;)

margin: 1px 2px 3px 4px;


108

Border-color
Background-color

, ,

Border-style

Border-width
Width
Height
Float
Clear

(padding: 15px 10px 15px


10px;)
border-width: 20px;
width: 500px;
height: 500px;
float: right;
clear: both;
border-color: red;
background-color:
#c0c0c0;
border-style: dotted;

List-style-type
:
none ;
disc ;
circle ;
square ;
decimal ;
lower-roman ;
upper-roman
;
lower-alpha ;
upper-alpha .
LI {list-style-type: square;}


.
List-style-image:URL

.
Li {list-style-image: image/marker.gif;}

.

: margin-left , margin-right
, margin-top , margin-bottom .
,
.

109


, , , ,
.
P {margin-left: 20 px;}
IMG {margin: 10mm 15mm 10mm 15mm;}

20 ,
, ,
margin ,
10 , 15 .
padding-left, padding-right, padding-top, padding-bottom
HTML,
. ,
.
TABLE {
padding-left: 10px;
padding-right: 10px;
padding-top: 15px;
padding-bottom: 15px;}

:
TABLE {padding: 15px 10px 15px 10px;}

Border-width ,
, , ,
, .
TD {Border-width: 2px;}

Width height ,
, ,
, .
.
, .
IMG {height: 80%;
Width: 120 px;}

Float -
, .
: left , right
, none
.
TD {float: left;}

110

Clear
web-. : left
, right , both .
IMG {clear: both;}

Border-color : ,
.
.
TABLE {border-color: blue;}

Background-color ,
. .
TABLE { Background-color: green;}

Border-style .
: dotted , solid
, double , groove
, ridge , insert , ,
outset .
,
.
, .
TD { Border-style: groove;}

web-

CSS.
. 5.5.
<HTML>
<HEAD>
<IL> CSS </TITLE>
<STYLE TYPE="text/css">
<!-.text {font-family: Tahoma; color: #003366;
line-height: 7mm; font-size: 12pt;
margin:10px 10px 10px 10px; padding-left: 15px;
padding-right 15px; border-color: black;
border-style: dotted; background-color: #c0c0c0;
width: 500px; text-align: justify;}
#kursiv {font-style: italic;}
SPAN.font {font-size: 11px;}
.color {background-color: #cecece; }
IMG {float: left; width: 100px; height: 100px; margin-top: 15px;
margin-right: 15px;}
LI {list-style-type: circle;}
-->
111

</STYLE>
</HEAD>
<BODY BGCOLOR="#ffffff" TEXT="black" LINK="#00ff00"
ALINK="#00ff00" VLINK="blue">
<P CLASS="text">
<IMG
SRC="picture.gif">
CSS

,
HTML. :</P>
<UL>
<LI><FONT STYLE="text-decoration: underline;">
</FN>
<LI> <FONT ID="kursiv">ypc</FONT>
<LI><FONT STYLE="font-weight: bold;"> </FN>,
<LI><FONT STYLE="font-family: Times New Roman;">
</FONT>
<LI> <SPAN CLASS="font"> paep pa </SPAN>
</UL>
<P CLASS="text">
CSS <FONT LSS="lr">
</FONT>, <FONT STYLE="letter-spacing: 3;">
eye </FONT> , <FONT
STYLE="text-transform: uppercase;"> pepa</FONT>
( ) .
</P>
</BODY>
</HTML>

. 5.5.
CSS
112

,
CSS, : text-align,
background-color . ,
CSS ,
.
5.5.

web-
HTML. CSS

.
DIV, ,
,
. web-. <LAYER>
( Netscape Communicator) DIV ( Internet Explorer)

.
:
.
position top () left
().

(position:
absolute)
,
.
<IMG SRC="picture.gif" WIDTH="100" HEIGHT="100" ALT=""
STYLE="position: absolute; top: 10px; left=25px;">

10 25
(

).
,
, ,
.
HTML- (. . 5.6).
<HTML>
<HEAD>
<TITLE> CSS </TITLE>
<STYLE TYPE="text/css">
<!-113

.area1 {
position: absolute; top: 10; left:10;
color: red; font-weight: bolder; font-size: 40pt;
background: aqua; padding-right: 12pt;
}
.area2 {
position: absolute; top: 20; left: 150;
color: maroon; background: #cfb597; padding: 12pt;
}
.area3 {
position: absolute; top: 70; left: 130;
color: blue; background: #c0c0c0; padding: 12pt;
}-->
</STYLE>
</HEAD>
<BODY bgcolor="white" text="black">
<DIV CLASS="area1"><IMG SRC="image007.gif" width="50"
height="50"></DIV>
<DIV CLASS="area2"> ,</DIV>
<DIV CLASS="area3"> ? </DIV>
</BODY>
</HTML>

(position: relative)

(. . ).
<DIV ID="text" STYLE="position: relative; top: 50px; left: 50px; ">

. 5.6.


.
114

,
.
.
, , left
top . HTML-
(. . 5.7).
<HTML>
<HEAD>
<TITLE> CSS </TITLE>
</HEAD>
<BODY BGCOLOR="white" TEXT="black">
<H1> </H1>
<P>
<IMG SRC="image007.gif" width="50" height="50" align="left"
hspace="10" style="position: relative; left: 0px; top: 50px;">
50
,

</P>
<BR clear=left>
</BODY>
</HTML>

. 5.7.


z-index. , (
) . ,
, .
, z-index
(), () .
z-index,
115

. ,
z-index.
HTML-
z-index, . 5.8.

. 5.8. z-index

<HEAD>
<TITLE> z-index </TITLE>
</HEAD>
<BODY BGCOLOR="white" TEXT="black">
<H2>z-index </H2>
<HR> <P>
<DIV STYLE="position: absolute; top: 50; left: 140;
height: 130; width: 100;
color: white; font-size: 60;
background: red; z-index:3">
</DIV>
<DIV STYLE="position: absolute; top: 50; left: 360;
height: 30; width: 100;
color: white; font-size: 30;
background: blue; z-index: 1">
</DIV>
<DIV STYLE="position: absolute; top: 80; left: 270;
width: 125; z-index: 2">
<IMG SRC="image007.gif" width=125 height=125></DIV>
</BODY>
</HTML>

***
, , ,
,
.
116


CSS,
: , .

,
,
.
.

CSS
WEB-
1. .
) web-,
, <P>. web-
,
. ,
STYLE <P>.
( text-align)
( text-indent) 1 .
( text-align), (color)
(background-color).
(border-style) (border-color).
, ,
.
st01.htm ;
) HTML-,
. .
, ,
.
: , ,
50% .
<FONT>
: text-decoration , font-size
, color .
, .
st02.htm .
2. web-.
) web-,
, <P>.
web-. <STYLE type =text/css>
</STYLE>, ,
.
117

,
2 , 1 , 1,25 .
: margin-left, margin-right, text-indent.
CLASS.
st03.htm .
) web- .
,
<STYLE type ="text/css"> </STYLE>. ,
( CSS
. {}).
- , .
- , .
0,5 .
: color, background-color, text-align, border-color,
border-style, margin.
, 1 .
. :
color, margin-left, margin-right, font-family.
st04.htm .
3. ,
. web-
. .
,
-.
<IMG> : ,
( ),
,

.
:
border-style, width, heigh, margin-left, clear.
, ,
, .
: font-style,
font-size, color.
style05.css. web-.
<BODY>
, . . <LINK REL="styleshee"t TYPE="text/cs"s
HREF=" ">,
style05.css. web-
st05.htm .

1. .
2. CSS?
3. CSS?
118

4. CSS?
5. ?
6. ?
7. ?
8. ?
9. ?
10. ?
11.

12. ?
13. .
14.

HTML-?
15.
?
16. ?
17. ?
18. web.
19. ?
20. ?
21. ,
?
22.
web-?
23. ?
24. ?
25. .
26. , ,
?
27. ,
?
28. CSS ?
29.

?
30. ?
31. .
32. ?
33.
?
34. , ?
35. HTML-?
36.
?
119

37. ?
38. ?
39.

1. , ,
, . .
,
.
2.
(, ).
,
.
3. (.ground)
(.poster), .
- .
.
4. ,
.
5. z-index,
.
.
6. ,
,
, . :

,
. , ,
.
7. ,
.
0,5 , -, .
, .
8. , ,
.
, 1 .
.
.
9. ,
,
, 50 .

120

,
.
10. .
,
.
. .
11. ,
,
.
12. ,
,
.
13. ,

.
14. ,
,
.
15. ,
.
, .
16. ,
,
.

6.
WEB-


(, , , , .
.),
. web-
.
HTML- .
, (,
) , ,
, -, ,
. . ,

.

.

,
121

,
- .
6.1.

HTML <FORM>
</FORM>,
. ,
<FORM> </FORM>.
:
<FORM NAME="_" ACTION="URL" METHOD=""
ENCTYPE="_">
....
</FORM>

NAME , .
,
. ,
.
, NAME,
, .
, ,
(CGI-
). HTML 4 NAME
ID,
NAME ID,
.
<FORM NAME="anketa" ID="anketa">

ACTION (URL),
. ,
, .
<FORM ACTION="http://www.earthwed.com/cgi-bin/s97r">

, www.earthwed.com
, , s97r,
cgi-bin. ACTION
.
ACTION="mailto:bap@mail.ru"

, ,
.
122

METHOD ,
().
: get post.
get ,
.
, -
.
URL.
post ,
.
URL.
<FORM METHOD="post" ACTION="http://www.earthwed.com/cgi-bin
/comment_script">

post
comment_script, cgi-bin
.
ENCTYPE
, ,
web-. :
applicatiom/x-www-form-urlencoded (
), text-plain (
, URL mailto ACTION),
multipart/form-data ( ).
<FORM ENCTYPE="multipart/form-data" METHOD="post"
ACTION="http://www.earthwed.com/cgi-bin/comment_script">


comment_script, cgi-bin
, post.
6.2.


: <INPUT>, <TEXTAREA> <SELECT>.
<INPUT>
web- ( ,
, , ,
(submit) (Reset, Clear)).
<TEXTAREA>
.

123

<SELECT>,
<OPTIONS>.

. 6.1.
6.1

TYPE
NAME
VALUE

INPUT

SIZE
CHEKED
MAXLENGTH
ALIGN
SRC


: text, password,
checkbox, radio, submit, image, reset

,
TYPE





URL
. 6.1

TEXTAREA

SELECT

OPTION

COLS
ROWS
NAME
WRAP
NAME
SIZE
MULTIPLE
VALUE
SELECTID

INPUT

TYPE.
TYPE="text"
. :
NAME, SIZE, MAXLENGTH VALUE.
<HTML>
<HEAD>
124

<TITLE> </TITLE>
</HEAD>
<BODY TEXT="blue">
<FORM>
<BR>
<INPUT TYPE="text" NAME="pokup" SIZE="30"
VALUE=" "> <BR><BR>
<BR>
<INPUT TYPE="text "NAME="email" SIZE="30"
value="Ivanov@sch62.nsk.ru">
</FORM>
</BODY>
</HTML>

:
pokup= ; email=Ivanov@sch62.nsk.ru (.
. 6.1).
TYPE="password" ,
.
(NAME, SIZE, MAXLENGTH VALUE),

.
<FORM>
<INPUT TYPE="password" NAME="password" SIZE="4"
MAXLENGTH="10">
</FORM>

. 6.1.

TYPE="checkbox"
,
125

(). (NAME, VALUE,


CHECKED). <INPUT>
.
, , CHECKED.

VALUE,
, .
,
(. . 6.2).
<HTML>
<HEAD>
<TITLE> </TITLE>
</HEAD>
<BODY>
<P>
:
</P>
<FORM>
<INPUT TYPE="checkbox" NAME="html">&nbsp;
HTML
<BR>
<INPUT TYPE="checkbox" NAME="js">&nbsp;
Java Script
<BR>
<INPUT TYPE="checkbox" NAME="dhtml" CHEKED>&nbsp;
DHTML .
<BR>
</FORM>
</BODY>
</HTML>

126

. 6.2.


DHTML-., CHECKED.

.
( VALUE)
.
HTML
, .
LABEL,
. ,

. 6.2 HTML
:
<INPUT TYPE="checkbox" NAME="html" ID="html" >
<LABEL FOR="html"> &nbsp; HTML
</LABEL><BR>

<LABEL>
FOR.
ID
web-.
TYPE="radio"
. ,
NAME ( ), VALUE
CHECKED.
,
HTML- (. . 6.3).
<HTML><HEAD>
<TITLE> </TITLE></HEAD>
<BODY>
<P> : </P><BR>
<FORM>
<INPUT TYPE="radio" NAME="autor" VALUE="hykovsky">
<BR>
<INPUT TYPE="radio" NAME="autor" VALUE="Visockiy">
<BR>
</FORM>
</BODY></HTML>

127

. 6.3.

,
.
<INPUT TYPE="radio" NAME="autor" ID="r1" VALUE="hykovsky">
<LABEL FOR="r1"> </LABEL><BR>
<INPUT TYPE="radio" NAME="autor" ID="r2" VALUE="Visockiy">
<LABEL FOR="r2"> </LABEL><BR>

TYPE="button"
.
VALUE. .
<INPUT TYPE="button" VALUE="" NAME="start">

TYPE="reset" ,
. . . VALUE
. ,
.
<INPUT TYPE="reset" VALUE="">

TYPE="submit" ,

-.
<INPUT TYPE="submit" VALUE=" "NAME="trans">

VALUE NAME,
. VALUE ,

128

. submit ,
Enter.
HTML

, -.
<INPUT> TYPE="image"
, SRC.
<INPUT TYPE="image" SRC="image007.gif" ALIGN="top"
NAME="picture">

NAME
.
HTML-
web- (. 6.4).
<HTML><HEAD>
<TITLE> </TITLE>
</HEAD>
<BODY>
<P> </P>
<BR>
<FORM>
button<BR>
<INPUT TYPE="button" VALUE="" NAME="start">
<BR><BR>
reset<BR>
<INPUT TYPE="reset" VALUE=""
><BR><BR>
submit<BR>
<INPUT TYPE="submit" VALUE="" NAME="trans">
<BR><BR>
image<BR>
<INPUT TYPE="image" SRC="image007.gif" ALIGN="top"
NAME="picture">
</FORM>
</BODY></HTML>

129

. 6.4.

<TEXTAREA> </TEXTAREA>
.
: NAME ( ), ROWS ( ), COLS
( ).
<TEXTAREA NAME="adres" ROWS="3" COLS="28">

, 28 .
<TEXTAREA> </TEXTAREA>
, .
HTML-
(. 6.5).
<HTML>
<HEAD>
<TITLE> </TITLE>
</HEAD>
<BODY>
<FORM><TEXTAREA NAME="adres" ROWS="3" COLS="28">
660037
. 31

</TEXTAREA>
</FORM>
</BODY>
</HTML>

130

. 6.5.

: adres=660037
, 31, .
<SELECT> </SELECT>
,
,
( checkbox radio).
: NAME (), SIZE
( , 1),
MULTIPLE (
).
<SELECT NAME="city" SIZE="5">

<OPTION>,
<SELECT>. <OPTION>
: VALUE ,
()
, SELECTED ,
. , <OPTION>
:
<OPTION VALUE="Moscow">

HTML-,

(. 6.6).

131

. 6.6.

<HTML><HEAD>
<TITLE> </TITLE>
</HEAD><BODY><FORM>
<H3> </H3>
<P>
<BR>
.<BR>
.<BR>
,<BR>
.
</P>
<SELECT Name="autor">
<OPTION>. </OPTION>
<OPTION SELECTED>.</OPTION>
<OPTION>.</OPTION>
<OPTION>.</OPTION
</SELECT>
</FORM></BODY></HTML>

6.3.


.
132


(. 6.7). HTML- (. 6.8).

. 6.7.

. 6.8.

<HTML>
<HEAD>
<TITLE> </TITLE>
</HEAD>
<BODY>
<FORM ACTION="http://www.earthwed.com/cgi-bin/s97r"
METHOD="post" ENCTYPE="text/plain">
<TABLE border="1" cellspadding="10" cellspacing="0"
bgcolor="#dfd9bb">
<TR>
<TD COLSPAN="3">
.
</TD>
</TR>
<TR>
<TD><INPUT TYPE="radio" NAME="ocenka"
VALUE="super">
</TD>
133

<TD>< INPUT TYPE="radio" NAME="ocenka"


VALUE="good">
</TD>
<TD>< INPUT TYPE="radio" NAME="ocenka"
VALUE="bad"> </TD>
</TR>
<TR>
<TD COLSPAN="3">
<INPUT TYPE="submit "NAME="vote" VALUE="">
</TD>
</TR>
</TABLE>
</FORM>
</BODY>
</HTML>

***

<FORM>.

. ,
.
<INPUT>,
<SELECT>, <TEXTAREA> .


(. 6.9). ,
.
web-.
<HTML>
<HEAD>
<TITLE> </TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
134

<BODY> ,
BGCOLOR TEXT.
, (2).
<FORM> </FORM>
. (<TABLE>),
(<TR>).
(BORDER) (ALIGN).
(<TH>),
(BGCOLOR) (WIDTH)
50 %.
(. 6.9).
.
<TD></TD>. - (BGCOLOR) (WIDTH) 50 %.
<INPUT>
(TYPE="text") (TYPE="password")
,
(<BR>). (TYPE="checkbox")
<INPUT> .
NAME VALUE .
,
. <SELECT>
: , , , , .
<OPTION>.
VALUE.
.
: , -, , , ,
.
<TEXTAREA>, 5 25 .
<INPUT> (TYPE="radio")
, . 6.9.
,
(COLSPAN), (ALIGN)
(BGCOLOR) .
(TYPE="submit")
(TYPE="reset"). (&nbsp).

-
135

e-mail

. 6.9.

. ,
(. 6.9). HTML-
anketa.htm.

1. ?
2. ?
3. <FORM>.
?
4.
?
5. ?
6.
?
7. ?
8. ?
9.
?
10. ?
11. ?
136

12. , ?
13. VALUE ?
14. ?
15. <TEXTAREA>?
16. ?
17. SELECTED ?
18.
?

.
,
2blanka.ru.
1. , 9.
2. , 4.
3. , 12.
4. , , -1.
5. .
6. , . 113.
7. .
8. .
9. .
10. .
11. .
12. .
13. , 7.
14. - .
15. ()
.
16. , 10.

137


HTML, ,
.
,
-.
HTML
, Java, JavaScrip, Perl, PHP . .
web-,
, , .
Java ,
HTML-.
. JavaScript ,
HTML-.
HTML- <SCRIPT>.
PHP , ,
HTML-.
HTML- , -
. , , XML HTML ,
,

. XHTML HTML
XML. DHTML ( HTML)
, JavaScript .
web- Adobe
Golive, Microsoft Front Page, Macromedia Dreamweaver.
Adobe Photoshop, Macromedia
Flash, Corel DRAW. -
Adobe Premier, Apple Final Cut Pro, Apple Quick Time, Windows Media.
web-, HTML
,
web- .

138

1. , . . HTML. / . . . . :
, 2008. 268 .
2. , . . 100 % web-
web-. HTML Javascript / . . , . . . . :
-3000 : , 2008. 464 .
3. , . web- : [. .] / .
. . : : , 2005. 387 .
4. , . Web- / . ; .
. . . . . : , 2005. 440 .
5. , . . HTML web- / . . . . :
-, 2004. 400 .
6. , . . :
/ . . ; . . - ,
. ., 2004. 158 .
7. , . web-. / . .
. : , 2003. 448 .
8. , . . Web-. HTML / . . .
. : -, 2003. 336 .
9. , . . web- / . . . . :
-, 2003. 256 .
10. , . . Web-. DHTML / . . .
. : -, 2003. 512 .

139

WEB-

140

. .
- . .

24.02.12. 6084/8. .
. . . . 8,0. .-. . 10,6. 100 .

. 26/12.
-
24.49.04.953..000032.01.03 29.01.2003 .
- . . . -.
-
. . . -.
660014, . , . . . , 31.
141

142