Рабочая тетрадь курса

.
HTML CSS
HTML CSS
HTML CSS
.....................................3
...............................................23
........................................................43
.........................................................61
(CSS) ..............................77
.............101
HTML CSS.
XML- ..........................111
.......123
:
: HTML,
XML, XHTML. .
HTML
WEB-, web-, web-

? .
HTML.
.
(block) (inline)
1994
HTML 2.0
W3 (W3C)
1995
HTML 3
CSS
2000
XHTML 1.0
1994
Netscape Communications
Netscape Navigator.
HTML 4.01
1996
Internet Explorer 3.0
1991
CERN
HTML
1986
ISO-8879
SGML
1997
HTML 4.0
1997
HTML 3.2
Web-
Web-
Web-
Web-
*.html
*.html
*.html
...
WWW
1 2
2
1
2
Index.html
HTML-?
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> HTML </title>

</head>
<body>
<h1> HTML-</h1>
<hr>
<p> , .</p>
</body>
</html>
<!DOCTYPE>
<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML

"http://www.w3.org/TR/html4/strict.dtd">
,
,
.
4.0 // EN"
DTD.
,

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional //

EN"
"http://www.w3.org/TR/html4/loose.dtd"> ,
, ,
DTD, ,
.
<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset // EN"

"http://www.w3.org/TR/html4/frameset.dtd"> ,
, ,
DTD, .
http://validator.w3.org/
http://jigsaw.w3.org/css-validator/
HTML

<html>
<head>
.
.
</head>
<body>
.
.
</body>
</html>

<html>
<head>
<title> </title>
</head>
<body>
... ...
</body>
</html>

<html>
<head>
... ...
</head>
<body>
<h1>...</h1> <!- -->

<hr> 
<p>...</p> <!- -->
</body>
</html>
?
(block elements)

(inline elements)

(phrase elements)
(deprecated)
(obsolete)
(new)
<title> </title>

Block & inline

<div> div</div><div> div</div>
<div> div</div>
<span> span</span> <span> span</span>
<span> span</span>
10
<h1> 1</h1>
<h2> 2</h2>
<h3> 3</h3>
<h4> 4</h4>
<h5> 5</h5>
<h6> 6</h6>

<h1> </h1>
<hr>
<p>
, ,
:

11
<P>
,

,

:

,

.
</P>
<P>

,

.

.
12

<p>
,
,

.
</p>
<p> ,
<p> ,
<p>
<p> .
<p> ,
<br> ,
<br>
<br> .
13
<hr align="right" size="3">

<h1 align="center">
<p align="right">
<p align="justify">
<h2 align="left">
<hr size="3">
<hr noshade>
<hr align="right">
<hr width="450">
<hr size="3" width="50%" align="center">
14
<blockquote>
They went in single file, running like hounds on a
strong scent, and an eager light was in their eyes.
Nearly due west the broad swath of the marching Orcs
tramped its ugly slot; the sweet grass of Rohan had
been bruised and blackened as they passed.</blockquote>

<pre>

.
,

,
,

.
</pre>
15
<p> :<address>, 2-
, 703, /:
263-64-43</address>

<div></div>
<div></div>
:
<div>
1
<div>
2
<div>
3
</div>
</div>
</div>
16

:
0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F.
:
#00FF00 #FF0000 #0000FF #FFFFFF #000000 -
00 - FF (0 - 255)
.
.
.
.
.
:
00,33,66,99, CC,FF (216 ).

<html>
<head>
<title> </title>
</head>
<body bgcolor="silver" text="#0000FF">
<p> ,
<font color="red"> - .</font>
<hr color="green">
.
</body>
</html>
17

size="1"
size="2"
size="3"
size="4"
size="5"
size="6"
<H1>
size="7"
:
<basefont size="4">
<font size="-1">
</font>
<font size="+2"> 2 </font>

, serif
Times New Roman

, sans-serif
Arial
, monospace
Courier
<font face="Arial,Verdana,sans-serif">
?
</font>
18

<i> -
<b> -
<u> -
<strike> -
<tt> -
<big> -
<small> -
<sup> -
<sub> -

<em> -
<strong> -
<ins> - ,
,
.
<del> - ,
,
.
<cite> -
<code> -

<kbd> - , :

<var> - :
<samp> -
<dfn> -
<abbr title="- "> -
<acronym title="- "> -
<q lang="ru"> -
19

