Веб Мастеринг На 100

32.988.
02-018
004.72
49
. .
49
- 100%. .: , 2013. 512 .: .
ISBN 978-5-496-00079-6
, -
- .
- HTML5, CSS3, JavaScript, jQuery, Ajax, PHP,
CMS Drupal (SEO).
: - . ,
-, 100%.
32.988.02-018
004.72
.
.
, , , . , ,

, .
ISBN 978-5-496-00079-6
, 2013

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
1. HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
2. CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 119
3. JavaScript, jQuery, Ajax . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 272
4. PHP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 406
5. CMS Drupal . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 428
6. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 470
1. ,
HTML Tidy . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 482
2. . . . . . . . . . . . . . . . . . . . . . . . . . 487
3. ,
HTML,
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 496
4. CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 501

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
1. HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
HTML- . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
HTML- . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
DOCTYPE . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
HTML- . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
HTML- . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
head . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
15
15
16
16
17
19
20
21
23
27
30
32
33
34
43
44
44
46
47
54
div () . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
span () . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
p () . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
br ( ) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
h1h6 () . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
center () . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
strong em ( ) . . . . . . . . . . . . . . . . . .
sub sup ( ) . . . . . . . . . . . . . . . . . . . . . . . . . . .
pre () . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
title . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
img () . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
hr ( ) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
a () . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
ul ol () . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
dl ( ) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
tr ( ) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
td ( ) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
thead th ( ) . . . . . . . . . . . . . . . . . . . . . . . .
tfoot ( ) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
caption ( ) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
form ( ) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
(submit) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
54
55
56
57
58
58
59
60
60
62
62
63
63
64
66
67
68
69
75
76
79
79
80
82
86
86
86
87
88
89
90
91
92
96
97
98
99
(text) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 99
(password) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 101
textarea ( ) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 101
select ( ) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 102
(checkbox) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 105
(radio) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 106
(hidden) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 107
input . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 108
Flash . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 108
HTML5 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 110
HTML5 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 111
HTML5 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 112
HTML5 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 114
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 114
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 116
2. CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 119
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
CSS HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
CSS- . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Internet Explorer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Mozilla Firefox . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Opera . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Safari . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Google Chrome . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
: . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
padding . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
margin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
120
121
134
141
148
148
150
150
154
154
156
158
159
159
159
160
160
161
164
165
: . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
display . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
visibility . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
: . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
border . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
outline . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
: . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
width . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
height . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
min-height min-width . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
max-height max-width . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
overflow . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
clip . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
: . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
text-align . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
position . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
left, right, top, bottom . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
z-index . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
zoom . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
float . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
clear . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
, 1 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
, 2 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
: . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
list-style-type . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
list-style-image . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
list-style-position . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
: . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
166
166
171
172
172
175
178
182
185
185
186
187
189
189
191
192
193
194
195
196
202
203
204
205
209
209
210
213
215
216
216
217
218
219
220
221
222
background . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
background-attachment . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
: . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
font-size . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
color . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
font-style . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
font-weight . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
line-height . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
letter-spacing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
white-space . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
text-indent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
text-decoration . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
text-transform . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
font-variant . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
word-spacing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
unicode-bidi . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
direction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
quotes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
font-family . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Cufon . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Cufon . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
: . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
: . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
vertical-align . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
border-collapse . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
border-spacing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
caption-side . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
empty-cells . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
table-layout . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
: . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
orphans . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
222
225
226
226
227
227
227
228
229
229
230
231
232
233
233
234
235
235
236
238
242
244
245
247
247
249
250
252
254
254
255
255
256
256
257
257
258
widows . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
page-break-inside . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
page-break-before . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
page-break-after . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
: . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
cursor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
CSS3 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
258
258
259
259
260
260
261
262
262
270
3. JavaScript, jQuery, Ajax . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 272

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
HTML- . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
JS- . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
DOM . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
DOM . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
jQuery . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
jQuery . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
- . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
273
273
273
274
277
280
281
283
288
290
293
298
304
306
313
318
324
325
332
348
348
349
350
354
355
10
CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
select . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Ajax . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
jQuery . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
() (jScrollPane.js) . . . . . . . . . . . . . . .
(jquery.dropshadow.js text-shadow.min.js) . . . . . . . . . . .
(ui.dropdownchecklist.js) . . . . . . . . . . . . . . . . . . . . . . . . . . .
(jquery.color.js) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
(ColorBox) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
(actions.js) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
PNG24 Internet Explorer 6 (DD_belatedPNG.js) . . . . . . . . . . . . . . . . . . . . . . .
(preloadCssImages.jQuery_v5.js) . . . . . . . . . . . . .
(jcarousellite.js) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
355
358
361
362
362
365
367
368
369
391
391
393
395
397
398
399
401
402
403
4. PHP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 406
Denwer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
PHP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
PHP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
PHP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
407
411
411
412
413
415
416
417
420
423
425
5. CMS Drupal . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 428

CMS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
429
435
435
439
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
458
458
460
461
462
464
465
467
468
6. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 470
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
sitemaps.xml . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
SEO . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
471
471
472
474
476
477
477
480
1. ,
HTML Tidy . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 482
2. . . . . . . . . . . . . . . . . . . . . . . . . . 487
3. ,
HTML,
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 496
4. CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 501
11

.
HTML,
-.
.
. .
. ,
, , .
HTML.
, , CSS, JavaScript, PHP.
Adobe Photoshop flash-.
,
- CMS (Content Management System)
.
,
. , . HTML, CSS, JavaScript, PHP - .
, , HTML CSS.
-
, ,
. ,
HTML, , .
CSS, , .

HTML, JavaScript PHP.
-. ,
-. :
,
, ,
, HTML- .
, -
, , CMS Drupal: CMS ,
. , .
.
(http://www.piter.com) .

, halickaya@minsk.piter.com ( , ).
!
http://www.piter.com
.
13
1.
HTML

HTML

Flash
HTML5
, , HTML (HyperText Markup

Language, ). ,
- : , , .
HTML .
(Cascading Style Sheets, CSS), 2.

, , HTML-.
HTML- ,
- , .
PSD HTML-, , . AI CDR.
JPG- PDF-.

. HTML, HTM PHP,
HTML-. HTML-
, ,
. ,
.
HTML-
HTML HTM , . PHP ,
- ( ) PHP.
PHP 4, PHP.
- HTML.
15
16
1. HTML
HTML-
, HTML- ,
( ). ,
HTML-
, HTML- .
, example.com,
HTML-. HTML- ,
URL- http://example.com (
, )?
- HTML- index.html
main.html. HTML- index.html.
, , , .
, 1, . , index.html, index.htm
index.php.
, HTML.
HTML
HTML HTML2.0 1995.
, HTML2.0
.
1997 HTML 3.2 4.
, 1999, HTML4.01,
.
XHTML1.0,
. HTML5
. HTML5
XHTML1.0 HTML4.01.
HTML ? ,
. .
1
, ,
, , .

. /
.
.
,
. , FONT
. . , CENTER , .
, , HTML
. , HTML
.
HTML
HTML-. -
. . HTML .
.
. HTML 5.
HTML5 XHTML1.0 .
. , . , . HTML5
. , 2010
Internet
Explorer6.0 ( Internet Explorer6.0
, ), HTML5 .
HTML
XHTML. HTML5.
DOCTYPE
HTML- DOCTYPE.
, HTML HTML.
17
18
1. HTML
, DOCTYPE : ,
, . DOCTYPE
. HTML,
DOCTYPE HTML
.
DOCTYPE ,
-. Opera ,
HTML, Internet Explorer Mozilla, ,
. , - - , .
, HTML-, .
:
<!DOCTYPE HTML>
DOCTYPE HTML5. .
DOCTYPE, :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://
www.w3.org/TR/html4/strict.dtd"> DOCTYPE HTML4.01
Strict ();
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//
EN" "http://www.w3.org/TR/html4/loose.dtd"> DOCTYPE HTML4.01 Transitional ();
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd"> DOCTYPE HTML4.01 Frameset ( );
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> DOCTYPE
XHTML1.0 Strict ();
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//
EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.
dtd"> DOCTYPE XHTML1.0 Transitional ();
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
DOCTYPE XHTML1.0 Frameset ( );
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://

www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> DOCTYPE
XHTML1.1.
, DOCTYPE HTML5 : . , XHTML1.1, Transitional,

Frameset Strict.
Transitional, Frameset Strict ,
HTML, .
Transitional, ,
HTML . HTML
- , Transitional . Transitional , , ,
HTML.
Frameset Transitional, , Frameset
.
Strict ,
HTML. Strict
HTML CSS.
- <!DOCTYPE HTML>, DOCTYPE HTML: <!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/
TR/xhtml1/DTD/xhtml1-strict.dtd">.
, DOCTYPE, . HTML DOCTYPE,
.
HTML-
DOCTYPE,
HTML-. HTML
. .
, HTML- HTML, DOCTYPE. HEAD
BODY. BODY, ,
, HEAD.
,
. HTML5 HTML- 1.1.
19
20
1. HTML
1.1. HTML- HTML5
<!DOCTYPE HTML>
<html>
<head>

<title></title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
</head>
<body>
</body>
</html>
XHTML (1.2).
1.2. HTML- XHTML1.0 Strict
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/

xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>

<title></title>
</head>
<body>
</body>
</html>
HTML-
, , HTML UTF-8, :
<meta http-equiv="content-type" content="text/html;
charset=UTF-8" />
HTML- UTF-8, HTML- .

UTF-8 (.1.1).
,
.
. 1.1. HTML- UTF-8

HTML- ,
(.1.2). ,
- : Opera, Mozilla Firefox, Safari,
Google Chrome Internet Explorer 69,
-, , .
. 1.2. HTML-:
UTF-8,
21
22
1. HTML
2 ,
.
Windows.
:
Opera http://www.opera.com/download/;
Safari http://www.apple.com/ru/safari/download/;
Google Chrome http://www.google.ru/chrome;
Mozilla Firefox http://www.mozilla.org/ru/firefox/new/;
Internet Explorer http://windows.microsoft.com/ru-RU/internet-explorer/downloads/ie.
Internet Explorer. ,
- , , 6.
Internet Explorer. . Internet Explorer ( 9),
, Internet Explorer . Utilu
IE Collection, http://finalbuilds.edskes.net/
iecollection.htm.
Utilu IE Collection Internet
Explorer6 . .
.
Windows. , , , -.
, .
,
-, , .
http://browsershots.org. , , , JavaScript Flash .
,
Windows,
: Linux MacOS.
. , - ,
. :
-. , : . ,
Mozilla Firefox.
:
( ),
CSS- JavaScript- ;
,
;
, , ( ,
);
Web Developer Mozilla Firefox ( ).

, HTML-
. .
HTML-
. HTML-
, . ,
,
//.
HTML-
. HTML- .
Microsoft
Word .
, HTML-. ,
, . ,
. .
23
24
1. HTML
.
Notepad++.
Notepad++, http://notepad-plus-plus.org/.
, HTML, CSS, JavaScript, PHP (.1.3).
Notepad++ .
. 1.3. Notepad++
phpDesignerPro. , - , Notepad++. . , . , .
phpDesignerPro,
http://www.mpsoftware.com.
21.
, HTML (.1.4).
HTML-.
HTML-.
. 1.4. HTML-
phpDesignerPro , PHP, XHTML, HTML5, CSS3, JavaScript, XML, Perl, VBScript,

