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

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>

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

</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):
> &gt;;
< &lt;;

& &amp;.

. 1.18. HTML-

,
, .
( - )
, : &quot;.
, ,
. ,
&copy; HTML- ().

41

42

1. HTML

HTML- UTF-8, ,
, .
,
Windows charmap.exe. (.1.19).
. , .
HTML- ( Ctrl+V).

. 1.19. (charmap.exe) Windows

, :
&nbsp; , ; ,
, , ,
;
&euro; ,
() ?
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>

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

</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 (&lt;, &gt;, &amp;).
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>

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

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

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

</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"
width="32px" height="32px" /></a>
<a href="#"><img alt="mailru" src="img/btn_mailru.png" width="32px"
height="32px" /></a>
<a href="#"><img alt="vkontakte" src="img/btn_vkontakte.png"
width="32px" height="32px" /></a>
<a href="#"><img alt="twitter" src="img/btn_twitter.png"
width="32px" height="32px" /></a>
</div>
<div>
<a href="#"><img alt="" src="img/cart.png" width="66px"
height="59px" /></a>
<h3> </h3>
<div>0 / 0 .</div>
</div>
</div><!-- -->
<div><!-- -->
<div>
<a href="#"><img alt="" src="img/banner3.jpg" width="637px"
height="428px" /></a>
<a href="#"><img alt="" src="img/banner2.jpg" width="162px"
height="208px" /></a>
<a href="#"><img alt="" src="img/banner1.jpg" width="162px"
height="208px" /></a>
</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"
height="230px" /></a>
<a href="#"><img alt="" src="img/product2.jpg" width="173px"
height="230px" /></a>
<a href="#"><img alt="" src="img/product3.jpg" width="173px"
height="230px" /></a>
<a href="#"><img alt="" src="img/product4.jpg" width="173px"
height="230px" /></a>
<img alt="" src="img/rotator_right.png" width="23px"
height="43px" />
</div>
</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>

.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><!-- -->
<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"
width="32px" height="32px" /></a>
<a href="#"><img alt="mailru" src="img/btn_mailru.png" width="32px"
height="32px" /></a>
<a href="#"><img alt="vkontakte" src="img/btn_vkontakte.png"
width="32px" height="32px" /></a>
<a href="#"><img alt="twitter" src="img/btn_twitter.png"
width="32px" height="32px" /></a>
</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>
<a href="#"><img alt="" src="img/cart.png" width="66px"
height="59px" /></a>
<h3> </h3>
<div>0 / 0 .</div>
</div>
<div>


<ul>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
</ul>
</div>
<div>
<ul>
<li><a href="#"></a></li>
<li><a href="#"> </a></li>
<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>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
</ul>
</li>
<li><a href="#"> </a>
<ul>
<li><a href="#"> </a></li>
</ul>
</li>
<li><a href="#"> </a>
<ul>
<li><a href="#"></a></li>
<li><a href="#"></a></li>

83

84

1. HTML
<li><a href="#"></a></li>
<li><a href="#"></a></li>
</ul>
</li>
</ul>
</div>
<div>
<a href="#"><img alt="" src="img/banner3.jpg" width="637px"
height="428px" /></a>
<a href="#"><img alt="" src="img/banner2.jpg" width="162px"
height="208px" /></a>
<a href="#"><img alt="" src="img/banner1.jpg" width="162px"
height="208px" /></a>
</div>
<div>
<h3> </h3>
<div>
<img alt="" src="img/rotator_left.png" width="23px"
height="43px" />
<a href="#"><img alt="" src="img/product1.jpg" width="173px"
height="230px" /></a>
<a href="#"><img alt="" src="img/product2.jpg" width="173px"
height="230px" /></a>
<a href="#"><img alt="" src="img/product3.jpg" width="173px"
height="230px" /></a>
<a href="#"><img alt="" src="img/product4.jpg" width="173px"
height="230px" /></a>
<img alt="" src="img/rotator_right.png" width="23px"
height="43px" />
</div>
</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>