"
&
<
>
©
®
™

"
&
<
>
©
®

""
""
"
&
<
>
<nobr>.1. . 1
.<br> .2. .3
.<br><br>.3. </nobr>
deprecated: applet, basefont, center, dir, font,
isindex, menu, s, strike, u...
obsolete: listing, plaintext, xmp...
<font>
HTML 4.0
<span>
:
http://www.w3.org/TR/html4/index/elements.html
:
http://www.w3.org/TR/html4/index/attributes.html
20
lab-1-1.html
HTML-
,
,

:
o 1. -
o 1.1 -
o 1.1.1 - ..

p,
div, align=justify div
ascii- pre
, :
<h2 align="center">
Horns&Hoofs online-
</h2>
font size

hr
21
HTML

,
.

.
"=". ,
,
.
:
, . ,

.
22
:
Internet.
HTML
A
.
web-.
. IMG
24
(, anchor):
...
<a href="#"></a>
...
...
...
...
...
<a name=""></a>
<p id="">- </p>
...
:
: <a name=""></a>.
. ,

.
, ?
. ,

HTML, .
: <a href="#"></a>.
# .
.
,
.
25
26
lab-2-1
index.html
,

:
o
o
o
o Online "SPECIALIST"
o
() :
o <h3> ! MySQL 5!</h3>
o <h3> SQL 2005!</h3>
o <h3> !</h3>
o <h3> "
"</h3>
o <h3> HTML 4.0</h3>
,
.
... <a href="_"></a> ...

<a href="1.html"> 1.html</a>
2.html
1.html
1.html
2.html
3.html
3.html
27
28
lab-2-2

index.html

,

index.html :
o
o
o
o Online "SPECIALIST"
o
, index.html:
o centernews.html
o certificat.html
o events.html
o test.html
o distance.html
,
index.html

<a href="_#"></a>
<a href="1.html#"> 1.html ""</a>

<a name=""> </a>
1.html

1.html
""
- ...
...
...
...

29
30
lab-2-3
menu.html

lab-2-2\index.html menu.html
menu.html
menu.html

content.html ,

lab-2-3 menu.html
lab-2-2\index.html (lab-23\menu.html)
, content.html
content.html,
menu.html :
o centernews
o certificat
o events
o test
o distance

:
://_:/
HTML HTTP:
<a href="http://www.site.ru/page1.html"></a>
ZIP HTTP:
<a href="http://www.site.ru:81/test.zip"></a>
EXE FTP:
<a href="ftp://site.ru/pub/install.exe"></a>
e-mail, mailto:
<a href="mailto:name@site.ru"></a>
31
32
menu.html

www.specialist.ru
,

email,
email,
-
lab-2-3\menu.html
" - "
www.specialist.ru
webmaster@specialist.ru ,
email,
root
href="target.html"
current.html
target.html
root
current.html
folder
href="folder/target.html"
target.html
root
href="../target.html"
target.html
folder
root
current.html
folder
target.html
folder1
href="../folder/target.html"
current.html
33

"info.html"
"manual/info.html"
"manual"
"../help.html"
"../project/first.html"
"../../about/contact.html"
"/" -
"/demo/"
"/images/pic.gif"
"./file/doc.html" = "file/doc.html"
<head>// !
<base href="http://mysite.ru" >
34
<a href="file.html" target="_blank"></a>
<head>
<base target="_blank">
</head>
<body>
<a href="file.html" target="_self"></a>
</body>
<body bgcolor="white" text="black" link="blue"

alink="red" vlink="purple">
<body bgcolor="#ffffff" text="#000000"
link="#0000ff" alink="#ff0000"
vlink="#800080">
<body>:
link
alink
vlink
35

GIF
GIF- :
JPG
PNG
PNG-8:
.
.
PNG-24:
.
PNG-32:
.
-.
36
?
<img>
<img src="_">
<img src="img.gif">
<img src="pic/img.gif">
<img src="http://site.ru/pic/img.gif">

<img src="img.gif">
<a href="">
border = "0"
</a>
border = "1"
37
<img src="glbus.gif">
<img src=glbus.gif alt=" ">
<img src=globus.gif alt=" ">
<img src=glbus.gif title=" ">
, ...

