HTML, XHTML I Css Na 100 Proc

32.988.
02-018
004.738.5
32
32
.
HTML, XHTML CSS 100 %. .: , 2010. 384 .: . (
100%).
ISBN 978-5-49807-594-5
? ,
, ? , : . , . HTML XHTML,
CSS. , , , .
, .
!
32.988.02-018
004.738.5
. .
, , , . , ,
, .
ISBN 978-5-49807-594-5
, 2010

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
12
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
14
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
14
1. HTML- . . . . . . . . . . . . . . . . . . . . .
15
2. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
43
3. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
78
4. . . . . . . . . . . . . .
96
5. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
126
6. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
141
7. CSS . . . . . . . . . . . . . . .
172
8. CSS . . . . . . . . . . . . . .
196
9. HTML- CSS . . . . . . .
217
10. HTML . . . . . . . . . . . . . . . . . . . . . .
265
11. JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
305
12. JavaScript . . . . . . . . . . . . . . . . . . . . . . .
354
13. XHTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
371

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
1. HTML- . . . . . . . . . . . . . . . . . . . . .
1.1. HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
1.2. HTML- . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
HEAD . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
TITLE . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
META . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
STYLE . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
LINK . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
SCRIPT . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
BASE . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
BODY . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
2. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
15
16
16
17
17
18
19
20
21
23
29
35
36
37
39
42
42
43
2.1. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44
2.2. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46
2.3. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47
2.4. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
2.5. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
2.6. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
50
50
53
56
58
59
59
60
61
64
64
68
72
76
77
3. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
78
79
81
81
82
86
88
90
91
93
93
95
3.1. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
3.2. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
3.3. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
3.4. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
3.5. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
3.6. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
3.7. . . . . . . . . . . . . . . . . . . . . . . . . . . .
3.8. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
3.9. . . . . . . . . . . . . . . . . . . . . . . . . . .
3.10. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
4. . . . . . . . . . . . . .
96
4.1. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 98
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 100
. . . . . . . . . . . . . . . . . . . . . . . . . . 103
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 104
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 105
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 107
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 108
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 109
4.2. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
OBJECT . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
PARAM . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Flash- . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
OBJECT . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
109
110
111
111
115
116
119
121
122
123
125
5. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
126
127
129
131
132
135
135
137
138
139
5.1. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
5.2. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
5.3. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
5.4. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
5.5. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
5.6. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
5.7. . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
5.8. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
6. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
6.1. FORM . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
6.2. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
INPUT . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
141
142
147
147
149
150
151
152
154
156
157
158
159
163
165
171
7. CSS . . . . . . . . . . . . . . .
172
7.1. CSS HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 173
7.2. CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 176
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 177
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 177
@ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 177
7.3. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 178
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 178
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 179
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 180
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 180
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 181
ID- . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 182
7.4. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 183
:first-child . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 184
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 185
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 185
:lang . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 186
:first-line . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 187
:first-letter . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 188
:before :after . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 190
7.5. @media . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 191
7.6. !important . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 193
7.7. @import . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 194
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 195
8. CSS . . . . . . . . . . . . . .
8.1. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
8.2. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
8.3. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
196
199
199
201
203
203
204
205
206
208
209
209
210
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
9. HTML- CSS . . . . . . .
211
213
213
214
215
215
216
217
9.1. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 218
9.2. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 221
:before :after . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 222
content . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 222
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 223
9.3. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 225
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 227
display: none . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 227
C . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 227
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 233
9.4. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 239
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 240
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 240
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 242
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 244
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 244
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 245
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 245
. . . . . . . . . . . . . . . . . . . . . . . . . . . . 246
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 246
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 247
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 248
9.5. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 248
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 248
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 249
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 251
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 251
9.6. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 252
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 252
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 254
9.7. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
9.8. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
255
255
256
256
257
257
258
259
261
263
264
10. HTML . . . . . . . . . . . . . . . . . . . . . .
265
266
268
270
270
280
284
286
288
291
291
298
304
10.1. HTML- . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
10.2. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
10.3. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Window . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Navigator . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Screen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
History . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Location . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
10.4. (DOM) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Document . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
11. JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
11.1. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
alert() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
prompt() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
confirm() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
11.2. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
11.3. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
305
306
307
308
309
309
309
310
311
315
317
319
319
320
10
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
11.4. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
11.5. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
11.6. JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Global . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
String . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Number . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Boolean . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Array . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Function . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Date . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Math . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
RegExp . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Object . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
322
324
324
325
325
326
327
327
331
336
337
342
343
343
344
346
346
347
347
348
351
352
353
353
12. JavaScript . . . . . . . . . . . . . . . . . . . . . . .
354
355
355
356
356
357
358
358
359
363
365
367
369
12.1. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
12.2. HTML- . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . .
SCRIPT . . . . . . . . . . . . . . . . . . . .
12.3. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
12.4. FrontPage . . . . . . . . . . . . . . . . . . . . . . . . . . .
12.5. MicrosoftScriptEditor . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
13. XHTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
371
13.1. XHTML- . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 374
13.2. XHTML HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 377
. . . . . . . . . . . . . . . . . . . . . . . . . 377
. . . . . . . . . . . . . . . . . . . . . . . . . . . . 377
. . . . . . . . . . . . . . 378
. . . . . . . . . . . . . . . . 379
. . . . . . . . . . . . . . . . . . . . . . . . . 379
XHTML . . . . . 379
13.3. XHTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 380
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 382
11

XX.
, .
HTML (HyperText Markup Language ), , .
HTML
XHTML (eXtensible HyperText Markup Language ), XML (eXtensible Markup
Language ). XML
(HTML XHTML) ,
HTML . XHTML,
HTML, ,
-, XHTML.
HTML -
() .
,
. , ,
, . . , HTML- .
(script). JavaScript.
, , .
. HTML-
JavaScript, -. ,
.
HTML. , HTML-,
-.
HTML ( ), , HTML.

HTML. , ,
- (- ). -,
,
.
.
HTML- HTML-. ,
- , . ,
.
- ,
Windows, , ..
-
CSS (Cascading Style Sheets ) JavaScript.
JavaScript, , -,
.
JavaScript - . , HTML-.
CSS , , Word.

, , .
CSS .
-
-,
,
-, .
, -,
.
13
14

,
alexanderzhadaev@sigmaplus.mcdir.ru
www.sigmaplus.mcdir.ru. , .

,
gromakovski@minsk.piter.com ( , ).
!
http://www.piter.com
.

HTML-
1.1. HTML
1.2. HTML-
16
1. HTML-
-
HTML. , , HTML-.
HTML- .
1.1. HTML
HTML- ,
. .
HTML . , . . ,
, .
, <P>.
. .
, : </P>.
,
. , , .
:
, . , / ,
.

P, :
<P> </P>
, . IMG, , ,
. ,
.
, ,
,
1.2. HTML-
. , , . .
, ,
. , , .
, align P:
<P align="left"> </P>
<P align="right"> </P>
. ,
.
HTML,
.
. , HTML- , .
1.2. HTML-

,
.
1.1 , HTML- :
;
;
.
1.1. DOCTYPE
<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<TITLE> HTML</TITLE>
17
18
1. HTML-
... ...
</HEAD>
<BODY>
... ...
</BODY>
</HTML>

HTML-
:
<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN" "http://www.w3.org/
TR/html4/loose.dtd">
HTML-.
,
, DOCTYPE.
HTML , HTML.
PUBLIC , HTML.
"-//W3C//DTDHTML4.01Transitional//EN"
, .
,
, , . HTML 4.01,
.
"http://www.w3.org/TR/html4/loose.dtd" URL- ,
, HTML4.01.
(Document Type Definition,
DTD), , XHTML.
, ,
, HTML,
. HTML4.01 W3C DTD.
DTD, , HTML-
HTML4.01.
:
1.2. HTML-
<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01//EN" "http://www.w3.org/TR/html4/
strict.dtd">
(transitional) DTD,
, HTML4.01 .
:
<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN" "http://www.w3.org/
TR/html4/loose.dtd">
DTD HTML4.01 . ,
: - , , HTML. :
<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Frameset//EN" "http://www.w3.org/
TR/html4/frameset.dtd">
HTML4.01. HTML-, , , ,
, W3C
DOCTYPE .
: DTD
? HTML . DTD , HTML4.01
,
DTD.
,
.
HTML
HTML 4.01 <HTML>. ,
<HTML> </HTML>.
HTML4.01 , W3C . XHTML- HTML .
HTML .
lang .
dir (RTL ,
LTR ).
19
20
1. HTML-
version HTML, . , .
title .
1.2 HTML ,
.
1.2. HTML
<html lang="ru" dir="LTR" title=" ">
<--! -->
</html>
.1.1 HTML.
, dir

. , IE6 Opera9
, .
, (, ),
.
.1.1.
title

HEAD
,
. , HEAD, ,
.
,
<HEAD> </HEAD>, ,
. ,
HEAD, : , ,
, .
HEAD , HTML,
profil. ,
<META> . -
1.2. HTML-
<META>.
HTML.
, HEAD,
.1.1.
1.1. , HEAD
TITLE
META
SCRIPT
LINK
STYLE
BASE
OBJECT
, ,
. ,

(..12)
(..79)
(..79)