, , , ,
(.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>
<a href="/"><img alt="" src="img/logo.png" /></a>
</td><td>
<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"
width="32px" height="32px" /></a>
<a href="#"><img alt="mailru" src="img/btn_mailru.png"
width="32px" height="32px" /></a>
<a href="#"><img alt="vkontakte" src="img/btn_vkontakte.png"
width="32px" height="32px" /></a>
<a href="#"><img alt="twitter" src="img/btn_twitter.png"
width="32px" height="32px" /></a>
</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>
</td><td>
<div>
<a href="#"><img alt="" src="img/cart.png" width="66px"
height="59px" /></a>
<h3> </h3>
<div>0 / 0 .</div>
</div>
<div>

93

94

1. HTML
<ul>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
</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>
<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>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
</ul>
</li>
<li><a href="#"> </a>
<ul>
<li><a href="#"> </a></li>
</ul>
</li>
<li><a href="#"> </a>


<ul>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
</ul>
</li>
</ul>
</div>
</td><td>
<a href="#"><img alt="" src="img/banner3.jpg" width="637px"
height="428px" /></a>
</td><td>
<a href="#"><img alt="" src="img/banner2.jpg" width="162px"
height="208px" /></a>
<a href="#"><img alt="" src="img/banner1.jpg" width="162px"
height="208px" /></a>
</td>
</tr><tr>
<td colspan="2">
<div>
<h3> </h3>
<div>
<img alt="" src="img/rotator_left.png" width="23px"
height="43px" />
<a href="#"><img alt="" src="img/product1.jpg" width="173px"
height="230px" /></a>
<a href="#"><img alt="" src="img/product2.jpg" width="173px"
height="230px" /></a>
<a href="#"><img alt="" src="img/product3.jpg" width="173px"
height="230px" /></a>
<a href="#"><img alt="" src="img/product4.jpg" width="173px"
height="230px" /></a>
<img alt="" src="img/rotator_right.png" width="23px"
height="43px" />
</div>
</div>
<div>

95

96

1. HTML
<h3>Wildberries ,
</h3>
<p>- Wildberries
, .
, , .</p>
<p> ,
.
, ,
.
.</p>
<p>- , Wildberries.ru
.</p>
</div>
</td>
</tr></table><!-- -->
<div><!-- -->
<p>Copyright 2005-2011 Stracci.ru - ,
. .</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>
<option value="2"></option>
<option value="3"></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="">
<option value="1"></option>
<option value="2"></option>
<option value="3"></option>
</optgroup>
<optgroup label="">
<option value="777"></option>
<option value="778"></option>
</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" />
.
,
:
<input type="radio" name="form_radio" value="1" />
<input type="radio" name="form_radio" value="2" />
<input type="radio" name="form_radio" value="3" />
, ,
. ,
,
. - ,
label:
<input type="radio" name="form_radio" id="form_radio1" value="1"
/><label for="form_radio1"> 1</label>
<input type="radio" name="form_radio" id="form_radio2" value="2"
/><label for="form_radio2"> 2</label>
<input type="radio" name="form_radio" id="form_radio3" value="3"
/><label for="form_radio3"> 3</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" />
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="flash/pl.swf"
width="460" height="379">
<param name="wmode" value="transparent" />
<!--<![endif]-->
<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>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</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>

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

</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>
<p class="tel"> </p>
</div>
<p class="tel"> </p>
</div>
<p class="tel"> </p>
</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>
,
Internet Explorer6 .

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>
Internet Explorer6 .
:lang() , ( lang ,
).
:

ru ;

en ;

de ;

fr ;

it .

.
, , .
.
:after (
Unicode) -.
(.2.1):
:after{
content: "";
}
Internet Explorer6 .
:before ( Unicode) -. :
:before{
content: "";
}

Internet Explorer6 .
: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 .
. , 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>

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

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

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

<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{
font-family: Arial, Tahoma, Myriad, sans-serif;
font-weight: normal;
margin: 0;

151

152

2. CSS

padding: 0;
vertical-align: top;
}
p, div, td, input, textarea{
color: #000;
font-size: 12pt;
line-height: 1.3em;
}
Longest Property to Shortest () CSS
, , ( ,
):
body{
font-family: Arial, Tahoma, Myriad, sans-serif;
font-weight: normal;
vertical-align: top;
padding: 0;
margin: 0;
}
p, div, td, input, textarea{
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-

:
<!--[if IE]><![endif]--> , Internet Explorer;
<!--[if IE 5]><![endif]--> , Internet Explorer5 (
);
<!--[if IE 5.0]><![endif]--> , Internet Explorer5.0 ( );
<!--[if IE 5.5]><![endif]--> , Internet Explorer5.5 ( );
<!--[if IE 6]><![endif]--> , Internet Explorer6;
<!--[if IE 7]><![endif]--> , Internet Explorer7;
<!--[if IE 8]><![endif]--> , Internet Explorer8;
<!--[if IE 9]><![endif]--> , Internet Explorer9;
<!--[if lt IE ]><![endif]--> , Internet Explorer
, ; , ;
<!--[if lte IE ]><![endif]--> , Internet Explorer
, ;
<!--[if gt IE ]><![endif]--> , Internet Explorer
, ;
<!--[if gte IE ]><![endif]--> , Internet Explorer
, .
HTML.
CSS-.
, ,
CSS- Internet Explorer. :

155

156

2. CSS

<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="ie6.css"

/>

<![endif]-->
</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. .
- .
6- 7- Internet Explorer.
table. table, table.
6- 7- Internet Explorer.
table-caption. caption.
6- 7- Internet Explorer.
table-cell. td th (.2.17).
6- 7- Internet Explorer.
table-footer-group. tfoot.

169

170

2. CSS

. 2.17. display: table-cell;

6- 7- Internet Explorer.
table-header-group. thead.
6 7 Internet Explorer.
table-row-group. tbody.
6 7 Internet Explorer.
table-row. tr.
6 7 Internet Explorer.
table-column-group.
colgroup.
6 7 Internet Explorer.
table-column. col.
, table-column,
vertical-align, .
, -
, table-column

(, JavaScript).
6- 7- Internet Explorer.

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;
border: 1px solid #000;
-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: 1px solid #000;
-moz-border-radius: 7px;
-khtml-border-radius: 7px;
-webkit-border-radius: 7px;
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;
border: 1px solid #000;
-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;
border: 1px solid #000;
-moz-box-shadow: 0px 3px 7px #02041c;
-webkit-box-shadow: 0px 3px 7px #02041c;
box-shadow: 0px 3px 7px #02041c;
behavior: url("css/PIE.htc");

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;

-moz-border-radius: 7px;
-khtml-border-radius: 7px;
-webkit-border-radius: 7px;
border-radius: 7px;
-moz-box-shadow: 0px 3px 7px #02041c;
-webkit-box-shadow: 0px 3px 7px #02041c;
box-shadow: 0px 3px 7px #02041c;
behavior: url("css/PIE.htc");
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">&nbsp;</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">&nbsp;</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; /* */
position: relative; /* */
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; /* */
position: relative; /* */
margin-right: -193px; /* */
}
CSS-, CSS-
:
#main_content{
float: right; /* */
width: 100%; /* */
}
CSS- (
right_sidebar):
#right_sidebar{
width: 182px; /* */
float: right; /* */

