Разработка Web Страниц

. .
. .
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;
<
>
"
&
&
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;
</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;
</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"> 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

(
WIDTH="50">
)
42
HEIGHT
(
)
WIDTH="50"
HEIGHT="50">
. 2.2
ALT
(
)
BORDER
VSPACE

HSPACE

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

VSPACE="20"
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>
<FRAME SRC="page2fl1.htm">
<FRAMESET ROWS="*, *, *">
< FRAME SRC="page2fl3.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%">
</FRAMESET>
</FRAMESET>
</HTML>
80
.
<FRAMESET>
,
(25, 50 25 %).
page2fl1.htm page2fl4.htm.
<FRAMESET>.
</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">
<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.
.
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>
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>
<! - .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"
<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>
<!-.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"
<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>
<!-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>
<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>
<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>
height: 30; width: 100;
color: white; font-size: 30;
background: blue; z-index: 1">
</DIV>
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">
HTML
<BR>
<INPUT TYPE="checkbox" NAME="js">
Java Script
<BR>
<INPUT TYPE="checkbox" NAME="dhtml" CHEKED>
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"> 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

Разработка Web Страниц

Загружено:

Сведения о документе

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Разработка Web Страниц

Загружено:

Авторское право:

Доступные форматы

. .

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

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

: ALINK, VLINK, LINK

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

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

right, left, jastify center

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

<LI> </LI>. TYPE

<A TITLE=" ">

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

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

SRC () URL- (. 2.3).

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

. <TR>, <TD> <TH>

left, right, center

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

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

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

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

H1, H2, CITE DIV

<DIV> <SPAN> CSS.

margin: 1px 2px 3px 4px;

(padding: 15px 10px 15px

(). (NAME, VALUE,

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

Вам также может понравиться