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

Web-

Web-, L, CSS, JavaScript, PHP, MySQL


Web- Web- .

1. web-.
2. web- L, CSS, JavaScript
.
3. web- PHP, MySQL .

: 36 .
: 18 .
: 72 .
3 .
.

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- :

Internet Engineering Task Force (IETF). 1986 . http://www.ietf.org

World Wide Web Consortium (W3C). 1994 . http://www.w3.org

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 :
, , &#169; ( ).
, , &copy; (
).
Escape- . 4.

4.
Escape-
C
<
>
&
"

Escape-
&lt;
&gt;
&amp;
&quot;
&nbsp;
&copy;
&laquo;
&raquo;

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

Hypertext Markup Language

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

8.5. JavaScript HTML-


JavaScript HTML- :
1. HTML- SCRIPT,
:
<script language="JavaScript">
alert("Hello, world!")
</script>
2. HTML-
SCRIPT, :
<script language="JavaScript" src="script.js">
</script>
3. . :
<input type="button" onClick=" alert(Hello, world!)">

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
.
:

function ([ 1] [, 2] [..., N])


{

[return ]
}

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- <?
?>, :
<?
?>

echo "Hello, world!";

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
.
:

function ([ 1] [, 2] [..., N])


{

[return ]
}
return .
8.7.
8.6.1.
if(i>0)
{}
else
{}
8.6.2.
switch ()
{
case label :
;
break;
case label :
;
break;
...
default : ;
}
8.6.3.
for(i=0;i<9;i++)
{}
for(i in obj)
{}
wile()
{}

do {}
while ()
8.6.4.
break ,
switch, :
while(i==0)
{if(j==3) break;}
continue .
while(i==0)
{if(j==3) continue;}

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