215

216

2. CSS

position: relative; /* */
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-
Internet Explorer );
lower-roman , i, ii, iii, iv, v...
upper-alpha , A, B, C, D...
upper-latin upper-alpha (6- 7-
Internet Explorer );
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">&nbsp;</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; /* */
list-style-type: none; /* */
list-style-image: none; /* */
padding: 0 7px; /* */
}
.
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.

"

&#34;

\0022

'

&#39;
&#171;
&laquo;
&#187;
&raquo;
&#8216;
&#8217;
&#8220;
&#8221;
&#8222;

\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 :
Cufon.replace('', { fontFamily: ' ', hover:
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:
Cufon.replace('', { fontFamily: ' ', hover:
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{
display: block; /* */
float: left; /* */
list-style-type: none; /* */
list-style-image: none; /* */
padding: 0 7px; /* */
}
. 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{
display: block; /* */
float: left; /* */
list-style-type: none; /* */
list-style-image: none; /* */
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.
6 7 Internet Explorer.
,
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;
: ;
: ( ), , display inline-block;
: column-gap: <> | normal.

column-rule
:
: medium none;
: ;
: ( ), , display inline-block;

: column-rule: <border-width> || <border-style> ||


<>.
.
border.

column-width
:
: auto;
: ;

CSS3

: ( ), , display inline-block;
: column-width: <> | auto.

( ,
).

columns
:
: auto;
: ;
: ( ), , display inline-block;
: 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

background-attachment
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

3. JavaScript, jQuery, Ajax

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. JavaScript, jQuery, Ajax

. 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

3. JavaScript, jQuery, Ajax

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

3. JavaScript, jQuery, Ajax

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

3. JavaScript, jQuery, Ajax

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

3. JavaScript, jQuery, Ajax

. 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

3. JavaScript, jQuery, Ajax

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

3. JavaScript, jQuery, Ajax

+. +. , . :
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. JavaScript, jQuery, Ajax


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

3. JavaScript, jQuery, Ajax

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

3. JavaScript, jQuery, Ajax

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. JavaScript, jQuery, Ajax


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

3. JavaScript, jQuery, Ajax


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


,
, .
:
[]=;
,
.
.
- ,
, . :
var myArray = new Array(23, "hello", true);
myArray[0] = 777; // 23, 777
myArray[23] = 11; // 23


length,
(, ). ,
: .length. :
var myArray = new Array(23, "hello", true);
var tmp = myArray.length; // tmp 3

JavaScript

myArray[23] = 77;
var tmp2 = myArray.length; // tmp2 24
, .
. 24. , length
,
, .
, .
,
.
, , , length:
var myArray = new Array(23, "hello", true);
myArray[23] = 77;
myArray[myArray.length] = 33; // myArray[24] 33
, length ,
.
, ( , ).
, .


,
, . , :
push() (
_[_.length]);
pop() , ( ),
;
unshift()
;
shift() , , .

301

302

3. JavaScript, jQuery, Ajax

:
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

3. JavaScript, jQuery, Ajax

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

3. JavaScript, jQuery, Ajax

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

3. JavaScript, jQuery, Ajax

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

3. JavaScript, jQuery, Ajax

:
=()?(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
}else if(var1 == 3){

JavaScript

3
}else if(var1 == 4){
4
}else if(var1 == 5){
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

3. JavaScript, jQuery, Ajax

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

3. JavaScript, jQuery, Ajax

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

3. JavaScript, jQuery, Ajax

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

3. JavaScript, jQuery, Ajax

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

3. JavaScript, jQuery, Ajax

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

3. JavaScript, jQuery, Ajax

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

3. JavaScript, jQuery, Ajax

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

3. JavaScript, jQuery, Ajax

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. JavaScript, jQuery, Ajax

.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. JavaScript, jQuery, Ajax


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. JavaScript, jQuery, Ajax


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

3. JavaScript, jQuery, Ajax

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. JavaScript, jQuery, Ajax

. 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

3. JavaScript, jQuery, Ajax

-
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>
<meta http-equiv="content-type" content="text/html;
charset=UTF-8" />
<script type="text/javascript" src="js/addons.js"> </
script>

DOM

<script type="text/javascript">
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

3. JavaScript, jQuery, Ajax

:
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

3. JavaScript, jQuery, Ajax

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

3. JavaScript, jQuery, Ajax

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

3. JavaScript, jQuery, Ajax

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

3. JavaScript, jQuery, Ajax

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>
<meta http-equiv="content-type" content="text/html;
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

3. JavaScript, jQuery, Ajax

JS- HTML, :
jQuery(document).ready(function($){
// JS-,
// -
});
jQuery:
<script type="text/javascript" src="js/jquery-1.7.2.min.js">
</script>
<script type="text/javascript">
jQuery(document).ready(function($){
window.alert(jQuery.browser.mozilla);
});
</script>
jQuery, :
<script type="text/javascript" src="js/jquery-1.7.2.min.js">
</script>
<script type="text/javascript">
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

3. JavaScript, jQuery, Ajax

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

3. JavaScript, jQuery, Ajax

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 .
, :
jQuery('.test, .test2').each(
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

3. JavaScript, jQuery, Ajax

// -
}
}
css CSS-. css : css("":"",
"":""). :
jQuery('.test, .test2').each(
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

3. JavaScript, jQuery, Ajax

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

3. JavaScript, jQuery, Ajax

:
<div id="header"><div></div></div>
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>");
:
<div id="header"><div></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

3. JavaScript, jQuery, Ajax


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

3. JavaScript, jQuery, Ajax

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();
, - :
<script type="text/javascript">
function anim(){
jQuery("#header").hide();
}
</script>
<a href="javascript:void(0);" onclick="anim();"></a>
<div id="header"><strong></strong></div>
show hide - . .
, ,
/ :
jQuery("#header").hide(777);
:
hide ;

show .

365

366

3. JavaScript, jQuery, Ajax

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

3. JavaScript, jQuery, Ajax

, , :
...
<script type="text/javascript">
jQuery(document).ready(function($){
jQuery('#clickme').bind('click', function(){
jQuery("#header").toggle(777);
});
});
</script>
</head>
<body>
<a id="clickme" href="javascript:void(0);"></a>
<div id="header"><strong></strong></div>
</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. JavaScript, jQuery, Ajax


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. JavaScript, jQuery, Ajax


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. JavaScript, jQuery, Ajax


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. JavaScript, jQuery, Ajax


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. JavaScript, jQuery, Ajax


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. JavaScript, jQuery, Ajax


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. JavaScript, jQuery, Ajax


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. JavaScript, jQuery, Ajax


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. JavaScript, jQuery, Ajax


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. JavaScript, jQuery, Ajax


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. JavaScript, jQuery, Ajax


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

3. JavaScript, jQuery, Ajax

, -,
, 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 type="text/javascript" src="js/jquery-1.7.2.min.js">
</script>
<script type="text/javascript" src="js/jquery.mousewheel.min.
js"> </script>
<script type="text/javascript" src="js/jScrollPane.js"> </
script>
<script type="text/javascript">
jQuery(document).ready(function($){
$('.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. JavaScript, jQuery, Ajax

. 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(document).ready(function($){
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(document).ready(function($){
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[]">
<option value="0"></option>
<option value="7"></option>
<option value="3"></option>
<option value="4"></option>
</select>
- . dropdownchecklist
-:

395

396

3. JavaScript, jQuery, Ajax

jQuery(document).ready(function($){
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(document).ready(function($){
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

3. JavaScript, jQuery, Ajax

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>
<p><a class="group1" href="img/pict2.jpg" title="2"
> 2</a></p>

<p><a class="group1" href="img/pict3.jpg" title="3"


> 3</a></p>

. 3.15.

JavaScript-, colorbox :
jQuery(document).ready(function($){
$(".group1").colorbox({rel:'group1'});
});
, .3.16.

(actions.js)
-
(.3.17). , .

399

400

3. JavaScript, jQuery, Ajax

. 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>
<td class="tdwinitem tdwinitem2"><div class="posttd">
<div class="winitem"><span id="actionhour"></span></div><div
class="windesc"></div></div></td>
<td class="tdwinitem tdwinitem3"><div class="posttd">
<div class="winitem"><span id="actionmin"></span></div><div
class="windesc"></div></div></td>
<td class="tdwinitem tdwinitem4"><div class="posttd">
<div class="winitem"><span id="actionsec"></span></div><div
class="windesc"></div></div></td>
</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

3. JavaScript, jQuery, Ajax

DD_belatedPNG.js.
,
HTML, , CSS ( ).
http://www.dillerdesign.com/experiment/DD_belatedPNG/.
. head HTML :
<!--[if IE 6]>
<script src="js/DD_belatedPNG.js"></script>
<script> DD_belatedPNG.fix('#logo-container, .picts'); </
script>
<![endif]-->
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(document).ready(function($){
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

3. JavaScript, jQuery, Ajax

, . , :
<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&amp;fromb=1"><img src="t_0001.jpg"
alt="Anna Sui" title="Anna Sui" width="181" height="101" /></
a></span></div></li>
<li><div class="views-field-tid"><span class="field-content"><a
href="/catalog?taxonomy_3=6&amp;fromb=1"><img src="t_0002.jpg"
alt="Armani" title="Armani" width="181" height="101" /></a></
span></div></li>
<li><div class="views-field-tid"><span class="field-content"><a
href="/catalog?taxonomy_3=9&amp;fromb=1"><img src="t_0003.jpg"
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&amp;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>
<li><div class="product_item"><a href="/jsnode/13" rel="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>
<li><div class="product_item"><a href="/jsnode/12" rel="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 &nbsp;).
numeric character reference "..." doesn't end in ';'
(, &#8212
&#8212;).
unescaped & or unknown entity "&..."
HTML- &, . & &amp;.
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
. &nbsp;
- .
<> 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- >, &gt;:
<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.

&para;
&sect;
&copy;
&reg;
&trade;
&deg;
&plusmn;
&frac14;
&frac12;
&frac34;
&times;
&divide;
&fnof;
&permil;

&#182;
&#167;
&#169;
&#174;
&#8482;
&#176;
&#177;
&#188;
&#189;
&#190;
&#215;
&#247;
&#402;
&#8240;

Copyright

2.2.

&Alpha;
&Beta;
&Gamma;
&Delta;
&Epsilon;
&Zeta;
&Eta;
&Theta;
&Iota;
&Kappa;
&Lambd;
&Mu;
&Nu;
&Xi;
&Omicron;
&Pi;
&Rho;
&Sigma;
&Tau;
&Upsilon;

&#913;
&#914;
&#915;
&#916;
&#917;
&#918;
&#919;
&#920;
&#921;
&#922;
&#923;
&#924;
&#925;
&#926;
&#927;
&#928;
&#929;
&#931;
&#932;
&#933;

2.

&Phi;
&Chi;
&Psi;
&Omega;
&alpha;
&beta;
&gamma;
&delta;
&epsilon;
&zeta;
&eta;
&theta;
&iota;
&kappa;
&lambda;
&mu;
&nu;
&xi;
&omicron;
&pi;
&rho;
&sigmaf;
&sigma;
&tau;
&upsilon;
&phi;
&chi;
&psi;
&omega;

&#934;
&#935;
&#936;
&#937;
&#945;
&#946;
&#947;
&#948;
&#949;
&#950;
&#951;
&#952;
&#953;
&#954;
&#955;
&#956;
&#957;
&#958;
&#959;
&#960;
&#961;
&#962;
&#963;
&#964;
&#965;
&#966;
&#967;
&#968;
&#969;

2.3.

&uml;
&iexcl;
&iquest;
&Agrave;
&Aacute;
&Acirc;

&#168;
&#161;
&#191;
&#192;
&#193;
&#194;




A
A
A

489

490

2.
2.3 ()

&Atilde;
&Auml;
&Aring;
&AElig;
&Ccedil;
&Egrave;
&Eacute;
&Ecirc;
&Euml;
&Igrave;
&Iacute;
&Icirc;
&Iuml;
&ETH;
&Ntilde;
&Ograve;
&Oacute;
&Ocirc;
&Otilde;
&Ouml;
&Oslash;
&Ugrave;
&Uacute;
&Ucirc;
&Uuml;
&Yacute;
&THORN;
&szlig;
&agrave;
&aacute;
&acirc;
&atilde;
&auml;
&aring;
&aelig;
&ccedil;
&egrave;
&eacute;

&#195;
&#196;
&#197;
&#198;
&#199;
&#200;
&#201;
&#202;
&#203;
&#204;
&#205;
&#206;
&#207;
&#208;
&#209;
&#210;
&#211;
&#212;
&#213;
&#214;
&#216;
&#217;
&#218;
&#219;
&#220;
&#221;
&#222;
&#223;
&#224;
&#225;
&#226;
&#227;

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

&#228;
&#229;
&#230;
&#231;
&#232;
&#233;

a
a
ae
c
e
e

2.

&ecirc;
&euml;
&igrave;
&iacute;
&icirc;
&iuml;
&eth;
&ntilde;
&ograve;
&oacute;
&ocirc;
&otilde;
&ouml;
&oslash;
&ugrave;
&uacute;
&ucirc;
&uuml;
&yacute;
&thorn;
&yuml;
&weierp;
&alefsym;
&Yuml;
&scaron;
&Scaron;
&oelig;
&OElig;

&#234;
&#235;
&#236;
&#237;
&#238;
&#239;
&#240;
&#241;
&#242;
&#243;
&#244;
&#245;
&#246;
&#248;
&#249;
&#250;
&#251;
&#252;
&#253;
&#254;
&#255;
&#8472;
&#8501;
&#376;
&#353;
&#352;
&#339;
&#338;

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.

&larr;
&uarr;
&rarr;
&darr;
&harr;
&crarr;
&lArr;

&#8592;
&#8593;
&#8594;
&#8595;
&#8596;
&#8629;
&#8656;

491

492

2.
2.4 ()

&uArr;

&#8657;

&rArr;

&#8658;

&dArr;

&#8659;

&hArr;

&#8660;

&#9668;

&#9650;

&#9658;

&#9660;

2.5.

&spades;

&#9824;

&clubs;

&#9827;

&hearts;

&#9829;

&diams;

&#9830;

&quot;

&#34;

"

&amp;

&#38;

&

&lt;

&#60;

<

&gt;

&#62;

>

&bull;

&#8226;

&oline;

&#8254;

&Dagger;

&#8225;

&dagger;

&#8224;

&tilde;

&#732;

&circ;

&#710;

&brvbar;

&#166;

&ordf;

&#170;

&ordm;

&#186;

&middot;

&#183;

&cedil;

&#184;

2.6.

&hellip;

&#8230;
&#8242;

...

&prime;
&Prime;

&#8243;

2.
2.7.

&ndash;
&mdash;
&lsquo;
&rsquo;
&sbquo;
&ldquo;
&rdquo;
&bdquo;
&laquo;
&raquo;
&rsaquo;
&lsaquo;
&shy;
&acute;

&#8211;
&#8212;
&#8216;
&#8217;
&#8218;
&#8220;
&#8221;
&#8222;
&#171;
&#187;
&#8250;
&#8249;
&#173;
&#180;

2.8.

&image;
&real;

&#8465;
&#8476;

&forall;
&part;
&exist;
&empty;
&nabla;

&#8704;
&#8706;
&#8707;
&#8709;
&#8711;

&isin;
&notin;
&ni;
&prod;
&sum;
&minus;
&lowast;
&radic;
&prop;
&infin;
&ang;
&and;
&or;

&#8712;
&#8713;
&#8715;
&#8719;
&#8721;
&#8722;
&#8727;
&#8730;
&#8733;
&#8734;
&#8736;
&#8743;
&#8744;




N-
N-

493

494

2.
2.8 ()

&cap;

&#8745;

&cup;

&#8746;

&int;

&#8747;

&there4;

&#8756;

&sim;

&#8764;

&cong;

&#8773;

&asymp;

&#8776;

&ne;

&#8800;

&equiv;

&#8801;

&le;

&#8804;

&ge;

&#8805;

&sub;

&#8834;

&sup;

&#8835;

&nsub;

&#8836;

&sube;

&#8838;

&supe;

&#8839;

&oplus;

&#8853;

&otimes;

&#8855;

&perp;

&#8869;

&sdot;

&#8901;

&lceil;

&#8968;

&rceil;

&#8969;

&lfloor;

&#8970;

&rfloor;

&#8971;

&lang;

&#9001;

&rang;

&#9002;

&not;

&#172;

&sup2;

&#178;

&sup3;

&#179;

&micro;

&#181;

&sup1;

&#185;

2.9.

&ensp;
&emsp;
&thinsp;

&#8194;
&#8195;
&#8201;

2.

&zwnj;
&zwj;
&nbsp;

&#8204;
&#8205;
&#160;




2.10.

&pound;
&euro;
&cent;
&curren;
&yen;

&#163;
&#8364;
&#162;
&#164;
&#165;

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