, , Web-. , . .
:
<TD>
<TABLE>
<TR>
<TD>T1</TD>
<TD>T2</TD>
</TR>
<TR>
<TD>T3</TD>
<TD>T4</TD>
</TR>
</TABLE>
</TD>
</TABLE>
</TD>
3.1.16
ALIGN . left , right . , , <BR> CLEAR, , . left, right, all CLEAR , , .
:
<TABLE BORDER =10 ALIGN=left>
<BR CLEAR=all>
1. 1 3x3,
2. 1
3. 1 2
4. 1 3, ( )
5. 1 4,
6. 1 5, ,
7. 1 6,
8. 1 7,
9. 1 8,
10. 1 9, (CELLSPACING, CELLPADDING)
11. 1 10, (BORDER, FRAME, RULES)
12. 1 11, (NOWRAP)
13. 1 12, , (BR CLEAR=?)
14. 34 , 12
3.3
1. <TR>?
2. <TD>?
3. <TH>?
|
|
|
4. < COLGROUP >?
5. COLSPAN?
6. ROWSPAN?
4
: .
: .
: HTML- .
4.1
4.1.1 .
Web- . Web-. , , Web-, , <FRAMESET> <FRAME>.
<FRAMESET> , . () (), , (*). (*), , .
<FRAME> .
. ( <FRAMESET> </FRAMESET>) .
1
<HTML>
<HEAD>
<TITLE> NN </TITLE>
</HEAD>
<FRAMESET ROWS=50,100,*>
<FRAME NAME=n1 SRC=b1.html>
<FRAME NAME=n2 SRC=b2.html>
<FRAME NAME=n3 SRC=b3.html>
</FRAMESET>
</HTML>
2
<HTML>
<HEAD>
<TITLE> NNN </TITLE>
</HEAD>
<FRAMESET ROWS=50,*>
<FRAME NAME=n1 SRC=b1.html>
<FRAMESET COLS=150,*>
<FRAME NAME=n2
SRC=b2.html>
<FRAME NAME=n3 SRC=b3.html>
</FRAMESET>
</FRAMESET>
</HTML>
<NOFRAMES>
<NOFRAMES> , . <NOFRAMES> </NOFRAMES> HTML.
3
<HTML>
<HEAD>
<TITLE> NN </TITLE>
</HEAD>
<FRAMESET ROWS=50,100,*>
<FRAME NAME=n1 SRC=b1.html>
<FRAME NAME=n2 SRC=b2.html>
<FRAME NAME=n3 SRC=b3.html>
<NOFRAMES>
<BODY>
TEXT
</BODY>
</NOFRAMES>
</FRAMESET>
</HTML>
BODY .
, , </NOFRAMES>, .
4.1.2 ³ ᒺ
Target <A> , ᒺ , .
<HTML>
<HEAD>
<TITLE> NN </TITLE>
</HEAD>
<BODY>
<A HREF=b4.html TARGET=main> TEXT </A>
</BODY>
, TARGET <BASE> .
|
|
|
<HTML>
<HEAD>
<TITLE> NN </TITLE>
<BASE TARGET=main>
</HEAD>
<BODY>
<BR> <A HREF=1.html>TEXT1</A>
<BR> <A HREF=2.html>TEXT2</A>
<BR> <A HREF=3.html>TEXT3</A>
<BR> <A HREF=4.html>TEXT4</A>
, TARGET _blank ( ) _top ( ). HTML TARGET - _self ( ) _parent ( , )
SCROLLING.
<FRAME NAME=n2 SRC=b2.html SCROLLING=yes>
FRAME NAME=n2 SRC=b2.html SCROLLING=no>
NORESIZE . - .
<FRAME NAME=n2 SRC=b2.html NORESIZE>
<FRAMESET ROWS=50,* BORDER=9 BORDERCOLOR=#0077CC>
6 .
, , FRAMEBORDER FRAMESET FRAME ( ).
<FRAMESET ROWS=50,* FRAMEBORDER=0 >/
, , , FRAMESET BORDER=0.
FRAMESPASING=. HTML.
MARGINWIDTH ( ) MARGINHIGHT ( ) .
<FRAME NAME=n2 SRC=b2.html MARGINWIDTH=50 MARGINHIGHT=50>
, , , .
.
</HEAD>
<FRAMESET ROWS=50,*>
<FRAME NAME=n1 SRC=b1.html>
<FRAMESET COLS=150,*>
<FRAME NAME=n2 SRC=b2.html>
<FRAME NAME=n3 SRC=b3.html>
</FRAMESET>
</FRAMESET>
</HTML>
.
4.1.3 .
<IFRAME> . ᑺ, Web- ( ) Web- .
NAME , , , . WIDTH HEIGHT . ALIGN ( left right).
<IFRAME SRC=1.html NAME=prod WIDHT=400 HEIGHT=300 ALIGN=left></IFRAME>.
MARGINWIDTH ( ) MARGINHIGHT ( ) . SCROLLING.
.
1. .
2. , .
3. ³ ᒺ .
4. ³ .
5. , , ,
|
|
|
6. .
7. .
8. .
4.3
1. ?
2. <FRAMESET>?
3. <FRAME>?
4. <NOFRAMES>?
5. ?
5
: HTML.
: c HTML.
5.1
- [' ] = [ ]. . , . <FORM> </ FORM>. HTML- , .
<FORM> , ': ACTION ' . , .
METHOD , ( , ) . : METHOD = POST METHOD = GET. , METHOD = GET.
GET: " get " HTTP action, `? ' , , " application / x - www - form - urlencoded ". URL. ASCII ( ) .
POST: " post " HTTP HTTP " post " ( HTTP -), action , , enctype.
ENCTYPE , . , ENCTYPE = application / x - www - form - urlencoded.
"", , .
<INPUT TYPE=submit>==>
, Submit, , .
- VALUE = "[]" :
<INPUT TYPE=submit VALUE="!"> ==>
, , NAME = ['] :
<INPUT TYPE=submit NAME=button VALUE="!"> ==>
button ³! ( button = ³!, ).
submit / . , , - , submit .
<INPUT>. <INPUT> NAME = ['], ' , . ' . <INPUT> VALUE = "[]", , '.
|
|
|
5.1.2 <INPUT>
TYPE=text
. SIZE = [] ( , ) MAXLENGTH = [] ( ). :
<INPUT TYPE=text SIZE=30 NAME=student VALUE=" "> ==>
30 , . , . ³ ( ) student (student = _). .
TYPE = password . text,
, (*), . :
<INPUT TYPE=password NAME=pswd SIZE=20 MAXLENGTH=10> ==>
20 . - 10 . pswd (pswd = _).
. TYPE = radio . checked (, ). . :
<INPUT TYPE=radio NAME=modem VALUE="9600" checked> 9600 / ==> 9600 /
<INPUT TYPE=radio NAME=modem VALUE="14400"> 14400 / ==> 14400 /
<INPUT TYPE=radio NAME=modem VALUE="28800"> 28800 / ==> 28800 /
, 9600 / , 14 400 / 28800 / . . , modem 9600 (modem = 9600). , modem 14400 (modem = 14400).
TYPE = checkbox , . checked (, ). , .:
<INPUT TYPE=checkbox NAME=comp VALUE="PC"> ==>
<INPUT TYPE=checkbox NAME=comp VALUE="WS" checked> ==>
<INPUT TYPE=checkbox NAME=comp VALUE="LAN"> ==>
<INPUT TYPE=checkbox NAME=comp VALUE="IS" checked> ==>
. . , comp (comp = WS comp = IS).
TYPE = hidden , . , . :
<INPUT TYPE=hidden NAME=id VALUE="1">
id, 1.
TYPE = reset , (). , reset name. :
<INPUT TYPE=reset VALUE=" ">
==>
, .
5.1.3 <SELECT>:
<SELECT> n :
<SELECT NAME="[]">
<OPTION VALUE="[ 1]">[ 1]
<OPTION VALUE="[ 2]">[ 2]
...
OPTION VALUE="[ n]">[ n]
</SELECT>
[ 1] [ 2] [...] [ n]
̳ <SELECT> ' NAME, ' . ̳ <SELECT> MULTIPLE, , . <SELECT MULTIPLE> , ( SIZE = []). "SHIFT" . MULTIPLE - .
|
|
|
<SELECT MULTIPLE = 2 SIZE=3 NAME="[]">
<OPTION VALUE="[ 1]">[ 1]
<OPTION VALUE="[ 2]">[ 2]
<OPTION VALUE="...">[...]
<OPTION VALUE="[ n]">[ n]
</SELECT>
[ 1] [ 2] [...] [ n]
, NAME = VALUE NAME, VALUE.
̳ <OPTION> . ' VALUE , , . ̳ <OPTION> selected, , . :
<SELECT NAME="selection">
<OPTION VALUE="option1"> 1
<OPTION VALUE="option2" selected> 2
<OPTION VALUE="option3"> 3
</SELECT>
1 2 3
: 1, 2 3. 2. selection (selection =...) option1, option2 ( ) option3.
5.1.4 <TEXTAREA>
:
<TEXTAREA NAME=address ROWS=5 COLS=50>
, .
</TEXTAREA>
, .
'. NAME ', ( - address). ROWS ( - 5). COLS ( - 50). , <TEXTAREA> </ TEXTAREA>, . .
1
. - ( POST), ( , , ):
'
E - mail
(' SELECT, 10-)
(' radio, , 5-)
(' checkbox, , 5-)
(' SELECT MULTIPLE, , 10-)
(' TEXTAREA)
(hidden), student "_'"(student=_').
URI - /internet/test/form.aspx.
1. , , ().
2. , . GET.
2
1. . :
www.yahoo.com
www.google.com.ua
www.yandex.ru
www.google.com
www.meta.ua
URL .
5.3
1. <FORM>?
2. POST GET?
3. INPUT?
4. <SELECT>.
5. ?
6
: (DIV) CSS.
: - .
6.1
6.1.1
, . . , , .., , :
, . , , .
( ) ( ). , .
. , . " " , .
, , . .
" ", . , , , " ". , " " .
, . HTML , . , . , , .
. . (. .):
6.1. .
- 800600, , 750, .
, 80% ( 100%, , ).
, , - , . , .
:
" ". , '.
. , -, .
³ .
³ "" .
³ ( , ).
6.1.2 (DIV) CSS
?
:
" ". , '.
. , , -, .
³ .
³ "" .
³ ( , ). ֳ CSS <DIV>.
?
<DIV> - . . , :
.
, , , div.
:
<div style="border-color:#FF00FF; border-style:dotted; ">
DIV .
</ div>
<div style="border:15px double #008000; ">
DIV 15 .
</ div>
<div style="border-style: outset; border-color: #FF0000">
DIV .
</ div>
<div style="border-right: 10px solid #00FF00; border-bottom: 10px solid #00FF00">
DIV .
</ div>
<div style="border-left: 20px solid #FFFF00; border-right: 20px solid #FFFF00">
DIV .
</ div>
.
<div style="background-color: #00FFFF">
DIV .
</div>
.
<div style="background-color: #AAAAFF">
DIV .
</div>
<div style="float: left; width: 200; height: 200; background-color: #00FFFF">
DIV .
</div>
<div style="float: right; width: 200; height: 200; background-color: #FFFF00">
DIV .
</div>
<div style="width: 200; height: 200; position: relative; left: 20; background-color: #0FFD02">
DIV .
</div>
<div style="background-color: #FCC403">
DIV .
</div>
. 2,5 () z-index.
3D
:
<div style="position: relative; width: 200; height: 200; z-index: 0; background-color: #FFFF00">
- 1
</ div >
<div style="position: relative; width: 200; height: 200; left: 100; z-index: 1; top: -100; background-color: #00FFFF">
- 2
</ div >
<div style="position: relative; left: 220; top: -400; width: 200; height: 200; z-index: 2; background-color: #00FF00">
- 3
</ div >
<div style="position: relative; width: 750; height: 20; z-index: 1; top: -580; background-color: #FE76AF">
- 4
</ div >
<div style="position: relative; top: -600; z-index: 3; left: 100">
3D
</ div >
. .
:
<div style="width: 200; height: 200; background-color: #00FFFF">
</ div >
( ).
:
<div style=" overflow: auto; width: 200; height: 200; background-color: #00FFFF">
</div>
,
:
<div style=" overflow: hidden; width: 200; height: 200; background-color: #00FFFF">
</div>
, , ,
6.1.3 CSS
- , :
1 :
<html>
<head>
<title>
</title>
</head>
<body>
<div id="wrapper">
<div id="header">
</div>
<div id="navigation">
</div>
<div id="menu">
</div>
<div id="content">
</div>
<div id="footer">
</div>
</div>
</body>
</html>
2 -
. ,
- '. . CSS , , .
<head> </ head>:
<link rel="stylesheet" type="text/css" href="style.css" />
3 - CSS
CSS , . - , , - , , - ., body, CSS " # " ". ". "#" ID, ". " () class . {}.
# selector {
property: value;
property: value;
property: value;
}
CSS:
* body
* wrapper
* header
* navigation
* menu
* content
* footer
6.1.4 CSS
" background " ( ) , . , . .
" color " . (: # FFFFFF ).
" font - family " , . 3 - . , , .. (: Trebuchet MS, Arial, Times New Roman)
" font - size " . " margin " . : top, left, bottom, right. , " 0px auto 0px ". '.
" width " - .
" height " - .
" float " , .
CSS style.css . :
body {
background: #f3f2f3;
color: #000000;
font-family: Trebuchet MS, Arial, Times New Roman;
font-size: 12px;
}
#wrapper {
background: #FFFFFF;
margin: 60px auto;
width: 900px;
height: 1024px;
}
#header {
background: #838283;
height: 200px;
width: 900px;
}
#navigation {
background: #a2a2a2;
width: 900px;
height: 20px;
}
#menu {
background: #333333;
float: left;
width: 200px;
height: 624px;
}
#content {
background: #d2d0d2;
width: 900px;
height: 624px;
}
#footer {
background: #838283;
height: 180px;
width: 900px;
}
1
1 .
2
1. . 4 . ' 3-30 , . , .
2. .
3. .
4. , , (, , ).
3
1. CSS ( CSS).
2. ( 5-) 2,5 .
3. .
6.3
1. ?
2. CSS?
3. CSS.
4. <DIV>?
5. <SPAN>?
7
: Web-
: ϳ , :
;
Web-.
: Microsoft Word, Adobe Photoshop, Adobe ImageReady
7.1
7.1.1 : 1.
1. 800600 .
2. , .
B View Rulers ( Ctrl + R). B . , , . ϳ c Move. y.
Edit > Preferences > Guides & Grid ( > > );
3. .
4. :
5. 䳺 , Shift
6. ( 00000032.jpg, 898e1f1db03b.jpg, 93834_odenwald_achatschnecke_2.jpg, 1197930006.jpg, acze.jpg, untitled.jpg) .
7. , . , .
8. (soft!) 100 .
9. , .
10. , : '.
11. screen 49% ( 95% ).
12. .
7.1.2
1. ACHATINA, .
2. .
3. Lines (˳) .
4. . rectangular marquee , .
5. . .
7.1.3 Rollover. ϳ.
1. Rollover . - ( ) ,
2. : Drop Shadow, Outer Glow, Bevel and Emboss, Color Overlay. - :
3. New Style .
