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

.

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

&nbsp;
&quot;
&amp;
&lt;
&gt;
&copy;
&reg;
&trade;

&#160;
&#034;
&#038;
&#060;
&#062;
&#169;
&#174;
&#153;

""
""

"
&
<
>

<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>
<a href="2.html"> 2.html</a>
<a href="3.html"> 3.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> <!--
<td>(1,1)</td>
<td>(1,2)</td>
</tr>
<tr> <!--
<td>(2,1)</td>
<td>(2,2)</td>
</tr>
<tr> <!--
<td>(3,1)</td>
<td>(3,2)</td>
</tr>
</table>

-->
<!-- -->
<!-- -->
-->
<!-- -->
<!-- -->
-->
<!-- -->
<!-- -->

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>&nbsp;</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>
<td bgcolor="black"><font color="white">
2</font></td>
<td bgcolor="black"><font color="white">
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"
<input type="checkbox"
checked>JavaScript<br>
<input type="checkbox"
<input type="checkbox"
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>
<input type="checkbox"
<input type="checkbox"
<input type="checkbox"
<input type="checkbox"
</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
url="../images/ettlingen02.jpg"
description="Ettlingen. " />
<photo
url="../images/ettlingen03.jpg"
description="Ettlingen. " />
</photos>

XML CSS, XML XSL


<?xml version="1.0" encoding="windows-1251" ?>
<?xml-stylesheet type="text/scc" href="file.css" ?>
<order>
<item quantity="2">
<category></category>
<title> HTML CSS</title>
<price>300</price>
</item>
...
</order>
XSL -
<?xml version="1.0" encoding="windows-1251" ?>
<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

Оценить