(..4)
,
. .1.1,
, .
, .
TITLE
,
. HTML4.01 HEAD TITLE, .
</TITLE>. ,
, .
, ,
. , , , .
:
. , .
21
22
1. HTML-
,
, .
-
. . ,
(\ / : * ? " < > |), .

, TITLE.
. ,
, , .
1.3 TITLE.
1.3. TITLE
<html>
<head>
<title> </title>
<--! -->
</head>
<--! -->
</html>
, .
.1.2 1.3. ,
.
.1.2.
1.2. HTML-
, , HEAD.
META
META . ,
. , HTML-,
META :
<META name="Author" content=" ">
name Author,
content " ".
META: name , content .
name http-equiv,
-. ,
:
<META http-equiv="Expires" content="Sun, 1 Nov 2009 16:20:47 GMT">
, . .
HEAD META, . .1.2
http-equiv. , HTML4.01 , -.
META .
1.2. http-equiv

content-type
.
expires
. ,
,
pragma
,

refresh

,

23
24
1. HTML-
1.2 ()

content-language
content-script-type
content-style-type
, lang HTML
,

.
1.4 , http-equiv
.
1.4. http-equiv
<html title=" " lang="ru">
<head>
<title> META</title>
<meta http-equiv="Content-Type" content="text/html" charset="windows-1251" />
<meta http-equiv="refresh" content="10" URL="http:\\test.ru" />
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="expires" content="Sun, Oct 2010 10:09:00 GMT+3" />
</head>
</html>
, http-equiv ,
content.
content-type, ,
. , .
refresh ,
.
,
. 1.4 10
test.ru.
. , ,
.
content (.1.3).
1.2. HTML-
1.3. content http-equiv
http-equiv content
content-type
ISO-8859-1
Windows-1251
KOI8-r
cp866
Windows-1252
Windows-1250
expires
Sun, Oct 2010 10:09:00
GMT+3
pragma
no-cache
refresh

, URL
content-language
content-script-type
content-style-type
de
el
en
en-GB
en-US
en-cockney
es
fr
it
i-navajo
ja
he
nl
ru
pt
zh
text/javascript
text/perlscript
text/tcl
text/vbscript
text/css
Latin-1
(Windows)
(8-)
(DOS)
(Windows)
(Windows)

[RFC850],
.
, ,

,

,
,
,
JavaScript
PerlScript
TCL
VBScript
CSS
25
26
1. HTML-
content, , .
content-type ( ), .
name, http-equiv, , . ,
.
, .
.1.4 name.
1.4. name

keyword
description
author
document-state
resource-type
revisit
robots
subject
URL
, .

. ,
,
Document,

(,
,
, )
.1.4,
. , ,
, META.
, META,
. ,
, ,
.
, .
, .
-
,
.
1.2. HTML-
1.5 META
.
1.5. META
<html xmlns="http://www.w3.org/1999/xhtml" title=" " lang="ru" xml:
lang="ru">
<head>
<title> META</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="expires" content="Sun, 10 Oct 2010 10:09:00 GMT+3" />
<meta name="author" content="" />
<meta name="description" content=" META
" />
<meta name="document-state" content="Dynamic" />
<meta name="keywords" content=", , , " lang="ru" />
<meta name="keywords" content="tags, meta, index, search" lang="en" />
<meta name="Resource-Type" content="Document" />
<meta name="Revisit" content="2" />
<meta name="Robots" content="noindex,follow" />
<meta name="URL" content="http:\\test.test" />
</head>
</html>
1.5 . .
author . ,
author copyright, content . , content. lang.
description . ,
, , . ,
, ,
.
dynamic document-state ,
,
.
27
28
1. HTML-
keywords:
, . ,
, lang.
, , .
,
, . , ,
.
. , ,
, . 200250, keyword.
,
.
,
, . ,
, ,
, , .
, ,
. , , .
resource-type , . , resource-type
document.
revisit. , . ,
, .
robots .
, ,
.
1.2. HTML-
.1.5 ,
.
1.5. content robots
index
noindex
follow
nofollow
all
none

,

,

URL,
test.ru.
, , META,
.
, ,
.
, META , ,
. .
STYLE
, . . STYLE lang title, type media.
type , , media , HTML-.
HTML4.01 CSS,
.7. , . ,
W3C
HTML- , ,
, .
, CSS.
29
30
1. HTML-
(CSS) ,
HTML- . ,
, HTML- .
, ,
, HTML-,
.
STYLE CSS . CSS.
, type STYLE text/css, CSS. CSS-:
<style type="text/css">
p.style {
color:#CC0000;
background:#9999CC;
word-spacing:20px;
}
p.style , P, , style,
(color:#CC0000), (background:#9999CC)
(word-spacing:20px).
- ,
class ,
:
<p class="style">
style
</p>
, CSS STYLE,
, , .
, STYLE
. ,
. ,
. media.
1.2. HTML-
media :
print ;
screen ;
all .
1.6 CCS.
1.6.
<html>
<head>
<style type="text/css" media="screen" >
p.style {
color:#CC0000;
background:#9999CC;
word-spacing:20px;
}
.style2 {
color:#66FFFF;
background:#990000;
word-spacing:10px;
}
</style>
<style type="text/css" media="print" >
p.style {
color:#000000;
background:#FFFFFF;
word-spacing:20px;
}
.style2 {
color:#000000;
background:#FFFFFF;
word-spacing:10px;
}
</style>
31
32
1. HTML-
<title> </title>
</head>
<body>
<p class="style">
style
</p>
<p class="style2">
style2
</p>
<table border="1" >
<tr>
<td class="style2">
style2
</td>
</tr>
</table>
</body>
</html>
: style P (
), style2
. 1.6 style2
.
1.6 .1.3.
.1.3.
.
.
1.2. HTML-
. ,
.
: CSS- style.
HTML. CSS
. P:
<p style="color:#CC0000; background:#9999CC; word-spacing:20px;">
, CSS- STYLE
. 1.7
CSS- style.
1.7. style
<html>
<head>
<title> </title>
</head>
<body>
<p style="color:#CC0000; background:#9999CC; word-spacing:20px;">
style="color:#CC0000; background:#9999CC; word-spacing:20px;"
</p>
<p style="color:#66FFFF; background:#990000; word-spacing:10px;">
style="color:#66FFFF; background:#990000; wordspacing:10px;"
</p>
<table border="1" >
<tr>
<td style="color:#66FFFF; background:#990000; word-spacing:10px;">
style="color:#66FFFF; background:
#990000; word-spacing:10px;"
</td>
</tr>
33
34
1. HTML-
</table>
</body>
</html>
, , style.
.1.4 1.7.
.1.4. style
, .
,
.

CSS. , STYLE, .
. 1.8 STYLE.
: @import URL(" ");.
1.8.
<html>
<head>
<style>
@import URL("test.css");
1.2. HTML-
</style>
<title> </title>
</head>
</html>
, test.css.
LINK
LINK . .
, . ,
LINK . , LINK
.
href;
, . , ,
, .
type, , .
text/css.
LINK : rel rev. ,
. , .
1.9 LINK.
1.9. LINK
<html>
<head>
<link href="test.css" rel="stylesheet" type="text/css" />
<link href="copyrihgt.html" rel="copyright" />
<link href="help.html" rev="help" />
35
36
1. HTML-
<title> LINK</title>
</head>
</html>
1.9 LINK , ,
, , .
.1.6 rel.
W3C.
1.6. rel
contents
index
glossary
copyright
next
prev
help

,

,
alternate rel
hreflang charset, LINK ,
, , .
LINK
. ,
.
SCRIPT
SCRIPT . ,
, .
, SCRIPT.
1.2. HTML-
. type,
, .
, . SCRIPT src,
. ,
.
SCRIPT defer,
.
1.10 HTML-.
1.10. SCRIPT
<html>
<head>
<script defer="defer" type="text/javascript">

</script>
<script type="text/javascript" src="test.js">
</script>
<title> SCRIPT</title>
</head>
</html>
, ,
, .
BASE
,
,
. HTML .
BASE , , . . , , .
37
38
1. HTML-
,
. , C:\Test\test.jpg http://
www.test.test/mytests/test.html , .
,
. , ,
C:\Test\MyTests\test.html, C:\Test\test.jpg,
..\test.jpg, ..
.
BASE href. , .
target.
, HTML-,
, ,
. target ,
, .
:
_top ;
_blanc ;
_self ;
_parent -.
BASE .
1.11 BASE.
1.11. BASE
<html>
<head>
<base href="http://www.test.test/" target="_blank" />
<title> BASE</title>
</head>
</html>
1.11
http://www.test.test/,
1.2. HTML-
../IMG/test.jpg, http://www.test.test/IMG/test.jpg.
,
.
, HEAD, .
BODY
BODY : ,
<BODY> </BODY>, . , ,
BODY.
BODY ,
,
: , ..
BODY, . , , ,
, .
BODY:
alink ;
vlink ;
link .
HEX- .
, .
, HEX-.
1.12 .
1.12.
<html>
<head>
<title> BODY</title>
39
40
1. HTML-
</head>
<body alink="#00FF00" vlink="red" link="#330000">
</body>
</html>

:
#.
. . . blue, red,
black .
, ,
.
BODY . , .
. bgcolor, . background,
.
, . ,
.
, .
bgproperties.
, . fixed,
. .
, .
1.13 BODY,
.
1.13.
<head>
1.2. HTML-
</head>
<body background="test.jpg" bgcolor="#0033CC" bgproperties="fixed">
</body>
</html>
1.13 test.jpg ,
. .
,
.
BODY:
bottommargin
;
leftmargin ;
topmargin .
.
1.14
BODY.
1.14.
<head>
</head>
<body topmargin="10" leftmargin="20" bottommargin="10">
</body>
</html>
10, 20.
BODY , .
text . , , .
41
42
1. HTML-
scroll , . : yes no,

. ,
, , .
.
BODY, . ,
, .
, , . .
, .
. ,
.
: . , , .
HTML- , HTML.
, . .
,
.
2.1.
2.2.
2.3.
2.4.
2.5.
2.6.
44
2.
BODY.
BODY , ,
. HTML :
. HTML
. ,
. ,
.
, .
, XHTML
CSS, .79.
, -, ,
.
2.1.
, . HTML
, . , ,
, , .
HTML .
, .
H1, H2, H3, H4, H5, H6.
,
, .
.
align.
align:
left ;
right ;
center ;
justify ( ).
2.1.
title, , .
2.1
.
2.1.
<html>
<head>
<title> </title>
</head>
<body>
<h1 align="center"> 1 </h1>
<h2 align="justify"> 2 </h2>
<h3 align="left"> 3 </h3>
<h4 align="right"> 4 </h4>
<h5> 5 </h5>
<h6 title=" 6 "> 6 </h6>
</body>
</html>
.2.1 2.1 .
.2.1 . ,
, ,
,
.
,
.

, ,
CSS. H1H6
style class,
.
.2.1.
, ,
.
45
46
2.
2.2.
, ,
. HTML
.
HTML P, . P, , , , P.

, HTML.
P , . align .
center . , . ,
.
left .
, . , .
right .
, . . , ,
.
justify .
,
.
, .
, ,
. title, .
2.2
.
2.2.
<html>
<head>
2.3.
<title></title>
</head>
<body>

<p align="center" title=", ">

, </p>
<p align="left" title=", ">

, </p>
<p align="justify" title=", ">

, .
</p>
<p align="right" title=", "> </p>
</body>
</html>
.2.2 2.2,
.
.2.2.
, P style class.
2.3.
. ,
, , ?
47
48
2.
HTML , .
,

.
BR, , <BR/>,
.
2.3 .
2.3.
<html>
<head>
<title> </title>
</head>
<body>
,<br />
.<br />
</body>
</html>
.2.3 2.3.
.2.3 ,
BR .
BR.
, ,
( ,
align).
.2.3.
clear BR.
:
all ;
left , BR;
right , BR;
none .
2.3.
, , BR, .
, , ,
. NOBR,
. , , .
.
,
NOBR WBR,
.
2.4 NOBR WBR.
2.4.
<html>
<head>
<title> </title>
</head>
<body>
<nobr> ,
, <wbr> .</nobr>
</body>
</html>
.2.4 2.4.
.2.4.
.2.4,
, .
49
50
2.

, ,
.
2.4.
, HTML .
,
. ( ),
.
HTML :
;
;
.
.

,
. , , .
.
HTML UL,
. UL.
LI.
UL type, .
:
circle , ;
square ;
disc , .
,
.
2.4.
2.5
.
2.5.
<html
<head>
<title></title>
<body>
<ul type="circle">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul compact type="square" >
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul compact type="disc" >
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
2.5
.2.5. ,
.
LI .
2.6 .
.2.5.
51
52
2.
2.6.
<html>
<head>
<title></title>
<body>
<ul>
<li type="circle"></li>
<li type="square"></li>
<li type="disc"></li>
</ul>
</body>
</html>
2.6 .2.6.
.
,
.
HTML
. LI
. UL
, , BR
.
.2.6.

2.7 .
2.7.
<html>
<head>
<title></title>
<body>
<ul>
<img src="marker.jpg" /><br />
2.4.
</ul>
</body>
</html>
2.7 .2.7.
, .

. ,
, ? , .
.2.7.

, ,
.
, .
OL, ,
.
OL type, ,
.
type ,
:
A ;
a ;
I ;
i ;
1 .
OL start, ,
.
53
54
2.
2.8 .
2.8.
<html>
<head>
<title></title>
<body>
<ol type="1" start="6">
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
</ol>
<ol type="A">
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
</ol>
<ol type="a">
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
</ol>
<ol type="I">
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
</ol>
<ol type="i">
<li> </li>
2.4.
<li> </li>
<li> </li>
<li> </li>
<li> </li>
</ol>
</body>
</html>
2.8 .2.8.
.2.8.
,
6.
LI . , LI
type.
, value ,
.
2.9
.
55
56
2.
2.9.
<html>
<head>
<title></title>
<body>
<ol type="1" >
<li type="1" value="10"> </li>
<li> </li>
<li value="1"> </li>
<li> </li>
<li type="I"> </li>
<li type="I"> </li>
<li> </li>
</ol>
</body>
</html>
2.9
.2.9.
,
,
.

, . . .
.2.9.

, .
:
. , . , , , .
2.4.
DL
. ,
style class,
.
DL, DT DD.
, ; .
DT.
. ,
, .
2.10 .
2.10.
<html>
<head>
<title></title>
<body>
<dl>
<dt></dt>
<dd> </dd>
<dt></dt>
<dd> </dd>
</dl>
</body>
</html>
2.10 .210.
.2.10.
57
58
2.
.2.10 ; .

. , . .
HTML ,
,
, , .
2.11 .
2.11.
<html>
<head>
<title></title>
<body>
<ol>
<li>

<ul>
<li></li>
<li></li>
</ul>
</li>
<li>

<ul>
<li> </li>
<li> </li>
</ul>
</li>
<li> </li>
</ol>
</body>
</html>
2.5.
.2.11 , .
, .

, , ,
, .
2.5.
. .2.11.
,
, . ,
, .
: .
. .

, .
, , .
URL- ,
.
HTML A,
. ,
. , , -
,
. HTML
. , , , , , ,
. <A> </A> .
A href. , ,
. , ,
, .
59
60
2.
2.12 HTML- .
2.12.
<html>
<head>
<title></title>
<body>
<a href="aboutme.html"> </a><br />
<a href="myfoto.jpg"> </a>
</body>
</html>
.2.12.
,
.
,
, .
, ? .
.2.12.

HTML-.
, .
, .
, ,
. name A.
A.
, ,
.
name , ,
, .
.
, , URL-
#met1. met1
.
2.5.

, .
2.13 .
2.13.
<html>
<head>
<title></title>
<body>
<a name="met2"> 2</a><br />
<a href="#met1"> 1</a><br />
<a href="#met2"> 2</a><br />
<a name="met1"> 1</a>
</body>
</html>
.2.13.
.2.13.
, ,
, , .
, , A .

A
, ,
.
61
62
2.
A . target
, ,
.
target , :
_blanc ;
_parent -;
_self ;
_top .
,
. , , ,
. ,
.
title, , , . .
2.14
.
2.14.
<html>
<head>
<title></title>
<body>
<a href="aboutme.html" target="_blank" title=" ,
"> </a>
</body>
</html>
.2.14 .
, .
, ,
. ,
, ,
.
2.5.
.2.14.
- A.
2.15 -.
2.15. -
<html>
<head>
<title></title>
<body>
<a href="mypetfoto.html" target="_blank" title=" ,
"><img src="mypetfotomini.jpg" /></a>
</body>
</html>
.2.15 , -.
,
,
, .

. , , , ,
.
,
.
.2.15. -
63
64
2.
2.6.
? , ,
, , ,
.
, HTML .
, :
. .
, , . ,
. ,
, .
, , - .
,
, .
, ,
, , .
:
, ,
, .
.

,
, ,
. , ,
.
, ,
, , .
ABBR
ABBR . title
.
2.6.
, title.
:
<abbr title="- "></abbr>
ACRONYM
ACRONYM , .
, , ..
title .
:
<acronym></acronym>
CITE
CITE , . .
:
<cite> </cite>
CODE
, , ,
, , . .
:
<code> func(int a, char b);</code>
DEL
DEL . : cite
URL , ,
datetime --T::
TZD ( Time Zone region with Daylight Saving Time
65
66
2.
). .
:
<del cite="whydel.html" datetime="2007-10-06T10:11:45+3.00">
</del>
DFN
. ,
. .
:
<dfn></dfn>-
EM
EM .
.
:
<em></em>
INS
INS ,
. : cite
URL , , datetime
--T::TZD.
.
:
<ins cite="whyadd.html" datetime="2007-10-06T10:11:45+3.00"> </ins>
KBD
KBD , .
.
:
<kbd></kbd>
2.6.
Q

. ,
, .
:
: <q> </q>
SAMP
SAMP
.
.
:
<samp></samp>
STRONG
STRONG . .
:
<strong> </strong>
VAR
. .
:
<var>X</var>
2.16 .
2.16.
<html>
<head>
<title> </title>
<body>
<abbr title="- "></abbr><br />
67
68
2.
<acronym></acronym><br />
<cite> </cite><br />
<code>func(int a, char b);</code><br />
<del cite="whydel.html" datetime="2007-10-06T10:11:45+3.00">
</del><br />
<dfn></dfn>-<br />
<em></em><br />
<ins cite="whyadd.html" datetime="2007-10-06T10:11:45+3.00">
</ins><br />
<kbd></kbd><br />
: <q> </q><br />
<samp></samp></br>
<strong> </strong><br />
<var>X</var><br />
</body>
</html>

2.16 .2.16.
.2.16 ,

,
. ,
, .

,
, .
.2.16.
B
B .
:
<b> </b>
2.6.
I
I .
:
<i></i>
TT
.
:
<tt> </tt>
U
U .
:
<u></u>
S
S .
:
<s></s>
STRIKE
.
:
<strike> </strike>
BIG
BIG , , , . ,
.
HTML .
.
69
70
2.
.
:
<big> <big> </big></big>
SMALL
SMALL
.
.
:
<small></small>
SUB
,
.
.
:
<sub></sub>
SUP
SUP ,
.
.
:
<sup></sup>
SPAN
SPAN .
.
:
<span style="background-color:#00FFFF"> </span>
2.6.
2.17 .
2.17.
<html>
<head>
<title> </title>
<body>
<b> </b><br />
<i></i><br />
<tt> </tt><br />
<u></u><br />
<s></s><br />
<strike> </strike><br />
<big> <big> </big></big><br />
<small></small><br />
<sub></sub> <br />
<sup></sup> <br />
<span style="background-color:#00FFFF"> </span>
</body>
</html>
2.17 .2.17.
.2.17.
.2.17 ,
, .
71
72
2.
,
. , , .
.2.1
, .
2.1.

B
I
TT
U
S, STRIKE
BIG
SMALL
SUB
SUP

STRONG
EM, DFN, VAR, CITE
CODE, SAMP, KBD
INS
DEL
,
,
.

. ,
.

, ,
.
, .
, .
FONT
FONT .
,
.
FONT. , , .
2.6.
face,
. ,
.
,
face.
size.
, 2 6. 3.
.
+, , ,
, , .
, .
color,
, , #RRGGBB.
2.18 FONT.
2.18. FONT
<html>
<head>
<title> FONT</title>
<body>
<font color="#FF0000" face="Verdana, Arial, Helvetica, sans-serif" size="+2">
+2
</font><br />
<font color="#FF00FF" face="Verdana, Arial, Helvetica, sans-serif" size="-4">
4
</font><br />
</body>
</html>
2.18 .2.18.
.
, .
, Sans Serif. ,
.
73
74
2.
.2.18. FONT
, . .
, .
DIV
DIV
. , DIV style,
class.
, HTML, align title.
2.19 DIV.
2.19. DIV
<html>
<head>
<title> DIV</title>
<body>
<div style="cursor:crosshair" align="center">
,
.
</div>
</body>
</html>
2.19 .2.19.
2.6.
.2.19. DIV
,
.
PRE
,
.
HTML .
.
PRE . .
2.20 PRE.
2.20. PRE
<html>
<head>
<title> PRE</title>
<body>
<pre>
</pre>
</body>
</html>
75
76
2.
.2.20 , , PRE, .
, .
BLOCKQUOTE
BLOCKQUOTE .
, .
.
.2.20.
PRE
2.21
BLOCKQUOTE.
2.21.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> BLOCKQUOTE</title>
<body>
<blockquote>
.
</blockquote>
</body>
</html>
.2.21 , BLOCKQUOTE.
,
,
HTML , .

HTML .
. -
.2.21.
BLOCKQUOTE
B I, , . : ,
, .
2.22 .
2.22.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> </title>
<body>
<del><b><i> </b></i></del><br />
<ins><b><i> </i></b></ins>
</body>
</html>

HTML.
,
, .
. ,
BODY.
, .
77

3.1.
3.2.
3.3.
3.4.
3.5.
3.6.
3.7.
3.8.
3.9.
3.10.
3.1.
,
. ,
, .
HTML : , ,
-, . HTML-, , , , , , .
(.3.1).
.3.1. HTML-
, , XHTML CSS.
HTML4.01 .
3.1.
,
(.3.2).
.
. .
.3.2.
, .
, .
, .
79
80
3.

. . , .3.3,
, .
.3.3.
, ,
, .
.
.
.
Paint, Adobe Photoshop AutoCAD.
HTML- , Microsoft
Word. HTML-. HTML .
3.3.
3.2.
HTML- . BODY. , . <TABLE> </TABLE>:
<body>
<table>
</table>
</body>
TABLE. <CAPTION>...</CAPTION>. align,

top ( ) bottom ( ). .
3.3.
. , .
<TR> </TR>
. , <TR>
</TR>. <TD> </TD>,
,
() .
TD .
<body>
<table>
<tr><td>
</td><td>
</td></tr>
<tr><td>
</td><td>
</td></tr>
</table>
</body>
(
),
<TH> </TH>. TH
. TH, TR TD
Internet Explorer.
81
82
3.
HTML-. ,
,
(3.1). .3.4 ,
.
3.1. HTML-,
<html>
<head>
<title> HTML-</title>
</head>
<body>
<table>
<caption> </caption>
<tr><th> 1</th><th> 2</th><th> 3</th></tr>
<tr><td> 2x1 </td><td> 2x2 </td><td> 2x3 </td></tr>
</table>
</body>
</html>
.3.4. HTML-

HTML-, ,
. , HTML-.
3.4.
.
border TABLE. -
3.4.
. border ,
. bordercolor
, .
.

<table>
<table border="4" bordercolor="#000000">
( ) -. .3.5 ,
Internet Explorer, .3.6
Opera. - , . , ,
, .
.3.5. Internet Explorer
.3.6. Opera
83
84
3.
.3.5 , .
cellspacing cellpadding TABLE. cellspacing , cellpadding
.
3.2 , 10,
(.3.7).
3.2. HTML-
<html>
<head>
</head>
<body>
<table border="4" bordercolor="#000000" cellspacing="0" cellpadding="10">
</table>
</body>
</html>
.3.7.
3.4.
,
. frame
, rules
. frame :
above ;
below ;
box ;
border ( box);
hsides ;
lhs ;
rhs ;
void ;
vsides .
Frame rules HTML, .
rules :
all ;
cols ;
groups ;
none ;
rows .
3.3 frame rules.
3.3. HTML-
<html>
<head>
<head>
<body>
<table border="4" bordercolor="#000000" cellspacing="0" cellpadding=
"10" frame= Hsides rules= Cols>
<tr><th></th><th> </th></tr>
85
86
3.
<tr><td>.
</td><td> </td></tr>
<tr><td>.
<tr><td>.
<tr><td>.
<tr><td>.
<tr><td>.
</td><td>
</td></tr>
</table>
</body>
</html>
.3.8 ,
.
,
rules frame.
3.5.

width TABLE. (width="250"), (width="80%"). ,
600,
, .
,
, . height.
.3.8. HTML-

. .
.
.
, .
3.5.
.3.9 3.10 ,
.
.3.9. 80%
80% ,
50% . 100.
.3.10. 300
87
88
3.
, 300. 3.4
3.5 , .
3.4. 80%
<html>
<head>
</head>
<body>
<table border="4" bordercolor="#000000" cellspacing="0" cellpadding="10"
width="80%">
<caption> 80%</caption>
<tr><th height="100" width="50%"> 1</th>
<th> 2</th><th> 3</th></tr>
</table>
</body>
</html>
3.5. 300
<html>
<head>
</head>
<body>
<table border="4" bordercolor="#000000" cellspacing="0" cellpadding="10"
width="300" height="300">
<caption> 300 </caption>
</table>
</body>
</html>
3.6.
HTML4 ( , ) .
3.6.
COLGROUP COL.
COLGROUP ,
. ,
, , . COL
,
, . ,
.
COLGROUP COL span n. , n .
<table>
<col span=2 style="color:red">
<tr><td> </td>
<td> </td>
<td> </td></tr>
</table>
THEAD, TBODY TFOOT. .

THEAD.
.
, , TBODY. TFOOT
.
.
.
<thead>
<tr><th> </th><th>
</th><th> </th></tr>
</thead>
</tbody>
<tr><td> </td><td>
</td><td>
</td></tr>
<tr><td> </td><td>
</td><td>
</td></tr>
<tbody>
, , , ,
( ). , .
1. .
2. .
89
90
3.
3.7.

TABLE, TR, TH TD align valign.
align :
<table align=left/right/center>
/ / ;
<tr align=left/right/center> / / ;
<th align=left/right/center> / / ( );
<td align=left/right/center/char> /
/ / (
).
valign
:
<table valign=bottom/middle/top> / / ( );
<tr valign=bottom/middle/top> / /
;
<th valign=bottom/middle/top> / /
;
<td valign=bottom/middle/top> / /
.
3.6 (.3.11).
3.6.
<html>
<head>
</head>
3.8.
<body>
<table border="4" bordercolor="#000000" cellspacing="0" cellpadding="0"width=
"400" height="150" align=center>
<tr><th> </th><th></th><th></th><th> </th></tr>
<tr valign=bottom align=center>
<td></td><td>028</td><td>190 </td><td>12,2 </td></tr>
</table>
</body>
</html>
.3.11.
3.8.
,
(..3.2). HTML
colspan rowspan. colspan
, , rowspan .
91
92
3.
.3.12 .
, .
, .
3.7.
.3.12.
3.7.
<html>
<head>
<title>HTML-</title>
<head>
<body>
<table border="4" bordercolor="#000000" cellspacing="0" cellpadding="5" >
<tr align=center><th colspan=3>
</th></tr>
<tr align=center><td rowspan=2> </td>
<td> 22</td><td> 23</td></tr>
<tr align=center><td> 32</td><td> 33</td></tr>
<tr align=center><td rowspan=2> </td>
<td> 42</td><td> 43</td></tr>
<tr align=center><td> 52</td><td> 53</td></tr>
</table>
</body>
</html>
3.10.
3.9.
HTML .
bgcolor , ,
, , .
<td bgcolor="#000000">, <td></td> ( ), , .3.13.
.3.13. bgcolor
background , . , <td background="img\

fon.gif">.
, , ,
.
3.10.
, ,
(.3.14). colspan .
, ,
TABLE ,
.
93
94
3.
.3.14. HTML-
3.8 , .3.13. .
. , . , , ,
.
3.8. ,
<html>
<head>
<title>HTML-</title>
<head>
<body>
<tr><td> 1x1</td><td>1x2</td><td>1x3</td><td>1x4</td></tr>
<tr><td colspan=4>
<tr><td> 1x1</td><td>1x2</td><td>1x3</td></tr>
<tr><td> 2x1</td><td>2x2</td><td>2x3</td></tr>
</table>
</td>
</tr>
</table>
</body>
</html>
, -. - Microsoft
(www.microsoft.com) .
.
, . ,
, .
HTML-
: , , ..
,
.
95
4.1.
4.2.
4.1.

Flash-, . ,
, . . ,
, , .
4.1.
,
, . : , ( -), .
.
. . ,
, . , . ,
, , , .
. ,
, ,
.
HTML- IMG.
src,
.
: <IMG src="image.jpg">.

.
(, (http://www.mypage.ru/IMG/myfoto.jpg)),
(, (IMG/myfoto.jpg)).
, , ../
( DOC, IMG, : ../IMG/myfoto.jpg).
97
98
4.
4.1 .
4.1.
<html>
<head>
<title> </title>
</head>
<body>
<img src="image.jpg"/>
</body>
</html>
.4.1 4.1
, .
. ,
,
, ,

.
,
, ,
, , .
.4.1.

, , IMG.
, width height.
(
%).
, ,
.
4.1.
,
.
IMG, ,
, .
, ,
,
- ( ,
). ,
.4.2.
4.2 .
4.2.
<html>
<head>
<title> </title>
</head>
<body>
<br/>
.4.2.
<img src="image.jpg" width="60"/>

<br/>
<img src="image.jpg" width="50%"/>
( )<br/>
<img src="image.jpg" width="50" height="150"/>
</body>
</html>IMG_0628.jpg
4.2 , . ,
, .
4.2 .4.2.
.4.2 , - , ,
. , ,
99
100
4.
.
.
, . , .
, .

,
. , ,
.
,
align IMG.
, .
align , , , , .
:
left ;
right .
:
top
;
texttop
;
middle ;
absmiddle ;
baseline
;
bottom baseline;
absbottom .
4.1.
, .
, . . , , .
4.3
.
4.3.
<html>
<head>
<title> </title>
</head>
<body>
<img src="image.jpg" width="70" align="top"/>
<br/>
<img src="image.jpg" width="70" align="absbottom"/>
<br/>
<img src="image.jpg" width="70" align="bottom"/>
<br/>
<img src="image.jpg" width="70" align="middle"/>
<br/> </body>
</html>
.4.3 4.3,
.
. 4.4.
4.4.
<html>
<head>
<title> </title>
</head>
<body>
<img src="image.jpg" width="100" align="right" />
, .
, . , .
: , . ,
.
, . ,
, . </html>
101
102
4.
.4.3.
.4.4 4.4, .
.4.4.
4.1.

. .
, hspace vspace
IMG.
.
4.5 (100)
(1). .4.5 , .
.4.5.
4.5.
<html>
<head>
<title> </title>
</head>
<body>
103
104
4.
<img src="image.jpg" width="100" align="right" vspace="100" hspace="1"/> , .
, .
, .
: , .
, .
, .
, , . <br/> </body>
</html>

,
.
, , :
. border,
.
4.6 10, 50. .4.6 , , ,
.
.4.6.
4.1.
4.6.
<html>
<head>
<title> </title>
</head>
<body>
<img src="image.jpg" width="100" align="right" vspace="10" hspace="10"
border="20"/> , .
, .
, . : ,
. , .
, .
, , .
</body>
</html>

, , ,
, ,
.
, , ,
, , .
, ,
, , .
alt. ,

. , ,
, , , , ,
.
4.7 .
4.7.
<html>
<head>
<title> </title>
</head>
<body>
105
106
4.
<img src="image.jpg" width="100" align="right" vspace="50" hspace="50"
alt=" "/>
</body>
</html>
.4.7 4.7 ,
.
.4.7.
.
.4.8 , ,
.
.4.8.
4.1.
,
.

,
, ,
.
lowsrc,
, ,
. , ,
. .

. , .
4.8 , .
4.8.
<html>
<head>
<title> </title>
</head>
<body>
<img src="image.jpg" width="100" vspace="10" hspace="10" lowsrc=
"lowimage.jpg">
</body>
</html>
.4.9 , .

.
107
108
4.
.4.9.

, , -.
, , , .
IMG
<> </A>, ,
border. ,
,
.
4.9 -
.
4.9. -
<html>
<head>
<title> </title>
</head>
<body>
border ( )<br/>
<a href="image.jpg"><img src="image.jpg" width="100" vspace="10" hspace="10"
alt=" " /> </a><br />
<br/>
alt=" " border="0" /> </a><br />
4.2.
10 <br/>
alt=" " border="10" /> </a><br/>
</body>
</html>
4.9 .4.10.

,
.

, ,
.
,
.
.
,

.
.4.10. -

. , , , , .
, ,
. , .
4.2.
, , ,
?
109
110
4.
-, , .

. 4.10,
.
title A, , .
(.4.11).
4.10
.
.4.11.
4.10.
<html>
<head>
<title> </title>
</head>
<body>
<a href="test.mp3" title="Test">Test audio</a>
</body>
</html>

.
.
, .
.
, ,
Flash-. ;
Flash- , , .
, Flash- , .
4.2.

, - ,
, ,
.
OBJECT.
.
EMBED APPLET,
OBJECT. </OBJECT>.
OBJECT, , , , , EMBED.

. <OBJECT> </OBJECT>
PARAM, . , ,
.
.
.
, .
,
, OBJECT.
OBJECT
- . , Flash-. OBJECT : , ,
, .
OBJECT , ,
.
,
, , .
111
112
4.
. , , , .
,
.
classid , .

. ,
, , -.
: ActiveX-.

clsid, 4.11. ,
.
.
codetype , MIME- ,
classid.
, .
MIME- (Multipurpose Internet Mail Extensions) , , . , ,

. HKEY_CLASSES_ROOT , , Content Type
MIME- .
4.11 classid codetype.

4.11. classid codetype
<html>
<head>
<title> </title>
</head>
<body>
<object classid="CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95" codetype=
"audio/mp3">
</object>
</body>
</html>
Windows Media,
MP3-. ,
(.4.12).
4.2.
.4.12. Windows Media
data ,
. ,

PARAM. ,
codebase. ,
.
type , data.
MIME- .
. , . type , codetype.
4.12 , test.mp3 .
4.12. data type
<html>
<head>
<title> </title>
</head>
<body>
<object data="test.mp3" type="audio/mp3">
</object>
</body>
</html>
113
114
4.
Java-,
code Java-.
APPLET.
4.13 .
4.13. Java-
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title> </title>
</head>
<body>
<object code="clock.class"></object>
</body>
</html>
codebase ,
, , .
OBJECT , .
, ,
, .
OBJECT .
align, IMG,
.
:
left ;
right .
:
top
;
texttop ;
4.2.
middle ;
absmiddle ;
baseline ;
bottom baseline;
absbottom .
height width,
. , . ,
,
, .
,
hspace vspace.
OBJECT , , , .
PARAM
, .
,
; , , . ,
.
PARAM OBJECT ,
.
PARAM: name value.
(), value .
PARAM .
4.14 AutoStart,
, URL, .
115
116
4.
4.14. PARAM
<html>
<head>
<title> </title>
</head>
<body>
<object classid="CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95" width="300"
height="300" Type="audio/x-mpeg">
<param name="FileName " value="test.mp3"/>
<param name="AutoStart" value="false"/>
</object>
</body>
</html>

. , OBJECT,
. HTML
BGSOUND. , src ( )
loop ( ).
volume,
. BGSOUND 4.15.
4.15. BGSOUND
<html>
<head>
<title> </title>
</head>
<body>
<bgsound src="test.mp3" loop="1" volume="5" />
</body>
</html>
4.15 test.mp3
.
4.2.
,
. ,
.
.
4.16 , OBJECT.
4.16. OBJECT
<html>
<head>
<title> </title>
</head>
<body>
height="0" type="audio/x-mpeg" >
<param name="FileName" value=" test.mp3" />
<param name="AutoStart" value="true" />
<param name="Volume" value="10" />
<param name="PlayCount" value="2" />
</object>
</body>
</html>
4.16 AutoStart Volume,

,
URL.
PlayCount. 4.16
test.mp3
.
, ,
.
BGSOUNG, , .
.
,
,
. OBJECT ,
.
117
118
4.
, .
. : , height
OBJECT, .
4.17.
4.17.
<html>
<head>
<title> </title>
</head>
<body>
<object classid="CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95" type="audio/x-mpeg">
<param name="FileName" value="test.mp3" />
<param name="AutoStart" value="1" />
</object>
</body>
</html>
.4.13.
, .
.
.4.13.
, . ,
, . : : <PARAM name="ShowDisplay" value="1"/>.
4.2.
.4.14.
.4.14.
Windows Media 6.4

. , FileName URL. clsid Windows Media 6.4: 6BF52A52394A-11D3-B153-00C04F79FAA6.
, , , .

, .
. ,
, ,
.
, . ,
, .
, , . .
119
120
4.
Windows
Media, .
,
, .
AVI . MIME- video/x-msvideo.
PARAM.
4.18, , . ,
20.
.
,
.
4.18.
<html>
<head>
<title> </title>
</head>
<body>
height="300" type="video/avi">
<param name="Volume" value="20" />
<param name="URL" value="test.avi" />
<param name="AutoStart" value="1" />
</object>
</body>
</html>
, ,
<PARAM name="ShowDisplay" value="1" />.
, , .
, , .
,
: Flash. , ,
.
4.2.
Flash-
Flash- ,
. Flash-,
. . Flash,
. .
Flash-.
Flash-
. Shockwave,
. clsid:d27cdb6e-ae6d11cf-96b8-444553540000, MIME- SWF- application/
x-shockwave-flash.
, , PARAM.
4.19 Flash-. movie
, . loop , play .
4.19. Flash-
<html>
<head>
<title> </title>
</head>
<body>
<object classid="CLSID:d27cdb6e-ae6d-11cf-96b8-444553540000" width="300"
height="300" type="application/x-shockwave-flash" >
<param name="movie" value="test.swf" />
<param name="play" value="false" />
<param name="loop" value="1">
</object>
</body>
</html>
test.swf
.
, , Flash
, .
121
122
4.
Windows Media, RealPlayer,

QuickTime Player. ,
.
.
Windows Media Windows,
: , Windows, .
: 22D6F312-B0F6-11D0-94AB-0080C74C7E95.
.4.1. 0/1,
0 , 1 .
4.1. WMP

FileName
AutoStart
ShowDisplay
ShowControls
ShowAudioControls
ShowPositionControls
ShowTracker
Volume
URL-
0/1
0/1
0/1
0/1
0/1
0/1

RealPlayer , ,
online.
: CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA.
.4.2.
4.2. RealPlayer

src
controls
autostart

4.3. controls
All
InfoPanel
(, )

(, )
URL
(..4.3)
0/1
4.2.
ControlPanel
PlayButton
StopButton
VolumeSlider
PositionField
StatusBar
(, )

Play
Stop

QuickTime Player , MOV QT.

,
.
: 02BF25D5-8C17-4B23-BC80-D3488ABDDC6B.
.4.4.
4.4. QuickTime Player

src
autoplay
controller
URL
0/1
0/1
, - .
OBJECT
, .
OBJECT
, OBJECT.
:
<object height="100" width="100"
type="image/jpeg" data="test.jpeg">
</object>
:
<object type="text/html" height="100" width="100"
data="http://www.test.test">
</object>
123
124
4.

.
: , 4.20.
4.20.
<html>
<head>
<title> </title>
</head>
<body>
<object width="500" height="500" classid="clsid:8E27C92B-1264-101C-8A2F040224009C02">
</object>
</body>
</html>
.4.15.
.4.15.
, OBJECT
, .
, Flash, . , HTML
.
,
, - .
, OBJECT
.
, ;
- . ,
.
125
5.1.
5.2.
5.3.
5.4.
5.5.
5.6.
5.7.
5.8.
5.1.
(frames) HTML-,
. HTML-,
. 3.0 . ,
.
.
.
, , .

,
,
.
,
.
5.1.
HTML- , , <BODY>..</BODY> HTML-
<FRAMESET>...</FRAMESET>.
cols rows.
. cols
, rows . ,
, .
.
,
, cols (,
cols="13,31,34"). rows . , .

(, cols="20,100,20" rows="30,100").
, ,
. , -
127
128
5.
,
.
, 1 100 (,
cols="20%,50%,30%" rows="30%,70%"). ,
, 100, 100%. , , 100,
.
(, 5*).
. *
, . * (, cols="*,*,*"),
.
, ( ).
, rows="2*,*,*" ,
2/3 1/3
.
, FRAME, src , . ,
. , 5.1.
5.1.
<html>
<head>
<title> 4 </title>
</head>
<frameset cols="45%,*"rows="30%,*">
<frame src=frame1.HTML>
</frameset>
</html>
.5.1 , HTML-,
5.1. ,
HTML- Frame1.html,
Frame2.html, Frame3.html Frame4.html.
5.2.
.5.1. ,
HTML-, .
src,
src="pic.gif". , FRAME .
5.2.
,
(..5.1). ,
.
FRAMESET, . border. .
,
, no 0 frameborder.
.
frameborder yes 1, , 0 no, . , frameborder .
. frameborder
(<FRAMESET frameborder="no" frameborder="0">),
.
bordercolor , .
129
130
5.
5.2 HTML-,
.
5.2.
<html>
<head>
<title> 4 </title>
</head>
<frameset cols="45%,*"rows="30%,*" border="10" bordercolor="#000000"
frameborder="1" frameborder="yes">
</frameset>
</html>
.5.2 , , 5.2,
Internet Explorer.
, bordercolor="#000000".
.5.2.
, .
, , FRAME (, <FRAME
5.3.
src=frame1.HTML border="10" bordercolor="#000000" frameborder="1"

frameborder="yes">), ,
(.5.3).
.5.3.
5.3.
HTML-.
, . scrolling,
:
yes , ;
no ;
auto ( ).
<frame src=frame1.HTML scrolling="yes" >

<frame src=fon.jpg>
<frame src=fon.jpg scrolling="no">
</frameset>
131
132
5.
, ,
(.5.4).
.5.4.
.
. , , , ,
. , . ,
. , , , . ,
scrolling="no" . , , , .
5.4.

. . . target .
, , name.
5.4.
5.3 HTML-, .
5.3.
<html>
<head>
<title> 4 </title>
</head>
<frame src=frame1.HTML scrolling="yes">
<frame src=frame2.HTML name="frame2">
<frame src=frame3.HTML scrolling="no">
<frame src=frame4.HTML name="frame4">
</frameset>
</html>
.5.5 HTML- (5.3),

, : <a href=page.HTML
target="frame2"> </a>.
.5.5.
,
, target="frame2"
(.5.6).
133
134
5.
.5.6.
,
. :
target="_blank" ;
target="_self" ;
target="_parent" ,
;
target="_top"
.
, . target ,
. ,
, .
target _top, _blank, , .
"_blank", , . ,
.
5.6.
5.5.
.
,
, , (.5.7).
.5.7.

, noresize FRAME.
<frameset cols=20%,*>
<frame src=frame1.HTML noresize>
</frameset>
noresize . . ,
,
.
5.6.
, IFRAME.
135
136
5.
, <FRAMESET>...</FRAMESET>,
. IFRAME
, ,
. , : width, height,
hspace, vspace, align, IMG.
<iframe src=page.HTML width="50%" height="300" hspace="5" vspace="5" align="left">
!
</iframe>
.5.8 , .
.5.8.
, IFRAME . , <IFRAME> </IFRAME>.
5.7.
5.7.

() , 10. marginheight
marginwidth. marginwidth , marginheight
. , ,
, , . (),
.
<frame marginheight=45 marginwidth=1>
HTML-, (5.4). , .
,
.
5.4.
<html>
<head>
<title> 2 </title>
<head>
<frameset cols="45%,*">
<frame src="1.gif" marginheight=45 marginwidth=1>
<frame src="2.gif">
</frameset>
</html>
HTML-, , .5.9.
,
.
,
. <frameset marginheight=45
marginwidth =1>, ,
.
137
138
5.
.5.9.
5.8.
,
, , .
.
HTML-
, . , . HTML-
.
, . .
,
.
. ,
, , , .
,
HTML.
HTML- ,
. JavaScript .
.
, , ,
, .
, , ,
. , ,
, , .
, , , . , , ,
,
.
, ,
, .
, .

, ,
. .

- . ,
-.
,
, . ,
,
. , .
, HTML.
139
140
5.
. , , .
-
. ,
. , . ,
.
.

6.1. FORM
6.2.
142
6.
? .

. , ,
,
, .
, , . , , .
, ,
, -, , .

. .
,
.
.
, , .
- (PHP, Perl), .
, ,
, , .
6.1. FORM
FORM,
. , . , ,
.
,
. , , , .
action,
. , ,
. ,
, ( ),
6.1. FORM
, . , test.php, 6.1. action , , , ,

. URL- - .
6.1. test.
php, , .
6.1. action FORM
<html>
<head>
<title> </title>
</head>
<body>
<form action="test.php">
</form>
</body>
</html>
test.php ,
. , , ,
, : . .
, , ?
,
. action
, , mailto.

enctype="text/plain".
6.2 ,
. , , .
6.2.
<html>
<head>
<title> </title>
</head>
<body>
143
144
6.
<form action="mailto:test@test.ru" enctype="text/plain">
</form>
</body>
</html>
,
, . ,
:
_=__
enctype MIME- , .
, multipart/
form-data.
6.3 enctype,
.
6.3. enctype FORM
<html>
<head>
<title> </title>
</head>
<body>
<form action="test.php" enctype="multipart/form-data">
</form>
</body>
</html>
, ,
.
method, ,
. , .
.
: GET POST.
.
GET , . GET
6.1. FORM
. ,
.

www.mytestserver.ru/form.php?var1=1&var2=2.
,
? &.
, . ,
.
POST . ,
, URL,
. POST
.
6.4 POST, .
6.4. method FORM
<html>
<head>
<title> </title>
</head>
<body>
<form action="test.php" enctype="multipart/form-data" method="post">
</form>
</body>
</html>
.
, , .
name. ,
.
6.5 . .
6.5. name FORM
<html>
<head>
<title> </title>
145
146
6.
</head>
<body>
<form action="test.php" enctype="multipart/form-data" method="get"
name="test">
</form>
</body>
</html>
. , ,
, .
, ,
.
, , . target. ,
. ,

, .
target.
_blank .
_self .
_parent -. , _self.
_top .
, _self.
6.6 ,
.
6.6. target FORM
<html>
<head>
<title> </title>
</head>
<body>
6.2.
<form action="test.php" enctype="multipart/form-data" method="get" name="test"
target="_blank">
</form>
</body>
</html>
, ,
.
FORM : . .
,
, , ,
. , FORM , ,
.
6.2.
. ,
, ,
.
, , .
, .
INPUT
INPUT.
,
. , , .
, , , ,
type. , . .6.1 ,
.
,
.
147
148
6.
6.1. type
text
password
button
file
image
checkbox
radio
reset
submit
hidden
, ,
INPUT.
, , name. .

. ,
.
, ,
. , disabled.
, .
value , . ,
, .
.
, ,
. : ,
.
, , value ,
. ,
, . , .
,
. . .
6.2.

,
. ,
, .
, .
TYPE="text".
maxlenght,
,
. , ,
. ,
.
, size.
,
. , ,
, . , .

, . , . .
6.7 . maxlenght
, . size
, , , . , , .
6.7.
<html>
<head>
<title> </title>
</head>
<body>
<form action="test.php" enctype="multipart/form-data" method="post" name=
"test" target="_blank">
149
150
6.
: <input type="text" name="Reg_name" value=" " /><br />
: <input type="text" name="Reg_surname" value=" " /><br />
: <input type="text" name="Reg_patronymic" value="
" /><br />
: <input type="text" name="Reg_login" maxlength="12" value=
"< 10 " size="14" /><br/>
</form>
</body>
</html>
6.7
.6.1.
.
, ,
.

.6.1.
,

type="password". , (
, ) .
,
, maxlenght size.
6.8 .
6.8.
<html>
<head>
<title> </title>
</head>
<body>
<form action="test.php" enctype="multipart/form-data" method="post" name="test"
target="_blank">
: <input type="password" name="Reg_password" value=
"" /><br/>
</form></body>
</html>
6.2.
6.8
.6.2.
.6.2 ,
.
. , .
.6.2.
: ,
. , . , , .
, type "button".
, , type="submit", , ,
type="reset".
, , .
: . .
value , ,
.
6.9 .
6.9.
<html>
<head>
<title> </title>
</head>
<body>
:<br />
<input name="submit" type="submit"/><input name="reset" type="reset"/><br>
:<br />
151
152
6.
<input name="submit" type="submit" value=""/><input name="reset"
type="reset" value=""/><br />
<input name="submit" type="submit" value=" "/>
<input name="reset" type="reset" value="
"/><br/>
</form>
</body>
</html>
6.9 .6.3.
.6.3.
, ,
. , .
, , ,
. .
, , ,
, . ,
.
6.2.
, , : , . .
, .
type="radio" . <INPUT>.
, . , ,
name. value
, , .
checked,
, . ,
. , , .
6.10 .
6.10.
<html>
<head>
<title> </title>
</head>
<body>
target="_blank">
: <input name="Reg_Gender" type="radio" value="man" />
<input name="Reg_Gender" type="radio" value="woman" />
<input name="Reg_Gender" type="radio" value="dontanswer" checked />
<br />
: <input name="Reg_Age" type="radio" value="before18" /> 18
<input name="Reg_Age" type="radio" value="1825" />18-25
<input name="Reg_Age" type="radio" value="2535" />25-35<br />
<input name="Reg_Age" type="radio" value="3550" />35-50
<input name="Reg_Age" type="radio" value="after50" /> 50<br />
</form>
</body>
</html>
153
154
6.
6.10 .6.4.
.6.4.
,
.
, .6.4.
,
.
,
. ,
,
, .

. , .
, , .
checked, .
6.11 .
.
6.2.
6.11.
<html>
<head>
<title> </title>
</head>
<body>
target="_blank">
: <input name="Reg_hobby[]" type="checkbox" value="sing" />
<input name="Reg_hobby[]" type="checkbox" value="float" />
<input name="Reg_hobby[]" type="checkbox" value="walk" />
<input name="Reg_hobby[]" type="checkbox" value="work" checked /><br />
<input name="Reg_hobby[]" type="checkbox" value="drive" checked />

<input name="Reg_hobby[]" type="checkbox" value="cook" />
<input name="Reg_hobby[]" type="checkbox" value="dance" />
<input name="Reg_hobby[]" type="checkbox" value="read" checked />
<br />
</form>
</body>
</html>
6.11 .6.5.
.6.5.
. .
155
156
6.

.
, .
, .
type="file".
, ,
,
, .
size, .
, .
6.12 35
.
6.12.
<html>
<head>
<title> </title>
</head>
<body>
: <input name="Reg_foto" type="file" size="55" /><br/>
</form>
</body>
</html>
6.12 .6.6 .
.6.6.
6.2.
, ,
.

.
. - type="image". src. .
, ,
.
alt, , .
, ,
, ,
.

align.
.
align:
left ;
right ;
top
;
texttop
;
middle ;
absmiddle ;
baseline
;
bottom
.
6.13 -, .
.
157
158
6.
6.13.
<html>
<head>
<title> </title>
</head>
<body>
<input name="submit" type="image" src="Send.jpg" alt=",
" align="left" border="5" /><input name="reset" type="image" src=
"Clear.jpg" alt=" " align="right" />
</form>
</body>
</html>
6.13 .6.7.
.6.7.

,
.
.
, . , . , , .
6.2.
type="hidden".
name value ,
.
6.14 , .
6.14.
<html>
<head>
<title> </title>
</head>
<body>
<input name="id_user" type="hidden" value="27" />
</form>
</body>
</html>
INPUT.
, , .
.
.
. , . , ,
, . ,
, , , .
SELECT, ,
. size . size="1" , .
size , , , , ,
159
160
6.
. multiple
, Ctrl.
<SELECT> ,
. OPTION, SELECT. value ,
.
selected , .
OPTION. ,
.
6.15 . .
6.15.
<html>
<head>
<title> </title>
</head>
<body>
target="_blank">
:
<select name="Reg_Place" size="1" >
<option value="SPb">-</option>
<option value="Mos" selected ></option>
<option value="Ebr"></option>
</select><br />
( ):<br />
<select name="Reg_Work[]" size="4" multiple="multiple" >
<option value="journ"></option>
<option value="progr"></option>
<option value="site"> </option>
<option value="HR"> </option>
<option value="sale"></option>
<option value="admin"></option>
<option value="trans"></option>
<option value="PR"></option>
6.2.
</select><br />
</form>
</body>
</html>
6.15 .6.8.
.6.8.
,
. OPTGROUP,
. label,
.
6.16 .
6.16. OPTGROUP
<html>
<head>
<title> </title>
</head>
<body>
target="_blank">
:
<select name="R_Place" size="1" >
<optgroup label="">
161
162
6.
<optgroup label="">
<option value="LA">-</option>
<option value="Va"></option>
<option value="NY">-</option>
<optgroup label="">
<option value="Par"></option>
<option value="Lion"></option>
</select><br />
( ):<br />
<select name="R_Job" size="8" multiple="multiple" >
<optgroup label="">
<option value="biz"></option>
<option value="ecol"></option>
<option value="tur"></option>
<optgroup label="">
<option value="web">Web-</option>
<option value="CPP">/++</option>
<option value="Del">Delphi</option>
<optgroup label=" ">
<option value="Diz"></option>
<option value="Html"></option>
<optgroup label="">
<option value="Eng"></option>
<option value="Fr"></option>
<option value="Ger"></option>
<optgroup label="">
</select><br />
</form>
</body>
</html>
6.2.
6.16 .6.9.
.6.9.
.6.9 , ,
.
, , ,
, .
.

, .

. .
,
. , .
TEXTAREA,
. , ,
. cols rows. ,
. ,
.
163
164
6.
, ,
, , .
readonly.
TEXTAREA wrap, , .
:
hard ,
, ;
soft ,
, Enter;
off Enter, , , .
6.17 .
, .
6.17.
<html>
<head>
<title> </title>
</head>
<body>
:<br />
<textarea cols="24" rows="10" name="about" wrap="off" > ,
.</textarea><br />
:<br />
<textarea cols="24" rows="3" name="about" readonly > </
textarea><br />
</form></body>
</html>
6.17 .6.10.
,
, .
6.2.
.6.10.
, .
, , ,
.

, , . LABEL, .
, ,
, .
,
. , .
, .
,
.
:
id INPUT, LABEL for , id
INPUT , .
165
166
6.
LABEL accesskey. .
Alt, .
6.18 LABEL.
6.18. LABEL
<html>
<head>
<title> </title>
</head>
<body>
target="_blank">
<br />
: <input name="Reg_Age" type="radio" value="before18"
id="ab18"/><label for="ab18"> 18</label>
<input name="Reg_Age" type="radio" value="1825" id="a1825" /><label
for="a1825">18-25</label>
<input name="Reg_Age" type="radio" value="2535" id="a2535"/><label
for="a2535">25-35</label><br />
for="a3530">35-50</label>
<input name="Reg_Age" type="radio" value="after50" id="aa50"/><label
for="aa50"> 50</label><br />
</form>
</body>
</html>
, LABEL .
: .
FIELDSET, ,
, . title, .
6.2.
, LEGENG, . LEGEND
: align , title
. , .
align:
right ;
left ;
center .
6.19 .
.
6.19.
<html>
<head>
<title> </title>
</head>
<body>
<fieldset title=" ">
<legend title=" " align="left">
</legend>
<input name="id_user" type="hidden" value="27" />
: <input type="text" name="Reg_login" maxlength="12" value=
"< 10 " size="14" /><br />
: <input type="password" name="Reg_password" value=
"" /><br />
</fieldset>
<legend title=" " align="center">
</legend>
: <input type="text" name="Reg_name" value=" " /><br />
: <input type="text" name="Reg_surname" value="
" /><br />
: <input type="text" name="Reg_patronymic" value="
" /><br />
167
168
6.
<br />
: <input name="Reg_Age" type="radio" value="before18"
id="ab18"/><label for="ab18"> 18</label>
<input name="Reg_Age" type="radio" value="1825" id="a1825" /><label
for="a1825">18-25</label>
for="a2535">25-35</label><br />
for="a3530">35-50</label>
<input name="Reg_Age" type="radio" value="after50" id="aa50"/><label
for="aa50"> 50</label><br />
</fieldset>
<legend title=" " align="right">
</legend>
:
<select name="R_Place" size="1" >
<optgroup label="">
</optgroup>
<optgroup label="">
<option value="LA">-</option>
<option value="Va"></option>
<option value="NY">-</option>
</optgroup>
<optgroup label="">
<option value="Par"></option>
<option value="Lion"></option>
</optgroup>
</select><br />
( ):<br />
<select name="R_Job" size="8" multiple="multiple" >
<optgroup label="">
<option value="biz"></option>
6.2.
<option value="ecol"></option>
<option value="tur"></option>
</optgroup>
<optgroup label="">
<option value="web">Web-</option>
<option value="CPP">/++</option>
<option value="Del">Delphi</option>
</optgroup>
<optgroup label=" ">
<option value="Diz"></option>
<option value="Html"></option>
</optgroup>
<optgroup label="">
<option value="Eng"></option>
<option value="Fr"></option>
<option value="Ger"></option>
</optgroup>
<optgroup label="">
</optgroup>
</select><br />
: <input name="Reg_hobby[]" type="checkbox" value="sing" />
<input name="Reg_hobby[]" type="checkbox" value="float" />
<input name="Reg_hobby[]" type="checkbox" value="walk" />
<input name="Reg_hobby[]" type="checkbox" value="work" checked /><br />
<input name="Reg_hobby[]" type="checkbox" value="drive" checked />

<input name="Reg_hobby[]" type="checkbox" value="cook" />
<input name="Reg_hobby[]" type="checkbox" value="dance" />
<input name="Reg_hobby[]" type="checkbox" value="read" checked />
<br />
: <input name="Reg_foto" type="file" size="55" /><br />
:<br />
<textarea cols="24" rows="10" name="about" wrap="off" > ,
.</textarea><br />
169
170
6.
</fieldset>
<legend title=" " align="center"> </legend>
:<br />
<textarea cols="24" rows="3" name="about" readonly >
</textarea><br />
</fieldset>
<input name="submit" type="image" src="Send.jpg" alt=",
" align="left" border="5" /><input name="reset" type="image" src="Clear.
jpg" alt=" " align="right" />
</form>
</body>
</html>
.6.11.
.6.11.
.6.11 ,
.
. , ,
. . ,
.
171

CSS
7.1. CSS HTML
7.2. CSS
7.3.
7.4.
7.5. @media
7.6. !important
7.7. @impor
7.1. CSS HTML
CSS. , .
HTML, . CSS
-, . HTML4
, . XHTML -
CSS, , ,
CSS.
7.1. CSS HTML

HTML- (7.1).
7.1. HTML-
<html>
<head>
<title> </title>
</head>
<body>
<h1> </h1>
<p> .
</body>
</html>
H1 , color FONT CSS-:

h1 { color: blue }
CSS : H1 color:
blue. , , : color
blue. , , , , , CSS .
HTML4
HTML-. CSS-
HTML-. HTML-.
CSS HTML, STYLE,
,
173
174
7. CSS
HEAD. 7.2 HTML- .

7.2. CSS HTML-
<html>
<head>
<title> </title>
h1 { color: blue }
</style>
</head>
<body>
<h1> </h1>
<p> .
</body>
</html>

. ,
. ,
1000. - , .
, CSS- .
HTML- LINK, , STYLE, , HEAD.
7.3.
7.3.
<html>
<head>
<title> </title>
<link rel="stylesheet" href="my_style.css" type="text/css">
</head>
<body>
<h1> </h1>
<p> .
</body>
</html>
7.1. CSS HTML
, LINK . :
rel , stylesheet;
href , .
7.3 my_style.css;
type . LINK
HTML-,
.
text/css.

, (7.4),
STYLE.
7.4.
<html>
<head>
<title> </title>
body { color: red }
h1 { color: blue }
</style>
</head>
<body>
<h1> </h1>
<p> .
</body>
</html>
:
red, , H1, blue.
P , , : BODY. H1
, .
CSS 100 ,
color. 7.5.
175
176
7. CSS
7.5. CSS
<html>
<head>
<title> </title>
body {
font-family: "Some Type", sans-serif;
font-size: 12pt;
margin: 3em;
}
</style>
</head>
<body>
<h1> </h1>
<p> .
</body>
</html>
, {}.
, .
.
BODY Some Type.
,
SansSerif, ,
. font-family BODY. .
BODY 12. , CSS, .
,
: em.
7.2. CSS
, ,
HTML-, CSS.
7.2. CSS

CSS, , . ,
CSS (... ...). , ,
red , "red" .
:
width: "auto";
background: "green";
border: "none";
. , .
auto .
green, ,
none, , . ,
.
CSS /* */.
.
. , , CSS-.
.
CSS- :
/* */
h1 { color: blue }
, CSS-.
@
@ @,
(, @import, @page).
.
, CSS @import, CSS
. .
:
177
178
7. CSS
@import "subs.css";
h1 { color: blue }
@import "list.css";
@import .
@ . , HTML-,
:
@import "subs.css";
h1 { color: blue }
@:
@import "subs.css";
@media print {
@import "print-main.css";
body { font-size: 10pt }
}
h1 {color: blue }
@import ,
@media.
@.
7.3.
CSS ,
. ,
.
CSS . , , ,
.
, :
h1 { color: red }
h2 { color: red }
h3 { color: red }
7.3.
, :
h1, h2, h3 { color: red }
, .

, - ,
. ,
.
, HTML- :
<h1> <em></em> </h1>
, H1 . CSS-, ,
EM , :
h1 { color: red }
em { color: blue }
,
EM, , , H1,
CSS-:
h1 em { color: blue }
,
. , ,
. :
body div p span { color: green }
SPAN, P, , , DIV, SPAN

. BODY ,
.
,
, *. ,
.
179
180
7. CSS
, , :
body * span { color: green }
, , SPAN
DIV. ,
.

, . ,
, class, first. ,
- , , :
p.first + p { margin-top: -5mm }
,
, CSS.

CSS , , HTML-. .
[att] att
.
[att=val] att val.
[att~=val] att
, , val.
[att|=val] att val . .
, .
, CSS P,
align, :
p[align] { color: blue; }
7.3.
, CSS, SPAN, class example:

span[class=example] { color: blue; }

.
TABLE,
width 90%, height 50%:
table[width="90%"][height="50%"] { color: blue; }
= ~=.
, , copyright copyleft
copyall rel. ,
href http://www.yoursite.com/:
a[rel~="copyright"]
a[href="http://www.yoursite.com/"]
, lang
fr, :
*[lang=fr] { display : none }
lang,
ru, ru, ru-RU ru-UA:
*[lang|="ru"] { color : red }

, HTML-, class (.) ~=. , HTML DIV.value DIV[class~=value]
.
(.).
, class~=test :
*.test { color: red }
/* class~=test */

.test { color: red }
/* class~=test */
181
182
7. CSS
. H1 class~=test:
h1.test { color: green }
/* H1 class~=test */

H1 , :
<h1> </h1>
<h1 class="test"> </h1>
class ,
, (.).
, P,
class
, test marine:
p.test.marine { color: green }
, , , P class="Test
blue aqua marine", , class="test blue".
ID-
ID HTML-. CSS ID-
. CSS ID-
#, ID.
, ID- H1, ID chapter7:
h1#chapter7 { text-align: center }
7.6 , ID z98y. , P.
7.6. ID-
<head>
<title> 7</title>
*#z98y { letter-spacing: 0.3em }
</style>
7.4.
</head>
<body>
<p id=z98y> </p>
</body>
7.7
H1, ID z98y.
P.
7.7. ID-
<head>
<title> 7</TITLE>
h1#z98y { letter-spacing: 0.5em }
</style>
</head>
<body>
<p id=z98y> </p>
</body>
, ID- ,
. , HTML- #p123 ,
[ID=p123].
7.4.
CSS HTML-.
, -
. , HTML
, , CSS, .
CSS ,
, HTML-.
, .
:first-child.
183
184
7. CSS
:first-child
:first-child ,
.
, , , .
P,
DIV. ,
DIV:
div > p:first-child { text-indent: 0 }
P DIV :
<p> P .
<div class="note">
<p> P .
</div>
P , , DIV H2:
<p> P .
<div class="note">
<h2></H2>
<p> P .
</div>
bold EM, P:
p:first-child em { font-weight : bold }
, ,
, . , EM P:
<p> <em></em> .</p>
,
, . ,
:
font-weight : bold
7.4.

- . CSS :link :visited
:
:link , ;
:visited , .
HTML , . HTML4 A href.
, CSS :
a:link { color: red }
:link { color: red }
<a class="external" href="http://yoursite.com/"></a> , a.external:visited { color:

blue } .

HTML-
. CSS .
:hover , ( , ) ,
. , ,
, .
:active , . , , .
:focus , .
, .
, .
. :
a:link
{ color: red }
a:visited { color: blue }
/* */
/* */
a:hover
{ color: yellow } /* ,
*/
a:active
{ color: white }
/* */
185
186
7. CSS
, a:hover
a:link a:visited, color a:hover. ,
a:active a:hover, , .
:
a:focus { background: yellow }
a:focus:hover { background: white }
CSS A,
:focus :hover.
:lang
HTML- , CSS
, , . , HTML lang, META , , (,
HTTP).
:lang(ru) , ru.
ru . |=.
:
ru ;
en ;
fr ;
de ;
jp .
, HTML-, :
html:lang(fr) { quotes: "
" }
html:lang(de) { quotes: " " \2039 \203A }

:lang(fr) > Q { quotes: "
" }
:lang(de) > Q { quotes: " " \2039 \203A }
quotes Q . ,
7.4.
,
, limpro
viste, .
:first-line
:first-line . :
p:first-line { text-transform: uppercase }

. p:first-line
HTML-. , .
, , , .
HTML-, :
<p>
HTML-, .
. .</P>
:
!!!
HTML-,
.

.
.
, :first-line. , :
<p><p:first-line> HTML-,
</p:first-line> .
.
. </p>
187
188
7. CSS
,
,
. ,
SPAN, :
<p><span class="test"> HTML-,
.</span>
.
.</p>

SPAN
:first-line. :
<p><p:first-line><SPAN class="test">
HTML-, </span></p:first-line><span class="test">
. </span>
.
.</p>
:first-line . , . :first-line : , ,
, word-spacing, letter-spacing, text-decoration, vertical-align,
text-transform, line-height, text-shadow clear.
:first-letter
:first-letter
, . , float
none, .
:first-letter :
, , , text-decoration, vertical-align (
float none), text-transform, line-height,
, , , float, text-shadow clear.
7.8
.
7.8.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">

<html>
<head>
7.4.
<title> 7. </title>
p
{ font-size: 12pt; line-height: 12pt }
p:first-letter { font-size: 200%; font-style: italic;

font-weight: bold; float: left }
span
{ text-transform: uppercase }
</style>
</head>
<body>
<p><span></span>
" HTML CSS".</p>
</body>
</html>
7.8 , .7.1.
.7.1.
:
<p>
<span>
<p:first-letter>
</p:first-letter>
</span>
"".
</p>
, :first-letter (, ), :first-line ,
.
189
190
7. CSS
, . , ,
ij , :first-letter.
,
. P ,
24.
, . CSS- :
p { color: red; font-size: 12pt }
p:first-letter { color: green; font-size: 200% }
p:first-line { color: blue }
, CSS :
<p> , </p>
, , :
<p>
<p:first-line>
<p:first-letter>
</p:first-letter> ,
</p:first-line>

</p>
, :first-letter
:first-line. , :first-line, :first-letter, , :first-letter
.
:before :after
:before :after .
h1:before {content: counter(chapno, upper-roman) ". "}
7.5. @media
:first-letter :first-line :before :after, ,

.
p.special:before {content: "! "}
p.special:first-letter {color: gold}
! .
7.5. @media
@media CSS , . ,
,
.
:
@media print {
}
@media screen {
}
10,
12.
:
@media screen, print {
}
, 14.
, CSS. ,
:
all ;
aural ;
191
192
7. CSS
braille ;
embossed ;
handheld (
);
print , ;
projection ,
;
screen ;
tty , ,
, ; tty ;
tv , ,
, .
, .
, CSS,
CSS . .7.1
.
7.1.
/
/
aural
continuous
aural
N/A
both
braille
continuous
tactile
grid
both
emboss
paged
tactile
grid
both
handheld
both
visual
both
both
print
paged
visual
bitmap
static
projection
paged
visual
bitmap
static
screen
continuous
visual
bitmap
both
tty
continuous
visual
grid
both
tv
both
visual, aural
bitmap
both
handheld
both
visual
both
both
7.6. !important
both , .
:
continuous;
paged;
visual;
aural;
tactile;
grid;
bitmap;
interactive;
static.

screen print
.
7.6. !important
CSS
.
.
!important . , !important,
!important !important .
CSS , ( ,
..) .
, (,
background) !important
!important.
!important,
193
194
7. CSS
. , !important. !important,

( ). ,
, , !important. , !important
.
/* */
p { text-indent: 1em ! important }
p { font-style: italic ! important }
p { font-size: 18pt }
/* */
p { text-indent: 1.5em !important }
p { font: 12pt sans-serif !important }
p { font-size: 24pt }
7.7. @import
@import
. @import
. @import URL-
, .
. , url(...).
@import ( url(...)
):
@import "mystyle.css";
@import url("mystyle.css");
@import, .
URL , .
,
@media, ,
.

@import url("fineprint.css") print;
@import url("bluish.css") projection, tv;
- . all
, .
CSS.
CSS. , ,
, , ,
.
195

CSS
8.1.
8.2.
8.3.
8. CSS
CSS.
, CSS.
CSS ,
- .
, HTML ,
. CSS.
CSS
, HTML-, (8.1, .8.1).
8.1. HTML-
<html>
<head>
<title> 8. CSS</title>
<link href="my_style.css" rel="stylesheet">
</link>
</head>
<body>
<h1> CSS</h1>
<p class="namek">: , .</p>
<h2></h2>
<p> CSS ,
, , .
,
-.</p>
<p> .
, .
.</p>
<p class="w_600"> , "" 600
HTML .
, <span class="bg_test"></span> .</p>
<p> ,
<a href="#"> 9.</a></p>
</body>
</html>
197
198
8. CSS
.8.1. HTML-
, , 8.1, . , .
,
. ,
-.
, , . , .
CSS-
.
CSS- HTML- .
HTML-. ,
, CSS
, HTML- .
my_style.css
, .
,
, , . ,
,
P CSS-:
8.1.
p {
color: red;
text-align: right;
}
. .7.3.
.
, .
, ,
,
, .
.8.2, .
,
.
8.1.
,
-.
CSS, .
, CSS . , , . ,
BODY. , ,
. ,
.
blue_text, blue_text
. P, BODY,
,
P. - P,
, P, .
- , ,
.

color,
.
199
200
8. CSS
. HTML
H1, my_style.css :
h1 {
color: red;
}
.
1. , . ,
. red blue.
2. ,
#ff0000. red #ff0000, .
3. RGB-: rgb(255, 0, 0).
.
color . , ,
, ,
.
, , CSS :
link , ;
visited , ;
active ;
hover , .
, , : . ,
,
, :
a:hover {
color: grey;
}
. ,
, .8.2.
8.1.
.8.2.

, .

background-color. , , . , , : , RGB-.
. , H1, . ,
, :
h1 {
background-color: blue;
}
, , - .
.8.3.
201
202
8. CSS
.8.3.
, , .8.3 .
, H1 .
P. , , H1 SPAN
:
h1 span {
background-color: blue;
}

h1span.
H1 SPAN:
<h1><span> CSS</span></h1>
.
, ,
, .
8.2.
8.2.
,
. ,
. , .

font-family , . ,
.
,
. ,
. .
,
. CSS : serif, sans-serif,
monospace, fantasy, cursive.
, . , , , .
TrebuchetMS ,
, sans-serif (.8.4):
p {
font-family: "Trebuchet MS", sans-serif;
}
, .8.4, , TrebuchetMS.
, , .
.
,
203
204
8. CSS
.8.4.

:
serif Times New Roman, Garamond, Georgia;
sans-serif Trebuchet, Arial, Verdana;
monospace Courier, Courier New, Andale Mono.

, , , .

font-style,
: normal, oblique italic.
.
normal , Normal. .
oblique , Oblique. ,
, Oblique, Slanted Incline . .
8.2.
italic , Italic ,
, , Oblique. Italic, ,
Italic, Cursive Kursiv .
P namek :
p.namek {
font-style: italic;
}
.8.5. : ,
.
.8.5.
,
:
body {
font-style: oblique;
}

font-variant : normal
small-caps. small-caps,
205
206
8. CSS
. normal, ,
.
. small-caps
:
h2 {
font-variant: small-caps;
}
Internet Explorer6 .8.6.
.8.6.
, font-variant small-caps,
, , ,
.
.

font-weight .
100 900 ( ), , . .
8.2.
normal .
400.
bold , . 700.
bolder , . 900, 900.
lighter , , . 100, 100.
font-weight w_600 P, 600.
p.w_600 {
font-weight: 600;
}
.8.7.
.8.7.
207
208
8. CSS
BODY
font-weight normal, 400. ,
.

. font-size.
, : .
:
in , 2,5;
mm ;
cm ;
pt , 1/7;
pc ( 12).
:
em ;
ex x;
px ;
% .
, ( , ).
, 14:
p {
font-size: 14pt;
}
.8.8.
CSS . .
8.3.
.8.8. 14pt
8.3.
CSS . .
, HTML- . HTML , . ,
- , , . , , , ,
. CSS text-indent
. , . . 100%
.
25 (.8.9):
p {
text-indent: 25px;
}
209
210
8. CSS
.8.9. 25

, .

text-align, , align P.
, :
left ;
right ;
center ;
justify .
, (.8.10):
h1 {
text-align: center;
}
p.namek {
text-align: right;
}
8.3.
.8.10.

CSS .
text-decoration. :
none ;
underline ;
overline ;
line-through ;
blink .
, .
, .
, , .
none .
, .
211
212
8. CSS
. underline . ,
. ,
, ,
none.
.
text-decoration, none, hover underline
(.8.11).
a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
.8.11.
.8.11 , 9 .
, , .
8.3.

letter-spacing.
.

6:
h1 {
letter-spacing: 6px;
}
.8.12.
.8.12.
.
,
.

, ,
word-spacing. normal, .
213
214
8. CSS
, CSS-:
h1 { word-spacing: 1em }
H1 1em.

text-transform . :
capitalize ;
uppercase ;
lowercase .
:
(.8.13):
h1 {
text-transform: capitalize;
}
.8.13.
8.3.
letter-spacing,
. . ,
, ,
. .

, , .

CSS .
white-space. ,
, :
normal ;
pre , , ;
nowrap , normal , ,
, BR.
:
body { white-space: pre }
HTML- , ,
.

, CSS- direction.
:
ltr ;
rtl .
215
216
8. CSS

CSS. ,
, , ,
.
.
-.
HTML-
CSS
9.1.
9.2.
9.3.
9.4.
9.5.
9.6.
9.7.
9.8.
218
9. HTML- CSS
CSS .
, . .
9.1.
,
. ,
, background-color
transparent, .
, HTML-, HTML.
BODY, HTML.
, 9.1.
9.1.
<html>
<head>
<title> 9. </title>
body { background: url("http://style.com/marble.png") }
</style>
</head>
<body>
<p> .
</body>
</html>
, 9.1, , marble.png.
: background-color, backgroundimage, background-repeat, background-attachment, backgroundposition background.
.
, background-color. , , ,
RGB- , transparent. transparent - .
9.1.
:
body { background-color: #FF0000 }
.
background-image. ,
, . , ,
. ,
,
. .
none, , ,
. :
body { background-image: url("some_bgimage.gif") }
p { background-image: none }

some_bgimage.gif.
P ,
( , ).
,
background-repeat, , ,
, . :
repeat , ;
repeat-x ;
repeat-y ;
no-repeat : .
:
body {
background: white url("pendant.gif");
background-repeat: repeat-y;
background-position: center;
}
. .
219
220
9. HTML- CSS
, backgroundattachment, , ( fixed)
( scroll) .
:
body {
background: red url("pendant.gif");
background-repeat: repeat-y;
background-attachment: fixed;
}
- HTML-
, pendant.gif. .
,
background-position.
.
, , .
0% 0%, .
100% 100%, .
14% 84%, 14% 84% .
, , ,
14% 84% .
, . , 2cm 2cm,
2 2 , .
, .
:
top left left top 0% 0%;
top, top center center top 50% 0%;
right top top right 100% 0%;
left, left center center left 0% 50%;
9.2.
center center center 50% 50%;
right, right center center right 100% 50%;

bottom left left bottom 0% 100%;
bottom, bottom center center bottom 50% 100%;

bottom right right bottom 100% 100%.
,
,
50%. ,
.
(, 50% 2cm).
. ,
.
, ,
background. :
body { background: url("chess.png") gray 50% 20% repeat fixed }
9.2.
,
, HTML-. . , .
,
, . , ,
? ,
, , ,
, ,
9. .
, HTML CSS
.
CSS :
content :before
:after;
, display
list-item.
221
222
9. HTML- CSS
CSS
content.
:before :after
:before :after . , ,
,
HTML-. content, ,
.
.
:
p:after { content: "." }
, :before :after HTML-. .

, :
p:before {
content: open-quote;
color: red
}
P ,
, .
content
:before :after
.
. .
content : ,
URL- , , ,
. ,
, , .
, . :
content: " " counter(imagenum) ". " attr(alt)
9.2.
,
.
::
p:before { content ": " }
\A. , ,
BR.
:
p:before {
content: ":\A"
}
:,
.
, .
, .
, , alt IMG:
img:before { content: attr(alt) }
, , ,
alt, .
. ,
.
, - , , .
CSS , .
quotes , content
.
quotes.
. :
223
224
9. HTML- CSS
/* */
Q:lang(ru) { quotes: " " "" "" }
Q:lang(no) { quotes: "" "" "<" ">" }
/* Q */
Q:before { content: open-quote }
Q:after
{ content: close-quote }
HTML-, 9.2.
9.2.
<html>
<head>
<title> 9</title>
</head>
<body>
<p><q> .</q>
</body>
</html>
:
" ."
HTML-, 9.3, :
"Trndere gra ter na r <Vinsjan pa kaia> blir deklamert."
9.3.
<html>
<head>
<title> 9</title>
</head>
<body>
<p><q>Trndere gra ter na r <q>Vinsjan pa kaia</q> blir deklamert.</q>
</body>
</html>
, , ,
open-quote close-quote, content. open-quote close-quote
9.3.
,
quotes.
Open-quote , close-quote .
.
, ,
.9.1, \.
9.1.

"
'
<
>
,,

0022
0027
2039
203A
00AB
00BB
2018
2019
201C
201D
201E
:
quotes: """ """ "\2039" "\203A"
9.3.
CSS : counter-increment
counter-reset. , , counter() counters() content.
.
counter-increment
,
. , . .
.
counter-reset
, .
225
226
9. HTML- CSS
, . 0.
,
:
1:
1.1;
1.2.
2:
2.1;
2.2 ..
:
h1:before {
content: " " counter(chapter) ". ";
counter-increment: chapter;
/* 1 */
counter-reset: section;
/* 0 */
}
h2:before {
content: counter(chapter) "." counter(section) " ";
counter-increment: section;
}
, ,
. , , .
,
content,
, .
, counter-reset .

imagenum:
h1 { counter-reset: section -1 }
h1 { counter-reset: imagenum 99 }
, :
h1 { counter-reset: section -1 imagenum 99 }
9.3.

, , list-style-type.
:
counter(" ", list-style-type)
, , :
counter(" ")
, list-style-type.
, disc (), circle (), square () none (). :
h1:before
{ content: counter(chno, upper-latin) ". " }
h2:before
{ content: counter(section, upper-roman) " " }
blockquote:after { content: " [" counter(bq, hebrew) "]" }

div.note:before
{ content: counter(notecntr, disc) " " }
p:before
{ content: counter(p, none) }
HTML-, , CSS-, .
display: none
, , display none, .
, , , H2 do_not_
display count_h2:
H2. do_not_display {counter-increment: count_h2; display: none}
, , visibility
hidden, .
C
.
227
228
9. HTML- CSS
, display: marker
, , -
. .
.
, , display: marker,
.
, list-style-type.
, list-style-image
none , URL, .
: , ,
none, , .
. .
disk, circle square. , .
9.4.
9.4. CSS
<html>
<head>
<title> 9. </title>
ol { list-style-type: square }
</style>
</head>
<body>
<ol>
<li> .
<li> .
<li> .
</ol>
</body>
</html>
. . , CSS,
:
decimal , 1;
decimal-leading-zero , (, 01, 02, 03 ... 98, 99);
9.3.
lower-roman , (i, ii, iii,

iv, v ..);
upper-roman , (I, II,
III, IV, V ..);
hebrew ;
georgian (an, ban, gan, ..., he, tan, in,
in-an, ...);
armenian ;
cjk-ideographic ;
hiragana a, i, u, e, o, ka, ki, ...;
katakana A, I, U, E, O, KA, KI, ...;
hiragana-iroha i, ro, ha, ni, ho, he, to, ...;
katakana-iroha I, RO, HA, NI, HO, HE, TO, ....
, .
:
lower-latin lower-alpha ASCII (a, b, c, ... z);
upper-latin upper-alpha () ASCII
(A, B, C, ... Z);
lower-greek : (), (),
(g) ..
, 9.5.
9.5.
<html>
<head>
<title> 9. </title>
ol { list-style-type: upper-roman }
</style>
</head>
<body>
<ol>
<li> .
<li> .
<li> .
229
230
9. HTML- CSS
</ol>
</body>
</html>
9.5
:
I .
II .
III .
list-style-image. , . , , list-style-type.
:
UL { list-style-image: url("http://my_site.com/my_marker.jpg") }
my_marker.jpg,
.
list-style-position
. :
outside ;
inside , .
(9.6).
9.6.
<html>
<head>
<title> 9. / </title>
ul
{ list-style: outside }
ul.compact { list-style: inside }

</style>
</head>
<body>
<ul>
9.3.
<li>
<li>
</ul>
<ul class="compact">
<li>
<li>
</ul>
</body>
</html>
HTML-, 9.6, .9.1.
.9.1. /
, ,
.
list-style liststyle-type, list-style-image list-style-position, font. :
UL { list-style: upper-roman inside }
/* UL */
UL > UL { list-style: circle outside } /* UL UL */
list-style
(, LI HTML),
.
CSS , ,
( ) :
OL.alpha LI
{ list-style: lower-alpha } /* LI OL */
OL.alpha > LI { list-style: lower-alpha } /* LI OL */
231
232
9. HTML- CSS
?
. , 9.7.
9.7.
<html>
<head>
<title> 9. </title>
ol.alpha li
{ list-style: lower-alpha }
ul li
{ list-style: disc }
</style>
</head>
<body>
<ol class="alpha">
<li>
<ul>
<li>
</ul>
</ol>
</body>
</html>
, lower-alpha disc ,
. , (
) .
(.9.2).
.9.2.
9.3.
:
OL.alpha > LI
UL LI
, ,
. list-style
:
OL.alpha
UL
list-style OL UL
LI. .
URL ,
:
UL { list-style: url("http://my_site.com/my_image.gif") disc }

, disc.
, list-style
none, list-style-type list-style-image none:
UL { list-style: none }
.
,
HTML- .
CSS
HTML-. CSS
, :
( ) ( , ,
). .
233
234
9. HTML- CSS
, content,
.
. , .
, .
9.8 , .
9.8.
<html>
<head>
<title> 9. </title>
li:before {
display: marker;
content: counter(mycounter, upper-roman) ".";
counter-increment: mycounter;
}
</style>
</head>
<body>
<ol>
<li> .
<li> .
<li> .
</ol>
</body>
</html>
HTML- :
I. .
II. .
III. .
9.3.
.
, display :before :after marker.
:before :after, block inline,
, marker , . . ,
, content - .
.
CSS , :before
, , . ,
. :after ,
,
. ,
.
line-height. ,
:before :after,
,
. , ,
.

vertical-align.
, width.
width auto,
.
, marker-offset.
.
.
235
236
9. HTML- CSS
display CSS- display: list-item

marker, , :before, .
,
6em (9.9).
9.9.
<html>
<head>
<title> .9 </title>
li:before {
display: marker;
content: "(" counter(counter) ")";
counter-increment: counter;
width: 6em;
text-align: center;
}
</style>
</head>
<body>
<ol>
<li> .
<li> .
<li> .
</ol>
</body>
</html>
, 9.9, ,
:
(1)
(2)
(3)
(9.10). .
9.3.
9.10.
<html>
<head>
<title> 9. </title>
li:before {
display: marker;
content: url("smiley.gif");
li:after {
display: marker;
content: url("sad.gif");
}
}
</style>
</head>
<body>
<ul>
<li>
<li>
</ul>
</body>
</html>
9.10 :
:-)
:-(
:-)
:-(
, (9.11).
9.11. ,
<html>
<head>
<title> 9. , </title>
237
238
9. HTML- CSS
p { margin-left: 12 em; }
p.note:before {
display: marker;
content: url("note.gif")
" " counter(note-counter) ":";
counter-increment: note-counter;
text-align: left;
width: 10em;
}
}
</style>
</head>
<body>
<p> .</p>
<p class="note"> .</p>
<p>.</p>
</body>
</html>
9.11 :
.
1: .
.

, marker-offset.
auto.
.
. , , 8em (9.12).
9.12.
<html>
<head>
<title> 9. </title>
9.4.
p { margin-left: 8em } /* 8em */
li:before {
display: marker;
marker-offset: 3em;
content: counter(mycounter, upper-roman) ".";
counter-increment: mycounter;
}
</style>
</head>
<body>
<p> ...
<ol>
<li> .
<li> .
<li> .
</ol>
<p> ...
</body>
</html>
:
...
I. .
II. .
III. .
...
,
.
9.4.
.
.
239
240
9. HTML- CSS

CSS :
. HTML ,
.
.
,
, , .
border , ,
border-collapse collapse.
background .
width .
visibility visibility
collapse, , , , . ,
. visibility .
CSS-, :
col.totals { background: blue }
table { table-layout: fixed }
col.totals { width: 5em }
totals ,
, .

caption-side.
. ,
, :
top ;
bottom ;
left ;
right .
9.4.
, TABLE, , , , :
;
compact run-in,
.
, ,
;
.
, , width, auto, ,
auto . , ,
, auto
.

text-align.

vertical-align. top, middle
bottom.
top.
, .
caption {
caption-side: bottom;
width: auto;
text-align: left
}
caption-side
. ,
.
.
body {
margin-left: 8em
}
table {
241
242
9. HTML- CSS
margin-left: auto;
margin-right: auto
}
caption {
caption-side: left;
margin-left: -8em;
width: 8em;
text-align: right;
vertical-align: bottom
}
. auto,
,
.

,
(.9.3). ,
, , .
.9.3.
9.4.
.
1. .
, .
2. . , .
3. ,
. , ,
.
4. , .
, . ,
.
5. . .
6. . .9.3,
,
. ,
.
,
9.13. ,
, , ,
.
9.13. CSS
<html>
<head>
table { background: #ff0; border-collapse: collapse }
td
{ background: red; border: double black }
</style>
</head>
<body>
<p>
<table>
<tr>
<td> 1
<td rowspan="2"> 2
<td> 3
<td> 4
</tr>
243
244
9. HTML- CSS
<tr><td></td></tr>
</table>
</body>
</html>
, 9.13, ,
.9.4.
.9.4.
, CSS.

,
table-layout. .
fixed ;
,
.
width auto.
auto .
.

, height TABLE.
, , auto, .
height,
table-row, .
9.4.

vertical-align
. ,
, . vertical-align .
baseline , , .
top , .
bottom ,
.
middle , .
sub, super, text-top, text-bottom . .

text-align. text-align
,
. .
. text-align , ,
.
. :
td { text-align: "." }
td:before { content: "$" }
HTML-, :
<table>
<col width="40">
<tr> <th>
<tr> <td> 1.30
<tr> <td> 2.50
245
246
9. HTML- CSS
<tr> <td> 10.80
<tr> <td> 111.01
<tr> <td> 85.
<tr> <td> 90
<tr> <td> .05
<tr> <td> .06
</table>
, , . :before .
:

$1.30
$2.50
$10.80
$111.01
$85.
$90
$.05
$.06

visibility , , collapse. , ,
. , .
,
, , -, , -,
.
: border,
border-collapse border-spacing.
9.4.
border .
.
.
border-collapse . separate . collapse .
border-spacing .
.
, .
, , . , .
:
table { border: outset 10pt;
border-collapse: separate;
border-spacing: 15pt }
td { border: inset 5pt }
CSS- 10.
separate border-collapse,
5. 15.

, CSS .
border-style.
.
none .
hidden none, .
dotted .
dashed .
solid .
double . border-width.
groove .
247
248
9. HTML- CSS
ridge groove, .
inset .
,
groove.
outset .
,
ridge.
,
. .9.7.

CSS , .
, CSS empty-cells.
, . , ,
visibility hidden.
( ) , CSS-:
table { empty-cells: show }
9.5.
, , , , .

CSS cursor.
.
auto .
crosshair ( +).
default , . .
pointer , .
9.5.
move , , .
e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize,
s-resize, w-resize ,
. , ,
, se-resize.
South East.
text , . |.
wait , ,
. .
help , , , ,
. .
hand . .
uri__
, URL-.
,
, , .. , ,
, . :
p { cursor : url("mything.cur"), url("second.csr"), text; }
P
, mything.cur. , second.csr , . ,
, .

, CSS , .
ActiveBorder .
ActiveCaption .
AppWorkspace .
249
250
9. HTML- CSS
Background .
ButtonFace .
ButtonHighlight (, ).
ButtonShadow .
ButtonText .
CaptionText , .
GrayText () . - , #000.
Highlight , .
HighlightText , .
InactiveBorder .
InactiveCaption .
InactiveCaptionText .
InfoBackground .
InfoText .
Menu .
MenuText .
Scrollbar .
ThreeDDarkShadow .
ThreeDFace .
ThreeDHighlight .
ThreeDLightShadow (,
).
ThreeDShadow .
Window .
WindowFrame .
WindowText .
CSS-:
body { background: Background; }
9.5.
HTML- , .

. , , .
caption (, ..).
icon .
menu (,
).
message-box .
small-caption .
status-bar , .
:
h1 { font: caption; }
H1 ,

.

, ,
, .. CSS,
,
:
;
.
outline-width, outline-style
outline-color.
251
252
9. HTML- CSS
outline. , outlinestyle, outline-width outline-color. .

outline-style ,
border-style, hidden:
none, dotted, dashed, solid, double, groove, ridge, inset, outset.
outline-width .
outline-color , invert,
,
. ,
.

HTML-, , .
:
:focus
{ outline: thick solid black }
:active { outline: thick solid red }
HTML-,
, , , ,
.
9.6.
-
. , .

, , , .
. margin .
: margin-top, margin-right, margin-bottom, margin-left ,
.
9.6.
margin .
.
. .
auto . ,
.
CSS,
, 2em.
H1 { margin-top: 2em }
margin. ,
- :
body {
margin-top: 2em;
margin-right: 2em;
margin-bottom: 2em;
margin-left: 2em;
}
margin ,
. , , .
, , , . , , ,
, , .
margin , . , , .
, , , . , ,
, , ,
.
:
body { margin: 1em 2em 3em }
253
254
9. HTML- CSS
HTML-, , , 1em, 2em, 3em 2em

.

.
: padding-top, padding-right,
padding-bottom padding-left, , ,
. .
padding .
.
. .

, auto. ,
, , .
padding :
padding-top, padding-right, padding-bottom padding-left.
padding , . , .
, ,
. ,
, ,
. , , , .
, background:
h1 {
background: white;
padding: 1em 2em;
}
(padding-top paddingbottom) (padding-right padding-left) 1em 2em . ,
9.7.
em : 1em .
9.7.
,
, . .

border-top-width, border-right-width, borderbottom-width, border-left-width,
, , .
, ,
:
thin ;
medium ;
thick ;
. , , , .
, -
thin, medium thick, :
thin<=medium<=thick.
border-width, : border-top-width, borderright-width, border-bottom-width border-left-width. ,
border-width ,
. ,
, . ,
, ,
. , , , .
CSS-:
h1 { border-width: thin }
/* */
h1 { border-width: thin thick }
/* */
h1 { border-width: thin medium thick }
/* */
255
256
9. HTML- CSS
, H1. , H1
. H1
, , .
, .

,
: border-top-color, border-right-color, border-bottom-color,
border-left-color border-color.
, , .
, transparent,
. transparent, , - .
:
p {
border-width: 2px
border-color: blue;
}
P .

: border-topstyle, border-right-style, border-bottom-style, border-left-style
border-style.
(, , ..),
. .
none . border-width
.
hidden none, , .
dotted .
dashed .
9.8.
solid .
double .
border-width.
groove .
ridge groove:
.
inset .
outset inset: .
.
groove, ridge, inset outset color.
border-style .
, , border-width.
:
#xyz { border-style: solid dotted }
solid, dotted.
, , none,
, .
9.8.
. , , .

position float , .
.
static , . left top .
257
258
9. HTML- CSS
relative
( ).
.
, , .
absolute (, )
left, right, top bottom. . . ,
. , .
fixed ,
. ( ).
, (,
).
fixed -. , ,
, .
@media, :
@media screen {
h1#first { position: fixed }
}
@media print {
h1#first { position: static }
}

, , position
, static.
, .
top .
9.8.
right
.
bottom
.
left .
.
.

( left right) ( top bottom)
. , , ,
top bottom, auto.
auto , ,
, auto.

, . , .

, . float , ,
. , , . .
left , . , (
clear). display ,
none.
right left , , .
none .
259
260
9. HTML- CSS
, IMG class="icon", :
IMG.icon {
float: left;
margin-left: 0;
}
HTML- 9.14.
9.14.
<html>
<head>
<title> 9. </title>
img { float: left }
body, p, img { margin: 2em }
</style>
</head>
<body>
<p><img src="img.gif" alt=" ">
, ...
</body>
</html>
, IMG, . , , . , , , ,
, ( , P).
:
<body>
<p> ,
<img src="img.gif" alt=" ">
...
</body>
, , , , .
9.8.

. ,
. . .
. , ,
.

. ,
.9.5.

HTML- ,
9.15.
.9.5.
9.15. CSS
<html>
<head>
<title> 9. CSS</title>
body { height: 8.5in } /* */
/* , */
/* */
#header {
position: fixed;
width: 100%;
height: 15%;
top: 0;
right: 0;
bottom: auto;
left: 0;
}
#sidebar {
261
262
9. HTML- CSS
position: fixed;
width: 10em;
height: auto;
top: 15%;
right: auto;
bottom: 100px;
left: 0;
}
#main {
position: fixed;
width: auto;
height: auto;
top: 15%;
right: 0;
bottom: 100px;
left: 10em;
}
#footer {
position: fixed;
width: 100%;
height: 100px;
top: auto;
right: 0;
bottom: 0;
left: 0;
}
</style>
</head>
<body>
<div id="header"> ...
</div>
<div id="sidebar"> ...

<div id="main"> ...
</div>
</div>
<div id="footer"> ...
</div>
</body>
</html>
,
, .
9.8.

, z-index. .
.
0.
auto .
, 9.16.
id.
text2 . z-index.
9.16. z
<html>
<head>
<title> 9. z</title>
.pile {
position: absolute;
left: 2in;
top: 2in;
width: 3in;
height: 3in;
}
</style>
</head>
<body>
<p>
<img id="image" class="pile"
src="someimg.gif" alt=""
style="z-index: 1">
<div id="text1" class="pile"
style="z-index: 3">
.
</div>
263
264
9. HTML- CSS
<div id="text2">
.
</div>
<div id="text3" class="pile"
style="z-index: 2">
text1, .
</div>
</body>
</html>
.
, , ,
. ,
, . .
CSS . , ,
.
10
HTML
10.1. HTML-
10.2.
10.3.
10.4. (DOM)
266
10. HTML
HTML -, . HTML , ,
, - .
JavaScript.
JavaScript - . , -
, .
, , , -
JavaScript .
, .
-. JavaScript,
HTML, , .
10.1. HTML-
JavaScript
. HTML-. , -,
, , , , .
JavaScript HTML-. .
-.
Window, Navigator, Screen, History, Location. .
Window .
History .
Navigator .
Location URL .
Screen .
JavaScript Window. , ,
, .
10.1. HTML-
- HTML-.
, Document. , Document
HTML. , , , ,
, -.
, JavaScript .
. , .
, . JavaScript : o..
, - JavaScript
: document.bgColor = "yellow". document (-, HTML-), bgColor
Document ( -), yellow
bgColor.
, .
. JavaScript
o.eo(). ,
JavaScript - Hello world!,
: document.write("Hello world!").
document , write() , Document, , write().
.
10.1 ,
Document.
10.1. Document
<html>
<head>
<title>Hello!</title>
</head>
<body>
<script language="JavaScript">
document.write("Hello world!"); //
document.bgColor="yellow" //
</script>
</body>
</html>
267
268
10. HTML
,
. -
Hello world! (.10.1).
.10.1.
, HTML-
JavaScript . . , ,
, .
. , . JavaScript .
10.2.
JavaScript -
.
.
JavaScript , .10.2.
.10.2. JavaScript
10.2.
Window,
. . Window
, .
Window Document, History,
Location, Frame. History -. Location URL-
, , Frame
HTML-
.
- Document.
HTML. -: , HTML- ,
, URL-, ..
Document.
HTML- , . Form, Document. Form
, , , . .
- HTML- . ,
(-), .
, img, ,
.
HTML-, (10.2).
10.2. HTML-
<html>
<head>
<title>javascript objects</title>
</head>
<body>
<h1> JavaScript</h1>
<p> </p>
</body>
</html>
269
270
10. HTML
JavaScript.
HTML- Document. , -.
, HTML-.
HTML
-. HEAD TITLE. ,
TITLE JavaScript. BODY
: H1 P.
P. ,
JavaScript H1.
, JavaScript HTML-
.
,
, HTML-, HTML-.
10.3.
,
JavaScript HTML-,
, .
.
Window
Window
JavaScript. ,
, , .
defaultStatus ,
.
status , .
frames .
length .
name , open(), target A name FORM.
10.3.
parent , , .
self , .
top , .
window , .
window self .
, .
frames, length, parent top ,
HTML- . length, , frames (
) .
JavaScript .5.
Window
10.3.
10.3. status Window
<html>
<head>
<title> status Window</title>
</head>
<body>
window.status=" !"
</script>
<p> !</p>
</body>
</html>
(.10.3).
.10.3.
271
272
10. HTML
.
URL-, -.
, Window, , ,
.
alert() Alert () OK.
close() .
confirm() Confirm () OK .
prompt() Prompt () .
open() .
setTimeout() .
clearTimeout() .
.
alert() ,
- .
, OK
.
, alert(), 10.4.
10.4. alert
<html>
<head>
<title> alert</title>
</head>
<body>
alert(" !")
</script>
</body>
</html>
10.3.

! (.10.4).
alert() ,
, Window. ,
, , ,
Window. window: window.alert().
.
confirm()
,
OK . , ,
true false.
ifelse.
.10.4.
confirm() 10.5.
10.5. confirm
<html>
<head>
<title> confirm()</title>

</script>
273
274
10. HTML
</head>
<body onLoad="okno()">
</body>
</html>
confirm(), alert() close().

okno(). confirm(), (.10.5).
.10.5. , confirm()
OK, true, false.

okno() alert()
close() Window. . close() ,
alert() !. , .
Window Self, . , self.close().
,
Window prompt().
, OK.
, prompt()
.
, prompt() (10.6).
10.6. prompt()
<html>
<head>
<title> prompt()</title>
</head>
10.3.
<body>

</script>
</body>
</html>
(.10.6).
.10.6.
, , -
document.write.
prompt() . , ,
onClick. ,
.
close(). open() JavaScript

HTML-
.
open() : open('
URL', '_', config='1, 2, 3,,
n').
open() URL- HTML-, . , data.html.
HTML- , http://
275
276
10. HTML
. , http://www.mysite.ru/download/
javascript.html.
open() target A FORM.
"". ,
, joe.
joe target.
config ,
.
width .
height .
toolbar yes 1, . no,
.
location ,
HTML- ( ).
status .
menubar .
scrollbars .
resizable yes 1,
.
onfig , .
, .
, open() (10.7 10.8).

10.7. okno.html
<html>
<head>
<title> open()</title>
</head>
<body>
10.3.

</script>
</body>
</html>
10.8. okno2.html
<html>
<head>
<title> open()</title>
</head>
<body>
<a href="http://www.ya.ru" TARGET="main window">Yandex</a>
<p><a href="" onClick="window.close">, </a></p>
</body>
</html>
okno.html
okno2.html
(.10.7).
300250,
, , . .10.7.
config, no. ,
status=yes. , .
resizable=yes.
window.name="main window". name Window, main window () . window.name self.name.
, window self .
okno2.html, .

, main window.
target="main window". ,
277
278
10. HTML
, joe main window.

onClick close(): onClick="window.close".
HTML-. : -, .
HTML-, , . , .
Window setTimeout().

.
:
setTimeout("cmd", timeout). ,
timeout ( ), JavaScript, cmd.
, setTimeout(), 10.9.
10.9. setTimeout
<html>
<head>
<title> setTimeout</title>

</script>
</head>
<body>
<form> //
<input type="button" value="Timer" onClick="timer()">
</form>
</body>
</html>
10.3.
HTML-
Timer.
Alert (.10.8).
setTimeout() Window.
.10.8. Alert
3000 (3
) ,
.
alert: "alert(' !')". ,
JavaScript , .
clearTimeout() ,
setTimeout().
clearTimeout() ,
setTimeout():
clearTimeout(idTimer)
setTimeout() clearTimeout()
( ) .
JavaScript.
, Window onLoad onUnload. , , HTML-.
,
. ,
, - , . onUnload
- -.
, onLoad onUnload
BODY.
HTML-, 10.10.
279
280
10. HTML
10.10. onLoad onUnload
<html>
<head>
<title> onLoad onUnload</title>
</head>

</script>
<body bgcolor=white onLoad="hello()" onUnload="bye()">
</body>
</html>
BODY onLoad onUnload.

hello, bye.
HTML- , hello bye BODY.
HTML-.
, , Window,
. JavaScript,
, Navigator.
Navigator
Navigator - .
10.3.
Navigator .
Window, ,
Netscape Navigator.
Navigator .
- .
JavaScript, Navigator .
.
appCodeName (, ) .
appName () , Netscape Internet
Explorer.
appVersion , , .
userAgent , ,
, . , ,
HTTP-. appCodeName
appVersion.
cookieEnabled , cookies, . true, cookies.
Internet Explorer, 4.0.
browserLanguage .
systemLanguage ,
ru, Windows.
userLanguage . Internet Explorer, 4.0.
platform , Win32.
cpuClass ()
. , x86 Alpha. Internet
Explorer, 4.0.
281
282
10. HTML
,
(10.11).
10.11.
<html>
<head>
<title> Navigator</title>
</head>
<body>
<script language=JavaScript>

var an = navigator.appName;
var av = navigator.appVersion;
var acn = navigator.appCodeName;
var ua = navigator.userAgent;
var cook = navigator.cookieEnabled;
var blang = navigator.browserLanguage;
var slang = navigator.systemLanguage;
var ulang = navigator.userLanguage;
var platf = navigator.platform;
var cpu = navigator.cpuClass;

document.write("<b> </b> "+an+" <b></b> "+av+"<br><b>
</b> "+acn+" <b> </b> "+ua+"<br><b>
cookies </b>"+cook+"<br><b> </b>"+blang+
"<br><b> by default </b>"+slang+"<br><b>
</b>"+ulang+ "<br><b> </b>"+platf+"<br><b>
</b>"+cpu)
</script>
</body>
</html>
Navigator
. document.write() - (.10.9).
- Navigator , , .
Navigator (10.12).
10.3.
.10.9.
10.12.
<html>
<head>
<title>Test of Browser name</title>
</head>
<body>
<h1 align=center> </h1>
<hr>

</script>
</body>
</html>
283
284
10. HTML
ifelse
(.10.10).
.10.10.
Internet Explorer,
(.10.11).
, : Microsoft Internet Explorer?.
, Navigator
, , .
.10.11.

, Navigator JavaScript
.
taintEnabled() Netscape Na
vigator.
javaEnabled() ,
JavaScript.
(true false). - .
Screen
Screen
: , , -
10.3.
..
.
, Screen .
width .
height .
availHeight

.
availWidth

.
colorDepth . 16 2,
256 8, 16,7 ( High Color) 32.
updateInterval ( )
. 0 ,
.
Screen
.
, (10.13).
10.13. Screen
<html>
<head>
<title> Screen</title>
</head>
<body>

</script>
</body>
</html>
.10.12.

.
1280720, ,

800600. Screen,
JavaScript -
.
,
.
.10.12.
History
History Window.
-
. URL- ,
. History URL.
History Window, : window.history.length.
History length.
- . 10.14 , .
10.14. -
<html>
<head>
<title> </title>
10.3.
</head>
<body>

</script>

<input type="button" onclick="hislen()" value="
">
</body>
</html>
hislen(), Alert .
-, . , ,
(.10.13).
-
History:
.10.13.

go() - , (
0, 1, 2 ..);
back() -,
( go(-1));
forward() - ,
( go(1)).
, ,
10.15.
10.15.
<html>
<head>
<title> </title>
287
288
10. HTML
</head>
<body>

</script>

<input type="button" onclick="goback()"
value=" 2 ">
</body>
</html>
(.10.14) goback(), .
.10.14.
History,
. ,
. -
,
.
Location
Location Window.
URL- .
Location JavaScript URL-,
-.
10.3.
Location
HTTP-.
href URL- -.
hash URL- - ( name),

.
host URL- ,
.
hostname , -.
pathname - .
port HTTP-,
-. , 80 ,
HTTP.
protocol (HTTP, FTP .).
, http:.
search , ?.
host, hostname, port, search , . ,

- .
Location Window, : window.location.property.
Location
10.16.
10.16. href Location
<html>
<head>
<title>URL HTML-</title>
</head>
<body>

</script>
</body>
</html>
289
290
10. HTML
URL- HTML-.

location.href
(.10.15).
Location -
URL-, - .10.15.
.
.
, .
Location.
assign() , URL- - , .
reload() - ( , ,
).
replace() - , URL
.
HTML- .
10.17 , Location replace().
10.17. replace()
<html>
<head>
<title> replace()</title>

</script>
</head>
<body>
<input type="button" value="Replace" onclick="replaceDoc()" /> //
</body>
</html>
10.4. (DOM)

www.yandex.ru.
replaceDoc(), Replace (.10.16).
, Location
HTML-, ,
, .
.10.16. Replace
, , . HTML- JavaScript .
10.4. (DOM)
HTML-,
(Document Object Model, DOM). DOM -,
, .
Document
HTML JavaScript Document. , JavaScript
, , .
-, ,
. HTML-
-. , , _1,
_2, _3, , , ..
HTML- Document. -
HTML-, HTML.
HTML-
Document. JavaScript.
- JavaScript .
Document .
.
291
292
10. HTML
,
, . .
Document.
, Document.
anchors (), HTML. <a name="..."> </a> -.
links HTML-,
<a href="..."> </a>.
images -.
forms HTML-.
JavaScript ,
, HTML-
.
, Document,
10.18.
10.18. anchors
<html>
<head>
<title>Anchors</title>
</head>
<body>

<a name="first">1 anchor</a><br />
<a name="second">2 anchor</a><br />
<a name="third">3 anchor</a><br />
<br /> "" HTML-:

document.write(document.anchors.length)
</script>
</body>
</html>
10.4. (DOM)
anchors HTML-. document.write (.10.17).
.10.17. anchors
document.anchors.
length, document Document, anchor
-, length ( ).
,
-. anchors document.anchors.
length : links, images forms.
, Document ,
, JavaScript
-. Document.
alinkColor alink. , .
linkColor link, , HTML-.
vlinkColor vlink.
, HTML-.
bgColor bgcolor. HTML-.
(, #F0F8FF), (, red
white).
fgColor text, .
, - bgcolor.
293
294
10. HTML
lastModified HTML-.
location URL- -.
referrer URL- , -.
title , TITLE.
URL URL- HTML-.
Document
HTML-, BODY. ,
, , .
Document JavaScript
, . ,
JavaScript HTML-: ,
,
(10.19).
10.19. Document
<html>
<head>
<title> Document</title>

document.bgColor = "#00FF80";
document.fgColor = "#800080";
document.linkColor
= "#000000";
document.alinkColor = "#FF0000";
document.vlinkColor = "#4000FF";
</script>
</head>
<body bgcolor=white>
<h1> </h1>
<h3> : </h3>
<p><a href="http://www.yandex.ru">Yandex</a>
<p><a href="http://www.mail.ru"> </a>
<p><a href="http://www.microsoft.com"> Microsoft</a>
</body>
</html>
10.4. (DOM)
.10.18.
.10.18. ,
, -, bgcolor=white BODY: document.

bgColor="#00FF80".
,
lastModified Document (10.20).
10.20. lastModified
<html>
<head>
<title> lastModified</title>
</head>
<body>
<center>

document.write(" :<br>" +document.
lastModified)
</script>
</center>
</body>
</html>
295
296
10. HTML
lastModified

HTML-.
document.lastModified.
document.write()
- (.10.19).
JavaScript
document.write(). Write()
.10.19.
Document,
lastModified
- -. , JavaScript , Document.
close() -
write(). close()
. Internet Explorer, 4.0.
getElementsByName({_}) , . Internet Explorer, 5.0.
getElementById({ID}) ,
. ID.
getElementById() .
getElementsByTagName({ }) , . Internet Explorer, 5.0.
write() HTML- .
Microsoft Internet Explorer 5.0
Document, getElementById(), getElementsByName()
getElementsByTagName(). JavaScript
. (10.21).
10.21. getElementsByTagName()
<html>
<head>
<title> getElementsByTagName()</title>

10.4. (DOM)
function getElements() //
{
var x=document.getElementsByTagName("input");
alert(x.length);
}
</script>
</head>
<body>

<input name="myInput" type="text" size="30" /><br />
<br />
<input type="button" onclick="getElements()" value="
input" />
</body>
</html>
getElements(),
INPUT
-, Alert
(.10.20).
.
, HTML- , INPUT:
(.10.21).
.10.21. INPUT
.10.20.

297
298
10. HTML
, JavaScript
Document, -, .
Document
, -.

JavaScript , . -.
HTML- JavaScript
.
.
, -
img1, img2 img3. ,
.
- Document. images.
images[0], images[1], images[2] .. ,
, .
, img1,
JavaScript document.images[0].
img2, document.images[1]. img3 -
document.images[2].
, - .
.
- , .
, .
, , -
, (value) .
JavaScript name= document.forms[0].
10.4. (DOM)
elements[0].value. name.
,
JavaScript.
, -, . ,
document.forms[4].elements[15].

.
JavaScript Document, . , -
myform name: <form name="myform">.
, , forms[0], myform.
.
elements[0] name. name=document.
forms[0].elements[0].value name=document.myform.
element_name.value.
HTML-, , JavaScript,
-, .
. Myform myform, JavaScript .
, HTML- :
;
.

. ,
. JavaScript
.
,
-.
299
300
10. HTML
10.22 , , , .
10.22.
<html>
<head>

function doit()
{
var greeting=" "
alert(greeting + document.aform.color.value
+ " " + document.aform.geometr.value)
var prich=", "
alert(prich + document.aform.prichina.value)
alert(" "
+ document.aform.geometr.value.length)
}
</script>
</head>
<body>
<center>

<form name="aform">
:
<input type="text" NAME="geometr"><p>
:
<input type="text" NAME="color"><p>
:
<input type="text" NAME="prichina"><p>
<input type="button" VALUE="" onClick="doit()">
</form>
</center>
</body>
</html>
HTML-
(.10.22). onClick
doit(), , .
10.4. (DOM)
.10.22.
.
aform. : geometr, color, prichina.
value.
Document, ,
, , , .
: document.
aform.geometr.value. , doit()
value geometr
aform HTML- document.
.
, , Alert (.10.23).
JavaScript (10.23).
10.23. -
<html>
<head>
<title> </title>
.10.23.
301
302
10. HTML

function myimage(pic) //
{
document.images[0].src=pic
}
</script>
</head>
<body text="#000000" bgcolor="#FFFFCC" link="#0000EE" vlink="#551A8B"
alink="#FF0000">

<h1>
<font color="#000099"> </FONT>
</h1>
<center>
<table cols=2 width="100%">
<caption>
<font color="#000099" size=+2></font>
</caption>
<tr>
<td>
<ul>
<li><a href="javascript:myimage('a.jpg')">1</li>
<li><a href="javascript:myimage('b.jpg')">2</li>
<li><a href="javascript:myimage('c.jpg')">3</li>
<li><a href="javascript:myimage('d.jpg')">4</li>
<li><a href="javascript:myimage('e.jpg')">5</li>
<li><a href="javascript:myimage('f.jpg')">6</li>
<li><a href="javascript:myimage('g.jpg')">7</li>
</ul>
</td>
<td align=center valign=center>
<img src="d.jpg"> </td>
</tr>
</table>
</center>
</body>
</html>
10.4. (DOM)

- (.10.24).
.10.24.
HTML- .
, .
JavaScript .
HEAD HTML-. myimage(pic), . , : document.images[0].
src=pic. , Document, (images[0]) (src).
[0], - . , HTML-.
d.jpg.
<IMG SRC="d.jpg">. : <A HREF="javascript: myimage('a.jpg')">.
,
303
304
10. HTML
document.images[0].src=pic. pic
, 'a.jpg'.
pic , .

-. -.
, HTML-. - . .
, .
- .
JavaScript
, .
-, JavaScript. , . -.
11
JavaScript
11.1.
11.2.
11.3.
11.4.
11.5.
11.6. JavaScript
306
11. JavaScript
, JavaScript: , , ,
, ..
.
11.1.
,
, ,
, , ,
..
,
, .
: , ,
, , .

, .
, .
, .
.
.
.
URL.
,
, , .
.
/ JavaScript : alert(), prompt() confirm().
.
alert(), prompt() confirm() Window .
11.1.
alert()
alert() .
OK,
. .
JavaScript, ,
.
, ,
(11.1).
11.1.
<html>
<head>
<title> </title>
</head>
<script>
alert(" ");
</script>
<body>
</body>
</html>
,
. .11.1, 11.2 11.3 ,
.
.11.1.
Internet Explorer
.11.2.
Mozilla Firefox
.11.3. Opera
307
308
11. JavaScript
prompt()
prompt() . (11.2).
. .
. , . ,
. , , , , , , .
11.2.
<html>
<head>
<title> </title>
</head>
<script>
//
var nameUser;
// nameUser
nameUser=prompt(", ?", "");
// alert()
alert(" , "+ nameUser);
</script>
<body>
</body>
</html>

(.11.4),
.

prompt() , alert() .
.
.11.4.
prompt() ,
. - : , undefined ( ).
11.2.
confirm()
confirm() , , alert(),
: OK Cancel. 11.3 ,
OK Cancel.
(.11.5).
.11.5.
11.3.
<html>
<head>
<title> </title>
</head>
<script>
confirm(" ");
</script>
<body>
</body>
</html>
, - OK Cancel.
11.2.
,
, . . JavaScript : ,
, .
, ,
.
, .
.
309
310
11. JavaScript
, .
.
.
: A
Z a z.
(_)
, .
($)
.
Unicode,
Unicode.
0 9.
,
, flagId FlagID,
, .
.11.1 .
11.1. JavaScript
count
2my
new
my
is_well
is well
, new , ,
.

, JavaScript. .
. .11.2 JavaScript.
11.2.
11.2. JavaScript
break
else
new
typeof
case
finally
null
var
catch
for
return
void
continue
function
switch
while
default
if
this
with
delete
in
throw
do
instanceof
try
, . .11.3.
11.3. JavaScript
abstract
enum
int
short
boolean
export
interface
static
byte
extends
long
super
char
final
native
synchronized
class
float
package
throws
const
goto
private
transient
debugger
implements
protected
volatile
double
import
public
, , ,
.
, JavaScript. ,
. JavaScript
: , .
JavaScript :
.
311
312
11. JavaScript
, 1, 2, 3, , 1, 2, 3.
0. , , .

0 9, .

0 7, .

0 9 a f, 0x.
.11.4 .
11.4.

45
255
10000000
10

055
0377
046113200
012

0x2d
0xff
0x989680
0XA
, ,
, 8 9. , 076 62,
078 78.
.
.
e E.
, .
:
1,4142135623730950488016887242097
35.0
4567.0002
3.4e100
5.456e3
0.007
11.2.
, , 000.45, .
:
10323 10308.

JavaScript , : true () false (). ()
,
.
true false .
, JavaScript . , ,
. ,
- . :
" "
"!"
"4567"
""
' '
' " "'

, . Unicode-, \u
\uXXXX. .11.5
.
313
314
11. JavaScript
11.5.
\b
\t
\n
\v
\f
\r
\"
\'
\\
Unicode-
\u0008
\u0009
\u000A
\u000B
\u000C
\u000D
\u0022
\u0027
\u005C
(backspace)

( )

<BS>
<HT>
<LF>
<VT>
<FF>
<CR>
"
'
\
(11.4).
11.4.
<html>
<head>
<title> </title>
</head>
<script>
alert(":\t\t\n:\t\t\n:\t&K");
</script>
<body>
</body>
</html>
, alert(),
,
-. .11.6
,
Internet Explorer.
.11.6.

, , :
. , alert(), . , , . ,
document, . , null .
11.2.
,
undefined ().
, ,
. , .
.
, .

,
, . ,
var . , .
:
var myData1;
var x,y,z;
var k, msg1, msg2, IM;
, :
var myStr=", ";
var k=1000, x=12, y=-5;
var s=1.34e5, msg11="Error", Flag=false;
, undefined.
, typeof, (11.5).
11.5.
<html>
<head>
<title> </title>
</head>
315
316
11. JavaScript
<body>
<h2> </h2>
<pre>
<script>
//
var i=45.78, msg="";
var f=false, y;
//
document.write("\n"+" i="+i+" "+ typeof(i)+"\n");
document.write(" msg="+msg+" "+ typeof(msg)+"\n");
document.write(" f="+f+" "+ typeof(f)+"\n");
document.write(" y ="+y+" "+ typeof(y)+"\n");
// y
y=null;
document.write(" y="+y+" "+ typeof(y)+"\n");
</script>
</pre>
</body>
</html>
document.
write(), (.11.7).
.11.7.
,
. .
11.2.
JavaScript , ,

. ,
.

.
,
. , , ,
. .
.
.
, .
,
. .
(11.6).
11.6.
<html>
<head>
<title> </title>
<script>
// 5
var stars= new Array(5);
//
stars[0]='';
stars[1]=' ';
stars[2]=' ';
stars[3]=' ';
stars[4]=' ';
317
318
11. JavaScript
//
alert(stars[0]);
//
alert(stars);
</script>
</head>
<body>
</body>
</html>
, , . , JavaScript , stars[0].
JavaScript
, . , ,
(.11.8).

, (11.7).
.11.8.
11.7.
<html>
<head>
<title> </title>
<script>
//
var stars= new Array('',' ',' ',' ',' ');
//
alert(stars[0]);
//
alert(stars);
</script>
</head>
<body>
</body>
</html>
11.3.
, JavaScript .
, .
, n,
n+1. length (11.8).
11.8.
<html>
<head>
<title> </title>
<script>
//
var stars= new Array('',' ',' ',' ',' ');
stars[99]='';// 100-
//
alert(stars.length);
</script>
</head>
<body>
</body>
</html>

, 100
(.11.9).
.11.9.
11.3.
.
,
. , 4+6 , 10. q=5 q 5. , , , .
JavaScript.

. :
a=7
319
320
11. JavaScript
:
msg1=msg2=""
(.11.6 11.7).
11.6.
x += y
x = y
x *= y
x /= y
x %= y
x=x+y
x=xy
x=x*y
x=x/y
x=x%y
11.7.
x <<= y
x >>= y
x >>>= y
x &= y
x ^= y
x |= y
x = x << y
x = x >> y
x = x >>> y
x=x&y
x=x^y
x=x|y

.
(+). , 5 + 7 = 12.
(). , 67 43 = 24.
(*). , 2 * 2 = 4.
(/). , 45 / 5 = 9.
(%). , 7 % 5 = 2.
,
. ++,
--. , i++ i=i+1.
.
, :
11.3.
i = 4
++i * 2 = 10
, ,
:
i = 4
i++ * 2 = 8
, : . , .
11.9 .
11.9.
<html>
<head>
<title> </title>
</head>
<body>
<h2> </h2>
<pre>
<script>
var i=5, z
document.write("\n i="+i+"\n");
z=i+56*2;
document.write("z=i+56*2="+z+"\n");
z=6.7*2-i;
document.write("z=6.7*2-i="+z+"\n");
z=i++ +10;
document.write("z=i++ +10="+z+"\n");
document.write(" i="+i+"\n");
z=--i *4;
document.write("z=--i *4="+z+"\n");
document.write(" i="+i+"\n");
z=(5+11)%8;
document.write("z=(5+11)%8="+z+"\n");
</script>
</pre>
</body>
</html>
321
322
11. JavaScript
, . , (.11.10).
, , .
.11.10.

. , ,
. .11.8 .
11.8.
==
!=
>
>=
<
<=
===
!==
true,
true,
true,
true,

true,
true,

true,
true,

11.10 .
11.10.
<html>
<head>
11.3.
<title> </title>
</head>
<body>
<h2> </h2>
<pre>
<script>
var i=5, m1="1";
var m2;
document.write("\n i="+i+"\n");
document.write("i>7 - ");
//
document.write(i>7);
document.write("\n(3+i)>=8 - ");
//
document.write((3+i)>=8);
m2="1"
document.write("\n m1="+m1);
document.write(", m2="+m2+"\n");
document.write("m1!=m2 - ");
document.write( m1!=m2);
m2="2"
document.write("\n m1="+m1+", m2="+m2+"\n");
document.write("m1<=m2 - ");
document.write(m1<=m2);
m2="5"
document.write("\n i="+i+", m2="+m2+"\n");
document.write("i==m2 - ");
document.write(i==m2);
document.write("\ni===m2 - ");
document.write( i===m2);
document.write("\ni===5 - ");
document.write(i===5);
</script>
</pre>
</body>
</html>
323
324
11. JavaScript
i=5 m2="5".
, (.11.11).
.11.11.

, . , (+), . :
S1="";
S2=",";
S3="!";
S=S1+S2+" "+S3;
S ", !".
:
" "+1984=" 1984"

,
. JavaScript .
(&&) true, .
, (1<7)&&(3>2). .
, , . ,
(3<1)&&(i++<7) i .
11.3.
(||) true, . , (2<3)||(1>2). .

, .
(!)
.

JavaScript ?:, .
:
var sign = (a>=0) ? "": "";

: ,
, , , . , a 0, sign "", sign "".

JavaScript , . .
JavaScript 32.
(.11.9 11.10).
11.9.
&

(AND)

(OR)

(XOR).
1,
,
1
0101 & 1011 = 0001, 5 & 11 = 1
0101 | 1001 = 1101, 5 | 9 = 13
0101 & 1011 = 1110, 5 & 11 = 14
325
326
11. JavaScript
11.10.

<<

,
.

2n
>>

,
.
2n

>>>
>>,

.
,

101 << 3 = 101000, 5 << 3 = 40,

5 * 23 = 40
13 << 2 = 52
100100 << 3 = 100, 36 << 3 = 4,

5 / 23 = 4
13 >> 2 = 4
100100 << 3 = 100, 36 << 3 = 4,

5 / 23 = 4
13 >> 2 = 1073741820

typeof,
. .11.11 , .
11.11. typeof
"undefined"
"number"
"string"
"boolean"
"object"
"function"
, , -
. [], :
myArray[5]=56
(.):
.
11.4.
11.4.
- .
- .
, .

. , .
if
if .
:
if ( )
{
, , true, , false,
.
. , f(x) :
x + 10, x < 0
f(x)= x2 + 4, 0 x 5

5 / x, x > 5
, 11.11.
11.11. if
<html>
<head>
<title> if</title>
327
328
11. JavaScript
<script>
var x, y;
// x
x=prompt (" x","0");
//
x=+x;
//
if (x<0){
y=x+10;
}
if ((x>=0)&&(x<=5)){
y=x*x+4;
}
if (x>5){
y=5/x;
}
alert(" f("+x+")="+y);
</script>
</head>
<body>
</body>
</html>

(.11.12).
.11.12.
if
if..else
if..else.
, , false:
if ( )
{
1
}
else
{
2
}
11.4.
, else if.

:
if ( 1)
{
1
}
else if ( 2)
{
2
}
else
{
3
}

if..else (11.12).
11.12. if..else
<html>
<head>
<title> if..else</title>
<script>
var x, y;
// x
x=prompt (" x","0");
//
x=+x;
//
if (x<0) y=x+10; // x<0
else if (x>5) y=5/x; // x>5
else
y=x*x+4; // 0<=x<=5
alert(" f("+x+")="+y);
</script>
</head>
<body>
</body>
</html>
329
330
11. JavaScript
, ,
. . ,
x>5.
switch
switch .
if, switch
.
, ,
:
switch ()
{
case 1:
case 2:
..
default:
, , (11.13).
11.13. switch
<html>
<head>
<title> switch</title>
<script>
var trans;
//
var beast=prompt (" ","dog");
//
switch (beast)
{
case "dog":
trans="";
break;
11.4.
case "cat":
trans="";
break;
case "cow":
trans="";
break;
default:
trans=" "
}
alert(beast+" "+trans);
</script>
</head>
<body>
</body>
</html>
(.11.13).
break, switch, switch.
.11.13. switch

. ,
.
for
for . :
for ( ; ; )
{

. , , false.
331
332
11. JavaScript
.
,
.
11.14 ,
n!=1*2*3*..*n.
11.14. for
<html>
<head>
<title> for</title>
<script>
var f=1;
var x=prompt (" ","5");
x=+x;
for(var i=1;i<=x;i++)
{
f=f*i;
}
alert(f);
</script>
</head>
<body>
</body>
</html>
1 x, , , ,
Infinity () x.
while
while for,
.
:
while ( )
{
while , .
11.4.
11.15 ,
while.
11.15. while
<html>
<head>
<title> while</title>
<script>
var f=1;
x=+x;
var i=1;
while(i<=x)
{
f=f*i;
i++;
}
alert(f);
</script>
</head>
<body>
</body>
</html>
do..while
do..while while, ,
,
:
do
{
} while ( )
11.16 ,
do..while.
11.16. do..while
<html>
<head>
<title> do..while</title>
333
334
11. JavaScript
<script>
var f=1;
x=+x;
var i=1;
do
{
f=f*i;
i++;
} while(i<=x)
alert(f);
</script>
</head>
<body>
</body>
</html>
for..in
for..in
. :
for ( in )
{
, (11.17).
11.17. for..in
<html>
<head>
<title> for..in </title>
<script>
var a= new Array (5,76,43,12,77,-5, 0);
for (var i in a)
{
a[i]++;
}
11.4.
alert(a);
</script>
</head>
<body>
</body>
</html>

a (.11.14).
, for..in
length.
.11.14.
break continue

. break continue.
break , . continue
.
11.18.
11.18.
<html>
<head>
<title> </title>
<script>
var a= new Array (5,0,2,0-3,0);
var b= new Array();
//
while(true)
{
//
x=+x;
// ,
//
if (x==0) {break}
// ,
335
336
11. JavaScript
for (var i=0;i<a.length;i++)
{
// a
if (a[i]==0)
{
b[i]="-";
// for,
//
continue;
}
//
b[i]=x/a[i];
}// for
alert(a+"\n"x+"\n"+b);
}// while
</script>
</head>
<body>
</body>
</html>

a. ,
b () (.11.15).
.11.15.

. while , (
). for ,
a , .
11.5.
, . - . .
11.5.
,
. :
function ([1][,..N])
{
function .
( ) , .
, .

SCRIPT.
, , .
HEAD
, . 11.19 .
11.19.
<html>
<head>
<title> </title>
<script>
//
var a= new Array (1,2,4,8);
function sum()
{
var s=0; //
// a
for (var i in a)
{
s=s+a[i];
}
alert(" ="+s);
}
337
338
11. JavaScript
function product()
{
var p=1; //
for (var i in a)
{
p=p*a[i];
}
alert(" ="+p);
}
</script>
</head>
<body>
<script>
var x=prompt(" (0 1)?","0");
if (x=="0")
{
sum();
}
if (x=="1")
{
product();
}
</script>
</body>
</html>
, 0 1.
: sum() product(),
a .
. return.
. , (11.20).
11.20.
<html>
<head>
<title> </title>
11.5.
<script>
function sum(a,b)
{
return (a+b);
}
</script>
</head>
<body>
<script>
var x1=5, x2=6, x3=3, x4=3;
// (x1+x2)*(x3+x4)
alert (sum(x1,x2)*sum(x3,x4));
</script>
</body>
</html>
. , :
var cube=function(x){return x*x*x}
alert(cube(2)+cube(3));
-, .

, .
arguments. ,
, . , :
var arg1=arguments[0];
, , . , ,
length arguments.
11.21
.
11.21.
<html>
<head>
<title> </title>
339
340
11. JavaScript
<script>
function sum(x1,x2) //
{
var s=0; //
//
for (var i=0;i<arguments.length;i++)
{
s+=arguments[i];
}
return (s);
}
</script>
</head>
<body>
<script>
//
alert (sum(1,2,3,4));
alert (sum(1,-3,40,2,5,7));
</script>
</body>
</html>

, . ,
,
,
, .
. , . ,
. , 10000,
.
, .
,
. ,
11.5.
. ,
,
. (11.22).
11.22.
<html>
<head>
<title> </title>
<script>
function fact(n)
{
if (n<0) return(null); //
if (n==0) return (1); // 0
return (n*fact(--n));//
}
</script>
</head>
<body>
<script>
var x=prompt(" ","5");
x=+x;
//
alert (x+"!="+fact(x));
</script>
</body>
</html>

.
null.
1, 0!=1.

.
fact(0)
(.11.16).
.11.16.
341
342
11. JavaScript

JavaScript ,
. , , ..
, .
, onLoad - ,
-.
JavaScript- .
. onClick
JavaScript (11.23).
11.23.
<html>
<head>
<title> </title>
<script>
function mes()
{
alert (" ");
}
</script>
</head>
<body>
<h2> </h2>
<a href=http://www.myserver.ru/page1.html onClick="mes()"> 1</a>
<br>
<a href=http://www.myserver.ru/page2.html
onClick="alert(' ')"> 1
</a>
</body>
</html>
, .
JavaScript-.
alert() (.11.17).
11.6. JavaScript
.11.17.
11.6. JavaScript
JavaScript , , , , . ,
. , JavaScript
.
Global , .
String .
Number .
Boolean .
Array .
Function .
Date .
Math .
RegExp
.
Object .
Global
, (.11.12 11.13). Global.
343
344
11. JavaScript
11.12. Global
Infinity
NaN
undefined

11.13. Global
escape()
, ,
-,
eval()
JavaScript

isFinite()
,
( NaN Infinity)
isNaN()
,
( NaN)
parseFloat()
parseInt()
string()
unescape()

ASCII- ISO-Latin-1
:
flag=isFinite(x/y)
String
String . (.11.14
11.15).
11.14. String
constructor
length
prototype
11.6. JavaScript
11.15. String
anchor()
big()
<big></big>
bold()
<bold></bold>
charAt()
()
charCodeAt()
,
Unicode
concat()
fixed()
<tt></tt>
fontcolor()
<font color=color></font>
fontsize()
<font size=size></font>
fromCharCode()
,
Unicode
indexOf()
italics()
<i></i>
lastIndexOf()
link()
match()
replace()
search()
slice()
small()
<small></small>
split()
strike()
<strike></strike>
sub()
<sub></sub>
substr()
substring()
sup()
<sup></sup>
toLowerCase()
toSource()
toString()
toUpperCase()
valueOf()
toString()
345
346
11. JavaScript
String:
MyText=" HTML";
MyText=MyText.substring(0,8)+"JavaScript";
MyText " JavaScript".
Number
Number , .
.11.16 11.17.
11.16. Number
constructor
MAX_VALUE
MIN_VALUE
NaN
NEGATIVE_INFINITY
POSITIVE_INFINITY
prototype
,

(1,7976931348623157e+308)
(5e324)
,

11.17. Number
toSource()
toString()
valueOf()
, Number

Number
Boolean
Boolean .
(.11.18).
11.18. Boolean
prototype
toString()

: "true" "false"
11.6. JavaScript
Array
, , ,
(.11.19 11.20).
11.19. Array
constructor
index
input
length
prototype
,
, , ,

, ,

11.20. Array
concat()
join()
pop()
push()
reverse()
shift()
slice()
splice()
sort()
toSource()
toString()
unshift()
valueOf()
/

,
,

,
Function
Function .
(.11.21 11.22).
347
348
11. JavaScript
11.21. Function
arguments
arguments.callee
arguments.caller
arguments.length
arity
constructor
length
prototype

,
arguments

,
, arity

11.22. Function
apply()
call()
toSource()
toString()
valueOf()

,
, toSource()

Function :
= new Function ([1, 2,.. N],
);
,
sumFunc = new Function ("a","b","return(a+b)");
alert(sumFunc(5,4));
Date
Date , (.11.23 11.24). JavaScript
1 1970. JavaScript
.
11.23. Date
constructor
prototype
11.6. JavaScript
11.24. Date
getDate()
1 31 (
)
getDay()
0 6 (
)
getFullYear()
,

getHours()
0 23 (
)
getMilliseconds()
(
)
getMinutes()
0 59 (
)
getMonth()
0 11 (
)
getSeconds()
0 59 (
)
getTime()
, 00:00:00
1 1970 ( )
getTimeZoneOffset()

getUTCDate()
( )
getUTCDay()
( )
getUTCFullYear()
( )
getUTCHours()
( )
getUTCMilliseconds() ( )
getUTCMinutes()
( )
getUTCMonth()
( )
getUTCSeconds()
( )
getYear()
( )
parse()
,
0 0 0 1 1970
( )
setDate()
(
)
setFullYear()
( )
setHours()
( )
setMilliseconds()
(
)
setMinutes()
(
)
setMonth()
( )

349
350
11. JavaScript
11.24 ()
setSeconds()
setTime()
( )
Date (
)
setUTCDate()
( )
setUTCFullYear()
( )
setUTCHours()
( )
setUTCMilliseconds() ( )
setUTCMinutes()
( )
setUTCMonth()
( )
setUTCSeconds()
( )
setYear()
( )
toGMTString()
, -
GMT ( )
toLocaleString()
,
toSource()
,
toString()
, Date
toUTCString()
, UTC
( )
UTC()
, 0 0
0 1 1970 ( )
valueOf()
Date

:
= new Date();
= new Date();
= new Date(" , ::");
= new Date(, , [, , , , ]);
:
, , 0 0 0 1 1970 ;
, , , , , , , , , ;
, , , , , , ,
.
, .
11.6. JavaScript
, ,
:
MyDate=new Date();
alert(MyDate.getDay());
0 6, . , 0 .
Math
JavaScript Math,
(.11.25 11.26).
11.25. Math
E
LN10
LN2
LOG10E
LOG2E
PI
SQRT1_2
SQRT2
( e) (2,71828182845)
(loge10) (2,302585092994046)
(loge2) (0,6931471805599453)
e 10 (log10e) (0,4342944819032518)
e 2 (log2e) (1,4426950408889633)
( )
(3,141592653589793)
1/2 (0,7071067811865476)
2 (1,4142135623730951)
11.26. Math
abs()
acos()
asin()
atan()
atan2()
ceil()
cos()
exp()
floor()
log()
max()
min()

(
)
,

,
,

351
352
11. JavaScript
11.26 ()
pow()
, , ,

random()
, 0 1
round()
sin()
sqrt()
tan()
toSourse()
toString()
RegExp

. , RegExp,
, .11.27 11.28.
11.27. RegExp
RegExp.$*
multiline
RegExp.$&
lastMath
RegExp.$_
input
RegExp.$`
leftContext
RegExp.$
rightContext
RegExp.$+
lastParen
RegExp.$1,$2,$9 ( )
global
, ,

ignoreCase
input
lastIndex
lastMatch
lastParen
leftContext
multiline
rightContext
source

11.28. RegExp
compile()
exec()
test()
Object
JavaScript ,
Object, (.11.29 11.30)
, , , .
11.29. Object
constructor
prototype
,

11.30. Object
toLocaleString()
toSource()
, ,
toString()
,
valueOf()

JavaScript:
, , , , .
, . ,
JavaScript. ,
,
. , , . ,
.
353
12

JavaScript
12.1.
12.2. HTML-
12.3.
12.4. FrontPage
12.5. MicrosoftScriptEditor
12.1.
JavaScript,
.
, . ,
HTML-. ,
JavaScript.
12.1.
-
, , .
, .
,
.

,
HTM
HTML. , Windows
WordPad.
Microsoft Word Microsoft Office . , - .
-, , , .
, -,
Microsoft FrontPage Adobe Dreamweaver (
Macromedia Dreamweaver). -
, - ,
. -
, HTML, ,
. ,
HTML, ,
-. Microsoft FrontPage Adobe Dreamweaver
HTML JavaScript . ,
.
355
356
12. JavaScript
, , - HTML JavaScript,
, -
.
, , , - .
, -,
- . , , ,
,
. ,
-.
-
Internet Explorer, . - ,
Windows. Mozilla Firefox Opera, . , Konqueror
Linux Safari MacOS. ,
, Microsoft Netscape. ,
: Internet Explorer, Mozilla Firefox Opera.
Windows,
. Mozilla Firefox
http://www.mozilla.ru/, Opera http://www.opera.com/.
, , - .
JavaScript
.
( ).
. , .
12.2. HTML-
,
,
.
, , , , C++
Java, , , , . JavaScript
, , ,
.
JavaScript,
AJAX, ,
, C++ Java. JavaScript . ,
JavaScript -
,
.
JavaScript. , Microsoft
Script Debugger, Microsoft,
http://msdn.microsoft.com/scripting/,
JavaScript. Microsoft Script Debugger Internet
Explorer. ,
Microsoft FrontPage Microsoft Script Editor, Microsoft Script Debugger.
(, Mozilla Firefox), . , Firebug
https://addons.mozilla.org/firefox/1843/.
Mozilla Firefox, .
12.2. HTML-
, -, , HTML. HTML-
:
;
;
SCRIPT.
357
358
12. JavaScript
- .
.

, -
A, href ,
.
JavaScript-, javascript:
( :). :
<a href="javascript:alert(', !');"> </a>
, JavaScript :
alert(', !');
,
(.12.1).
.12.1.
alert(),
, . ,
. , , JavaScript
, ,
, .
.

, Windows,
, :
12.2. HTML-
, .. ,
, , . .
, . , , , HTML-. ,
. . HTML
, . JavaScript, .
:
<p onclick="alert(' !');"> </p>
P ,
. onclick,
(.12.2).
.12.2.
HTML ( 4.0) - . JavaScript, ,

.
, .
SCRIPT
, -
HTML SCRIPT. ,
<script> , ,
359
360
12. JavaScript
</script>, - .
type.
, JavaScript:
<script type="text/javascript">

</script>
JavaScript ,
text/javascript .
, language.
, JavaScript1.0 language
"JavaScript", JavaScript1.1 "JavaScript1.1", JavaScript1.2
"JavaScript1.2" .. , HTML, .
. ,
language , SCRIPT .
,
JavaScript, SCRIPT . , .
SCRIPT HTML ():

</script>
, , SCRIPT, , , .
,
HTML (-->) JavaScript (//),
JavaScript-
, --> JavaScript . , JavaScript , . JavaScript.
12.2. HTML-
// 
<script type="text/javascript" src="lib1.js"></src>


</script>
</head>
<body>
<noscript>
<p> </p>
</noscript>
... 
<script type="text/javascript>
12.3.
<!-... // -
//-->
</script>
... 
<p onclick="..."> , </p>
... 
</body>
</html>
, HTML- JavaScript.
, . ,
.
12.3.
, , !!!.
JavaScript , . Microsoft Script Debugger,
, !!!, . , , , .
, -.
, , .
, JavaScript . , ,
. , , if If JavaScript
. , 12.2.
1. , .
2. .
3. 12.2.
12.2.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
363
364
12. JavaScript
<title> </title>
</head>
<body>
<!-for (var i = 0; i < 10; i++)
{
document.write(", !!!");
}
//-->
</script>
</body>
</html>
4. , , script1.html.
- , ,
. , ,
.
, , 12.2, , !!! (.12.3).
.12.3. ,
,
-, ,
-. ,
- .
12.4. FrontPage
-
. Microsoft FrontPage.
12.4.
FrontPage
,
, !!!.
HTML. .
FrontPage (.12.4), ,
.
.12.4. FrontPage
FrontPage ,
, , . , , .
, FrontPage,
365
366
12. JavaScript
. , ,
.
, , , !!!
:
document.write(", !!!");
, JavaScript -, ,
,
. , document, write() .
, for
JavaScript, write() document
, i . i .
, , , 20,
:
for (var i = 0; i < 10; i++)
:
for (var i = 0; i < 20; i++)
, , FrontPage
(.12.5).
.12.5. FrontPage
12.5. MicrosoftScriptEditor
12.5.
MicrosoftScriptEditor
Microsoft Script Editor Microsoft FrontPage,
.
Internet Explorer,
.
1. .
.
2. . .
3. , ,
(Internet Explorer) ().
4. OK, .
5. .
,
: . .
1. (.12.2).
2. .
3. . ,
Microsoft Script Editor Microsoft Script Debugger.
Microsoft Script Editor. Microsoft
Script Editor (.12.6).
,
, . ,
. ,
, i.
1. DebugQuickWatch ( ).
QuickWatch ( ) (.12.7).
2. Expression () , i.
3. Add Watch ( ).
Watch () i (.12.8).
4. QuickWatch ( ).
367
368
12. JavaScript
.12.6.
.12.7. QuickWatch ( )
, , . .
1. i Watch ().
2. ( 19, 18).
.
, .
1. DebugStep into ( ).
2. , (.12.9).
.12.8.
.12.9.
, . ,
i. , .
, .
, .
, .
, ,
.
369
370
12. JavaScript
, -
JavaScript. ,
HTML- .
, , . ,
, -. , JavaScript, , (http://www.yandex.ru) (http://www.aport.ru), , . JavaScript ,
.
13
XHTML
13.1. XHTML-
13.2. XHTML HTML
13.3. XHTML
372
13. XHTML
, HTML4.01
-,
. HTML 4.01
,
.
HTML,

, . , HTML. , ,
. , , ,
. ,
, , , HTML.
XHTML.
, ? ,
,
HTML4.01 , ,
. , ,
HTML. , HTML, HTML , W3C.
( !) HTML-,
. - , ( ) .
W3C , . HTML , .
XML (eXtensible Markup Language ), ,
. : ,
.
W3C. HTML SGML (Standard Generalized Markup Language
13. XHTML
). D HTML 4.01 DTD W3C (www.w3.org)

HTML4.01
(DTD Document Type Definition). SGML, HTML4.01.
W3C
XML XML DTD XHTML,
HTML4.01, . XHTML
HTML4.01, XML DTD.
W3C XML SGML? SGML:
, . . XML ( ) SGML, ,
SGML, .
DTD, XHTML.
1. XHTML DTD .
HTML, ,
CSS.
<font> align.
, , HTML-.
2. XHTML DTD HTML, - .
,
- , HTML.
3. DTD ,
XHTML DTD.
1.0 XHTML, 1.1.
XHTML1.0
HTML. ,
373
374
13. XHTML
, - XHTML. XHTML1.0 ,
HTML4.01.
13.1. XHTML-
XHTML- XHTML
DTD, , XML DTD , XML, .
. .
XML: 1.0 1.1. , XML1.1, , .
XML1.0, . , XHTML- XML 1.0,
:
<?xml version="1.0" encoding="UTF-8" ?>
, XML 1.0
Unicode 8.
DTD XHTML:
<!DOCTYPE html PUBLIC " //W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/
xhtml1/DTD/xhtml1-strict.dtd">
,
html, XHTML DTD
"//W3C//DTD XHTML 1.0 Strict//EN".
DTD , ,
XML DTD, , URL
. http://www.
w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd. "strict"
, XHTML DTD.
xhtml1-strict.dtd DTD, XML. XML , , ,
XHTML , XML .
13.1. XHTML-
XHTML-, :
<!DOCTYPE html PUBLIC "//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/
TR/xhtml1/DTD/xhtml1-transitional.dtd">
XHTML DTD :
<!DOCTYPE html PUBLIC "//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/
xhtml1/DTD/xhtml1-frameset.dtd">
, XML XHTML DTD XHTML. :

XHTML DTD, , DTD,
?
XHTML .
, XHTML-, XML
DTD. XML DTD ,
DTD. , XHTML
DTD ,
XHTML. xmlns <html>:
<html xmlns="http://www.w3.org/TR/xhtml1">
, http://www.w3.org/
TR/xhtml1, XHTML. XHTML- DTD , . xmlns,
, , :
<div xmlns="http://www.w3.org/1998/Math/MathML>4/z</div">
XHTML- , , , <div> DTD, http://

www.w3.org/1998/Math/MathML.
MathML (Mathematical Markup Language). y4/z

y4 z, <div>, XHTML DTD.
, .
,
375
376
13. XHTML
,
:
<html xmlns="http://www.w3.org/TR/xhtml1" xmlns:math="http://www.w3.org/1998/Math/
MathML">

:
<math:div>y4/z</div>
<div> .
, , XHTML-
(13.1).
13.1. XHTML-
<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE html PUBLIC "//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1
transitional.dtd">
<html xmlns="http://www.w3.org/TR/xhtml1" xml:lang="en" lang="en">

<head>
<title> XHTML-</title>
</head>
<body>
... ...
</body>
</html>
. XML1.0 XHTML1.0
DTD. head title
, XHTML . html xmlns , XHTML1.0. lang ,
XHTML .
XHTML-?
DTD XHTML1.0, , HTML4.01,
. XHTML1.1, , - XHTML. 1.0.
13.2. XHTML HTML
13.2. XHTML HTML

XHTML HTML4.01 XML. HTML , ,
W3C, , HTML- . XHTML, XHTML
DTD, XHTML DTD
: HTML XHTML.

HTML ,
. XHTML
: . ,
<td>, HTML, :
<td width=123 height=90>
XHTML . :
<td width="123" height="90">
, .

HTML4.01 , , , .
</p> </td> . XHTML
,
:
<p>

</p>
<p>
< >
</p>
377
378
13. XHTML
, , -
, .
.
, ,
: <br></br>, . ,
<br/>, . ,
, <img src="mypicture.jpg" />.
XHTML HTML.
, , ,
. ,
:
<i><b>

</b> </i>
. :
<i><b>

</i> </b>
HTML.
, . XHTML . , XHTML :
<form> <form>;
<button> <textarea>, <select>, <input>,

<iframe>, <label>, <button>, <form>, <isindex>, <fildset>;
<a> <a>;
<label> <label>;
<pre> <img>, <sup>, <object>, <small>,

<sub>, <big>.
. , <a> , <a>. , -
13.2. XHTML HTML
XHTML, .

HTML ,
, , <TABLE>, <TaBle> <table>
. XHTML . :
width WiDtZ XHTML , , , .
XHTML , HTML,
. , , XHTML, .

XHTML ,
HTML . , <ol>, <ul>
compact,
. , <ul compact>,
. XHTML
: <ul compact="compact">.
.13.1 , XHTML , .
13.1. XHTML, HTML
-
checked="checked"
defer="defer"
multiple="multiple"
nowrap="nowrap"
-
compact="compact"
disabled="disabled"
noresize="noresize"
readonly="readonly"
-
declare="declare"
ismap="ismap"
noshade="noshade"
selected="selected"

XHTML
HTML ,
:
<!
JavaScript CSS.
>
379
380
13. XHTML
CSS, ,
. XML ,
CDATA XML:
<![CDATA[
JavaScript...
]]>
</script>
HTML, XML- CDATA.

.
XHTML
, <img src="logo.gif" alt="
&"> <img src="logo.gif" alt=" &amp " >
13.3. XHTML
, , , , -
: XHTML
.
-, , HTML, . ,
HTML-. XHTML
, XHTML1.0 XHTML.
-, -,
HTML.
HTML ,
HTML, XHTML .
XHTML? , ? :
13.3. XHTML
, XHTML. ,
, HTML, , , XHTML, .
, 56 HTML-, CSS
XHTML,
,
XHTML.
? -, -
XHTML. XHTML
,
XHTML-. , - , XHTML. -, HTML-
XHTML , Tidy, W3C http://
tidy.sourceforge.net/.
, .
.
, :
<h1>
<h2></h3>
:
<h1></h1>
<h2></h2>
. ,
:
<p> <b><i> </b> </
i>
:
<p> <b><i> </i> </b>
.
. :
<a href="#refs"> <a>
:
<a href="#refs"> </a>
381
382
13. XHTML
, . , :
<body>
<li>1-
<li>2-
:
<body>
<ul>
<li>1- </li>
<li>2- </li>
</ul>
.
<!doctype>.
, HTML4.0
.
Tidy, HTML- , XHTML
.
, XHTML,
HTML4.01, W3C, , XML.
XHTML- HTML-:
, XML, XHTML DTD
. , Tidy
HTML4.0 XHTML.
, . XHTML
.
XHTML,
.
HTML, XHTML CSS 100 %
.
.
.
.
.
. , .
.
27.01.10. 70100/16. . . . 30,96. 2000. 0000.

, 194044, -, . ., 29.
005-93, 2; 95 3005 .
CtP . . . .
197110, -, ., 15.

HTML, XHTML I Css Na 100 Proc

Загружено:

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

Оригинальное название

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

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

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

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

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

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

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

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

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

HTML, XHTML I Css Na 100 Proc

Загружено:

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

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

32.988.

scroll , . : yes no,

<p align="center" title=", ">

<p align="left" title=", ">

<p align="justify" title=", ">

<p align="right" title=", "> </p>

TABLE. <CAPTION>...</CAPTION>. align,

<table border="4" bordercolor="#000000">

.3.5. Internet Explorer

THEAD, TBODY TFOOT. .

background , . , <td background="img\

<img src="image.jpg" width="60"/>

MIME- (Multipurpose Internet Mail Extensions) , , . , ,

4.11 classid codetype.

.4.12. Windows Media

4.16 AutoStart Volume,

Windows Media 6.4

Windows Media, RealPlayer,

QuickTime Player , MOV QT.

src=frame1.HTML border="10" bordercolor="#000000" frameborder="1"

<frame src=frame1.HTML scrolling="yes" >

.5.5 HTML- (5.3),

, IFRAME . , <IFRAME> </IFRAME>.

, . , test.php, 6.1. action , , , ,

7.1. CSS HTML

7.1. CSS HTML

H1 , color FONT CSS-:

HEAD. 7.2 HTML- .

7.1. CSS HTML

SPAN, P, , , DIV, SPAN

, CSS, SPAN, class example:

<a class="external" href="http://yoursite.com/"></a> , a.external:visited { color:

a:visited { color: blue }

html:lang(de) { quotes: " " \2039 \203A }

:lang(de) > Q { quotes: " " \2039 \203A }

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

{ font-size: 12pt; line-height: 12pt }

p:first-letter { font-size: 200%; font-style: italic;

:first-letter :first-line :before :after, ,

monospace Courier, Courier New, Andale Mono.

Internet Explorer6 .8.6.

center center center 50% 50%;

right, right center center right 100% 50%;

bottom, bottom center center bottom 50% 100%;

, :before :after HTML-. .

{ content: counter(chno, upper-latin) ". " }

{ content: counter(section, upper-roman) " " }

blockquote:after { content: " [" counter(bq, hebrew) "]" }

{ content: counter(notecntr, disc) " " }

{ content: counter(p, none) }

decimal-leading-zero , (, 01, 02, 03 ... 98, 99);

lower-roman , (i, ii, iii,

ul.compact { list-style: inside }

HTML-, 9.6, .9.1.

UL > UL { list-style: circle outside } /* UL UL */

OL.alpha > LI { list-style: lower-alpha } /* LI OL */

display CSS- display: list-item

{ background: red; border: double black }

outline. , outlinestyle, outline-width outline-color. .

{ outline: thick solid black }

:active { outline: thick solid red }

HTML-, , , 1em, 2em, 3em 2em

(padding-top paddingbottom) (padding-right padding-left) 1em 2em . ,