<img src=img.gif width="100" height="150">
<img src=img.gif border="3">
<img src=img.gif align="top">
top - .
middle - .
bottom - .
left - .
right - .
vspace
hspace
hspace
vspace
38

<body background="fon.gif">
<body background="fon.gif" bgproperties="fixed">
39
40
menu.html
lab-2-3\menu.html
logo.gif " -
"
www.specialist.ru
fon.gif
, body bgproperties
<img src=img.gif usemap="#map1" >

<map name="map1">
<area shape="circle" coords="57,45,30"
href="file1.html">
</map>
rect .
circle .
poly .
default .
:
nohref
alt
title

0,0
100
200
300
400
500
100
200
300
41
internet HTML
.

.

.
: gif, jpg, png.
.
-
.
42
:
WEB-
.

. .

. web

web-
44
(unordered list)
<ul>
<li> </li>
<li> </li>
...
<li> </li>
</ul>
<ul>
<ul type="circle">
<ul type="disc">
<ul type="square">
45
(ordered list)
<ol>
<li> </li>
<li> </li>
...
<li> </li>
</ol>
46
<ol>

(1, 2, 3,...)
<ol type="1">

(1, 2, 3,...)
<ol type="A">

(A, B, C,...)
<ol type="a">

(a, b, c,...)
<ol type="I">

(I, II, III,...)
<ol type="i">

(i, ii, iii,...)
<ol start="5">
(definition list)
<dl>
<dt> </dt>
<dd>
</dd>
<dt> </dt>
<dd>
</dd>
</dl>
()
<dl><b> <b>
<dt><i> </i>
<dd>
<li>
<li>
<dt><i> </i>
<dd>
<li>
<li>
</dl>
47
48
list.html
list.html

, ,
:
o -
o (1,2,3,a,b,c)

-,
- 3 (HTML 3.2)
<table>
<tr>
<td>
</td>
</tr>
</table>
<table>
<tr> <td>
</td> <td>
</td> </tr>
<tr> <td>
</td> <td>
</td> </tr>
<tr> <td>
</td> <td>
</td> </tr>
</table>
()
<table>
<tr> 


-->


-->


49
TABLE
50
align
left, right, center
width
cellpadding
cellspacing
bgcolor
background
border
bordercolor
bordercolordark
bordercolorlight
TR
align
left, center, right
valign
top, middle, bottom,

baseline
bgcolor
bordercolor
bordercolordark
bordercolorlight
51
TD (TH)
align
left, center, right
valign
top, middle, bottom,

baseline
width
bgcolor
background
bordercolor
bordercolordark
bordercolorlight
nowrap
52
colspan
rowspan

<table>
<caption align="top"> </caption>
...
:
align = top|bottom|left|right
valign = top|bottom

border
cellspacing
cellpadding
colspan
rowspan
width
53

colspan rowspan

.
1
2
1
5
3
5
54
6
1
4
5
tables.html
4
,
()
: 2
<table border="1" cellpadding="15" cellspacing="5">

<tr valign="top">
<td> </td>
<td> <p> 1 </td>
<td> <p> 2 </td>
</tr>
</table>
55
<table border=1 cellspacing=0>

<tr>
<td>
<table border=0 cellspacing="3" width="100%">
<tr>
<td bgcolor="black"><font color="white">
1</font></td>
2</font></td>
3</font></td>
</tr>
</table>
</td>
</tr>
<tr>
<td> </td>
</tr>
</table>
56
600
400
template.html
,
.

57
58
template.html

(HTML 4.0)
<table width="600">
<thead align="center" bgcolor="#ffcc00">
<tr><td> ... </td><td> ... </td></tr>
</thead>
<tbody align="right" bgcolor="silver">
<tr><td> ... </td><td> ... </td></tr>
</tbody>
tbody
<tfoot align="center" bgcolor="red">
<tr><td> ... </td><td> ... </td></tr>
</tfoot>
</table>

<table>
<colgroup width="50" span="5">
<tr> ...
</table>
colgroup:
align = center|left|right
valign = bottom|middle|top
width = |
span =
<colgroup width="20">
<col span="10">
<col width="100">
</colgroup>
59
WEB-
:
, .
.

.
, ,
web-.
.
60
:
.
HTML.

.

62

