, 6.050103 , :WEB-.
5 , , , , . , .
Internet web- HTML CSS.
web- , .
:
: HTML; HTML; .
: Web- HTML; ; ; c , ; ; ; .
| / | ʳ | |
| 1. | HTML: , | 1,5 |
| 2. | HTML: , | 1,5 |
| 3. | HTML: , | |
| 4. | HTML: , | |
| 5. | Web- CSS | |
| : |
Ͳ Ͳ Dz
ϳ . .
:
1. , .
2. .
3. [1 - 7].
4. .
6. .
8. .
9. .
10. .
: ; ; WWW- HTML-; WWW- ; .
ϳ .
|
|
|
1
. HTML: , .
: HTML ; HTML 4.0.
1.1.
ó , Web- . , , , .
(browser) Web-.
HTML - . Web-, , . Microsoft Internet Explorer Netscape Navigator. ֳ . - WWW.
() , HTML. 䳿 . < >.
HTML-:
, () () . , HTML-. , HTML-.
() . ³ , ' .
1.2.
HTML 4.0 . ( ) ; ( ) ; .
, , . -. .1.1.
1.1
| <B> <I> <TT> <U> <SUB> <SUP> <STRIKE> | ϳ ϳ |
(. . 1.2), , , . , Web - .
1.2
| <EM> <STRONG> <CITE> <CODE> <SAMP> <DFN> <KBD> <VAR> <ACRONYM> | , HTML - -//- , , , () |
FONT . SIZE ( 1 7) , , ( -4 +4):
|
|
|
<FONT SIZE=>
- COLOR, , :
<FONT COLOR=#rrggbb></FONT> , ,
<FONT COLOR=RED></FONT>
BASEFONT:
<BASEFONT SIZE=>
Web - , ( HTML - ), . <PRE>. , , . . <P> <Hn>, <PRE>, . <PRE> <A> '.
1.3.
. <HR> , . , . <HR> . . (. . 1.3) , .
SIZE WIDTH . ALIGN LEFT, RIGHT, CENTER.
1.3
| SIZE WIDTH ALIGN NORHADE |
:
<HR SIZE=5 WIDTH=25% ALIGN=CENTER>
5 , 25% .
1.4.
Web - .
BGCOLOR <BODY> , , , . :
<BODY BGCOLOR=#rrggbb>
.....HTML -
</BODY>
#rrggbb , , .
BACKGROUND <BODY>:
<BODY BACKGROUND=.gif>
ϳ , . , , . TEXT <BODY>:
<BODY TEXT=#rrggbb>
.....HTML -
</BODY>
1. Web-.
1.1. , HTML- .
1.2. - (, ) (, Web Scripter).
1.3. Web-:
|
|
|
<HTML>
<HEAD>
<TITLE> Web-</TITLE>
</HEAD>
<BODY>
</BODY >
</HTML>
1.4. - ' .html.
1.5. . Web-. ³ . ' , .
.
2.1. <Hn></Hn>, n- . , H1...H6. 1 , 6 .
2.2. ³ . . .
2.3. , . .
2.4. , , ( ).
2.5. ALIGN, , . :
<H1 ALIGN=LEFT> </H1>
<H1 ALIGN=RIGHT> </H1>
<H1 ALIGN=CENTER> </H1>.
3. .
3.1. <HR> , .
3.2. , :
<H1 ALIGN=CENTER> </H1><HR>.
3.3. .
3.4. SIZE, WIDTH, ALIGN, .
3.4.1. SIZE . :
<H1 ALIGN=CENTER> </H1><HR SIZE=80>
3.4.2. .
3.4.3. .
3.4.4. WIDTH , :
<H1 ALIGN=CENTER> </H1><HR WIDTH=25%> , 25%
<H1 ALIGN=CENTER> </H1><HR WIDTH=300> 300 .
3.4.5. , .
3.4.6. ALIGN WIDTH, :
<H1 ALIGN=CENTER> </H1><HR WIDTH=25% ALIGN=LEFT>
3.4.7. . . ALIGN RIGHT CENTER.
4. .
4.1. <P> <BR> , . <P> , <BR> - . , . , .
4.2. , :
<BODY>
<H1 ALIGN=CENTER> </H1>
<BR><BR><BR>
<P> .
<P> <BR>
|
|
|
<BR>
<BR>
</BODY>
4.3. ( ), . ALIGN, :
<P ALIGN=CENTER> .
4.4. ALIGN . .
5. .
5.1. Web- ( ).
5.2. Web- , - Windows.
5.3. . , .
5.4. 3 , 50% . , .
5.5. Web - , HTML-. .
3. Ͳ
1. WWW-?
2. ?
3. HTML ?
4. HTML , , ?
2
. HTML: , .
: ; .
1.1.
: , .
(internal links) - ' . , .
(external links) (distant links) - Web - .
³ (relative links) (local links) - Web- ( Internet), , .
URL (Uniform Resource Locator), - Web - , (Location URL), .
URL :
1. Internet, '. , http://, gopher://, ftp://, telnet://.
2. (destination) - ' , '.
HTML :
<A HREF=URL> </A>
, .
# ' '. - '. , , . ' ':
<A HREF= #'_'> </A>
' '. ϳ Web - , , ' '. :
<A NAME='_'></A>
', <A NAME='_'>, .
(.mid,.wav,.au,.mpg) , - HTML - .
:
<A HREF=mailto:'_@'_'.'_> </A>
. ' (username) - ', . ' ' (machine name) - ' ', ( '). ' (domain name) - , Internet. @ ( at) .
1.2.
HTML . , .
|
|
|
()
<OL></OL>. <LI> ( list item - ).
:
<OL>
<LI>
<LI>
...........
<LI>
</OL>
<LI> , . .
. :
<OL TYPE= >
, . 2.1.
2.1.
| i I |
- . START:
<OL START= >
- , .
()
(bullet), , , .
<UL></UL>. <LI>.
HTML- .
. :
<LI TYPE= >,
, . 2.2.
2.2.
| ( ) | |
| Disc Square Circle |
(definition list).
<DL></DL>. <DT> <DD>, . <DT> URL. , <DD>.
1. .
2. .
2.1. .
2.2. , .
2.3. :
) Web - ( );
) ( ).
2.4. . . ϳ , .
3. .
 |
