Академический Документы
Профессиональный Документы
Культура Документы
3
4
5
HTML
Web.
WWW.
Web.
HTML.
HTML
.
. .
HTML.
.
HTML.
.
1.
Web-:
; web. WWW: /
. Web-:
Web-; Web; .
HTML: ;
.
HTML : ;
.
:
; Escape-;
; .
. : ;
; .
HTML: ,
. :
;
HTML .
HTML: ;
; .
: HTML
; ;
CSS.
.
. CSS .
1
10
11
12
JavaScript
14
15
16
17
18
PHP
13
JavaSript.
.
JavaScript.
.
JavaScript
.
JS.
DHTML.
2
PHP.
.
php.
PHP.
PHP.
.
MySQL.
MeSQL.
.
3
HTML
.
CSS:
;
HTML . :
. : .
: ; ;
. CSS :
;
; HTML
.
JavaSript:
;. HTML :
JavaSript HTML .
: DOM. JavaScript.
, ,
, ,
.
JS.
DHTML:
DHTML.
DHTML;
PHP: ;
php HTML .
: http;
.
php: ,
, ,
. PHP:
.
PHP:
HTTP ; .
.
MySQL.
MySQL PHP.
MeSQL:
; , ,
, .
.
http://www.edu.cassiopeia.com.ua
1.1. Web-
1.1.1. .
World Wide Web (Web) .
:
Web. , URL (Uniform
Resource Locator) . ,
, /, . ,
http://www.edu.cassiopeia.com.ua/.
Web. , HTTP (Hyper
Text Transfer Protocol) ).
(, HTML - Hyper
Text Markup Language). - , (
).
Web-
,
web-.
.
Web- ,
( ),
.
, .
, ,
.
1.1.2. web-.
, ();
( );
, .
1.2. WWW
1.2.1. / .
:
.1. / .
:
1. .
2. .
3. .
:
1.
).
2. .
1.2.2. Web-.
/
Web-.
.2. .
:
.
.
( ),
, .
.
1.2.3. Web-.
Web-
Web-.
.3. .
:
1. .
2.
.
3. .
:
1. , ,
.
2. .
3. .
,
.
web.
1.3. .
,
web- :
1.3.4. .
1. web-
?
2. web-
, ?
?
: -.
- ().
1976 ,
, , .
1989 - ,
. 1991 1993 -
URI, HTTP HTML. 1994 ,
.
- :
1. ,
. -
WYSIWYG, Wiki -
.
2. ,
.
3. , .
(. Domain Name System, DNS).
4. - ,
.
2. HTML
2.1. .
HTML (HyperText Markup Language) . HTML
, ..
( ,
). HTML :
.
.
HTML : , , ,
.. HTML
- ( tag - ).
3 : , ( )
<>, (, ) (
) </>), :
<TITLE> </TITLE>
, HTML .
HTML- :
HTML . <title> <TITLE>
<TiTlE>.
HTML ,
.
Web-.
, .
2.2. .
HTML
, .
WYSIWYG (What You See Is What You Get) HTML-,
, Adobe Dream Waver MS Frontpage.
HTML *.htm *.html.
HTML (web-), HTML
.
2.3. HTML-.
HTML (1989 .) ,
.
HTML 4.0.
HTML 4.0 HTML-
:
<HTML>
<HEAD>
<TITLE> </TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
, HTML <HTML>
:
, <HEAD>,
, <BODY>.
HTML- ,
. <TITLE>,
.
HTML , :
<TITLE> HTML</TITLE>
<META> ,
, .., :
<meta name ="Content-Type" content="text/html; charset=windows-1251">
<meta name="keywords" content="Web, , HTML">
<meta name="description" content=" Web-">
HTML- <BODY></BODY>
.
2.4. .
- ,
.
=
= .
. ,
. <BODY>
:
<BODY text="black" bgcolor="white">
<BODY> . 2:
text
link
vlink
alink
bgcolor
background
Topmargin
(marginheight*)
Leftmargin
2.
<BODY>
,
RRGGBB. : text=000000 - .
,
RRGGBB. : text=FF0000 .
. : text=00FF00 .
. :
text=0000FF .
,
RRGGBB. : text=FFFFFF .
. :
Background=bg.gif
. :
Topmargin=0
. :
(marginwidth*)
Leftmargin=10
marginheight marginwidth
Netscape.
2.5. .
1. HTML
,
?
2. , web ?
3. Web-
?
:
1992 ""
. , ,
. 1993
-,
- Mosaic,
, .
"",
Netscape, "".
3.
3.1. .
.3.
3.
<Hi>
align
<P>
align
<BR>
<HR>
align
size
width
color
noshade
<B>
<I>
<U>
<TT>
<PRE>
<FONT>
size
face
color
6 , H1 H6, H1
.
:
(align=left|center|right|justify)
.
(align=left|center|right|justify)
:
(align=left|center|right|justify)
. ,
,
. <PRE>
, , HTML .
:
1 7
3.2. Escape-.
,
, , , , ,
, Escape-. Escape - .
Escape- HTML :
, , © ( ).
, , © (
).
Escape- . 4.
4.
Escape-
C
<
>
&
"
Escape-
<
>
&
"
©
«
»
3.3. .
HTML :
<!-- -->
<!-- ,
-->
.
3.4. .
HTML 3 : , .
<UL> <LI>.
:
<UL>
<LI>1
<LI>2
</UL>
:
1
1
:
<OL>
<LI>.
<OL>
<LI>1
<LI>2
<LI>3
</OL>
:
1. 1
2. 2
3. 3
- <DT> <DD>.
:
<DL>
<DT> WWW
<DD> World Wide Web
<DT> HTML
<DD> HyperText Markup Language
</DL>
:
HTML
WWW
World Wide Web
<LI>, <DT> <DD> , , ,
.
:
<UL>
<LI> :
<UL>
<LI>
<LI>
</UL>
<LI> :
<UL>
<LI>
<LI>
</UL>
</UL>
:
:
:
3.5. .
1. HTML 4.0 <FONT>
?
2. escape- <, >, &,
?
: ,
, . 1993
,
. 1995 .
- - , ( 1998)
Google.
4. .
4.1. .
HTML
. :
<A HREF="news.html"></A>
news.html,
, .
, ,
, . ,
arhiv.html NewsArhiv :
<A HREF="NewsArhiv/news.html"> </A>
,
. :
<A HREF="http://www.transmarket.net/education/lib/books.txt">
</A>
. , news.html
, . :
1. , , :
<A NAME = "point1"> </a>
2. :
<A HREF = "#point1"> </A>
point1 , .
,
,
. :
<A href="anonce.html#point1"> </A>
,
. , ,
target=_blank. :
<A href="anonce.html#point1" target="_blank"> </A>
<A>
.
4.2. .
HTML
3 : *.JPG, *.GIF *.PNG.
HTML
<IMG>. :
<IMG src=file_name>
file_name . . 5
<IMG>.
5.
<IMG>
align
alt
border
height
width
usemap
.
align=top|middle|bottom|left|right
,
, .
4.3. .
, ,
, .
:
. :
<IMG src="menu.gif" usemap="file_name#map_name">
map_name
file_name. URL , map_name
.
:
<MAP NAME="map_name">
<AREA [shape="default|rect|circle|poly"]
reference"] [nohref]>
</MAP>
coords="x,y,..."
[href="
<AREA> .
<AREA> . 6
6.
<AREA>
shape
coords
href
noref
.
:
default -
rect
circle
poly -
. ,
- ,
.
,
, 2
:
<MAP NAME="mymap">
<AREA shape="rect" coords="0,0,50, 20" href="news.htm">
<AREA shape="circle" coords="100,25,25" href="contacts.htm">
</MAP>
4.4. .
1. :
<A HREF = "#"></A>
5. HTML. .
5.1. , .
HTML :
.
HTML ( ).
<TABLE>.
<TABLE> . 7.
7.
<TABLE>
align
border
bgcolor
background*
cellpadding
. align=left|center|right
,
cellspacing
width
,
* Netscape ,
background , .
<CAPTION>.
(<ION align=top>),
(<ION align=bottom>).
. , .
<R> (ble Row).
<TR> . 8.
8.
<TR>
align
valign
align=left|center|right|justify
align=top|middle|bottom
, <D>.
<D> () .
<TR> . 9.
<>
(bl der). <D> , <>
.
9.
<TD>
align
valign
align=left|center|right|justify
colspan
rowspan
width
nowarp
align=top|middle|bottom
. , colspan=2
. , rowspan=3
HTML :
<TABLE width="100%" cellpadding="0" cellspacing="0" border="1">
<CAPTION align=top> online
</CAPTION>
<TR>
<TH>URL</TH>
<TH></TH>
<TH></TH>
</TR >
<TR>
<TD>www.brainbench.com</TD>
<TD>12136</TD>
<TD>22178</TD>
</TR>
<TR>
<TD>www.transmarket.net/education</TD>
<TD>12</TD>
<TD>27</TD>
</TR>
</TABLE>
5.2. : .
,
, ,
, ,
.
:
:
5.3. HTML
. , ,
. . 4.
.4. .
HTML , .
<TABLE width="760" cellpadding="10" cellspacing="10" border="1">
<TR>
<TD align=center></TD>
<TD rowspan=2> </TD>
</TR>
<TR>
<TD></TD>
</TR>
</TABLE>
. ,
,
, .
.
. 5.
.4. .
HTML , .
<TABLE width="100%" cellpadding="10" cellspacing="10" border="0">
<TR align=center>
<TD colspan=3> </TD>
</TR>
<TR>
<TD width=200px></TD>
<TD width=*> </TD>
<TD width=200px> </TD>
</TR>
<TR align=center>
<TD colspan=3> </TD>
</TR>
</TABLE>
5.3. .
1.
?
2. Netscape
, .
6. .
6.1. .
,
HTML-,
.3.
2
1
3
.5. 3 .
, , <BODY>
<FRAMESET>. <FRAMESET> . 10.
10.
<FRAMESET>
rows
cols
.
,
. 100%,
. , rows=20%, 80%
.
,
. 100%,
. , cols=*, *
<FRAMESET>
.
,
<FRAME>. <FRAME> . 11.
11.
<FRAME>
name
marginwidth
marginheight
src
( 1 6)
( 1 6)
.
src= filename"|_blank|_self|_parent|_top
scrolling
noresize
frameborder
bordercolor
. scrolling=YES|NO|AUTO
, ,
,
<NOFRAMES>. <NOFRAMES> ,
.
HTML-, :
<html>
<head><title> </title></head>
<frameset cols=50%, 50%>
<frame name=left src=left.htm>
<frameset rows=100px, *>
<frame name=top src=top.htm>
<frame name=bottom src=bottom.htm>
</frameset>
<NOFRAMES>
<P> <A href="noframes.html"> .</A>
</NOFRAMES>
</frameset>
</html>
6.1. HTML
HTML HTML ,
: , , , ..
HTML <FORM>. <FORM> . 12.
12.
<FORM>
action
method
URL -
-
. Method=GET|POST
6.3.
.
<INPUT>.
<INPUT> . 12.
13.
<INPUT>
type
.
type=text|password|checkbox|radio|submit|reset|file|hidden
text
password
checkbox
radio
submit
name
value
checked
size
maxlength
reset
file
hidden
checkbox radio.
,
<TEXTAREA>.
<TEXTAREA> . 13.
13.
<TEXTAREA>
name
Cols
Rows
value
<SELECT>.
<SELECT> . 14.
14.
<SELECT>
name
multiple
size
Ctrl
,
,
<OPTION>.
<OPTION> . 15.
15.
<OPTION>
value
selected
HTML-, :
<html>
<head><title> </title></head>
<body>
<form method=get action='form.php' name="form">
<table>
<tr>
<td>, </td>
<td>
<input type="text" name="name" size="50" maxlength =150>
</td>
</tr>
<tr>
<td></td>
<td>
<SELECT name="request">
<OPTION value=0>...</OPTION>
<OPTION value=1></OPTION>
<OPTION value=2> </OPTION>
<OPTION value=3></OPTION>
</SELECT>
</td>
</tr>
<tr>
<td></td>
<td>
<input type="radio" name="human_sex">
<input type="radio" name="human_sex">
</td>
</tr>
<tr>
<td> </td>
<td>
<input type="file" name="human_file">
</td>
</tr>
<tr>
<td></td>
<td>
<TEXTAREA cols=50 rows=5></TEXTAREA>
</td>
</tr>
<tr>
<td> ?</td>
<td>
<input type="checkbox" name="human_news" checked>
</td>
</tr>
<tr>
<td></td>
<td>
<input name="submit" type=submit value=>
<input name=reset type=reset value=>
</td>
</tr>
</form>
</table>
</body>
</html>
6.3. .
1. web-.
7. CSS
7.1. -
-
2 ,
.
CSS -
HTML . , CSS
() ,
.
7.2. .
,
HTML-.
.
1. ,
HTML- <LINK> . :
<LINK rel="stylesheet" href="style.css" type="text/css">
2. HTML-
<STYLE>. :
<HEAD>
<STYLE>
P {color: #FF0000}
</STYLE>
</HEAD>
3. ,
style. :
<P style="color: #FF0000"> </p>
7.3. .
,
: .
. :
P {color: #CCCCCC; font-size: 10px}
H1{ color: #FF0000}
7.4. .
background-color
background-image
background-repeat
background-attachment
16.
. : repeat
| repeat-x | repeat-y | no-repeat
. : scroll |
background-position
fixed
font-style
font-weight
font-size
font-family
. : normal | italic
. : normal | bold
word-spacing
letter-spacing
text-indent
text-align
vertical-align
text-decoration
17.
18.
. : none | [ underline ||
overline || line-through || blink
19.
margin-top
margin-right
margin-bottom
margin-left
margin
padding
padding
padding
padding
padding
-top
-right
-bottom
-left
0px
10px 0px
. : margin: 10px 10px 10px
. : padding: 10px 10px
border-width
border-color
border-style
20.
. : none | dotted | dashed |
solid | double
7.5. .
HTML ,
.
. :
P.green {color: #00FF00}
P.blue {color: #0000FF}
HTML
class. :
<p class=green> </p>
<p class=blue> </p>
7.6. .
HTML
.
. 21.
21.
:link
:visited
:hover
:active
:focus
:
A:link
A:visited
A:active
A:hover
{
{
{
{
color:
color:
color:
color:
red }
blue }
white }
yellow }
7.7. .
1. -.
8. JavaScript
8.1.
JavaScript . ,
JavaScript, .
JavaScript .
,
JavaScript. . 4.
window
Navigator
Screen
History
Location
Event
Frames
Document
all
Images
Areas
Links
Scripts
Stylesheets
forms
Element
Button
Checkbox
Text
Textarea
Password
Radio
Reset
Submit
Select
options
fileupload
.4. .
.5 HTML-
.
JavaScript HTML-
, :
document.forms[0].elements[0].value = Milosh;
,
.
, :
<form name="myForm">
Name: <input type="text" name="name" value=""><br>
E-mail: <input type="text" name="email" value=""><br>
<input type="submit" name="submit" value=Push me>
</form>
HTML- :
document.myForm.name.value = Milosh;
.5. HTML- .
8.2. window
window .
window . ,
window . 22, 23 24 .
22.
window
parent
name
status
document
,
document
event
history
location
navigator
screen
window
alert
Confirm(text)
Prompt(text)
Open(url, name, settings)
event
history
location
location
screen
23.
. ,
alert( )
/CANCEL. ,
alert( ?)
. , alert( )
. , window.open(help.htm,
helpWindow,
width=400,height=300,status=no,toolbar=no,menubar=no)
Close()
24.
window
onblur
onfocus
onhelp
onresize
onscroll
onload
onunload
F1 Help
8.3. window
window , :
history .
navigator .
location URL .
event , .
screen .
document .
, window
. 25.
25.
, window
History
length
back()
forward()
go(n)
Navigator
appName
appVersion
cookieEnabled
mimeTypes
plugins
javaEnabled()
Location
href
reload()
Event
X
Y
button
altkey
Ctrlkey
Shiftkey
Keycode
Screen
Width
Height
colorDepth
n
cookie
JavaScript
URL
,
Alt
Ctrl
Shift
ASCII
8.4. document
, document
. 26, 27 28.
26.
document
Title
Bgcolor
Fgcolor
linkColor
alinkColor
vlinkColor
activeElement
, TITLE
27.
document
open()
write(text)
close()
clear
document
document
document
document
alinkColor
vlinkColor
activeElement
document
Onclick
Ondblclick
Onmouseout
Onmouseover
Onkeydown
onhelp
onload
28.
F1 Help
9. JavaScript
9.1. JavaScript.
JavaScript .
().
JavaScript:
JavaScript ++
JavaScript , , ,
(
; )
JavaScript ,
JavaScript //,
/* */.
9.2.
JavaScript . 29.
29
+,-,*,/,%
, , , ,
++, --
!=
, , ,
&&, ||, !
, ,
9.3.
JavaScript :
( )
( null)
.
, - .
var ( ),
:
var x=1;
y=string;
9.4. JavaScript
JavaScript :
, ,
, ..
, Array(). :
new_array = new Array();
new_array5 = new Array(5);
colors = new Array ("red","white","blue")
.
, .
, :
colors = new Array();
colors[5] = "red"
6 , ..
0.
. 30.
length
join
reverse
sort
30.
,
, :
string = acolors.join("+")
9.5. JavaScript
,
.
,
HEAD
.
:
return .
9.6.
9.6.1.
if(i>0)
{}
else
{}
9.6.2.
switch ()
{
case label :
;
break;
case label :
;
break;
...
default : ;
}
9.6.3.
for(i=0;i<9;i++)
{}
for(i in obj)
{}
wile()
{}
do {}
while ()
9.6.4.
break ,
switch, :
while(i==0)
{if(j==3) break;}
continue .
while(i==0)
{if(j==3) continue;}
JavaScript
:
10. PHP
10.1.
PHP (server scripting language), HTML,
.
, ,
( .php) .
PHP-
HTML-. , .html/.htm Web-
- .
10.2. php HTML-
PHP HTML- :
1. HTML- SCRIPT,
:
<script language="PHP">
echo "Hello, world!";
</script>
2. HTML- <?
?>, :
<?
?>
10.3. PHP
PHP .
().
PHP:
PHP ++
PHP , , ,
(
; )
PHP ,
JavaScript //,
/* */.
10.4.
PHP . 29.
31
+,-,*,/,%
, , , ,
++, --
!=
, , ,
&&, ||, !
, ,
8.4.
PHP :
( )
( null)
.
, - .
$, :
$x=1;
$y=string;
8.5. PHP
JavaScript :
, ,
, ..
, Array(). :
new_array = new Array();
new_array5 = new Array(5);
colors = new Array ("red","white","blue")
.
, .
, :
colors = new Array();
colors[5] = "red"
6 , ..
0.
. 30.
30.
length
join
,
, :
string = acolors.join("+")
reverse
sort
8.6. PHP
,
.
,
HEAD
.
:
do {}
while ()
8.6.4.
break ,
switch, :
while(i==0)
{if(j==3) break;}
continue .
while(i==0)
{if(j==3) continue;}