<html>
<head>
<title> </title>
</head>
<frameset cols="25%, 75%">
<frame src="menu.html">
<frame src="content.html">
<noframes>
,
.
</noframes>
</frameset>
</html>
63
FRAMESET
<frameset cols="10%, 60%, 30%">
<frameset rows="80, 200, *">
<frameset cols="1*, 250, 3*">
<frameset rows="30%, 400, *, 2*">
<frameset cols="200,*" frameborder="1|0"

framespacing="0">
<frameset cols="200,*" bordercolor="red"
border="1">
FRAME
<frame src="page.html">
<frame src="my.html" name="main">
<frame src="my.html" name="main"
scrolling="yes|no|auto">
<frame src="my.html" name="main" noresize>
<frame src="my.html" framespacing="5" >
<frame src="my.html" frameborder="1"
bordercolor="red">
<frame src="my.html" marginwidth="5"
marginheight="5"
64

index.html
<html>
...
<frameset cols="200,*">
<frame src="menu.html" name="MENU" noresize>
<frame src="content.html" name="content">
</frameset>
</html>
menu.html
<html>
...
<body>
<a href="text.html" target="content"></a>
</body>
</html>
65
66
index.html
:
o 2
o menu, - content
o 25%, - 75%
menu.html ,
<frameset cols="25%, 75%">

<frame src="menu.html">
<frameset rows="50%, 50%">
<frame src="top.html">
<frame src="bottom.html">
</frameset>
</frameset>
:
<frameset rows="50%, 50%" cols="50%, 50%">
67
target
target = _self|_blank|_parent|_top|
_top
_parent
_top
_parent
_top
_parent

<iframe src="main.htm" width="150" height="100"></iframe>
: name, width, height, src, frameborder,
scrolling, hspace, vspace, marginwidth, marginheight
68
<form>
</form>
FORM
action
http://specialist.ru/file.php
/cgi-bin/handler.cgi
enctype
text/plain
application/x-www-form-urlencoded
multipart/form-data
method
POST
GET
<form name="myForm" action="file.php" method="POST"

enctype="text/plain">
69
<input type="text" name="login" size="20"

maxlength="25" value="">
<input type="password" name="pass" size="20"

maxlength="25" value="">
<input type="submit" value=" ">
<input type="reset" value=" ">

name () id?
<input type="checkbox"
checked>JavaScript<br>
checked>HTML<br>
<input type="radio"
<input type="radio"
<input type="radio"
<input type="radio"
checked>HTML<br>
70
name="asp" value="yes">ASP<br>
name="js" value="yes"
name="php" value="yes">PHP<br>
name="html" value="yes"
name="book"
name="book"
name="book"
name="book"
value="asp">ASP<br>
value="js">JavaScript<br>
value="php">PHP<br>
value="html"
<select name="book" size="1">

<option value="asp">ASP</option>
...
<option value="html" selected>HTML</option>
...
</select>
size="5"
size="8"
<select name="book" size="8">

<optgroup label="">
<option value="asp">ASP</option>
...
</optgroup>
<optgroup label="">
<option value="asp_rus">ASP -</option>
...
</optgroup>
</select>
<select name="book" size="8" multiple>
<select size="1" multiple> ?
71
<textarea name="description" cols="30" rows="10"

wrap="off|virtual|physical">- </textarea>
<input type="checkbox" id="book1">

<label for="book1">ASP</label>
<input type="button" name="push" value=" -

">
<input type="image" name="enter" src="bluehome.gif"

width="32" height="32">
<input type="file" name="userfile" size="20">

<form enctype="multipart/form-data">
<input type="hidden" name="uid" value="15263">
72

<input type="text" name="login" value=""
disabled><br>
<input type="checkbox" name="asp" value="yes"
checked disabled>ASP<br>
...
<input type="radio" name="book" value="php"
checked disabled>PHP<br>
<input type="button" name="push" value="
" disabled><br>
<input type="text" name="login"

value="" readonly><br>
<textarea name="description"
cols="30" rows="10" readonly> </textarea>

< tabindex="1">
<fieldset>
<legend></legend>
</fieldset>
id="asp">ASP<br>
id="js">JavaScript<br>
id="php">PHP<br>
id="html">HTML<br>
< accesskey="q">
73
74
form.html

.
-
-
75
76

(CSS)
(CSS)
(CSS):
CSS.
WEB-.
.

.

HTML
CSS:

78
(CSS)