SQL, Java, ,
.
. , , CSS, PHP jQuery (.1.5).
(.1.6).
, ,
. PHP,
.
, HTML- (.1.7).
.
phpDesignerPro .
25
26
1. HTML
. 1.5.
. 1.6.
phpDesignerPro.
, FTP, HTML-
.
.
.
HTML:
Adobe Dreamweaver (http://www.adobe.com/cfusion/tdrc/index.cfm?product=dream
weaver) - ;
Hotdog (http://www.sausage.com/hotdog-professional.html)
HTML-, Flash,
PHP, ASP, SQL; GIF- (), (CHM);
. 1.7. HTML-
HTML Pad (http://www.soft.necromancers.ru/prog_4764.html)

HTML, JavaScript, VBScript, SSI, ASP Perl, ;
PSPad (http://www.pspad.com/ru/download.php)
, HTML CSS;
HtmlReader (http://manticora.ru/download.htm) , , HTML-;
EditPlus (http://www.editplus.com) , HTML, PHP, Java, C/C++, CSS, ASP, Perl, JavaScript, VBScript, Python
and Ruby on Rails.
HTML, ,
.
, HTML- DOCTYPE.
27
28
1. HTML
, HTML-
.
.
http://validator.w3.org (.1.8).
, HTML- HTML-.
. 1.8. HTML
DOCTYPE .
, More
Options ( ).
, , ,
, (.1.9).
, , (.1.10).
. 1.9. ,
. 1.10.
, HTML-
Tidy. http://tidy.
sourceforge.net.
Mozilla Firefox, , , HTML Validator.
http://users.skynet.be/mgueury/mozilla/.
29
30
1. HTML
1 , , HTML Tidy;
.

HTML, CSS, JavaScript.
, , , Photoshop. , Adobe Photoshop .
,
.
.
Adobe Photoshop,
- http://pixlr.com/editor (.1.11).
. 1.11. -
Adobe Photoshop , Adobe Photoshop PSD:
Paint.Net (http://www.getpaint.net/download.html)
Paint.NET PSD Plugin (http://psdplugin.codeplex.com);
PSD viewer (http://psdviewer.org) ,
PSD-;
GIMP (http://www.gimp.org/downloads) Adobe Photoshop, Linux, Windows.
PSD,
:
CDR CorelDRAW;
:
XnView (http://xnview.com) CDR-;
CDR Explorer (http://sk1project.org)

, CDR-;
SK1 (http://sk1project.org) Linux;
Inkscape (http://inkscape.org/index.php?lang=ru)
; CDR,
CDR-
UniConvertor;
UniConvertor (http://sk1project.org)
CDR AI, PDF, SVG .;
AI Adobe Illustrator; XnView Ghostscript (http://www.ghostscript.com);

PDF PDF, Acrobat Reader.
, PSD,
(, AI), EPS ( CDR, AI), PNG24.
EPS ,
Adobe Photoshop.
PNG24 Photoshop. PNG24 .
Photoshop Adobe Photoshop.
31
32
1. HTML

, -
. , Web
Developer Mozilla Firefox (https://addons.mozilla.org/ru/firefox/addon/
web-developer). Mozilla Firefox
,
(.1.12).
. 1.12. Web Developer Mozilla Firefox
:
Mozilla
Firefox -;
JavaScript JavaScript
, Mozilla Firefox;
Cookies Cookies Cookies Cookies
, Mozilla Firefox;
HTML
CSS CSS CSS-, -;

, , action, method,
name, size, maxlength;
,
;
, ;
ALT
alt img ;
;
, ;
HTML HTML
Web Developer;
Validate HTML http://validator.w3.org;
Validate CSS CSS .
, , CSS JavaScript.
HTML
. HTML
. HTML .
.
, ,
, . ,

HTML , , . ,
. , , . ,
.
33
34
1. HTML

HTML, ,
. ,
, .
HTML , HTML-,
, :
;
.
(.1.13).
. 1.13. HTML-
, . , ,
, . , < >,
: <>.
- . ,
div, <div>.
HTML
- , .
, HTML-
, HTML.
.
. <>,
. .
, ,
..
. . :
<></>, <> </>.
. ( , Internet Explorer)
. .
-.
, .

- .
- :
<>- </>. / .
,
( ).
. . . . , (
):
, , : html,
head, body;
, head: title, meta;
, , ,
35
36
1. HTML
: blockquote, div, h1, h2, h3, h4, h5, h6, hr, p, pre;
, ,
(.1.14);
. 1.14.
() ,
, ; (,
): a, b, big,
em, i, img, small, span, strong, sub, sup (.1.15);
. 1.15.
HTML
,
: del, ins;
,
: ul, ol, li, dd, dt, dl
(.1.16);
. 1.16.
, , : table, thead, tbody, td, th, tr (.1.17);
. 1.17.
37
38
1. HTML
, (
HTML-, HTML-): frame,
frameset, iframe.
.
, (.1.1).
1.1.

?

?

,

,

, ,

,

,

:
< 1="1" 2="2"></>
, -
.
.
. :
<
1="1"
2="2"></>
XHTML. . HTML
.
, .
. =.
:
HTML
: ';
: ".
, , `, .
.
.
:
=""";
="""".
,
: ,
, .
:
="'";
="''";
='"';
='""'.
,
, .
,
: . ,
:
="\"";
="\"\"";
="'\"";
='\'""'.
: JavaScript PHP.
. .
. :
: black (), blue () ..;
: #ff0000 (), #000000

() ..
39
40
1. HTML
. :
- , , ( );
1 100 , ,
,
70%, 30%.
. :
http://microsoft.com, http://mail.ru/content.html,
:///;
/content.html, ../css/style.css,
;
, .
.
, , ,
. .
2, CSS.
, .
? ?
, ?
, HTML- ,
. , . < >, ,
. ,
?
,
, ,
- .
(-) &,
;. :
;
, # (

: &#;).
HTML
,
, .
.
- & ,
.
<, >, &? (. 1.18):
> >;
< <;
& &.
. 1.18. HTML-
,
, .
( - )
, : ".
, ,
. ,
© HTML- ().
41
42
1. HTML
HTML- UTF-8, ,
, .
,
Windows charmap.exe. (.1.19).
. , .
HTML- ( Ctrl+V).
. 1.19. (charmap.exe) Windows
, :
, ; ,
, , ,
;
€ ,
() ?
2.
HTML

XHTML:
HTML- DOCTYPE;
( ), XHTML ;
;
;
:
<br />, <img />, <input />, <hr />, <meta />;
,
(, <strong> <em></
strong> </em>);
( ) ;
: checked="checked",
compact="compact", disabled="disabled", ismap="ismap", multiple=
"multiple", nohref="nohref", noresize="noresize", noshade=
"noshade", nowrap="nowrap", readonly="readonly", selected=
"selected";
a, frame, iframe, img, map name
id.
HTML4
. , HTML.
XHTML.

, , -
. , , - :
DOCTYPE;
;
;
,
;
.
43
44
1. HTML
HTML-.
1 ,
HTML Tidy, .

, , ,
, .
, ,
.
, , . , . , , .
,
. ,
ul ol.
, 1 -, .
, .
, ,
.
head
, HTML- DOCTYPE.
html,
head body:
<html>
<head></head>
<body></body>
</html>
1
, HTML.
HTML
HTML-, ,
body, head .
head, , .
head ,
-: CSS JS-, RSS-,
.
.
head .
-
- . , (.1.20) , .
. 1.20. -
title
.
meta
head meta (). ,
-, .
meta . meta , . -
head meta
.
45
46
1. HTML
. meta , HTML-:
<meta http-equiv="Content-Type" content="text/html; charset=
">
HTML-.
HTML- :
Windows-1251 , , , , , ;
UTF-8 .
. ,
, :
<meta name="description" content=" ">

, , .
. , ,
(.1.21).
. , ,
, ,
:
<meta name="keywords" content="HTML, META, , ">
, content ,
/ .

.
, -
. , .

head .
.
. 1.21.

, ? , HTML- . .
, -
PSD, .
. , .1.22.

(http://angedesign.ru).
Adobe Photoshop . , .
, -.
,
, , , . ,
.
47
48
1. HTML
. 1.22. -
. Adobe Photoshop,
: ?
.
,
. .
1. Ctrl
. , .
2. Ctrl+C,
.
3. Ctrl+N, ,
,
, .
4. Ctrl+V,
.
5. , ,
,
. .
, - , (, ,
). , .
1. Photoshop , , .
2.
.
3. ,
.
, Ctrl+C,
.
(Ctrl+N) (Ctrl+V).
.
, . , .
. , .
Ctrl+Shift+Alt+S
(. 1.23).
49
50
1. HTML
. 1.23.
Web . .
JPG
, 200. .
, 0 100. ,
, . - 5060 .
4050.
.
, JPG- .
, ,
, .
PNG8
. , Windows.

(.1.24).
. 1.24. PNG-8
, .
, . PNG-8 256.
, .
, , .

. , .
. ,
PNG-8 . ,
, . , ? :
51
52
1. HTML
;
, (.1.25, );
,

(..1.25, ).
. 1.25.
PNG-8, , .
PNG24
.
. .

. GIF,
PNG. GIF
.
,
.
JPG:
,
;
JPG- PNG-
.
PNG-8:
, ;
, Windows, ; 128,
16 ( ,
, );
, HTML- / ;
, 100%;
,
, .
PNG-24:
,
;
PNG-24
.
.
, , .
,
, . ?
(.1.26).
. 1.26.
, ,
. , , ,
. ,
. -. , ,
? :
;
, ;
53
54
1. HTML
,
.
, . 1 ,
, .

. ?
, ?
: . ,
CSS
. . -
, - (, ).
.
1.
, ,
CSS.
,
. , . body
HTML.
body , .
,
span, div, .
div ()
, , div. ,
,
, .
-?
div, /
div.
- ? div, .
- ? div,
.
, div , :
-
;
, HTML-.
span ()
, div , -, . ,
div .
div, div div.
div, - span.
, div, . ,
span , .
, , .
span
(. 1.27).
. 1.27. span div
55
56
1. HTML

. , . , (.1.28).
. 1.28. ,
, - ,
.
(header).
, , , -
-.
(footer). , , ,
.
.
( ).
.
HTML-.
div. HTML- (1.3).
1.3.
<!DOCTYPE HTML>
<html>
<head>

<title></title>
</head>
<body>
<div>
<div></div>
<div> </div>
<div></div>
</div>
</body>
</html>
, .
:
div?
, .
,
. , , .
.
2, CSS.

, . div
57
58
1. HTML
span. , ,
p.
p ()
p , :
<p> </p><p> </p>
, , , p, . ,
p, (.1.29).
. 1.29. -
,
, .
br ( )
p .
, ? br. ,
: <br />.
p
br (.1.30).
. 1.30. br
, br , p,
-, , .. br
- .
h1h6 ()
?
HTML. : h1, h2, h3, h4,
h5 h6. ( ), .
h1 , .
h2 . , . (.1.31).

. , h1,
59
60
1. HTML
h2, h3. , , h1, h3,

h4 .
. 1.31.
center ()
, center .
HTML ( CSS).
- , center
.
center , . div, p, . div p ,
(. 1.32).
strong em ( )
, Microsoft Word, , ,
, .
, HTML : strong em.
. 1.32.
strong em . . (.1.33). ,
, .
( ).
. 1.33.
61
62
1. HTML
sub sup ( )
, . , , , . , ,
HTML, CSS JScript.
.
.
sup?
: <sup>2</sup> (.1.34).
. 1.34.
pre ()
, , HTML , ? , . pre.
, pre, :
, (.1.35).
, pre
HTML. ,
<, >, & HTML-. pre (<, >, &).
pre HTML-
.
. 1.35. pre
.
. , ,
HTML- , ?
HTML, : .
. , , .
:

title
, title,
-, ,
(.1.36).
, , . title ,
body. ,
63
64
1. HTML
, : a, abbr, acronym, address, applet,

area, b, basefont, bdo bgsound, big, blockquote, body, br, button, caption,
center, cite, code, col, colgroup, dd, del, dfn, dir, div, dl, dt, em, embed,
fieldset, font, form, frame, h1, h2, h3, h4, h5, h6, hr, i, iframe, img, input, ins,
isindex, kbd, label, legend, li, link, map, marquee, menu, nobr, object, ol,
option, p, plaintext, pre, q, s, samp, select, small, span, strike, strong, sub,
sup, table, tbody, td, textarea, tfoot, th, thead, tr, tt, u, ul, var, wbr, xmp.
, . .
title .
. 1.36. title

- . , .
(1.4).
1.4.
<!DOCTYPE HTML>
<html>
<head>

<title></title>
</head>
<body>
<div>

<div>
<div>+7 (495) 111-11-11, +7 (903) 111-11-11</div>
<h3> </h3>
<div>0 / 0 .</div>
</div>
<div>
<div>
<h3> </h3>
</div>
<div>
<h3>Wildberries ,
</h3>
<p>- Wildberries
, .
, , .</p>
<p> ,
.
, ,
.
.</p>
<p>- , Wildberries.ru
.</p>
</div>
</div>
<div>
<p>Copyright 2005-2011 Stracci.ru - ,
. .</p>
<p> . : +7 (495) 775-55-05 (),
+7 (800) 700-1-500 ().</p>
</div>
</div>
</body>
</html>
, (.1.37)?
- , ? ,
, . ,
65
66
1. HTML
,
.
. 1.37.

, ,
. . .
. ,
.
.
.
,
, .
.
-.
img ()
- .
- img. ,
: <img />. img
- body
. , .
img , .
src. , -
src. ,
HTML-.
GIF-, PNG-, JPG- JPEG-. , .
, src
, :
( ). , ,
. .
alt. , img, alt.
, ,
- (.1.38). ,
alt img .
. 1.38.
67
68
1. HTML
: , alt
, : alt="". alt .
. img .
CSS. .

width height. width height ,
img. . , img.
-, HTML-,
CSS JS- , , .
.
, -.
, . , img,
, ? . , width height.
.
width height ,
,
alt. (, ),
, .
.
. img:
<img alt="" src=" " />
<img alt="" src=" " />
hr ( )
hr . - ,
, - .
, , ,
(.1.39).
. 1.39.
a ()
.
. ,
.
, , . , -.
HTML- ,
a. href.
-, .
, (
), href
#.
. href, a
target. ,
-, .
,
, -. target _blank,
( , ).
69
70
1. HTML
_blank, target :
_self (
target);
_parent ; , , _self;
_top
, , ;
, _self.
. a :
<a href=""></a>
<a target="_blank" href=""></a>
(). a. , ,
a .
, ,
/ , ,
. - , , Acrobat Reader, ,
() HTML.
, , href
a : #_, id - -
(1.5).
1.5.
<!DOCTYPE HTML>
<html>
<head>

<title></title>
</head>
<body>
<div id="goto_top"><a href="#goto_bottom"></a></div>
<div>
<p>-...</p>

<p>-...</p>
<p>-...</p>
<p>-...</p>
<p>-...</p>
<p>-...</p>
<p>... </p>
</div>
<div id="goto_bottom"><a href="#goto_top"></a></div>
</body>
</html>
.1.40 -.
.
. 1.40. () HTML-
,
- .
href : <ahref="http://microsoft.com#onfooter">
71
72
1. HTML
</a>. .

.
. href a
- - .
, .
,
. ,
:
HTM, HTML, PHP, CGI - ( ,
);
TXT (,
, );
JPG, JPEG, GIF, PNG ;
Ctrl+S, ;
SWF Adobe Flash,
-, SWF ;
PDF , PDF-
PDF-;
EXE, DOC, DOCX, XLS, XSLX, ZIP, RAR
;
,
, .
. a .

,
href (.1.41).
:
<a href="mailto:onestyle@list.ru"> </a>
, e-mail onestyle@list.ru.
. 1.41. , Outlook
.
a . .
:
<a href="mailto:onestyle@list.ru?="> </a>
<a href="mailto:onestyle@list.ru?=&2=2">
</a>
:
subject ;
body ;
cc , ;
bcc ,
.
- ,
%20.
%0A.
(..1.41):
<a href="mailto:onestyle@list.ru?subject=%20&body=
.%0A%20%20%20%20%20">
</a>.
73
74
1. HTML
. Windows , , , http mailto,

href, ,
,
. , a .
, a .
. :
Skype a href,
skype:, Skype ;
ICQ a href, icq:, ICQ ;
Webmoney Keeper Classic
wmk. :
wmk:refresh Webmoney Keeper Classic;
wmk:exit ;
wmk:payto?purse=&amount=&desc=
WM ;
wmk:msgto?to=WMID&subject=_&msg=_ WMID;
wmk:explore?url=&title= -;
wmk:display?window=&page=_&param=
__+ ,
window . window : main ( ), options ( ), props (
, WMID), about
( ), messages ( ), invoices_
out ( ), invoices_in (
, ), operations ( ).
: , , , , .

, -
(img a). .
: . .
. , (http:// https://), (, microsoft.com), - - (, index.htm), .
www. :
http://microsoft.com/index.htm;
http://www.microsoft.com/index.htm.
, www www .
. :
www , www ;
-;
: www ,
www ;
www www ,
; , , www
, www
.
- , , -.
HTML- . :
http://dev.biz.ua/index.php ;
http://dev.biz.ua/files/index.php , files ;
http://dev.biz.ua/sites/files/index.php , files, , , sites, sites
.
,
.
75
76
1. HTML
.
,
. ,
.
. ,
,
.
.
/sites/index.php index.php sites, .
http://_/sites/index.php.
,
, -.
HTML-,
.
sites/index.php index.php sites, , .
http://dev.biz.ua/files/about.php,
http://dev.biz.ua/files/sites/index.php.
http://dev.biz.ua/about.php, http://dev.biz.ua/sites/index.php.
../sites/index.php index.php sites, ,
, , , , .
http://dev.biz.ua/files/about.php,
http://dev.biz.ua/sites/index.php.
.. ,
-.
... , ../../sites/index.php
-.

. , HTML-
(1.6).
1.6. HTML-
<div>
<div>

<a href="/"><img alt="" src="img/logo.png" /></a>
<div>+7 (495) 111-11-11, +7 (903) 111-11-11</div>
<div>
<a href="#"><img alt="facebook" src="img/btn_facebook.png"
width="32px" height="32px" /></a>
<a href="#"><img alt="google" src="img/btn_google.png" width="32px"
height="32px" /></a>
<a href="#"><img alt="livejournal" src="img/btn_livejournal.png"
<a href="#"><img alt="mailru" src="img/btn_mailru.png" width="32px"
<a href="#"><img alt="vkontakte" src="img/btn_vkontakte.png"
<a href="#"><img alt="twitter" src="img/btn_twitter.png"
</div>
<div>
<a href="#"><img alt="" src="img/cart.png" width="66px"
<h3> </h3>
<div>0 / 0 .</div>
</div>
</div>
<div>
<div>
<a href="#"><img alt="" src="img/banner3.jpg" width="637px"
</div>
<div>
<h3> </h3>
<div>
<img alt="" src="img/rotator_left.png" width="23px"
77
78
1. HTML
height="43px" />
<a href="#"><img alt="" src="img/product1.jpg" width="173px"
<img alt="" src="img/rotator_right.png" width="23px"
height="43px" />
</div>
</div>
<div>
<h3>Wildberries ,
</h3>
<p>- Wildberries
, .
, , .</p>
<p> ,
.
, ,
.
.</p>
.</p>
</div>
</div>
<div>
. .</p>
<p> . : +7 (495) 775-55-05 (),
+7 (800) 700-1-500 ().</p>
</div>
</div>
.1.42, ,
. . ,
.
. 1.42. :
,
. Mozilla Firefox,
. CSS .
ul ol,
,
.
ul ol ()
.
. ,
.
,
.
79
80
1. HTML
, :
ul ,
;
ol ,
.
ul :
<ul>
<li> 1</li>
<li> 2</li>
</ul>
ol :
<ol>
<li> 1</li>
<li> 2</li>
</ol>
, . ol
, , .
start (.1.43).
dl ( )
dl. ol ul,
, , :
<dl>
<dt></dt>
<dd> </dd>
</dl>
,
, FAQ ,
(.1.44).
. 1.43.
. 1.44. dl, dt, dd
81
82
1. HTML

. , (1.7).
1.7.
<div>
<div>
<div>+7 (495) 111-11-11, +7 (903) 111-11-11</div>
<div>
<a href="#"><img alt="google" src="img/btn_google.png" width="32px"
<a href="#"><img alt="mailru" src="img/btn_mailru.png" width="32px"
</div>
<div>
<ul>
<li><a href="#"></a></li>
<li><a href="#"> </a></li>
</ul>
</div>
<div>
<h3> </h3>
<div>0 / 0 .</div>
</div>
<div>

<ul>
</ul>
</div>
<div>
<ul>
<li><a href="#"> </a></li>
<li><a href="#"> </a></li>
<li><a href="#"> </a></li>
<li><a href="#"> </a></li>
</ul>
</div>
</div>
<div>
<div>
<ul>
<li><a href="#"> </a>
<ul>
</ul>
</li>
<li><a href="#"> </a>
<ul>
<li><a href="#"> </a></li>
</ul>
</li>
<li><a href="#"> </a>
<ul>
83
84
1. HTML
</ul>
</li>
</ul>
</div>
<div>
</div>
<div>
<h3> </h3>
<div>
height="43px" />
height="43px" />
</div>
</div>
<div>
<h3>Wildberries ,
</h3>
<p>- Wildberries
, .
, , .</p>

<p> ,
.
, ,
.
.</p>
.</p>
</div>
</div>
<div>
<p>Copyright 2005-2011 Stracci.ru - - ,
. .</p>
<p> . : +7 (495) 775-55-05 (),
+7 (800) 700-1-500 ().</p>
</div>
</div>
, , , ,
(.1.45).
. 1.45.
85
86
1. HTML
.
, . ,
. ,
, ,
.
.
. div
CSS. . - ,
.
, table.
, .
, , table.
.
tr ( )
, .
HTML. , table
tr. tr , :
<table>
<tr></tr>
<tr></tr>
</table>
td ( )
.
. , ,
. .
, , tr
td. ,
td:
<table>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
: td tr.
, .

:
<table><tr>
<td> 1 1</td>
<td> 2 1</td>
</tr><tr>
<td> 1 2</td>
<td> 2 2</td>
</tr></table>

. tbody:
87
88
1. HTML
<table>
<tbody><tr>
<td> 1 1</td>
<td> 2 1</td>
</tr><tr>
<td> 1 2</td>
<td> 2 2</td>
</tr></tbody>
</table>
. / .
thead th ( )
, , . ( ,
) thead.
tr. tr td th:
<table>
<thead><tr>
<th> 1</th>
<th> 2</th>
</tr></thead>
<tbody><tr>
<td> 1 1</td>
<td> 2 1</td>
</tr><tr>
<td> 1 2</td>
<td> 2 2</td>
</tr></tbody>
</table>
,
, . th
td .
tfoot ( )
, , ,
.
, tfoot,
tbody. tr , td
(. 1.46):
<table>
<thead><tr>
<th> 1</th>
<th> 2</th>
</tr></thead>
<tfoot><tr>
<th> 1</th>
<th> 2</th>
</tr></tfoot>
<tbody><tr>
<td> 1 1</td>
<td> 2 1</td>
</tr><tr>
<td> 1 2</td>
<td> 2 2</td>
89
90
1. HTML
</tr></tbody>
</table>
. 1.46.
,
, thead, tfoot tbody.
.1.46, . , , .
caption ( )
,
. caption.
, table:
<table>
<caption> </caption>
<thead><tr>
<th> 1</th>
<th> 2</th>
</tr></thead>
<tfoot><tr>
<th> 1</th>
<th> 2</th>
</tr></tfoot>
<tbody><tr>
<td> 1 1</td>
<td> 2 1</td>
</tr><tr>
<td> 1 2</td>
<td> 2 2</td>
</tr></tbody>
</table>
, .
, .

,
. HTML
.
colspan. ,
. td colspan. , .
, colspan="3" ,
: . , , , :
<table><tr>
<td> 1 1</td>
<td> 2 1</td>
</tr><tr>
<td colspan="2"> 1 2 2</td>
</tr></table>
91
92
1. HTML
rowspan. colspan, rowspan,

:
<table><tr>
<td rowspan="2"> 1 1 2</td>
<td> 2 1</td>
</tr><tr>
<td> 2 2</td>
</tr></table>
.1.47 , ,
: colspan, rowspan.
. 1.47.
colspan rowspan ,
. .

, . (1.8).

1.8.
<div>
<table><tr>
<td>
</td><td>
<div>+7 (495) 111-11-11, +7 (903) 111-11-11</div>
<div>
<a href="#"><img alt="google" src="img/btn_google.png"
<a href="#"><img alt="mailru" src="img/btn_mailru.png"
</div>
<div>
<ul>
<li><a href="#"> </a></li>
</ul>
</div>
</td><td>
<div>
<h3> </h3>
<div>0 / 0 .</div>
</div>
<div>
93
94
1. HTML
<ul>
</ul>
</div>
</td>
</tr><tr>
<td colspan="3">
<ul>
<li><a href="#"> </a></li>
<li><a href="#"> </a></li>
<li><a href="#"> </a></li>
<li><a href="#"> </a></li>
</ul>
</td>
</tr></table>
<table><tr>
<td colspan="3"> </td>
</tr><tr>
<td rowspan="2">
<div>
<ul>
<li><a href="#"> </a>
<ul>
</ul>
</li>
<li><a href="#"> </a>
<ul>
<li><a href="#"> </a></li>
</ul>
</li>
<li><a href="#"> </a>

<ul>
</ul>
</li>
</ul>
</div>
</td><td>
</td><td>
</td>
</tr><tr>
<td colspan="2">
<div>
<h3> </h3>
<div>
height="43px" />
height="43px" />
</div>
</div>
<div>
95
96
1. HTML
<h3>Wildberries ,
</h3>
<p>- Wildberries
, .
, , .</p>
<p> ,
.
, ,
.
.</p>
.</p>
</div>
</td>
</tr></table>
<div>
. .</p>
<p> . : +7 (495) 775-55-05 (),
+7 (800) 700-1-500 ().</p>
</div>
</div>
-
(.1.48).
, CSS .
. , . . ,
- .

HTML .
JavaScript PHP,
. ,
, JavaScript PHP.
? , : , .
. 1.48.
, ,
, , .
HTML.
HTML , , .
. , -
.
form ( )
, form.
, , .
, , HTML.
, , , . , , , . , :
97
98
1. HTML
<form method="get" action="">

<h3> </h3>
<div> </div>
</form>
action. , , . ?
, ,
.
action .
,
-.
action.
, .
action : action="".
method. form method.
, ,
.
:
get -;
post -.
4, PHP.

input.
type ,
:
<input type="" />
type, input .
input name.
,
.
input value.
, , name.
input readonly readonly. , input. JavaScript.
readonly disabled
disabled.
, . , ,
, .
.
(submit)
. , .
. , .
.
, type
submit:
<input type="submit" value="" name="form_submit" />
value , (.1.49). ,
, , ,
.
, value , name .
(text)
, , .
. text type:
<input type="text" name="form_name" value=" " />
99
100
1. HTML
. 1.49.
value , ,
. ,
value , ,
value .
(.1.50).
. 1.50.
,
. maxlength,
.
(password)
. , . ,
, (.1.51).
. 1.51.
, password type:
<input type="password" name="form_pass" value=""
maxlength="8" />
textarea ( )
, , input. ,
textarea:
<textarea name="form_bigtext">- </textarea>
.1.52, , . ,
, ,
.
, , rows. , .
101
102
1. HTML
.
.
. 1.52.
input, textarea readonly

disabled. input.
select ( )
input textarea,
select. (.1.53).
:
<select name="form_select">
<option value="1"></option>
</select>
name, , , select.
value, ,
option.
. 1.53. , select
option ,
.
option
( , option, ). value option
.
size. select
, , .
, (..1.53,
).
size select ,
(..1.53, ).
, , size,
, .
multiple. size
. ,
. - .
, multiple : multiple="multiple".
103
104
1. HTML
selected. value, option

selected . . select
option selected,
.
, select option selected.
disabled. disabled disabled
select, option. .
.
optgroup.
, . .
optgroup, select. (.1.54):
<select size="7" name="form_select">
<optgroup label="">
</optgroup>
<optgroup label="">
</optgroup>
</select>
option optgroup,
label optgroup.
. 1.54.
(checkbox)
input. checkbox type
:
<input type="checkbox" name="form_checkbox" value="1" />
.1.55, . . - , label (.1.55,
). :
<input type="checkbox" name="form_checkbox" value="1" id="id_
checkbox" /><label for="id_checkbox"> </label>
, label input
id , ,
for label.
label .
- ,
label / ,
.
105
106
1. HTML
. 1.55.
(radio)
.
( ,
, ), , .

, ? , , (.1.56).
. 1.56.
radio type input:

<input type="radio" name="form_radio" value="1" />
.
,
:
, ,
. ,
,
. - ,
label:
<input type="radio" name="form_radio" id="form_radio1" value="1"
/><label for="form_radio1"> 1</label>
(hidden)
,
.
, , . - ,
.
HTML hidden type
input:
<input type="hidden" value="1234567" name="userid" />

userid 1234567. - , .
107
108
1. HTML
input
input.
type input :
button ;
file , ;
image submit ( ),
, ;
reset ,
, .
, input. , , . .1.57
, .
. 1.57. input
Flash
, , HTML- ,
, flash.
Flash
, .
, . GIF. , , .

img.
SWF-, -?
SWF- ,
. ,
. , 1.9 SWF-,
.1.58 SWF-.
1.9. Flash
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="460"

height="379" id="myFlashContent">
<param name="movie" value="flash/pl.swf" />
<param name="wmode" value="transparent" />

<object type="application/x-shockwave-flash" data="flash/pl.swf"
width="460" height="379">
<param name="wmode" value="transparent" />

<a href="http://www.adobe.com/go/getflashplayer">
<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.
gif" alt=" Flash-" />
</a>

</object>

</object>
, SWF- . , Flash .
Flash
.
, Flash-, SWF- (. .1.58, ).
Flash-,
Flash- (. .1.58, ).
109
110
1. HTML
. 1.58. Flash () Flash-

()
HTML5
, HTML.
HTML,
. HTML5.
-
XHTML HTML, HTML5.
, ,
HTML5. , . , HTML5. ,
, .
, , HTML5 . .
, HTML5. .
DOCTYPE <!DOCTYPE html>. .
HTML5
? DOCTYPE? , ,
HTML5.
HTML5
, - HTML5
div -,
, :
header , , ;
footer , ,
(,
);
article HTML5 ,
, ,
;
nav ;
section ;
aside .
Internet Explorer 6, 7, 8.
9- .
Mozilla Firefox,
4-.
HTML5 (1.10).
1.10. - HTML5
<!DOCTYPE HTML>
<html>
<head>

<title></title>
</head>
<body>
<section>
<header></header>
<section> </section>
111
112
1. HTML
<footer></footer>
</section>
</body>
</html>
, , , div.
.1.59, - InternetExplorer9.
.1.59, - MozillaFirefox3.0, .
. 1.59. , HTML5 () ()
HTML5
HTML5
.
Dialog.
. ,
dt dd, . dt
, dd :
<dialog>
<dt> 1</dt>
<dd> .</dd>
<dt> 2</dt>
<dd> .</dd>
</dialog>
HTML5
HTML5. , ,
HTML5.
Mark. mark
: , . Google Chrome Mozilla Firefox ,
, .
.
Time. /
. :
datetime / ;
pubdate .
Meter. . meter :
value ;
min ,
;
low , ;
hight , ;
max ;
optium .
meter 9- Internet Explorer.
Progress. , , ,
.
JavaScript.
,
:
value , ;
max , .
progress 9- Internet Explorer.

Hgroup. ( h1 h6)
- .
113
114
1. HTML
Wbr. ,
.
HTML5
HTML . .
Figure.
. img, . legend:
<figure>
<legend>, </legend>
<img alt="" src="/img/pict.png" />
</figure>
,
.
Figcaption. ,
figure. , figure.
, figure:
<figure>
<figcaption></figcaption>
<legend>, </legend>
<img alt="" src="/img/pict.png" />
</figure>

, HTML-
, Flash-,
- , . HTML5 .
.
HTML5
.
audio:
<audio src="daleka_doroga.mp3" autoplay="autoplay" controls=
"controls" loop="3"> </audio>
audio .
, audio.

audio:
src , ;
autoplay ,
-;
controls (.1.60);
. 1.60.
loop , , .
src, type codecs
source, audio.
audio source.
, ,
.
audio, source, ,
, . .
. , , :
115
116
1. HTML
Internet Explorer9 MP3, AAC;

Google Chrome6 ogg/vorbis, MP3, AAC;
Opera10.60 ogg/vorbis, WAV;
Safari5 MP3, AAC;
Mozilla Firefox3.6 ogg/vorbis, WAV.
,
, ,
.
. video - . video ,
, video.
, , src :
<video src="/myvideo/video.avi"> </video>
src source.
audio, ,
:
Internet Explorer9 H.264;
Google Chrome6 ogg/theora, H.264, WebM;
Opera10.60 ogg/theora, WebM;
Safari5 H.264;
Mozilla Firefox3.6 ogg/theora, WebM.

JavaScript DOM (). - . HTML5
HTML. .
Menu. menu , - JavaScript.
HTML5
menu .
command:
<menu>
<command onclick="alert(' 1')" label=" "/>
<command onclick="alert(' 2')" label=" "/>
</menu>
label command.
, ,
onclick command.
command li button.
Datagrid. datagrid
. :
,
, .
, datagrid , , , . , datagrid
:
table, tr, td, th, caption, thead, tfoot, tbody ;
select, option, optgroup .
HTML5. , ,
HTML5.
Details.
, ,
.

. details open ,
.
9- Internet Explorer.
Canvas. JavaScript
, , .
117
118
1. HTML
,
.
width height .
canvas id. , JavaScript .
HTML.
HTML5 . .
, HTML
. .
, :
http://www.w3.org/TR/html4/index/elements.html
HTML;
http://htmlbook.ru
HTML.
2.
CSS

CSS-
:
:
:
:
:

:

:
:
:
:
:
:
CSS3
120
2. CSS
HTML, , .
.
CSS. :
, , ,
;
-;
, .
, ,
, HTML- , PSD-.

CSS , -, . CSS:
body {
font-family: Arial, Verdana,
sans-serif;
font-size: 10pt;
background-color: #f0f0f0;
color: #ff0000;
}
h1 {
color: #a52a2a;
font-size: 24pt;
font-family: Georgia, Times, serif;
font-weight: bold;
}
: body,
, h1.
:
{
CSS
CSS
}
CSS , CSS, : : ;.
, CSS , HTML. , ,
. CSS .
, CSS-:
{
: ;
}
:
{ : ; }
CSS . .
CSS ( ), .
CSS . CSS - . , - CSS.
:

: body, p, input ..;
121
122
2. CSS
( class)
.: .myclass, .form_
submit ..;
( id)
#: #myid, #form_submit .;
* * -.
class id
HTML class / id. - .
CSS
JavaScript. . HTML .
class .
.
id - .
HTML- id.
id .
class id , , , .
. , class id !
, . class:
<div class="class1 class2 class3"></div>.

CSS- , ,
. CSS- , . , , CSS.
, . , HTML-:
<div class="hello_class" id="hello_id">, </div>
HTML- CSS-:
div {
font-size: 11pt;
font-weight: bold;
}
#hello_id {
font-size: 27pt;
text-decoration: underline;
}
.hello_class {
font-size: 14pt;
font-style: italic;
}
CSS- CSS
.
font-size. font-size
?
.
.
CSS :
1 ;
10 ;
100 .
, , ,
CSS- ,
.
, ,
CSS- , , CSS .
123
124
2. CSS
.
, ,
CSS- ( ,
).
CSS- : font-size
div; text-decoration
#hello_id; font-style .hello_class.
? : .
CSS- , ,
.
CSS-
, CSS
!important,
CSS-, .
:
: !important;
:
div {
font-size: 11pt !important;
font-weight: bold;
}
#hello_id {
font-size: 27pt;
text-decoration: underline;
}
font-size 11pt,
27pt, .

HTML-,
CSS, , -
, HTML-.
CSS. , , HTML-.
CSS, . .
, .
CSS,
HTML-.
, .
.
- CSS- ,
.
,
. ,
.
, CSS-
? ,
, , .
1. .
2. .
3. .
4. !important.
5. !important.
. . .

, : . #.
CSS-
.
:
125
126
2. CSS
p 1 ;
.intro 10 ;
p.intro 11 ;
#glava1 100 ;
p#glava1 101 .
, : p.intro.
glava1. 21. CSS-,
, p,
(<p class="intro
glava1">test</p>).
: Internet Explorer6 ,
.

, , / .
div p CSS-, , p,
div:
<body>
<div>
<p> </p>
</div>
<p> </p>
</body>
.intro .outro CSS-, ,
outro, intro:
<body>
<div class="intro">
<p class="outro"> </p>
</div>
<p class="outro"> </p>
</body>
div.intro p#outro CSS-, ,

p outro,
div intro:
<body>
<div class="intro">
<p id="outro"> </p>
</div>
<p id="outro"> . HTML-
outro</p>
</body>
#footer div p.tel CSS-, ,
p tel, div, , , footer:
<body>
<div id="footer">
<div>
<p class="tel"> </p>
</div>
</div>
</body>
,
, CSS-.
,
.

- ,
.
. :
127
128
2. CSS
<p> <strong></strong> </p>

p strong , strong
p ;
<p> <strong></strong> <em></em> </
p> strong em ,
( )
;
<p> <strong></strong> <em></em></
p> strong em ,
( ) .
CSS- , +: strong + em { CSS- }.
CSS- em,
strong.
,
Internet Explorer6 .

- ( {}).
, ,
. , div strong { CSS- } CSS- strong:
<body>
<div>
<strong> </strong>
<p>
<strong> </strong>
<em><strong> </strong></em>
</p>
<strong> </strong>
</div>
<strong> </strong>
</body>
, , strong div, -
, , , div. ,
strong div.
.

. .
, , >.
, ,
: div > strong { CSS- }. CSS- strong:
<body>
<div>
<strong> </strong>
<p>
<strong> </strong>
<em><strong> </strong></em>
</p>
<strong> </strong>
</div>
<strong> </strong>
</body>
,
129
130
2. CSS

, , . CSS- , :
[] ;
[=""] ;
[~=""]
( ,
class) ;
[^=""] ,
;
[$=""] ,
;
[*=""] ,
( , ).
. CSS- , .
:
img[alt] , alt;
a.link[target="_blank"] link,
;
a[href^="http://"] , ;
a[href$=".com"] .com.
Internet
Explorer6, .
, CSS- ,
.
:
:;
:;
.:;
#:;
.: ..
.
:active , (
).
a.
:link ( ),
( ). , .link CSS- a.
: a , .
a.
:focus , .
.
:hover , .
: CSS
:visited, :hover CSS, ,
:hover
:visited.
:visited, :hover.
Internet Explorer6 a.
: div, li, tr, td ..
:visited ( ), ( ).
:first-child (
). , div strong:first-child CSS :
<body>
<div>
<strong> </strong>
<strong> </strong>
131
132
2. CSS
<em> </em>
<strong> </strong>
</div>
<strong> </strong>
</body>
:lang() , ( lang ,
).
:
ru ;
en ;
de ;
fr ;
it .
.
, , .
.
:after (
Unicode) -.
(.2.1):
:after{
content: "";
}
:before ( Unicode) -. :
:before{
content: "";
}
:first-letter CSS , -. , (.2.2).
. 2.1. :after
. 2.2. :first-letter
:first-line CSS ,
-.
CSS-:
, ;
, ;
clear, line-height, letter-spacing, text-decoration,

text-transform, vertical-align word-spacing.
133
134
2. CSS

, CSS,
, .
,
, , , .
:
p.new{
color: #ff0000;
font-weight: bold;
}
#footer div.notice{
color: #ff0000;
font-weight: bold;
}
.
, CSS:
p.new,
#footer div.notice{
color: #ff0000;
font-weight: bold;
}
CSS- color font-weight
: p.new #footer div.notice.
CSS
, CSS
. CSS -
. HTML , CSS-,
. , .
CSS , CSS CSS3.
, , . .
, CSS3
. , Internet Explorer6
, .
.

CSS .
, CSS.
, , , , .
. CSS
. . : right,
justify, auto, bold, solid ..
, , :
*{
font-weight: bold;
border: 1px solid #ff0000;
}
. CSS .
, , . CSS content, after before.
CSS-
.
. CSS- .
, font-weight.
135
136
2. CSS
, CSS- .

CSS. .
.
. - ,
. , : 1px, 12pt, 1.3em ..
.
- .

: CSS, , ().
,
, .
. . 1 ,
.
.
em . 1em
, 1.2em ,
1,2.
ex x ( ).
px .
% . , body. , 100% ,
80% ,
20%.
:
in (1 = 2,54);
cm ;
mm ;
pt (1 = 1/72 );
pc (1 = 12 ).
:
px , ;
em ;
pt ;
% (,
, , , ..),
, .
. 0.
.
.
. .
,
: black, white ..
.2.1.
2.1. ,

white
silver
gray
black
maroon
red
orange
yellow
olive
lime
green
aqua
blue
navy
teal
fuchsia
purple
-
-

#ffffff #fff
#c0c0c0
#808080
#000000 #000
#800000
#ff0000 #f00
#ffa500
#ffff00 #ff0
#808000
#00ff00 #0f0
#008000
#00ffff #0ff
#0000ff #00f
#000080
#008080
#ff00ff #f0f
#800080
137
138
2. CSS
, . ,
,
1 f (1, 2, 3, 4, 5, 6, 7, 8, 9, 0, a, b, c,
d, e, f).
,
: #, :
, 0 f, ;
, 0 f, ;
, 0 f, .
00 ff
.
256 , 0 255. ,
255 255 255 = 16581375
, 17, , .2.1.
: #ffff00. .2.1,
.
. ,
Adobe Photoshop. (.2.3).
. 2.3. Adobe Photoshop
.
, . ,
RGB : rgb(, , ), :
0 255, ;
0 255, ;
0 255, .
RGB
Adobe Photoshop. , .2.3. , R, G B.
rgb(, , )
. , rgb(100%, 20%, 33%).
100% 255, 0% 0.
. CSS . , - ,
.
: url(""). , url("../
img/bg_body.png").

, . , ,
.

, CSS.
inherit. ,
,
, .
, inherit 6 7 Internet Explorer.
CSS auto.
, .
CSS- .
139
140
2. CSS
CSS
CSS ,
, , , . CSS .
.
. CSS, , CSS-,
.
, ,
, .
, CSS. , CSS-:
body{ color: #444; }
p.warning{ color: #ff0000; }
, -,
. , p warning, .
, CSS
body. CSS-
-.
, *.
CSS , ? 4
. ,
, .

CSS , .
CSS, . ,
background : background-color,
background-image, background-position, background-repeat.
CSS-:
h1.title div.center{
background-color: #fff;
background-image: url('../img/test.png');
background-repeat: no-repeat;
background-position: left top;
}
:
h1.title div.center{
background: #fff url('../img/test.png') no-repeat left top;
}

CSS-, .
.
CSS HTML
CSS, CSS , , ,
CSS HTML-.

CSS HTML-
style, HTML.
, CSS
, style .
, CSS :
style=": ;"
style=": ; : ;"
:
<p style="font-size: 9pt; font-weight: bold; line-height:
1.3em;"> </p>
, 1000. ,
, CSS,
( !important).
141
142
2. CSS
,
, CSS:
HTML-
, - , .. ;
- CSS HTML, .

CSS,
style. style
head.
:
<head>
<style type="text/css">
{
: ;
}
</style>
</head>
, CSS . .

. , CSS -
HTML-. ,
-.

CSS.
CSS- ( ),
HTML- CSS-.
:
HTML- ;
CSS- ,
, .
.
, CSS- CSS.
HTML-, .
TXT CSS.
CSS- . , CSS-
CSS. ; , , .
CSS- , HTML-.
head HTML- link:
<link rel="stylesheet" type="text/css" media="all" href="
CSS-">
CSS
HTML-.
(2.1).
2.1.
<!DOCTYPE HTML>
<html>
<head>

<title></title>
<link type="text/css" rel="stylesheet" href="css/style.css" media="all" />

</head>
<body>
<p class="testp"> ,
HTML.</p>
</body>
</html>
HTML- CSS- style.css, css, , , ,

HTML-.
143
144
2. CSS
style.css ,
:
p.testp{
font-size: 9pt;
font-style: italic;
}
p.testp:first-letter{
color: #ff0000;
font-size: 18pt;
font-weight: bold;
}
.2.4, , . .2.4,
, HTML- CSS.
. 2.4. CSS () CSS ()
media. , , link ,
CSS.
, , CSS
.
media .
, .
media , CSS HTML-. , (
), CSS-.
media all,
CSS- , , -.
all, media :
print ; CSS-
HTML- -
, - ,
-
;
aural ,
(, );
braille , ,
;
handheld ;
projection ;
screen ;
tv .
@media, CSS-, style.

:
@media _ {
{
CSS-: ;
}
}
145
146
2. CSS
HTML- (2.2).
2.2.
<!DOCTYPE HTML>
<html>
<head>

<title></title>
<link type="text/css" rel="stylesheet" href="css/style.css" media="screen" />

<link type="text/css" rel="stylesheet" href="css/print.css" media="print" />
</head>
<body>
<p><img alt="" src="img/error2.png" /> ,
.</p>
</body>
</html>
style.css:
p img{
float: left;
padding-right: 11px;
}
p{
font-size: 11pt;
font-style: italic;
width: 233px;
}
print.css:
p{ font-size: 10pt; }
p img{ display: none; }
style.css print.css . ,
(.2.5).
. 2.5. -: (), ()
CSS
CSS CSS . CSS
CSS-.
. CSS HTML-
.
CSS @import, :
@import url(" ") ;
@import " " ;
, media link.
. : @import
"/style/smart.css" print, handheld;.
, Internet Explorer6 ,
@import.
, CSS .
.
style :
@import url(" CSS-");
147
148
2. CSS
:
<head>
<title></title>
<style type="text/css">
@import url("css/header.css");
H1 {
font-size: 120%;
color: #ff0000;
}
</style>
</head>
.
:
@import " CSS-";
HTML-, CSS-,
link.

HTML, CSS ,
.
CSS
CSS- ,
, .
CSS.
- HTML,
CSS , , , CSS
HTML. ,
phpDesignerPro, 1.
phpDesignerPro CSS (.2.6):

CSS (.2.6,
);
CSS (.2.6, );
CSS, (.2.6, ).
. 2.6. CSS
HTML CSS,
CSS.
.
Free CSS Toolbox (http://www.blumentals.net/csstool/). CSS,
, ,
CSS- .
SnapCSS (http://www.improvingcode.com/snapcss/). CSS, .
TopStyle (http://www.topstyle4.com/). - CSS
,
.
149
150
2. CSS
CodeLobster PHP Edition (http://www.codelobster.com/).

CSS/HTML/PHP/JavaScript.
Stylizer (http://www.stylizerapp.com/). CSS-, - . -
.
CSS
CSS -, HTML-. , CSS-.
CSS CSS2.1
CSS3, CSS-
.
CSS ,
http://jigsaw.w3.org/css-validator/ (.2.7). :
CSS- ( HTML- CSS) ;
CSS-, , ;
CSS-, .

,
CSS.
. http://www.cssportal.com/format-css/
CSS- . .
Formatted CSS ( CSS) CSS
, :
body{
margin: 0;
padding: 0;
font-family: Arial, Tahoma, Myriad, sans-serif;
vertical-align: top;
font-weight: normal;
}
p, div, td, input, textarea{
font-size: 12pt;
color: #000;
line-height: 1.3em;
}
. 2.7. CSS
Properties in Alphabetical Order ( ) CSS

, , :
body{
margin: 0;
151
152
2. CSS
padding: 0;
}
color: #000;
font-size: 12pt;
line-height: 1.3em;
}
Longest Property to Shortest () CSS
, , ( ,
):
body{
padding: 0;
margin: 0;
}
line-height: 1.3em;
font-size: 12pt;
color: #000;
}
Compact () CSS
( ):
body{margin: 0;padding: 0;font-family: Arial, Tahoma, Myriad,
sans-serif;vertical-align: top;font-weight: normal;}
p, div, td, input, textarea{font-size: 12pt;color: #000;lineheight: 1.3em;}
. CSS-,
. , - .
, CSS
, . CSS?
CSS- .
. CSS, .
CSS- , CSS-.
:
http://tools.w3clubs.com/cssmin/ CSS ;
http://www.csscompressor.com
, CSS:
(, #ffffff #fff);
( font-weight
);
http://www.generateit.net/css-optimize
, CSS,
CSS:
CSS;
(, #ffffff #fff);
( font-weight
);
, CSS.
153
154
2. CSS
CSS-

-.
CSS, HTML.
1
- (.2.8, ). . Internet Explorer6.
. 2.8. (),
(). ,
, , , - ?
.
, CSS-.
CSS- :
CSS,
/ ;
, ;
CSS-, Internet Explorer.

, Internet Explorer. Internet Explorer,
.
CSS-
:
 , Internet Explorer;
 , Internet Explorer5 (
);
 , Internet Explorer5.0 ( );
 , Internet Explorer5.5 ( );
 , Internet Explorer6;
 , Internet Explorer
, ; , ;
 , Internet Explorer
, ;
 , Internet Explorer
, ;
 , Internet Explorer
, .
HTML.
CSS-.
, ,
CSS- Internet Explorer. :
155
156
2. CSS
<head>
<link rel="stylesheet" type="text/css" href="style.css" />

</head>
Internet Explorer
Internet Explorer, , .
Internet Explorer. CSS-
.
Internet Explorer6. CSS-
Internet Explorer6. CSS
, . CSS-
, CSS,
Internet Explorer6 CSS-.
, CSS-
Internet Explorer6, :
* html {
}
, . ,
Internet Explorer6, CSS, . :
div#footer{
padding: 0 23px;
}
* html div#footer{
CSS-
padding: 0 22px;
}
, , . , ,
Internet Explorer6.
, Internet
Explorer6, /**/:
;. , :
div#footer{
padding: 0 22px;
padding /**/: 0 23px;
}
.
Internet Explorer7. Internet Explorer7
. , Internet Explorer6 8.
CSS- Internet Explorer7:
div[class^="myClass"] {
}
*+html {
}
*:first-child+html {
}
, ,
CSS-.
CSS- : ,

Internet Explorer7:
157
158
2. CSS
html>/**/body {

}
Internet Explorer8. Internet Explorer8 CSS . Internet Explorer8 beta 2:
html:first-child [attr|=a-b] {

}
. CSS- Internet
Explorer: 8 9. (
,
Internet Explorer 8 9):
{
: \0/;
}
:
.myClass{
color:red\0/;
}
Mozilla Firefox
Mozilla Firefox CSS-.
,
:
@-moz-document url-prefix() {
{
}
}
CSS-
:
*> {
Opera
, Opera:
@media all and (-webkit-min-device-pixel-ratio:10000),
not all and ( -webkit-min-device-pixel-ratio : 0 ) {
{
}
}
Safari
Safari CSS-:
body:first-of-type {
}
:not(:root:root) {
Google Chrome
Google Chrome CSS-:
body:nth-of-type(1) {
159
160
2. CSS

CSS-,
.
Safari 3.0 Google Chrome:
@media screen and (-webkit-min-device-pixel-ratio:0) {
{
}
}
Mozilla Firefox, Opera, Konqueror, Safari:
*|html {
}
Mozilla Firefox, Internet Explorer 7 :
html>body {
:
CSS. ,
CSS , .
:
margin , ;
border , ;
padding ,
;
.
.
.2.9 div ,
.
. 2.9. div
, , . , . CSS- float,
,
. .
, .
padding, margin.
HTML (
).
.
, ,
.
, , , ,
, . ,
.
padding
:
: 0;
: ;
161
162
2. CSS
: ;
CSS: 1;
: padding: [ | ] {1, 4} | inherit.
[ | ] {1, 4} | inherit :
inherit,
.
padding .
padding .
. ,
:
padding-left ;
padding-right ;
padding-top ;
padding-bottom .
. , , px.
, inherit.
, , .
, Internet
Explorer 6 7 .
padding-left, padding-right, padding-top padding-bottom
. :
div {
padding-left: 7px;
}
padding : , ,
, . , . :
div {
padding: 7px 3px 23px 11px;
}
7, 3, 23 11. .2.10 ,

CSS-.
. 2.10. padding
. ,

. , padding,
.
, padding padding .
,
padding padding .
, padding
, , .
, ,
padding . .2.11.
163
164
2. CSS
. 2.11. Padding
:
padding ;
, padding, , padding
;
, padding, (
), padding (..2.11,
);
padding , ,
padding .
margin
:
: 0;
: ;
: ;
CSS: 1;
: margin: [ | | auto] {1,4} |
inherit.
margin ,
(.2.12).
.2.12, .
- , margin . ,
, .
. 2.12. margin
padding, margin ,
:
;
;
;
.
, .
margin margin-top, margin-right, marginbottom margin-left.
( ,
px), inherit. ,
, .
Internet Explorer 6 7 inherit.
margin , ,
(.2.13).
.

, , - . , -
, .
165
166
2. CSS
. 2.13. margin
, , body
. , , ,
- .
, CSS
:
body{
padding: 0;
margin: 0;
}
:
,
.
display
:
: inline;
: ;
: ;
CSS: 2;
: display: block | inline | inline-block | inline-table
| list-item | none | run-in | table | table-caption | tablecell | table-column-group | table-column | table-footer-group
| table-header-group | table-row | table-row-group.
display
. .
.
.
block. . ,
span, a, li , (.2.14).
. 2.14. display: block;
li 6 7 Internet Explorer block

list-item.
,
, .
.
1. a .
2. a .
167
168
2. CSS
3. ,
.
block , .
inline. . ,
div , .
inline-block. , ,
.
, , width height .
, , margin padding
, , ,
. ,
inline-block (.2.15).
. 2.15. margin inline-block
6 7 Internet Explorer inlineblock .

inline-table. , (
table), , - .
6- 7- Internet Explorer.
list-item. li, .
none. - (.2.16). JavaScript.
. 2.16. display: none;
run-in. .
- .
table. table, table.
table-caption. caption.
table-cell. td th (.2.17).
table-footer-group. tfoot.
169
170
2. CSS
. 2.17. display: table-cell;
table-header-group. thead.
6 7 Internet Explorer.
table-row-group. tbody.
table-row. tr.
table-column-group.
colgroup.
table-column. col.
, table-column,
vertical-align, .
, -
, table-column
(, JavaScript).
visibility
:
: visible;
: ;
: ;
CSS: 2;
: visibility: visible | hidden | collapse | inherit.
visibility none
display. .
visibility , , , , - .
, visibility .
visibility (.2.18).
.2.18, display. visibility,
, . ,
, - . ,
, .
, visibility :
visible ;
hidden , ;
collapse none display, hidden
visibility;
inherit .
171
172
2. CSS
. 2.18. visibility: hidden;
: Internet Explorer collapse

. 6 7 Internet Explorer inherit.
:
(margin) (padding) ,
.
border
:
: ;
: ;
: ;
CSS: 1;
: border: [border-width || border-style || bordercolor] | inherit.

.
border, ,
: border: . , border: 1px solid #fff;.
border .
: border-width, border-style border-color.
border-width. .
,
.
,
, .
, , , .

: , , ,
.
, ,
CSS, ,
.
padding margin.
border-width .
border-top-width, border-right-width, border-bottom-width
border-left-width,
.
:
;
thin, 2px;
medium, 4px;
thick, 6px;
inherit ( 6 7 Internet Explorer
).
173
174
2. CSS
, ,
/
.
: margin-left, border-left-width, padding-left, width,
padding-right, border-right-width, margin-right. .
.
border-style. .
border-top-style, border-right-style, border-bottomstyle border-left-style, .

:
none ;
inherit ( 6 7
Internet Explorer );
solid ;
dotted (Internet Explorer6 1px
dotted dashed);
dashed ;
double ;
groove, ridge, inset, outset .
, .2.19.
border-color.
( ).
border-top-color, border-right-color, border-bottom-color borderleft-color.
, . ,
:
transparent ;
inherit.
. 2.19.
outline
:
: ;
: ;
: ;
CSS: 2;
: outline: outline-color || outline-style || outlinewidth | inherit.
border, outline .
outline border: outline:
.
outline
outline .
: outline-width, outline-style outline-color.
outline-width :
thin, 1px;
175
176
2. CSS
medium, 2px;
thick, 3px;
inherit.
outline-style
border : none, dotted, dashed, solid, double, groove,
ridge, inset, outset, inherit.
outline-color :
, ;
invert, ,
;
inherit.
outline border , ,
outline, .
, .2.20.
. 2.20. border outline
border outline.
.
outline.
:
;
,
outline;
;
.
border.
:
, -
;
.
border,
outline. , outline,
, border.
, outline , , 6 7 Internet Explorer.
Firefox
outline ,
, .
Mozilla Firefox
, , (.2.21).
. 2.21. Mozilla Firefox
(
), .
177
178
2. CSS
. outline outline: none;.

.
.
. , .
div, .
. .
.
, .
- .
, - , .
. - , , , , , .
,
CSS. : ,
- ,
Internet Explorer , ,
9-.
, , ,
CSS.
:
-moz-border-radius: ; /* Firefox */
-khtml-border-radius: ; /* Konqueror */
-webkit-border-radius: ; /* Chrome Safari*/
border-radius: ; /* Opera, iOS, Android */
. ,
. , Internet Explorer 9 -
. , , , Internet Explorer,
. ,
Internet Explorer 6- . -moz-border-radius, -khtml-border-radius, -webkitborder-radius, border-radius Internet Explorer
border-radius. .
. ,
.
HTML-:
<div class="divb"> ,
.</div>
HTML- CSS :
.divb{
width: 133px;
padding: 11px;
margin: 11px;
border: 1px solid #000;
}
(.2.22,
), , .2.22, .
, Internet Explorer.
CSS-, ,
Internet Explorer. CSS- , :
.divb{
width: 133px;
padding: 11px;
margin: 11px;
-moz-border-radius: 7px;
179
180
2. CSS
-khtml-border-radius: 7px;
-webkit-border-radius: 7px;
border-radius: 7px;
}
. 2.22.
.
. :
;

.
. : -khtml-border-radius: 7px
0 0 7px;.
(..2.22, )
.
Internet Explorer 6, 7, 8.
. Internet
Explorer ,
. , ,
http://css3pie.com/.

http://piter.com/. tech/pie
.
CSS- . : PIE.htc, PIE.js, PIE.php, PIE_

uncompressed.htc, PIE_uncompressed.js.
PIE.htc PIE.php, .
PIE.php.
( ), PHP .
PIE.htc.
PIE.htc , ,
Internet Explorer .
, PIE.php PIE.htc.
, CSS :
.divb{
width: 133px;
padding: 11px;
margin: 11px;
border-radius: 7px;
behavior: url("css/PIE.htc");
position: relative;
zoom: 1;
}
181
182
2. CSS
.
behavior: url("css/PIE.htc"); PIE.htc
PIE.php .
(..) .
position: relative; zoom: 1;
, .
Internet Explorer6
, PIE. ,
position, zoom.
.
, , . , CSS
PIE.htc PIE.php.
, ,
.
,
, , .
.
PIE.htc ( , , PIE.php). .
, .
-moz-border-radius, -khtml-border-radius, -webkit-borderradius, border-radius .
, HTML- CSS-, , . :
.divb{
width: 133px;
padding: 11px;
margin: 11px;
-moz-box-shadow: 0px 3px 7px #02041c;
-webkit-box-shadow: 0px 3px 7px #02041c;

box-shadow: 0px 3px 7px #02041c;
}
CSS- ,
. :
;
;
;
.
, .
, :
;
;
;
, , , ;
.
, 6, 7, 8 Internet
Explorer. Internet Explorer, PIE,
:
.divb{
width: 133px;
padding: 11px;
margin: 11px;
183
184
2. CSS
position: relative;
zoom: 1;
}

. (.2.23,
). (.2.23, )
(.2.23, ). (.2.23, ).
. 2.23. PIE
, , :
.divb{
width: 133px;
padding: 11px;
margin: 11px;
border-radius: 7px;
position: relative;
zoom: 1;
}
:
, HTML, :
;
;
.
. CSS .
width
:
: auto;
: ;
: ;
185
186
2. CSS
CSS: 1;
: width: | | auto | inherit.
width.
(px). (%) , (in), (pt).
,
, auto.
HTML- ( ).
,
,
:
#myblock{ width: 968px; }
body.contacts #myblock{ width: auto; }
.
,
display, inline-block.
.
, 6- 7- Internet Explorer
inherit .
height
:
: auto;
: ;
: ;
CSS: 1;
: height: | | auto | inherit.
, height.
(px), (%)
, (in), (pt).
auto, ,
.
, , display inline-block.
min-height min-width
:
: 0;
: ;
: , ;
CSS: 2;
: min-height: | | inherit; min-width:
| | inherit.
height width, ,
.
/. ,
, . , ,
. , , , ,
(.2.24).
. 2.24. ,
,
( ).
187
188
2. CSS
, .
min-height min-width. height width.

Internet
Explorer6. ,
.
min-height Internet Explorer6. Internet Explorer6
min-height, height , minheight . Internet Explorer6
min-height height:
#footer{
min-height: 333px;
}
* html #footer{
height: 333px;
}
min-width Internet Explorer6. Internet
Explorer6 expression.
JavaScript. CSS- ,
, , CSS. expression Internet Explorer.
, :
#footer{
min-width: 1002px;
width:expression(document.body.clientWidth < 1002? "1002px":
"auto" );
}
min-width, expression , . , width
. width .
expression
min-height. document.body.clientWidth
document.body.clientHeight. , ,
expression width, height.
max-height max-width
:
: none;
: ;
: , ;
CSS: 2;
: max-height: | | none | inherit;
max-width: | | none | inherit.
min- max-height maxwidth . ,
, .
.
Internet Explorer6. expression,
Internet Explorer6.
, max-width :
width: expression( document.body.clientWidth > 776 ? "777px" :
"auto" );
max-height :
height: expression( this.scrollHeight > 332 ? "333px" :
"auto" );
overflow
:
: visible;
: ;
189
190
2. CSS
: ;
CSS: 2;
: overflow: auto | hidden | scroll | visible |
inherit;.
overflow, width height.
(, ) , / . ,
.
, overflow visible.
overflow , ,
.
overflow :
visible
(.2.25, );
hidden , ,
(.2.25, );
scroll , ,
(.2.25, );
auto / , / , , (.2.25, ).
: overflow
height / width:
width, overflow
(
,
overflow);
height, overflow ( , overflow);
width, height, overflow .
. 2.25. overflow
. ,
?
clip
:
: auto;
: ;
: ;
CSS: 2;
: clip: rect(Y1, X1, Y2, X2) | auto | inherit.
clip overflow.
, . ,
, .
191
192
2. CSS
, 6- 7- Internet Explorer, clip

: rect(Y1, X1, Y2, X2) (.2.26, ), :
Y1 , ;
X1 ,
;
Y2 ,
;
X2 ,
.
. 2.26. clip
Internet Explorer6 7 clip .

, : rect(Y1 X1 Y2 X2).
: clip ,
, , clip,
position absolute.
:
, . , -, , CSS. CSS. , -.
, .
text-align
:
: left;
: ;
: ;
CSS: 1;
:
CSS2.1: text-align: center | justify | left | right |

inherit;
CSS3: text-align: center | justify | left | right | start

| end.
text-align ,
. . , (.
: ), . text-align
.
, text-align , ,
table, (.2.27):
left ;
right ;
center ;
justify ( ).
. 2.27. text-align
193
194
2. CSS
, ,
text-align.

, ,
. , , (.2.28).
. 2.28.
,
. ,
, .
, , ? , padding .
. ,
. min-width,
.
? ,
text-align center. ,
, .
, text-align
, margin,
margin auto.
CSS-, , :
body{
text-align: center;
}
#block_center{
width: 900px;
margin: 0 auto;
text-align: left;
}
, text-align , . ,
, .
,
1024. , -
1024.
1024,
. .
, , 1024,
, . 1024.
position
:
: static;
: ;
195
196
2. CSS
: , ;
CSS: 2;
: position: absolute | fixed | relative | static |
inherit.
text-align .
, position.
position . ,
left, top, bottom right, .
, HTML.
static position.
:
absolute ,
, ;
relative ,
;
fixed ,
( Internet Explorer6).
position static
inherit, .
- .
position .
, ,
. ,
.
, left,
top, bottom right.
left, right, top, bottom

:
: auto;
: ;
: ;
CSS: 2;
:
left: | | auto | inherit;;
right: | | auto | inherit;;
top: | | auto | inherit;;
bottom: | | auto | inherit;.
,
:
left ;
top ;
bottom ;
right .

. left, top,
bottom right :
<p> , <span style="position: relative;
top: +11px;"></span> </p>
.2.29 .
. 2.29. position: relative;
197
198
2. CSS
:
left: +7px 7 ;
left: -3px 3 ;
top: +7px 7 .

, . :
, position
relative, absolute fixed;
, ( body).
top, left, right, bottom.
, : left right top
bottom. :
left: 0; top: 0; ;
right: 7px; top: 0; , 7
;
left: -11px; bottom: 7px; 11
7 .
Internet Explorer6
top bottom left right.
HTML-:
<div class="thisparent"> , <div class=
"thischild"></div> </div>
thisparent CSS-:
.thisparent{
background: #ccc;
margin: 33px;
padding: 11px;
}
.2.30, , .
. 2.30.
thischild :
.thischild{
position: absolute;
left: 0;
top: 0;
}
(.2.30, ), thischild , . , thischild (.2.30, ).
thisparent :
.thisparent{
position: relative;
left: +0px;
}
left ,
.
top, left, right, bottom
(.2.31).
199
200
2. CSS
. 2.31. position: absolute;

( ).
:
<div class="stikers">
<a href="/contacts">
<img src="/sites/all/themes/mlm/images/stikers.png"
alt="" />
</a>
</div>
CSS:
.stikers{
position: fixed;
top: 91px;
right: 0;
}
.2.32, , ,
.
. 2.32.
Internet Explorer6
fixed. ,
expression. CSS Internet
Explorer6:
* html .stikers{
position: absolute;
top: expression(document.getElementsByTagName( 'body' )[0].
scrollTop + "px");
}
, HTML- DOCTYPE.
,
Internet Explorer6 . , CSS-:
body {
background: url('fakeimg.gif') no-repeat;
background-attachment: fixed;
}
201
202
2. CSS
z-index
:
: auto;
: ;
: ;
CSS: 2;
: z-index: | auto | inherit.
, - , .
position , , .
.
left,
right, bottom, top , .
z-index .
, , . ,
, z-index.
:
<div class="tagA"> </div>
<div class="tagB"> B</div>
CSS:
.tagB{
text-align: center;
background: #ccc;
padding: 11px;
width: 133px;
height: 133px;
position: absolute;
left: 11px;
top: 11px;
z-index: 7;
}
.tagA{
text-align: center;
background: #777;
padding: 11px;
width: 133px;
height: 133px;
position: absolute;
left: 23px;
top: 53px;
z-index: 11;
}
(.2.33).
, HTML
.
zoom
:
: normal;
: ;
: ;
CSS: ;
: zoom: <> | <> | normal.
203
204
2. CSS
. 2.33.
zoom .
Internet Explorer5.5 ,
Chrome Safari.
-. .
, ,
zoom, . zoom .
zoom, ,
.
float
:
: none;
: ;
: ( );
CSS: 1;
: float: left | right | none | inherit.
float . .
:
left , ( );
right , (
).
HTML-:
<div class="tagF">
position...</div>
float . .
.
CSS-:
.tagF{
background: #ccc;
margin-right: 11px;
width: 133px;
float: left;
}
.2.34, . float: left;
float:right;,
(.2.34, ).
CSS- ,
width, .
. .
clear
:
: none;
: ;
205
206
2. CSS
: ;
CSS: 1;
: clear: none | left | right | both | inherit.
. 2.34. float
, HTML . , .
, :
<div>
<div class="tagF">
position...</div>
float .
</div>
<div>
<div class="tagF">
position...</div>
float .
</div>
CSS:
.tagF{
background: #ccc;
margin: 0 11px 11px 11px;
width: 133px;
float: left;
}
,
. , : ,
. (.2.35).
. 2.35.
clear.
, clear,
, clear.
207
208
2. CSS
, . . . ,
clear, .
clear :
left ( float: left;);
right ;
both .
, , (.2.36):
<div style="clear: both;">
<div class="tagF">
position...</div>
float .
</div>
<div style="clear: both;">
<div class="tagF">
position...</div>
float .
</div>
. 2.36. clear
clear:
div.clear{
clear: both;
height: 0px;
overflow: hidden;
}
HTML- :
<div class="clear"> </div>
,
.

,
. - .
PSD-, ,
HTML.

, PSD- (..1.22), ,
.
, , CSS-:
#block_center{
text-align: left;
width: 1024px;
margin: 0 auto;
}
209
210
2. CSS
, - div.
block_center,
(.2.37). text-align: center; body
.
. 2.37.
, 1
, ,
.
. : .
?
,
div. ,
. , ,
HTML- ( )
.
. .
, div,
, left_sidebar. CSS:
#left_sidebar{
width: 182px; /* */
float: left; /* */
margin: 0 11px; /* */
}
(.2.38).
. 2.38.
. , ( ), .
,
.
, .
, main_content, div, . ,
(.2.39):
211
212
2. CSS
#main_content{
margin-left: 204px; /* */
}
. 2.39.
, , ,
. ,
.
HTML div,
, <div class="clear"> </div>.
, CSS clear:
div.clear{
clear: both;
height: 0px;
overflow: hidden;
}
, 2
,
, clear.
, :
, clear, , . , .
. , .
, .
CSS- ,
, :
#left_sidebar{
width: 182px; /* */
float: left; /* */
margin: 0 11px; /* */
position: relative; /* */
}
,
:
#left_sidebar{
width: 182px; /* */
float: left; /* */
margin: 0 11px; /* */
margin-right: -193px; /* */
}
, ,
.
left_sidebar , . padding margin, margin
, .
213
214
2. CSS
. main_content. , #main_content .
:
#main_content{
float: right; /* */
width: 100%; /* */
}
.2.40.
. 2.40. , 2
, . , , .
main_content , , main_
content_post. .
:
#main_content_post{
margin-left: 204px;
}
.

() .

:
.
2 .
CSS-:
#left_sidebar{
width: 182px; /* */
float: left; /* */
margin: 0 11px; /* */
margin-right: -193px; /* */
}
CSS-, CSS-
:
#main_content{
float: right; /* */
width: 100%; /* */
}
CSS- (
right_sidebar):
#right_sidebar{
width: 182px; /* */
float: right; /* */
215
216
2. CSS
margin-left: -193px; /* */
}
CSS- , (
main_content_post ):
#main_content_post{
margin: 0 204px;
}
HTML-,
: , .
:
CSS , ul, ol li.
list-style-type
:
: disc ( <ul>); decimal ( <ol>);
: ;
: <dd>, <dt>, <li>, <ol> <ul>, ,
display: list-item;
CSS: 1;
: list-style-type: circle | disc | square | armenian
| decimal | decimal-leading-zero | georgian | lower-alpha |
lower-greek | lower-latin | lower-roman | upper-alpha | upperlatin | upper-roman | none | inherit.
, ( li) . , list-style-type.
list-style-type . ,
list-style-type.
:
circle ;
disc ;
square .
:
armenian (6- 7- Internet
Explorer );
decimal , 1, 2, 3, 4...
decimal-leading-zero
(6- 7- Internet Explorer );
01, 02, 03...
georgian (6- 7- Internet
Explorer );
lower-alpha , a, b, c, d...
lower-greek (6- 7- Internet Explorer
);
lower-latin lower-alpha (6- 7-
lower-roman , i, ii, iii, iv, v...
upper-alpha , A, B, C, D...
upper-latin upper-alpha (6- 7-
upper-roman , I, II, III, IV,
V...
none, ,
.
.2.41 .
list-style-image
:
: none;
: ;
217
218
2. CSS
: <dd>, <dt>, <li>, <ol> <ul>, ,

display: list-item;
CSS: 1;
: list-style-image: none | url(' ') |
inherit.
. 2.41.
,
list-style-type, list-styleimage. ,
(.2.42). : list-styleimage: url("../img/marker.png");.
, , list-style-image: none;.
list-style-position
:
: outside;
: ;
: <dd>, <dt>, <li>, <ol> <ul>, ,

display: list-item;
CSS: 1;
: list-style-position: inside | outside.
. 2.42. list-style-image
list-style-position li . outside (.2.43, ). inside

(.2.43, ).
. 2.43. list-style-position

, ,
.
219
220
2. CSS
.
, ?

, ,
. , ,
li.
, ul primary. :
ul#primary li{
display: block; /* */
float: left; /* */
list-style-type: none; /* */
list-style-image: none; /* */
padding: 0 7px; /* */
}
<div class="clear"> </div>
ul, (.2.44). , , clear:
div.clear{
clear: both;
height: 0px;
overflow: hidden;
}
. 2.44.

li, ,
.
, , . inline-block display.
, , , primary:
ul#primary li{
display: inline-block; /* */
}
.
text-align, , (.2.45):
ul#primary{
text-align: center;
}
. 2.45.
221
222
2. CSS
:
.
, . , . CSS.
background
:
: transparent || none || repeat || scroll
|| 0% 0%;
: ;
: ;
CSS: 1;
:
CSS2.1: background: [background-attachment || backgroundcolor || background-image || background-position ||

background-repeat] | inherit;
CSS3: background: [<>, ]* < >, :

<> = [background-attachment || background-image ||
background-position || background-repeat] | inherit;
< > = [background-attachment || background-color
|| background-image || background-position || backgroundrepeat] | inherit;
- : - .
background , .
background
: .
.
background-color. .
, background-color: #ccc.
, , backgroundcolor background. , background:
#ccc. ,
, .
:
body{
background: #e8e4d8;
}
#block_center{
background: #fff;
}
div#block_newproduct{
background: #e5d1ab;
}
background-image. .
.
, .
background-image :
background-image: url(" ");
, background-image: url("../img/picture.png");.
, , backgroundimage background:
background: transparent url(" ");

, . ,
: background: url(" ");.
background-position. .
( ) :
background-position: _ _;
left, right center,
.
223
224
2. CSS
top, bottom center.

, . , background-position:
77px 34px. ,
. ,
. ,
.
,
:
background: transparent url("../img/pict.png") left top;
background: #ccc url("../img/pict.png") right top;
background-repeat. .
,
, (.2.46):
no-repeat ( );
repeat-x ;
repeat-y ;
repeat , .
. 2.46.
, :
background: #ccc url("../img/pict.png") left top repeat;
:
background: #ccc url("../img/pict.png") repeat left top;
background: url("../img/pict.png") left top repeat #ccc;
background-attachment
:
: scroll;
: ;
: ;
CSS: 1;
:
CSS2.1: background-attachment: fixed | scroll | inherit;
CSS3: background-attachment: fixed | scroll | local[, fixed

| scroll | local]*.
background backgroundattachment. ,
.
background-attachment .

( /
-). fixed backgroundattachment . , body , ,
. ,
background-attachment - position:
fixed.
body html. Internet Explorer6
fixed background-attachment
.
225
226
2. CSS
:
, , . - - -.
, , , .
font-size
:
: medium;
: ;
: ;
CSS: 1;
: font-size: |
| | | inherit.
, . , . ,
.
HTML- .
font-size.
, font-size: 12pt;.
. . , :
body, p, div, td, input, textarea{
font-size: 12pt;
}
body.
CMS Drupal, (.5),
p, div, td, input, textarea. ,
CSS- CMS Drupal .
, .

: xx-small, x-small, small, medium, large, x-large, xx-large.
larger, smaller,
.
color
:
: , ;
: ;
: ;
CSS: 1;
: color: | inherit.
, .
.
.
color, color: #ff0000;.
font-style
:
: normal;
: ;
: ;
CSS: 1;
: font-style: normal | italic | oblique | inherit.
, font-style
italic. oblique ,
italic.
, fontstyle: normal;.
font-weight
:
: normal;
: ;
227
228
2. CSS
: ;
CSS: 1;
: font-weight: bold|bolder|lighter|normal|100|200|300
|400|500|600|700|800|900.
font-weight .
bold.
, normal.
.
. .
line-height
:
: normal;
: ;
: ;
CSS: 1;
: line-height: | | | normal
| inherit.
.
, ,
.
, ,
.
, . , , value input text, .
Mozilla Firefox , Internet
Explorer ,
. ,
line-height , Internet Explorer.
line-height em. 1em
, ,
1.2em. .
letter-spacing
:
: normal;
: ;
: ;
CSS: 1;
: letter-spacing: | normal | inherit.
. -
,
letter-spacing.
.
white-space
:
: normal;
: ;
: ;
CSS: 1;
: white-space: normal | nowrap | pre | pre-line | prewrap | inherit.
, . , HTML
. white-space
.
nowrap white-space.
. , , . , .
white-space
(.2.47):
pre pre (
);
229
230
2. CSS
pre-line , , (
6 7 Internet Explorer);
pre-wrap , ,
,
( 6 7 Internet Explorer).
. 2.47. white-space
text-indent
:
: 0;
: ;
: ;
CSS: 1;
: text-indent: <> | <> | inherit.
text-indent , .
.

.
text-indent , . (.2.48, ).
(.2.48, ).
. 2.48. text-indent
text-decoration
:
: none;
: ;
: ;
CSS: 1;
: text-decoration: [ blink | line-through | overline
| underline ] | none | inherit.
,
. (.2.49):
231
232
2. CSS
blink ( Opera
Firefox);
line-through ( Internet Explorer7 , );
overline ;
underline ;
none .
. 2.49. text-decoration
text-transform
:
: none;
: ;
: ;
CSS: 1;
: text-transform: capitalize | lowercase | uppercase
| none | inherit.

(.2.50). :
capitalize ;
lowercase (
);
uppercase (
);
none , HTML-.
. 2.50. text-transform
font-variant
:
: normal;
: ;
: ;
CSS: 1;
: font-variant: normal | small-caps | inherit.
font-variant ,
( )
(.2.51). , small-caps. normal.
word-spacing
:
: normal;
: ;
233
234
2. CSS
: ;
CSS: 1;
: word-spacing: | normal | inherit.
. 2.51. font-variant

.
, ,
text-align justify.
unicode-bidi
:
: normal;
: ;
: ;
CSS: 2;
: unicode-bidi: normal | embed | bidi-override |
inherit.
unicode-bidi direction,
. :
normal
Unicode;
embed direction;
bidi-override
direction.
direction
:
: ltr;
: ;
: ;
CSS: 2;
: direction: ltr | rtl | inherit.
. direction , ,
:
ltr ;
rtl .
quotes
:
: , . "/";
: ;
: ;
CSS: 2;
: quotes: " " " " | none |
inherit.
. quotes
, HTML-.
, q, , content open-quote closequote.
, . , Unicode. , quotes: "\00ab" "\00bb";.
235
236
2. CSS
.2.2 .
2.2.
"
"
\0022
'
'
«
«
»
»
‘
’
“
”
„
\0027
\00ab
.
,
\00bb
\2018
\2019
\201c
\201d
\201e
font-family
:
: ,
( Times New Roman);
: ;
: ;
CSS: 1;
: font-family: [, [, ...]] |
inherit.
,
.
. , , .
.
.
Windows, Linux MacOS. , , -.
, ,
font-family.
, -
.
, .
, fontfamily , . :
font-family: "Comic Sans MS", Arial, Tahoma, Myriad;

. ,
. ..

font-family , , .
,
.
:
serif ();
sans-serif (, );
cursive ;
fantasy ;
monospace (
).
, ,
.
font-family :
font-family: "Comic Sans MS", Arial, Tahoma, Myriad, sansserif;

, 99,9%
. .
font-family ,
.
237
238
2. CSS
font-family:
Verdana, Geneva, sans-serif
Georgia, Times New Roman, Times, serif
Courier New, Courier, monospace
Arial, Helvetica, sans-serif
Tahoma, Geneva, sans-serif
Trebuchet MS, Arial, Helvetica, sans-serif
Arial Black, Gadget, sans-serif
Times New Roman, Times, serif
Palatino Linotype, Book Antiqua, Palatino, serif
Lucida Sans Unicode, Lucida Grande, sans-serif
MS Serif, New York, serif
Lucida Console, Monaco, monospace
Comic Sans MS, cursive

. , - , .
, .
font-family , ,
. ,
.
. , , . .
, ,
, .
, ,
. ,
, -. , , .
Cufon.
JavaScript
-. JavaScript .
JavaScript, ,
.

Cufon,
TTF, OTF, PFB PS.
,
%systemroot%\Fonts. .
%systemroot% Windows.
Windows ( ). , %systemroot%
C:\Windows, C:\ ,
Windows. , %systemroot%\Fonts .
, JS, .
http://cufon.shoqolate.com/generate (.2.52).
. 2.52.
239
240
2. CSS
Select
the font you'd like to use ( , ).
.
, Bold typeface (optional) ( ()).
, , .
, , .
. ,
,
. JS- .
, :
Use the following value as the font-family of the generated font (optional) (
())
( ), HTML- ;
The EULAs of these fonts allow Web Embedding (without Adobe Flash) (
( Adobe Flash))
;
Include the following glyphs (if available) ( (
)) ,
JS-, All ();
I acknowledge and accept these terms ( ) .
Let's
do this! ( !) JS-
.
JS- ,
.
TTF, OTF, PFB PS.
, ,
Cufon.
, . .
, Cufon.
JS- . 500, , , -
. JS-, Include the following glyphs

(if available) ( ( )) All
() Uppercase ( ), Lowercase ( ), Numerals
(), Punctuation (), Basic Latin ( ), Latin-1
Supplement ( Latin1), Russian Alphabet ( ).
Cufon
JS- , Cufon.
Cufon http://cufon.shoqolate.com/generate/
( Download ()). Download ()
. cufonyui.js .
cufon-yui.js tech/cufon ,
http://piter.com .
, JS- js . cufon-yui.js , JS- .
js cufonreplace.js ( JS, TXT). .
, . head :
<script type="text/javascript" src="js/cufon-yui.js"></script>
<script type="text/javascript" src="js/cufon-replace.js"></
script>
<script type="text/javascript" src="js/JS- .
js"></script>
Cufon
, JS- , Cufon . ,
.
cufon-replace.js :
Cufon.replace('', { fontFamily: ' ', hover:
true, ignoreClass:'nocufon' });
241
242
2. CSS
, Use the following

value as the font-family of the generated font (optional) ( ()) JS .
,
.
:
Cufon.replace('div#content, div#footer .content', { fontFamily:
'PragmaticaLightC', hover:true, ignoreClass:'nocufon' });
, (.2.53).
. 2.53. Cufon

,
, .
: ,
.
http://www.fonts-onli
ne.ru/. ,
, ,
.
. (.2.54).
. 2.54.
, .
:
3D- ;
Wanted ,
, ;
;
;
,
;
243
244
2. CSS
, ;
;
, ;
,
;
;
,
;

.
, , , , .

,
. , , . ,
?
http://www.myfonts.com/WhatTheFont/.
, , (.2.55). , .
. 2.55.
,
(.2.56). ,
, .
,
. .
.
. 2.56. ,
,
(.2.57). .

,
, ,
.
,
. . .
Cufon-
,
Cufon, Cufon.
.
245
246
2. CSS
. 2.57.
.
cufon-replace.js :
true, ignoreClass:'nocufon', textShadow: '#110a03 0px 2px' });
textShadow (.2.58)
, . , Cufon.replace('#right h2', { fontFamily:
'MyArialBold', fontWeight: 'bold', textShadow: '#110a03 0px
2px', hover:true, ignoreClass:{notcufon : 1} });.
. 2.58. Cufon-

, JavaScript.
: text-sha
dow.min.js
jquery.dropshadow.js.
jQuery, 3, JavaScript.
,
- JavaScript jQuery.
Cufon
, Cufon,
, ,
(.2.59).
. 2.59.
Cufon- cufon-replace.js:
true, ignoreClass:'nocufon', color: "-linear-gradient(
, )" });
: Cufon.replace('h1.title, h2.title a', { fontFamily:
'MyArialBold', fontWeight: 'bold', color: "-linear-gradient
(#FFFFFF, #AAAAAA)", textShadow: '#110a03 0px 4px', hover:true,
ignoreClass:{notcufon : 1} });.
Cufon
, , Cufon.replace . textShadow
color, Cufon (.2.3).
247
248
2. CSS
2.3. Cufon
autoDetect
color
fontFamily
fontSize
fontStretch
fontStyle
false
CSS
CSS
'normal
true, false
true, fontfamily CSS,

fontFamily.
Opera

'red', '#f62315'
'14px', '24px',
'72px', ..
'160%',
'condensed',
'semi-expanded'
..
'normal', 'italic',
'oblique'
100-900,
'normal', 'bold'
true, false
forceHitArea
CSS
CSS
false
hover
false
hoverables
{ a: true }
ignoreClass
null
letterSpacing
modifyText
CSS
null
function
onAfterReplace
null
function
onBeforeReplace null
function
fontWeight
true, false,
Object
{ tag: true, .. }
'nocufon',
'nocufon
skipcufon'
'-1px', ..

Internet
Explorer

,
hover

,

,
,

,
,
.
:
,
,
.
:
separate
'words'
textShadow
'none'
textTransform
CSS
trim
'advanced'
'words', 'none'
, Cufon
'characters'

'1px 1px #000',
'uppercase',

'lowercase',
'capitalize',
'none'
'simple',
'simple'
'advanced'

,
'advanced'

:
PSD-. ,
(.2.60).
. 2.60.
249
250
2. CSS

. , , , . .
. . , ul primary:
ul#primary li{
float: left; /* */
}
. CSS- a, li:
ul#primary li a{
color: #d96729; /* */
font-size: 10pt; /* */
font-weight: bold; /* */
font-family: Tahoma, Arial, sans-serif; /* */
text-transform: uppercase; /* */
text-decoration: none; /* */
}
. ,
.
background:
transparent url('../img/marker.png') no-repeat left center;
ul#primary li, padding

. ,
, ,
. padding 0 5px 0 11px.
PSD- (.2.61, ).

, .
.
first-child.
CSS . li
li ul:
ul#primary li:first-child{
background-image: none; /* */
}
, (.2.61, ). , , Internet
Explorer6.
. 2.61.
li Internet Explorer6,
:
* html ul#primary li:first-child{
background-image: expression(this.previousSibling==null?'
none':'url(../img/marker.png)'); /* */
}
251
252
2. CSS

, . ,
, :
ul#firstmenu li{
float: left; /* */
padding: 0; /* */
}
, firstmenu.
155 32. ,
14. , ul#firstmenu li
:
width: 155px; /* */
height: 32px; /* */
text-align: center; /* */
margin: 0 0 0 14px; /* */
li :
ul#firstmenu li:first-child{
margin: 0;
}
* html ul#firstmenu li:first-child{
margin: expression(this.previousSibling==null?'0':'0 0 0
14px');
}
. .2.60,
,
3.
. ,
( ).
1.
, ul#firstmenu li :
background: #c9921e url('../img/bg_li.png') repeat-x left
bottom;
border-bottom: 3px solid #887f6e;
:
ul#firstmenu li a{
color: #000; /* */
text-decoration: none; /* */
font-size: 9pt; /* */
}
(.2.62)?
. 2.62.
, . li padding,
:
ul#firstmenu li{
padding: 3px 0 0 0; /* */
height: 29px; /* */
}
AvantGarde
GothicC:
253
254
2. CSS
Cufon.replace('ul#firstmenu li a', { fontFamily: 'AvantGardeGothicC',

fontSize: '13pt' });
.
:
CSS , .
vertical-align
:
: baseline;
: ;
: ;
CSS: 1;
: vertical-align: baseline|bottom|middle|sub|super|te
xt-bottom|text-top|top|inherit | | .
,
. vertical-align,
:
baseline
;
bottom
, ;
middle
;
sub , ( );
super , ( );
text-bottom
;
text-top
;
top
.
border-collapse
:
: separate;
: ;
: <table> , display
table inline-table;
CSS: 2;
: border-collapse: collapse | separate | inherit.
, table,
.
:
collapse (.2.63, );
separate
(.2.63, ).
. 2.63. border-collapse
border-spacing
:
: 0;
: ;
: ;
CSS: 2;
: border-spacing: 1 [2].
255
256
2. CSS
border-collapse separate,
border-spacing .
border-spacing , , .
caption-side
:
: top;
: ;
: <caption> , display
table-caption;
CSS: 2;
:
CSS2.1: caption-side: top | bottom;
CSS3: caption-side: top | bottom | left | right.
(
caption) .
:
top ;
bottom .
empty-cells
:
: show;
: ;
: <td>, <th> , display: tablecell;
CSS: 2;
: empty-cells: show | hide.

. :
show ;
hide ,
.
:
;
, ;
visibility hidden.
,
empty-cells: hide;.
table-layout
:
: auto;
: ;
: <table> , display
table inline-table;
CSS: 2;
: table-layout: auto | fixed | inherit.
.
:
auto
;
fixed col
. -
, .
:
CSS ,
- .
.
257
258
2. CSS
orphans
:
: 2;
: ;
: ;
CSS: 2;
: orphans: | inherit.

, ,
. , HTML-
.
widows
:
: 2;
: ;
: ;
CSS: 2;
: widows: | inherit.
, . , HTML- .
widows
orphans.
page-break-inside
:
: auto;
: ;
: ;
CSS: 2;
: page-break-inside: auto | avoid | inherit.
.
page-break-before
:
: auto;
: ;
: ;
CSS: 2;
: page-break-before: always | auto | avoid | left |
right | inherit.
.
:
always ;
auto ;
avoid ;
left ,
;
right ,
;
inherit .
6- 7- Internet Explorer left, right inherit
.
page-break-after
:
: auto;
: ;
: ;
259
260
2. CSS
CSS: 2;
: page-break-after: always | auto | avoid | left |
right | inherit.
.
, page-break-before.
6- 7- Internet Explorer left, right inherit
.
:
CSS, 1- 2-
. ,
.
cursor
:
: auto;
: ;
: ;
CSS: 2;
: cursor: [url(' '),] | [ auto | crosshair
| default | e-resize | help | move | n-resize | ne-resize |
nw-resize | pointer | progress | s-resize | se-resize | swresize | text | w-resize | wait | inherit ].
, ,
, .
cursor
:
crosshair ;
default ;
e-resize ;
help ;
move ;
n-resize ;
ne-resize , ;
nw-resize , ;
pointer ;
progress ;
s-resize ;
se-resize ;
sw-resize , ;
text ;
w-resize ;
wait .
cursor , . Opera . , , :
Internet Explorer CUR ANI;
Mozilla Firefox, Google Chrome, Safari CUR, PNG, GIF, JPG.

, / ,
, .

, (.2.64).
,
.
CSS, ,
. , .
, .2.64.
JavaScript. ,
jScrollPane.js. jQuery,
3, JavaScript.
261
262
2. CSS
. 2.64. 1
CSS3
CSS1 CSS2.
CSS CSS3. , CSS3
, . ,
CSS.

CSS3 .
.
opacity
:
: 1;
: ;
: ;
: opacity: .
1
http://moigeroi.com/ru/catalog/2.
CSS3
0 1.
Internet Explorer . , filter: alpha(opacity=50), opacity
0 100.
background-clip
:
: border-box;
: ;
: ;
: background-clip: [padding-box | border-box | contentbox] [, [padding-box | border-box | content-box]].

( ). :
padding-box ;
border-box ;
content-box .
background-origin
:
: padding-box;
: ;
: ;
: background-origin: [padding-box | border-box |
content-box] [, [padding-box | border-box | content-box]]*.
, , background
.
:
padding-box ,
;
263
264
2. CSS
border-box ;
content-box .
background-size
:
: auto;
: ;
: ;
: background-size: [<> | <> | auto
]{1,2} | cover | contain.
. ,
, :
cover ( / /
);
contain
( / / ).
border-image
:
: none;
: ;
: , , bordercollapse collapse;
: border-image: none | [ <URL> [<> | <>]{1,4} [/ <>{1,4}]? ] && [stretch | repeat |
round]{0,2}.
.
.
CSS3
border-radius
:
: 0;
: ;
: , border-collapse:
collapse;
: border-radius: <>{1,4}.
.
.
box-shadow
:
: none;
: ;
: ;
: box-shadow: none | <> [,<>]*, <>:
inset < x> < y> < > <> <>
.
.
box-sizing
:
: content-box;
: ;
: ;
: box-sizing: content-box | border-box | inherit.
. :
border-box padding border;
content-box ,
border, padding, margin.
265
266
2. CSS
column-count
:
: auto;
: ;
: ( ), , display inline-block;
: column-count: <> | auto.
column-gap
:
: normal;
: ;
: column-gap: <> | normal.
column-rule
:
: medium none;
: ;
: column-rule: <border-width> || <border-style> ||

<>.
.
border.
column-width
:
: auto;
: ;
CSS3
: column-width: <> | auto.
( ,
).
columns
:
: auto;
: ;
: columns: [column-width] || [column-count].
,
column-width column-count.
font-stretch
:
: normal;
: ;
: ;
: font-stretch: inherit | ultra-condensed | extracondensed | condensed | semi-condensed | normal | semiexpanded | expanded | extra-expanded | ultra-expanded.
.
ultra-condensed, extra-condensed, condensed, semi-condensed
. ultra-expanded, extraexpanded, expanded, semi-expanded
.
resize
:
: none;
: ;
267
268
2. CSS
: <textarea>;
: resize: none | both | horizontal | vertical |

inherit.
,
, .
:
none ;
both ;
horizontal ;
vertical .
tab-size
:
: 8;
: ;
: ;
: tab-size: <>.
.
text-align-last
:
: start;
: ;
: ;
: text-align-last: start | end | left | right | center
| justify.
. :
start ;
end ;
left ;
right ;
CSS3
center ;
justify ( ,
).
text-overflow
:
: clip;
: ;
: ;
: text-overflow: clip | ellipsis.
, , .
:
clip ;
ellipsis
.
text-shadow
:
: none;
: ;
: ;
: text-shadow : none | [,]*, :
<> < x> < y> < >
.
word-wrap
:
: normal;
: ;
: ;
: word-wrap: normal | break-word | inherit.
269
270
2. CSS
, ,
.
writing-mode
:
: ;
: ;
: ;
: writing-mode: lr-tb | rl-tb | tb-rl | bt-rl | tb-lr
| bt-lr.
. :
lr-tb ;
rl-tb ;
tb-rl ;
bt-rl ;
tb-lr ;
bt-lr .

CSS.
.
text-align
start end,
text-align
text-align-last.
background
CSS3 .
.
, background: url(images/onepict.png) repeat-y, #ccc
url(images/twopict.png) repeat-y 100% 0;.
CSS3
CSS3 background
, background-attachment

.
caption-side
CSS3 left right. .
271
3.
JavaScript, jQuery, Ajax

JavaScript
JavaScript
DOM
jQuery

, JavaScript,
. JavaScript,
.
, jQuery
. ,
. .
, JavaScript . ,
JavaScript, , .

JavaScript HTML-, .
HTML-
JavaScript- script.
head. body .
script :
<script type="text/javascript">
JavaScript
</script>
, .
JS-
JavaScript- JS,
HTML- ,
CSS-.
JS ,
: CSS- HTML-. JS-
js. addons.js, .
273
274
3. JavaScript, jQuery, Ajax
JS- script. ,
CSS-, :
<script type="text/javascript" src=" JS-"> </
script>
script, JS-, head. body .
HTML JavaScript - .
JavaScript- .
HTML ( , , ..), -.
, . , header,
, .
, JavaScript,
.
:
- ,
, ;
-
,
;
- ;
- ,
.
JavaScript- - (
), -
. , , .
on. : <body onload="
JavaScript">.
JavaScript-, ,
JavaScript-. JS script HTML-.

, body,
HTML , (frameset).
:
onabort ;
onblur ;
onerror - ;
onfocus ( );
onload ;
onmove ;
onresize / ;
onunload -.
(onblur onfocus) a, abbr, acronym, address, applet, area, b,
basefont, bdo bgsound, big, blockquote, body, br, button, caption,
center, cite, code, col, colgroup, dd, del, dfn, dir, div, dl, dt, em, embed,
fieldset, font, form, frame, h1, h2, h3, h4, h5, h6, hr, i, iframe, img, input,
ins, isindex, kbd, label, legend, li, link, map, marquee, menu, nobr, object,
ol, option, p, plaintext, pre, q, s, samp, select, small, span, strike,
strong, sub, sup, table, tbody, td, textarea, tfoot, th, thead, tr, tt, u, ul,
var, wbr, xmp.

a, abbr, acronym,
address, applet, area, b, basefont, bdo, bgsound, big, blockquote, body,
br, button, caption, center, cite, code, col, colgroup, dd, del, dfn, dir,
div, dl, dt, em, embed, fieldset, font, form, frame, h1, h2, h3, h4, h5, h6, hr, i,
iframe, img, input, ins, isindex, kbd, label, legend, li, link, map, marquee,
275
276
menu, nobr, object, ol, option, p, plaintext, pre, q, s, samp, select, small,
span, strike, strong, sub, sup, table, tbody, td, textarea, tfoot, th, thead,
tr, tt, u, ul, var, wbr, xmp.
:
onclick ;
ondblclick ;
ondragdrop ;
onmousedown ;
onmousemove ;
onmouseout ;
onmouseover ;
onmouseup .
, , onclick . JS-,
onclick, .
.
onclick (, ) false.
, ,
: onclick="return false;".
, ,
, JavaScript.
:
<a href="javascript:void(0);" onclick=""></a>

, .
:
onkeydown ;
onkeypress ;
onkeyup .
JavaScript

:
onsubmit ( form);
onselect ( input,
textarea);
onreset ( form);
onchange ( input,
select, textarea).
JavaScript
, JavaScript
. . .
.
, JavaScript . , Internet Explorer (.3.1).
. 3.1. Internet Explorer
Web Developer Mozilla Firefox,

. Web Developer (.3.2).
277
278
. 3.2. JavaScript Web Developer Mozilla Firefox

JavaScript.
,
.
Mozilla Firefox. -
Ctrl+Shift+J (. 3.3).
. 3.3. Mozilla Firefox
Internet Explorer. -
(. 3.4).
Opera. Ctrl+Shift+O (. 3.5).
JavaScript
. 3.4. Internet Explorer
. 3.5. Opera
279
280
Google Chrome. JavaScript

Ctrl+Shift+J (. 3.6).
. 3.6. Google Chrome
:
for(vor i=0; i<el.childNodes.length; i++) {
:
for(var i=0; i<el.childNodes.length; i++) {
, Internet Explorer , . Internet Explorer
.
JavaScript
JS- . , .
- , JavaScript.
JavaScript
,
- . , , / .

- , , . :
var ;
,
.
.
JS-. , . .
- , JavaScript-
.
, , JavaScript.
var var1; var Var1; .

- , . , .
, . :
var = ;

,
- .
, .
.
,
:
var myvar= 45;
281
282
, :
var myvar= "45";
var myvar2= "testing...";
, .
, ,
- . , , .
, + , . , ,
. + ( ), , . :
45+15=60 // +;
45+"15"=4515 // +.
HTML CSS, ,
JavaScript. JavaScript .
(//).
. , // ,
.
, :
//
:
//
// -
//
, .
.
.
JavaScript
, /* */. :
/* .
.
, */

, , .
:
_=;
, , var.
var ,
, .
= ,
_ .
. JavaScript
,
( , ).

, , .
. , ,
. : Number, String,
Boolean, Date, Math, Array, Object, Error.
, .
: var = new ();.
:
var myvar = new Date(); // Date
, ,
.
new,
, , .
283
284
Number, String, Boolean .

new. : var myvar = 34;.
. ,
JavaScript . Number, String
Boolean.
.
Number
Number , : .
JavaScript float64 (
8 ).
. , JavaScript 0.1
0.2 0.30000000000000004, 0.3.
JavaScript , .
,
:
Number.POSITIVE_INFINITY ( )
;
Number.NEGATIVE_INFINITY ( )
.
NaN (
). .
String
JavaScript Unicode- (
2). ,
escape-.
Escape- \ , -
Unicode. escape-, Unicode, \u. :
var str1 = " \n ";
JavaScript
.3.1 escape-.
3.1. Escape-
\0
\b
\f
\n
\r
\t
\v
\'
\"
\\
\XXX
\xXX
\uXXXX
\u0009
\u000B
\u000C
\u0020
\u00A0
\u000A
\u000D
\u2028
\u2029
\u0000
\u0008
\u0009
\u0022
\u0027
\u005C
Backspace ( )

(\)
Latin-1 0 377. ,
\251
Latin-1 00 FF ( ). , \xA9
Latin-1,
. , \x00A9

Backspace

. , ,
length:
var str="";
var len=str.length; // len 6
285
286
. JavaScript
, .
( 0).
JavaScript .
, , :
var str = "house";
var symb = str[1]; // symb "o"

charAt(), JavaScript:
var str = "house";
var symb = str.charAt(1); // symb "o"
: ,
. .
Boolean
Boolean ( )
:
true ();
false ().
Date
, Date .
. ,
.
, , . , Date:
var date1 = new Date(); /* */
var date2 = new Date();
/* , 1--1970 00:00 */
var date2 = new Date(); /* , */
JavaScript
, , .
. ,
: , , . : , , .
Date:
var date4 = new Date(, ); /* , */
var date5 = new Date(, , );
/* , , */
var date6 = new Date(, , , );
/* , , , */
var date7 = new Date(, , , , );
/* , , , , */
var date8 = new Date(, , , , , );
/* , , , , , */
. 0 .
:
var date1 = new Date("21 May 2012 10:12");
var date2 = new Date(2012, 3, 1); /* 1 2012 */
Math
. , Math
, var = new Math() .
Math ,
.
Math.. Math .
:
var var1 = 1.5;
var var2 = Math.round(var1); // var2 = 2
round Math ( 0,4, ).
287
288
Array
Array . .
Object
.
Object JavaScript . ,
.
Error
Error .
:
new Error( );
JavaScript .
, , , , . , 34+"56".

Number(). ,
Number(). :
var tmp1 = 34+"56"; // tmp1 3456
var tmp2 = 34+ Number("56"); // tmp2 90
, . , ,
NaN.
parseFloat(). .
parseFloat(), .
JavaScript

. ,
- , . :
var var1=parseFloat("34"); // var1 34
var var2=parseFloat("34.43"); // var2 34.43
var var3=parseFloat("34.43sd"); // var3 34.43
var var4=parseFloat("34.4sd3"); // var4 34.4
var var5=parseFloat("ds34.43"); // var5 NaN
parseInt(). ,
: parseInt(, ). :
parseInt(, 10).
.
( ) .
JavaScript .
:
parseInt("0x10") = 16 //
parseInt("010") = 8 //
0x, ,
. , , .
parseFloat, parseInt
:
var var1=parseInt("34", 10); // var1 34
var var2=parseInt("34.43", 10); // var2 34
var var3=parseInt("3443sd", 10); // var3 3443
var var4=parseInt("344sd3", 10); // var4 344
var var5=parseInt("ds34.43", 10); // var5 NaN
289
290
+. +. , . :
var tmp1 = 34+"56"; // tmp1 3456
var tmp2 = 34+ (+"56"); // tmp2 90
, +
. :
var tmp1 = 34+"56"; // tmp1 3456
var tmp2 = 34+ (-"56"); // tmp2 -22
(Boolean)
Boolean(). Boolean Boolean().
true, false.
false, null, undefined, ""
( ), 0, Number.NaN, false.
true.
!!. : !!.
JavaScript .
.
.
- , , , .
.
. , length,
String,
, :
var str = "?";
var num = str.length; // num 9
JavaScript
:
.. .
, :
[""]. :
var str = "!";
var num = str["length"]; // num 9
,
, .
.
JavaScript . , str.length
, str.Length . , . ,
JavaScript .
,
. . , : .
. :
Math.PI ;
Math.E ;
Number.MAX_VALUE , JavaScrit.
, JavaScript (.3.23.6).
3.2. String
length
3.3. Number
Number.MAX_VALUE*
1.79E+308
Number.MIN_VALUE*
5.00E-324

JavaScript

JavaScript (
)

291
292

3.3 ()
Number.NaN*
Number.NEGATIVE_
INFINITY*
Number.POSITIVE_INFINITY*
NaN
NaN

NaN
* .
3.4. Math
Math.E
2.718
Math.LN2
Math.LOG2E
Math.LOG10E
Math.PI
0.693
1.442
0.434
3.14159
Math.SQRT12
0.707
Math.SQRT2
1.414
,
2
E 2
E 10

1/2; ,
1, 2
2
Math .
3.5. Array
index
input
length
,
,

,
,
,
3.6. Error
message
name
JavaScript
, .
.
, - . , -
, .
: .().
, .
(,
). ,
:
.();
.(, );
.(, , );
. .
- ,
:
= .();
:
var num = 12.3456;
var num2 = num.toFixed(); // num2 12
var num3 = num.toFixed(2); // num3 12.34
, JavaScript . , .
JavaScript .
.
, : ..
.3.73.11 .
293
294
String
3.7. String
split([separator][, limit])
,
.
: arr = "a,b,c".split(',') //
["a", "b", "c"]
charCodeAt(index)
Unicode- ,
String.fromCharCode (num1, ...,
Unicode-
numN)*
,

charAt(index)
,
concat(string2, string3[, ..., stringN]) ( +)
lastIndexOf(searchValue[,
,
fromIndex])
search(regexp)

match(regexp)

toLowerCase()

toUpperCase()

toLocaleLowerCase()
(
toLowerCase
, Unicode)
toLocaleUpperCase()
(
toUpperCase
, Unicode)
toString()

valueOf()

String
substring(indexA, [indexB])
, index1
index2
slice(beginSlice[, endSlice])
, index1
index2.
indexOf(searchValue[, fromIndex]) ,
substr(start[, length])

replace(regexp, newSubStr|function) ,
JavaScript
Number
3.8. Number
toExponential
([fractionDigits])
toString([radix])
toPrecision([precision])
toFixed([fractionDigits])
(
,
ractionDigits )

fractionDigits
(
)
Math
3.9. Math
Math.abs(x)
Math.acos(x)
Math.asin(x)
Math.atan(x)
Math.atan2(y, x)
Math.cos(x)
Math.sin(x)
Math.exp(x)
Math.max([value1
[,value2[, ...]]])
Math.min([value1
[,value2[, ...]]])
Math.random()
Math.sqrt(x)
Math.tan(x)
Math.log(x)
Math.pow(base, exponent)
Math.ceil(x)
Math.floor(x)
Math.round(x)
(
)
acos
asin
atan
PI PI,
Theta (x; y)
cos
sin
E ( ) x

0 1

tan
( E)

,
( )
,
( )

Math .
295
296
Date
UTC (Universal Coordinated Time, )
, 1964. UTC
GMT.
JavaScript ,
UTC. , ,
, ( , ).
3.10. Date
Date.parse(dateVal)*
toLocaleString()
getDate()
getDay()
getFullYear()
getMilliseconds()
getMinutes()
getSeconds()
getTimezoneOffset()
getUTCDate()
getUTCDay()
getUTCHours()
getUTCMilliseconds()
getUTCMinutes()
getUTCSeconds()
setSeconds(secondsValue)
setFullYear(yearValue
[,monthValue[, dayValue]])
setMilliseconds(millisecond
sValue)
setTime(timeValue)
setYear(yearValue)
setDate(dayValue)
setUTCDate(dayValue)
(. "Jan 03, 2000")

, , 1 1970
GMT+0
,
1 31 ( )
, :
0, 1 , 2 ..
,
0 999
0 59
0 59
(
(UTC) )
1 31
,
UTC: 0 , 1 ,
2 ..
0 23
0 999 UTC
0 59 UTC
0 59 UTC

UTC
JavaScript
valueOf()
,
1 1970
setUTCHours(hoursValue UTC
[, minutesValue
[, secondsValue[, msValue]]])
setHours(hoursValue
[, minutesValue
[, secondsValue
[, msValue]]])
setUTCMilliseconds(milli
secondsValue)
UTC
setUTCMinutes(minutes
Value[, secondsValue
[, msValue]])
UTC
setMinutes(minutesValue

[, secondsValue[, msValue]])
setMonth (monthValue
[, dayValue])
setUTCSeconds(secondsVa UTC
lue)
setUTCFullYear(yearValue UTC
[, monthValue[, dayValue]])
setUTCMonth
(monthValue[, dayValue])
UTC
toGMTString()
,

.
Date.toUTCString
toLocaleFormat(format
String)
toLocaleTimeString()
toLocaleDateString()
toString()
toTimeString()
toDateString()
toUTCString()

()
getUTCFullYear()
297
298

3.10 ()
getMonth ()
Date.UTC(year, month,
day[, hours[, minutes
[, seconds[,ms]]]])*
getUTCMonth()
getTime()
getYear()
*
0 11; 0 ,
1 ..
,
1 1970 , UTC
0 11; 0 ,
1 ..
,
1 1970 GMT

Array
3.11. Array
push(elem1, elem2, ... )
shift()
unshift([elem1[, elem2[, ...
[, elemN]]]] )
join([glue])
concat(value1, value2, ...,
valueN)
splice(start, deleteCount,
[elem1[, elem2[, ...
[, elemN]]]] )
pop()
slice(start[, end])
reverse()
sort([sortFunction] )
, ,

0
.

,

,

.

,
( )

,
, (, ).
JavaScript
, .
.

:
var = new Array();
, .
.
.
:
var = new Array(1, 2, 3);
,
. .
, .
, , ,
. 0,
1, 2 ..
, . .
:
var = [1, 2, 3];

. ,
. new Array
.
, ,
:
var = [1,, 3, 4];
1 ( ) .
299
300

,
, ( ).
, .
, . 0, 1 .. , , : []. :
var myArray = new Array(23, "hello", true);
var tmp = myArray[1]; // tmp "hello"
var tmp2 = myArray[0]; // tmp 23

,
, .
:
[]=;
,
.
.
- ,
, . :
myArray[0] = 777; // 23, 777
myArray[23] = 11; // 23

length,
(, ). ,
: .length. :
var tmp = myArray.length; // tmp 3
JavaScript
myArray[23] = 77;
var tmp2 = myArray.length; // tmp2 24
, .
. 24. , length
,
, .
, .
,
.
, , , length:
myArray[23] = 77;
myArray[myArray.length] = 33; // myArray[24] 33
, length ,
.
, ( , ).
, .

,
, . , :
push() (
_[_.length]);
pop() , ( ),
;
unshift()
;
shift() , , .
301
302
:
var myArray = new Array(23, 33, 43);
myArray.push(53); // Array(23, 33, 43, 53)
myArray.unshift(13); // Array(13, 23, 33, 43, 53)
myArray.pop(); // Array(13, 23, 33, 43)
myArray.shift(); // Array(23, 33, 43)

JavaScript ,
.
:
, ;
, , , ,
..
. , , , :
var mass = new Array();
mass[0]= new Array();
:
var mass = new Array(new Array(23, 34),new Array(11, 12));
:
var mass = [[22, 34], [11, 12]];
, ,
new.
.
:
var mass = [[[22, 34], [77, 55]], [11, 12]];
. , , :
JavaScript
var mass = [23];

mass[1] = [33, 44]; //
mass[1][3] = [55, 66]; //
var var1 = mass[0]; // var1 = 23
var var2 = mass[1][0]; // var2 = 33
var var3 = mass[1][3][1]; // var3 = 66

-
(mas[0], mas[4] ..). ,
(mas["anna"], mas["house"] ..).
. mas["house"] mas
house.
. c
Object. :
= {
1: 1,
2: 2,
...
}

.
: .
, , . :
mas = {
house: 23,
street: ", 8",
city: "",
}
303
304
. . , ,
. , :
var var1 = mas["house"]; // var1 23
var var2 = mas["street"]; // var2 ", 8"
var var3 = mas["city"]; // var3 ""

, , . JavaScript. .3.12

JavaScript.
3.12. JavaScript
+
+
*
/
%
++
--
var res = var1+var2;

var res = var1+var2;
var res = var1-var2;
var res = var1*var2;
var res = var/var2;
var res = var%var2;
res++ ++res
res-- --res
. , , . , .
, , :
var res1 = 12 + 23; // res1 35
var res2 = 12 + "23"; // res2 1235
var res3 = "12" + "23"; // res3 1235
. , . :
JavaScript
++res res++;
--res res--.
, / .
:
var var1 = 6;
var var2 = 6;
var1++; // var1 7
++var2; // var2 7
// .
var sum1 = var1++; // sum1 7, var1 8
var sum2 = ++var2; // sum2 8, var2 8
// !
sum1 = sum1 + var1++; // sum1 15, var1 9
sum2 = sum2 + ++var2; // sum2 17, var2 9
// !
:
++
, ;
++ ,
.
. , . :
Number Number ,
;
Number Boolean , ( true 1, false 0);
305
306
Boolean Boolean , ( true 1, false 0);

Boolean String ;
Number String .
. =. JavaScript
. , ,
, :
var1*= var2 var1 = var1*var2;
var1/= var2 var1 = var1/var2;
var1%= var2 var1 = var1%var2;
var1+= var2 var1 = var1+var2;
var1-= var2 var1 = var1-var2.

.
, .
If
:
if(1){
1;
2;
}
, ,
. , , .
, : if(1)
1;. , .
.
.
JavaScript
:
if(1){
1;
2;
}else{
3;
4;
}
, , . , , ( else).
if. :
if(1){
1;
2;
}else if(2){
3;
4;
}else{
5;
6;
}
1 , , .
2. , ,
. , ,
( else).
307
308
. :
var num = 12;
var k;
if(num == 1){
k = 101;
}else if(num == 2){
k = 202;
}else if(num < 10){
k = 1010;
}else if(num > 20){
k = 2020;
}else{
k = num*100;
}
.
. true, .
.
, false.
if (
):
1 == 2 1 2, ;
1 != 2 1 2, ;
1 === 2 1 2
( , ), ;
1 !== 2 1 2
( / ), ;
1 > 2 1 2, ;
1 >= 2 1 2, ;
JavaScript
1 < 2 1 2, ;
1 <= 2 1 2, ;
!1 1 false (
false, null, undefined, "" ( ), 0 Number.NaN), ;
1 1 true (
false, null, undefined, "" ( ), 0 Number.NaN), .
, ,
, . :
if(true == false){} ;
if(true) ;
if(var1 === false){} , var1
Boolean false;
if(var1-var2 == 0){} , var1 var2
.
.
if
. ,
:
&& , ;
|| , .
, .
:
if((var1 === false) && (var2 > 23)){} , var1 Boolean, false var2 23;
if((var1 == 10) || (var1 == 20)){} , var1
10 20;
if(((var1 == 10) || (var1 == 20)) && (var2 > 23)){}
, var1 10 20 var2 23.
?:
, . ?:
, if.
309
310
:
=()?(1):(2);
1, . 2.
:
var num = 34;
var str = (num>50)?(" "):(" ");
// str " "
if, :
var num = 34;
var str = "";
If(num>50){
str=" ";
}else{
str=" ";
}
Switch
,

.
,
if. , :
if(var1 == 1){
1
}else if(var1 == 2){
2
JavaScript
3
4
5
}else{
6
}
if . .
, . JavaScript

switch.
switch :
switch(){
case 1:
1;
break;
case 2:
2;
break;
default:
3;
}
, 1,
1. 2,
2. case
, default
3.
311
312
if,
:
switch(var1){
case 1:
1
break;
case 2:
2
break;
case 3:
3
break;
case 4:
4
break;
case 5:
5
break;
default:
6
}
break switch, (
). , switch.
switch , , . break,
. :
JavaScript
switch(var1){
case 1:
1
break;
case 2:
2
case 3:
3
break;
default:
4
}
:
var1 1, 1;
var1 2, 2 ( !)
3;
var1 3, 3;
var1 1, 2 3, 4.
break,
.
.
( ) . :
, - ;
( )
.
313
314
For
for .
:
for(; ; ){
}
for ,
, (
-). , :
for(var i=0; ; ){
}
. - -. -
i, j k.
.
. .
.
- ,
. , . ,
- .
for . ,
. ,
- . , :
for(var i=0; i<10; ){
}
,
i 10. i 0,
JavaScript
.
, for.
, for ,

. , :
for(var i=0; i<10; i++){
}
i 1. , i 10, .
, , break, Switch .
:
for(var i=0; i<10; i++){
if(){ break; } //
//
}
for
break:
for(;;){
if(){ break; } //
//
}
break,
continue. , , continue. :
for(var i=0; i<10; i++){
1
315
316
continue;
2
}
2 . continue . /, continue.
, :
var arr = ["", "", "", ""]
for(var i=0; i<arr.length; i++){
switch(arr[i]){
case "":
1
break;
default:
2
}
}
(i<arr.
length).
(arr[i]).
For in

, .
, ? ,
0, 13, 26, :
var mass = [""];
mass[13] = "";
mass[26] = "";
JavaScript
, for.
.
27 , .
for, , , for in.
for in :
for(var in ) {
}
, .
( 0),
..
:
for(var item in mass) {
window.alert(item);
}
break
continue.
While
for, while. while
, - .
while , ,
. while :
while(){
317
318
, , , break. while
, break:
while(1==1){
if() break;
}
, while , , .
.
while do while.
Do while
while do while.
, -
. do while
. , .
do while:
do{
}while()
, - .
, . .
, , ,
:
,
,
..;
JavaScript
,
, , .
? -, .
, . -,
, , .
,
.
. , :
function (){
}
, ,
, . , , ,
, .
, .

, ,
, .
, - .
.
, , .
, , - , .
- , return:
function (){
return ;
}
319
320
. , return, . , .
return , :
function (){
1
if() return;
2
}
, , 2 . , , , return (
- , ).
,
, ( , ). ,
- - ,
.
, ,
. ,
. .
, , :
function (1, 2, 3){
1
return ;
}
, , .

. :
JavaScript
var num = 34;

function myfunc(arg1){
if(arg1==34) return true;
return false;
}
myfunc 34,
true. false.
. , . ?
,
. _(). :
myfunc();
function myfunc(){
window.alert("hello");
}
.
, . :
, .
- ,
: _(__1, __2). :
var num = 34;
myfunc(num);
function myfunc(arg1){
window.alert(" "+arg1);
}
321
322
, . . .
- ,
- :
var num = 34;
var res = myfunc(num, 23);
function myfunc(arg1, arg2){

if(arg1>arg2) return true;
return false;
}
new. , JavaScript . JavaScript ( Function), ,
, :
var _ = new Function ();
. :
var myfunc = new Function("window.alert('111');");
myfunc();
- .
,
:
var _ = new Function (1, 2, );
:
var myfunc = new Function("arg1", "arg2", "if(arg1>arg2) return
true; return false;");
var num = 34;

var res = myfunc(num, 23);
JavaScript
.
new
() . :
var num = 34;
var res = myfunc(num, 23); // ,
var myfunc = new Function("arg1", "arg2", "if(arg1>arg2) return

true; return false;");
.
,
,
, , .
, , .
JavaScript .
, JavaScript , . ,
. . , , ,
, .
.
:
var summ = test(34, 56);
//
function test(){
}
, ,
, . ,
, ,
test?
323
324
JavaScript arguments.
. .
, .
. , arguments .
, length:
arguments.length. .
:
var s1 = test(); // s1 0
var s2 = test(10); // s2 10
var s3 = test(10, 20); // s3 30
var s4 = test(10, 20, 50); // s4 80
function test(){
var summ=0;
if(arguments.length){
for(var i=0; i<arguments.length; i++){
summ+=Number(arguments[i]);
}
}
return summ;
}
DOM
, JavaScript
-. .
HTML- JavaScript?
.
DOM (Document Object Model). , - -.
DOM
DOM - .
-. () . .
- . , DOM
12 .
, JavaScript .
, DOM ,
,
DOM. , , .
, - . DOM. , ,
, .
, ,
, .
DOM
DOM , . .3.7 .
. 3.7. DOM
DOM ( )
document. BOM (Browser Object Model,
). .
DOM?
, , DOM,
, . , forms, window,
document, forms: window.
document.forms.
325
326
window JavaScript (
), .
forms document.
forms.
DOM -:
-, , -,
.. ,
-.
Window
: window.
DOM. , .
window ,
: alert("") window.
alert("").
.3.13, 3.14 Window.
3.13. Window
defaultStatus
status
frames
length
name
parent
self window
top

, open
HTML-, ,

HTML-, ,

3.14. Window
alert
open
close
OK

DOM
confirm
OK
prompt
setTimeout
clearTimeout
Location
: window.location.
-: ,
..
.3.15, 3.16 Location.
3.15. Location
href
URL- -
hash
() URL- -
host
URL- ,
hostname
, -
pathname
( )
port
,
-
protocol
(HTTP, FTP)
search
GET-, ?
3.16. Location
assign
reload
replace

-
.

History
: window.history.
, .
.
327
328
.3.17, 3.18 History.

3.17. History
length
-
( URL )
3.18. History
go
back
forward
- .
: 0,
1 ..
- ( go(-1))
- ,
( go(1))
Navigator
: window.navigator.
,
-.
.3.19 Navigator.
3.19. Navigator
appCodeName
appName
appVersion
userAgent
cookieEnabled
browserLanguage
systemLanguage
userLanguage
platform
cpuClass
(, )
(Netscape, Microsoft Internet Explorer)
, ,

,
( appCodeName appVersion)
, cookies (
, true)

(, Win32)
(,
x86 Alpha)
DOM
Screen
: window.screen.
,
-.
( ).
.3.20 Screen.
3.20. Screen
width
height
availHeight
availWidth
colorDepth
updateInterval

(
)
(
)
( 256 8, 16,7 ( High Color) 32)
( )
Document
: window.document.
-,
.
.3.21, 3.22 Document.
3.21. Document
alinkColor
linkColor
vlinkColor
bgColor
fgColor
lastModified
,
,
HTML-
,
HTML-
body

HTML-

329
330

3.21 ()
location
URL- -
referrer
URL- ,
-
title
( title)
URL
URL- HTML-
3.22. Document
getElementsByName
({_})
getElementById
({ID})
getElementsByTag
Name({ })
write
, name

-,

HTML-
Node
()
-, , getElementsByName,
getElementById, getElementsByTagName Document.
.3.23, 3.24 Node.
3.23. Node
nodeName
( )
nodeValue
( )
nodeType
( )
parentNode
childNodes
firstChild
lastChild
previousSibling
nextSibling
attributes
DOM
ownerDocument
Document,
namespaceURI
URI ( )
prefix
localName

( )
baseURI
( )
textContent

3.24. Node
insertBefore
newChild
(newChild, refChild) refChild
replaceChild
(newChild,
oldChild)
oldChild
newChild
removeChild
(oldChild)
oldChild
appendChild
(newChild)

newChild
hasChildNodes()
true,
cloneNode(deep)
. true,
,
normalize()
(
)
isSupported(feature, true,
version)
feature version
hasAttributes()
true,
Forms
: window.document.forms.
, -, .
,
, .
.3.25, 3.26 Forms.
331
332

3.25. Forms
action
enctype (encoding)
elements[]
length
method
name
target
URL- ,
MIME-
,

name
,
( ,
_self, _blank, _top _parent)
3.26. Forms
reset()
submit()
onReset
onSubmit

,
reset()
,
submit()
Images
: window.document.images.
, -, .
Links
: window.document.links.
, -,
.
, , .
. DOM
, jQuery,
. , .
DOM
-
- ( , CSS, ..),
, -
-.
- document.
- html. ( html)
document.documentElement. body.
document.body.
- .
childNodes. -
childNodes,
( ).
: document.body.childNodes[].
, childNodes length,
.
:
for(var i=0; i<document.body.childNodes.length; i++) {
var child = document.body.childNodes[i]
window.alert(child.tagName)
}
, -
. ,
onload body
- ,
.
, DOM 12
. JavaScript : .
333
334
DOM,
nodeType. 1, ,
. 3, , .
, body, ,
:
for(var i=0; i<document.body.childNodes.length; i++) {
var child = document.body.childNodes[i];
if(child.nodeType == 1){

window.alert(child.tagName);
for(var j=0; j<child.childNodes.length; j++) {

var child2 = child.childNodes[j];

if(child2.nodeType == 1){
window.alert(child2.tagName);
}
}
}
}
,
-:
function getallchild(el){
for(var i=0; i<el.childNodes.length; i++) {
var child = el.childNodes[i];
if(child.nodeType == 1){

window.alert(child.tagName);
getallchild(child);
}
}
}
DOM
, ,
-. , , .
. . , , .
, ,
. :
<body onload="getallchild(document.body);">
firstChild. firstChild
. , firstChild
null.
lastChild. lastChild
. ,
lastChild null.
, document.body.lastChild.nodeType.
previousSibling. ,
( ).
.
nextSibling. ,
(
-). .
parentNode. -, DOM.
, .3.8.
getElementById. -. .
. .
getElementById
-, id. : document.getElementById("").
335
336
. 3.8.
getElementsByTagName. DOM
-.
, li, -,
:
document.getElementsByTagName('li')
li,
, :
document.getElementById("").getElementsByTagName
('li')
getElementsByTagName ,
.
, . , li -, :
document.getElementsByTagName('li')[0]
DOM
getElementsByTagName , , . getElementsByTagName
*:
document.getElementsByTagName('*').
getElementsByName. 1, HTML, name, form.
JavaScript ,
name . getElementsByName.
, ,
HTML name: form, input,
a, select, textarea .
, , getElementsByTagName:
document.getElementsByName('mylogin')
document.getElementById("").getElementsByName('my
login')
document.getElementsByName('mylogin')[0]
this .
, . DOM.
this.
, .
CSS
JavaScript
CSS-
-.
, CSS
!important, .
CSS-, DOM- style,

-.
337
338
-
style . , :
document.getElementById("").style
- CSS- .
:
document.body.firstChild.style
DOM- style CSS-, :
document.getElementById("").style.width
, CSS- , ,
, , :
document.getElementById("").style.zIndex
document.body.firstChild.style.backgroundImage
CSS-. CSS-,
:
document.getElementById("").style.width="100px";
document.getElementById("").style.zIndex=300;
document.body.firstChild.style.backgroundImage="url('../img/
mypict.png')";
CSS-,
style :
var w = document.getElementById("").style.width;
, ,
div:
<head>
<title></title>
charset=UTF-8" />
<script type="text/javascript" src="js/addons.js"> </
script>
DOM
function changecolor(obj){
obj.style.backgroundColor="rgb("+parseInt(Math.random()*254)+
","+parseInt(Math.random()*254)+","+parseInt(Math.
random()*254)+")";
}
</script>
</head>
<body>
<div onclick="changecolor(this);" style="width: 300px; height:
300px; cursor: pointer;"> !</div>
</body>

JavaScript CSS.
JavaScript .
innerHTML,
-.
innerHTML. innerHTML , .
,
, ,
innerHTML - .
innerHTML.
, HTML-.
HTML- ,
.
, ,
:
var w = document.getElementById("").innerHTML;
, :
document.getElementById("").innerHTML="";
339
340
:
document.getElementById("").innerHTML+="";
, , ,
(.3.9):
<body>
<input type="text" size="77" value="" onchange="document.getE
lementById('thistext').innerHTML+=' '+this.value;" />
<br /><br /><div id="thistext"></div>
</body>
. 3.9.
outerHTML. innerHTML .
outerHTML, JavaScript,
.
, . ,
HTML- <div id="mtext">test</div>. :
document.getElementById("mtext").innerHTML="";
// <div id="mtext"></div>
document.getElementById("mtext").outerHTML="";
// ( mtext -)
DOM
document.getElementById("mtext").innerHTML+="";
// <div id="mtext">test</div>
document.getElementById("mtext").outerHTML+="";
// <div id="mtext">test</div>
outerHTML innerHTML.

JavaScript , . setAttribute, getAttribute,
hasAttribute removeAttribute, .
setAttribute. setAttribute(, ), . :
document.getElementById("myimg").setAttribute("alt","");
getAttribute. ,
getAttribute(). :
var myattr = document.getElementById("myimg").
getAttribute("alt");
hasAttribute. , getAttribute, , .
hasAttribute():
if(document.getElementById("myimg").hasAttribute("alt")){
var myattr = document.getElementById("myimg").
getAttribute("alt");
}else{
document.getElementById("myimg").setAttribute("alt","");
}
removeAttribute. remove
Attribute() .
, , :
341
342
if(document.getElementById("myimg").hasAttribute("alt")){
document.getElementById("myimg").removeAttribute("alt");
}
. DOM
,
, :
document.getElementById("").
:
document.body.id = "mytheme";
, DOM,
, . :
class
class, className;
for Internet Explorer forHtml.
, DOM , :
document.body.id = "mytheme1";
document.body.ID = "mytheme2";
id body
mytheme1. mytheme2, .

,
CSS-.
HTML CSS. ,
JavaScript
, , .
. HTML -. CSS
. JavaScript .
DOM
. createElement
document. ,
. - :
var newDiv = document.createElement('div');
newDiv.
:
newDiv.className = 'myclass';
newDiv.id = 'myid';
CSS:
newDiv.style.backgroundColor = 'white';
, , :
newDiv.innerHTML = ' ';
, .
-.
. , -.
, :
-
.
, , :
appendChild( ) ( );
insertBefore( , )
, .
:
var newDiv = document.createElement('div');
document.getElementById('oldDiv').appendChild(newDiv);
:
var newLi = document.createElement('li');
343
344
document.getElementById('listUL').insertBefore(newLi, document.
getElementById('listUL').getElementsByTagName('li')[0]);
. - remove
Child(). ,
: .removeChild(). :
document.getElementById('listUL').removeChild(document.getElement
ById('listUL').getElementsByTagName('li')[0]);
, parentNode, :
document.getElementById('oldDiv').parentNode.remove
Child(docu
ment.getElementById('oldDiv'));

JavaScript , .
.
. :
;

.
,
- JavaScript ( ,
setTimeout).
. , :
window.setTimeout( , );
. ,
, .
.
(1000 1 ).
, setTimeout
( ).
DOM
:
setTimeout("alert(', ')",3000);
,
clearTimeout.
, .
setTimeout .
:
var mytimer = window.setTimeout( , );
window.clearTimeout(mytimer);
.
setInterval, , setTimeout:
window.setInterval( , );
setInterval .

, .
clearInterval(
).
clearInterval ,
setInterval.
, myFunction
:
var myTimer = setInterval("myFunction()",5000);
, myFunction,
window.clearInterval(myTimer).

JavaScript
(.3.10).
:
alert() ;
345
346
confirm() ;
prompt(, , ) , ,
.
. 3.10. JavaScript
window.
(window.alert), (alert).
.
alert. window.alert . , ,
, , .
confirm. window.confirm - , .
, . .
, confirm.
, true.
false:
var res = window.confirm(" window.confirm()");
if(res==true){
window.alert(' ');
}else{
window.alert(' ');
}
prompt. window.prompt.
,
.
DOM
prompt . , :
,
;
null, .
, prompt
:
, ;
,
;
.
:
while(1==1){
var res = window.prompt(' ?','16','
');
if(res===null){
window.alert(', ');
continue;
}
if(parseInt(res)>=18){
window.alert(' ');
}else{
window.alert(' , .
'+(18-parseInt(res))+' ');
}
break;
}
347
348
jQuery
DOM - ,
. , , .
.
-, .
- jQuery.
DOM.
jQuery? DOM JavaScript,
jQuery , HTML- , .
jQuery HTML-
93.
jQuery ( 1.7.2).
, jQuery , , .
CMS ( ),
jQuery, , . CMS
jQuery HTML-
. jQuery , .
jQuery. jQuery : ,
. ,
, jQuery. , CMS
jQuery.
jQuery
- CMS, jQuery,
, . jQuery HTML-. , .
jQuery, . http://docs.jquery.com/Downloading_jQuery
(minified) jQuery. ,
, JS-
jQuery. JS- -
.
jQuery
JS- jQuery , HTML. , JS-:

<head>
<title></title>
charset=UTF-8" />
<link type="text/css" rel="stylesheet" href="css/style.css"
media="screen" />
<script type="text/javascript" src="js/jquery-1.7.2.min.js">

</script>
</head>
, , .

jQuery
. jQuery
,
jQuery.
:
window.alert(jQuery('.test').html());
if(jQuery.browser.mozilla===true){}
jQuery (). , jQuery , .
jQuery -,
jQuery HTML-
. jQuery onload. body . , ,
jQuery.
349
350
JS- HTML, :
jQuery(document).ready(function($){
// JS-,
// -
});
jQuery:
</script>
window.alert(jQuery.browser.mozilla);
});
</script>
jQuery, :
</script>
window.alert(jQuery.browser.mozilla);
</script>
-
jQuery - , CSS,
.
jQuery:
jQuery('');
:
jQuery('div');
jQuery('.pmore');
jQuery
jQuery(#header');
jQuery('*');
, jQuery(div#header'),
jQuery(span.older').
. CSS, jQuery
, . ,
div, header:
jQuery("#header div");
. jQuery , : jQuery("span.older, #header div");.
, .
>, +, ~. jQuery >, +,~:
jQuery("#header > div") div,
header;
jQuery("#header + div") div, header;
jQuery("#header ~ div") div,
header.
. 2,
CSS. 2, , jQuery :
jQuery("[]") ,
;
jQuery("[=]") , , ;
jQuery("[!=]") ,
;
jQuery("[^=]") ,
, ;
jQuery("[$=]") ,
, ;
jQuery("[*=]") ,
, ;
351
352
jQuery("[~=]") ,
, ;
jQuery("[|=]") ,
, .
. ,
jQuery("div[class=myclass][id=myid]").
. jQuery .
jQuery .
CSS:
:focus ;
:first ;
:last ;
:eq()
;
:not() , ;
:even
;
:odd
;
:gt(n) , n ;
:lt(n) n
;
:header , ( h1, h2
..);
:animated , ;
:hidden ;
:visible ;
:contains() , ;
:empty , , ;
:has() ,
;
:parent ;
jQuery
:first-child ,
;
:last-child ,
;
:nth-child( ) , (, , );
:only-child , ;
:button button;
:radio , ;
:checkbox , ;
:text , ;
:password , ;
:file , ;
:submit , ;
:reset , ;
:image input image;
:input ( input, textarea, button);
:selected selected (,
option);
:checked checked (,
checkbox, radio);
:enabled enabled;
:disabled disabled.
, jQuery("#header div:focus");.
.
, jQuery find, , .
, jQuery("#header div") find
: jQuery("#header").find("div").
find .
, . 2, CSS, , absolute position
,
353
354
position relative absolute. jQuery

, .
offsetParent():
jQuery("#colorbox").offsetParent();

jQuery , , ,
. ,
, jQuery
, .
, , ,
?
:eq(). :
jQuery("#header div:eq(1)") div,
header ( );
jQuery("#header div:eq(2)") div,
header, ..
.
? jQuery
each:
jQuery().each(
function(){
//
// jQuery(this)
}
);
each, ,
. ,
jQuery(this). :
jQuery('.test, .test2').each(
function(){
jQuery
window.alert(jQuery(this).html());
}
);

, , -. length:
if(jQuery('').length){
// -
}
CSS
CSS jQuery
css("", ""):
jQuery('.test, .test2').css("display", "none");
,
CSS .
, :
function(){
jQuery(this).css('display','none');
}
);
css ,
CSS:
if(jQuery('.test, .test2').css("display")=='none'){}
:
if(jQuery('.test, .test2').length){
if(jQuery('.test, .test2').css("display")=='none'){
355
356
// -
}
}
css CSS-. css : css("":"",
"":""). :
function(){
jQuery(this).css('display':'none','padding':'7px');
}
);
each,
, , - , each .
. jQuery
. :
height() ( ,
);
height() (
, );
innerHeight() paddingtop padding-bottom ( );
outerHeight()
padding-top, padding-bottom, border-top, border-bottom (
);
outerHeight(true)
padding-top, padding-bottom, border-top, border-bottom, margintop, margin-bottom ( ,
).
, jQuery('#header').height(444);.
. jQuery
:
jQuery
width() ,
;
width() (
, );
innerWidth() CSS- width, padding-left,
padding-right;
outerWidth() CSS- width, padding-left,
padding-right, border-left, border-right;
outerWidth(true) CSS- width, padding-left,
padding-right, border-left, border-right, margin-left, marginright.
:
if(jQuery('#header').length && jQuery('#header').width()<77){
jQuery('#header').width(444);
}
. jQuery
-:
position() left top :
jQuery('#header').position().left;
offset() left top -:

jQuery('#header').offset().top;
offset({top:, left:})
left top -:
jQuery('#header').offset({top:30, left:100});
(). scrollTop() scrollLeft()

/ .
,
.

.
357
358
CSS- . - CSS
. :hover .
:
$().hover(
function(){
// ,
//
},
function(){
// , ,
//
}
);
:
$("ul.secmenu li a").hover(
function(){
jQuery(this).css('color','#fff');
},
function(){
jQuery(this).css('color','#000');
}
);

jQuery -
.
, :
jQuery
;
;
.
HTML:
<div id="header"></div>
html. HTML-
html. , :
jQuery("#header").html("<strong> </strong>");
:
<div id="header"><strong> </strong></div>
,
:
if(!jQuery("#header").html()){
// -
}
text. text html. HTML .
text html.
append. jQuery ,
(
jQuery("#header").html(jQuery("#header").html()+"")).
append:
jQuery("#header").append("<div></div>");
:
<div id="header"><div></div></div>
prepend. ,
prepend:
jQuery("#header").prepend("<div></div>");
359
360
:
after. ,
( HTML) .
after , :
jQuery("#header").after("<strong> </strong>");
:
<div id="header"></div><strong> </strong>
before. after before. :
jQuery("#header").before("<strong> </strong>");
:
<strong> </strong><div id="header"></div>
wrap. wrap.
. :
jQuery("#header").wrap("<strong>");
:
<strong><div id="header"></div></strong>
:
jQuery("#header").wrap("<div></div>");
:
<div><div id="header"></div></div>
wrapInner. wrap wrapInner.
, .
:
jQuery("#header").wrapInner("<strong>");
:
<div id="header"><strong></strong></div>
jQuery
:
jQuery("#header").wrapInner("<div></div>");
:
empty. , , empty. :
jQuery("#header").empty();

jQuery attr.
.
.
, :
jQuery("p").each(
function(){
"){
if(jQuery(this).find("img").attr("alt")==" // -
}
}
);
, , ,
:
jQuery("img").each(
function(){
jQuery(this).attr("alt"," ");
}
);
361
362

remove("
").
:
jQuery("#header").remove(); // id header
( ,
, jQuery("")), .
select
, jQuery select. -. select
.
, select:
<select id="mselect" name="mselect">
<option value="1">one</option>
<option value="2">two</option>
<option value="3">three</option>
</select>
?
:
jQuery("#mselect option:selected").val();
jQuery("#mselect :selected").val();
jQuery("select#mselect").val();
:
jQuery("#mselect :selected").html();
jQuery
:
jQuery("#mselect :selected").text();
select :
jQuery("#mselect").attr("disabled","disabled");
select:
jQuery("#mselect").attr("disabled","");
:
jQuery("#mselect :selected").remove();
:
jQuery("#mselect :first").remove();
:
jQuery("#mselect :last").remove();
, value 2:
jQuery("#mselect option[value='2']").remove();
:
jQuery("#mselect [value='2']").remove();
select:
jQuery("#mselect").empty();
option select:
jQuery('#mselect option').each(function(){
//
});
select:
jQuery("#mselect :last").attr("selected", "selected");
select:
jQuery("#mselect :nth-child(2)").attr("selected", "selected");
363
364
select, 'two':
jQuery("#mselect :contains('two')").attr("selected",
"selected");
:
jQuery("#mselect").find("option:contains('two')").
attr("selected", "selected");
:
jQuery("#mselect :contains('two')").first().attr("selected",
"selected");
:
jQuery("#mselect").find("option:contains('two')").first().
attr("selected", "selected");
select, value 2:
jQuery("#mselect [value='2']").attr("selected", "selected");
option select:
jQuery("#mselect").prepend(jQuery('<option value="0">zero</
option>'));
option select:
jQuery("#mselect").append(jQuery('<option value="4">four</
option>'));
option select:
jQuery("#mselect option:nth-child(2)").after(jQuery('<option
value="22">twotwo</option>'));
option select:
jQuery("select[id=mselect] option").size();
select , :
if(jQuery("#mselect").val()){}
jQuery
select :
jQuery('#mselect option:selected').each(function(){
this.selected=false;
});
jQuery
. , - CSS-.
show hide. (show)
(hide) CSS- display. :
jQuery("").hide();
, - :
function anim(){
jQuery("#header").hide();
}
</script>
<a href="javascript:void(0);" onclick="anim();"></a>
show hide - . .
, ,
/ :
jQuery("#header").hide(777);
:
hide ;
show .
365
366
toggle.
. , , , .
.
toggle . ,
. , , , .
, . .
show hide.
toggle ,
/: jQuery("").toggle();.
toggle
jQuery("").toggle(); / ,
. :
.
animate. , ,
animate. ,
CSS. , ,
, : , , .. .
jquery.color.js, animate. animate

.
:
jQuery("").animate( {
1:"1",
2:"2",
} );
CSS- JavaScript (Camel Case),
, , ,
: backgroundImage background-image, borderTop
border-top ..
jQuery
CSS-,
. :

CSS- ("45px", "40%" ..);
"+=" "-=", ,
CSS- ("+=45px", "-=40%" ..).
:
jQuery("#header").animate( {
height:"-=1px",
} );
,
1. 2.
3 ..

jQuery
. , on (onclick, onchange ..).
.

bind:
jQuery('').bind('', function(){
//
});
: blur,
focus, load, resize, scroll, unload, beforeunload, click, dblclick,
mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter,
mouseleave, change, select, submit, keydown, keypress, keyup, error.
, , on.
367
368
, , :
...
jQuery('#clickme').bind('click', function(){
jQuery("#header").toggle(777);
});
});
</script>
</head>
<body>
<a id="clickme" href="javascript:void(0);"></a>
</body>
Ajax
Ajax
, Ajax -
-. -
. , Ajax .
Ajax , ( , , ), .
Ajax , , . Ajax -.
jQuery,
Ajax-.
jQuery
JavaScript Ajax-. jQuery Ajax- .
Ajax, jQuery,
load. ,
, :
$("").load("");
:
$("#curmarks").load('http://dev.biz.ua/updatebookmarks.php');
updatebookmarks.php , ,
,
curmarks.
, load, .

PHP.
GET-:
$("").load("?1=1&2=
2&3=3");
URL , GET- ,
.
encodeURIComponent(). :
jQuery("#mycart").load(Drupal.settings.basePath + 'mycart.php
?op=add&nid='+encodeURIComponent(num)+'&oid='+encodeURICompon
ent(oid));
jQuery
jQuery. .3.273.40,
.
, :
jQuery,
;
, .
369
370

3.27. jQuery
1.0
$.browser
1.3

.

$.support

() .
13

, $()
$.support
1.3
jQuery.fx.off
1.4.3 $.fx.interval
1.3
1.0
1.3
.context
.length
.selector
3.28. jQuery
1.0,
1.4
1.0,
1.4
1.0
$(condition)
jQuery
$(htmlText)
jQuery
$(callback)
jQuery
1.6
jQuery.
holdReady(hold)
jQuery.noConflict
([removeAll])
jQuery.sub()
jQuery.
when(obj1,obj2,..)
boolean
,

, HTML
callback, .
$(document).ready()

ready
$,

jQuery

( deferred) deferred,
1.0
1.5
1.5
object
Jquery
Deferred
3.29.
1.0
.attr(attrName)
string
1.0
jQuery
attrName

attrName
value
.attr(attrName,
value)
jQuery
-
1.0
.attr({attrName1:
value1, attrName2:
value2, ...})
1.1
.attr(attrName,
function(index,
value)
1.0
.removeAttr
(attrName)
1.0
.addClass
("clName1 clName2
...")
1.4
.addClass(function
(index, class))
1.0
1.0
1.4
jQuery
attrName1, attrName2...
value1, value2...
jQuery
attrName

jQuery
attrName
jQuery
clName1, clName2
jQuery
, (
,
)

class1, class2...
.removeClass()
jQuery
.removeClass("class1 jQuery
class2 ...")
.removeClass(functi jQuery
on(index, class))
1.0
.toggleClass("class1 jQuery
class2 ...")
1.3
.toggleClass("class1 jQuery
class2 ...", switch )
1.4
.toggleClass(
function(index,
class) ,[switch] )
jQuery
1.2
.hasClass
(className)
.val()
.val(newVal)
boolean
1.0
1.0
string, array
jQuery
1.4
.val(function(index, jQuery
newVal))
1.6
1.6
.prop(propName)
.prop(propName,
value)
string
jQuery
,
(
,
)
,
.
,
switch
( true) ( false)
/ ,

( ,
)
className

value
value
newVal
value ,

propName
propName
value

371
372

3.29 ()
1.6
.prop({propName1:
value1, propName2:
value2, ...})
1.6
.prop(propName,
function(index,
value))
1.6
.removeProp
(propName)
jQuery
propName1, propName2...
value1, value2...
jQuery
propName
jQuery
propName
3.30. CSS
1.0
css(styleName)
1.0
css(styleName,
value)
1.0
css({styleName1:
value1, styleName2:
value2, ...})
1.4
css(styleName,
function(index,
value))
1.0
.height()
string
jQuery
CSS- styleName
value CSS-
styleName
CSS- styleName1, styleName2...
value1, value2....
1.0
.innerHeight()
integer
1.0
.outerHeight([inclu integer
deMargin])
1.0
1.4
.height(value)
.height(function
(index, value))
jQuery
jQuery
1.0
.width()
integer
1.0
.innerWidth()
integer
1.0
.outerWidth([inclu integer
deMargin])
1.0
.width(value)
jQuery
jQuery
integer
jQuery
CSS- styleName
,

(padding)

, (border-width)

(margin)
value

,

(padding)

, (border-width)

(margin)
value
jQuery
-
1.4
.width(function
(index, value))
jQuery
1.2
.offset()
integer
1.2
.position()
integer
1.4
.offset(value)
jQuery

top left.

top left.

, CSS- position
relative, absolute fixed
value
( : {top:newTop,
left:newLeft})
,

,
CSS- position
relative, absolute fixed

value
value
1.4
.offset(function
(index, value))
1.2.6 .offsetParent()
jQuery
1.2.6 .scrollTop()
integer
1.2.6 .scrollLeft()
integer
1.2.6 .scrollTop(value)
jQuery
1.2.6 .scrollLeft(value)
jQuery
jQuery
3.31. DOM
1.0
.html()
string
1.0
1.6
.html(newHTML)
.html(elements)
jQuery
jQuery
1.4
.html(function
(index, value))
.text()
.text(newText)
jQuery
HTML-
newHTML
elements (DOM jQuery)

newText

1.0
1.0
string
jQuery
373
374

3.31 ()
1.4
.text(function
(index, value))
1.0
elements.
append(content),
content.
appendTo(elements)
1.4
.append(function
(index, value))
1.0
elements.
prepend(content),
content.prependTo
(elements)
1.4
.prepend(function
(index, value))
1.0
elements.
after(content),
content.insertAfter
(elements)
1.4
.after(function
(index))
1.0
elements.
before(content),
content.insertBefore
(elements)
1.4
.before(function
(index))
1.0
.wrap(content)
jQuery

content (HTML-,
jQuery DOM-)
elements
1.4
.wrap(function())
jQuery
1.2
.wrapInner(content) jQuery
1.4
.wrapInner
(function())
jQuery
1.0
1.4
1.0
1.4
.remove([selector])
.detach([selector])
.empty()
.unwrap()
jQuery
jQuery
jQuery
jQuery
jQuery
jQuery
jQuery
jQuery
jQuery
jQuery
jQuery
jQuery
jQuery
HTML-,

content (HTML-,
jQuery DOM-)
elements
HTML-,

content (HTML-,
jQuery DOM-)
elements

HTML-
content (HTML-,
jQuery DOM-)
elements

HTML-
content
(HTML-, jQuery DOM
)

( HTML-)

content (HTML-, jQuery
DOM )

( HTML-)

jQuery
-
1.2
elements.
replaceWith
(content), content.
replaceAll
(elements)
jQuery
elements
content (HTML-, jQuery
DOM )
1.4
.replaceWith
(function)
jQuery

( HTML-)
1.0
.clone([withDataAn jQuery
dEvents])
1.5
.clone([withDataAn jQuery
dEvents],[deepWith
DataAndEvents])
;
,

3.32.
1.0
.children([selector]) jQuery
1.4
.closest(selector,
[context])
jQuery

: ,
, ..
1.6
.closest(jQuery
object)
jQuery

: ,
, ..

1.6
.closest(element)
jQuery

: ,
, ..

1.0
.find(selector)
jQuery
1.6
.find(jQuery object) jQuery
,
,
jQuery
1.6
.find(element)
jQuery
element (DOM)
1.0
.next([selector])
jQuery
1.2
.nextAll([selector])
jQuery
375
376

3.32 ()
1.4
.next([selector])
jQuery
1.2.6 .offsetParent()
jQuery
1.0
1.0
.parent([selector])
.parents([selector])
jQuery
jQuery
1.4
.parentsUntil([selec jQuery
tor])
1.0
.prev([selector])
jQuery
1.4
.prevUntil
([selector])
jQuery
1.0
.siblings([selector])
jQuery
1.0
.eq(index)
jQuery
1.0
.filter(selector)
jQuery
1.0
.filter(function
(index))
jQuery
1.4
1.4
.first()
.has(selector)
jQuery
jQuery
1.4
.has(DOMelmt)
jQuery
1.0
.is(selector)
boolean
1.6
.is(jQuery object)
boolean
1.6
.is(elem)
boolean
,

,
CSS- position relative, absolute
fixed

, ,

selector
,

,
,
,

,

,
, selector
c
(
false, )

, ,

, ,
DOM-
,

,

jQuery
,
elem (DOM-)
jQuery
1.6
1.4
1.0
1.0
.not(DOMelmts)
jQuery
.not(function
(index))
1.1.4 .slice(start,[end])
jQuery
.is(function(index)) boolean
.last()
jQuery
.not(selector)
jQuery
1.4
1.0
jQuery
1.0
.each(callback
jQuery
(index,
domElement))
.map(callback(index, jQuery
domElement))
.add(selector)
jQuery
1.0
.add(elements)
jQuery
1.0
.add(html)
jQuery
1.4
.add(selector,
context)
jQuery
1.2
.andSelf()
jQuery
1.2
.contents()
jQuery
1.0
.end()
jQuery
1.2

, selector

DOM ( DOM-)
c

start
end
callback
callback
,
selector
,
DOM-
,
HTML-
,
selector
, context
(DOM-, jQuery-
)

3.33.
.focus(handler(event jQuery
1.0
Object))
1.4.3 .focus(eventData,
jQuery
handler
(eventObject))
handler
focus
handler
focus.

377
378

3.33 ()
1.0
.focus()
jQuery
focus
1.0
.blur(handler
(eventObject))
jQuery
handler
blur
1.4.3 .blur(eventData,
handler
(eventObject))
jQuery
handler
blur.

1.0
.blur()
jQuery
blur
1.0
.focusin(handler
(eventObject))
jQuery
handler
focusin
1.4.3 .focusin(eventData, jQuery

handler
(eventObject))
handler
focusin.

1.0
jQuery
handler
focusout
1.4.3 .focusout
jQuery
(eventData, handler
(eventObject))
handler
focusout.

1.0
jQuery
handler
select
1.4.3 .select(eventData,
handler
(eventObject))
jQuery
handler
select.

1.0
.select()
jQuery
select
1.0
.submit(handler
(eventObject))
jQuery
handler
submit
1.4.3 .submit(eventData,
handler
(eventObject))
jQuery
handler
submit.

1.0
.submit()
jQuery
submit
1.2
jQuery.param(obj)
string
,
, URL
1.4
jQuery.param
(obj,[traditional])
string
,
,
URL.
,
( )
.focusout(handler
(eventObject))
.select(handler
(eventObject))
jQuery
-
1.0
.serialize()
string
( URL)

1.2
.serializeArray()
Array
1.0
.val()
string, array
value
1.0
.val(newVal)
jQuery
newVal
value
1.4
.val(function(index, jQuery
newVal))
value ,

3.34.
1.7
.on(events,
[selector], [data],
handler)
jQuery
1.7
.on(events-map,
[selector], [data])
jQuery
1.7
.off([events],
[selector],
[handler])
jQuery
,
.on()
1.7
.off(events-map,
[selector])
jQuery
,
.on()
1.0
.bind(eventType,
[eventData],
handler
(eventObject))
jQuery
1.4.3 .bind(eventType,
[eventData], false)
jQuery
1.4
.bind(events)
jQuery
1.3
.live(eventType,
handler)
jQuery
1.4
.live(eventType,
jQuery
eventData, handler)

,
;
,

379
380

3.34 ()
1.4.2 .delegate(selector,
eventType,
[eventData],
handler)
1.1
.one(eventType,
[eventData],
handler
(eventObject))
1.0
.unbind
([eventType],
[handler
(eventObject)])
1.4
.unbind
([eventType], false)
1.4
.unbind
(eventObject)
1.3
.die(eventType,
[handler])
1.4.1 .die()
jQuery

( ) ,
,

jQuery
jQuery
,
bind(), one() click(),
focus() ..
jQuery
,
.bind(eventType, [eventData], false)

,
live()
, live()
,
delegate()
jQuery
jQuery
jQuery
1.4.2 .undelegate(selector, jQuery

eventType,
[handler])
1.4.2 .undelegate()
jQuery
1.6
1.0
1.3
1.2
1.4
1.4
1.0
.undelegate
(namespace)
.trigger(eventType,
[extraParameters])
.trigger
(eventObject)
.triggerHandler
(eventType,
[extraParameters])
jQuery.
proxy(function,
context)
jQuery.
proxy(context,
name, [arg1], [arg2],
...)
.click(handler(event
Object))
jQuery
jQuery
jQuery
jQuery
function
function
jQuery
, delegate()

.
C
,
this
name ,
this

handler
click
jQuery
-
1.4.3 .click(eventData,
handler
(eventObject))
jQuery
handler
click.

click
handler
dblclick
handler
dblclick.

dblclick
handlerIn
handlerOut
mouseenter mouseleave
1.0
1.0
.click()
jQuery
.dblclick(handler
jQuery
(eventObject))
1.4.3 .dblclick(eventData, jQuery
handler
(eventObject))
1.0
1.0
1.4
.dblclick()
jQuery
.hover(handlerIn
jQuery
(eventObject),
handlerOut
(eventObject))
hover(handlerInOut jQuery
(eventObject))
1.0
.mousedown
jQuery
(handler
(eventObject))
1.4.3 .mousedown
jQuery
(eventData, handler
(eventObject))
1.0
1.0
.mousedown()
jQuery
.mouseup(handler
jQuery
(eventObject))
1.4.3 .mouseup
jQuery
(eventData, handler
(eventObject))
1.0
1.0
.mouseup()
jQuery
.mouseenter(handler jQuery
(eventObject))
1.4.3 .mouseenter
jQuery
(eventData, handler
(eventObject))
1.0
1.0
.mouseenter()
jQuery
.mouseleave(handler jQuery
(eventObject))
handlerInOut

(mouseenter mouseleave)
handler
mousedown
handler
mousedown.

mousemove
handler
mouseup
handler
mouseup.

mouseup
handler
mouseenter
handler
mouseenter.

mouseenter
handler
mouseleave

381
382

3.34 ()
1.4.3 .mouseleave
jQuery
(eventData, handler
(eventObject))
1.0
1.0
.mouseleave()
jQuery
.mousemove(handler jQuery
(eventObject))
1.4.3 .mousemove
jQuery
(eventData, handler
(eventObject))
1.0
1.0
.mousemove()
jQuery
.mouseout(handler jQuery
(eventObject))
1.4.3 .mouseout
jQuery
(eventData, handler
(eventObject))
1.0
1.0
.mouseout()
jQuery
.mouseover(handler jQuery
(eventObject))
1.4.3 .mouseover
jQuery
(eventData, handler
(eventObject))
1.0
1.0
.mouseover()
.toggle(handler1
(eventObject),
handler2
(eventObject),
[handler3
(eventObject)])
1.0
.toggle([duration],
[callback])
1.4.3 .toggle([duration],
[easing],[callback])
jQuery
jQuery
1.3
.toggle
(showOrHide)
jQuery
1.0
.keydown(handler
(eventObject))
jQuery
jQuery
jQuery
handler
mouseleave.

mouseleave
handler
mousemove
handler
mousemove.

mousemove
handler
mouseout
handler
mouseout.

mouseout
handler
mouseover
handler
mouseover.

mouseover

handler

(/)

(/)
/
(showOrHide = true)
(showOrHide = false)

handler
keydown
jQuery
-
1.4.3 .keydown
jQuery
(eventData, handler
(eventObject))
1.0
1.0
.keydown()
jQuery
.keyup(handler
jQuery
(eventObject))
1.4.3 .keyup
jQuery
(eventData, handler
(eventObject)
1.0
1.0
.keyup()
jQuery
.keypress(handler
jQuery
(eventObject))
1.4.3 .keypress
jQuery
(eventData, handler
(eventObject))
1.0
1.0
.keypress()
.focus(handler(event
Object))
1.4.3 .focus
(eventData, handler
(eventObject))
1.0
.focus()
1.0
.blur(handler
(eventObject))
1.4.3 .blur(eventData,
handler
(eventObject))
1.0
.blur()
1.0
.focusin(handler
(eventObject))
1.4.3 .focusin
(eventData, handler
(eventObject))
1.0
jQuery
jQuery
jQuery
jQuery
jQuery
jQuery
jQuery
jQuery
jQuery
.focusout(handler
jQuery
(eventObject))
1.4.3 .focusout
jQuery
(eventData, handler
(eventObject))
handler
keydown.

keydown
handler
keyup
handler
keyup.

keyup
handler
keypress
handler
keypress.

keypress
handler
focus
handler
focus.
focus
handler
blur
handler
blur.
blur
handler
focusin
handler
focusin.

handler
focusout
handler
focusout.

383
384

3.34 ()
1.0
jQuery
handler
select
1.4.3 .select
jQuery
(eventData, handler
(eventObject))
handler
select.

1.0
.select()
jQuery
select
1.0
.submit(handler
(eventObject))
jQuery
handler
submit
1.4.3 .submit
jQuery
(eventData, handler
(eventObject))
handler
submit.

1.0
.submit()
jQuery
submit
1.0
.change(handler
(eventObject))
jQuery
handler
change
1.4.3 .change
jQuery
(eventData, handler
(eventObject))
handler
change.

1.0
.change()
jQuery
change
1.0
.ready(handler
(eventObject))
jQuery

DOM
1.0
.load(handler
(eventObject))
jQuery
handler
load
1.4.3 .load
jQuery
(eventData, handler
(eventObject))
handler
load.

1.0
jQuery
handler
unload
1.4.3 .unload
jQuery
(eventData, handler
(eventObject))
handler
unload.

1.0
jQuery
handler
error
jQuery
handler
error.

.select(handler
(eventObject))
.unload(handler
(eventObject))
.error(handler
(eventObject))
1.4.3 .error(eventData,
handler
(eventObject))
jQuery
-
1.0
jQuery
handler
resize
1.4.3 .resize(eventData,
handler
(eventObject))
jQuery
handler
resize.

1.0
.resize()
jQuery
resize
1.0
.scroll(handler
(eventObject))
jQuery
handler
scroll
1.4.3 .scroll(eventData,
handler
(eventObject))
jQuery
handler
scroll.

1.0
jQuery
scroll
.resize(handler
(eventObject))
.scroll()
3.35.
1.0
.animate(properties, jQuery
[duration], [easing],
[callback])
1.2
.queue
([queueName])
jQuery
(
),
1.2
.queue
([queueName],
newQueue)
jQuery
queueName,
newQueue
1.2
.queue
([queueName],
callback(next))
jQuery
callback
1.4
.clearQueue
([queueName])
jQuery
1.2
.dequeue
([queueName])
jQuery
1.2
.stop([clearQueue],
[jumpToEnd])
jQuery
1.7
.stop([queue],
[clearQueue],
[jumpToEnd])
jQuery
1.4
.delay(duration,
[queueName])
jQuery

duration

385
386

3.35 ()
1.0
.toggle(handler1
(eventObject),
handler2
(eventObject),
[handler3
(eventObject)])
1.0
.toggle([duration],
[callback])
1.3
.toggle
(showOrHide)
jQuery

handler

jQuery

(showOrHide = true)
(showOrHide = false)

()
true
jQuery
1.4.3 $.fx.interval
1.3
jQuery.fx.off
boolean
1.4.4 .fadeToggle
([duration],
[easing],[callback])
jQuery
3.36. Ajax
1.0
jQuery.
get(url,[data],
[callback],
[dataType])
1.0
jQuery.post(url,
[data],[callback],
[dataType])
1.0
.load(url,[data],[call
back],[dataType])
1.0
1.0
1.5
1.0
jQuery.getJSON
(url,[data],[callback])
jQuery.
getScript(url,
[success(data,
textStatus)])
jQuery.
ajax(url,[settings])
jQuery.
ajaxSetup(options)
jqXHR
GET-

jqXHR
POST-

jqXHR

JSON-
GET

JavaScript-
jqXHR
XMLHttp
Request
jqXHR

,
jQuery.ajax()
jQuery
-
1.0
.ajaxSend(handler
(event,
XMLHttpRequest,
ajaxOptions))
1.0
.ajaxComplete
(handler(event,
XMLHttpRequest,
ajaxOptions))
1.0
.ajaxSuccess
(handler(event,
XMLHttpRequest,
ajaxOptions))
1.0
.ajaxError(handler
(event,
XMLHttpRequest,
ajaxOptions,
thrownError))
1.0
.ajaxStart(handler)
jQuery
Ajax
jQuery
Ajax
jQuery

Ajax-
jQuery

Ajax-
jQuery
1.0
.ajaxStop(handler)
jQuery
1.2
jQuery.param(obj)
string
1.4
jQuery.param(obj,
[traditional])
string
1.0
.serialize()
string
1.2
.serializeArray()
Array
handler()
Ajax-
,
Ajax-
handler()
Ajax
,
,
URL
,
,
URL.
,
( )
( URL)

,

3.37. callbacks
1.7
.add(func)
1.7
/

callbacks

.disable()
387
388

3.37 ()
1.7
.empty()
1.7
.fire(arguments)
1.7
1.7
.fireWith(context,
[arguments])
.fired()
1.7
.has(func)
boolean
1.7
.remove(func)

callbacks

callbacks-

callbacks-
,
callbacks

callbacks
/
callbacks
boolean
3.38. deferred
1.5
.done(handler)
deferred
1.5
.fail(handler)
deferred
1.5
.then(doneHandler,f deferred
ailHandler)
1.6
.always(handler)
1.7
1.7
.then(doneHandler, deferred
failHandler,progress
Handler)
.progress(handler)
deferred
1.5
.resolve([args])
deferred
1.5
.reject([args])
deferred
1.7
.notify([args])
deferred
1.5
.resolveWith(con
text,[args])
deferred
handler
deferred

deferred

handler deferred
progress
deferred

deferred

deferred (),
,
progress() then()
deferred

deferred
jQuery
-
1.5
.rejectWith(context, deferred
[args])
1.5
.isResolved()
boolean
1.5
.isRejected()
boolean
1.7
.state([doneFilter],
[failFilter])
.pipe([doneFilter],
[failFilter])
string
.pipe([doneFilter],
[failFilter],[progress
Filter])
.promise([target])
$().promise()
jQuery.
when(obj1,obj2,..)
promise
1.6
1.7
1.5
1.5
promise
promise
deferred
deferred

, deferred-
resolved
, deferred-
rejected

deffered
promise-,

deffered
promise-,

deffered
deferred-

( deferred) deferred,
3.39.
1.4
$.contains
(container,
contained)
boolean
true, DOM- contained

container
1.0
$.extend(target,
jQuery
[object1],..,[objectN])
target,
object1.. objectN,
target
1.1.4 $.extend([deep],
target,[object1],..,
[objectN])
jQuery
target,
object1.. objectN,
target
1.0.4 $.globalEval(text)
1.0
$.grep(array,
function, [invert])
array
1.2
$.inArray(value,
array)
number
. 1

1.3
$.isArray(obj)
boolean
389
390

3.39 ()
1.4
$.isEmptyObject
(obj)
1.2
$.isFunction(obj)
boolean
1.7
$.isNumeric(value)
boolean
1.4
$.isPlainObject(obj) boolean
,

,

,
window
, DOM-
XML- ( XML)

callback
array
1.4.3 $.isWindow(obj)
boolean
boolean
1.1.4 $.isXMLDoc(node) boolean
1.2
$.makeArray(obj)
array
1.0
jQuery.map(array,
callback(elem,
index))
jQuery.
map(arrayOrObj,
callback(elem,
indexOrKey))
$.merge(firsrArr,
secondArr)
$.noop()
array
1.6
1.0
1.4
array
callback
array
array
,
(, ,

)
JSON-
JavaScript-
XML- XML
JavaScript
(string, boolean ..)
DOM-,

DOM
1.4.1 $.parseJSON(json)
jQuery
1.5
$.parseXML
(xmlString)
1.4.3 $.type(el)
jQuery
1.1.3 $.unique(arr)
array
string
3.40.
1.2.3 .data(key, value)
jQuery
key
value
1.4
jQuery
1.2.3 .data(key)
any_type
key

1.4
.data()
Object
1.2.3 .removeData
([name])
jQuery
,
.data()
1.7
.removeData([list]) jQuery
,
.data()
1.5
jQuery.
hasData(element)
boolean
1.5
.get([index])
DOM-,
jQuery
1.5
.toArray()
DOM-,
jQuery
1.5
.index()
1.5
.index(selector)
, selector
1.5
.index(element)
element
(DOM- jQuery)

1.5
.size()
.data({key1: value1,
key2: value2, ...}

,
.
() (jScrollPane.js)
, CSS, () . CSS , jScrollPane.js.
jQuery, .
391
392
, -,
, JavaScript (.3.11).
. 3.11.
jScrollPane.js http://jscrollpane.kelvin
luck.com/. JS- CSS-, .
CSS-.
jScrollPane.js jquery.mousewheel.min.js. https://
github.com/brandonaaron/jquery-mousewheel/.
JS CSS- HTML-. , , <div class="scroll-wrap"><div class="scroll-pane">:
<div><div class="scroll-wrap"><div class="scroll-pane">
</div></div></div>
CSS-, :
.scroll-pane{
overflow: hidden;
width: 333px;
height: 111px;
}
.scroll-wrap{
margin: 0 auto;
}
jScrollPane -:
<link type="text/css" rel="stylesheet" href="css/jquery.
jscrollpane.css" media="screen" />
</script>
<script type="text/javascript" src="js/jquery.mousewheel.min.
js"> </script>
<script type="text/javascript" src="js/jScrollPane.js"> </
script>
$('.scroll-pane').jScrollPane();
});
</script>
jScrollPane . :
$('.scroll-pane').jScrollPane({showArrows:false,scrollbarWidt
h:9,scrollbarMargin:7,dragMaxHeight:17,dragMinHeight:17,maint
ainPosition:7,scrollbarOnLeft:false,bottomCapHeight:6,topCapH
eight:6});

(jquery.dropshadow.js text-shadow.min.js)
, , CSS, (.3.12).
: jquery.dropshadow.js
text-shadow.min.js. jQuery.
393
394
. 3.12.
, , .
jquery.dropshadow.js . text-shadow.min.js. .
- ( ,
), .
jquery.dropshadow.js. jquery.dropshadow.js http://code.google.com/p/dropshadow/downloads/detail?name=jquery.dropshadow.
js&can=2&q=.
jQuery HTML-.

dropShadow. ,
, , :
jQuery("div#designed").dropShadow({color:"#ffffff",left:1,
top:1,blur:0});
});
text-shadow.min.js. text-shadow.min.js
http://recens.ru/jquery/plugin_text_shadow.html.

textShadow. ,
CSS- text-shadow:
jQuery("div#designed").textShadow('1px 1px 5px #191919');
});
(ui.dropdownchecklist.js)
HTML . Ctrl, .

JavaScript jQuery (. 3.13).
. 3.13.

ui.dropdownchecklist.js. http://code.google.
com/p/dropdown-check-list/source/browse/trunk/src/?r=51.
jQuery, jQuery UI.
http://jqueryui.com/download.
CSS- HTML-, :
<select multiple="multiple" class="sclass_area" name="ta[]">
</select>
- . dropdownchecklist
-:
395
396
if(jQuery(".sclass_area").length){
jQuery(".sclass_area").dropdownchecklist
({ maxDropHeight: 150, width: 116, explicitClose: '<i>...
</i>', textFormatFunction: function(options) {
var selectedOptions = options.filter(":selected");
var countOfSelected = selectedOptions.size();
var size = options.size();
switch(countOfSelected) {
case 0: return "";
case 1: return selectedOptions.text();
case size: return " ";
default: return
countOfSelected;
" : " +
}
}
});
}
});
dropdownchecklist
:
maxDropHeight , ;
width ;
explicitClose
, ;
textFormatFunction JavaScript, ,

( .3.13 : 2).
(jquery.color.js)
jQuery , animate. CSS, - .
, ,
animate. jquery.color.js.
jquery.color.js CSS-, (.3.14).
http://archive.plugins.jquery.com/project/color.
. 3.14. :
jQuery jQuery UI.

jQuery UI http://jqueryui.com/download.
, HTML-,
animate . :
jQuery("#navigation-primary-main li a").mouseenter(
function () {
if(jQuery(this).parent().hasClass('active')){}else{
jQuery(this).parent().animate({
backgroundColor:"#f9f8f8",
}, {queue:false, duration:150 } );
}
});
jQuery("#navigation-primary-main li a").mouseleave(
function() {
397
398
if(jQuery(this).parent().hasClass('active')){}else{
jQuery(this).parent().animate({
backgroundColor:"#f88e06",
}, {queue:false, duration:150 } );
}
});
});
(ColorBox)
JavaScript.

- (.3.15).
:
- ;
, - , ;
-.
jquery.
colorbox.js. ColorBox http://www.jacklmoore.
com/colorbox.
.
jQuery ColorBox:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/
jquery.min.js"></script>
<script src="js/jquery.colorbox.js"></script>
HTML- , :
<p><a class="group1" href="img/pict1.jpg" title="1"
> 1</a></p>
> 2</a></p>

> 3</a></p>
. 3.15.
JavaScript-, colorbox :
$(".group1").colorbox({rel:'group1'});
});
, .3.16.
(actions.js)
-
(.3.17). , .
399
400
. 3.16.
. 3.17.
acti
ons.js, ( tech\
actions.js), http://www.piter.com.
jQuery.
HTML-,
-:
<span class="action">
<span class="action-date" textafter="" year="2012" month="4"
day="25"></span>
</span>
<div class="cur_action">
<div class="title"> </div>

<table><tbody><tr>
<td class="tdwinitem tdwinitem1"><div class="posttd">
<div class="winitem"><span id="actionday"></span></div><div
class="windesc"></div></div></td>
<div class="winitem"><span id="actionhour"></span></div><div
<div class="winitem"><span id="actionmin"></span></div><div
<div class="winitem"><span id="actionsec"></span></div><div
</tr></tbody></table>
</div>
.
. , :
action-date :
textafter ,
;
year ;
month ;
day ;
actionday, actionhour, actionmin, actionsec,

, , , .
PNG24 Internet Explorer 6 (DD_belatedPNG.js)

Internet Explorer6
PNG24 ( ).
.
.
401
402
DD_belatedPNG.js.
,
HTML, , CSS ( ).
http://www.dillerdesign.com/experiment/DD_belatedPNG/.
. head HTML :

DD_belatedPNG.fix
PNG24, .

(preloadCssImages.jQuery_v5.js)
preloadCssImages.jQuery_v5.js.
- ,
CSS, .
,
.

( ) . , , .
preloadCssImages.jQuery_v5.js, -. ,
.
http://code.google.com/p/mollify/
source/browse/trunk/mollify/src/org/sjarvela/mollify/public/include/?r=710.
HTML-. jQuery.
preloadCssImages -:
jQuery.preloadCssImages();
});
(jcarousellite.js)
:
( HTML-, ) (.3.18, );
, / (.3.18, ).
. 3.18.
jcarousellite.js.
http://www.gmarwaha.com/jquery/jcarousellite/.
jQuery, :
jquery.mousewheel.min.js
;
jquery.easing.1.3.js .
403
404
, . , :
<div class="prerotator_brands"><div class="rotator_brands">
<ul class="items">
<li><div class="views-field-tid"><span class="field-content"><a
href="/catalog?taxonomy_3=4&fromb=1"><img src="t_0001.jpg"
alt="Anna Sui" title="Anna Sui" width="181" height="101" /></
a></span></div></li>
alt="Armani" title="Armani" width="181" height="101" /></a></
span></div></li>
alt="Balenciaga" title="Balenciaga" width="181" height="101"
/></a></span></div></li>
<li class="views-row views-row-4 views-row-even"><div
class="views-field-tid"><span class="field-content"><a href="/
catalog?taxonomy_3=26&fromb=1"><img src="brand_bebe.png"
alt="BEBE" title="BEBE" width="181" height="101" /></a></span></
div></li>
</ul>
</div></div>
<script> jQuery(function(){ jQuery(".prerotator_brands").
galleryCircle({ holderList: ".rotator_brands", scrollElParent:
"ul", scrollEl: "li", step: true, switchTime: true, duration :
1000, autoSlide:9000, funcOnclick:function(){ } }); }) </
script>
. :
<script type="text/javascript"> jQuery( function(){ jQuery(".
rotator").jCarouselLite({btnNext: ".next", btnPrev: ".prev",
mouseWheel: true, circular: false, visible: 4});} ); </script>
<div class="prerotator">
<img src="rotator_left.png" alt="" title="" class="prev" />
<img src="rotator_right.png" alt="" title="" class="next" />
<div class="rotator"><ul class="items">

<li><div class="product_item"><a href="/jsnode/30" rel="li
ghtframe[search][ ]"><img src="bvlgari-jasminnoir-20080201-katemoss.jpg" alt="" title="" /><div class="viewsfield-tid-1">Dior</div><div class="views-field-tid">test</
div><div class="views-field-sell-price"><span><span class="ucprice-product uc-price-sell_price uc-price">3000 </span></
span></div></a></div></li>
ghtframe[search][ 1]"><img src="product4.jpg" alt=""
title="" /><div class="views-field-tid-1">Armani</div><div
class="views-field-tid"></div><div class="views-field-sellprice"><span>1395 </span><span class="discountyes"><span
class="uc-price-product uc-price-sell_price uc-price">1500 </
span></span></div></a><div class="flag_discount">-7%</div></
div></li>
ghtframe[search][ 1]"><img src="product3.jpg" alt=""
title="" /><div class="views-field-tid-1">CK (Calvin Klein)</
div><div class="views-field-tid"></div><div class="viewsfield-sell-price"><span>1395 </span><span class="discountye
s"><span class="uc-price-product uc-price-sell_price ucprice">1500 </span></span></div></a><div class="flag_
discount">-7%</div></div></li>
<li><div class="product_item"><a href="/jsnode/11" rel="light
frame[search][ 1]"><img src="product2.jpg" alt="" title=""
/><div class="views-field-tid-1">Dior</div><div class="views-fieldtid"></div><div class="views-field-sell-price"><span>3150
</span><span class="discountyes"><span class="uc-price-product
uc-price-sell_price uc-price">3500 </span></span></div></a><div
class="flag_discount">-10%</div></div></li>
</ul></div></div>
JavaScript. , .
JavaScript, http://
javascript.ru. .
jQuery,
http://jquery.page2page.ru http://jquery-docs.ru/.
405
4.
PHP
Denwer
PHP
PHP

PHP

Denwer
PHP.
.
CMS Drupal.
PHP .
. PHP .
PHP .
. PHP .
PHP ,
JavaScipt, .
, , ,
, , . . , ,
JavaScript, .
Denwer
PHP, ,
PHP-.
Windows PHP.
, PHP .
, , PHP, . http://php.net/downloads.php.
. -,
PHP, -.
- Apache. http://httpd.apache.org/
download.cgi.
PHP Apache .
. PHP .
CMS.
MySQL. http://www.mysql.ru/download/.
, . , , .
Denwer. PHP, MySQL, Apache,
phpMyAdmin. Denwer
.
407
408
4. PHP
Denwer http://denwer.ru/.
,
tech\Denwer. (
www.piter.com.)
, Denwer. Internet Explorer Denwer.
, Internet
Explorer.
Denwer (.4.1). ,
( ), Enter
.
. 4.1. Denwer
1. ,
Denwer. Denwer - .
, Denwer. , C:\www (, C:).
Denwer <Denwer>.
2. Enter , Denwer. <Denwer>. , Z:, .
Z:,
<Denwer>.
Denwer
3. Enter . 1 2:
1 , ,
;
2 , ,
Denwer.
, .
.
4. , Denwer. y,
. .
5. Internet Explorer.
:
Denwer .
, .
, Denwer
(.4.2).
. 4.2. , Denwer
Denwer . ,
PHP CMS Drupal.
<Denwer>/home . , php.test.
www. <Denwer>/home/php.test/www.
Denwer www ,
URL- http://php.test. , www, ().
. ,
php.test microsoft.com, ,
Denwer, Microsoft.
.
409
410
4. PHP
www , PHP-.
www .
PHP. index.
index.php. .
, Denwer . index.php .
, . Denwer,
Start Denwer ( , run.exe, <Denwer>/
denwer/).
Denwer
(.4.3).
. 4.3. Denwer
Denwer
Denwer. http://php.test. ,
index.php (.4.4).
. 4.4. -
, www, index.php,
http://php.test/ .php. ,
my.php http://php.test/my.php. , PHP. -.
PHP
, -.
. .
Denwer, - , Denwer.
Stop Denwer stop.exe, <Denwer>/denwer/.
PHP
-, PHP, PHP,
HTML HTM. PHP
HTML, PHP. , .
PHP HTML-, . . , ,
www .
PHP- .
PHP , :
PHP; , ,
( Denwer) ;
PHP-
PHP- (, http://php.test/my.php).
, PHP- HTML. , , HTML-: DOCTYPE, html,
head body .. , PHP- PHP.
.
PHP
PHP <?php ?>.
<?php ?> PHP.
, PHP-,
PHP.
411
412
4. PHP
:
<?php /* */
// PHP
/* */ ?>
, PHP , JavaScript. .
PHP <?php ?>, HTML-.
, , PHP- , -
<?php ?> PHP. <?php ?> . ,
HTML-, PHP-.
: PHP
, HTML-,
.
PHP. JavaScript, PHP
, (;).

,
<?php ?>, echo print.
echo :
<?php
echo "- HTML";
?>
print :
<?php
print("- HTML");
?>
PHP
(.4.5):
<?php
echo '<h1> </h1>';
echo '<br />, <strong>echo</
strong>';
print('<p> <strong>print</strong></p>');
?>
. 4.5. echo print
, echo
<?php ?> . ,
<?php ?> echo, print. echo, print - PHP,
<?php ?>.
PHP
PHP $, .
.
413
414
4. PHP
. : $var1,
$test, $i.
PHP . -
unset().
(
PHP) -, . , .
. .

, JavaScript:
$test = 23; //
$var1 = $test*2; //
$var1 = $var1%2; //
$var1 = $var1/3; //
$var1 /= 3; //
$var1 = $var1+17; //
$var1 += 17; //
$var1 = 100-$var1; //
$var1 -= 100; // $var1 = $var1 - 100;
$var1 = 1000-($var1*3+75); //
++$var1; //
$var1++; //
--$var1; //
$var1--; //
. PHP (.), +. :
var $test = " "." , ".$mystring;

, , PHP .
, , , - .
PHP , ,
:
is;
true false ; ;
,
.
isset. isset.
true, , , :
if(isset($var1)){
$var2+=$var1;
}
:
if(!isset($var1)){
$var1=$var2;
}
empty. , - , empty. true,
"", 0, "0", NULL, FALSE, array()
:
if(empty($var1)){
//
}
is_numeric. , ( 0
), is_numeric(
). ,
.
415
416
4. PHP
is_. is_numeric, , is_:

is_array , ( );
is_binary , ;
is_bool , (
true false);
is_double, is_float, is_real ,
;
is_infinite ,
;
is_finite ,
, PHP -
;
is_int, is_integer, is_long ,
;
is_nan , NaN ( );
is_null , NULL;
is_object , ;
is_scalar , ( integer, float, string boolean);
is_string , ;
is_unicode , Unicode (UTF-16).
PHP intval().

:
$res = intval(23); // $res 23
$res = intval("23"); // $res 23
$res = intval("23asd"); // $res 23
$res = intval("2w3"); // $res 2
$res = intval("w23"); // $res 0
. PHP :
$mymas = array(1, 2);
( 0) $mymas 1. 2.
array .
:
$ = array(1 => 1, 2 => 2);
:
$mymas = array(
"key1" => "1",
"key2" => "2"
);

.
PHP , .
.
. :
unset($mymas); //
$mymas[0]="1";
$mymas[1]="2";
$mymas[7]="7";
, ,
JavaScript.
, , . :
unset($mymas); //
//
417
418
4. PHP
$mymas[]="1"; // $mymas[0] "1"

$mymas[]="2"; // $mymas[1] "2"
$mymas[]="7"; // $mymas[2] "7"
,
.
. PHP
count(). , :
if(is_array($mymas) && count($mymas)){
//
}
. , .
. print_r.
print_r .
. .
(.4.6, ):
$mymas = array(
"key1" => "1",
"key2" => "2"
);
print_r($mymas);
print_r . ,
print_r .
, (.4.6, ).
.
, : 2 = print_r(1,
true). print_r 1 2. (.4.6, ):
$mymas = array(
"key1" => "1",
"key2" => "2"
);
echo '<pre>'.print_r($mymas, true).'</pre>';
. 4.6. print_r
. PHP .
( ), ( ) .. , :
unset($mymas);
$mymas[0][] = ' [0][0]';
$mymas[0][] = ' [0][1]';
$mymas[1][] = ' [1][0]';
$mymas[1][] = ' [1][1]';
$mymas[1][] = ' [1][2]';
$mymas[1][] = ' [1][3]';
$mymas[0][] = ' [0][2] !!!';
echo $mymas[0][2];
419
420
4. PHP
array:
$mymas = array(
array(10,21,32,43),
array(50,61,72),
);
echo $mymas[0][2];

PHP JavaScript.
if. if. 3, JavaScript.
:
if(1){ // 1 ,
1;
//
2;
}
:
if(1){ // 1 ,
1;
//
2;
}else{
3;
// 1 ,
//
4;
}
:
if(1){
1;
2;
}else if(2){
3;
4;
}else{
5;
6;
}
PHP else if elseif.
?:. JavaScript:
=()?(1):(2);
1, .
2.
switch. switch JavaScript:
switch(){
case 1:
1;
break;
case 2:
2;
break;
default:
3;
}
421
422
4. PHP
. ,
, , JavaScript:
1 == 2 1 2, ;
1 != 2 1 2, ;
1 === 2 1 2
( , ), ;
1 !== 2 1 2
( / ), ;
1 > 2 1 2, ;
1 >= 2 1 2, ;
1 < 2 1 2, ;
1 <= 2 1 2, ;
!1 1 false ( ,
false, "" ( ), 0), ;
1 1 true (
false, "" ( ), 0), .
.
JavaScript, PHP.
JavaScript :
&& , ;
|| , .
PHP :
and , ;
or , .
:
if(($var1 === false) and ($var2 > 23)){} $var1
false $var2 23;
if(($var1 == 10) or ($var1 == 20)){} $var1 10 20;
if((($var1 == 10) or ($var1 == 20)) and ($var2 > 23)){}
$var1 10 20 $var2 23.
3, JavaScript.
JavaScript PHP.
for. for :
for(; ; ){
}
for:
-, , ;
, , ;
,
.
:
for($i=0; $i<10; $i++){
//
}
foreach. - PHP JavaScript JavaScript
foreach . , for in.
foreach .
( ), :
foreach($ as $){
//
}
$,
$. $
, ..
423
424
4. PHP
:
$mymas = array(
"key1" => "1",
"key2" => "2"
);
foreach($mymas as $value){
echo $value;
}
,
, :
foreach($ as $ => $){
//
}
$,
$, $.
:
$mymas = array(
"key1" => "1",
"key2" => "2"
);
foreach($mymas as $key => $value){
echo $key.': '.$value;
}
while. while JavaScript:
while(){
, .
do while. do while, PHP, JavaScript. , :
do{
}while();
.
.
:
$d=10;
do{
echo $d;
$d--;
}while($d>3);
break continue. PHP
break continue:
break ;
continue , ,
continue.
PHP,
.
, PHP
JavaScript.
. :
function (){
425
426
4. PHP
- ,
return:
function (){
return ;
}

:
function (1, 2, 3){
1
return ;
}
PHP .
,
. , , .
,
: global $;. :
$d=10;
test();
function test(){
global $d;
echo $d; // "10"
}
. :
_() ;
_(__1, __2) , ;
= _(__1, __2)
.
PHP.
, . PHP
CMS Drupal,
CMS. .
PHP http://php.net/manual/ru/
langref.php.
427
5.
CMS Drupal
CMS
CMS
HTML, CSS, JavaScript, jQuery PHP.

:
- CMS ,
- ;
, .
, .
CMS Drupal.
CMS? CMS ,
- . ,
. ,
.
CMS Drupal CMS.
, .
.
, -.
.
, CMS Drupal
(HTML, CSS, JavaScript), (PHP).
.
CMS Drupal 7.
. CMS Drupal Drupal6. , - Drupal6,
Drupal7 , .
CMS
CMS Drupal http://drupal.org.
CMS. CMS Drupal,
CMS. ,
CMS ( ).
http://drupal.org , , CMS Drupal
http://drupal.org/project/ .
429
430
5. CMS Drupal
CMS Drupal. CMS Drupal. http://drupal.org/project/drupal.

(.5.1).
. ,
. ,
. ,
- .
. 5.1. , CMS Drupal
CMS Drupal7 ( .5.1 7.12).

. CMS Drupal Denwer.
, 4?
Denwer ( ) . <Denwer>/
home , , denwer.my.
www. <Denwer>/home/
denwer.my/www.
CMS Drupal <Denwer>/home/denwer.my/www.
www , .5.2.
, Denwer http://denwer.
my ( <Denwer>/home ?).
CMS Drupal (.5.3).
URL- denwer.my ( , <Denwer>/home) <drupal>.
CMS
. 5.2. www
. 5.3. CMS Drupal
431
432
5. CMS Drupal
. CMS Drupal, , , CMS Drupal.

phpMyAdmin, Denwer.
http://localhost/Tools/phpmyadmin/index.php (
Denwer ).
. phpMyAdmin Create new database ( ).
, bd. Create () (.5.4).
. 5.4.
CMS Drupal. .
.
1. http://denwer.my Standard
() Save and continue ( ).
2. Save and continue
( ). CMS Drupal
.
CMS
3. (.5.5)
:
Database type ( ), MySQL;
Database name ( )
( bd);
Database username (
Denwer root);
Database password ( ) ( Denwer );
Advanced Options ( ).
Denwer
. Table prefix ( ) ,
CMS Drupal .
.
. 5.5.
4. CMS
Drupal.
433
434
5. CMS Drupal
5. :
, (
, CMS Drupal,
, );
,
..
6. Visit your new site ( )

CMS Drupal.
. ( ,
5 CMS Drupal) (.5.6).
. 5.6. CMS Drupal
CMS Drupal. CMS Drupal

. http://localize.drupal.org/
translate/languages/ru 7- CMS Drupal.

drupal-7.11.ru.po.
CMS Drupal,
CMS Drupal Locale ().
Modules () (<drupal>/admin/modules)
Locale (). Save configuration
( ).
ConfigurationLanguages ()
(<drupal>/admin/config/regional/language),
Configuration ().
Languages ().
ConfigurationLanguages ().
Add language ( ),
.
( Default ( ) ).
, drupal-7.11.ru.po. ConfigurationTranslate interfaceImport (
) (<drupal>/admin/config/regional/translate/import)
drupal-7.11.ru.po, Import into () Russian () (.5.7).
CMS Drupal . CMS

.
, .
(<drupal>/admin/modules).
, .
,
.

CMS Drupal , , , . .
435
436
5. CMS Drupal
, . ,
, .
. 5.7.
,
, , .
Block
. , .
Color , .
, . . .
Comment .
, .
, , ,
.
Contextual links .

, .
Dashboard -. .
.
Database logging , , .

.
Field
, , (
). , .
Field SQL storage
, , .
, .
Field UI / . , .
File
. . .
Filter , ,
. .
Help CMS Drupal.
CMS .
Image (
). .
.
List .
.
Menu .
.
Node . .
Number . .
Options . .
Overlay
. . .
.
437
438
5. CMS Drupal
Path (,
- <drupal>/node/111, <drupal>/article/kak_ya_provel_leto). .
RDF . HTML5
. .
Search .
Google, ..,
( ). .
Shortcut .

. .
System , .
Taxonomy ,
.
.
Text . .
Toolbar . , Admin menu.
User .
.
,
, .
Aggregator . . RSS-
, RSS RSS .
Blog
.
Book , , ,
, .
Contact ,
.
Webform.
Content translation .
Forum .
Locale .
.
OpenID OpenID.
PHP filter , . PHP , .
Poll .
Statistics , ,
.
Syslog
.
Testing .
Tracker
.
Trigger , .
Rules.
Update manager , CMS Drupal.
. , .

, CMS Drupal . ,
.
,
.

, , .
, http://drupal.org, . ?
439
440
5. CMS Drupal
.
.
FTP < >/sites/all/
modules. FTP modules , .
FTP
< >/sites/all/modules.
, .
(<drupal>/admin/modules) .
-
. , ,
, FTP <
>/sites/all/libraries . libraries , .
read
my.txt, , ,
. , , install.txt.
, CMS Drupal7 .
. , ,
Drupal.
, .
, , ,
CMS Drupal . , . ,
, .
.
. - , . ,
. ,
, .

,
. , .
,
.
Chaos tool suite (ctools) (http://drupal.org/project/ctools). . Display suite, Meta tags, Ajax Driven Cart, Ubercart,
Product Power Tools, Onpay, Date Views ( Date), Quicktabs, Views
translation ( i18n), Variable views ( Variable), Fieldgroup,
Views, Views Slideshow: Cycle, Service Links Displays ( Service links).
Entity API (http://drupal.org/project/entity).
: Rules, LoginToboggan Rules Integration ( LoginToboggan),
Privatemsg Rules Integrations ( Privatemsg), Simplenews rules (
Simplenews), Ubercart, Ajax Driven Cart, Onpay.
Libraries API (http://drupal.org/project/libraries). Superfish
Views Slideshow.
Session API (http://drupal.org/project/session_api).
Flags. Session API .
Token (http://drupal.org/project/token). ,
. (
, , nid ..),
(.5.8). File (Field) Paths, Meta tags, Page Title, Pathauto.
. 5.8. Token
Variable (http://drupal.org/project/variable). , .
441
442
5. CMS Drupal
Voting API (http://drupal.org/project/votingapi). , .

.
Administration menu (http://drupal.org/project/admin_menu).
,
(.5.9). . Toolbar.
. 5.9. Administration menu
CMSDrupal , Administration
menu.
Backup and Migrate (http://drupal.org/project/backup_migrate).

,
.
DB Maintenance (http://drupal.org/project/db_maintenance). .

.
Block Title Link (http://drupal.org/project/block_titlelink). CMS Drupal.
Colorbox (http://drupal.org/project/colorbox).
(, , ) (.5.10)
( 4, JavaScript, ColorBox).
. 5.10. Colorbox
Custom breadcrumbs (http://drupal.org/project/custom_breadcrumbs). 1 .

Custom Search (http://drupal.org/project/custom_search). CMS Drupal,
,
.
Display Suite (http://drupal.org/project/ds). : , , ..
Form Block (http://drupal.org/project/formblock). ,
.
404 Navigation (http://drupal.org/project/navigation404). ,
.
1
( . Breadcrumbs) , ,
.
443
444
5. CMS Drupal
Pathauto (http://drupal.org/project/pathauto). ,
, .
Privatemsg (http://drupal.org/project/privatemsg).
,
.
. , , , .
Rules (http://drupal.org/project/rules). CMS Drupal, , .
Quick Tabs (http://drupal.org/project/quicktabs). , (.5.11).
.
. 5.11. Quick Tabs
Simplenews (http://drupal.org/project/simplenews). , .
Site map (http://drupal.org/project/site_map). ( ).
Superfish (http://drupal.org/project/superfish). (.5.12).
. 5.12. Superfish
Tab Tamer (http://drupal.org/project/tabtamer).

CMS Drupal, .
Talk (http://drupal.org/project/talk). .
Transliteration (http://drupal.org/project/transliteration). , .
Views (http://drupal.org/project/views).
. ,
,
.
Views Autocomplete Filters (http://drupal.org/project/views_autocomplete_filters).
Views ,

.
Views Slideshow (http://drupal.org/project/views_slideshow).
-, ,
Views (.5.13).
445
446
5. CMS Drupal
. 5.13. Views Slideshow

. ,
. , , , .
Advertisement (http://drupal.org/project/ad).
.
.
Automatic Nodetitles (http://drupal.org/project/auto_nodetitle).
.
CAPTCHA (http://drupal.org/project/captcha). ( ) (
, ) (.5.14).
CAPTCHA Pack (http://drupal.org/project/captcha_pack).
CAPTCHA, (.5.15).
Fivestar (http://drupal.org/project/fivestar). ,
(.5.16).
. 5.14. CAPTCHA
. 5.15. CAPTCHA Pack
. 5.16. Fivestar
Flag (http://drupal.org/project/flag). , ,
.
Node clone (http://drupal.org/project/node_clone).
.
Node and Comments Form Settings (http://drupal.org/project/nodeformsettings). .
, /.
phpBB Forum Integration (http://drupal.org/project/phpbbforum). Drupal
phpBB.
SimpleAds (http://drupal.org/project/simpleads).
SWF-.
.
447
448
5. CMS Drupal
Sort Comments (http://drupal.org/project/sort_comments).

.
Webform (http://drupal.org/project/webform). - .
,
.
ImageCache Actions (http://drupal.org/project/imagecache_actions). , , , .
CKEditor

WYSIWYG1, HTML.
CKEditor. , , .
CKEditor WYSIWYG HTML editor (http://drupal.org/project/ckeditor).
CKEditor.
,
HTML (.5.17).
. 5.17. CKEditor
1
WYSIWYG ( .What You See Is What You Get , )

c ,
-.
Image Resize Filter (http://drupal.org/project/image_resize_filter). , ,

, .
IMCE (http://drupal.org/project/imce).
. , (
).
IMCE Crop (http://drupal.org/project/imce_crop). IMCE,
.
IMCE Mkdir (http://drupal.org/project/imce_mkdir). IMCE, .
Video Filter (http://drupal.org/project/video_filter). YouTube (.5.18).
URL , .
. 5.18. Video Filter
449
450
5. CMS Drupal
CMS Drupal . , .
, CMS
Drupal.
Conditional Fields (http://drupal.org/project/conditional_fields).
, , ,
(, ) (. 5.19).
. 5.19. Conditional Fields
Date (http://drupal.org/project/date). ,

, , ..
Field group (http://drupal.org/project/field_group). . ,
: , / .
CMS Drupal6 CCK,
. Drupal7
CCK .
, .
References (http://drupal.org/project/references).
.
CMS Drupal6 CCK.
Drupal7
.
Taxonomy Term Reference Tree Widget (http://drupal.org/project/term_reference_tree).
. ,
(.5.20).
. 5.20. Taxonomy Term Reference Tree Widget
SEO
SEO ( , )
. , SEO-, .
Global Redirect (http://drupal.org/project/globalredirect).
.
Meta tags (http://drupal.org/project/metatag). ( , , )
.
Meta tags quick (http://drupal.org/project/metatags_quick).
( ) ,
.
451
452
5. CMS Drupal
Page Title (http://drupal.org/project/page_title).

( title ) , , .
XML sitemap (http://drupal.org/project/xmlsitemap). sitemap.xml.
, ,
.
Legal (http://drupal.org/project/legal).
(.5.21).
. 5.21. Legal
LoginToboggan (http://drupal.org/project/logintoboggan).
. , , .
uLogin (advanced version) (http://drupal.org/project/ulogin).
,
( ) (.5.22).
. 5.22. /

.
Forward (http://drupal.org/project/forward). ,
URL
(.5.23).
. 5.23. Forward
Printer, email and PDF versions (http://drupal.org/project/print). ,

PDF- .
Service links (http://drupal.org/project/service_links). ,
URL - (.5.24).
.
, .
453
454
5. CMS Drupal
. 5.24. Service links
Authenticated User Page Caching (Authcache) (http://drupal.org/project/authcache).

Drupal .
CSS Embedded Images (http://drupal.org/project/css_emimage). , CSS-,
CSS. CSS- .
Entity cache (http://drupal.org/project/entitycache). . ,
.
File Cache (http://drupal.org/project/filecache).
.
Memcache API and Integration (http://drupal.org/project/memcache). Drupal .
,
, ,
.
Internationalization (http://drupal.org/project/i18n). , .
Internationalization Views (http://drupal.org/project/i18nviews). Internationalization, ,
Views.
Language icons (http://drupal.org/project/languageicons).
, (.5.25).
. 5.25. Languageicons
-
, ,
-. - Ubercart. .
Ubercart (http://drupal.org/project/ubercart). , - CMS Drupal.
Ubercart AJAX Cart (http://drupal.org/project/uc_ajax_cart).
Ubercart AJAX-,
.
:
, , .
Uc_onpay (http://onpay.ru/drupal). : Webmoney, .,
, - ..
Ubercart Product Power Tools (http://drupal.org/project/uc_product_power_tools).
. , .

CMS Drupal
, . . ,
. , ,
.
, ? .
1. ,
. <>/admin/reports/updates/
update ( ).
455
456
5. CMS Drupal
(, ,
, ).
2. ,
,
(.5.26).
.
. 5.26.
3. .
. . , , . , , .
<>/admin/config/system/backup_migrate (
).
, .
.
4. ,
2. ( ,
(.5.27)), FTP
sites/all. new new , .
5. .
. :
. 5.27.
1) sites/all/modules sites/all;
2) sites/all/new
sites/all/modules.
. ,
, .
.
, CMS Drupal
, ,
.
6. .
,
.
<>/update.php, Continue ().
:
,
; Administration pages (
), ;

, ,
.
457
458
5. CMS Drupal
7. .
, .
.

CMS Drupal, , . CMS Drupal .

, CMS Drupal, , .
.
-. :
- , ..
. , , <drupal>/admin/appearance () (.5.28).
. 5.28.
CMS Drupal :
, (
);
,

( );
,
.
. , ,
( ) ( ) .
. CMS Drupal
: Bartik, Garland, Seven Stark (.5.29).
. 5.29.
.
.
http://drupal.org/project/themes. ,
Filter by compatibility ( ) 7.x.
459
460
5. CMS Drupal
, .
1. .
2. ( , ).
3. ,
, (
, ).
4. FTP sites/all.
5. themes, ,
sites/all/themes.
6. <drupal>/admin/appearance
.
. CMS Drupal
: .
<drupal>/admin/
appearance/settings. favicon1
, , ,
, , , .
,
,
, . ,
.
-,
HTML- PHP-. <drupal>/admin/
structure/block/add ( ). :
( , );
, -
( );
1
, URL
.
( PHP);
, -:
, ;
, ;
, ;
, .
. , . , .
<drupal>/admin/
appearance/settings (.5.30). ,
. (,
- ) .
. 5.30.

. ,
.
461
462
5. CMS Drupal
CMS Drupal ,
.
<drupal>/admin/structure/menu (
). . CMS Drupal :
Main menu ( ) ;
;
Management () , CMS; ; CMS Drupal7
Toolbar Admin menu;
Navigation ()
; ,
, ( -)
;
User menu ( ) , : ,
.
,
<drupal>/admin/structure/menu.
,
<drupal>/admin/structure/menu,
Drag and drop (
, ,
(.5.31)).
( Main menu ( ) ).
, (<drupal>/admin/
structure/block), ,
, .

. , -
. ,
, .
. 5.31.
<drupal>/admin/
config/content/formats ( ). :
Full HTML ( HTML)
HTML; ,
URL- ,
br,
;
Plain text ( ) ;
, URL- , br;
PHP code (PHP-) PHP Code ;
PHP-;
Display Suite code ( Display Suite) Display Suite.
Full HTML ( HTML), Plain text ( ) ..
. , , .
, ,
463
464
5. CMS Drupal
<drupal>/admin/
config/content/formats.
,
.
.

CMS Drupal
. , , -
.
. <drupal>/admin/
people/permissions/roles ( ). CMS
Drupal :
( ), ,
;
, , ;
Administrator , .
, .
<drupal>/admin/people/permissions/roles.
.
,
<drupal>/admin/people/permissions/roles. .

<drupal>/admin/people (). , (.5.32).
.
.
.
.
. 5.32.
, <drupal>/admin/people/permissions ( ).
,
(.5.33).
. 5.33.

.
, , , .., , -
.
465
466
5. CMS Drupal
, ,
. , . , , .
, , , , . , ,
.
. CMS Drupal .
:
basic page , ;
story ;
,
.
. <drupal>/admin/structure/types/add (
). :
,
,
;

;
, ,
;
,
;

;
, ..
, .
<drupal>/admin/
structure/types ( ).
.
, , .
.
. CMS Drupal
, .
<drupal>/node/add ( ).
,
,
, .
. , ,
<drupal>/admin/content (). , ,
.
, , , ( )
/ / /
.
.
, , ,
- . ,
.
CMS Drupal .

, , .
CMS Drupal : , ,
, ..
. ,
, .

<drupal>/admin/structure/types/manage/< >/fields (
).
.
.
467
468
5. CMS Drupal
<drupal>/admin/config/people/accounts/fields (
).

<drupal>/admin/structure/taxonomy//fields (
).
. :
<drupal>/admin/structure/types/manage/< >/display (
);
<drupal>/admin/config/people/accounts/display (
);
<drupal>/admin/structure/taxonomy//display (
).
:
;
, ( );
( , Colorbox, )
( ).
, . .
,
, .
CMS Drupal , .
Drupal . CMS .
- .
CMS Drupal tags.
.
<drupal>/admin/structure/taxonomy ( ).
<drupal>/admin/structure/
taxonomy ().
.

, . ,
.
, .
CMS Drupal
CMS Drupal http://drupal.org ( ), http://drupal.ru.
469
6.
. , . , .
: ?
, . , , , . . ,
.
, ? , . .
. :
, , .
,
. , .

- , - ?
, . , Google (http://
google.ru) (http://yandex.ru).
,
, ,
- .

, ,
,
.
, .
. , , - ,

. .
471
472
6.
, .
. , .
( ,
). http://webmaster.yandex.ua/addurl.xml, .
, .
Google.
,
http://www.google.ru/intl/ru/addurl.html.
,
. ,
- .
sitemaps.xml
,

.
index.html, in
dex.php, index.htm .. ,
.
. , , .
.
sitemap.xml.
, ,
,
.
sitemap.xml. CMS Drupal,
sitemap.xml
xmlsitemap. sitemap.xml . , ,
1.
xmlsitemap .
, .
1
CMS Drupal,
.
XML sitemap ,
.
XML sitemap custom sitemap.xml
.
, .
XML sitemap engines
sitemap.xml .
XML sitemap internationalization .
XML sitemap menu sitemap.xml ,
. ,
sitemap.xml.
XML sitemap node sitemap.xml
. ,
sitemap.xml.
XML sitemap taxonomy sitemap.xml . ,
sitemap.xml.
XML sitemap user sitemap.xml
.
CMS Drupal, sitemap.xml . sitemap.xml.
, http://htmlweb.ru/analiz/sitemap.php.
sitemap.xml:
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" href="/sitemap.xsl"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<url><loc>http://www.angedesign.ru/booking/view</loc></url>
<url><loc>http://www.angedesign.ru/node/114</loc><lastmod>201105-27T10:30Z</lastmod><changefreq>yearly</changefreq><priorit
y>0.4</priority></url>
</urlset>
, url.
-:
473
474
6.
loc URL -;
lastmod ;
changefreq ;
priority .
sitemap.xml
.
sitemap.xml .
50000 10.
, sitemap.xml . sitemaps.xml,
sitemap.xml.
sitemap.xml. , sitemap.xml
.
. sitemap.xml , . - :
Google http://google.com/webmasters/sitemaps/ping?sitemap=< sitemap.xml>;
http://webmaster.yandex.ru/wmconsole/sitemap_list.xml?host=<
sitemap.xml>;
Yahoo! http://search.yahooapis.com/SiteExplorerService/V1/ping?sitemap=<
sitemap.xml>;
Ask http://submissions.ask.com/ping?sitemap=< sitemap.xml>;
Bing http://www.bing.com/webmaster/ping.aspx?siteMap=< sitemap.xml>.

, sitemap.xml -:
http://webmaster.yandex.ru;
Google http://www.google.ru/webmasters/.
SEO
. ,
, , 500- ?
10 -
. .
.
: , . -,
.
.
, ,
, .
, .
, (h1, h2, h3, ), , , .
div, span ..
h1, h2 .. ,
, .
h1 - .
. h1 , . ,
-, ,
-.
strong i. , ,
div span.
( )
- alt . , .
alt , , .
HTML- ,
SEO. meta, , , .

.
<meta http-equiv=
"keywords" content=" ">. ,
head. content
475
476
6.
, -. . ,
,
-.
, .
.
<meta http-equiv="description"
content="">. head.
, ,
.. content
. content 1024.
title .
: , , ,
.
,
.
,
, ,
..
,
. , , SEO- ( ). .

,
. ,
. ,
.
, ,
, .
.
,
.
.
:
(http://catalog.aport.ru/rus/thememap.aspx);
Mail.Ru (http://list.mail.ru/index.html);
Russia on the Net (http://www.ru);
Chat.ru (http://catalog.chat.ru);
(http://www.ulitka.ru).

,
,
. , , , HTML .
, .
:
100 (http://top100.rambler.ru);
Mail.Ru (http://top.mail.ru);
Openstat (http://openstat.ru).

,
, .
, .
. .
.
,
.
:
http://memori.qip.ru;
http://bobrdobr.ru;
477
478
6.
http://moemesto.ru;
http://100zakladok.ru;
http://mister-wong.ru;
http://vaau.ru;
http://google.com/bookmarks;
http://friendfeed.com;
http://zakladki.yandex.ru;
http://toodoo.ru;
http://zakladok.net.
. , .
. .
:
http://pisali.ru;
http://50rus.info;
http://articles-directory.ru;
http://catalog-statey.ru;
http://pautinka.biz;
http://gammalist.ru;
http://kata-log.ru.
-. ,
- , .
:
http://b2blogger.com;
http://subscribe.ru/release;
http://openmarket.ru/p_releases.asp;
http://www.press-release.ru;
http://www.karta-smi.ru;
http://www.pikabu.ru;
http://www.pr-release.ru;
http://www.prtime.ru;
http://pr.adcontext.net;
http://press.prnews.ru/release_list.asp;
http://inthepress.ru;
http://presuha.ru/release.
, :
http://www.big-news.ru;
http://it4business.ru/about/add;
http://www.cybersecurity.ru/press;
http://www.fubix.ru/press;
http://www.pressroom.ru;
http://soft.mail.ru/press-release.php;
http://www.cityindex.ru/ci/pr_add.shtml.
, :
http://www.lexim.ru/invite/releases;
http://www.perevozki.ru.
:
http://www.realestate-today.ru/news/add_release.html;
http://www.restate.ru/add_news.html;
, , :
http://rcc.ru/Rus/?ID=11567;
http://www.cmna.ru/?ID=46496;
:
http://www.oborudunion.ru;
http://www.opt-union.ru;
http://www.snabjenci.ru;
http://avtomatpro.info/press;
http://masteroff.ru;
http://press-24.ru;
http://upack.by/press_release.
479
480
6.
:
http://re-port.ru/press;
http://www.reclama.su;
http://4p.ru;
http://propel.ru/news.
:
http://www.tourinfo.ru/press_release/add;
http://www.otpusk.com/news.
, :
http://www.gaap.ru/press/client;
http://www.credcard.ru/admin/registration.
:
http://www.press-release.com.ua;
http://www.newsroom.com.ua.
RSS-.
RSS- . RSS-
:
http://www.prime-rss.ru/add.php;
http://rss.ukrnews.net/reg.php;
http://blogs.yandex.ru/add.xml;
http://liverss.ru/;
http://wmas.msk.ru/signup.php;
http://www.blogdir.ru/add_blog;
http://www.redtram.ru/pages/addsource/;
http://rssreader.ru/addfeed;
http://www.plazoo.com/ru/addrss.asp;
http://www.rss.zelenkov.net/rss_add.php.

,
- , ,
.
.
.
.
, .
, .
, , .
. ,
, , , ..
, . , . $1 2.
:
http://rle.ru;
http://rb2.design.ru;
http://ir.ru;
http://tbn.ru.

. ,
, : ,
- .

.
.
:
http://www.begun.ru;
http://direct.yandex.ru;
http://google.com/adsense.
481
HTML Tidy
1. , HTML Tidy
,
, HTML Tidy;
.
entity "..." doesn't end in ";"
(, &nbsp ).
numeric character reference "..." doesn't end in ';'
(, &#8212
—).
unescaped & or unknown entity "&..."
HTML- &, . & &.
missing </...>
.
missing </aaa> before <bbb>
,
HTML.
discarding unexpected <...>
,
.
nested emphasis ...

. , <b><b></b></b>
<b></b>.
replacing unexpected ... by </...>

. , <div><em></strong></div>.
isn't allowed in <...> elements
,
.
missing <...>
,
. , <tr> .
483
484
1. , HTML Tidy
inserting implicit <...>

,
.
Insert missing <title> element
HTML- <title>.
Multiple <frameset> elements
HTML- <frameset>,
. <frameset>
.
<...> is not approved by W3C
HTML- , HTML. .
Error: <...> is not recognized!
HTML- , .
Trimming Empty Tag
.
- .
<> is probably intended as </>

, . : <a href=""><a>.
... shouldn't be nested
, .
.
Text found after closing </body>-tag
HTML- </body> -
.
Adjacent hyphens within comment
.
. : .
SYSTEM, PUBLIC, W3C, DTD, EN must be upper case
SYSTEM, PUBLIC, W3C, DTD, EN DOCTYPE
. .
1. , HTML Tidy
missing <!DOCTYPE> declaration

HTML- DOCTYPE.
Too much <...>-elements
HTML- ,
.
<...> inserting "..." attribute
<...> lacks "..." attribute
.
... attribute ... lacks value
.
... attribute "..." has invalid value "..."
.
<...> missing > for end of tag
HTML- >, >:
<p> > </p>. > : <p <p>.
<...> proprietary attribute "..."
, HTML
.
.
... proprietary attribute value "..."
, HTML
.
... dropping value "..." for repeated attribute "..."
.
... unexpected or duplicate quote mark
. : <a href=http://test.ru">.
attribute with missing trailing quote mark
. : <a href="http://test.ru"">.
id and name attribute value mismatch
485
486
1. , HTML Tidy
id name.
.
replacing <...> by <...>
:
, .
... anchor "..." already defined

name.
488
2.
.2.12.10 .
2.1.
¶
§
©
®
™
°
±
¼
½
¾
×
÷
&fnof;
&permil;
¶
§
©
®
™
°
±
¼
½
¾
×
÷
ƒ
‰
Copyright

2.2.
Α
Β
Γ
Δ
Ε
Ζ
Η
Θ
Ι
Κ
&Lambd;
Μ
Ν
Ξ
Ο
Π
Ρ
Σ
Τ
Υ
Α
Β
Γ
Δ
Ε
Ζ
Η
Θ
Ι
Κ
Λ
Μ
Ν
Ξ
Ο
Π
Ρ
Σ
Τ
Υ
2.
Φ
Χ
Ψ
Ω
α
β
γ
δ
ε
ζ
η
θ
ι
κ
λ
μ
ν
ξ
ο
π
ρ
&sigmaf;
σ
τ
υ
φ
χ
ψ
ω
Φ
Χ
Ψ
Ω
α
β
γ
δ
ε
ζ
η
θ
ι
κ
λ
μ
ν
ξ
ο
π
ρ
ς
σ
τ
υ
φ
χ
ψ
ω
2.3.
¨
¡
¿
À
Á
Â
¨
¡
¿
À
Á
Â

A
A
A

489
490
2.
2.3 ()
Ã
Ä
Å
Æ
Ç
È
É
Ê
Ë
Ì
Í
Î
Ï
Ð
Ñ
Ò
Ó
Ô
Õ
Ö
Ø
Ù
Ú
Û
Ü
Ý
Þ
ß
à
á
â
ã
ä
å
æ
ç
è
é
Ã
Ä
Å
Æ
Ç
È
É
Ê
Ë
Ì
Í
Î
Ï
Ð
Ñ
Ò
Ó
Ô
Õ
Ö
Ø
Ù
Ú
Û
Ü
Ý
Þ
ß
à
á
â
ã
A
A
A
AE
C
E
E
E
E
I
I
I
I
Eth
N
O
O
O
O
O
O
U
U
U
U
Y

s ()
a
a
a
a
ä
å
æ
ç
è
é
a
a
ae
c
e
e
2.
ê
ë
ì
í
î
ï
ð
ñ
ò
ó
ô
õ
ö
ø
ù
ú
û
ü
ý
þ
ÿ
&weierp;
&alefsym;
&Yuml;
&scaron;
&Scaron;
&oelig;
&OElig;
ê
ë
ì
í
î
ï
ð
ñ
ò
ó
ô
õ
ö
ø
ù
ú
û
ü
ý
þ
ÿ
℘
ℵ
Ÿ
š
Š
œ
Œ
e
e
i
i
i
i
Eth
n
o
o
o
o
o
o
u
u
u
u
y

y
P
Y
S
S
oe
OE
2.4.
←
↑
→
↓
↔
&crarr;
⇐
←
↑
→
↓
↔
↵
⇐
491
492
2.
2.4 ()
&uArr;
⇑
⇒
⇒
&dArr;
⇓
⇔
⇔
◄
▲
►
▼
2.5.
&spades;
♠
&clubs;
♣
&hearts;
♥
&diams;
♦
"
"
"
&
&
&
<
<
<
>
>
>
•
•
&oline;
‾
&Dagger;
‡
&dagger;
†
&tilde;
˜
&circ;
ˆ
¦
¦
ª
ª
º
º
·
·
¸
¸
2.6.
…
…
′
...
′
″
″
2.
2.7.
–
—
‘
’
&sbquo;
“
”
&bdquo;
«
»
&rsaquo;
&lsaquo;

´
–
—
‘
’
‚
“
”
„
«
»
›
‹

´
2.8.
&image;
&real;
ℑ
ℜ
∀
∂
∃
∅
∇
∀
∂
∃
∅
∇
∈
∉
&ni;
∏
∑
−
&lowast;
√
&prop;
∞
&ang;
&and;
&or;
∈
∉
∋
∏
∑
−
∗
√
∝
∞
∠
∧
∨

N-
N-

493
494
2.
2.8 ()
∩
∩
∪
∪
∫
∫
&there4;
∴
&sim;
∼
&cong;
≅
≈
≈
≠
≠
&equiv;
≡
≤
≤
≥
≥
⊂
⊂
⊃
⊃
&nsub;
⊄
&sube;
⊆
&supe;
⊇
&oplus;
⊕
&otimes;
⊗
&perp;
⊥
⋅
⋅
&lceil;
⌈
&rceil;
⌉
&lfloor;
⌊
&rfloor;
⌋
&lang;
〈
&rang;
〉
¬
¬
²
²
³
³
µ
µ
¹
¹
2.9.
&ensp;
&emsp;

2.
&zwnj;
&zwj;

‌
‍

2.10.
£
€
¢
¤
¥
£
€
¢
¤
¥
495
HTML,

3. , HTML
.3.1 , HTML, .
:
IE Internet Explorer;
O Opera;
FF Mozilla Firefox;
GC Google Chrome;
S Safari.
.
3.1.
a
abbr
acronym
address
applet
area
article
aside
audio
b
base
basefont
bdo
bgsound
big
blink
blockquote
body
br
button
canvas
caption
center
cite
code
IE 6
IE 7
O9
O 10
S3
FF 3
GC 10
HTML 4
XHTML
HTML5
497
498
3. , HTML
3.1 ()
col
colgroup
command
comment
datalist
dd
del
details
dfn
dir
div
dl
dt
em
embed
fieldset
figcaption
figure
font
footer
form
frame
frameset
h1
h2
h3
h4
h5
h6
head
header
hgroup
hr
html
i
iframe
img
input
ins
IE 6
IE 7
O9
O 10
S3
FF 3
GC 10
HTML 4
XHTML
HTML5
3. , HTML
isindex
kbd
keygen
label
legend
li
link
listing
map
mark
marquee
menu
meta
meter
multicol
nav
nobr
noembed
noframes
noscript
object
ol
optgroup
option
output
p
param
plaintext
pre
progress
q
rp
rt
ruby
s
samp
script
section
select
IE 6
IE 7
O9
O 10
S3
FF 3
GC 10
HTML 4
XHTML
HTML5
499
500
3. , HTML
3.1 ()
small
source
spacer
span
strike
strong
style
sub
summary
sup
table
tbody
td
textarea
tfoot
th
thead
time
title
tr
track
tt
u
ul
var
video
wbr
xmp
IE 6
IE 7
O9
O 10
S3
FF 3
GC 10
HTML 4
XHTML
HTML5
CSS
502
4. CSS
.4.1 CSS. :
CSS;
. ;
CSS CSS, ;
IE Internet Explorer,
;
CSS-;
, .
4.1. CSS
background
. CSS
CSS 1
IE
6.0

transparent || none ||
repeat || scroll || 0%
0%
scroll
border-box
transparent
none
padding-box
0% 0%
background-clip
background-color
background-image
background-origin
background-position
CSS 1
CSS 3
CSS 1
CSS 1
CSS 3
CSS 1
6.0
9.0
6.0
6.0
9.0
6.0
background-repeat
background-size
border
CSS 1
CSS 3
CSS 1
6.0
9.0
6.0
border-bottom
CSS 1
6.0
border-bottom-color
CSS 2
6.0
border-bottom-leftradius
border-bottom-rightradius
border-bottom-style
border-bottom-width
border-collapse
CSS 3
9.0
repeat
auto

,

color
0

CSS 3
9.0
CSS 2
CSS 1
CSS 2
6.0
6.0
6.0
medium
separate
border-color
CSS 1
6.0

<table>
,

display
table inlinetable

4. CSS
border-image
. CSS
CSS 3
IE
-

none
border-left
CSS 1
6.0
border-left-color
border-left-style
border-left-width
border-radius
CSS 2
CSS 2
CSS 1
CSS 3
6.0
6.0
6.0
9.0
medium
0
border-right
CSS 1
6.0
border-right-color
border-right-style
border-right-width
border-spacing
border-style
border-top
CSS 2
CSS 2
CSS 2
CSS 2
CSS 1
CSS 1
6.0
6.0
6.0
8.0
6.0
6.0
border-top-color
border-top-left-radius
border-top-right-radius
border-top-style
border-top-width
border-width
bottom
box-shadow
box-sizing
caption-side
CSS 2
CSS 3
CSS 3
CSS 2
CSS 1
CSS 1
CSS 2
CSS 3
CSS 3
CSS 2
6.0
9.0
9.0
6.0
6.0
6.0
6.0
9.0
8.0
8.0
medium
0
none

0
0
medium
medium
auto
none
content-box
top
clear
CSS 1
6.0
none
clip
CSS 2
6.0
auto
,

,
border-collapse
collapse

,

bordercollapse:collapse

<caption>
,

display
table-caption

503
504
4. CSS
4.1 ()
color
. CSS
CSS 1
IE
6.0
column-count
CSS 3
10.0
auto
column-gap
CSS 3
10.0
normal
column-rule
CSS 3
10.0
medium none
column-width
CSS 3
10.0
auto
columns
CSS 3
10.0
auto
content
counter-increment
counter-reset
cursor
direction
display
CSS 2
CSS 2
CSS 2
CSS 2
CSS 2
CSS 2
8.0
8.0
8.0
6.0
6.0
6.0

none
none
auto
ltr
inline

(
),
,
display

inline-block

(
),
,
display

inline-block

(
),
,
display

inline-block

(
),
,
display

inline-block

(
),
,
display

inline-block

4. CSS
empty-cells
. CSS
CSS 2
IE
8.0

show
float
CSS 1
6.0
none
font
CSS 1
6.0
font-family
CSS 1
6.0
font-size
font-stretch
font-style
font-variant
font-weight
height
CSS 1
CSS 2
CSS 1
CSS 1
CSS 1
CSS 1
6.0
9.0
6.0
6.0
6.0
6.0
,
.
Times
New Roman
medium
normal
normal
normal
normal
auto
left
letter-spacing
line-height
list-style
CSS 2
CSS 1
CSS 1
CSS 1
6.0
6.0
6.0
6.0
auto
normal
normal
list-style-image
CSS 1
6.0
none
list-style-position
CSS 1
6.0
outside
<td>, <th>
,
display:
table-cell

(
)

<dd>,
<dt>, <li>, <ol>
<ul>,
,

display:list-item
<dd>,
<dt>, <li>, <ol>
<ul>,
,

display:list-item
<dd>,
<dt>, <li>, <ol>
<ul>,
,

display:list-item

505
506
4. CSS
4.1 ()
list-style-type
. CSS
CSS 1
IE
6.0

disc ( <ul>);
decimal ( <ol>)
<dd>,
<dt>, <li>, <ol>
<ul>,
,

display:list-item
margin
margin-bottom
margin-left
margin-right
margin-top
max-height
CSS 1
CSS 1
CSS 1
CSS 1
CSS 1
CSS 2
6.0
6.0
6.0
6.0
6.0
7.0
0
0
0
0
0
none
max-width
CSS 2
7.0
none
min-height
CSS 2
7.0
min-width
CSS 2
7.0
opacity
orphans
CSS 3
CSS 2
9.0
8.0
1
2
outline
outline-color
outline-style
outline-width
CSS 2
CSS 2
CSS 2
CSS 2
8.0
8.0
8.0
8.0
invert
none
medium

,

,

,

,

overflow
CSS 2
6.0
visible
overflow-x
CSS 3
6.0
visible
overflow-y
CSS 3
6.0
visible
padding
padding-bottom
padding-left
CSS 1
CSS 1
6.0
6.0
0
0
padding-right
padding-top
CSS 1
CSS 1
CSS 1
6.0
6.0
6.0
0
0
0
4. CSS
. CSS
IE
page-break-after
CSS 2
6.0
auto
page-break-before
CSS 2
6.0
auto
page-break-inside
CSS 2
8.0
auto
position
CSS 2
6.0
static
quotes
CSS 2
8.0

, .

"/"
resize
CSS 3
none
<textarea>
right
CSS 2
6.0
auto
tab-size
CSS 3*
table-layout
CSS 2
6.0
auto
<table>
,

display
table inlinetable
text-align
CSS 1
6.0
left
text-align-last
CSS 3
6.0
start
text-decoration
CSS 1
6.0
none
text-indent
CSS 1
6.0
text-overflow
CSS 3* 6.0
clip
text-shadow
CSS 2
10.0
none
text-transform
CSS 1
6.0
none
top
CSS 2
6.0
auto
unicode-bidi
CSS 2
6.0
normal
vertical-align
CSS 1
6.0
baseline
visibility
CSS 2
6.0
visible
507
508
4. CSS
4.1 ()
white-space
. CSS
CSS 1
IE
6.0

normal
widows
CSS 2
8.0
width
CSS 1
6.0
auto
word-spacing
word-wrap
writing-mode
CSS 1 6.0
CSS 3* 6.0
CSS 3 6.0
normal
normal
z-index
CSS 2
auto
6.0
* , CSS3.
. .
- 100%
.
.
.
.
.
.
.
, 192102, -, . (. ), 3, , . 7.
005-93, 2;
95 3005 .
24.09.12. 70100/16. . . . 41,280. 2000. 0000.
.
180004, , . , 34.
?
!
?
?
? ,

?
!

!

www.piter.com/ePartners

www.piter.com,
,

( www.piter.com)
!
.
10% ,
, - c
. ,
, 5%
.
, , 500 ,
. Web.Money.
:
http://www.piter.com/book.phtml?978538800282
http://www.piter.com/book.phtml?978538800282&refer=0000
, 0000

WWW.PITER.COM

Веб Мастеринг На 100

Загружено:

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

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

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

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

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

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

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

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

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

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

Веб Мастеринг На 100

Загружено:

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

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

32.988.

- 100%. .: , 2013. 512 .: .

3. JavaScript, jQuery, Ajax . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 272

5. CMS Drupal . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 428

, , HTML (HyperText Markup

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://

, DOCTYPE HTML5 : . , XHTML1.1, Transitional,

<meta http-equiv="content-type" content="text/html; charset=UTF-8" />

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/

<meta http-equiv="content-type" content="text/html; charset=UTF-8" />

. 1.1. HTML- UTF-8

phpDesignerPro , PHP, XHTML, HTML5, CSS3, JavaScript, XML, Perl, VBScript,

HTML Pad (http://www.soft.necromancers.ru/prog_4764.html)

Adobe Photoshop , Adobe Photoshop PSD:

XnView (http://xnview.com) CDR-;

CDR Explorer (http://sk1project.org)

SK1 (http://sk1project.org) Linux;

AI Adobe Illustrator; XnView Ghostscript (http://www.ghostscript.com);

. 1.12. Web Developer Mozilla Firefox

CSS CSS CSS-, -;

, , : table, thead, tbody, td, th, tr (.1.17);

: black (), blue () ..;

: #ff0000 (), #000000

. 1.19. (charmap.exe) Windows

. 1.27. span div

<meta http-equiv="content-type" content="text/html; charset=UTF-8" />

h2, h3. , , h1, h3,

, HTML : strong em.

, : a, abbr, acronym, address, applet,

<meta http-equiv="content-type" content="text/html; charset=UTF-8" />

<meta http-equiv="content-type" content="text/html; charset=UTF-8" />

. Windows , , , http mailto,

wmk:refresh Webmoney Keeper Classic;

. 1.44. dl, dt, dd

rowspan. colspan, rowspan,

<form method="get" action="">

input, textarea readonly

selected. value, option

radio type input:

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="460"

. 1.58. Flash () Flash-

<meta http-equiv="content-type" content="text/html; charset=UTF-8" />

progress 9- Internet Explorer.

Internet Explorer9 MP3, AAC;

div.intro p#outro CSS-, ,

<p> <strong></strong> </p>

clear, line-height, letter-spacing, text-decoration,

. 2.3. Adobe Photoshop

<meta http-equiv="content-type" content="text/html; charset=UTF-8" />

<link type="text/css" rel="stylesheet" href="css/style.css" media="all" />

HTML- CSS- style.css, css, , , ,

. 2.4. CSS () CSS ()

@media, CSS-, style.

<meta http-equiv="content-type" content="text/html; charset=UTF-8" />

<link type="text/css" rel="stylesheet" href="css/style.css" media="screen" />

phpDesignerPro CSS (.2.6):

CodeLobster PHP Edition (http://www.codelobster.com/).

Properties in Alphabetical Order ( ) CSS

. 2.14. display: block;

li 6 7 Internet Explorer block

. 2.15. margin inline-block

6 7 Internet Explorer inlineblock .

. 2.16. display: none;