3.1. . . ³ , .
3.2. :
) ;
) ;
) .
3.3. :
) ;
) .
 |
3.4. , :
3.5. .
3. Ͳ
1. ?
2. HTML-?
3. URL?
4. ?
5. WWW-?
6. () ?
3
. HTML: , .
: ; Web-, Web-.
1.1. Web
Web-, , . , - Internet.
Web- <IMG>. .
| SRC= URL | ̳ | |
| ALT= | , , Web- | ͳ |
| ALIGN= | bottom | |
| HEIGHT=n | ( ) | |
| WIDTH=n | ( ) | |
| BORDER=n | ( ) | |
| HSPACE=n | ( ) | |
| VSPACE=n | ( ) | |
| USEMAP= | URL -, ' | - |
, VSPACE HSPACE. VSPACE , HSPACE - .
HEIGHT WIDTH <IMG>. . , . ³ - .
<BR> CLEAR. CLEAR .
, , , :
<BR CLEAR=LEFT>
, , , :
<BR CLEAR=RIGHT>
, , , :
<BR CLEAR=ALL>
ALT (alternative) , , , , . , :
<IMG SRC=.gif ALT= >
<A>...</A> <IMG>, , :
<A HREF=help.html> <IMG SRC=help.gif ALT= > </A>.
-
2 . HTML . 䳿:
1. HTML- <IMG>:
<IMG SRC="someimage.gif" USEMAP = "# '_1">
someimage.gif- ' *.gif *.jpeg , '_1
2. <MAP NAME= '_1>
<AREA SHAPE = " " COORDS = "X1,Y1,..." HREF="URL-">
</MAP>
- SHAPE , , :
- RECT- , COORDS .
- CIRCLE- , OORDS - .
- POLY- , OORDS - .
:
... <BODY>
<IMG SRC="search.gif" ALT=" " USEMAP="#map">
<MAP NAME="map">
<AREA SHAPE="RECT" COORDS=0,0,64,64
HREF="http://www.google.com/">
</MAP>
</BODY>...
<TABLE> , . Web-. ³ HTML <TABLE> : BORDER, CELLSPACING, CELLPADDING, WIDTH, ALIGN. Web- Netscape Navigator Internet Explorer ' HEIGHT, BGCOLOR BACKGROUND.
BORDER : BORDER=n, n . (, <TABLE BORDER >), 1. 0 (, <TABLE BORDER=0>) BORDER, .
CELLSPACING CELLPADDING, <TABLE>. CELLSPACING ( 2). CELLPADDING ( 1). 0, .
<TABLE BORDER WIDTH=90% CELLSPACING=4 CELLPADDING=5> , .
. ( ) , . . WIDTH ( ) HEIGHT ( ). .
<TABLE BORDER=2 WIDTH=90%> (90% Web-) .
<TABLE BORDER=0 WIDTH=600> WIDTH , , ( 640x480).
ALIGN . LEFT ( ) RIGHT ( ), CENTER ( ).
BGCOLOR BACKGROUND .
FRAME <TABLE>, RULES. , .
FRAME :
| ij | |
| BOX BORDER | |
| ABOVE | |
| BELOW | |
| HSIDES | |
| VSIDES | |
| LHS | |
| RHS | |
| VOID |
RULES :
| ij | |
| ALL | |
| GROUPS | , |
| ROWS | , |
| COLS | , |
| NONE |
, <CAPTION></CAPTION>. ( ) <TABLE>.
<CAPTION> ALIGN. :
ALIGN=LEFT|CENTER|RIGHT
VALIGN = ( ) OM ( )
, , , :
<CAPTION ALIGN=LEFT VALIGN=BOTTOM> </CAPTION>
<TD> <TH> <TR> . , . (ALIGN, VALIGN), , (COLSPAN, ROWSPAN).
. , , COLSPAN . , , ROWSPAN .
:
<TABLE BORDER=2>
<TR>
<TH COLSPAN=2>
</BR><TH> </BR>
<TR ALIGN=CENTER>
<TH ROWSPAN=2>
<TH>486
<TD>DX/100
<TR ALIGN=CENTER>
<TH>Pentium
<TD>200 MMX
</TABLE>
ALIGN CENTER, JUSTIFY, RIGHT LEFT.
VALIGN <TR>, <TH> <TD>. , . <TR>, VALIGN , .
BORDERCOLOR, BORDERCOLORLIGHT BORDERCOLORDARK . , BORDERCOLOR <TABLE>, <TR>, <TH> <TD>. BORDERCOLORLIGHT , BORDERCOLORDARK ( ). .
, (, , ) , . , WIDTH= 100%, . , .
, TD.
:
<TABLE><TR><TD> 1<TD>
<TABLE border=2><TR><TD>
</TABLE></TABLE>
1. .
2. ³ (, WebScripter) Web - .
3.
3.1. , . TOP, MIDDLE, BOTTOM.
3.2. , .
3.3. :
) - 20 ;
) - 10 .
3.4. ' :
1- - - 400, - 450;
2- - - 87, - 100;
3- - - 80, - 163;
4- - - 75, - 100;
5- - - 70, - 150.
3.5. , CLEAR.
3.6. -.
4. -.
4.1. ( -).
4.2. .
5. .
5.1. Web - , :
5.2. .
5.3. (, ) .
5.4. .
5.5. , .
3. Ͳ
1. ?
2. ALIGN?
3. -?
4. -?
5. Web- ?
6. ?
7. ?
8. ?
9. ?
10. ?
11. ?
4
. HTML: , .
: Web-; HTML-.
FRAMESET. <FRAMESET></FRAMESET> <BODY></BODY>.
, : ( COLS) ( ROWS). :
<FRAMESET ROWS=, ,*>
<FRAMESET COLS=, ,*>
.
<FRAMESET> - COLS ROWS. ( ) . :
<FRAMESET COLS=25%,75%>
<FRAMESET ROWS=50%,50%>
</FRAMESET>
<FRAMESET ROWS=10%,90%>
</FRAMESET>
</FRAMESET>
, ( 25%, - 75% ). , 50% . , 10%, - 90% .
<FRAME>, FRAMESET, , . URL ', ' :
<FRAMESET COLS/ROWS=>
<FRAME SRC=URL>
.....
</FRAMESET>
<FRAME> (frame window). ֳ <FRAMESET>; ' , <FRAME>.
MARGINWIDTH MADGIHEIGHT / / . .
SCROLLING yes, no auto. ³ , . auto.
NORESIZE ; , , . , .
FRAMEBORDER, BORDER BORDERCOLOR.
FRAMEBORDER <FRAME> <FRAMESET>. ³ yes ( ) no ( ).
BORDER . FRAMEBORDER=no, BORDER=0, .
BORDERCOLOR <FRAME> <FRAMESET> ( ). .
, . NAME, <FRAME>:
<FRAME SRC=URL NAME='_>
, TARGET, ' <A>:
<A HREF=_URL TARGET='_> </A>
_URL , ; '_ ', NAME <FRAME>.
, , HEAD HTML- <BASE> :
<HEAD>
<BASE TARGET='_>
</HEAD>
, , . TARGET , :
n TARGET=_blank , URL , .
n TARGET=_self , , .
n TARGET=_parent .
n TARGET=_top - ( ).
, .
NOFRAMES HTML-, , . , , , <NOFRAMES></NOFRAMES>. , NOFRAMES. :
<FRAMESET ROWS=25%,75%>
<FRAME SRC=file1.html>
<FRAME SRC=file2.html>
<NOFRAMES>
<P> , . </NOFRAMES>
- HTML - . <IFRAME> , <IMG> <OBJECT>. 4.1.
4.1 <IFRAME>
| ALIGN FRAMEBODER HEIGHT WIDTH MARINHEIGHT MARGINWIDTH NAME SCROLLING SRC | left/center/right 1/0 ' yes/no URL |
1.2.
(), . . :
<FORM ACTION="_" METHOD="" >
...
</FORM>
ACTION , , . METHOD .
4.2 FORM
| ACTION | HTTP URL | |
| METHOD | get ; URL ? post ; |
, :
<HTML>
<HEAD>
<TITLE> </TITLE>
</HEAD>
<BODY>
<FORM METHOD="POST" ACTION="/cgi-bin/data">
....
</FORM>
</BODY>
</HTML>
/cgi-bin/data - CGI, .
, , . HTML.
, , <FORM>...</FORM>.
1.3.
. , , .
, ' - INPUT, . , , 20 .
:
<INPUT TYPE=" " NAME="var-name" VALUE=" " SIZE="" MAXLENGTH="_">
TYPE , . ', . 4.3.
4.3 TYPE
| ' | |
| text | |
| password | |
| checkbox | ( ) |
| radio | - |
| reset | "" |
| submit | "³" |
| button | |
| hidden |
NAME ' , . ' .
VALUE ( ') , ( ).
SIZE , . MAXLENGTH, , . MAXLENGTH SIZE, , SIZE, .
:
<FORM METHOD="POST" ACTION="/cgi-bin/data">
':
<INPUT TYPE="text" NAME="username" VALUE="" SIZE="25"
MAXLENGTH="45">
</FORM>
:
Top of Form 1
':
Bottom of Form 1
1.4.
, , , .
<INPUT TYPE="password" NAME="var-name" VALUE=" " SIZE="25" MAXLENGTH="15">
, :
<FORM METHOD="POST" ACTION="/cgi-bin/data">
?
<INPUT TYPE="password" NAME="username" SIZE="10" MAXSIZE="15">
</FORM>
:
?
1.5.
, . <TEXTAREA>, :
<TEXTAREA NAME="var-name" ROWS="4" COLS="80">
,
</TEXTAREA>
NAME ' , , ROWS COLS .
, , <TEXTAREA> </TEXTAREA>.
, :
<TEXTAREA NAME="MyText" ROWS=5 COLS=80>
,
.
</TEXTAREA>
:
, .
1.6. -
- , , . , .
<INPUT> TYPE, "radio". -, NAME. , VALUE , , .
:
<FORM METHOD="POST" ACTION="/cgi-bin/data">
³ :
<BR>
<INPUT TYPE="radio" NAME="var-name" VALUE="red"> <BR>
<INPUT TYPE="radio" NAME="var-name" VALUE="grn"> <BR>
<INPUT TYPE="radio" NAME="var-name" VALUE="blu"> <BR>
<INPUT TYPE="radio" NAME="var-name" VALUE="yel"> <BR>
<INPUT TYPE="radio" NAME="var-name" VALUE="pnk"> <BR>
</FORM>
:
Top of Form 3
³ :
Bottom of Form 3
. CHECKED , . CHECKED .
1.7. ,
, . , , - , . , , 3-4 , .
<SELECT>...</SELECT>. <OPTION>.
, :
<FORM METHOD="POST" ACTION="/cgi-bin/data">
:
<SELECT NAME="var-name">
<OPTION>
<OPTION>
<OPTION>
<OPTION>
<OPTION>
<OPTION>
</SELECT>
</FORM>
:
:
, , , SELECTED.
1. .
2. .
2.1. . .
, : (25%, 75%).
2.2. , .
2.3. , , .
2.4. , :
) ;
) .
2.5. .
3. .
, :
) HTML- ( (NAME=Fname), (NAME=Lname), (NAME=Pswd), (NAME=Address), (NAME=Qty), (, NAME=Type), (, ), (, NAME=ShipBy), (-), ( ), );
) HTML- ( ( NAME=Acct), , (NAME=transaction, , , , ), (NAME=varify_by_mail, e-mail, e-mail), - (NAME=info, , ), -, .
3. Ͳ
1. ?
2. ?
3. TARGET , ?
4. NOFRAMES?
5. ?
6. HTML - ?
7. METHOD?
8. ?
9. , ?
10. ?
11. ?
12. - ?
13. , ?
5
. Web- CSS.
: Web-; web-.
1.1
CSS (Cascading Style Sheets ) , Web-, HTML. HTML CSS, , , - CSS. CSS, , . CSS HTML, 4.0.
(), . :
(Selector). , . , ' -.
(Property). . : , , , ..
(Value). , .
(Declaration). .
(Rule). ( + ).
HTML. .
1. , 30px, () - Serif, ( )