CSS Cascading Style Sheets (
) ,
HTML-.
http://www.w3.org/TR/CSS21/cover.html
HTML:
(linking)
(embeding)
(inline)
(import)(IE)
color:red; background:#cccccc
declaration
property
value
79
(CSS)
(inline)
style="color:red; background:#cccccc"

<p>
<p style="color:red; background:#cccccc">
.
80
(CSS)
(embeding)
<style type="text/css">
p {
color:red;
background:#cccccc
}
</style>
rule
selector
<p> .
<p> .
81
(CSS)
(linking)
<link rel="stylesheet" type="text/css"
href="style.css">
<link ...
href="style.css">
p {
color:red;
background:#cccccc
}
...
index.html
style.css
82
(CSS)
<link rel="stylesheet" type="text/css"

href="style.css">
<style>
p{color:red}
div{color:green}
div{color:red}
</style>
...
<p>
<div> </div>
<p style="color:blue">
<div style="color:green">
<div style="background:#cccccc">

<div style="color:red">
</div>
</div>
</div>
83
(CSS)

em - ems,
ex - x-height, ""

px - pixels,
in - inches,
cm - centimeters,
mm - millimeters,
pt - points, (1pt = 1/72in = 0,35mm)
pc - picas, (1pc = 12pt)
% - ( +20%)
URL
(red, green, white...)
#00cc00 -
#0c0 -
rgb(0,240,125) - RGB
rgb(0%,80%,25%) - RGB,
url(" ")
: {background: url("file.gif")}
84
(CSS)
div{color:red}
div.green{color:green}
.blue{color:blue}
<div> div</div>
<div class="green">Div green</div>
<p class="green">A green
<p class="blue"> blue
<div class="blue">Div blue</div>

id
+ id
#back{color:red}
div#back{color:black}
div b{color:green}
td td td{color:blue}
<div id="back">Div id = back</div>

<div>Div <b></b> </div>
<table><tr><td><table><tr><td><table><tr><td>

</td></tr></table></td></tr></table></td></tr>
</table>
85
(CSS)

b + i { color:red }

div > p { color:red }

p[align] { color:red }
p[align="right"] { color:green }
p[align~="right"] { color:green }
div[lang|="en"] { color:red }

*{color:black}
http://www.w3.org/TR/CSS21/selector.html

h1{
color:red;
background:yellow
}
h2{
color:blue;
background:yellow
}
h3{
color:green;
background:yellow
}
86
h1,h2,h3{
background:yellow
}
h1{
color:red;
}
h2{
color:blue;
}
h3{
color:green;
}
(CSS)

:link
:visited
:active
:hover
:focus
:first-child
a:link{color:blue}
a:visited{color:blue}
a:active{color:red}
a:hover{color:green}
input:focus{color:red}
p:first-child{color:blue}
:first-line
:first-letter
:after
:before
p:first-line{color:red}
p:first-letter{color:green}
p:after{content:new}
p:before{content:Att. }
http://www.w3.org/TR/CSS21/propidx.html
87
(CSS)

font-family: |
font-family:Arial,Geneva,Helvetica,sans-serif;
font-size: |%
: xx-small, x-small, small,
medium, large, x-large, xx-large.
:larger, smaller
font-size:10px;
font-weight: normal|bold|bolder|lighter|
100 900
400 = normal, 700 = bold
font-style:bold;

font-style: normal|italic
font-style:italic;
font-variant: normal|small-caps
font-variant:small-caps;
font: font-style font-variant font-weigth

size font-family
font-
. , font-size
font-family.
font:bold 10px Arial !important;
88
(CSS)

text-align: left|right|center|justify
text-align:right;
text-decoration: none|overline(|)underline(|)linethrough
text-decoration:underline;
text-indent: |%
text-indent:10px;
text-transform: none|capitalize|uppercase|lowercase
text-transform:uppercase;

letter-spacing: normal|
letter-spacing:10px;
word-spacing: normal|
word-spacing:10px;
vertical-align: baseline|sub|super|top|texttop|middle| bottom|text-bottom|%
vertical-align:top;
line-height: normal||%
line-height:5%; font:bold 10/12px Arial
white-space: normal|pre|nowrap
white-space:pre;
89
(CSS)

list-style-type:
none|circle|disc|square|decimal|lower-alpha|upperalpha|lower-roman|upper-roman
list-style-type:square;
list-style-position: outside|inside
list-style-position:inside;
list-style-image: none|url
list-style-image:url("ball.gif");
list-style: list-style-type list-style-position
list-style-image
list-style:decimal inside;
90
(CSS)

color:
color:red;
background-color: |transparent
background-color:#330033;
background-image: none|url
background-image:url("fon.gif");
background-position:
top|bottom|center|left|right||%
background-position:top right;

background-attachment: fixed|scroll
background-attachment:fixed;
background-repeat: repeat|repeat-x|repeat-y|norepeat
background-repeat:repeat-x ;
background: transparent background-color
background-image background-repeat backgroundattachment background-position
background:#ffffff no-repeat url(fon.gif);
91
(CSS)
lab-5-1.html
:
:
:

;
;

;
;
;
;
,
,
,
,
;
;
92
(CSS)

top
border
left
padding
right
margin
bottom
border-width: |%|(thin|medium|thick)
border-color:
border-style:
none|dotted|dashed|solid|double|groove|ridge|inset|
outset
border-top-(width|color|style)
border-right-(width|color|style)
border-bottom-(width|color|style)
border-left-(width|color|style)
border: border-width border-style border-color
border: 1px solid black
93
(CSS)

margin-top: auto||%
margin-right: auto||%
margin-bottom: auto||%
margin-left: auto||%
margin: margin-top margin-right margin-bottom
margin-left
margin:10px 20px 20px 30px;

padding-top: |%
padding-right: |%
padding-bottom: |%
padding-left: |%
padding: padding-top padding-right padding-bottom
padding-left
padding:10px 20px 20px 30px;
94
(CSS)
lab-5-2.html,

:
font
size
color
background
background
border
margin
padding
95
(CSS)

width: |%
width: 100px;
height: |%
height: 100px;
float: none|left|right
float: left;
clear: none|left|right|both
clear: both;
96
(CSS)

position: static|absolute|relative
position: absolute;
top: auto||%
top: 100px;
left: auto||%
left: 100px;
<div style="position:absolute; top:100px; left:50px">

.
<div style="position:relative; top:10px; left:10px">
.
</div>
</div>
97
(CSS)

display: none|block|inline|list-item
display:block;
visibility: hidden|visible|inherit
visibility:hidden;
z-index: auto||inherit
z-index:3;
overflow: auto|scroll|visible|hidden
overflow:auto;
clip: auto|rect(top right bottom left)
clip:rect(10px 20px 30px 10px);
98
(CSS)
lab-5-3.html,

99
(CSS)

HTML
HTML
,
,
,
:
, , ,
, .
100

(media type)
TopStyle

web-

102
CSS (IE)
@import url(" ") ;
@import " " ;
:
<style type="text/css">
@import url("/style/header.css");
H1 { font-size: 120%;}
</style>
:
@import "/style/print.css" print;
@import "/style/palm.css" handheld;
H1 { font-size: 120%;}
103

all
aural
braille
handheld
print
projection
screen
tv
Media
<link media="print, handheld"
rel="stylesheet" href="print.css"
type="text/css">
<link media="screen" rel="stylesheet"

href="main.css" type="text/css">
104
Media screen and print

@media screen {
BODY {color: navy}
H1 {
border: 2px dashed maroon;
color: sienna;
padding: 7px }
}
@media print {
BODY, H1 {color: black}
}
Media screen and print
105
106
lab-5-1.html
lab-5-1.html
mod_5
,

.
TopStyle
http://www.bradsoft.com/topstyle/tslite/index.asp

cursor: auto
crosshair
default
pointer
move
text
wait
e-resize, ne-resize, nw-resize,
n-resize, se-resize, sw-resize,
s-resize, w-resize
url("")
107
: ?
108
(140px)
(640px)
(130px)
109

(media type)

HTML
HTML
110
HTML CSS.
XML-
HTML CSS. XML-
HTML
CSS. XML-

- web
HTML
CSS

XML-
112
HTML CSS. XML-
<SCRIPT language=JavaScript>
var apVersion = "" + navigator.appVersion;
var apName = "" + navigator.appName;
var arrStylesheets = document.getElementsByTagName ('link');
if (apName == 'Netscape') {
arrStylesheets[0].disabled = false;
arrStylesheets[1].disabled = true;
}
</SCRIPT>
...
<link rel="stylesheet" type="text/css" href="ie.css">
<link rel="alternate stylesheet" type="text/css" href="ff.css">
"JavaScript DHTML"
113
HTML CSS. XML-
-
web-
Object
align
classid
code
codebase
codetype
data
height
hspace
type
vspace
width
Embed
align
hidden
hspace
pluginpage
src
type
vspace
width
Embed
<embed
src="mouse.swf"
width="400" height="300"
type="application/x-shockwave-flash"
pluginspage="http://www.macromedia.co
m/go/getflashplayer">
</embed>
114
HTML CSS. XML-
Object
<object
classid="clsid:d27cdb6e-ae6d-11cf96b8-444553540000"
codebase="http://download.macromedia.
com/pub/shockwave/
cabs/flash/swflash.cab#version=6,0,0,
0" width="400" height="300>
<param
<param
<param
<param
name="movie" value="8.swf">
name="quality" value="high">
name="scale" value="exactfit">
name="bgcolor"value="#ffffff">
</object>
Object Embed
<object
classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/
cabs/flash/swflash.cab#version=6,0,0,0" width="400"
height="300>
<param
<param
<param
<param
name="movie" value="8.swf">
name="quality" value="high">
name="scale" value="exactfit">
name="bgcolor"value="#ffffff">
<embed
src="mouse.swf"
width="400" height="300" type="application/x-shockwaveflash"
pluginspage="http://www.macromedia.com/go/getflashplaye
r">
</embed>
</object>
115
HTML CSS. XML-
HTML
BGSOUND
MARQUEE
LAYER/ILAYER
balance
behavior
id
loop
bgcolor
background
src
direction
bgcolor
volume
height
width
hspace
height
loop
clip
scrollamount
left
scrolldelay
top
truespeed
visibility
vspace
z-index
width
CSS:
IE4
Alpha
Blur
IE5
DXImageTransform.Microsoft.Alpha
DXImageTransform.Microsoft.BasicImage
DXImageTransform.Microsoft.Blur
DropShadow
DXImageTransform.Microsoft.Chroma
FlipH
DXImageTransform.Microsoft.Compositor
FlipV
DXImageTransform.Microsoft.Emboss
Glow
DXImageTransform.Microsoft.Engrave
DXImageTransform.Microsoft.Gradient
Invert
Wave
Xray
116
DXImageTransform.Microsoft.Light
DXImageTransform.Microsoft.Matrix
HTML CSS. XML-
()
<IMG SRC="sample.jpg"
style="filter:
Blur(Add=1, Direction=135, Strength=10)
style="filter:
Alpha(Opacity=100, FinishOpacity=0, Style=1)"
style="filter:
DropShadow(Color=#999999, OffX=3, OffY=3, Positive=1)"
style="filter:
progid:DXImageTransform.Microsoft.BasicImage(rotation=2
, mirror=1)
progid:DXImageTransform.Microsoft.Alpha(opacity=50)
progid:DXImageTransform.Microsoft.Blur(strength=10);
position: relative">

scrollbar-3dlight-color:#CCFF60
scrollbar-arrow-color
scrollbar-base-color
scrollbar-darkshadow-color
scrollbar-face-color
scrollbar-highlight-color
scrollbar-shadow-color
scrollbar-track-color
117
HTML CSS. XML-
118
filters.html
filters.html

Alpha,
Blur,

- DropShadow
:
o filter:alpha(Opacity=100,FinishOpacity=0,Style=1)
o filter:blur(add=1)
o filter:DropShadow(Color=#999999,OffX=3,OffY=3,Positive=1)
!
HTML CSS. XML-
XML- EXtensible Markup Language

<?xml version="1.0" encoding="windows-1251" ?>
<photos>
<photo
url="../images/ettlingen01.jpg"
description="Ettlingen, Germany" />
<photo
description="Ettlingen. " />
<photo
description="Ettlingen. " />
</photos>
XML CSS, XML XSL

<?xml-stylesheet type="text/scc" href="file.css" ?>
<order>
<item quantity="2">
<category></category>
<title> HTML CSS</title>
<price>300</price>
</item>
...
</order>
XSL -
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
119
HTML CSS. XML-
XHTML- EXtensible HyperText

Markup Language

XHTML:

( ).

.
, ,
.

.
.
name
id.
DTD (document type
definition, )
<!DOCTYPE>.
XHTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD
XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xh
tml1-transitional.dtd">
<html>
<body>
<form>
<input type="text" value="
" readonly="readonly" />
</form>
</body>
</html>
120
HTML CSS. XML-

HTML CSS ,

XML( HTML) ,

XML
XSL - ,
XML
121
HTML CSS. XML-
122

META

FTP-

?

124

META
content -
name -
http-equiv -
url -
<meta http-equiv="Content-Type"
content="text/html;charset=windows-1251">
<meta http-equiv="refresh" content="60;url=www.site.ru">
<meta http-equiv="refresh" content="25">
<meta http-equiv="Expires" content="Tue,20 Aug 2006
14:25:27 GMT">
META:
<meta name="keywords" content=",
, , ,
, Web-,
, 3D
, ,
, , ,
,
(ERP), ">
<meta name="description" content="
.
.. - ,
, , ,
, , Microsoft">
<meta name="author" content=" ">
<meta name="generator" content="MSHTML 5.00">
125
126
()
127
FTP
128
HTML

""
META
<meta name="robots" content="[]">
:

index()
noindex()

follow()
nofollow()
:
ll = index,follow
none = noindex,nofollow
<meta name="robots" content="all">
129
robots.txt ( )
!

,
:
User-agent: < 1> [...
< N>]

:
Disallow: <>
robots.txt ()
# robots.txt
User-agent: WebBot
Disallow: /articles
User-agent: *
Disallow: /statistic
Disallow: /logs
Disallow: /forum/forum.html
Disallow: /my*
#
User-agent: *
Disallow: /
130
Web-
( Web-
Internet)
XML
HTML(XHTML) CSS
JavaScript DHTML
Web-
PHP
Web-.

131
132

DOT HTML/CSS
http://www.blooberry.com/indexdot/html/index.html
HTML Book

http://wdh.suncloud.ru/start.htm http://htmlbook.ru/
CSS play(ground)
http://www.cssplay.co.uk/index.html
CIT Forum
http://www.citforum.ru/
webmascon
http://www.webmascon.com/
ru_webdev
http://community.livejournal.com/ru_webdev/
XPoint
http://xpoint.ru/
Relib
http://relib.com/forums/
133
, ,
.
HTML

- FTP-
( )

(, javascript) (,
php)
134

Рабочая тетрадь курса

Загружено:

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

Описание:

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

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

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

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

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

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

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

Описание:

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

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

Рабочая тетрадь курса

Загружено:

Описание:

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

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

.

<title> HTML </title>

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional //

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset // EN"

<h1>...</h1> <!- -->

Block & inline

<hr align="right" size="3">

Times New Roman

... <a href="_"></a> ...

<a href="1.html#"> 1.html ""</a>

<a href="file.html" target="_blank"></a>

<body bgcolor="white" text="black" link="blue"

<img src=globus.gif alt=" ">

<img src=glbus.gif title=" ">

<img src=img.gif usemap="#map1" >

left, right, center

left, center, right

top, middle, bottom,

left, center, right

top, middle, bottom,

<table border="1" cellpadding="15" cellspacing="5">

<table border=1 cellspacing=0>

<frameset cols="200,*" frameborder="1|0"

<frameset cols="25%, 75%">

<form name="myForm" action="file.php" method="POST"

<input type="text" name="login" size="20"

<input type="password" name="pass" size="20"

<input type="submit" value=" ">

<input type="reset" value=" ">

<select name="book" size="1">

<select name="book" size="8">

<select name="book" size="8" multiple>

<select size="1" multiple> ?

<textarea name="description" cols="30" rows="10"

<input type="checkbox" id="book1">

<input type="button" name="push" value=" -

<input type="image" name="enter" src="bluehome.gif"

<input type="file" name="userfile" size="20">

<input type="text" name="login"

<link rel="stylesheet" type="text/css"

<div id="back">Div id = back</div>

font: font-style font-variant font-weigth

<div style="position:absolute; top:100px; left:50px">

<link media="screen" rel="stylesheet"

Media screen and print

Media screen and print

HTML CSS. XML-

HTML CSS. XML-

HTML CSS. XML-

HTML CSS. XML-

HTML CSS. XML-

HTML CSS. XML-

HTML CSS. XML-

HTML CSS. XML-

XML- EXtensible Markup Language

XML CSS, XML XSL

HTML CSS. XML-

XHTML- EXtensible HyperText

HTML CSS. XML-

HTML CSS. XML-