Э.Фримен, Э.Фримен - Изучаем HTML, XHTML и CSS (Бестселлеры O'Reilly) - 2012

Head First HTML
with CSS &
L
dreamy if there was an HTML
book that didn't assume you knew
what elements, attributes, validation,
selectors, and pseudo-classes were,
all page three? It's probaiy just
fantasy ...
Elisabeth Freeman
Eric Freem.an
O'REILLY
Beijing Cambridge / Sebastopol Taipei Tokyo
L,
CSS
HTML,
,
, ,
. ,
...
m
:
~nnTEP
- --

2012
HTML, XHTML
CSS
O'Reilly
. , .
32.988.02
004.738.5
,
88
HTML, XHTML
O'Reilly).
CSS.- .:
2012.-656
.: .- (
ISBN 978-5-459-01060-2

HTML,
." ?
. L ,
, ? , ,
? L-
, ?
. , -.
, .
, ,
. , , .1
,
HTML, CSS
L.
-, .
n
no
O'Reilly.
n . n
n n.
, , n ,
. , ,
n n
, n .
ISBN 978-0-59-610197-8
2006 O'Reilly Media, lnc. All
ISBN 978-5-459-01060-2
ighls eserved
000
000
r>>,
198206, -,
000
2012
>>,
73, .
005-93.
29
" ::
95 3005- .
16.12.11. 84108116. . . . 68,880. . . 2-:.:
CtP << >>.
<< >>. 19711 , -, . i 5
2012
""~ ..L?$) "1" 0\~

(
i-
~0\..:'I-. Lf-v,_.y;;.OI.A_y;;.L
" v;;....g 1...1\.0\.gL .
(W3C)
(HTML)
(CSS) ...
HTML,
CSS L
, .
- n n
- n,
. .
The Ada Project
(),
, n n
, n
n (
) . ,
Disney. n
Walt Disney n,
aJava .
Motion , n
Disney, ESPN Movies.com.
n 199- ,

(David Gelemter) ( nop
: ?").
. n
1997 .
n,
Miror
, Lifesteams.
RSS ( n
), - . r
n r , n,
n nr.
Worlds Technologies,
nw n
n.
, ajavaSpaces
Principles Pattern.~ and Practice.
oyroyJto , n
n ~ n
Java ,
1 -5
Scheme.
n ..<\
11 1980 .
r .
, .
( r)
n beth@oreilly.com.
n ,
n (
r t:<:n<~)
nn nr. Dagon's l .ai1 ( 1
.. ), n 1980 .
- :
.
eric@oreilly.com fl r
http:/ j WW\v.erictreeman.com.
(ru ()
23
: n
35
HTML
75
-: n '/
: . m
coeu'l-te'l-tue
Webvil\e:
HTML:
107
151
na n
189
245
: ...
357
10
: n
399
11
-: JL'/t
441
12
HTML:
n L
285
CSS
div span
499
nn
13
14
303
:
n'/
557
: L-
597
. -10 , u
643
ru (:m)
awero r
HTML
CSS.
, , .
: , , ,
, . ,
- .
,
HTML CSS?
?
?
,
,
:

,

24
24
25
25
27
28
29
30
32
33

, n r, w ,
r 3:
n ),
-
HyperText Markup Language (
HTML. , n
HTML,
. n
, n n n. ,
HTML , !
36
37
37

(L-)
38
39
43

n Starbuzz
- Starbuzz
45
L- ()
46
48
L-
(Windows)
Stabuzz
51
52
53
-r

54
58
59
63
<style>
Starbuzz
64
rn
- caJan rn? ? , .
HTML,
, , n ,
, n
n, n
. n
<> ,
. , n, -

l ~n.",..."
)Wat'p~U"80NHJ80 ~8)'1" ...t J."tN
~ 1 .-1
:.':'~:t ;;.:.~-::==~::... . ..-:::~~-5~
- . ---.4------
_ __.,.... ___ w._ ~--~nn..l'ill

Y ...-U'tUM
S.,
..
81
83
90
92
98
11
11
76
78
80
............."..,.,...
__ ___
..
----------
..-..--(--
---------
"'---~----
.:;:;==-
'-_______ __ _____
,
..
-
rn , r n -.
, : , , , , ,
, ,
. -:
, ,
- . , ,
,
, .
12 M.IIb
h1
---
<iockquote>
h2
L-
h2
10
<lockquote>
D
(
<q>
...
h2
<q>
...
109
110
111
112
114
115
116
116
120
121
124
132
134
136
141
::::: Weville
- n31 r, t pacnonaraeoc n
. -,
n. ,
n. - .
- , , n
.
,
h, t, t,
:, /, /, w, w, w.
, ,
- Webville.
-J. Starbuzz ( )

, .. .
n
152
153
154
154
156
157
F,
...
f-
r
,

n n. ..
1 -

title

<>

no

target
158
161
163
164
167
170
17 1
172
175
176
177
178
179
183
184
11

n . n ~1: CiiJ8UI1'e gif, <<jpg n png~t
, . . .
, -r n -
. . ?
n. n, -? .
, , !) n
<img>?
w , n
. , ~~:
n .
:::-:::;u;!
190
193
rr
<img>: n r.-.~!> .1JI
198
n aplfOIr
Ji
200
201
202
203
205
207
-.,..,._,.,.....d
-~!..""""orou.
209
, coxpaJU~
213
~)(~i\(...(.
L-
m,Pod
~=---"1"""" ~
n ...
215
215
m,Pod
217
n !.-v.i'!
.1rr:: ~'-'.7: :
t<
index.html ~u
m,Pod
:::-. P-:.Q
-.~ O~f"'J:ioo.<.

11
. < r:.1.1
218
219
220
..
~ :>.<.+~
~J"""'"'""""1"'""
....,......,00.....,...,""-"
)(.,<."""'"-.}""""""....._W(
"'-w...t~ .....~.
12
myPod
myPod
222
. s
223
u .1..lJI ;:
224
, I< .-<:.:tJ>: :
225
229
myPod
n?
230
n :
231
r G1Fopa:a:eR:".u
232
rJ<)', ~~
233
8 n
233
n n
234
235
-<:111!' :' Pod
235
n n
236
HTML
HTML? n n
L-. CSS
? ,
HTML . n
HTML. ,
HTML, ,
, .
, , .
? ,
(
), , , ,
CSS. ,
.
HTML
248
,
!

DOCIYPE
W3-

Head First
, ...
n
251
253
254
256
257
258
259
<meta>
DOC1YPE
HTML 4.01; n
262
268
269
271
272
274
13
HTML
n. , .. 6. nn
HTML,
n L .

XHTML.
.,. , , ?
, n eXtensiie (Ww L. XHTML,

n
HTML. l()W
cne.De .
n n HTML XHTML ni) n. , n
nn... ( n n Ja
C.SS .
XML?
~fL:
, :-f''~ ~:-:::-:.'!:!>!!.t L?
~. -:~
==7!:. .1 L
cpororo ~I.L 1t -'-:~! ;,_
-:.
~f: :-::..~: .:.!..& ~IL
HTML L:
14
:w 5UI7.
wara
287
288
290
292
294
297
302
rn, r n
XHTML,
CSS.
-. , ,
. ,
, .
CSS, L-. ?
, ; ,
,
CSS,
Webville-
, .
304
, n
Webville
CSS L
CSS XHTML
n
306
307
309
310
311
312
313
: ,
ff:rpUu~ff
<h 1>

314
315
318
lounge.css
lounge.html GSS-
321
322
323
elixir.html directions.html
. n font ?
SS.
n
'.. elixir.l1tml

1
goee11tea
, r SS.
324
325
329
330
331
332
333
335
336
337
338
340
347
15
1 n
Bawe s s CSS n ycnewo. CSS

, n, n . n
n, , n
, .
n n ,
. n -
. n, ,
n , , n
. ,
, .

, ?
CSS
font-family

font-family
358
360
363
363
364
365
366
?

-<:

normal.

?
n .. ? ...

367
368
372
373
375
376
377
378
380
383
no .1
386
388
388
... .. .1t
n
.1r.3.
16
;.;;:;
391
392
, >!::>;3...'i
393
n1
394
10
::::::: nn
-, n xopowo
n n. n

XHTML.
, n . ,
n n

CSS.
, n
. , n , ,
n . , n
n n.
400
402
402
404
405
406
408
411
413
414
415
415
416
416
417
418
420
421
422
422
423
424
426
430
431
432

n1

.
n
n
n

n r

?
id
n CSS
n

434
435
- n.
436
17
11
-
wn n nr .
L-,
<div> <span>. ,
. <div> <span> n
,
no , ,
. , n SS- n
n, n n
, n . n
n
n, n
.L n
,

<div>

.\t
443
445
450
451
452
452
453
454
454
11
455
459
460
463

n ...
465
467
467
468

n .1
,
469
470
476
477
480
<span>
<span>
<> .1
n- .1
?
1..-n1

n 11 :
:
18
481
483
484
48!1
488
12
1
1
wn L-n .
n .
? , <div> <span>
, .
. ,
, .
<< rypr.t ?
,
?

Starbuzz

n n
Starbuzz

Starbuzz
( h1
text
\
----------------
2
h
\
text
1 : id="amazing
!\
1 text 1
: 1
text
1 LJ
~Q!D : \
text
1h
( h2
text
~~:1
text
1V
----------------~
~====te=xt====~~------------~
\
text
text
text
, , .. .
500
501
503
507
509
511
512
514
515
518
519
520
521
521
523
524
526
528
529
530

n ? , !

11
CSS Starbuzzcpa
<div> main
530
531
532
535
536
537
, ,
. n ?
538
nt-t, n,
tt

-, 1-1

n
n it

nltlt
. ..
left
539
541
544
547
548
549
550
551
552
553
19
ma~un1
13
~mu c:nucu
n n
n nywe n ...
. , ,
n n n n
Beanie ( n,
XHTML. ?
: n - ,
), , n
n n n L-. - :
n
no L-. n ,
n n L-n.
, w n !
XHTML
559
561
562
565
566

...
,
567
568
569
572
574

?
,
--?
575
576
577
579
580
582
584
585
586
587

,

?

CSS

?
-k/.....,~
MMdi(~~--.r.li.uoll
6f.J11~J'71.W'f.ttiOI't
/O'f.VOC ....,~
-"
-.......
"
-
n
'>"
'fllfT-ctr;-(Ooi!CIO...C:C:,.S1
l'llooOo~ltCoOKO
...."
!.
)1 11, ~ ...-.
20
,.
"''"'
,.,......,..
.............
....
. -..,.
",.
"
..
'""
... .... ...
.. .,,.,.,,. .....
.,,
<f'2Z6
........
"'
14
IL-fofMI
1
w - .n : - .n
.n. , n ?
n XHTML.
( n n -),
, n
no ,
n -r. n
nn L-, n -.
- , n
.
598
599
600
601
602
604

L

<form>

Machie
610
<form>
610
611
<form>
<i put>
612
614
615
615
\7
<iput>
XHTML
w.: -~
~~ I(f
n.~~__.= C!rto.uPo,....,.yna~_.
8 (''~,. "'"'I'ICI"~<- ,...,~
<select>
<select>
n

11

GET n
n

1

CSS
618
619
620
621
622
627
631
632
634
635
636
637
21
flruoeue
Ton-10 ,
1 n
r
8 ,
n .
,
- . ,
3
, ,
XHTML CSS
( , ),
0,00004. ,
.

.
#l n i
#2
#3 .
#4 n
#5
&<
#?
#8 ...1 n
#9
#10
644
646
647
648
649
650
651
652
653
654
1> ,,..,;;.. """"""'- ""' .~"""- ""' ""''ri!""'"' ~:

< IA"'-""1...o4L-~ ""' ~~ .<.OL{, """"-."_...., rrfrl\tJ.o
t.:.
ko2o nu m ku2a?
...
n n - ~
?
t-'111. :J .gDI'- t..t..n:;

JO~ 1t- .:;
I....::.":;
+U.. u... t...
, n
JU...;::.~+U..'i\.
JDI.g~~'\il. ..gt1tov"tf(A(.OI
__..j)
n
, ?
""'~- ~ DI >.
... , .
cmoum umam m ku2y?

...
?
( n ,
, n , n
, n .)
n - ,
n ?
n - ? n
? ,
HTML
?
... .
24
/J
\)
3, m gyaeme
?
?
- ?
maloke 3, gyaem Baw 32

.
- . ,
.
.
, .
, , ,
, ? , Mtr
,
.:
. , -
.
.
, , ?
,
. ?
. - .
_.
..j'~-jj~~,
-1..
vr!Jf>'\ "."._,.,._
...
'l .. l 6., !
~ 0...,._,;;..
-'b~t."""
~"...
, .
. . .
,
, ,
.
.
coxpanenue
. ,
- .
. . ,
.
: , ,
,
, ,
.
25
I cum.aeM, m umm mou uru HumcH

, , -. ,
, . .
, n n n,
, n . ,
.
1 nn r
.un.
, , .
, .
,
, ,
.

--
no .
n .
, n

40% ,
. .
. . :
?
n .
, 1 ,
.
, ,
. ,
.
~, n , -
1 Jl/.\~Lr lif~
. -- .
~I,'W'
w--4X>r,.,.... oJ
~ ~rr~
, ,
. 1 : <qj
, .
, , , , . ,
n n .
, .
. , n -
, ? , . n
. , , , n
. , , , 0,
? ..>> , !, ,
, -, , -,
, n , .
26
Memano3aue: u um
- ,
, , . , .
,
. ., , .
, ,
-. , ,
, n..'i.m , ,
. n1/m .
.\ ( ) ,
.
, ,
, , .
. , .
,
.
, 8HYWT1t r,
1t1, r?
'ITO HTML
CSS
: .
~l . J< ,
,
. :
, , .
, .
- -, . tuemUIIOCJJI ~ ,
. -
, ,
\':t. , , .
t, ( -
, ) ,
~ , , ,
, .
, ,
, , , .
,
.1 , , - ,
II\- .
:r, , !
.:r , ,
n , ,
~w. .
Hu
- .
~
27
Bom m gu
frucyat, -
, . ,
1024 . ~
, .
, ,
ll:!m1
, n, , , --r.
1l111jJeue, .\
. ,
r .
.n ,
. ~..'
, . ..1 -
, , n.
, .
CI7JU>,
, , -' ,
. , .
100 n:, ~"'
, -' . , m
, .1.
n .:r cmw , ~-
,
n, n . ,
, ~f
.
no.trytuapuii ., ~~-
n, n.
. .:
,
.
:mopuu, .. ?~W..J 1710 ,

,
.::.~ , ,
, , ec:rn ~
n. , ~10 .
, . ~,
.. ~ ..: fiiom:t.
, ~-,
, .
, , . .,
. , 1 .
80/20. ,
-, .
. , .
28
Bom m o>keme gm , m 3acma6um cBoii
32 paomamb
, .
. -
;
, ,
- .
G;)
n.. nn.. on..we 81ol n

,
..w
r , .
r.
nR n.
-ttmame .
. ,
. -
. , <
- n, n
. r
- .
, ,-.
, ,
, .
, n .
nnR nR.
.
~ nw.. r.
. ,
, ,
- .
, , 01:.
, ,
.
@ n))
.
~ nw n.. n!
Jt! .
,
',. .
:--: r r n . n,
no , r w r.

. , , ,
) .
, .
.
-
, .
-.,l

-
@)
. r .,
.
(
, )
.
. -tt- (
),
. , ,-
, . ,
HTML
CSS.
29
puume k gu
- , . ,
,
. , ,
, .
HTML 4.01,
XHTML,
HTML,
HTML,
XHTML.
, ,
.
,
HTML
), , ,
HTML,
XHTML.
,
, .
CSS HTML,
XHTML.
CSS,
HTML
r- .
HTML CSS. ,
, ,
, , .
HTML
CSS,
t , , -
, .

, .
r
w .
- HTML L
,
CSS .
HTML
- 1990- ,
, .
HTML , CSS ;
.
HTML,
CSS XHTML, ,
- (, , )
.
30
-.
, .
1 nn n))
r)).
<< <>>>, << <>>>.
( <>- , ),
, <<>>
.
n n nn.
- , .
, -
. :.
nn , .
- ,
. ,
.
,
, .
n n, n .
,
200 ,
. ,
. , ,
.
,
caehttp://www.headfirstlas.com/books/hfhtml/.
.n r w)) nnr.
,
, .
,
.
exueckue Jm
t&m
u.
r (Johannes de Jong), i 11.1.

n nan . :r
(Pauline McNamara),
, ~.r .1
, , .t.1'4..1 ~u
. , -
n .
(\ 'aJenrin ret taz .

(Barney Marispini), (Marcus Green . Aix .
(Ike Van Atta), ' (David O'Meara), ']~ 1\.or:ior
r (Corey McGlone) n .. .....r:..

, . , ! .1r. :-.il:e
(Corey)
(Pauline),
.: e;>eir:tl
. n. J.~\4R.:..~ch
.

(Louise Barr),
-... ~:o:->:?dJi
n XHT~IL
32
CSS.
~t\O\t..i.1t.~
2gmu *
I"~~D~~
DIJI""
~J

(David
Powers).
, ,
! ono . ,
, ,
.
O'R.eilly:
(Brett McLaughlin),
.
, ( ).
, , .
.;;;;,;;;; .u>./"u-u;,
j--~W..~V\-,;;;;t..ll.bi-\D
"'f"O~V\-Ot\.0\ ~ v~O.t....-jt..ltf.
(Greg Corrin), (Glenn
._1..0 +-\.t..~O.).OIW 5'+],;;;;.
Bisignani) , (Tony Artuso) , Xapm (Kyle
Hart) ,
O 'Reilly:
n.
. (
Volkhausen)
n ,
, z
(Karen Montgomery)
, . ,
, .
(Colleen Gorrnan)
( ).
,
(Sue Willing)
.,;, ~
(Clai.re Cloutier).
'J'l
DLf'w. 1)i/I...N.v
(Mike Loukides) Tww.y

' (!m O 'Reilly) ,
. ,
(Mike Hendrickson) ,

.
, :
-
, . , -
, . , . ~~~~~g~~il~=~=;~~=~~~~~~Jj
, .
LTJ
r n , , n no n , , ,
. , r < r, < <, .
, , n ,
n : HyperText Markup Language

( n ),
HTML. , n
HTML, ,
n n. ,
HTML , !
html-
;, ,
8vgeu 6u: paguo36e3gy

n ? -?
? - ,
. , ,
.
n ,
- L, , ,
. .
\::
I~
:U //1
g
@tfffi(J
3(1tl(. -rL..~01~1. ~~-c...r01\o\..~11t.w~or~ ~r~"
~U, . t..._) t\..LO~~'i'\..O ji-U'I.b j.. .~rt-..~ .'\.

W::..r0\1-\..~11!.. U.."\.\. ~11!. ~l1tk.O\o\.."\.\."\.\. v~OIO rO\~O.,j ><oro~, .
~0\ty."\.\. ...r\~11!. ~.i5J. .01"" t...I(..Or~ .'Sr0101.v
~ 1(..0\r..\~ !(....u-..--r-D~ "\.\. .~"\.\.t>< ,jc...ro'lA.....gDIX
"\.\. vN..Ot(J. f'\~.I. v rt...t...~l1t..."\.\. ~f'O\;jY-/"0\..."\.\. "\.\. ~01~1-\.
j~Of'OI."\.\.j.. +jt...'\. v ...)(\..j~ .
[g ~\\Jl
C,J~~ ..I-\.t._...g I(.........~

"\.\. J...~'\...._...g( >j"-~ "- \~~J
"\.\. .'&r\\~'I.)(~~-...r\~11!.. -
~\ ( . ~0\ty."\.\.jf'~bJI( ~ -t...~
~t...~'\.I(."\.\. "\.\. >,;;;;t.~J~i~btU1tt...I>~.;;:;t_."\.\,

N..Ot(J,;;;; f'OI~OV:.OI,;;;;b j01 V:."\-\.."\-\.!(.....\..."\1\..
m geaerri 66-
- , .
? -, , , ,
. - ,
.
...'\11.. t.,t-'\11..
_..
c...t..r.gl.f' .~ O"'fljt....~b
~....~ ft..t-;)l"c...01r 0 "- 0 ""-
"'f'".gN\t... .t-1..0 'SI"t>.~;J
m geaem 63
, : ,
.
, n L- -,
.
&~V
~ve.flotJf"'~:'VV'JQ\.""....,....
~;;;.t~~
W<
"r"'dJ-to .....:J"t...;;;.
~~-- ~
~ '~ ~~ ~-= 1
O~r:(~
... :\1\.. .~/"0\t\~ u...

)
~-------~~
~ 1~ .-?
, ?
HTML. .
, ...
11
html
html
nuweme (HTML-kog)
, ,
HTML-
, ,-
HTML
.1~
L-. .
-- cmpa'U'(J..~
, w.
,
HTML:
<html>
<head>
<titl>
Head
First</title>~
</head>
<d>
<hl>
Firs~</h1>
Head
<img src="drinks.gif">.
<>
.:;::::~::==--==
, ~
. ::~::,
<m> -</m>.t...,f
</>
<h2></h2>.
<>
~
.
Webville.
')
...........
</>
</body>
</html>
. .......................................... .
- ~ (
J 1_-\ V
HTML.
, ..D HT\1L. _l .1.-1.
L- .1.1J.
~-. .1 J~ , ,
38
mo
co3gaem
63
L-,
, .
, ,
<head>, <>, <hl>
. .
.'.u . , ,
n ,
HTML
!- , ,
, ,
o'Sro..(:\.""'I..i .....'\..~
n, n
Head Ftrst.
~ ~i \v
1(..011(.\tJ'\?jf:ft.~
~ ;; ;;;~~
v i
.'Sr..?.....;;;....
""''~t......-
,;;;...'~
'S
-.
r.fead First
@ , t1, , ,
~ -. ( t<)
@ -r Webville. l
""'
,.~....
http://lounge.headflrstlabs.com/
d First
~0
;:-,,.
_
011
3~
ri
lj: , HTML-
0: . ,
.html
.htm ( ,
HTML-
),
t Markp Laguage (
L-, .
. ,
),
L-
)) ,
, ,
, ,
HTML ,
lj: ,

0:
HTML
HTML?
: ,
lj: ,
lj: :
. ,
)),
1970- .
<h1> <h2>?
0: :
Word?
<h1>
Microsoft
0:
<h6>.
_ . ,
. ,
) . ,
<h>.
]j: <html>?
, L-?
0:
, .
CSS,
, ,
<html>
. CSS
- .
HTML
lj: -
L-?
0: ,
, .
. ,
, ,
)), :
. ?
0: , .
lj: L- Head First
HTML.
40
<--
,
-->
]j: L-?
0: L--
. ,
,
L-,
~ 'f'tlllf
HTML,
L-
Head First.
html
...
.
, . ?
- .

...
1oSDf1At/1 JfOifJ'lf f/1D
<ht:ml>
f+ ..u~
<head>
<titl>
.9WJD
HO..{),I1D rf'rvfL-op.
Su SJ-Ui-1fO1A14PI (h.DffDJee oJ .?>WJDf'1 fY'ee).
Head First</title>
</head>
<d>
<hl>
Head First</hl> - - - - - - - - - - - - - -
<img src="drinks.gif">
<>
<m>
-</m>.
</>
<h2></h2>
<>
Webville.
</>
</body>
</html>
41
~ ~ i!pCW>lU
OmBem
'foGDfiAWi dfa!j{o/lj WfO .?WfO ..D rf1L-op.
<html>
!+..~ f! BeJ"""C.WJfaiAi){.
<head>
<titl>
1-f"..I~ JOk!~IAe CJ-VIffIAi?l.
Head First</title>
~;r...
</head>
!+..~
<d>
<hl>
Head First</hl>
D. J11:> CJ"VIffIAJ?I.
'foGDfiAWi dftJCfiJ..
WfO .?W/0 JOki~IAe.
1
fJ
j1DJ~r1~ J.
<imq src="drinks.gif">
d.vi",/<<;.f{
1-f..I~ .
<>
Ua,D(f~ v((:! fLAfWi
<m> -</m>.
f!-9. ""felf!IDCIA-9. V\DJY{)J/OJ1117.
</>
'loBDfLAWi dfOJ[lo/lj WfO .?WfO hDff~!IDBo.
<h2></h2>
1-f"..I~ HDg/71rA
<>
o.Pzou.
Webville.
</>
</body>
1oBopLAWI Je~ WfO .?WfO . rf'L-.or.
</html>
42
.~ D. OCWi/7 CWiffALAJ?I.
w n k
html
Starhuzz
Starbuzz
. ,
, , , .
, ,
- ...
, , Starbuzz Chai,

Starbuzz...
npo HTML.

-, ns!
Starbuzz.
n?

( ) .
. .
1:} .
Starbuzz
.
D. .
.t ~
43
starbzz
'
~
.
?
, ?
? ?
(
) , ,
, .

1.
"* :t::CII 801 Botlr,

.(11r8
h.
l).., ChDtll7jCg~
vy;o~ ~
44
! .-u 9 . hfe!fXff!. f, 1D I"!I

~ ~~ -d~ ~DfD. dd(lD
~.,..,;: tml,g_ D fA(11D(A U(l, IJ1( dtJIJ1117,
Co3gaue 6-mu g
html
Starbuzz
, nn ,
r n - .
n r n
HTML no
r?
n, ,
n nw.
L-n, cnonyJI n
.
n ,
Staruzz nn n.
n index.html .
n index.html n
, n war ,
, nn .
,
-,
.
45
html os
Co3gaue L-u (}
L- - .
n, n
n
.
, .
TextEdit
, n
, .

Windows, n napy
Windows.
War
n n
n
Applications
Applications ().
TextEdit
().
,WoUi~
New Finder
Window ( ) finder's File
( ) n Applications
() .
, .
War
""'
~ ~iji~~
TextEdit.
, n Applications (
) .
TextEdit.
nop,
bOI~V\. /'.l:ltk-'11\.
War
(n)
TextEdit n n.
( )
TextEdit
).
in Oock
( n ). ,
TextEdit
, n
( ) .
46
Applications
-'
......
Sf~tlt1
8. ,..,
'
Sn:tlll'll'rfff"'<~
html
War w

TextEdit.
TextEdit
Rich Text ( ),
,

.
.

TextEdit,
TextEdit
Preferences
().
War
III

Plain Text ( ).

Preferences
( )
'
Plain Text ( ).
-, ,
Open and Save
( )
Add .txt extension to plain text files
.txt
).
, ,
lgnore rich text commands in HTMLfiles

(
L-).
Warweco
n .
, TextEdit Quit
(), n TextEdit,
n n.
.
. n
L-.
47
Co3gaue HTML-aiia
(Windows)
\"\.jl"~'ii\. ~t..rt-"\."\.
, , , Windows .
\,J;.,.olow.s.
, . ,
.
L- Notepad
().
Windows,
. ,

Windows
HTML.
, n L-

War
() .
Notepad
n1
Start ()
Notepad
Notepad ().
() .
" - Start (), - \

All Programs ~
Accessories ( ~ ) .
Notepad ().
R""ent Do<uments
Set Pr. .~ Ac<ess !lnd Oefeults
tl) wr.dows Oltaog
~ wr.dows~e
~ Accessblty
~ Communicotions
~ Entertalnment
> System Tools

...) ddress 1.
1~~~~~~- ~~~Win=do~ws~o~v~ie~M~ak.er===~ ~W Pram
CampaWity Wizard
Sync/vo<fze
Tour Wi>dows
wr.dows Explorer
Wur<Pad
48
\j;
War
html
Notepad ().
Accessories
( )
Notepad (),
.
,
L-.
/"t.>~'"'--
War
(6n)
Explorer ()
. ,
html
Irul e.
Irule
. html.
,

, n ,
.
Explorer (
..
folder OtJ\n
) Tools ()

folderOptions ( ) .
View ( )
Advanced settings (J
) ,

Hide extensions for known
Hicle .,......",. 101 known typos

Hicle P<otected ope~omg oyotem liet (RecOtiended)
i.rocc> loldo< ..mow. n ...,.,ote proce..
0 Remof!'et oochlolclet"sVIOw ~
0 Redoolpr...O.U./olclet..mow.otlogon
. n ,
file types
).
Explorer
---~-~u
St-ConlroiPnnMy~er
St- enaypled 01 COfi'C>fened NTFS liet n co10t
0 S t - - descljon /01 lolclet ond de>k> items

0 Uce....,..liewmg(Recommended)
- - - -v
()
.
/ Aest01e0ef....
01(
11
C.....t
htmf
aCIIlo
jaafiaeMte
fioJJfoCt
D: 0: : ,
?
. ,
Dreamweaver, FrotPage
HTML
Golive
-?
CSS (
, ,
).
0: n, n
, ? n,
-. ,
, .
- ,
HTML
CSS,
, .
HTML CSS
,
,
. , ,
Firefox.
Mozilla
HTML CSS.
HTML CSS,
. ,
, ,

D: .
?
.
,
HTML
CSS ,
n .
0:
HTML

, .
D: , ,
. : ltemet
Explorer, Firefox, Opera, Safari.
50
'!i38<i 1
,
.
.
u m

index. html .
, starbu,
.
, File () Save
(), SaveAs (
). , .
starbuzz
s.;, ,
,
q
Starbuzz.
New
n n
Folder ( n).
Uftf~.txt
~ s.
lndtx.html
.,..Apptk.lu l
Ocx.uments
.. .
~
MuSI<
PIOutes
Ptaln T~" t Ertcod:ir.g
1 '\, ~;)~\\"-'11\,'\, \,Ji..iow.S
...
Westem (~ OS Ronwt)
~:... 0\"-~t.. ~~ ~~1""'....." .....~
l_
Co.jj~ .",g'"' j
Hd Extenslon
/1 :1/-...s (.- <"''\.11t.)1

'\,W!\t... ""f1f>I- ~oft.rO\o(
{D~.....)jO~OI~~ .-h<t'"- '\...U"-'11\,
~.,
<POI'\A.AOI
<POI'\A.l>..
h\~;
n
starbuzz, index.html File
name ( q) n
Save ().
Omkpmue 66-mu
html
8 3
-?
File () Open File ( ) (
Open
(),
Open
Windows Internet Explorer)

index. html.
() .
Ptcturts
Pla~n Ttxl E.ncodlng -.;;.A;;;.;

ut"-'om..;.;;co.
~c'-------~
:)
91Qnort rich lt><t command<
\. c...coJ '
: \,Ji...o/ow.s ~",;f-~ E><;r/ofu ~ 0

~.~... .gj.gDI ~t"'-"'. t/t .g!ft
01..~t.. bfow.st.. (~0/")1

~O~!ft. O~k.p~b OIUW VfO-
.J.g~'III...t.. oauw o~k.p~'VI... </JOI'I;\.Ot.
NyOoaa.ta
c....oVC./"0\ '\. I>"'-"'~ ~01/
~t...g!ft ))(/"01+<..'\...'\.. <J'OI'I;\..
53
html
Tecmupo8aue mu
! ,

... ...
. ,
,
-r .

.
n
HTML.
m11.
? n,
n11<11
Start>uu . $1.49 m, m
n .., w , $2,35
cnpetto. ut Jt n , $1,89 ..
&1J!
n~ n n l.
$1,85
n r . n, ~~~ ..
n , n
, ,
,
. .
,
mdtJ(.Irtmt
"*
S..WZ. owiiiiiu , S\,49 ....., nu c:uea.

1 .. omoom! """'"
UOICI<D, S2.35 n:,
.....
$1,89 ..-
SI,8S ApoO<Iiolii II
WOII.OI" -........U aq>of1 n,

I J0<1uecn><>noo.cnoaanecw w . ,
, c::ntdt,
a.reutoa .

L-
n
n
54
\.
html
um.1 ff faMemu
, ...

Stabuzz.
( )
, , -
. -
, . ,
.
.
~ ,
~,
,
$2,35 l</h 2 >J
.j</>l
$1,89
$1,85
1</hl~~
$1,49
Starbuzz
l:.J
55
fff!
"D :m a:nucau cBou
:nerxu JL-.
,
,
HTML.
, ,
, .
, n ,
n .
<hl>n
St arbuzz</hl>
1i:u. <[A..Z.>1- </lA2> Okf>~
.01. >jj0\1..0O..g()l(., ~
<h2>
<>,
n :
$1,49</h2>
,
<h2> ,
<>n ,
.</>
$2 , 35</h2>
n n .</>
...t\..~. . <lA2> -
. ~'i)0\1..0A.,..g01<-j011.0O..g
$.O\
<>.
i..'UII. <r ' 1. <1f > okf':

\. 40\:.. ~01.
k...f ..S\..gJLSI~t-..SI o.1.-
<~2>n ,
<>
$1,89</h2>
.</>
<h2>,
+U..Uw~bk..O ~~AO?ICU\..11\.,;\..
$1,85</h2>
<>m
n,
jt..11.bN:~t.. Ol~jOI~ 3.-;0

.v~ ~~ ~N> 1-1.
: ,
.</>
./
html
3g?
<head>
<lOI~>> >."'..;;;; 1Q .;;;;t.:>~ <\tu.Aol>
Starbuzz</title>
<title>Kae
'\.< /~ol> '\. ~vt.:tc1 .;;;; I'\J)$(OJI...;;;c-.s~
</head>
j(} t\ii...."I.
..t..
<d>
Starbuzz</hl>
, $1,49</h2>
<hl>n
<h2>
<>,
.</>
~~!'-. DI.
<h2> ,
<> ,
~n ~ n. </>
<h2>n ,
<>
,..;;;;/"01~111. >.~ 1-j
$2 , 35</h2>
n .</>
<h2>,
$1,85</h2>
<> ,
.</>
</body>
</ht:aU.>
OL+\.0~~ \v.;;;; ~'"<~
~V ~J"ill~111.. '\. c"/"~j/"j
~~-~/"0\+\-~111r \."'.{ I),;;;;0/"111L ~111.

'J~ ~ ~1"0\j)''-
'\. ~CA.;U>I .;;;; ~j~v.sl

..Uj(} +-\-'11\...-"'..
$1 , 89</h2>
.;;;;uo~ <boolj> 11\. </tooolj>
3gu
me2o6
, 11 r ~~
, n ,
n 610 r .
D. ."f'~t\~1..1.. ~
..111.'\.. +VJ\~t... j011.0~"-.
Starbuzz
html
aCillo
3l
Bonfoc1
]j: , ]j: , HTML
0: , !
0: . , 0: ,
,
.
, ,
L- . ,
++ ,
, ,
<h2>,
</h2>.
- ,
]j: - +
<html>?
]j:
/?
- .
0:
. , L-
.
L-
, ,

0: , L-
HTML ,
, ,
. ,
]j: , <img src="drinks.
, ,
gif'> ?
- , ,
. .
, ?
<
id
"husnd">,
.</>
html
, ,

-.
n
.

...
(kott3st 1"~"'~"
~ St3r~\!&ZZ

r .
n .
L-
mission. html.
,
,
miss ion . html ,

index . html.
mission . html
...
..,._! v
61
css
, , -
n.

n . ,
,
n. ,
.
. 1.1 6n-.
, n..
...
, n L
n
.
L-, n
no n
. , ,
n ,
n
.
n n CSS,
,
62
3km m
html
< style >
,
-- (
) - <s ty le>.
Starbuzz
, ...
~ll-""-jjl"~ ~~f j
<head>
<title>Kae Starbuzz</title>
<style type=" text/ c s s ">
.../ ~ 0\Jc~j~~ ll-0"'-ol"~,;;_ ~~0\...;;:.-~ ~rL
;,..
</styl e>
</head>
<d>
<hl>
t\..I...W
;:; o,;;:.!Lf"~O\~1..1- w..t-1- <Jtjlv

v.. jD1"f~Oi~v..1A- ~ </ ~lv ...
~
6/ .....~t\.0\\l-0 ..t.:t. <~/v .O\Il..t.. ~"'jOia...;;;".c-
<ht:ml>
Starbuzz</hl>
V\."1.0
/""\ <j,/"~j( \l-0\ll.OV\. """\.. LI1JLS\
W......ObjO~OI.b. 1oVIL.Ob~~~ ~_jjt..L

lf~"'-b CJJ, ~0\... t\..I..O~~jV\...O
j~OI.b ."~- <<ftxr/<--JJ>>.
3jt..V j~OIIO.v.!l
V.1..1..
<h2> ,
<>,
$1,49</h2>
"""rOI~~~
.</>
<h2> ,
<>,
<h2>n,
$2,35</h2>
n .< />
$1,89</h2>
<>
n .</>
<h2>,
$1,85</h2>
<> ,
</body>
</ht:ml>
n,
.</>
i1f1
"}j: ? ?
"}j: n "text/css"
? r ?
0: n 0: ,
n . n,
n ,
, L-
. n
<style>,
; n n,
n.
<style type="SOsitsch"l) .

63
,,,,,... ~.; ;.;.:s r1;;:
c..mu.r-:
pugaue ng2 mu mu Starbuzz

, , <stl>, ,
,
CSS
. SS,
. , ~~ !~:..~:,

HTML CSS .
. , ,
.
, SS..,
index. html.
, .
<html>
<head>
<style type="text/css">
body {
background-color: #d2b48c;
margin-left: 20%;
margin-right : 20%;
border: lpx dotted gray;
padding: lOpx lOpx lOpx lOpx;
font-family : sans- serif;
)
cJv '\IWYJ)b~
v~DIIW'\1\.L-1 v'\.Ilb"'-'>
oW.A'\.DIIO~'I-1-v.!l
oW.
v'\1\-~DIIW'I-VOI \-f\tv\L
</style>
</head>
<d>
<hl>
<h2>
<>,
Starbuzz</hl>
$1,49</h2>
.</>
<h2> ,
<>,
<h2>,
$2,35</h2>
~ .</>
$1,89</h2>
<> .</>
<h2>,
$1,85</h2>
<> ,
</body>
</html>
.</>
html
ymewecmOue 8 m cmuA
. ,
ind e x. html
. n - Starbuzz
Starbuzz
$1,49
'"""" tR C!o'Stb v.<<D< 1<0 ei<QO<II.

orn1s>:>~-. r~r
n'"l,
no./\L
$2,35
$1,89
, $1,85
r"Jt\.L1tt..
""''f~l11.j.II..SI ~().1\.U..
\111. ~J\.~
~~IU) '11\.jO~/"().t.A-\-'\II...SI.
65
css
~,
, .
, .
OnreAeffem, KaKoU illrufm UCiloofiam
background-color: #d2b48c;
-\fui mecma.
margin-left: 20%; /--
"''"..\,
-...__
margin-right: 20%;
: /'J;u t:!jem Il!JHKmuroii, u nm

~/
border: lpx dotted grey;
f m,
.____./ \~\cmaafiufiaem faMef u n_r

~:l>mcm!J!lofi: Ilo
1
ff ,
padding:
i
lOpx lOpx lOpx lOpx; 'f.-.,
/
/
font-family: sans-serif;
20 %om muru mru
"\
m m-ruu. nem 'f

cmraul,
\. o\Jaem no!f fioKf!J mecma

~~raune.
J~
Bonroc1
]j: CSS HTML
]j: body n CSS?
. ?
. ,
, ?
n .
0:
0: n ,
CSS -
HTML
]j: , #d24 n
,
. ,

body CSS
{ }
L- <body>. ,
sans-serif, ,

0:
-.
n ,
CSS
#d248.
. ,
CSS,
, n
- . n
, .
, n
n, , ,
. ,
66
HTML
CSS. n
#d2b48c
html
Starbuzz index. html,

mission. html.
n L-
mission. html,
SS-.
mission. html, .
mission. html
, - , (.
).
mission.html
67

: L CSS - n.
css
HTML
,
CSS!
, ,
-
.
? ?
,
, .
! cmpymYfrY,
.
, , ,
!
, ,
. ,
HTML CSS
.
- ,
? ,
L-
. ,

, .
,
.
; .
! -

. ,
,
.
.
, !
eQJI'o .
,
.
68
. ' 177.J8 ii 1
html
css
HTML

. ,

,
.
, , ,
, .
, ,
CSS.
r .

HTML
!
, !
-
.
.
CSS:
<> <>. <><,> <> <r>

<> <> <> <>
<HTML><,> <> <> <><!>

, , -
?
, , ,
<style>.
! ... ?
...
69
html
css
-,
n
npo .
!
n
.
,
n ,

.
,HTML CSS- ,
, .
-.
n:
,- -
,
CSS.
HTMLCSS.
HTML
type align.
/.
,
<html> <head>
,HTML- HyperText Markup

Language ( ).
n -
<d> .
, -
<head>.
CSS - Cascading Style Sheets.
HTML.
HTML,
, n ,
, n .
L- .
<style>. <style>
, .
<head>.
, anpep<i.mq>.
.
70
, L- - SS
, n CSS
, :
, (
, , n)
,, <d>,
.
n CSS n
HTML.
html
~PBePro/~
:~~~~~~~;;~
;:w~~~~====~---------------n.
W8U8
;), ' ~~ ~
' (3.-:.
.u..
~~'j_~ ~D\..
- f.;o.rD\~111..
r
1 $11/f9
'11~
~ 1)"""~
~.-
fl'\sl'.O'J'1 ~ ~.- r"'Y'""'"""' ""r""~
\(.()4>L '\.j ~IJC 15'\.~'1.'\. '\. \"t01~11L.
71
. qi
Mamum mu: peweue

-
Starbuzz.
,
, , ,
, , .
, .
$1,49
.____ _
, ~~~=~~=~~: :z . ~
, $1 , 89
~~ - ==~~=~~ .~
. :;.;; ,
. ~
72
::.-:-::.::::;~.
:.~:~
html
mtssion.html
<html>
<head>
<titl> Starbu~z</title>
</head>
<body>
<hl>
<>
Starbuzz</hl>
. </>
Ocot at ~~"~"
,....'Star\ouz:z
<> . </>
</body>
</html>
J!
Starbuzz
f.fef1/chapterl/starbuzZjml5sion.htm1
Starbuzz
lt
n .
!Ij:>oco n .
73
jleette
n1
mission. htn'\1
<hfwt/>
<kAd>
<di>G. ~~ .Of>l- Sfa.vhvu-<1blle>
<5-f/ ~=''.fev+lc.55''>
borf~t l
b:l<j-rotfrd-c.olov: 1ic{).jf{fJc.;
/!1().vr~-t.
'?.0'1.;
'?.0'1.;
bwt:kv: lfi doffed !.,0-if
~Vtf: IOfi IOfi IOfi IOfi;
~!Avf~--rift!:
{/-.(.o,Wft ~5-:vi{;
~
<15-f/>
<lheli>
<hodf
<.Jtl>()coG.lra. .Of>l<f>(}dJUWtP
Sfa.vhtn'l-<lhl>
gi)C. j.(_?11/f'1 .Ott.cwtOf"' .OftHa.
> I!DUCA. <lt>

, --
y>1f0CII10
gl>ff4/).w;!-
;~wp.<lf>
"r
1"\
<lbodf
<lhfwtl>
fft! V>PfffXIU~
~..-. Jt..U'~-1 "~run
m-"""'"""""-
;;..._--,...,---.....,-~"'1
Starbuzz
00.""""""08< ~,.,.......,_>:.....
l!f\'!<~-~t..t"'~?
CSS,
- . .
, .
~feAfII'e,
marqin-left: 20t;
argin-riqbt: 20t;
order:
l px dotted gr.y;
ntrufm UJ.m JJtr mecma.
~eeirem, llmo IJ>alluUa f!j coefUt.foo S)je'ltl Il)JIIUfRou,

u
JII' <:f llemoM.
cmaaaiiullaem fa~Mef ellofo u :nralloo omcm)J:noll: :no

111UfUB1 cmrauJ JJff ,
m emo-KofU'lellsu UBem foaa <:mfaRuJ,

!oot-faaily: a&ne-eerit;
~m JloB llof!j ocollofo 1!8 cmrauUe.
20 %om
2 u -
ucnog~eM uneymecm
- n r? ? , .
HTML, , , n ,
, n n -. -
, n
. <> n,
- . , , -
n.
u 6wm68 2m8

Head First?
, ,
? ,
- , .
Head
F i st
---
flle:///chapter2/ completelounge/ IOUnge.html
boW.
~.gOUI
'11\. jW-t.r~-o-0\t\..t\AS\
c:;fOI.+\..~01..
tv\tjO~OI..gV\.iAc1L~t-'11\. NJ\ j.g._
i!1tL v./"01~11L~.)>! t<1 . {) nn

Oo;"'i:JjM NJ\h-'11\.W.~.g jf~ : jM
amrr;Jf. . . lf'/ -. r
~jt\~'11\..
'i n (nt ).
1 \Veville. ECJI n, '

t , J. .
a.ntmc rocecJil
kead
J=ir
~ r.t//Ciwpter2/compteteloun~e/l>t'"'f19fllxlr.html
'
r )(
"'t . : . t1( u.n:
n , -:
n n, nJi w n - .
w
r ..
1J>31'W rn DIIJ. &1i! ~
su ,
n 6. ~
H ead First ,
tt an'I"''C& &k)'C:OM JOOJ<W
:.
h tml
directions.
e lixir. html.
!Z J
\!!!1 n
,
n
http: //www. headfirs t labs. .

lounge. html
L-
directions. html

elixi r. html .
.
, ,
Co3gaue o8oii
2ocme8oii
u ug ii8
ht tp: 1/www.
headfirstlabs . com. , chapter2/
lounge lounge . html, elixir. html directions.
html ( rpylY ).

chapter2
1>.<f'0'.1i\.t;t.
wt:.g"\.
~oy-"'c...s\ ..g -"'"\..

...D....u..t..
. .
-"' ..gc..t.. 111QO~I"t>.~t.k'-WI/

w.o/"111L ~?.+'\.111.~,. 1-\.D:go"\..
'\-:JC..O:.gLf~....g~..gp,t\,A'\J)"\.
'!.~..g"\..
....
lightiue.jpg
red.jpg
Head First . ,
? ?
78
Pegkmupo88MU8 m8U lounge.html

lounge. html .
L-, . ,
, .
<html>
<head>
<titl>
Hea d
</head>
<d>
<hl >
3ju- .t.jO~DI.g'\1\... IMLr!<.Ojj. <1t.Jti(,'\. ~
First</hl>
<img src= "drinks.gif">
<>
Head
c...v'\1\.)!(. - "-'\1\...-;.IUJ\...'\1\..
~ c-o~DI~'\11..!\ --fI(,'\. .J1t

, nn ~~~<D\>. ~1(,
<&
href="elixir . html " ></ >,
..-:...-:. ~ l""'~o..-:.DI....I .gl11.

;J.g"'Gi...-:.LLfL,) ..$,;J"'j 04 ~ ...
n , ,
<m> - </m>.
111.jo~I'.I.jO~D\.g~
( ) .
VIOjDI 1UJ11<.01.-~~
~/ ~"'fDI.g.IO~i.i.
~V....g ~I.LIUJI<\JL
</>
<h2></h2>
<=..
"""tf""
Webville.
,
w< href="directions.html">yaae</a>.
</>
't
</body>
</html>
3jt..L ...111.jO~DI..g'\1\... t-!(.~ ;j"""JDI~'"r .g~.gb i.C-+vOb.).YI

~<D\ >.
u mu
lounge.html u mecmupoBaue 8 6payJepe
lounge. html
. .
n n wu ccwne n, n
u n n.
n
.~~~~
63
.. AOIIaca 68
lounge.html.
811 n wu ccwne 3n, 11

H088JI
88 83881'111.
79
ccrt t(LJ
, n
no
. ,
n,
HTML.
mo gu
n n L-. n
n , ,
<>. :
<></>
n, ,
- L-, ,
< href="elixir.html">an</a>
t
~/"~~~ l.ftf jt\jOILI
t~.D~j\'\.0\~W.. c..1f.A\t..'\l\..
<
jN1 ~oiii. CNI\t.."I. '&/"~ o~o'&I""'~

~\t..~ (J.~"""j()!...r:.J...A"I.>>/ ~.,..t.. ~t.J\.\(..()1. \'\.01
1(.()~0/"0'ii\.. ~bjO.g()!....;;\t..b ~~t.I

c.,v;:./"0\1'\.~ ol;'fu:ko...s.l.t.",.J.
href="directions.html">yJCaaen</a>
\'\.01
mo geAaem 3
-, q:
, , <>,
< href="elixir.html"~</a>
r11 d
Plrst
Q
Head First
t (<t'\.01~~1(.11\..>)/
'\. <<~j01..t.ll1..'> 1-\.D$(~.S\,;:;.v.S\
...U$1 ,;;;."f~\~'\....
1..;)I"f~\~1..- ,;>.,UOI-11\.. <01 >/ \ :
,__.;;;.._J ~'\1\.. v,;:;.OII'\.O.g.,;;;.v.
t'\.0\
w: . : n :s:-
JIAWI1XJ1, n.
, cma~etJm pax~>'ttN 1kc.ra n: &ecpoeoltofi n (t

r6)
.g~-v.;;;.r"'l-\..~"')( \(.0\.'~r
t'\.0\ 1(.0,;;;.01"111 ...~+\.0
JJaJ(e-te 8 r WebviSe. .n . n.. 6w l , nR
~"*'-(J,;;;. \Q\..0~"\i\. ~11\...
< href="directions.html">yxaaen</a>
Holo.JIJ,ume <> /\,.J:I r U11Cfli1eKc1)10tX

f!JHro cmrauiJ,H
(oeru\foe ').m <> aruBurol3rlJ~ te.rPIK<>M -I<>K<>i.i J\ft,Illi

Be-oralfll.He.
Arx>t.t~m hr\r} ( aA_Fec (>JIU .

81
, ,
href . .
w I(JI( , '' nn n ~ n 11,
\__..__ _ _
..,.","7
sw. CmaJQ~am 1..Q. n
t'! (:t
).
... L <<~jOI.r:.t-'\11.,>>.
t WebV!Jk. w, 1' , .
-.1\.'\1\, ~/:1tltl>. ~~/"M.JII !.

<t'J)......:~..w.~'\1\,'>J ~r~ ~oj~
jtVU\..W... t./i'!(i(.l;-..t.... /...
< href="elixir.html">anJC</a>
\
...'\!\, .~,.~><~
voo~v......-:g,jiO~
t r.;g;:~~Z
i'--_______
j --
! ~..'-1.....
1 ..:....~..==.::=--=:::-..:...-:::.
as...a,.~-.A08W8a.pon
____
...
,.._,... __ -~--
1
...)Ot.__ ,.........
~~--~-"~)
~.....,... ~
~.o.4-
.....
~~-JIUIIO~.,.~-o
~-----,_,.~
...................
.......t.,_
._,...~
~-- ~c.,.."...~n-o.:-
82
-..-..---'--'---
--------
w:::.r~><~~
makoe ampu6ym

.
.:! ,
.r~~. ~/"t.. ~j~().t... t\ .1 I(.Oiw"\i\. .s~3111J.c- ..1...s1
.t. "\1\.~~ ~ jOI+V"D.. v-:f().t.. CJJ.

href="irule.html"> ~ -"'rl/I..C):w.
. <: l..f.t..<f ~ 1.1ro01t..w.
JJ
t\ ~rt..v ~t-\U\..11\.S\
3
<
(.,;IU\.1(."\1\..
_ 11)
<img src="sweetphoto.gif">
f----'
_
;j"'- Uv O"f'tAt...II..Sit..w. 11\...s\
""/"
v '\1\.:~ \
th
rOIV\...11.01
~ w..,..opot.. jOI~OI~v.sl- -
.J. , ,
""
t;
:z.t..
;_)
u m
< car > ...
<r>, , ,
- :
. ~ Dvt.r W. .t. ...t... ~jOI.b ~t..j

.
"(
<r> ~ </ car>
~3~\..1..S\
~<: - ~
""'fl..CJ~.o 1 -
01
..~t.. t'.t..,;\. ..\W.."\1\.t\L
<car> 3 .
rV\..t.,k\..S\.sl 01 -"'r~~-"'t11r
.t. ...t... vt\~j~b
~-vt...."'
-'111j"'-.."'- 'IIU-Uf'Or..OI ~""'-""'-
n ,
.:1 , , , .
I l, <car> ,
n :
<car
make="W" model="ini
Cooper"
convertile="e">o ~ </r>
, ?
.
"W~
~'J"~~~,.~
um
II, Bbl
n L-,
nn ,
. Bawa
(
r).
.. - ...
--..,.-1'~..._-
11\..S\
8apuam)
< hrf=" t~~~ <j>
r nwyCJI :
, ,
, .
mak (npaBuAii
__.../' J
_jt'.l(.
r"'-~--0\ j
"'-"'r~~W.OI
geaume
;g
~.1611\.\(.""'
~
:j'~
jl-\U\..11\.t.. 01 ,F~jW.OI
01\tt_
I(.OI-ti(.V\.
mak (enpaBuAbHU
8apuam )
< href=top lO . html>Oe < />
ovt"k..A - 3+\.D\U\..'11\.t.. """"'r~:J""'"'

1(.01-11t!(.'\...
t\.t.,
-J. -J;go"1A.N1tt..
83
:1/!fJf.: : .t:r:.
aCJilo
Bo:IJfoc
]j:Mory n n
L?
0: ,
,
, . ,
n ,
.
, ~ .
]j: , n,
?
0: ,
href
HTML.
,
, ,
HTML ,

]j: , n
?
?
0:
. ,
,
.
,
.
, n
n,
HTML & XHTML: The Definitive Guide (O'Reilly).
R.~dQ'
i?''
, n.

Head First:
Href.
href
, .
Href:
. , ;
. , ,
, , - ? .
Head First:
. , ?
?
Href:
. , .
, <>. , <<
!" : <>nm ! </>. ,
href,
Head First:
<> .
...
Href: ...
. , : <
href=" signup.
html "> ! </>. , <>,
<< !, signup. html.
,
<>, ,
Head First:
. ,
: ?
Href:
-. << >>,
f.
Head First:
Href:
- ,
. - ,
,
Head First:
...
.
?
Href:
! ,
. , - ?
Head First:
, , , . ,
Href.
85
eli xir . html
directions.html.
l ounge. html
. L-
elixi r . html .
rr,
l ounge. html.
<html>
<head>
<titl> r d
First</title>
< / head>
<d>
<hl> </>
<h2>0xnaq8JUDI u </h2>
<>
<i.JDq arc=" qreen . jpq">

~ r aorUIJioa
non.sy
- : eneiDI , po&IIIIC ~> tr .

</>
<>.-w </h2>
<>
<i.JDq
src= " liqhtlue.
jpq">
~ w
wrpycoiQIX IUION IIIOBIDt& ,
ocae.w.r
1111'1'
copro,
3 n~W
s.
</>
<>-n s r</h2>
<>
<i.JDq
src="lue.
j pq">
'l'W r &IIIIDI,
w,
u -II
noxoA
.. .
</>
<h2>~w w spwa< /h2>
<>
<i.JDq arc=" red. j pq">

&8. r rr r
naxaw r .
</>
DOI~ +'\.O.gt11.,_
\IY\lrijL..,
'S~t.> ,jjU..
</d>
</html>
, directions.html.
86
<> . ,
<>
, <>.
. .
nw
HTML
< href="hot.html">opo ?</>
I:*
cv.html
candy.html
< hrf=" ------"> </>
mini-cooper. html
MOIO
'.l'
<
nr
</>
href="millionaire.html">
------
aQDo
Bo:JlfoCl
]j: , ]j: , r <>,

w , . n
? , ?
<>?
0: ,
<img>
<>,
, .
0: , . .
<>. ,
( ) <>.
n -
, , .
87
c::mm
: r 11
mmc,
First n n.
Head
n n
n
. n n-

n/in- .
HaBegeue nopgka
L-,
.
. ,
,
-, .
, :
lounge.html
... . J
~;" ;:.: . .. .J
.
lounge
01 tU.L \w;;; u.wtOIIO~v.S\ "-0\~<, 1-\ 1<,0/"tU...~;JIO
..... .. ...
....
elixir.html
. ........ ::_._._::: ... dlrections.html
lo..OI~;) 1.~01. ~ j\'\\.....( ~ 0\'\
~.1\J\.....- ~..D~\..&1. ~trx+U.:lC ;;ro~r

VOjLf>OI~t..'l. ~Vt.. ~&t VOI'l.~OI.
green.j~g .
ue.jpg
~ ~Vt.. 11\..jo'S/"MKU\.:I.~. ~1(,~""j~tr ~ ;)t..

VOJjOI..... I<,Ot..-"-0\~<,;)IO tU.jaO\j'St.y>W<j( )(~;) 1-\v ~Vt.."U>
~"11\.. c.";;:;fDI+'-11\..~&t 11\.. ~!(, y>'\1\..V;)~- DDI~DI1il..~t..
\U)\I(,-..__~-1.5 ~ ~'\1\.......
drinks.gif
lightiue.jpg
red.jpg
puBegeue 2ocme8oii mu 8 nopgok

- .
n n,
~t n ,
.
J
-f>oi. "-".vV... .-;.o..~t-
Ho..~v... \(.()~~
v... o~DI\'\J...VI"c...S\
.v,U)\Io'\1\.'-
"-"
--
.J
""'\
about
beverages
ue.jpg
red.jpg lightue.jpg
\ jD\-f,Dii,.-:.t
._.o~"\11.--ic..t..
r-w--~1'\.il-v...-t Oj"-(1
"'""'~~-
"lj: n
, n r

html
,
.
L-?
0: .

,

.
]j: , n
r nn,
]j: ?
aout everages?
0: . 0: ,

n,
, ,
89
11
, n
. , .

lounge
about, beverages
images.
directions . html about.
elixir. html n
beverages.
8 images.
, lounqe. html
. .
exueckue mpygocmu
, nn -
nn r
nocne n

n nano
Bead First
~
- n.n . -n. s
IWIIL <>-n, . , c~am -.
n'f (- cooii coii )/'~).
ii ' WebviJ!e. }'* J>, '
...
1;.r~;t.. ~1-~.::~,.:;.~ ~-
90
'
~-~~>:
.. .
...
~'~-
....
r~
.s:l , n ,
n, q
n n,
lounge.html.
,
q
n.
n. n ..
:s nn
.
href,
~rmo
nan?Ce.
nanO?C.

.
,
,
omJcu
~?t ,
href.
91
L: ,, m/1.111
uu nymeu
, i r
)(
~ 1"
0 ~1~~jt..~wt..~W
~ u-o ~-fW.Oi..'I..
> 01~0 w, 01~t - {:---" d-./~~

00
( f
J '1
: , ,
-.,c;Uh v ~..'\...
;:~
, .
VJ
- ~
, ~ .
\cJ~~j~ ~0\IC..t..., l.JU .
, ,
.
.g

( ).
1n n1 nn
3 U11 lounge.html elixir.html

-
lounge . h t ml.
<> :
<
href= " elixir.html " >a< /a>
n~. -t ~
lounge . h tml
beverages,
lounge
elixi r . html
lounge.
~lixirs.html
..:\1\.
vfv _.-- ""'~

M11t .g
'~St.~e.....,o_..'\j
.~Uj}IO;j~ 'l.II.OI't>~.
"-Z]~Li\..
<-
, ,
"'f"'6t.... tAOj"'
n f l
r.
elixir. html ,
l ounge. html
beverages.
t\.0\I- ..t1\.jo~\'\.11t
0.__~c..;;:;'\Nbv.S\ ~ "'-"'hol(,~
bwu~t..
l href n n
, r,
, .
<
href="beverages/elixir . html">a</a>
~ ~ : n10 fl
f1'fl'l(
di rect ion s . h t ml
lounge. html
. , <>,
. ,
<>
l o unge. html .
lounge
aout
directions.html
<
href="
------------~-----------
1)1).\ 1>I j
.)1)E.tb
\.I
94
">ykaa'.l'en</a>
r r: n
n
.t.:~..~<- .1. ~~
{!) q: directions.html q: lounge.html

.
<> directions . html:
<
href="lounge. html ">Haa
'\1\..,..\\ <'\.~ /o~~t.,..l,
~ w~or>l..;;::. ~/"~~
~ ~~uo~~oiA..t
</ >
~~ 1jL tU'I)j'\.><-.SI
<'\. ol;(u--ho--.J.~t.,../.
~ ~''- tV- c-r~~o~~.....-:;

"'f~~'\..~-

- .
-
directions. html,

aout.
-lounge. html,
about.
.N>.\~
I>j~.S\
~~~,0~-
95
@)
href
href t< n n
. , ,
, . .
1 lounge.html
l ~'~"-'< >-"{.<;._
ik._
~
<
href=" .. /lounge.html ">Haa
~~b/"'--C..At..:.O'tO \\-.g/1t
.g~~~t.. ..\-j( ai""'{JY-r ~;,~
11\....!:\:. <jJCI"'i\.. /o~t...l..t.,.,.J.g-~.ua..
.j/"O.g!U.... .g~ fflJ"~"'-:.t.b(..lc-0'\ii..

~.ua..).
< />
-
I.
3t
Bon.roct
"}j: ? "}j: , "}j:

, ?
? -
0:
0: , . (
<<..))
,
. ,
<<.J),
0:
. ,
, .
1 ,
. , .
<<../ .. )). ,
1 .
, - (
: ,
) .
, << .... ))!
,
, .
/)).
]j:
, , ,
, ,
n:
0:
"}j: ,
255.
, .. ?
, fruit.html,
0: ,
, ,
, ,
<<../ .. )), n-
.. . : ,
)),
1;
. ,
).
<<../.J)
..1../fruit.html.
, ,
"}j: -
"}j:

i?
0: ; -
diections.html,
0: ,
(,
lounge.html,
lounge,
about.
about,
.. -
/)). \)).
Windows
\))<</))), ,
. ,
: ,
lounge. ,
Linux
Windows,
- .
/)),
HTML .
.~'JV
Jf(w,-'iPM
elixir. html
1 ounge . h tml .
directions. html?
QO>Iew
g 'wahn :
97
mu omcymcmByux U3opa>keuii
. , -.
, ,
, - , .
. .
<irng> (
, - .
) . - ,
src
<img>
href.
<img>
lounge. html:
,
.
<img src="drinks.gif">
~
~ ~+U>t;1...-::.t..\'\!.'\. "-:J~b/ IG0~0/"1:1!.'\.

1.0.g0/"1..W, 'f)/"~j{ ~t.. /"0\(,>~ /"11\..C-ji-U>I(...
/V\11t j~OIA'\11.. t.:U> ~+U> ~0\1(. ?r<t-r 1(.0\1(.
.g 01~/"...;;j.t..l.ftf.~t\ <t~~>.
ouek
nymu om mu lounge.html k pueyky drinks.gif
, lounge. html
, ,
images.
(/1) . .j~1..W.
.g "-"'~ '""'"'jt..J.
(2.) -
</'DIM olti~jf
...1.
'~jt...
~v::.~u-.
(1)
(2)
images/dr inks.gif,
<img src="images/drinks . gif">
98
ouck nymu om mu
elixir.html kaiiAy red.jpg
red. jpg, green. jpg, lue. jg..

red. j pg,
.J
,
n .
3D: t I-\.OI)(Oj'\I\....V51
~ .".,;. buru01jt..J1 "' ~.
~t\..0 ._.._... ~ k.~j
iw.D~jf..J
...'\1\-~~t...
"-.j~b ~u-.
(3) vt, ~\(.()~ 1-\.01)(0j'\..

~1.. fui.jrj
,
fOj~U1.bVIW1i\,
,_\~
, :
:\,...~ (< 1>>
1it.r)(,
.1.-
(1), (2) (3)
~jj 1-'-'\...-'\1\-.
1>....:~.j~"'-"'~
iw.Oijt..J.
images
11\...~
<<
/>
J...~ t\.11\...'!.
~.
Pot~4 . 1.-
red. jpg
<img src=" .. /images/red. jpg">

99
omocum<?li'. ~,. ..
, ,
n . -

elixir . html.
, .
lounge. html
lounge. html
src <imq> images/drinks . gif.
elixir. html
src ,

e~~;:J.::::!l;,-;_-:-.:~; ~-~=-=. ...~2

no.&l\ottn 108)10'
, ''CO~CDtMC"t80MfiYIO l':.-.)"10
Uudflnr
___
.. 1 images/.
__._.__
..._.....-.
........
'--"--~.--
. ,..._""'"--.--.,._..,.~ ~

l ounge. html .
n .
S. - , n
chapter2/compl etelounge.
---
!
.
s~ .
100
/!fl i1 8i)
.2
~------
<>.
href <>
.
<>
. - ,
, ,
).
..
. ,
/.
-.
, -
-.
.
.. ,
href.
- ,

,
.
-,
. ,
l)offiaff
'I}o mu:mt nm
n n.
100 , n n music. n HTML-,
nn . -
, -
.
,
.
n n
. n ,
n n.
!
top100.html
logo.gif
1
\1
"'""""=- / /
floyd.gif
coldplay.html
102
xandy.gif
chris.gif
uw m kokypc.
cmapm ... uu ... apwf
top100.html
1 03
v ti
j?
<ht::ml>
<head>
<titl> r~
3ro-r D:1'0 t Ot'p<IMHOt XOJIKC'C1110 J'1:! 1t q>
Head First</title>
n3.sr ltr~;~: t.ocraay :w ..._t., ti( :DD

. ;rf6K?:~t.
</head>
<d>
<hl>Huz K&f'.l'JC</hl>
<h2>0x.nut,eRIOI ii </h2>
<>
<i.q
copro,
1t
src="green.jpg">
r &f'.l': 8'1' orpoiiOtoe -
-epa.noa
.:
n'l'
seneJGI ,
n: ns
</>
<h2>0JUJut,eI &li cpon</h2>
xt-rplk'tw rwryn -:. 6.: 1.: 6,J111sw. tpa31

ZC' :St- 83 8 COCOJUI110 Ooxost Jl J,R1"81.
<>
<i.q src="lightlue.jpg">
li JIJ
w
n:
nnow
ocaeJIC'l'
11111 ,
n'l'
</>
3-. 3r5 rr 'I. .u : v
r-
<h2>-: r</h2>
<>
<i.q src="lue.
jpg">
:'l' r: III ,
Sw,
oCSIUIJiewe R
. n
~R R
..
</>
<h2>~ :'l'ii ~</h2>
<>
<i.q
src=" red. jpg">
~~~ r CSoraoro - &'l':

: ~ rS .
</>
<>
v----
< href="lounge.ht::ml">Haa r</>
</>
</body>
</html>
104
~ tv\11t.jO~t\~.A..S\t.... VWI.~~ ~~.;;::,f' t\~jt\~t\/ "'"'~I

)){f't\"'-~b t\~f't\.;;::.::.. 1> t-~~t..1-1..11.t\~ .t
~.u... ~/"~ "'-W~/"'\... ~ ."'"'..
Dr.9.D 1.'V\..
~t.""'-t~/
cv.html
~~
b~<..J t.-t\.0\.S\
< href="hot.html">opo . 'l'?</>
.t="c...v.IA:rw.
J...
r,)
<01 \t...f~t
>r-.t..jiO.L<
01>
1"
candy.html
< href="c...~>,"'-1)/}\t...t-.-/ .. >Bxyca 'l'</>
mini-cooper. htrnl
11
<01 lt-.ft{=(/w.iv....i-c.ooFu-.\t...tw./ >1......F"\.!-\.D\
fV\"\.t\."\.< 1>,>
~~1>.
n'l'
MOI)
w.il/ior..JJ~ift...\t...t-.-/
< href="millionaire. html ">D~>..gi>.1...t.. ~"\.'fl>.t.....

</>
~~~
' .~
..
Peweue
lounge . html directions. html.
~----
, <>
(. ).
. n
<> lounge. html ?
about
everages
ue.jpg
elixir.html
<
105
femeue ;u ~u
no
]J1um nm
..L____..~
oL Jf
//oJJO.Jo.L.
~';~
."".. .~o.r..s
_1_
top100.html
genres.html
logo.glf
logo.glf
~~...-:. ~tOI ~~
)(\1\..r... ..-:. <f""'I.."' t-O/olrl~
t.t..../1 1(.()..-:.or~:~t.'I. ~j'\N'-A
~-
.J.j;....~11"/1m1t.kfi.Sj:t
......
coklplay.html
chrls.gif
~.-\.:\1\.~1 ~ ....Din.J(..I... (0~
..-
~j\'I,.'\I\,.DIL-t--.9t D"tt:. """'""""""
i%t.r>< 1- O\..O"""'j"'L. ~ """'~
.,..'\1\Jiv/ J"'~ o.-.~c..:\L-t--.9t
~ """'~ ;..,..~ "'1{ 'LO~
'LO~O~I ~0\L-t--A o..-:.tft.DI.;;;.~
ILD\1"""'\I\..I-\.IG-~ ~,.;,sj{- 0 1{.

!
, .
,
-
rn , ~ r 1 n 3
-. , : , , ,
n, n, , n ,
nn n -.
-: n
n, , n
n - . , , - ,
n ,
, n .
Om ge8uka k caiimy ckopocmu 12 u 8

, .
-?
, .
-n, ,
.
HTML (<hl>, <h2>, <h>, <> .)
n ( ) L-.
8
8
n, L-.
, ,
.
.
! Di!lou.me m Wlraeue, DtfeA m :nereerm <mfaur.
~

,
-.

.
, .
, -
.
:
n
:
, ,
. . ;
- n n
,
n ?
8uk
-. ,
,
,
. ,
, ,
, .
...
>. ~w.trt.. ~ t
D~\.1(. ..'W( ...~ \<.. ... ..i... )S..~.
<<(}~ ... "'.t.rr~or'\1\.""- N

kA~j!1t\.jt.t\. lo~'lll..jUI.Oit.. jOI...t.W.-
2.0 0\~v.N.O\{ 2.005
"-'111..{ )v;::,Of111L ....,;::. 'lll..jjOI,;;;.~ ~
~c..t.:to <JX>""'O'If'DI411-'III.. '111.. .-.'\...-01~~ uo
"1"Wc.il.w..'III..1. ~ v;::.ov;::.jt.t\. tv;::."J ~

v;::. tUIIJ~A~ 'lll..jo~rr~'I..t- '111.. 01~
jA~~OI.
(,..;."'"r .11 ~.~.- "f'OU< 1'72.00 .111..11. '111. ...~~

.g h.U<C,..;.or!ll>( ~t.Vt\I)( ....u;;.: "~>.-D~>.1
~"',..;. D~>.~~o~ 11'\j'\;\kr~""'t ~"',..;.

A~I>.)(O/ D"(JIV~/ ~"',..;. ,..;."'' l\9c,.,.;:, 4"'"''7
~"',..;. o.or"Jor "-V.., ~"',..;. Arv.o~,(r~,..;.-or

lc:o~;<f+<..L1 ~"',..;. H-tv\uc.c-W<.O.
/l - 1/U()./\. 2.005
.g"'jt.. ...rol:; J...~ .g ..;;.'\1\...t.,D'lll.f"""' JIN>.vt.. ~
~111\.t..jO/"at:I.: -'\11. .g!1t. -jt>..t.I~"f~

"'~'11\.t.. .'\1\... ..DI~~ .-; ~ .1(}.-; ~.-; -&..
ojt\l) ~ - ""'Su..<c.O.t\Dc,.,.;:, ... Okf'ju,
t\D
. )(,..;.t..1 ,..;.oS!1t. ... ...t.IU\ 1\.11\U(t>.t>. ..DI~'III.I'.!
2. wo~, 2.005
t.r.g!1t.t<.j~ ..u ""(/~~! . .g'f'OI ~

...i<.~ -.t. ,..;.~ .g.jUI."- .g c,.,.;:,oro~ '111. o.t"f'"-.g~c,;JI .g "';),..;.~.....gw.. 11.).~ t.O~IU..
t.)(OI.-; ... <A<(J"'l.f'; ,.;. . .t..g,..;. - t.O~ot<. A\UUI
~'\.: ,..;.!<. t.0,..;.~!1t.t<. ~~ .?0411 ':'/""-4>1'~;)10 I<.DI'"-'1"-J '111. ~"j+\!11.,;<_ ~~>,,..;.OIVIWG. l!<.
.g. ~.o.t..tU..O~>IOj~ ~'<-~ ~11!.1\.-~!11:

1;J~~ ... .-;11t.VJ\~ ..'III. I'.P.'III.I'.~v.
v ~1\.0!.0 ~
$.
<A<(J"'l.f,J.
Om 6uk kn
, 1,

L- ...
3jt..t.O t..gjAi. I<Aj11t'\. /"~~t.Jl

t.>~ "\. )~~"\. .....:.~
"-...:...g~~i.'\. ~~.g c-)(UU...
, ,
L-
, r
n n L-.
----------------
YDPAII!IIIIE:
i
n
,
n . n
, n ,
n .
, ,
.

.
(
J
(
~---------------iJane
11 1
Om n k 6-mu
.
.
L-,
.
, ,
-
<html> <head> <d>.
1- 1---
,.......,
:1 J
[J
h1
h2
----
----
.,.
~g~
1-1
-f.-
n n
HTML.
h2
"'
t
l
h2
lmg
112
[
-
...!:_
- f-~
1- ..-
--
~-
Ml1t ~Jlb~ +\.t\j'~O\t'\..'ILj+U....g_

1'\...'\IUU:\ ..g W:.!...N~t.. '"""'$..gOI\'\...'WI ..g~<head>
c...I"0!\'\...11\.~/:It.
CA!</title>
<titl>
</head>
<d>
<hl>Ha
<>
</>
-- J()(LD1lo.f6o~
<h2>20 , 2005</h2>
<i.mq src="i.mages/segway2.jpg">
<>
-,
,
,
1200
"\f\,V~~~
:l.f\.L
~0"'-w-~
--,
\"
3""- .....oc...~I-U\SI
-,
3""""'11\.(... lo\o'\..11\..
,
,
-.
</>
<h2>14
2005</h2>
<>
Burrna Shave
3""- ..g""-ol" J""""'1..../

I)""-0 1"0\SI +\L C...Oj-'1'-
?1.""- 1"1.c...-J+U<..OI.
...
</>
<h2>2
2005</h2>
<i.mq src=" i.mages/ segwayl. jpg">

<>
</>
</body>
</html>
iPod,
l "'-...~~
fo\D
-:
:
.
+U....O\JLO..gO!?fo\D.L.'
+\L
.-- .)OI'S""t0111\_""-.t...JOI~"t01""-b ~11t

<ooi_J> 11\. <kfw./>.
l""-01~ "'f~OMK0\11\_~ /"0\'S"o""-_J 11\. +U:\'S".tr........t.. ""-""- I)j ..g ~~.../"'j\~0/"1... ~~"\..>.L ~11\_ ;o11\.1'\'VOI/.k:wa/
1. c...o)(l""'\'\...........t.. t.:t ..g """"~ c...k0\l"tu3 /;ol.'f\'VOI/.1> """"~ iwa~'j-1-J +U:\1Aj"\..>L w:.r""-w.1. JtjWDI-J/J trj 1. Jtjw""-JZ.trJ
~0\ ~0\..gl.""-Lc... (.,. ,;;;:.~ "'1"0~1f-J1-~ c...r0\1'\...~:-g 'S"r~._
;_;,;;,_.,,,j,,
113
TecmupoOaue mu u

~ t
I
20 r, 2005
n. npooxan 1~ ..,.". nor.~~~ta wm<Z~-r:
111., wnrBIa"IC>I, 3~ amr AJ!ituo,lity>m<y m:r

.,1,um~. Yaii,amrApso., Tpyr-op-
Ko".t&)'>K<t<, m HJO-Mt~tato
14
R.JOJUI,
2005
._ ,u: um.a S.vo IS ,110pono: "Eaas

DIIU 311t'!lfn npot:S8UOJU 8CUD011o.t. 08lt otyr t.Jm. 'lat.
ORCO Iit tcxolltn:O("D; . onptAennuro n r

uun:a w&US.t
R.IOJ1 1
R

.
2005
d!~ r nynoetaiOII , J< tOr 01:110""""
"'"'' 1 t ompum>c. nynoetao : .
ex.cn 11 CJ:Yf'tpt, ne r nm cooJi r : DIIxo ii

,.,. . ll'od. wOJIO*ROdi 6t.10'IIIL .
~~t Ku: """'"' w -nr 'yrowtetaA m tw~:ay
!
;
"''"''""'-' <0.10<01'0 r"' a:yropy"
\~'--""' j.f:otVA-~
"'jor<>W-
6u m6

HTML:
?~- -
: L- <>,
<hl>, <h2> <img>.
n
;f .
:ia , ...
~')'
,Q"atsaa: n tokn Q()'n'fC 110
"""W<!fCL\J
28 aarycra. 2085
...:. ___ ~:::\

,>
')
......1,f
.
1
: ! , 'I' u 'DI
11 811 11 m n. oc!tOJI!:}' Jl .1
, IIJI : .: :i
, iPod, Jttepy r;ni :. onr;o
. Ku !t -t: " 'lICJIY
"
..,_._._ __
--m"f_,.-.-u...,.__ n~ ......,_
-~,.
_...,.~
.. .,._to5d..-.~,_..c_...
........,..a.on.---...e..- 1'-lot
~~r:.-tJtlllli4w-nt---....,.
-....-.-c.,...__.fllf"trr
D.IUI ,;;.p,I(..'\N(..g~v... ..g IIV\L-"'f'ijj".O,;;.j"U\..~ (q>.

DP...gP.i..t.. ~-../"'\1\.... t\.P. '-AtjjiO~IO """I"P,~ ...
115
km < q>
? <q>- , .
n L-, , .
<ht:ml>
<head>
<title>Tec </ titl>

</head>
<d>
<>
, ,
,
n, <q> </q> <q> w</q>.
</>
</body >
</ht:ln.l>
u 2
mecmupo8aue
...~F~ !<" ~1-\. ..gl1t.
j~~N ..g~~ ..g ~f~L.
/JIIf4 n.
.).-"'-"'-"', -'< ~l"'.))'r <.<;~- ~.,., "'""' '~" ~ .,.,.,,~."".,~ ,.,_ ""'- '""''""'
..
. "f~.!U...)1, "f'V\. F~~~+\D..g.
"n. n. 'Or lfe i!m
"----l
j..gO~ I<..glfi.t.J<..
DJ:J:rne
, n'4811
6-
<>CIJ:1<>j<>H1.
lnternet Explorer,
w lt1'4
r r n
<q>.

,
. , ; /~:: CSS,
.
,
,
9.
...

<q>,
n n
? ?
. n1 n n
n.
, -
...- '\11.~
vo-.r
<q>, , : / _./ r-. ~- ( << ).

:::_- ~j.go1ii.\'\..11U..
, ,
. -
, n,
.
<q>, ,
? , ,
,
n.
,
,
. ,

n .
,
,
.
- .
n <q>
( n ,

CSS
)- ,
, . ,
,
.
<q>, .
~..g!<&.'\11. .gr 1-\.t..

7
.~
j U\O!t..ot..
_
~
<PDI"'::''\11.~~'\11.
~~!.,...,'\11..
u.umam
. -
<q>. ,
ournal. html . .
<html>
<head>
<title>Ha
</head>
CA</title>
<d>
<hl>Ha
CA</hl>
<>
</>
<h2>20
2005</h2>
<imq src="i.maqes/segway2. jpq">

<>
1200
-,
--,
,
,
-,
,
,
-.
</>
<h2>14
2005</h2>
<>
Burma Shave
..
</>
<h2>2 , 2005</h2>
<imq src="i.maqes/segwayl. jpq">
<>
</>
</body>
</html>
r;;
118
iPod,
-:
:
.
Webville
, - ,
, .
, ,
':lUU~ff

, .
.
. - . -
<q>- ,
- <lockquote>-
.
,
,
n
. (
) ,
.
n
,
: L
. , , ,
n ,
( , ,
?) ,
.
10
,

.
t lJ? :f111!~ t Jm
911W
119
-: .'-f~ r _.
u-u-u-u umam
, ,
t')'
, .
....... -
.....,... ... - :""-'-.. "7"?" ""
~,., QUA.I
Burma Shave.
14
HJOJUI,
2005
a~~;~~an nopor:y 3JIU:OJ - Bun. Shtvt llt ,11r: 'Eona

a11s ,~ npoez.-OJOtS~ lll:lfO or.nr.. - '\10f"!''' f:
Oro r - rn ' nn Jte '
? , :
-'llljL h.tllfOI(..:JjM\(..().g.g t..'\J\.L 1>11\:I"~D\

J\tu:\vt.. o~ow-u..Jol"ou.:
t-'I..gl1t ti.L.jDI~"""""t.. "'1"0-t.jDIIO~'\.t..

.'I.. ~'lIi
. ~'I. ~ ~""""" .g"'"

ojt\..0 ~'\.t..-
1- ~a..oti.L.t\.Ot..b ...
...-.
_ ....
<lockquote>.
<q>,
n ,
.,
<ockquote>
<lockquote>
n n
.....
--~----..-.~t-.e
........... ..- ...~~ --....
----..,." ,.
o"'fijt..l\.tA-\.t\.0 t~..t.. )(.t.1 .o~lft. ~ ..t.-tU~

~U(DIDI JJ\~'\.~
_ _ .,._..... ..,. _ _ _...._
.., ....., ...,_.u . , _ _ .-.,. ...,_
,.,.
......,..._" . __..._ _ ..,.
< lockquote >
<lockquote> - .
j ourna l .html 14 .
, :
<h2>14
.~11t. .gv,DI.g'l.o ~
<lo/o~V\.OWt V\'\.0\DIDI ~?1'"-1'\.0
2005</h2>
<>
"2,0\\\'\..'l. DI~JDI'J
30\.t..- t !>~Dit.-jL.g'\1\,J
'\1\,1\\ J~vt.. .g~,f ~DI

~ <lo/o~V\.O+u.
</>
<lockquote>
Burma Shave
</>
~.. ~~.'.!!Ji.Jj)~;.,~
1~~:"' eleJOWIII*<1i:Oolf.NI/:On o&Jo.._, ~ ~.

1
~~~---- . ; .-....."-:r-~1"
no
.----"' -- ~0~
"""n,.'I
14
2005
l(}' m Shave :
.
:oryr 11> . - 11> ...
, aexaJia !
2005
121
0: . ,
]j: , ,
- ,
<q> ,
<q> <ockquote>.
, <iockquote>-
- , ,
, .
-, - .
<q> <>,
<ockquote> <q>
-?
. , . <ockquote>,
]j: , <iockquote>

<q> -
<q>?
]j:
?
]j: ,
CSS. ,
,
0: <ockquote> -
<q>
CSS.
<em>
,
Ente .
0: . n
, ?
0: , ,
<ockquote>,
n ,
<em> -
.
, -
. ,
n,
, -
<ockquote>.
)? ,
-.
, <ockquote>
]j: ,
0: . ]j:
.
, ,
? ,
, -
<ockquote>?
122
<q>
<em>
CSS.
1J 1J
w?
,
<q>
<lockquote>
,
.

<q>
,
<lockquote>
.
:
<<
>>.

, <lockquote>
<q>
( ).
femeue
:r:m.uMul:tnH<>u
36u mu
< q> u < lockquote >
, n : <lockquo te>
. <lockquote>- t , <q>
<q>-
- ,
. ? ,
, ,
, .
~u: omo6pa>kaemc mg k
mu: omopa>kaemc 6ympu 3
<>1 <~>1 ..'1 <\>1 </"> '11\. </o~11\.0-Jv - . ~.u...

~l1t.
Retm
<
\
h2
Rei!Jm
11\..,, ~.v-.t..,, ~
.~l"~~...;;::.(.,.S\ o.jUtbN>I
<.,JtO.g\'\.0 ""''t;J ~ '\1\. .>vJ\.1...
~ """' "'"" r~ '-"'r"""-
3~'~'1
""'j""" ~.......
Return
V>r~
~~..r
~ D.u...~111.
Rei!Jm
ockquote
/::::- .~/"~~. (.,.got..

<.,Ojt.r'Ii\..ot.. O"'jUtbt\..l1t.. ~AOIGO....
.g~oj~(.,.S\ ~ (.,N).g\'\.O... ~~t..
~~j()..'J~
Rei!Jm
num: ~l :m.l om~raaJOmcff

m, J11f I-mfU oCfloHofo mecma
mru.
124
::;3 ::
m<>
D: , , ; -
Enter n. ?
;>
0: . - ,
n
, Ente. ,
L- , . n , ,
n , n .
, , ,
,

,
()
?

-?
,
L-. ,
.
.
- ,

, (
),
.
,
L-
CSS.
,
,
L
.
11 : r'l Jio'li ! paccyJAam

JI.
n n
, . ,
.
?
.
,
,
.
.
-
. ,
.
. ,
,
?
, -
, ,
, <>
, .
,
.
u
, <>
.
.
<> ,
<em>, <q>
126

, <>, ,
<img>
.
, , <i.mg>
, ,
.
,
.
. -: <lockquote>
, <q>.
.
<q>?

.
<lockquote>,
<q>?
, ,
-
, ? ,
.
.
, . , ,

? ,
. !
. 1 :l rJ.:>P.fl . : ''
Burma Shave. . ,
, n
,
n
...
... n,

n,
, .

?
, n w n n,
1 JI n
,
r ?
?

n ,
.
, <r>,
. :
<h2>14
2005</h2>
<>

Shave
Burma
. ~
</>
fC:
<lockquote>
<r>
, <r>
. <r>
D~~~~~.t..~
~bf> ~ ~:J~ ~fo\(;~11jt..
)(.'I..L o"aor~OI.b .>.I(;
,~\ '\. ~~~~~~~
<r>
... <r>
IQ0\'2..1<>
'
</lockquote>
<>
n
</>
128
V'
~1"01(;'\..
<r> .
n ,
.
t<a ckyrepe na
r~i"
:/ f /~haptor3flotJrnlfjoarnol.html 0.----...."

r
!
DoW. l>l"-j t'\1:11...g1111.11..-
20 r, 2005
jt...W.b 1.3~ l~...fb

w. ~O\t...W.c.-.s! ~
W.O\"'fl>."-jt'\1:11. 41.-
\._____
w-01 w.c.-.s~ (.,'t\ t'\1:11. Dil\:r""'"'
\
JIN>.vt)
14
2005
'(}' r
Burma Shave :
. .
.. .
, !
2005
ep1t.'Ai: At~A
NOero ynweCD 1 ltp. '11'0 tc&XOHt r cn::nooecn.
t UD nyrtwecne . ocxOJD.a;y n: 11:

t~.an t , r s:s.. cooii l' : .: d1
Vt. iPod. J r;ucopy,. :.,....n r~
ToaJ:o
cwoe ~D Ku CU38D >-s nyrew:ecnt ertcJNy

r> ."'" 1DV'6 1: aynpy.
129
ap e.<IIO!J. (il)( :
+ +
+ .
<br>
?
,
, r :r.
<r> - , . ?
, . ,
,
, <r>
. , ,
<r></br>,
?
<r>- ; ,
:... ,
<imq>.
, - ,
.
( ,
L- . .). , ,

HTML, ,
Cojt.rV\....O'-~ )(~ .gu. -.z.. .
. ."f~0110 ~'1.i. .t..1...
~01 - .g"""'OI.g~ r"''r~

"""'ro"'"'.. ~t.r1..U> 1(.0\"' ""-01"--.gO'LO
.g~~- ~
'1.0
.;-~.>
~
<r>
n
,
\. U..'\. nL\.\. .D\"1 .
...
().
130
<r>
. +'..iJ\ U\.....jUI.t.. ~~'-""'

O~Oj+'.JJIOI.b . '- U\..Ot...
aQllo
Bonroc1
}j: , }j: - n
<br> -
? ,
<img>
, ?
0: . , 0: , . ,
,- ,
( <>,
<h1> . .).
<img>,
.
, <>.
}j: <br> ?
}j: -
n? n, ,
,
0: ,
,
+
+ .
n n < hef="mypage.html">?
0: . :
, <>,
}j: n. ,
<br> n?
, <>
<img>.
<h1 > <>,
. n,
< hef="mypage.html">,
0: , ,
<h1>
( <>,
<>). -
- , :
<hl>He
-.
'J.'
</hl>
<br>,
.
, , .
,
.
,
, , .
):m1, u Ue:toue JL
fU, aiBa:tom.Cff n~c:mxu. fcu
J UGilooBa,m n~QJ10U m,
mruerl
<hr> UU <img>, JilO IJfOOJ10
~1ilm omf1Ba:touu m.
)mo r; rm for~ Ui:t

u011 lJlML-m.
d
131
.m.
k caiimy u
r:
,
- , , ,
( ,
, ).
. ,
, .
HTML .
? ? , .
N~f"IO"~~
,.._ ",,,..,,Jf:crunW'~I!L
<.- .t_.c..W. t-.v'\1\..)I(. 1> t.--ot..'I.

ji;:; 301 I~.. t\-111...
~jOiil "'-'t..U\. 1.Cr'?_jf5(
.g IGO.OJ"fX Ot\- 1-\..0~&1:0\.ll.
, n
O:
1200 n
: -. ur , l.JW<-,
, , , . ,
, mra , --, r -
, ,
14
.rut,
ZOIS
, ?
_......,_ , _..._'n_~..,_
-- - ~
.....
, :
2 ....... 180.5-
""-
I'-..---, ~te.o""
_...,
.,_.,.._-.-6t ..
l..;;;.OI"r .!\ ~t.. "'fOU(Oiil /)2.00 ..'I. '111.. 1-\..0~~0\ .g IU..I)

..;;;,Ofi1!X ~t.r'~ ~01>(.
/1. 0101-011 ~01..-::. bOI~~ot\-.
301..t.....;;;.L ..;;;. ..;;;.
2.. J'I.k.-111....""r ~ 01..;;;, A~OI>(O.
..u.. "'f.. c..v~"r

01 :!,"'-r1~111...1 'I.'\1\...
3.DOI.j+-U~f ~I. .I. ~.il:l.tf'O Olt\.t\t'I., t-.v'\1\..)I(.,

<f. 1\.:; "'+U,;t ~01 ..;;;. koor~o.
s. 011.1 ~"'..;;;. r111...3.
Ot\-'111... "'-~i .111...
~0\.g~~..
"'--r.s\JI(..L
. lr~.-or-ko~I-\Lt.Lf ~"'..-::. -t...IL.
132
u;aea J
n.,..__.,.,._..__ ...,..___ _
____ ____ ..
..
-~.....-.,___.-., ~
--~---
,
......
-~---
,_.,_..."~...".---,
-
.~
~--- ....__ .. n...cwo,..__ ....,
, ucnoAb3o6am m
g 3gu cnucka
< >
, <>.
:
<>
1.
</>
<>
2 .
</>
~0\ ~1)( ,.,.w~
.f~ 'J~~Oij.
t.\L.<iOI.
m *m npuu mak geAam

.
L-,
.
,

n
. <>
, .
, (
n )
,
~........._ ~v~
W''IPM
n n
<>? ( ).
HTML n
. ,
, ,
<>
, .
, ,
n .
D.

n ,
.
.
;:>
'f! 'V :N
Pa3pa6omka HTML-cnucko6 8 g6a mana

HTML ,
n . n
nynxma . : nq,' (.()

-) nq,n' (nn').
n , n .
War
nep~tl
n L-
<li>.
n, n
L-
<li>.
<li>,
</ li>. L,
. ,
<h2>20
2005</h2>
<illlg arc="iJaages/seqway2 . jpg" />

<>
12 00
~ ~ bo-.r..g1)(/ ..gOjbM."Iii...;:;.L~t11. .....~ "'-J Ol~jOII~i~ 1(.01~j!1!.1.. "- O";;:;jt..llb~w;;,"\1\. ....'\1\.)\(.jOMIC..U'-' ~~ o,;;:.o~J"Mrc.t...t\..
</ >
O~O)~J\.UUW.
<li>- , </ > ~ 3.;;:.t..... O'lf~~ "-"'~jt1t...
<1i>-, </1i>
<li> , </li>
<1i> ,
< 1 ~>
,
</1i>
<
/1"~>
<1i>-- ,
3
~ C......."\I\..CAc.O\ 1"\.0\~f..
~..g </1> 111.. <//1>.
~ v.
,.
2005</h2>
napoi<y
</>
134
Burma Shave
..1itU(..-
""v
"'-.. .....~.
<>
~ < t> ...\~
!j-i<</li>
<h2>14
3 .11.1....U\.
.,;._'
,__ ~~;!1!.111..
v
War
n 8 <ol>, 8
<ul>.
<ol>,
<ul>, :
. ,

<ol>.
0--.s~.b-W'.D\1(.11\. t.~. "'1"1.~j1.. .OAbiL.O OW'.jt..bi'\t'\.
<l'r'~ 1-ftV\L.-~L.C>jDijA..SI j-~1-\..~ lol-\..11\..

<h2>20
2005</h2>
<img src="images/segway2.jpg" />

<>
<li>Baa , </li>~
<li>-,
</l i>
<li>, </li>
<li> ,
<li>Ya,
</li>
<h2>14
bc-t.~I1t. <..1..UU:J\ .....0~0\.<-.s\
~~.r ~01 <[> 1. """'"'~.s~.<-

t.:U> <-Ojt.r~
</li>
<li>-- ,
</ol>
-</ li>
~ 3jt.> !.jDI~t.0\t...~ <[>.

,
2005</h2>
<>
Burma Shave
</>
ul
<ol> -
: <li>?
=/

=li
135
cmr c<"'
Tecmupo6aue cnucko6 npuepe n 2opogo6

, L-,
n,
journal . h t ml .
- :
O.g11t1i\.{ .jVO.g._"~~.gO.gQIIV\t1i\.
.;\>~t-1..0J"~o:g.
1200
'f<IIC.
1 :
4 J
5 )
6 1
14
1.
2.
3.
4.
5.
1'
-. ~ :::-.
~ Ojt~.~t-D J"ll\jJ"~ c.:.J"o~t-11\. ~ W.Q\~t-t...

.....Ovt... l.t-Q\jO'tO ~~Q\ ""'-~ j..u>.llic ,
~ (/;> W.ot- ~AOI-\t.1i\. ~~
C't'OJ>OKY
tt)"!"t i(J r CJtYttJ>e,

SII - _ Jl. ,
iPod. q IOUIIepy , .
S c""'an -.r 'yrtmeC'ia
n - r txyr"eJ)y,
,
n
-.
n

'

n?
: ,
iPod,
. 14 .
.
L- . ,
(, n

<ul>).
, ,
.
journal. html
<h2>2
2005</h2>
<img src=" segwayl. jpg">

<>
iPod

<q>
</q>
</>
- :
Bo:GfoCt
}j: <ol> <li> ltY*IfO n ?
0: , n
<ul> <li>) .
<ol>
}j: , n
<li> (
. , n- n :
<li>
n n n n,
<ol> -
n nn.
<ol> <ul>?
<ol>
r r, , ,
0: n
n n . -
n . n.
n, , w
<ul> n n
}j: , HTML n n .
- n n?
<li>.
}j: n?
?
0: : n. ~<"
:
~?jt'\, ~
~ v... ""-1- ~
0: . n. ,

HTML.
n , w
}j: n pyntt
0: ,
, n , I
CSS -.
}j: , n n n?
?
0: , . n
<ol>
<ul>
- <li>, n
<d.l>
<dt>
""'t.r'-"-11\.... -
<olt>
11\. 0"-11\..Ui\1'\..'\IU.. -
<~~).
Burma Shave</dt>
<dd> , n
1 920- 1 930-
.</dd>
<dt>occe 66</dt>
<dd>Caoe ~
</d.l>
.</dd>
~~\V.~'\,.;;;..._ ~
n ( n).
1. ~~u...1f~,,~...
~ ~r'\j)LfL
<ol>
<li>n
<li>
}j: Burma Shave?
c~yep</li>
<ul>
<li> </li>
<li>iPod</li>
<li> </li>
<li>~ </li>
</ul>
</li>
<li>
</ol>
</li>
.~>.
"'- >jLf-~ ~
.UU\t'\, """'\1\,)$...
0: n, n n
n , n.
, n ,
).
n , n )'I:
. ,
7000
, n
, .
138
1925 , II
( ~
tinont
68u g2 m gpy2oii
Jm 8m

, . ,
<>
<body>.
,
r.
<body>
<html>, <>- <d>,
<q> -
<> . .
<head> <html.>,
<head>.
<ti tle> -
L-.

HTML,
. ,
, ,
.
-~
139
, fifi'~:.J ;.!: '!(~
m nm mwu 6mu,
U3o6pa3uM m 2pauecku
<html>
<head>
<title>Pawe</title>
-r
</head>
<d>
<>
- , . . , :
<q>
n
,
.</q>
</>
</d>
</html>
ft...O~rw-- .
~ "~-'t~t.JI.jti.
0\
~ o.j]~ ~I)~
JI.jM '\Ju.\.'lt\.. ~.j]~
--'j~. ~~,_
~"jl"~~ 0~
<\.t. ,. J> C.Ojt.r.""""' j~OI
~~ .g :>.
..g.~ ~\:
<\t.Oiol> '11\. <l_,>. bt1t. .4\.D~t.

I'U$~0\.b '\1\ j.......,::..'\1\.>>
~DI <l;l..f...,f>.
"\
~_L_-=:;-~
't.> ..g.U\...g t.-
~ <\t.Oiol>.
140
r~.ga
no8aJ
Ucno3yiime >km, m gum
6 coom6emcm6uu
me~o6
,
,- ,
( ).

? :
n n <m> < /m> </>
<>
RR1
j\6I
JlPgr
RJlPgfA
bov;;; .;;;;t\l(..g~JI...;;;; tviL.~~ ~.t..~ <J...>-.--.
.g~<l">.
"---71
,
n :
<> n <m> < /> </ m>
t"'k.: v;;;.u. <> 30\\(.t\t~..V\..gt\.....v;;;c..

, , <em> n
<>.
~'\:~t.L~
-~.g~ <r>.
<t,....".>
~~ W......'U>.. <...........>. f/""'6!>At\1..0\.t,..v;;;v.5\(

.;;;; ~
<........,..>
Et\v.>o.t..t~..
..g~,;;;;I"'I,.~OI <r>.
\ rf\0)(0 ; ~t.., ~
}\
..g~ 301 'tj<>OH'-~
<........... >
~t\ </">. .;;;; Dj+\J)\0\......;;:;1 .;;;; "1 .> c..,jv;;;V\.f ~-U..
.gAO.t..tl...g
+U.;l..O.
k Ju?
, . L,
, .
, ,
.
,
HTML.
orae;omaume e;ra~~ero
u 61>1 ~ JL-faJJ,
' Komo_roM H{'1Cotnof1t'
IPt'fu
{'
'. DaWa
BillOUJ:Jl rasom sraera u aiO:nu
ouSu. ( m ~u,
11f<>'t>fme u ouSu
'1 mu (ome:m
<htzl>
<head>
CotnfUIIle ]R
r1>1).
<title>To-100</title>
<d>
<hl>To-100
<h2>Dark Side of the Moon</h2>

<h>P ink Floyd</h>
<>
<q> .
</p></q>
<ul>
<li>Speak to 1 Breathe</li>
<li>On The Run</li>
<li>Tirne</li>
<li>The Great Gig in The Sky</li>
<li>Money</li>
<li>Us And Them</ e>
<li>Any Colour You Like</li>
<li>Brain Darnage</li>
<li>Eclipse</li>
</ul>
</>
<h2>XandY</h>
<h3>Coldplay</h2>
<ol >
<li>Square One
<li>What If?
<li>Whi te Shadows
<li>Fix You
<li>Talk
<li>XandY
<li >Speed of Sound
<li>A Message
<li>Low
<li>Hardest Part
<li>Swallowed In The Sea
<li>Twisted Logic
</ul>
</body>
</head>
142
<1
6.~
L-
? . ,
,
. ,
. .
, ,
.
:
L- ,
, !
,
.
, .
.

.
mu
uu 6ii?
Sl n
L-,
, .
n
<html>. n
? ,
n n
?
n,
n n n6n.

< > t ,
L
. HTML
,
CC't.il:O.U 'l U.80't.
, . ,
t
- ,
(, ),

HTML. , > > ,

&1 t; .
<-
<html>
>>
. ,
:
<html>
, , - &.
, L ,
&a mp;
&.
, ?
, ?
:
http://www.wschools .com/tags/ref_entities.asp.
:
http://www.unicode . org/charts/.
144
:;
Bo:J1foCI
lj: , ,

.
lj: , &-
0: .
&,
www.
unicode.og
&
]j: n
. n
www.w3cschools.com,
n,
n, n
, n
, , n >
n >?
&.
. ,

0: , ! ,
&-
. n ?
0:
, .
, ,
n &#100 (
).
n .
, n
- R,
& ,
n,
. -
www.wschools.com,
, ,
D Mff Btuceuff
MeCJilofamooeuff
n n
- ,
. n L-, ,
, . n
HTML,
n .
:
n. R nn
n n noroae
Ðετrö&iqrave;τ.
'l' .
!i: http:/ /www.w3schools.com/ta~/ref_entities.asp

/II n L n, .
145
mU
U9 Jn
<em>
I'-"~>-<)
~,~~11t.
O~Oji-U'I~b ~~/
"....~~L ~ jA.II
\(.()~r111.1. )(~~
<pre> o<!'Dr.IA~""f~"'+VWlC ~"'1

ILD!J"' )(()~ ~osl11. Sr~
oLO~o ~~u.v...;;..
<address>
o~osr"'V'1. t.;U> '\I\.JI.\.UU'.( DI"r """"'
~ ~~ ~ 1.0~0rv.,.;;.
~111. t.;U> 1-U'\~OIDIA'\.
s,.,IA~~ ~ t.;U>
VOjLf'"'1..Ot- - 9~0 IAjF-"1
~~~~~
t\PI"f~~DI~ I(.()~DI~.-..A.II
j~ l(.()f'0~"-'\11.)( "Jv.,.;;.IA~/ I-U'I"f~
~r-~A"J'W\.
;])~ V\.1\.'I. t\.t.. s~ 'I.'I.
<1j.._ Strt. ~trt. 1'1-'I. Strt.A1 oe;;.IA~DI1i'w

-..'\IU.. LOSo"'.>.
..-.~
'""'""""
A.W.J: ~'\.I'\..~
I<JJI~
~~~o-F~Ot
~1-\. ""'LU'\ j~Oit\.11\.li\.""" LUo
~ ~~
~'<"~
11r;;. jtAi.~ ~ $.1'~

....0"'1AA~~D\.
<Ul>
"~+\D ...:;~,..'\}~ ..-. , ~.. (
v~..,..,~
.) . -
<'111./>.
~+VI.
~<-'I.-Di.~~
<ol> "....Of.!ljOUU\I."'. ..-.'I.)~
~,,~~ </>.
jA.II ~~01~1-\.
wr'I.JO~O\b~Y1D(
~ """-'-.'I./ I-U'I"f'\1\..t.jo
..(.hr>
j.!I ~~
~i. ~UA<.D"'.
t-....~<-.11 jA.!I U\ j~
~jl.DI. u.- DIIU)/ ~111.

)(()~ ...~v.,.;;.
~~Lf'~'I.j~'Uil...
146
"-"'"-j~
.
n n
no -
. , L-
n

. ,
n
n ?
,
n -.
, n n
<br> -
HTML
n -
n <ol>
n , -
n.
<ol >, <ul>
n-
n , n
. n, n ,
<>, <lockquote>,
<li>;
- <ul> <li>.
< l i> -
n -
n n.
n s tart . n
, n
, n
: n
, ,
n,
, -
n :~ .
n L-.
n .
n n -
, n
v alue.
<q>,
<> <>
. -
n, n-
, .
<ol> <ul>
<li>.
n <r>,
HTML.
'/;?::..U U
n n L- - ,
n
"
ynpaenft
<q>.
<>
n!
('r'\111.jo'So...g'\.A'I.
.~tf~""~1.'1
.t-1.. ('\)
--..Lf'j
iPod,
I'U'\40\.. ~1.
-:
.\ ""11\. 1. j""ltfl1\."
~ <q>
.g0\~1.1_ (/q>
cy'l'epy</q>
"f'\)j ~-t- ~
</>
3....;;..~
".:. ...111.
i)ro..'I.
j.go~
\U1\.gi1\.I(..'\..
nepadiAcD MOetO aya,ucC'I8)U! 1t0 8810, '0'0 )fU:08t O'IROIID

IC't AU: r ompuoc nyrtJ:UCDJ:St. J:D rt:
CIOD & q<, !Ct 1COI" 8:J 6 tiOI'O 'ee!ti: 'fODblCO COt'CIDJi
tuteoll. iP04.QJipoy u~onU~~>J!i lltO'D!Jt. onro
_0
)(0 \1!>0( )~0'1-1"0\~1'\."\..,111. ~ "'V>:j\'\.01 ~

f
~0 V
V
Z
'-
::;-f>v.N...g~.._ 1. "t11r . .D\I(..A:J~
.._
<U>._. . ......... -U."<"n<m<"'"'''

JJ zt&IOt&ntJI: o.-oro WU"' ':r.
~ ---------------
n : ,
14 .
n .
ynpaenft
jou r nal. h tml . ,
<h2>2
iPod,
. n
2005</h2>
<i.mq src="segwayl. jpg">

<>
:
~
1.1.
0\0.,_0\VI.,.
v v
1./
<li> </li>
<li>iPod </li>
<li> </li>
_____". ~'I..t..IU'\j111.'1-
<li> </li>
<>
t\.11\.1. ...__'\..)I(._
-:
</>
30\I(.ON/'I..t..
.~::;:-------~~ .D\1"\(..'!fO.gDII'\.-
</ul>
<Jf! aa
~--------------~----- HOII'\.~t.. .Dif"-'!f~OI+U\t."I. ...__'\..)I(._
<ul>
148
C.I'U'\O\AO\ .._0\\I'\.~.._ "f'6~~
</>
<q>
~ ...-.'\.t...\
.g
~ (/i>.
~]}
AJiff
1.uceuff
MecmofaOlooeuff
"t ...~~t.. t\..0\i..'\. c..t..11t.I(.'\. t\..0\ ~..

.:~.. ..'\1\...it~ ""'f"'io~ 1..:~..
"'foc..v;:;o t\..0\~FDI"'-b W(. 1> ~... c..jOit..
odt... ~.jjt... ~(1t1..1t.9.j~ .\1(.: 1)~fo;t!
<h2>Dark Side of t he Moon</h2>
<h>Pink Floyd</h>
<>

</
F' j~ ""Q"'-1.
~ "-..t.. .~ ( /q>.
<q>
!l" .
</p></q>
<ul>
<li>Speak to 1 Breathe</li>
3DI"f~01~'\.i.
<li>On The Run</li>
.U. </t....>
<li>Time</li>
c..v;:;o~ i~o
<li>The Great Gig in The Sky</li>,01"f~OIIO~~
<li>Money</li>
_
/ 11
//
<J
<li>Us And Them</~
~ .t-1.01 < i>.
<li>Any Colour You Like</li>
<li>Brain Damage</li>
3 u, 01 ~0\~'\.,_
<li>Eclipsft</li~ ~
</ul>
</>
<h2>XandY</h3>
'J "1"
~ <J
.~ ..J n~~
.u....</>>(j I.OfO'U>
- - - 'J>)'DIDq>OitiiX 11&0810
noroae 'l208 ;~pailon;,tau;,lll4;,oul;
~~ "'-"1"~0\~
,t.;t01
'igra"_;,tau;.
<F>.
llploto'N .
<h3>Coldplay</h2~
<ol>
"1
<li>Square one
<li>What If?
<li>White Shadows
<li>Fix
<li>Talk You
e>-
..g
""' 0... ,)~- t
~~vu.. ~t..'.\. < 11 .

t
:'\
...,
V::..>
"-'-ft...".;J~~V\. ?.t\&u.11tv
/~
111. ( 11. '2>.
/V\11t. t\..0\\'\. t..,;\1\,>I(. ."f'~I~'\1\... ~.. </>( t\.0 "-,.,;;:;ii1..'\.
<li>XandY
t....J ~ (...()Odt...t...~'\1\.t.. ,)I"f'~\~'\.'\. .t-1.- <j1.}>.
<li>Speed of Sound
<li>A Message
,. "'
. '\.t..~ <//i>.
<li>Low
~ .V""'':~. -........ \)"'"'ILAOI100
~
(V\/:1t. "'1"0"'-;)(...
.
<li>Hardest Part
<li>Swallowed In The Sea
<li>Twisted Logic
4E~--- .. ,)OI"f'~Oi~'\.'\. .u 1'\.t.. )dt...t...~;t... "'-"1"~0\~t....;)
~ </>/ ..\.>'W t\..0\'\.t\..0\t......$\ ..,.L-01(..
</ul>
</body>
N>
</ktw./>.
</head>
01
~ D. t\..0\~"'fo""';)~i. .t..1.-</l;u..l>i ~3"'"1"~0\~~ .t..w.
'''-'"' ~.; '
149
-------- vnoa eu ii
n1
n L- n
?. ,
nn , . n ,
n. n n n
. , ,
.
:
L- ,
, !
n .
mu
uAu 6u?
h1
"ii
f O"""'Di~.A.UWI.
..g w.~1..l(} ~
(bf> tU.. ..~...s>.
~1. "'~.~
~ "' ../"t\J..~\..
r .
em
mii
Ot~..c..o~~ /"P..)/"11ff,
mii
""':P~r"'DIL".s>.'
ul
"ii
, n.
br
ol
"ii
150
.!
"'1"oc../"DI~-go..
Ml1t ..,.0\(..0\ ....Oji"O~t\..0

~ ..t\L.
n .
0"""'0\.bt\t.t...
~.t\U... ~lrt,
'
, c..-o~~t\J1t..
1. .._,..t- t\L.W.
"ii
t\.t..
~ ""''~ ..jt.r?1..t..
li
img
\(..0\1(.. {S,_
t\..0
----
,/"()4(..1
mi'
mii
lockquote
"ii
w-oi"11\.J1.1./
~
(i""j>
J'-:~.C..W.-1.W.LII.bt\..O
"""'f"\'\1.1... C,._:Vi..OIC..
""f"O"""'O .)DI....O..t~..'l.t.
W.{ 0\ ....Oj/"O~t\..0
"-jDI!V'\.O...j .g~OC...j
.1 ---r~.s\
.g 1..'\.DI.gt. S .
4 uu
Wvk
.
Webville!
8~6-w 11
mozo,
pocnonozomcll
. -
, .
,
. - .
- , ,
n .
h, t, t,
:, /, /,
w, w, w. , , - Webville.
:
.
Webville,
,,
r. ,/;( : 1
Starbuzz ,
3u caiima Starbuzz
(uu Bawe2o 6m2 caiima)
8 Cemu
, Starbuzz ,
, . ,
,
( r )
- .

.
, ,

, .
. , .
.
w6
www.staruzzcoffee.com).
..
AJIII
16 11
611 r n.
AJIII
r (n,
n JI n awero
n .. w r
n ( n n .. ) .
.. , .., nnn11 ,
r w .. , n ...
n ,
n nJ
', ,
- ,
n. , .

HTML.
f4J<'}i1fjlj
.----~ ":mr
~e6-m!JJ>
Jlo
Bt;ofJJ
~ u"u nuu
ouck xocmu2o8ou konauu

,
, ::. >>
( ,
. r ,
HTML CSS),
, n
? , ,
Head First Hip Web Hosting, Inc., , ,
n.
n ,
:
,
\ :
n n n
~ .
n n n
n n
: n
. ,
, n,
~r. n
- ,
n n
-:?
~~~~~~~~~~
:.
.
:
, n n
?
l{e
:s. ,
v
):Uire
oyelilie
:
:
:
:
n ?
1'
t
!
,
n-n
8
"'r rr
no .-..
--~
.. - "'....,......_. ...--..- . . . - --,......-
----...
--~~-
99% .
n, n
........'f""'..
, n
: n
n -
n.

n
HTML
'

n

'
(-,
_.
~-"_,. . . . . .,.-
).
....
~-m~
puBem, vu .
nL' ...,
. goog le. ,
yahoo .
com, amazon . com, disney -com , , ,
n.
, ? ,
. :
www . starbuzzcoffee . com

~
>)j0~~
~~0\;;.
/~ (<oi(.()+'--40\+'--"W'
.../'l: 0\ ""-0\$,~ ~
{,~t
, W..~{,~""- foo.,y:w
IJI.L.,I\L'\,; .t-0"""( ."f j~V/ -. z-! .C..O.jf '\, ""-j f'\1\...
f\
I""" 'I...t...~- .. .... ...0.0\~
3.;>;01
"""$"
0"'-f~~
t.C..f
l(.()""-ori1U-- ~.
'--\r-
.JJ
01 "'jO..t.N...
~ \,}. . . c,...SO.jM r0\3'\,..\'\l1\ J .. .... . ~ .~... ... vv- ~"~j)\$\ {,.,...

_..
0\'t,'\1\.."'-"'~1
<
--.D"'XO"'.sl--u
v
~c,..t..?r<.~~b \.. f V
_... t..,.~"-'\1\..L- ~"\1\..C)O.JI,.U...
v v
"'f"
v
,.. . . . "'-"";._...---jO~ o""-jOI'\1\..."""t,.. - 1 v
~..-
...
,
.
, .
,
(
).
-, .
(
ICAAN). ,

. ( , ),

.
Kak
num g u
.
.
, ,

.
, , ,
.
154
D:
awv.staruzzcoffee.com-a&
, ,
8W, ?
e . -
0: .
, , 100maistreet.com.
. ,
www.starbuzzcoffee.com,
'"' , starbuzzcoffee.
::::m .
, , n:
home.100mainstreelcom, toolshed.100mainstreet
( n
outhouse.100maistreet.oom.
w , nn
, wv.staruzzcoffee.com - r
n ).
;! ,
staruzzcoffee.com.
D:
::::>rporate.staruzzcoffee.com
employee.
;-.aruzzcoffee.com. , n
lj: -1'8101 noneoro ,
:.:: .
? t n
, .
D: n
? r
n u, ' r n
.Q Staru:z,
. www.staruzzcoffee.
0: .
0: ,
n,
n , .
, -
( )
( n
: -
).
? , n www
.
0: n
:: staruzzcoffee.com - ,
f
V
www.dirtcheaphosting.com.
, , - n
, n
. ~"'ft>.~~ >.rt.. ~t>...jt..'~~~t\..0 (J~t'o.O ~/.1!k..:~. .. k.ro.t..
.!t/ CjLt\.b . ~t>... "'f'\1\jt...c.-.SI UJ~.OC...OJ\.t..bt\0. I\! ~~ >tU..t\.0 ~~

~11t..1. F~I --.. IW.~jo..~ 1.j ~t>.c-1 t\.0 ~o"foc.-o.g ~ID ~! -~.. ...t\.Dt.O.
o~~Ume :m m
n n n .
,
Head First n n
n. , n
( , n !).
mu28 knu: - - - - - - - - - - -
g u: - - - - - - - - - -
155
-~ #S
D~-IP9f
3u
! r ,
,
- ( ,
, ).
? , . ,

: .
, - ,
, .

-. Starbuzz
. ,
:
mlssion.html
3..;;. 1..J\ ~t (,;;_.;;.~. tvl11t. ~~. ~...t.+\..

~
sf-01'!{,11\.Hc.oftu..c_o.,.. (..111. ..g~rMi. L't.O J~ .g"O\'-t 01 ..gt.)fL
~~J N1t~~~L ~0~..;;. ~..t_.:; +\.UO c-~oL
c-o~~~.uuwLjO..t.k\..tU>L 1...).
156
. ~ ...."" ,,
www.starbuzzcoffee.com
lj: , -
n"?
Bonroc
0: nn
0: .
n n
n ,

n n ,
n.
, . n
]j: 'l n,
- nn
n ,
, n ,
n (
, n .
n).
lj: , r n ]j: , n
images?
0: , n
n mydomain_
n.
com. n?
n,
nn n . ,
0: . n
n nan.a
images,
n ?
r nn .
, n
, n
u u8 k nanky
Starbuzz : n
, ,
, - .
-? ,
,
F, npomQ'OA - ..
r, F.
, .
Em=J
... ...
....
fd
lndex.html
misslon.html
www .starbuzzcoffee.com
'\.11t /"~.II.D\'U)\IOW.v.S\
\"\.01 -~ IGO..V.....IOW.t.rt...
iij ,
..
~-mr
CmoAko uuu
HTML
FTP, ckoAko o>kem noecmumc gBe mu
CSS, FfP
. ,
, ( ,
) . ,

HTML CSS
( ) .
, Ff-. - ,
n , , Dreamweaver
GoLive.
, n .
, F.
DA.51 ~,k.J\IO~ .g\. >~O~.SIW.c-. 1I\.JI.UI

F.
.>.j~W.t..JL.SI "\. ._..r., ~c-w.01+\..().g~
.gOII..t.."lil..
)(Oc-w.~o1i\..I(.O...-.A+\.W...1i\...
-
..~I
~
""' >
<<....\""'""''
~"\. <<I(AW.OI.OV> .gjOI"I.

..OjOI~t.-.111.
staruzz
-:.w..~......g :p\P-
k.J\~ 0-g 'I.(.().bj,jiOW.

-.~ <<I(AW.OI.OV> .
cd,
..
cd starbuzz
. ,
put.
158
, ~
mkdir.
~ ~ ~ ~ '\1\.. )~+UU,. '1. "'-"'h.lt.""J

~!(.() -i:111. )~~ tL 1 ~1:._",., t\J... .
'\1\..~. I(.()~ ~t..
()
~...;;:; t\.0-i:t.l. IU'\~01 -
lndu.htrnl
O'!- ~ '4)-i:t.t.,,.
~;-~, ~j~'\1\..14.11
-i:'YJW./"'\1\.. IU'I~OIO'l
.st111..-- 1 ~~t..
get.
fd ~
~offu.<om
lnd8l.hlml
._",':1...;;:; \(.()h.'\1\.. <fX'I'I.OI

~~...",01 0~,..01~1'\.0 1
(,
-i:~ I(.().....~.
lnclu.h\1111
.
n F-
.
f-
l!, n - n
n
,
11 ,
.
d ir:
.
c d:
l! nr.
..
pwd: ,
p ut
<_>:
get
< >:
159
$f .-
~~-mr
'Laa:no
Bo!lfoCt
]j: n n
n
SFTP, F.
0: ,
. n n
lj: n
n -?
, n
. n , i
0: SFP,
, ,
0: n,
Secure File Transfer Protocol
, .
(n n n ),
F,
t,
n . n
SFP ,
, n
F- n .
n
n n
nrt, Dreamweave
GoUve, r n
t . ,
n, nn
n.
n nr
t ,
:?
n .
]j: , JI( nt881
MS-DOS
Liux,
[l
llonWffHte
m-1<UeHI!ll
@111~
F-
Windows.
n MacOSX:
Fetch (http://fetchsoftworks.com/)-
n F- . $
Transmit (http://www.panic.com/transmit/) $
Cyberduck (http://cyberduck.ch/) FREE
n Windows:
Smart (http://www.smartftp.com/download/) $
WS F (http://www.ipswitch.com/products/ftle-transfer.asp~.
-
160
'
( , ).
, ,
.
( )
.
n n
Starbuzz index.html
mission.html
.f.;tp
8~-m>
kg...
,
-.
Starbuzz-cpa:
mission. h t ml,
i ndex. h tml
(
, n).
, ,
J
J
n n

. ,
E~u:J
...
index.html
mlssJon.hfml
,
http: 11
l
index . html
1))\j\ ~f"'Y/'~'--WJo \(.()r~'-':~o1A.

"'-"~'\.. l1t ~'j-
t....i
< / >>
~ 1. .. !\ ~,...
j)\j\
1IO<f~t\.D1i\.
c...,.,o....__~l1t.
rliJ!l,;, ~
161
UR\.
8 u,~
, ,
h, t, t,
, ,
, >> .
? -n, -, ,
URL-apeca.u,
.
, n -,
n, n n
. ,
URL:
ufunur1
~m r>
am--
m cemeBou
f, omorru m
t:ml u:n Jiff
http://www.starbuzzcoffee.com/index.html
'-11-----'
'..../
f':f~M 40\~ l!2-l- DW.ol" 40\~ '\..!1 c..D1'1ii.W.OI.
1.0{o/"'\II..W..{ I(../)\\1i\.
01 j01+U'\t1il. .
'j"oW.oiU>J1. jDA~
~~ ~3~011'\..
j.J\J\ 1'\P.)(D":jt...I'\..'\II..S\
~~11t.j.L~~
W... jt\P.t,.v;:',t...
[r.;;.. 01..w. c..ow.~1il.
Ola-
k-jW.b
jDC..W.~ ~ /"u"j/""j 'IQ
\(.()~1'\..L~~ k-01~'11\..
ru";)r"OI.
rr emu
u-u~ uforanuu,
I<>ff IL
crnrauU, u, u
u ru f~Tue fofMr
~-fU.
- ,
, n , 6
: .
URL-apec, , ,
, n n, .
f m, ff
m o11feeeu
Mecrnofac:nooeuff
fecwca
U1lL I<>m
:rpo:moKo, omoru J
u:n::m, ~~
fla
162
UmU
clOI!l
recwc
makoe
HTTP-npomoko
n' n t . ,
() .

L-,
-.
- - n. , .
- - - -:
noy~/index.html?
-:
:, .
,
, ,
URL
n , n n
. ,
URL
, n
.
: --.
. , ?
- - - -:
/h~html?
~~
-:
#404,
.
----
, n
404, .
163
makoe mu nym
, L-
<>. , ,
. URL-apeca, ( )

(www.starbuzzcoffee.com).
,
. , , Earl's Autos . ,
, .
,

new.
inventory . html ,
, , - n,
, new,
invent ory . html.
, ,
: (

inventory. html. ,
new.
/ " ), cars, new , ,
.o"+U....gOI.S\
1>...~.
I\A'\.U\P.1i\....L
hP.~
.. tGOft\..t.:o1il.. hA~~ "/"
./ 1J ,t\..q,s.
.........
earls_autos
=~~
3...t....
joSP.-~ '1..-9
~'1....
S>..t'li\. ""-'..
"~-' i~Votu.::f'ofj.
ktw./.
ld
lnvtniOI'f.hlml
inventory .html
1cars/new/i nvent ory.ht ml
used
inveniOI'f.hlml
'laano
BoilfOCI
D: r r
?

( ) . ?
0: , .
,
( ).
) ,
. ,
, ,
, -,-
. ,
0: - ,
D: , - D: n D:
(n, ,
n L-,
n1),
href
<>.
,
0: ,
0: , ,
URL-apec
~
.
URL-
apec. , (. )
URL ( ). -
, ,
.
,
www.starbuzzcoffee.com URL .
:/1--------------------------
-------------
urJ
11 ~ ~ 01 ..111.
w~/"'\.- 0 ~:Uf~"DIX
:t:::--r-n ..111. o'2>11LN>
.l r 1
'\,(..~ ....'\"-
'\J\.11\.l
, . , -
<""'.."'v> ~~
.....'I'U'\ <0\..0\.,;t.D\'>.
VDI..O..jLt-.. Oj~
1. .. ~L
,- }'. -
. ,
:
http://www.starbuzzcoffee.com/~qes/
~.OIJ\.01.. 1.DijU
~ ~1(.()/"~...
~ \...\U..
http://www . starbuzzcoffee.com/
"'.. )r~o'li\. lt.O\W-0\ot.
,
, 1W .::
. index.
~0\... \'\.t..O~)(Oj'1...D
htmldfult.htm. - 0j\A..li\I -- ""'"'~"'~

, v ~W\~0\.9. w~I-\..11\.S\
< ....
)(V.
, ( -
~~J:& 01 1. -~i-
) , ,
index. html defaul t. htm.
. . s; ..-
..Ju
~ ()~ 01~01L..111.Vv ...

<f>O''\J\.1 ~ .;;. ..,01~-w-~
~...I~
\.1
..- ..- ,., " 1(.0\WVv ._;:;,'\Nv
0\ IV""'L
....
u..r~o-t> ~~
, . ,
,
"1 >> 01~,
,
.
, :
http://www.starbuzzcoffee.com
:
http://www.starbuzzcoffee.com/
,
, ,
:
http://www.starbuzzcoffee.com/index.html
166
Kak pa6omam mu,

g no u

http://www.
starbuzzcoffee.com/drinks/ .
~u
g~
-~
t \1J
r-:
1drinks/?
11'- sw
:
.
index.html
~ \~
r:=-t ..
1
\;;;:..~
fd )
lnclex.htrnl
drinks
,
,
]j: , ,
:~
:oYJfoCI
URL http://www.mysite.com,
]j: , r - URLapec, n index.
html ?
index.html?
0: .
index.html.
default.htm,
,
, n, index.
php.
n n .
n n .
n ,
( , default.htm
, ,
, n default.htm?
n index.php? URL,
1.
- Microsoft.)
0: . ~ n. ,
, n -
n -,
, .
167
n 36m URL-agpecau
,
, , ,
URL
. URL-apeca,
earls_autos
www.earlsautos.com.
fd
index.html
fd e
directions.html
new
index.html
index.html
fd
inventOf)l.html
images
inventory.html
images
thunderird.gif
element.gif
168
mustang.gif
Earls '\utos
~-------
----------------~
,..------ f.arls '\utos
Earls '\utos
~---------
-------------~----------~
Earls
.utos
q: :
, ,
()
,
-
.
q:
buzz.heodfirstlabs.
Kak 3g ku gpy2ue caiim

URL-apeca ,
. HTML. ,
, , Starbuzz
: Starbuzz-cpa
http: 1/buzz . headfirstlabs. ,
. , , ,
URL <>.
< href="http : //buzz . headfirstlas.com">Bce :</>
01~ "i"~"'N1ti.~~ <111>.
tv\r"-0~"\..i\'l. V\12.(....:.g 01.I"~J. k.(tf. oc-.t..~utI(.J)I ~

(,(,/ <<Du... ~11UU..> ."f'u:;:;-. -./"01"':'1\.~01 - ~i..01
b'l..l.t.DI+(sOib.s.)""'
, -, . ,
, <> href.
Starbuzz-cpa
e
170
index. html.
Co3gaue ku mu ku
index. html (Starbuzz) chapter4/starbuzz
. , :
mi s s ion
. h tml << .
index. html
, ,
. .
<html>
<head>
Starbuzz</title>
<title>Kae
body
background-color: td2b48c;
margin-left: 20% ;
margin-right: 20%;
border: lpx dotted gray;
font-family : sans-serif;
</style>
</head>
w; c..(1t)ti(.DI
t\A
<t"1...
.."";.s.s;o.,__kt..""J. ~,;:;_
<body>
Starbuzz</hl>
$1,49</h2>
<hl>
~~c...Siow;
<h2>w ,
<>,
.</>
<h2> ,
<>,
$2,35</h2>
<h2>n,
<h2>,
$1,85</h2>
<>
w;~/11. .....D\w;..
.."";,s,s;o.,__kt..""J. !V\11t 111..c..k-()Jlbj~DI.1. ~
<1 w;~/11. N/11.."-1

~(1t1. fDIC......O.OU\t
.</>
$1,89</h2>
<>
c..~ut~1i\. "'-.jw;
n.</>
/"DIJ~ WC./"OIL.D\)(.
</>
<>
<
</>
</body>
</html>
href="http://buzz.headfirstlabs . com">Bce
</>
~
)
171
pye
menep npomecmu
tarbuzz
n S
, $1 ,49

<> ~
II'>!
r. 111
1n.
&t<\1 >.>~. mi
,35
, $2
n,
$1 ,89
, $1 ,85
101(
!' '13!1 Cl!~~ {11
I ii ~
!!I
~~
\1.
Qyl "g ~
i
r !
3/t<:Ct>
o~,..OI.'II\...t..
. ~ <IC.DI.
\u----...
.gt\..'\l\...0\1"-~ . .g \C.D
IA'\.4..
...t..I..l. .t ~b~O
)~) 1. .\
.I.. <.. I
.l.it...-.!1
<IC.DI ~
!)(.
. -.i\'\
..
~OI.g!1t ~
~ .V.. c..rtA~
~,..~ <fX>l""'"''If~ *
-rfiJ-30\~0C, ~ ~
l..t.Aolf'i(S\.S......
1. .)01~ . ~/"01t...
/"t..3.)..I..
-----
Ca~t-eine
--
hzz
Bo:IJ.foCbl

: ,
URL-apeca,
0: , .
,
URLapeca.
. URL-apec
0: n
, , file :l//chapte4/stabuzz/
idex.html -/chapte4/stabuzz/.
URL-apeca
"
www.
caffeineanonymous.com
Jj: n URLapeca
idex.html, ,
,
,
URL
, ?
, , .
n ?
!f : URL-
0: , ,
, .
, n .
, URL-
, -
, URLapec
}j: ecn. - n?
0: ,
: ,
, F-n. ,
HTML-~<
( ).
n n
. - n,
n .
n URL
}j: URL, :
, n
,
http://www.mydomai.com:8000/idex.html.
URL-apeca,
0:
, ,
8000-
:8000?
(<n)),
URL .
, , ,
, ,
: - ,
hef <>.
(,
).
n,
, (
80), -
, URL-,
(, 8000).
Jj: n
. -
? n file:/1, n
80.
;:J4iblU~~
80.
173
PlanetRobots, Inc.
PlanetRobot
PlanetRobot Garden.
. RadWebDesign,
:
Home
URL-apeca (
, , , ).
CorrectWebDesign,
, ,
PlanetRobot Garden
PlanetRobots
:
,
RobotsRUs. - www.
robot srus. com>> . CorrectWebDesign
, ,
RobotsRUs.
RadWebDesign 4 ,
, , ,
.
:

RadWebDesign ,
404 <<
>>.
RobotsRUs ,
RadWebDesign BadWebDesign,
CorrectWebDesign,

? RadWeDesign onycmwlu , eC!Iu

. . 6?
174
Hau6cwuii kaecm6a -mu

\1 ? , 1 , ,

Starbuzz,
, ,
( ) .
, , r. ,
n , .
,
.
'1wu gocmynocmu nyme g68u aJ8auii Bawu k

, n
, r? ,
. ,
(<<h, t, t,
, , , ,
w, w, w,
URL
> ),
, << >.
<> r
ti tle, . ,
r, <ti tle>, <head>.
, : , r
ti tle <ti tle> -, .

, ,
ti t le.
, r
<
ti tle <>:
href="http : 1 / buzz. head.firstlabs. com"

title="Bce ">
I<:</>
l3.".~ -"rWJ:r"" tc/1L - .-;
"""-
t..o-ot.. ""''\.,'I+'\-1.t... t..f'i>o.+'\-~111r ~ I..-:.o
f':JIO -r ~~>.~.
t i tle,
. t i
t 1
-, n .
, ,
index. html
, n, .
175
111m' (:!:{"'
Tecmupo8aue ampuyma title

t
i tle n
, r
Starbuzz
$1 ,49
~n<, nt< n01 ::r i<.
. ,
ontnt n
$2,35
n.n n 11 t\0/I ciiPQn
n,
$1,89
n 1\I(!)SNeoro n.., nellbl
$1,85
'>I 81111 ::r j! . cneI'i1. n!!
:5 "nu npu8o8UAt noeJIOJIX 8, I<QmUft :
8 8, "tmoOu 8~ $88 dou .

~ @JJrftcpame ()tu " . ..
ciJ(e : 8 aeecmde " .
npeio::<fflu.Jt tu Oo.41J!Ie . . ?$mapaicmeCI> doorfe ' .~t8 rfoue

' 8, ujJ tnfrtamo fJ8" noAOt>IO t tide.
~'
8 t mta cmprmua. (f/lloodamu $cew w rfeuo npoc.Atampuda ~
s> @JJ' m.& " 8. . ~ ztenMIJ31jme .I,
crnptm{N ' . zt n()tOA "tmatn :1mu . Qd,

&:: 1j.41j'iam patf<mt1j 'Z$. #lp~jitme 8:.,
npO"tUma8 . @ . $ .-rJv ? f. 'eOOxoBUAto
1z . , "fmorf 7t(!.fi.1tiJ;, w.Jt ?
s>
6/,-:~ ;z . mocpeBcmdmJ B'f!lz pzjt.((. ,J/ ?W.. dtv

mptj8Jcm 8 ., mwrf pacc.n()tpezm ., l!zopue .
.
.,,,~ ,...~.~'-~~~..-....~ ..
\ 1/*J,O: ~~-.-.~....-....._~,...-,..,..-._<-"'<" ' '
t
~
?
~
1,
''"0.' ~'1""'-~'o"::.~r.
index. html Starbuzz ti tle

mission. html
Starbuzz.
. .
, .
Ca~W!ine
n q:>.
Btaz.
J"'W'~~--~
~~~-~.".eoi'*"'-.,.t-\l.flo:;wt.d'ln
..-c~~~.".~*"'-'~~"
~.,.. 8'1d
.........
....... .....,.._
~--
O....ctoofl~lt,......ay..,.....,JO.I00\"1
......... . . OirJ1.!0 _ _ _ _,.. ..
CI."'
.,.
.. "*'18ifr
..,...~w:.~..-
... *'IId.tcltl'olllli~"'-<-"-C<dttll*
.......
..
~....7'1f1110101150-. ~.--.fl:lfi
.-.~
llwllr<JW"'*I:f.W..h~,.._.""*.. ~~- ... ..._
'f .......,.~awe.ol~io'l..,~
~
1---.
.... Ctll!htr8 . ~w.n~~-....w-.d\
~OI!IIN......"alh~l!!ori~~--NIIh
~- ,~~--.....:~~~-.~
C.W.4NCOWI'Ial\'lltac~~.W......c~~aa~~c~a~_,..
IONISt110 50 "'9d~ fll' -.lt9-loN......_.4rWU;..-..t
8iA~to~ ..... CIIIIcll.-~-uii- c. --..,"
<It'/ll .. .tOO-o.
....... .., ........
....
.,.__.I\WI'Itltfllf ~.-n.-~
~
,_.w~~tft, ~~---~ot*ardOitw
~t.W\ytf!C1"*"8tlllloli'-~1 t!wtf!IIIIWolllll...._.~
udiNW.,.....c'_..--'.U....,r. ~..It~
~~~~tclnl......,....,.
.. cliJitQWII. ., .,......... Naf'O
~Si'!'l8--- ................ - ........
~'-601!11111'/WC'.,.._, .,... ...._.Iiltc:a.rd"'C,M-~.II'IIIN
==:::r:::::::.=:..=-::-~-=: N
0)+\t~ ~ :D~...... Ceiff'&aOt.. ........................

. . . . ........ .-'ld ..........
ecn..
N-.u- - u.s.J/Vt.,.,_
gu ku m mu
....
c:oe-.~~--~-1f{l3)tctei).....,.)(I.Oiaf:l'l)fll0'$
Q:f(.~ou~f'3 102C......,)
~(~ "...01:(130to..OO~
(~~....410~(1.--~1
~ . .
~~c.t~l f.O.,.._OIQO~
... a ott~et~
: =:: ==~~~::.;:,::::~~
'*"*''*""*'"3~~
811do. -~:15~(Jf\'9t-'ll)
C\ol0f'lo.~15~(1201!1f,.,..,..f1%65--o,...u.-.iot"'t
Otai, O-$~(i7~(tl04111fi_ ... ~ t.. CIN~
~ -2.~
............
3011191*-- \..... ~
......,.. .... a.o~~tta-or'tllriO. ,.. o"'wwrooO
Starbuzz ,
..: . . .. .U'': .
<r ? , Head First . ? ,
<>. ,
. ,
. ,
. : -
.
"""'--
~8it*tO~~/IIOIIIt),_.COIII'Ithtl. . . _ . .
eofW'(IIII3S~
lc*..,._4Cfiii~ ) I0 8~('00m.,...,.,_~
.,_._~QI)';II
o~toaoo~
11184wf-.J ~"'ttt00.;n~WI'I\A'_".,....-.wt(VI
kld..,T~~~Of(~ ('f~
..
~toaoomgot cdtllne
Q-.l c;llt_ ,."._;" _
_.,....,.....,...,.,oo~
-tloi'O ~~t.'OIII-...c.DIItlfQ:IIcit.
-6WUICt~tOI'll ..-.c~~_!S~
177
nyl(ma
Un36u m <> g k3u nykma 3u

<>
, . .
, .
,
.
,
.
<>.
,
, , id
<>.
, . , Starbuzz.
<h2 >,
- jOtU>Ao".giC.O. ~011.>>
$1.85</h2>
n,
<> n ,
"\1\..k.."\...(>\~
.</>
, , .
Do~OI..gb~
301~jO~OI..gb~
ff'w..-&i.~
..-, ...~..,
v
v
o-""f'~Di~"\1\..i. ~1.. <OI> 1iljw...~.or

~
""~ .~.... ~
'{.-
~"\11.. <f'r~
~""' <f'OI1il.01 i~t>;.l...t."...f
JJ
jOI"f'11tOIIO~"\I\..i.
.u..~ 01 .
.j_
<h2><a id-"chai ">, $1 . 8 5</></2>

<> n ,
n,
Ya"'j~, .
<DI>
~
~
1
J_t\.!.. ~r~..
:;. ._
..g ~
~U\..
<l...Z.>.
.</>
n Starbuzz
"" ~, $1,4&
~':;~.-:
P.W.
~. $2, s
..:r.o , .. ....
"DQi
IIOoltl.),...~
Kak
,
r URL-apeco. ,
#>> , .
,
Starbuzz
chai, <.> :
< href=" index . ht:mllc:ai">Cxop </>
http: 1 /buzz. headfirstlabs. com.
, .
f)
<.> Starbuzz-ae
index. h tml , .
index. html .
ouck k
, L
uzz.
headfirstlabs. com. ?
View
Source ( ). ,
,
, ,
L- .
1> ~OJI.I,~-~_..-gt- ~/"~~

.~. ~~~ .f"'~o'\11..
IU\D\o\.1(.1)'\i\.
~'\!\.( '\11. \<\.~~v
I~t\.Ot- ~( .g I~r... ..w;:< "'-,).... ViUJ Vo'\!l..f.

( ...~r.... ~""~).
179
n,
kotga ux HTML 6 pykax
,
, :
~~1. <f'r>~ c..v;:.rv.t\..~11l <<bU.. IW<f't-'I.t\L>>.
<></> <></>.
</>
<h>< id="Coffee">Koe</a></h>
UcnpaBeue ku
6 index.html
, ,

, :
w. <PI"~ Jtv.,..'I.--
<f>"'1.v. i....o/V(.kt\/.
< href="http://buzz . headfirstlas.comtCo~fee"
title="'l'a'l'e
a&Jialoe
:"> </>
Starbuzz-a
index . html.
.

.
f1
180
:?
aCillo
Bonrocx
]j: ,
? ,
, <
</>.
title href?
IOP''
href="#top">Ha
0: : ]j: -
-
- , <>
),
, ?
. ,
]j: ,
href
-. ,
0: .
,
<>, ,
href
. .
id, .
, -
0: .
, !).
id,
]j: , ]j: id,
<>. ,
( <>
Coffee .
0:
id)

, ,
]j: ?
chai
0:
cJedi Mindtrick, id
id (-Z a-z),
(,
, , ,
). ,
0: :
id.
Midtrick11,
).
Midtrick'' Jedi_Midtick'' JediMidtick''
. .
- ,
.
,
, ,

.
]j: , ,

href
id
]j:
Jedi
Jedi-
]j: ,
?
0: . 0:
,
IOP'',
View Source
( )
''
. ,
181

, RadWebDesign
?
href
URLapeca
Q17!
http: 1 /www. planetrobots. com
http: / /www. robotsrus. com. ff:IP.UMUJr.nHaff
3 -
http: 1 /www. robotsru. com (
3 ,
).
CorrectWebDesign, , n .
,
- <
products. html ">-
href=" .. 1
, : PlanetRobots
RobotsRUs. , ,
CorrectWebDesign.-
.
RadWebDesign
CorrectWebDesign ,
.
. ,
RadWebDesign
, , ,

HTML CSS.
182
:~
~... ~-""'-
JOI'SI:fLII.
~I""'- 01 ~1:
t.s> ~ ~LD~ ~'\.
... , n
- n,
n . ,
q> n
, ?
Starbuzz
g no k 8 k

Starbuzz ( w
). :

Starbuzz,
.

.
Starbuzz
w -
11.49
fl""
~~f~~~~--~--~.~====~~~~g8=~~--~--------~
ca~~eirae u
.l'>oto&ll-~-@boo41!1'81/At
en.c:~.IfOtfJICIIf-ithcott..~. ~....ffO\'\..t.eh . . \dto

~C'CII'te8. c.tt8in8an..tv~OI8'!Ciltty~At111;1iCatf'IIJ~I
...... .,., . .......... ~ V8Nfi8l d
..:h...,lel.
Orr.dorofctl.... ii~C'CW'Iidltldlo.IOOI'I'If. M \1'8oty. a..,..~ (8

,._ , 150 rti)Ofip c.oflat~(.81-- t..... 111t101Add1tt0 . . . . InthtfNI
\IIO'Id,eofJ'. . y-~JI\telf.... ~f1181uro.~hllilm~.-.
""102SO",.C""'*'*'y.cllrt1'081ttcolf ' - ... ~ttw11W'CI'C8Cslil"'llllh

IOIItlin;~..-- ~"'~ Qll lhttlnn.
.a...,.,.,c~SOI&'adc.alfW.in--tc\Akql. . . ~~-
~,.~~cott.t. ~llltDA...,~.~anh~
dNzw.). tt..wtMtypttclt-.
0Ciic:J'9oori..... C'tll....
"""""tt
...
~_...,.._..,
c.lfMiJ-.ct~ itl ldldrCt*;t~C<'t.&dt_.....,..._eotUin.._,.
25"'SJ ~ liOtnQ.:.t UfW\f ,_ """""v $QrN. '8N!VfOY" ~ t e..~oere.w.

~---.........._~~~~
183
-~
Omkpmue 62 k un36u ampuyma target

, ,
. -
, . ,
, <>
target.
<< >> .
target
_ 1 an k,
. :
< tarqet="_lank" href="http://buzz.headfirstlas.com"
~ titl=" "> </>
'-
Aw.I"~.J"'"' t.5d-wf/"'11l.W. '&I"~.Jt 1jL w.~~ ~t.-c.w.r.~~ IW.o

~Ll...j.+U>o. ~ .W.I"~.jW.L k.t..f w.oli\. c..c..1.1L~V\... ..'\t\. .W./"~.jW.. t. ~ ~
5
0
""' '&l"..J.)tf ow.~~.Lw. C.W.I".~V\.':)j~ "'"'~j~L.. DIU-\.L. ..'\t\. ~ ~~~LI
j+U>I.~V\. .W.I"~.jW.. t5d-'lll..c..h..Ob~c..5\ 1-b/..Ji11 W.o '&1"'\JJ-r' oW.~~.t..w.

....1.1\.~.j ~ ~ 0\U-\.L.
Bonfoc1
']j: ,
<>
Starbuzz-a
index. html.
<>,
target
target?
, ?
?

. ,
. ?
0: _ank
taget <>,
.
,
.
taget _ank.
,
coffee,
. , ,

taget ,
. _ank-
target
,
.
184
'--''"''"'
..,.;ll
A'n?SY-'1': T:ARG~
, .
n
Head First:
Target,
Target:
target
n ?
, .
, ,
, .
Target: , , .
Head First: ?
Target:
, ,
, .
Head First: ,
Head First:
, ,
, .
. , ,
Target: ,
, ,
Head First:
[ ]: ,
Target
,
.
Target:
Head First: .
,
...
.
?!
, ?
Target: , ,
<< >>
,
, ,
. ,
Head First: ,
Target: , .
Head First: , :
-
.
, , -
Head First: ,
.
,
Target: !
n,
, .
, URL-apeca
- URL-apeca.
, Fetch WS_FP
Windows,
F, n
# ,
.
URL-
, -,

.
URL-apec ,
.
id
.
href
<>.
n -
-,
n
www.
(F)
starbuzzcoffee. .
default. ht m -
amazon . com
, .
index. html
- ,
.
file: 11
n.
n- n,
i tle, n
<>.
n target,
.
,
- .
,
n!
, ,
- n.
? ,
n
186
5.
~~ Op!IWIW
Peweue
http
:/1
www.starbuzzcolfee.com
/index.html

>k n Jm URL-agpecau
Peweue
Earls ~utos
187
ti tle mission. html

Starbuzz Coffee>>. ,
'
. )) .
; ?
<htrnl>
<head>
body {
background-color: #d2b48c ;
rnargin-left: 20%;
margin-right: 20%;
border: lpx dotted gray ;
</style>
</head>
<body>
<hl>n
Starbuzz</hl>
$1,49</h2>
<h2> ,
<>,
.</>
$2,35</h2>
<h2> ,
<>,
. </>
<h2>,
$1,89</h2>
<>
.</>
<h2>,
$1,85</h2>
<>
. </>
<>
-~~t.. (<Oj~IW...;::.u- .->>
~ jt "'f.fjt..11t~t>. (f>.>.
<
href="rnis sion . html "
titl=" Starbuzz">awe </>
<br>
href="http: 1 /buzz. headfirstlabs. com"
.. " ">
<
titl
</>
</body>
</html>
</>.
. n <<gif, jpg))
png)) -
, t , . t
, - -
, t ? .
, -? . , , 1
<imq>? t
, .
,
.
html
Kak 63 pa6omaem u36uu

<imq> ,
,.t 3 R
. , n,
<hl> <>. ,
, ,- . .

<imq>,
1: ~~t OIJIOIII:aMPI11'1CC~I~II-
1 lllall!'f'U08 11
lfiiiiOC&'f lf~&Uta<08U&a...,. . . ~IInw:l VI.8J118."r0,..-. 11
PftIL'hPI'
.tR ML1HHOB.(It
------=,
Coo!eta<eietAUIIOIJWIC6CIIII-..o8. . . ~CCIP'fii."8"1C"~WIII
uoaw tto.al!ICL ~~l
Head Fist,
a.uln'OCOC81n
apc.-11n IICipef"
<imq>:
<hIIl>
'irnp'fV f'Ooi'1'6.1D1'J1 UIIIIR. .so68Atn.we tpol8oCIId 'ft.t
~ad>
(,raaw. ept111
bllp1181rqNCIICOC't"OU:UOOII'OCkP-..
<titl>
Head First</title>
n tr l:t t' ~ R 1.
</head>
<d>
<hl> n</hl>
3_.".,,.,..,,.......,,.......
rli~IL-
1~
<h2>0 </2>
<>
<img src=" .. /:i.ages/green. jpg">
n n
:
</>
<h2>0 cpon</h2>
<>
<img src=" . . /images/lightlue. jpg">
n,
</>
<h2>- </2>
<>
<
src=" . . /images/lue . jpg">
,

n
</>
<h2> </h2>
<>
<imq src=" .. /image s/red.jpg">
</>
<>
<
href" .. /lounge.hIIl">Haa
</>
</d>
</hIIl>
190
</>
...._
.. _ . . _ ,
n n nn n ,
, n

h ttp: 11 l ounge . headfirstlabs. com.
flo~au
elixir.html .
11ZJeOL OI<AW ~/"~~/ t\..V\.U.O ~ 1-\.t, V\.~..Lt.N>.
n1
( rr:t~~-:,;"5~'~~1!:.~- -~-"
;
'
tr-.SCI8~~K
""8.......~
-'
a~
ll
elixir.html, ;
. ,
-, green.jpg.
\(Yil_.,.w;;,/".t\..~. '11\.,~..LU\.0\( t\.0 ~/"~ZJ~c..t..~

~'t\.0 "'-'>AZJ'\Nb 111.-j~/".'~.
...... ~
....
__
_"...._
c,.., ,...,........_~...,
..
'llf
I
111 3
lo-.. . . . . . . . . . . . . . ._. . . . .
..-.cp.~~a.cnaOoOJ7a~Suro..,.~-fUit
,.., n:apo-. ....,.. 11115~
:.h s n
0--.
. _,_.,. . ._,_._,. ., . . . .
..,......,._....,.
[_
~waa~8II-IIQ.Jn.-.-..rlen~:e
_...,.
-ltn
green.jpg,
: lightiue.jpg.
:)r., ....,...tt~-"180-- 1
. . _.,,..CI I IIIPSIO(;n......,AN~'---.-cc<t8J-..1Wt
"'IA,....,..,._,
..,lll5~
J: .J : .11 n
- .-.....
...-,.,.
yA~amrrolt r
0. .,....
Q
lightue.jpg, , n
: ue.jpg. n
.
101
()xJta*tHNioi:A 3C.IIe..:l :
..
.,tlt1N,..,.. ,
.nlt~I'!VII.cu.,rr ...,..,ooc . .
...- ap...- ._" ~~ u....,..c~- d

uJ..II'!Dpo-upr-'IIPA
Ovtaaet.tlt .11t n
Kak mm
pucyku
- , ?
,
. ,
JPEG
GIF.
, .
3u e>kgy JPEG
u GIF?
Ucno3yiime JPEG
g omotpauii
u co>koii tpauku
Ucno3yiime
GIF g U3o6pa>keuii umu

mu, Aotomuno8 u teoempueckux utyp
, ,
. ,
.
16
256.
. ,
> ,
,
.
193
gif
jpeg
: JPIG GIF cpa1n1D! (808

.
JPIG
GIF
GIF. ,
-?
... .1 ,
.:
.
GIF?
..1.. .
,
, ,
,
, -,

256 .
,
, . '.
- ca..\foe .
,
.
, ...
?
,
.
, ? ,
,
,
. ,

, , -
, ,
, ?
JPEG .
194
GIF
JPEG
, ,
GIF -
, ,
.
, .
(GIF , .)
,
GIF? .
(GIF .)
.
. JPEG ,
,
?
, .

-,
, ,
,
.
.
, QJ -
. ? -

. .
, - ;
.
,

- ?
?
, ,
, ,

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

195
:
. ,
.
JPEG
CAUTION
W U FOR
1 COCOI.AJ't
196
GIF
, n
,
,
n !
J PEG, GIF...
n
?
n n
n: n n
<img>.
n .
n, ,
L- . ,
... n
<.imq>.
,
( , ,
n, ):
(;.,..J>- ~,.,t\!.1- ~. w.oal1t. t ;w

~.1\.b:jO~OIW.b/ \-\.:1- ~':1_ "'-1..- t\.'\1\. k.-0v.II.L t\J..:tO t\1..
w.o~(j.,..J>- 1
~l"o"''\1\..
~N) jO~OI:g.A.S\W.b /"'\)/"~11t.
< img src="i mages/ d r inks. g i f ">
- < - vfv
""'/"11\..)~""'
~1(,01~11>\........,
.J)
tU)I.
~0/"0I"k....I\.O.t..-
t\W... </'01'\1\.AOI v '\1\.:jO fOIt..t\.1.Lr I(.DW,O/"Ot..JO.II.N:>
~ JOaOI~.II.2..kiJ) tU)I. ~-~/"01"'-~
b11t v-;,t..V>.tU)I.~t...1
w.
(j.,...;> v
w.
~~ .t--
, ? . n ,
. , , ,
n <imq>,
, .
,
<i..mg>.
<imq>, n n
n n.
rt
< img >: menep mk mum ku
src
n ;
URL-apec . L-
, n
URL.
URL-apec , ,
fryzo. (n, , ,
r).
n , U RI .-apec:
<img s rc="http://www.starbuzzcoffee . com/images/corporat e/ce o .jpg">

(
.'&,~~ !~
! f2.l.- - . h-.j.b
k- f"I.V.jtuc..j
v-...(J 1...J\ <f."\.. .g I<.D~t..-
jO'&DI.g~b v.fI-I.-11\.'Jj ('111..-
.g~DI"\...J\ <f."\i\..DI v jDI~
'-.jtU>~ '"'-fov.o .j\(~~t.. ~
fVI.V.jtO.. .... .D\It.OU> v-..11\.S\1
~ft..v .g I(t..v.:gt.. jt\At..!-1.-11\.S\

DI.f~.j.DI .Sfv.
\(.J)\k..
Vl.jo'&rt..~-~.-1.t. ~....t..
"'- .j..D\t\..'\.
~ 1J11
n ( ). n
n n. .
, , ?
? , n
L-. ,
URL-apecy
http: 1 /www . headfirstlabs . com/trivia/pencil . gif.
<html>
<head.>
<titl> ,
onpoc</title>
</head.>
<d>
<> ?</>
<>
< />
</d>
</html>
198
'iaano
Bo::J1f<>et
"]j: , n <img>
) n L-.
. n n
n .
n, ,
,
n
,
?
0: , n.
n n
-...
, ,
.
?
]j: JG-r
, n
. ,
JPEG?
CSS,
0:
. . n
URL,
]j: n
GIF
GIF-
0: n
n , n
? n
, ?
, n
? n

?
. JG-
GIF
GIF
"]j: -
, n
JPEG.
, URL-apec,
"]j: , -
"]j:
0:
<img> -
n.
PNG.
n n
)?
, n
0: , n
Address
- ,
. n lmage
0:
PNG -
(n )
n n .
lmage Link (n
), n
HTML-,
URL- .
. , n
n URL- n
. ,
n lmage in
New Window (
PNG
).
L-.
nn .
URL .
n - n n
View Souce ( -
<img>
<img>,
. ,
L- ,
JPEG-,
GIF.
G I F-
n , n
PNG,
199
alt ''l"N'
Bce2ga ueiime 3anacoii 6apuam

, , , -
, r
. , r
, , ,
( , ) , ,
... ?
, , 1<:0 1t'..
, .
,
,
<img
al t
<imq>. :
src="http:/ /www . headfirstlas . com/trivia /pencil . gi f"
lt=" ,
~~~~ 01ft .,_";:. ~w..
""
- 35
">
Ec-111..1A.;JO~/"MU<..-111..t..I-\.L ...t..
V ~~ .__o\U)\0/JI./ .
..t..--
tU\ t..w
.t.. ~~~~- .. .~.
~0~111.. ~C-0\t- .LII - o.__V\.UI\-
+\-1.t...- 'IIIQO~JOOIU\.W\.
n , alt,
. ,
al t .
, .
, .
8
8
L- .

<i.mg> ,
al t
- 35
penc il. gi f broken .

g i f . ,
.
.
, ~

. ?
~ )
, .
JJ
~ .__--.'S~~>..
Ht>."f'\1\...11-U..f/~11\....
. 1
/)
=fift..{-ox (lr--1+1": / /www...~il/~>..o~ 111..111..
rt>. (~t--tty 11www.ort:J~>..vo.. 1).
Onpegeeue 3 u3o6pa>keuu

, :
<imq>,
width height. ,
.
,
widt h
height:
<img src="images/drinks . gif" width="48" height="100">
""'
A.;;;.r~~.;;; Vu.-~l.t ~~3~.~ ~I"~Ji
~1'I.j11\..+\tj~ 'atft> 'IQO~/".~U\..W....

. , ,
n .
width
h eight
. ,
, .
\laCJXlo
3t
Bo:nroc
D: ,
D: ,
HTML
, n .
nw n , n
, ,
n -.
0:
L-,
width
height.
, .
nn n n
0: , 1
lj: n
r,
? n
. ,
w ?
. n
width
L- .
0: , ,
- .
, , n
1
,
, .
height,
, ,
, (
CSS,
, ,
, 1
, -
).
:Jaf-.!Ui" >
201
ipod
Co3gaue caiima g 6wu

m: myPod
iPod
myPod,
iPod
.
, ?

HTML,
iPod.
- L-
, .
. ,
,
; chapter5
. mypod,
. .
Moii iPod 8 Cuml 3g 8ug

gg8 k u w
Cneiic HugA.
U 8ugo 628 k
1>111. ~""Jt..L ";;.
~ ...._h.I(.L v\r...DII"tuS.
mypod
.....
.-.
photos
.....
202
mk u

index.html g cauma myPod
index. h tml,
myPod
. L-, :
<htl>
<head>
<title>myPod</title>
body { background-color:
</style>
</head>
~ .... t-f\Ml".k..Oj .g(1tl..IIJij'\/UiC. ~V\..gi1I.+'\.01 ..\1(.1(.011(.
<d>
<hl>
myPod</hl>
~AbjO.gOit\.bl OCA"\.O.g~ :./"~~ ~I(.'\..; <>(
<h.Z> '111.. <r>.
<>
, iPod ,

iPod:
iPod
myPod.
iPod
</>
<h2>,
</h2>
<>
iPod
628
</>
</body>
</htl>
-.. 1(.011(. ..
.gl't.IUIJ'\/UiC. .g ~rw
rL ~)(/ +'\.0 N'\..
~~t\.bl /"'11\..V~I'\.k.'I..
"'------~~
''J.I, r11
203
:::
n, L
myPod . ,
, -
<imq>
.. U~;t. tyAa. r.tc- IIIOXKe> noo.:ran.c11 .:. iP6d 11 ~n.

r;tct~8w n ~w. Xonnc ~n.-r u? w~
1~. a:tw:>6ot a>od O't t.f WJII<a((~C..eo:ot ~cu " ca.ptevao*
*1111- c.u.oro - wtr iPod &torpaliNQ: .W)"'Qtttt'' tc.n~ 11
GQJJ+P-ol ta.erpoll J><:. <~.- cac.l iPod aJ!t)6uo
tne. w 6)-.~ ~ ~~~-,...",. n .: wa ~aJfre rrq"'Pod t:~. 'Cero
, .

seat tle. jpg,
~waJ~.ert1
, w"n-
. ,
.
i,l
\ . +) +\.
<html>
<head>
<styl e type="text/css">
body { background-c olor:
</style>
</head>
3oal"01 -U\.vu...
1,'
V\.
ieafda;}
<d>
<hl> n
myPod</hl>
<>
i Pod:
iPod
i Pod
myPod .
iPod
</>
<h2>,
</h2>
<>
i Pod
628
n .
</>
<>
Dt>.~ ~ <1.j >
~ jM.U\.>~~bv.l\
</>
</body>
</html>
204
?.1/& S
Qjt..C-
~2of Pucyok cAuwko 6oAwoii
, , ,
, ,
.. , , ,
, (
). , ,
, n, r
? ,
...
n,
.
:D. +U\~ ~rO>Lf O\i..\'\.0 ~ rOIJ~t
\GO...-;,Of'111.:\i\,jO~OI.OI"D \~0 "1"~

~C...sl +U\ "1"01"""''\.I(..t..
..,.".
noa.rJO:t11
J ..,
myPod
*'
:11<.1111o1.i'
ap.81:~.a~n rac-a~nwh-w.31r Xowre
~
. - """""~
.~tlk.lt.c'eu'"t~aiA U*J
~-
.... n &:ttat:ll!fo 14 '4 :rt :-.. ~ U1~~ ' Q;a+f('.-ol Lt*P"
!"'.:. torotf.. llfif~ra alf' lhtl6a:t~t~~~tttt IQI~ ..tt.a-wutot~:~ :cn~c:al'tt!aqfS
NP<.
i:r-
"lft9:1't8UII
1111, 1111II
w. k.()t\t.i. rOIJ.t.r 1.3o~r0\'U\..'W\f

\G...-:,0/"111..'\. ~~ fO\Q.t.rO\ ~
~/"'\j)t-1"0\ ... 1-\.0\N)'l.O ~~
~------------------------------------ -- - - --- ---------~
~3o..g01W.b 1
;
1\..~ k.f'O"f:JW".Il-"'.f 1
.~111.. j~~~b 0~0\..g~

~jiOC...s\ \~ '"OO~fOI
't..t\..'\1\.S$ 1"'$.g-t. +U..
~111. ~111.. j~ U"'\1\.

~111.. .l.1t v..ot./1.'11\. '-';j-A11\.l(.(). k....,.;;.~ -w.
1:::---"'11\.30~1"0\~'11\.t...g 0\(.
~1"~"'~
t!::u:-:.e
205
.1
'laa:no
:onroct
]j: , ), 800 -
n n ?
, . ,
0: - n
800
. , n r
).
,- no n n
. , n
"Jj:
n ,
, , n
n -
ns n {
0: :
72
n , ,
no n.
"Jj: r nn. ! width height,
!<
0: - n
n , , n
120 n . n,
72 n .
, nn 3
, , 72 {n) 3 {
)=246 n, , , 250 250 n.
"Jj: ,
"Jj: , 800 .
0:
800
n.
, , ,
0: , n
, - , n.
. , n
n, - n .
, , , ,
. , ,
!<
n . n,
( , -
n,
D. '\.....;;;.~
""'\IUl.-Vt..D~( ~.o
l"litL ~....... o'S-
100 200 n.
n . ,
n
, ,
/"0\jj. o"f''l:"""""'r=-:-:;"""1';~~:o---=""':~
\v. "'-"''" '"''".....,
, n
n .
.
"Jj: ,
,
. ?
0:
, .
~01 . 'l.jO'?j/"OIU\..11\..t...
~~~~v.s\ . ~0\t\L >...
...'ir vov.o~ "'
~Jtbi(..'W( ,~:~t".s\ ._.'\Nt...Ao~.
206
, n n.
, ~
,
,
n.
U3u 3 U3>ku
, .
:
1200 800 ( , n) .
800 ,
, - myPod .
iPod, , , ,
. 600
40 , ,
. ? ...
,
: '\1\Q. t....:. .;;. 1"0\j...t..r' '11\..3 oar~'\I\..S\ .;;.'<r

.,.;.111. oc.,;;.O\.gOIAO,
jO.gOJtbM .~:\. .. .g_
1
.t....g ~""f'~ al1t.Jto ...t...I'\..
i11.t... .t..... 800 "'-V\.k..c....t...o.g.
~t....-.s~1 &00 "'-V\.k..c....t...o.g
~t... .g c...t1i\..rO.Ot .;;.

"""$... rOIJ c.-oc.,;;.OI.gJt.S\t...
h-DAO.g~ '111..j~O\JtbM1i\..
~""f''~\t '111..joar.t...I'\..'\I\.J\.
~00
Bom m cgeAam.
nr n r.
w ( 600400 nn).
n seattle_med.jpg.
t:Jeda mop

, i,

q
,
.
Photoshop Elements.
?
(
) ,
.
Adobe
Photoshop Elements,
,
Windows, Macintosh.

,
.

, ,

. ,

iPhoto.
208
<?<t 5
Windows,
Microsoft's Digital
lmage Suite. -
,
L-
.
Omkpmue u3o6pa>keu
-, -
seattle. jpg. Photoshop ~ 01 -'\..gl1t 1" 01~o.Oit..o.tElements Browse Folders (J t,

~
".
.g \,J j"~ow.S ""' vr"\XJ
) File (), FileBrowser
J ~ .,.t...tU<> =f;/vOru....
(). ,
seattle. jpg chapter5/mypod/photos.
'\.._:'l;)j;~ ~) .~11t
{I'\.) ""'"'f
1
+t. .' ,;
."'f~ liP.I".'\\J(..~ J.tA
/I".J
t.r~MV k..D .....D\~""7 .g/ ~~t..o.L
.g~.t...V>'.b .g- ~ W.'\.j11t 'I.jO~f'MKt.A'\-'\.'\A..
Alltomate
. { Flagged and Unfla...
(_ dtiiplerS
L-~ mypod
[_ logo
(; pflotos
~ ( ; OeveJope-r
~
Ubr
~01 .g!1t ~t- ~tP.I".~

JU~l+it....(fj/j.gMKj11t ~~L
tU-1A- \.U'\.01'$'\. ~""7 .~11t

u.. ."'f~.
11
U3u 3 u3o6pa>keu
,
seattle. jpg ,
n SaveforWe ( ).
, n n
)
File
Save forWeb
().
Open Recently Ecfited Flle

Ouplicate ...
Close
r:lose
:ICW
l
Save As ...
~1ve for Web...
OKS
\: S
'N
s.w~
Attach to Emall ...

Create Web Plto Gallery...
File lnfo...
Place ...
Process Multiple Ffles ...

lmport
~"'
utomatlon
Tools
U3u 3 u3o6pa>keu, npogoA>keue.

Save forWeb ( ),
; , .
)
)
'kow Sa:t
\'1'111<'> j1zoo
~-
..
""~"' ,
.
""'"'"' 100
if'ii!.,..-
.,,
~
-r '
-~ ;:!_"'{r_,f"""
-~
J'*"-" J:J
l
pixels
D. ..~~'\1\.iA.
/"OI.)..t.r' 'I..)"'/"01-U\W\: /12.00
1-\ liOO ~~~-
211
1-11- 1Q
,
.
) ty.u.~~t.. r'\J.t.r 11\Qo~rD\U\...'\1\.S\

- '11\. -t1tc-o~D1 - lfOO.
. ,
~01~.. ~""-f"\-\
600
<-'11\. :J .gDI<- :J~DI~~ <J>\.

C~fDiik. 'Pfororfio....s (Co)(rDI~b
kf>O;,..Or~'11\.'11\.)1 ~ .g~ ~ ~N:J
<jLDI~b( - i:\-~'11\. ~""-f~ 00
1
Dl kf>D'tfDI-.DI Dl-~.D\~'\.-1..-.'\.
~.t....S~~ -t1tc-o~:J tU\ lfOO.
400 n.
JG.
...
' Save for Web
..
1(
""-'-.. , . . . _ -~.....-!.;
,,'
:._ '\ : ....:~-~-- _J
.881<
- .. 28.8 !(s
3 u3, menep
n
(JPEG).
Medium ().
n n.
(2.) :.w~~t.. IU'\.u";;;',~o
__
t..o/i1'\.I (Cf'~+U.L).
~ Save For Web
.....;;
3 ) ~-_.
s,..,...,.toonc~.oinWII>-.
Canc:el
I?..~t.
~lp
lu\.0~ k.
SOYe \~ < Jf'ECood amoges w'c/1 6mrted oolo<> u Qf
i'he.cmage. prwvkow$ovws w yt~~Jt ~v.tillook usf'tQ t.hee:ufm\t~ertf'tgs.
1'\. ~V>j1.~
i(.C...!Uj)I0~1i\..
~ft\I'\.1.'Jt..
~s
.... - Woelth: 600 pi>;d>
------....,,1
elgt": <100 pe<d>
~Nc:;,;w;;Sile;-=======~ 1
l~oelth: !WOI pO<ol
o<ght:
roo-J-1
Jfl
~nt:foOI
~ Conwoin ProponJo
O~fOI.~ ~+\.~~ ~ ."."..t.. .(1t()1 1U'\I(.
~11t.NJI?M1'\.I(k\.()~ Arrl~ (nr'\1\....t..t\.~)
~ 'f~~~t.. ~~ fOIJ~ 1'\.jO~fMKt..t\.'WI

~11LA. 1'\.j~ 1'\. o.o~r01J1..II.OV
.. ~11t...1'\. rOIJ...t.r01.1'\..
u uJ6u
n , n . n
sea t tle _ med _j pg, n n .
t0~~t... ~ ~1. .st...+tf..__""'u/irJ
Y1>ij~U1 ~ -t
c-o)(rtl.!lt..>t. ""~r
~U\..'\1\L.g "'-"'"'J( ""'j/"ool,
Save As: seattle_med.jpg

Where :
photos
I"IN>t.
H~.~t.llAWh.k._'1_VOIVt..
( )(/"":~-...:;;:. )1 ...:;;:.oalft
-)(l""'-'\....:;::. 1.jO~I"DI~t..
"'-11U...
jt
Jj:
BoiJfoCt
Save for Web ( n )?
0:
Jj: n
. ,
<img>, t
. n
- n
n Save
. n,
for Web ( ), ,
- n.
0: n
JPEG
, , .
width
n ,
Jj: n 30 n
( ,
JPEG Quallty ()?
). width height
n ,
0:
30 Photoshop
Elements Medium
'Pkoto.skol" E/t-.u.-t j~t.. ~-or::-...:;;:. (). JPEG n
-01~ !(.. '\.01.0 .gl"~ j'li\....t..I 1 100 %, Low (), Medium
"""UA1ti\.\(.O\ ~1.01 ~/" 01~~ "'1"'\. -- (), High () . . -
ij~'I.'I. h..O ~t\.1'\.0'\. '\.t\-'\.'\1\... n ,
5
height,
JPEG
214
width height
n ;
n,

UcnpaBAeue HTML-koga g myPod

,
Photoshop Elements.
, ,~ - myPod
index. html,
seattle_med. jpg.
index. html, , .
<htzal.>
<head>
body { background-color: #eafda;}
</style>
3 U.. ~ J...W'. ..\-\J)\.9. I<-. \(V'\L.-~jOI. O..u>.
</head>
~~~
~
_, i
~ ;.,.olO( 11\.tvv./.
<d>
.
~ j:gOI'-j~t...t.b <f'OI\..l\.t...
..oiOI...'"'(l~t\.0 'jDI.bl- h.O...t-~
<h2>,
~~ "\1\...J\ <f'Oii..DI i ~ <i .....j>
'\...9> <f'\"\..I( \..Ofl1t.i- il1t. ..I

.. voJj"\1\.: .suo.+~ .....l.irJ
</h2>
<>
iPod
628
</>
<>
<img src="photos/seatt1e_ID8d.jpg"
alt="Mo
iPod
~">
</>
</body>
</html>
ceiiac npomecmupye
, ! ,

index. html
....~-.. -.-..
--
......._ ~.... .......
.
,
/'
215
.-:t..JfJ''<-;r->n u:N.':~e,, l, u
'!t.
~~~ : ~'J~~~"?
:
chapter5/
testimage/eye. jpg Photoshop Elements.
Save for Web ( )
(. ),
JG (, , . .).
n
!~~
-z_ 'POIJ.t.r V\.jo~r~?~W\.
!7sec@28.8~
, .
, ,
""f'V\. C.Ofj~V\.'11\, "'-0
v;:',.t.J\.upcv'\.1:>1i\, ~V\.V\..
JPEG
ku
JPEG
8icokoe
JPEG
BJcokoe
JPEG
JPEG
Hu3koe
GIF
216
Drt...AU! ""'-ft.L(j\A"'V\,
num
D
D
w omo2pauii g
myPod
myPod
. ,
800 . <img>
photos).
<ht:ml>
<head>
<title >myPod</title>
body { background-c olor :
</styl e >
</head>
r.-11\. >>,;;:;111.,;;:;~ .,t..;;;;~jO~OI~~

~01. .....0../"j (...~011\.)( <P<>,;;:;oty>OI.<f"\11.1/i..
loJtbi +U.. jDI~,jjb~ ~\J\.01 11\.j.t...
#ea fda; }
~11\.,;;:;b
11\.)( I"Ot,)...t.r.
<d>
<hl >
myPod</ hl>
<>
iPod:
iPod
i Pod
myPod.
iPod
</>
<h2>,
</h2>
<>
iPod
628
DDI~011.~ ~,jjt...)(/"OI
..11\.,;;:; ~. <P<>,;;:;oty>DI<f'V\.11\.
"" C11\.,;;:;JI.OI ~~L
</>
<>
<irng src="photos/seattle_med. jpg" lt= " iPod , .i"l' ">

<img src="photos/seattle_shuffle . jpg" alt=" iPod , ">
<irng src="photos/seattle_downtown.jpg" alt="iPod - , r">
</>
<h2>,
</h2>
<>
.
,
iPod .
10 ~ r--01.~j.IUI <f'O,;;:;oty>DI<f"'ll.'lli.1A.o D1f.~ ...
</>
<>
<irng src="photos/bri tain . jpg" alt=" iPod r ">

<imq s r c="photos/applestore.jpg" alt="iPod r Apple store" >
</>
</b ody>
</html>
ogu
mypod .<
mecm
myPod
_....._--.--)"
! -
....,. _ _ _ , . _ _ _ _ _1 .... , .. .- . ...... .
...
-~-.
. .....
............ _._.
~.:=;- ....-----------...-
-..- -... . -..... _ _ _.;e ~ l ..- . ,........... _ ...... _.
~---
c:-.""'taUt-f'fW
~ ""<-w>---"- -"""'' -"-
, ,
,
. ,
;r
,
, .
, , ""- c...r0\\'\-1.

,
, ?
. Ik- c.v;;;r01~1.')O\ -&!:l..IUIj1.. .~.
'JOt. vo ~t-,t.....1.
1.jD~.fOt. ~L\'\-1..SI
...1. ~ 11\..'>( k.....rOt.j.t.rt..
}-
..11 d
oiJpo ff():euoR~tnt ,'Yit'- ""'!";
-l:n...-~: ~
uoaao noxa:at1"11.t1t t. iPod pe~o.fY.a:tlrtlr.,I'At ; ; 6w. Xorlf'l'e

XIJIOI? 11 ,lllltcl'f'Or~ n .'t6o.81.P~d. orr pl.k.li::l J.IUIC.;eocul'i . no t.o:i
COii;tt"KHOA XAX411tpCirlf UQI'O ~\ iPod oT(;fJ)i~!IIOI Rj"t!DeJ'"O K.n~~ J1 UKpoJ'X!~ AWf~Q
t'lpocr:o t4)1l))'h'- >d r..mce, - aott'11fn. n Cfl,tOw: myPod

t1:', r . -,n?
. r(}
218
,...._...... _.~ .... s,..._., _ .........."......... .._._
..... .. ..._
. ............. _ ......._ .. ___....,_.t,...
.~
..,..... ........... .....
opa6omka cauma maku 63,

m6 un36u ku3
,
(
t).
. , .
150 100
n
thumbnail.
r s rc
<img> index. html.

.
Co3gaue t kamaAo2a g cku3o8

n, n
. ,
, ,
. ,
, .

thumbnails mypod.
, ,
.
index.html
219
Co3gaue cku3o6
~--
...
,::.. ~-
v"\1\. ~111. /"DI~o..;;.DI......t.. - <f.1.D1-
, ttmnail. :
...~ "1'"11\.~~UU\t..."\1\. ~ I(.DI.u.v..~
photos, .f---' "'1"~~ ll..~~ ,0 .-v1.;~~
photos.

q> ?
.
JI
~.. ."'l\.j11t <fX>.Otf>D1<f-1. ~ .....t\...d..

~"11\.-b~i/$ "11\. ~0\... +U- ~'\1\jt...o"-
v.s\ ~C..U.O .w jt..ADI..b ~ I.~
IL()~O~, ~11\. ;j"\1\.t... !~ D\ 1'\.1...

jM-"11\....D\......-:;t.L o~/"DI~o..;;.I.1i\.. <fX>.o1fD1<f'l-1i\..).
- 15 100?
.
, :
(
100 150)
150 100 . ~
. ,
-
220
~.J
;,
150 100 .
opa6omka HTML-koga maku 63, m6 un38u ku3

L- ,
<imq>
thumbnails, photos.
, photos 1sea ttle_ med. j pg, . , ,-
n photos thumbnails <iq>.
I<
<html>
<head>
<style type=" text/ css ">
</style>
</head>
#eafda ; }
<d>
<hl>
myPod</hl>
<>
iPod:
iPod
iPod
myPod.
iPod
</>
<h2 >,
D~ ""' .g\. ~?/<.t\.1) 'jt..AOI""'bf - lt\..O~""'b

j.gOit\-W. ~k..k-111- .. rl.Dfo.s IW\ t\;<...111-v)OhJI\1/.S.
</h2>
!WI-
<>
iPod
n .
</>
<>
<img src= "thonails / sea ttle med. jpg" alt= "Mo iPod , " >
<img src= " thonai ls/seattle=shuffle . jpg " alt=" iPod , ">
<i.mg src= " thonails/seattle_downtown . jpg" alt=" iPod - ,
" >
</>
<h2>,
</h2>
<>
i Pod.
</>
<>
<i.mg
<i.mg
</>
</body>
</html>
src="thanaila/britain.jpq"
alt="iPod I' " >

alt="iPod r Apple s t ore ">
src="thanaila/applestore.jpg"
U mecm g myPod
---... .
oryr ,
, . ,
IIO""-'t\JI08n u myPO(I
,
. n n,

.
,
n
?
n
; n
, n
<lmg> -
n.
, <<.
<imq> , ,
. , L-
<imq> ,
,
n .
, n
, ,
. .

, , ,
,
. , <imq> .
222
u cku3o6 ku
.
. .
'>t~. Ar.riJe
..- -..-w:.~ .,.r.........-J~.--.~~oro:....- ....r1.~1o

-....; .....-.~!. ~.._.,, ~....._.~"f4".1"-__,t.,...~'
t1n
1o~~t..ll.b t-011i\..t\
tU'I1ii...OI~ I.U-\D~~
'\)~{ .o~llt..gt.r_
~.v.$1 tU'I ~rt\~
v..~'Pool.
r
:s, n .
n r lndex.html
rn11 r.
,
-.
da/fb t~ ~
223
Co3gaue uguBugyaAx mu g omotpauu

html
mypod
mypod
in~ml
/
~
~$.. ~~ t\.0\~Lf'~t.r
jcnDijMw-t .11\1. ~t..
L- .

sea t tle _ med. html .
sea t tle_ med. j pg, L
VOJjOI'I-~,NI ~OIC.. W.Oi,~IO

~~ ~"1''\..'-f$(
\(..~1..L
L ,
, .
L .
. :
~ HOIJ~OI"-W... C..W.fOI"-~111.
w. c..t-\.0~01 w..;;:.o"11!.-t_ CJJ-
<ht:ml>
0~ ~~v;:. 0"-'\,c..~OIW.b
~~J~OIIO~'\,"I_ c....;;.fOII'\.~
<head>
<I'D""'CI1f 01~
__./o"'f'Cj~1. "j~t-W..
<title>myPod: </titl> ~
<sty le type="text/csa"> body ( background-color: teafda; } </style>
</head>
-~
.
<d>
"3jt...L ..L1t.j011..- C..W.fOII'\.'IIUJL O"-'\,c..OIW..t.Jtbt\t1. j0!1.0.1L0~01(...
\j_
<hl> </>
<>
<img src=" .. /photos/seattle_med.jpg" alt="iPod

</>
</d>
</ht:ml>
">
~~
~~
.J) ~
w. ~ <i..,..j>r IW""'Ofl1!.'1- ~Jt:ftX)Oit...A t\.0\
'\,~ <j:X>.:.01f01<f"-'I- .St..P.t+/t..-~.jfj D'&I~'\....
1'~
<i""'j>
"-'\,..\..t..t\t"I_ I.:.f~~, 01/t.
O'&fOI.:.'I-.t.. ~~\'\..~ .:. t\.0\. ~ \<.. ~j~I.:. ..'\....~!ft. <<.>>

~ .~..'I-.t..I'\.. ""~,;;;;""' ~W..~ .;;;; ~h.I l.t.,..../ - . ,,_.v.,;;./"01'>
~~->.~(..~ r!A.oto.s~J~'\,,;;;',l c..t\.D\O\OI "'()\'\..0 ~IVI.bc... t\.0\ ~"'(} ~1->.1(..-J~-&r)(/
0\ jOI.t..- 0"-_j;....."l... i) ~~ f""-oto.s.
224
n n
html
n n
, ,
seattle_downtown.jpg.
seattle_downtown.html n html n .
, , . -
n ,
.
Umak, kak co3gam u3>ku-ku?

,
L- .

index . html
html. ?
-, <imq>
<>, :
w. oW.ILj"~OIIO~i:I.. w.u.. <t>.>
~c-rtj(.ArA~UV\.0 ""'"!J
~.. <i.j>.
<img
src="thumnails/seattle_downtown.jpg"
alt="iPod
- ,
">
'\
3~ <i.j> h.~;;.
~~~~ <>.

<img>
<> ,
,
.
, ,

href.
'
225
cc&IKU
u u3opa>keuu-ccok u
index.html
. <imq>

i ndex . html
<>. , href
<>

html. , ,
index. html. , ,
L-, .
<hnl>
<head>
<tit le>myPod</title>
<style type="text/ css">
</style>
</head>
teafda ; }
<d>
<hl>
myPod</hl>
<>
,
.
i Pod:
iPod
iPod
myPod.
i Pod
</>
<h2>,
</h2>
<>
i Pod
628
n .
</>
<>
< hef="html/aeattle_lll8d.html">
<img
arc="thUIIIn&ils /seattle_med .
jpg"
lt="
iPod
Cro'l'ne ,
SaJIIrJIO" >
</>
<& hret-;'htllli/attle_ahUffJe . html ">

<img src=" thUIIIn&ils/ aeattle_ shufile . jpg"
1. t=" iPod C'l'Jie, J:w.">
</>
<
href="html/seattle downtown.html">
<img src=" thUIIInails/ seattle_downtown. jpg" al.t="iPod -'l' ,
SaJIIrJIO " >
</>
</>
<h2>,
<>
226
</h2>
iPod.
'
</>
<>
<
href="html/britain.html">
<i.mq
src=" thumnails/britain.jpg"
alt="iPod
: 1< " >
</>
<
href="html/applestore.html">
<img src="thumnails/applestore jpg" alt="iPod
Apple store">
</>
</>
</d>
</ html>
<>
index. html.
, n ,
myPod l
3::1
:11f1
"]j: <> ,
.
,
, .
0: "]j:
JPEG
L-? ,
, n ,
( Safari - , ).
-,
0: ,
, ,
, n
CSS.
: < hre-<<Photos/seattle_downtown.jpg>!> ... </>.
, ,
, n 1,
-, ,
. n
. ,
- .
227
myPod
!
,
I((N
myPod.
chapter5/mypod
logo.
mypod. p sd.
PSD
Photoshop; n
.

Photoshop
,
-,
,

228
: 5
Omkpmue o2omuna
myPod
myPod: mypod . psd

chapter5/mypod/logo Photoshop Elements.
1 600
filt
Ale 8rowsr
[djt
Aut~tt
Son
VI<W
Mor.
80ti~
u ""'""
~ iJ ..........
.. f,la
Appi~A(';o~
" p ......,..s
~.Jt'\11.. ..g ..g01~1i\. ""fo-
~ 11
!J ~0~01
1f>OI.....t.-j .1\..S\ /"~01~'\11..-
fO..gOI~ cpo.01fOI<f-1il.
<f'0\1i\.Jt \'\.1.... O.ilfot... c.,.S\(
,.-
'"
.. t~
.L!Qillra__
.!3 ,\...~
:.
..........
~ot'\lt.,
..gc.,t../"OI..g+'D /"0\~0.OI'Ii\..t..
.,jf"~ <J:>/"WI...
h-0
01\'UI\AO'UI\..'\11...
Show. , Aagged and Unfla...
myPod-
D ".."....,,.
"__,
'!
ti
'--~
rnyPod
~~:
l'r
[: 1',.
~:
D111. ~~~~~ IOjo

..g ~~ c.,l;...l"fuS / ~l"ot>l.
lri
1 ::
11
!
',
)
.,!
tu:d~t'- ~ .""'!
1 ".-1
.D
g ..
; :
(
Click wheel iPod).
? ,

. ,
...
<m ~
229
t.~u
gif .fpeg
Kakou m ucnoAb3o6am?
,
: JPEG
GIF.
n ,
. , , ,
, GIF ( n !).
, n! GIF ,
n . ...
Save ForWeb
s..... tn ....... \0 ~ 11'1 Wt p.g<e

Sowp...t . . . . . . .,
..-!: ..!
_" ........,._.., t;E
n...,... ~ '-"' how )01" lf'nllge IQQk """'$ v.. (alrrW'It t~
~0\ .g!1t. .g~'IfOI

~ <fX>I".OI~ Ctt~
"'-'>~NI~v..!l I~()1(. 1(0\t.,.J/"0\~

(11/"ojrOi~~).
j\t\W o"'~~.gt..t~..HOi.
~~U\.. "'-f0j/"01~1..
j"jt\k\.1. n..A0\1'\.~
~,..\~~ ~0\IC..t..
.g~+J_ t\.01 ~11\.C..ol(.
fY'I01fft_ (~~t).
0"'-~0~t..~
~~~ IC. "'-f/"0\
t\.0~'\./ t~, .g!1t. v.g_._

U>ro \\.0~._
Ec.-1..gl:1tk.O~OI~Uh ~~ cp0\~0$.170\t...Jr~
(,..j/"01ti.~)1 ~ j.g'I.j~'-1 ~i Ctl=f jNI ~'j-
.gOI/"~t..t\D'LO "'t'oc.-c""'I"O\ j"jt\k\.1. <fX>"'- ~0\ ~t..lft...
230
Ucnob3o8am n3m uu m?
myPod - . ,
?
, ,
SaveforWeb
( ).
. w.~ ))(/"01~"\. .rt.....SI
/"'$11\..I'\J1t..1. ...,..)~I.1. 1. o.o~/"M.Uou-1.t1t"\.
~ ~-c..ve.rOit\..wy- "~ <f'OtU>..
. .;. . .t ...~IL.
U,Jt.1. ~...I~~1.~it.... <f'.\<.
\fOI....SfOif~ (11/"0j/"OItU>C...b)
1. ))(/"01+'\Jit.... .t- ~~
t\.0
. 301 ~ULI1t"'. <> ~O"fjt'

~"'~ :g Jt.OU>.'\- .
<<0/"U>Jt.OI >> ~Ojt\..'ltOit-./
......~ . "'t'alf"'..DIj
/"fjOI~1fcs01t\..'\.SI <f'O.alf>OI<f'\1\.."\.
)~\t-. ...CjAO'J.\<.~ t:-~0\$1
1t.fM ~01 ~ ~~/"0\\U\.D.

v;;~ <f'O~ DULM . j
~~ Jt.OU>.;C.1.~y "'f'lnfOI...DI
0 1 .~ ~...~~j~ "'t':. ~oro~o.

01 .. 1"'\J .t ~1.. ?tN>to.s~N>r
<<~...CA0\1..0\AOI'>/ .;. t:-./11\J\"Oit-.
"fO\.S\ ~ ~L. <f'Ot\.L.
f/~t.S )~I. ...CjAO?I<.~ ~Oitf'Y

.~OI - ~AbjO~Oit\..'\..t.....~ <f'O~.
~~<-~ 11DIU'I?t-.. ~01.. ~. .>j?t...
231.
1u gif
u n32 GIF-u3o6pa>keu
, n

GIF,
,
.
GIF Save forWeb
( ).
Matte ( )
. ,
-.
c11\--w..o~<- tv\Q..ttt.
(~~U'~) jj~ ":'!~

jM c.-.srz... ~iii..SI "f'J
~01. .~<-:_, ~-'6.._,;;;.
<f'ON'I ~-~,.OI~I
C..~.AD-~ 1.
>>.~ .~I.. .t..
~-'6.._,;;;. 11\.L.0Jlbjo-'6c.- j
!>j.I<-11\...
EytdropPtr Color
Whltt
81ack
-~..."V\..t.
":",j~ 0/{.J
CDr~,,), .OI~<
IU'I~<-~
+WZ.0~"-'6.._,;;;.01
-'6 t--:-11\..!_ tU..W..
Muymoky,
kak 3m 6m 66-mu?
SS-
index. html ?
- .
:
</style>
-"'t< ~n
Oot
"'- """'.JM"'!
";.<.
c--t...o-~'li\.~ ()\(.0\ ~.g~b""-(.. ~.~

--1 01 ..."Lj t\..t..UWAI '1.AOI.g .t "- ""-.~
.g..."\U....(,~ 1.. ~jroat\.0 I"OI~.t..--01.
"j-t...><.
cmao6ka 6m nogo>kku

Photoshop Elements Matte ()

Other (), Color Picker
'~wao--~1"01""-~ "j-~,;j\l.-1... (\11\. ~... )(""'
Color Pcku
Choose color:
Help
~ s: "
Q B: j100
1"
O R [2SS
: f2S"5
: flli'
-il FFFFFF
Cancel
8: f
Onlv Web Colors
;~
.1~ 1-'..L-~ ~~
.J)
( ).
.g~"OI""-b I,~ 4'0~ _../"I1
"'-w,L '<!:lttl- j~
v - 1 ~ ,J...--2.,
""'\.L- ~\ ':'/01 ...
LW j~L-
11
Ycmao8ka 8m
nogAo>kku, npogoA>keue
, ! eafda Color Picker

( ). , ,
myPod.
h color.
~ ;..,;;;;~=)
@2.
o s fiOI"
f9s l"
o ~t f.2341
Q c,fl
o" rl
Only w~ CoJors
mu A02omun nogAokoii
.
, - .
myPod , ,
.
..'\. u.:ii\.Dic... ~11t.
~'\,....,;;;.f'\11.,\u- ~. ow..w-v~/ ..
jDI~'\....t.r .. v:;~.._,;:;,. ..,..j?I.'\.
~.._p.jD\..:. .. v:;~..:... <f'OI\.D\
~~-C.....I"D\~!11. ..".~fool.l..t.l.
234
u o2omuna
,
SaveforWeb
( ), ,

mypod. gif.
Sallt!
Save s:
optJmzed ~ 11"rotr"'...OI
II!J
'rnypod.gif
1'.-{S.;:;.o..DI;;;\A.f..!At,V\.
h.()..t,.t\.~ r"'v~'VI.f~
-=-= - --=--'-----"'-'
:)
.g ~\. <J'OI1.ol
Ctt=f.
Co)(r"-1'\,.~L '\1\..jo~r"'~
....Oj
tUII
t-UIIj.g"-~ ""'~l"oofj{
-f> """"'~~ lojo.
66u o2omuna 66-mu

, ,
myPod
myPod. ,

iPod.
, ,
.
<html>
<head>
body 1 background-color :
</style>
</head>
#eafda;}
<d>
<>
<~. a~"logo/JD.YPOd . gif'" d~"Jloro'l'D d"> ~
</>
<hl> n
</body>
</html>
myPod</hl>
~ 3j.. ~_jj.t... ~~'<.g~" i'.~ \Mlr

Ij"' 11\.j <J'OI'1ii.01 i..../V(.I.t.,.,/.
235
menep noceguii
gH
mecm
n !
n, md-
n
GIF n n.
my~
::k'Ii m~Pod
., )$/'Q>Cr-..~on I'J!I r;.c::.r.l>:oc-.xa.at-.-.-111/~ f o~J <jep~;.:J&1~'t.... r.a"Jiu 8P)(tiiiUiil Xo-Y'If'h:
;JMIVI Ji'" {"' Hyi:C'h J,;J<" .lf'"oi ; .P'3!1ItA .. r.r )"<)6 cpt88 .
ne.~.t.J:n~ot.t'~,._ tt" JI.Utt'"
('.ut <f C.tt eJO;t )1. K .. .t\otot;"'\.oiiC
:&.I>II) .U:ell:\X-4'0 J-~ t. . . ~8Ati' I:7'1J"f
n.'- .."nt] ,_-,.
lltt. ~~JC .w.. ifoot'IOC+o"t tpVJ'j''l> tf!", i!'O.J~Jin61t~?.111 We:vt:- WICW t,.'J.e:.tp~~:
l!
'*" ,,...,. 'ltO! :tt"."'l. .
~;! ;.?d 1;n,. to:~9 It' ~ ,:tcn:
. n
~r, ~IITJ
te
II!<."n.Y.~ ~ t ...<'f'qt ' Eupxaar~. ).(w ~ ~.c.1p~.UCP ).l!lt.... ~ ...._"'" ~~~

tJ.\:IO &rtnhratr IO.tM.1(..Cil'tecJ.ICe &r)~hJittJ'Ie tc:pJ.tKWt tent~fjXIe 'l'.:t:' rt
f:<I!N-ae~)<r: n.-.x
n.
myPod!
236
Bonroc1
lj: - lj: r n?
, -?
0: . n - 0:
. n n (
. - -
n n) ,
, n ,
. n Matte () n Photoshop
, n.
Elements n ,
n , n
. ,
, , .
lj: n ?
lj: ?
0: n
0: , ,
n .
myPod:
myPod n .
myPod
lj: n
-?
myPod
0: ,
: - ,
, n, n ,
n ,
, ,
. n
no
. n
n n, ,
CSS.
n , .
n , ,
n .
]j: , ,
n?
0: ,
. , n
, n n GIF, n
n.
Jc:; . .f:
237
'
<imq>,
-.
<imq>
HTML.
n L- - -
--
72 120.
n -
. ,
n .
<imq> -
GIF -
JPEG n
GIF
n n .
src -
n .
, n
src,
a l t <imq> n . -
GIF n n
.
- , , ,
, n
-,
800 n.
JPEG
, -
- -
, URL-apec.
. -
JPEG
- ,
Photoshop Elemets
n GIF-
, ,
, , -, -
Photoshop
Elemets
Save for Web
Matte
( )
( ).
- .
, -
-, <imq>,
<>,
h ref <>.
'
nft
: vm .
, n
.
JPEG
o""'Olf"'<JYW! .. AU-U>~.go.
81CIIIIU 1'11
JI[CII*AIE
GIF
o....-.~.g .1!.0.
@ijj(e)jl
1>c..u.o 1-\.UA)AbiGO "j.gt.W,rfl,

1. ~.~i. o....-.,..~OIC- .;;;.uv
~"'i 01'\.f'~t...l\.t..tUW Ctl=f.
D
D
....-. "'\)O~rM.t...I-\-11\.L ~oj~c...s1
.g ~0\t\..'\1\,t\.. C..O~O.s\t\..11\.11\,. D t\.J.....

1.~~.-.s1 AU-U>~t...c-W..go "j.g~o.g
1. o....-.....-.U\.1(.()-g U'VEGt)1 t\.0 :J_ +-\.t..:w
1'\.f'~ -u..o~F1J\ (CtiF) 1. .g~
VIGOfiL.gC..U.O{ JO\)(O....-.~t... ~bjO

.gOI,;;;.b 1'\.f'O,)fti\t\.O~b (Ct!F).
239
~<~
~
Peweue
n ( ).
. .
, , ?
? , n
L-. ,
URL-apecy
http : 1 /www.headfirstlabs .com/tri v ia/penc i l . gif.
<htm.l>
<head>
<titl> ,
opoc</title>
</head>
<d>
<>
?</>
<>
<iaq
arc="http://www.headfirstlaa.com/triia/pencil.gif">
</>
</body>
</htm.l>
s , npocro_s_o_
np
_o_
c~-----..."
~ flle:f{{chapS/tr~hunl
JCaJCoii
:r ?
http://www.papermate.com.
n , <<
. n n

al t, n ,
n .
? , -; , ?
, - ,
nft
, n ,
, n .
L..
J\17
~ .d<.
Pencil n 35 l))l!es long?
& @):~;.".~
)?
lil
t.__fv~
.><;,.,/f
151"'\"lY:f =fif'>\ "1'v >~l"~01~ ~U\..I01,f~~,01 01/}f> f>\<\jL O~bl.+WW ..;;;.uw.;::,OI{ LV'\.
1'\J.....gOJ..ON> 1..;)f>L /"'\.".jN>.
.~/"\01~3~$,
(V\/)\c.,
3w ~ .
f" n
.le.l/ts'rlafJ- -4 .,.
.
---
((0~(,~~
~;':)~U>>
1..j0~/"t>..L
tr'v1./ 01 /".1\j ..
(.,
fie:/1/C:/5/>orpen.~
tr'v'\...-
~r.
~
~, ,
r--
SltrroNows. ces for C$S
n n
--
!: flle://{sharpen.hlml
SePoNows:
--------,
.ces for CSS
Penclllinc 35 miles long?
,uw.;::, 1..j
t>.W./"~.j.OI
' i\1<1 ~
J+fi..g (V\~>,c., 1'\J...
01/t.
~~ 0\./"'\.
~.j. t>./tj. (< .

@!! Pencillinc 35 miles long'?
- ~
Done
fV\01c.,
t.._fv)
/f
,t>,~t,LO.O~fi>.~~
".j.vf>.j~W<
1"'\.(.,~+\.IW:g.
~-------------------------~
3~\(, (<o.c.,.j.vf>.j
~L1..0>> 1()~/"01U\..1./
~ /".1\j..- ,uw.;::, "$
~.1"1.~..t>. 01/t.
241
ynp<~>+meu u
}>
ynpaenft
""1
t j01~'\.11.
~"' :r\3~-~t..V>.e".s\
>.~~f-
JPEG
1"01~
JPEG
1121<6tim
41eekyga
64 1<6tiim
24 kg
JPEG
30 1<6tiim
12 eekyg
JPEG
Hu3koe
18 1<6eiim
7 eekyg
80 eekyllg
GIF
npuetemet
2211<6tiim
\ "\.. 1-jt..IU.- h..Oa~V\.o CJ'tjti.J...t.. !(.t...--gz H.t.. oa.!ljOI""'t.Jtb..O.bt..t-jOI~'\.C-'\1\,""' ..-:.

..-:.(1/..()1 ..-:. ~01. ~t\.0. t::..1--tS01.. ~)(j'\... 1-j()r,:~jt..i.c..v....--gV\.ot...o ~IL-0-
~ !(~~011 ..-:. ~~''\.t.. o.t..I-\D ~te",I)t... ..1-:g01.. ~~ ..-:.t (.,0\i.....-:. I"Oiao..-:.01

$"' .... 5~1"~ ..-:. ~~..-:.t.. +'-'\1\QI(.().t.. !(.;;~. M11t "6~/"0\'\1\, t-r'':-'L+U.t.- !(t..
~~4h.-0..-:.o(J ..-:. ..-:. ~'\...i..t.. e"o.t.....-:.DI+'-'\1\,t..)''$...t..rOI 1- !(.t...--g\ 1-j0d/"Dit..
+'-'\l\..ll 3.. ..gl1t-XJ.Dt~ ..-:. tUQI(.().t.. !(.t.""iS ..-:..t..j0~01..-:. ~)(Ot.. '\.II.'\11,
..-:. ~1-..-:. h.-0~11tc..V\.o u.ojo ~te",I)'LO. bc..t- ..-:. o.t..I-\D ~"J~'\1\,..g.. Ej~..--gU\..t\.0~
..-:. jO~o~t..r1 - ~l=f ~)( h..O~j'I.o jA.!I ..-:.W( "\\\,jOd/"DIU\.1A-i. (..-:. +U..~1-..g'\l\,_
..-:.t....) .
242
n n
html
n ,
, -
seattle downtown . jpg.

seattle downtow. html n html n .
n . n, .
w:..;;. \ML.....IjjOA.~ /"010~01.;;.-
<ht:ml>
~ cpoo."\i\..!u., 8U>.+t-Olow....tow....l-t.",./.
<head>
<titie>=yPod: . -88'1' Co.JJA</title>
<style type="text/css"> d { ackground-color: teafda; } </style>
</head>
<d>
<hl>Saec-~ ~</hl>
<>
<img src=" .. /photos/seattle_downtown. jpq" alt="iPod

!:'!t'">
</>
</d>
CSsec-8R'l'pe :,
.;;. /"t...3.:}.;;.OIW:. ~11W>-
.....; .;;. <(JOI'Iil.. ~ t\.0 ....-
~'"'j"
~~- .....~ kf..",.f
'"'"'r """"J"'-"" ~
</htDl>
.g....,..._""':J:'""
/
~ii ~ep"ttt.r 11 11:t
~
,
<h2>,
seattle. jpg index. html.
</h2>
<>
iPod
628
</>
<>
<img src="photos/seattle . jpg "

</>
alt="Mo
iPod
" >
C<><>Y}).BeY}).CY}).Bue
})....n
HTML
HTML?
L-. n CSS
? ,
HTML
, n

HTML.
n,
HTML, ,
, . ,
, n .
? ,
( n
), , , ,

n .
CSS. ,
n n
n.
n n CSS

Head First.
,
L-.
: ?
: - ,

HTML.
: L- . ,
. .
. ,
.
: ,
. - ... , .
: ,
, , .
, : ?!
: , .
.
: , ,
.
: ! ...
: , : L-
, , ?
, ...

HTML,
,
.
: ?
246
u;:r:
r,
: (,
Internet Explorer, Firefox Safari)

HTML. ,
, ,
. ,
.

CSS,
HTML
.
, ,
HTML,
>>, ,
.
:
,
3 , .
, .
: , .
? L-?
: , , , ,
, .
: ?
: , , ,

HTML .
: , .
: ! , . ,
,
HTML .
, , ,
. ,

CSS .
.~MO'JOWO~
'15:JWl''1PM
-, L-
. ,
-. ,
?
247
html
Ucmopu pa6umu HTML
1L 1.0-2.0
IL4
...
, ,
soft
HTML,
,
HTML.

- ,

.
,
-
(, , ,
).
Netscape Micro-
. , ,
,
L- ,
-N.
,
L- n
, .
(CSS),
,

. ,

lntemet Exploer.
248
1995
(HTML 4.0)
- -
n?
, ...
(
1991
, ?
: Netscape,
1989
( W). -
HTML 4.01 ).
1998
~>.~ v-- .g w.o1i\..1..1Lt:>.-& h.Oj!U!W'.bc.-.S\ 1'\ t\.().gt1i\.. ,)/"0-g-U-\..

11\- 1'\\W'. 11\..C..DbjO.gOI.W'.b tV'\l... l.f.0/1.
;;;;;::::::==:::=:::::;-J
IL 1.0
fL4.01
. .
HTML 4.01
, , ,
1999 ,
, 4.0
HTML ,
XML, ,
? ,
n .
: nn
HTML (
n ),
HTML4.01
n , , n
(
, )
-.
XHTML 1.0.
HTML
XML.
,
.
.
L-,
n XHTML.

.
249
, n.
.n 6
Head First:
, ,
. ,
HTML
HTML?
. ?
, . L-,
. -,

HTML .
, -
- ,
.
HTML
HTML
, ,
.
,
,
, ,
?
:

- CSS,
HTML
, ,
.
,
-, .
-,
HTML?
: , .
,
-:

HTML,
, . -
250
HTML, ,
n'.m ,
HTML,
Head First:
HTML,
,
. ,
HTML,
.
, ,
HTML?
: . ,

HTML,
, .
, -
,
, ,
- .
Head First:
Head First: ,
Head First:
: ,
: ?
. .
? ,
Head First:
Head First:
HTML,
L.
Head First:
, .
: . ,

HTML
, ,
.
Head First:
. , !
>k no3aomumc m, m 3 un38u

pe>ku mu coBecmuocmu g awux mu!
, : L-.
HTML 4.01 , !
, ,
( ., )
, .
, ? ,
L-. :
<!DOCTYPE HTML PUBLIC
" -//WC//DTD
HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
, , , , ,
, . onpee.rnil.At
11.., 11...
- L-. n ,
, .
, , .
1>~;~. ..~t.. W'."'-'-., W. ~c-t.. 9,;;::,0 ~ Oj~
L-
.
1> .;;;.1.. ..w\.~/"~-
- ~ 'f'~~)'
\'0"0f ~ -:JJt.J.)O
w. 0-.,W\O\t...w.f W.
~~
{<./)
"'{'
,".~.,
.J '
'"!J._.,..y.'V' ~
.f.W"' ..J
-v
~'~~'-
.f.~ jp.Jo j~ 11\.
~'f'~~
\}
""'01
,
I.
..L-
~ <v- . > ILDt\..t..~o1.. (.....u.~~;~.1..)

'
~-
-,
~ ~0\~,. vw.".D\-
.;;;. "f'ov.;;;.o OjW'.-
-9./ .;;;. t. w.---.~
1.
t~
"() 11\.'\1\./ U...

.... L
.._.,UI.~
01UJ\. ~wL
.
~,
)(.~-, 1"
W\ ~w.
:S
..
-~~;~. ..
'-6'\1\.;-i ""'
oo.t...w., W. ,.;;:..~-
~;v~., \L-~./1
$V){._ ~ .0/1
J.o .... ::.,9. 0t)I.t.Ao-
1. "1 1 1 l...rfO\j~IU'I ~- f V biLD !I""- ,;;;./ W.

""'\.1\.VD\~ ~ D\+<..1..1l1..1..w. 40
.
jOI/",;;;.
l:>J...., ...... ~
v,;;;.J~
u ..J
Lrr"(V)I
0\"2,f!j000\t...w.t...l'o.D\\"\J...-
~j9.W.o ~ IU'\~1;\.4\C
9.ji1.t..
-----..:.J- . - - -
<!DOCTYPE html PUBLIC "-//WC//DTD HTML 4.0 1 Trans itional//EN"

"http://www.w3.org/TR/html4/loose.dtd">fi:;:-
\__
;71
~ 0\W.'\1\..t-~~~- 9.;;;.
:'1'
- 1
Ht. ~ \(.;. .-..t..
v'II\...-~ODI << <> ~'$ ~t..w. v~~
~ <~ >1. w-f>or"\1\..t ~DI-r
"'"'
,\.__
.;;;. j~U\L ,j".DDj~DI~ ~
~{ ILDO/"I1.. Jc,.;;:.D\~~'\1\.~D\~
ovot)I,. v.;;;.DI"jDII"""
LfJW.:;:.!i'I/(.L
...111.
0:2)
r"\.-
-.. 'oo,A.U..""'t)
0
I>jf w~
.;;;. ...;;;. ~._
251
htl, ti tn<.: ; 6ol'"ff.:l:na
j1
:oJlfoCt
]j: , , n ]j: - n :
n
HTML?
HTML L,
n L-,
, , n
HTML 4.01 .
- ,
L.
, , ?
0: , . n , :
HTML 4.01 >>. , nn,

, , n L 4.01.
D: ?
, n

HTML 4.01
no n
0: -
]j: , , n HTML4.01,
, (
0: n,
CSS
(( } t ?
HTML 4.01,
. n ,
, -
. n
]j: ,
?
0: n ,
. ,
nr, n
.
D: ,
HTML 4.01
- ,
HTML 4.01
]j: , n
n n ?
?
0: , . ,
: n
, , , ,
- L,
. n
n . ,
n D, - n
n , n
, .
0: ,
HTML 4.01
D:
]j: , n HTML5?
0: n. ,

XHTML
HTML 5
- n,

HTML 4.01, XHTML. ,

, - -, n
, .
252
transitional
n) . , r
, n --
XHTML.
, -
.
0: , .
, n.
DOC1YPE
68u onpegeAeu muna gokyema

, D
HTML.
(, nr)
n n doctype.
txt n chapter6.
- w;;.ro~."'OC\(?E..
11row;;.ojO~O\~b>.t... ...
<!DOCTYPE html PUBLIC "- //WC//DTD L 4.01 Transitional//EN"
"http: //www .w3.org/TR/html4/loose.dtd">
<ht:.l>
~ ....t... t\.\ <fJ011..DI
/o~IA.t""'/.
<head>
<titl>
Head First</title>
</head>
<d>
<hl>
<ilaq src="drinks. gi:f">

<>
< hre:f="everages/elixir.ht:.l">a</a>
<m> -</m> .
</>
<h2></h2>
<>
Webville.
< hre:f="directions.ht:.l">yaae</a>.
</>
</body>
</html>
Head First</hl>
mfla
Tecm g
lounge. html
chapter/ lounge
".
ntt
254
directions. html elixir . html.

lounge. html,
( ).
,
n.

D,
.
.: , . :
D ,
HTML 4.01,
, n .
. ?
: , ,
HTML 4.01,
HTML 4.01.
.
, ,
.
: ? ?
iU(: :
,
L-.
, . ,
,
. .
: , ? ?
: , .
,
W3C.
: ,
HTML.
,
?
: , .
~
255
htm/
3km W3C-8aAugamopo
n .
, http: 1 /validator . w. org .
Vlld8te:
h1s
is fho
w amup
Valldlllion
docnents
SNio,
11
fh8t Chcks Web

for conformano 10 W
frr srvio
/n lormlJts 1/ko L and L

Rocommendtions 8nd ofh8r standtds.
URl
Flle Upload
v dl~t tnpu1
) .-1. c-.rfJ\t'>--~01 ~~'\1\.V:"

.... .gl1t. ..~t..\f-.0
Validate. Your ark:up
~ ~~
Address - - - - - - - - - , - - - - - , - --
""'--\""'0\""' I~Oijru-~U)ol
( ~)
En:r fle URL of lhe page you want ID chedc. Advanced options ere
aWJiable from the
Exlondood..,~.
Se!ec:t \he fiJe you w8t\IID upload and chedc. Advanc:ed options ere aYa~laie from lhe
E.c1end.ld 1'
Uptoed lnt8r:e.
Note flle uploed mey no1 w with lnlemet Explorer on some ver&<ons / Windows
S.IVICe Pack 2, 888 our nfotmaon page on lhe WSC W$118.
~"'OI""'b ILA-\.0~~ \.J. 1, -:
~~ lfO'tfOI~ c-0\..DI 1.-
j~ ~01~ ll.Oj 1, ~fO~Lf'~ UO.

(2.) 1>111. ..~ 1-\.I..-.
~~ CIN><>Jt-fi/t.. (11ut1.
1>fOW.st.r t..-'\1\. ~~
\,Ji....o/ow.s) '\1\. .g~r01..-c. ~1.
1-\. t...U..~~-
11-t.. ..-.
1-\...~~"'--"-j Cl.uk,
1, ,.~ oDI'Zf,))~ ~1.
lnpul 111 mar1<up you would llke 10 validate in lhe text area elow:
0n1y c:ornPIe documents {along wilh Doclype declataton) will valida18d.

Adv11nced opt>ons 8t8 avallie from lhe EJclended Direct lnput lnt8lfao.
256
-.gfJI~ IC.O.....IO~fJI 1-\.
~01~1..1 01 ur-~
lfO'lfOI....OI ~fO.g-tr'\1\...-c. UO.
(3) cll.0..._111t>.?::..-c.~ --1.. ti.Oj

1. -~01-..-:-.t...g ..-.~ 4'f>r..}
301-..-.t.... M..~t..I(N)~
~ 1, "':f'.g~ lfO'lfOI....t>.
lf~~ .gOI~ L
BaAugau 2ocme6ou Head
First
lounge . html. ,
n (3)
, n
html
.
n L- lounge
...
- W3-. n
his is lhe W < Validation SSNice, s 1ree service lflat

checks Web documnts in kmnats 1/k HTML snd XHTML for
confonnsce ID W Rcorrvnndatios snd othr stndards.
Fll Uploed
dl-1 lnput
VaUda te You:r arkup
Address: - - --
- --
- - - --
- (~
Eter the URL olthe page you wat to check. Advanced optios are
ava/laie
from the Extended lterface.
Select the file you wat to upload and check. Advaced ~s are
availaie from the Extended File Upload lnterface.
Note: file upload may not worl< wlth lteret Explorer some verslos of
Windows Service Pack 2. see our inforrrnto page the w
Website.
1>1:11. ..~ W..j~t"'-

t.)~ {11) '\I\.JI.'\. (3)1 u-'\.
~\ ... .tl-:JjO~ t\.1.1-.
d
257
alt
m, n
- .
, .
, ...
Result for lounge.html -
Result:
Flle:
Encoding:
Doctype:
/\111. kfO~O\.J\.11\.1\.W..
tU)\
~0\.JI."'6"~11\.'\,.
~~c-.S\f ,u...;;;.
0~~""-
Cher. . , Encodlng
Markup Y..Jida.tor
Failed validabon, 1 error

lounge.html
utf-8
HTML 4.01 Transitional
Foundl F8111ng k to lm'-1.
1was not to extract charecter encoding labeling from any of the valid
sources for such informallon. Wlthout encoding information it ls lmpossie !
relisiy validate the doC\Jment.l'm falling back to the "UTF-8 encoding and will
attempt to perfonn the validation, but thls is likely to fall for all no-tnvial
documents.
Read the FAO nlry on charact&r ecoding tor more details and potnters on how
to fix this probiem wlth your documenl
This page is not Valid HTML 4.01 Transitional!

Below are the results of attempllng to parse this document with an SGML parser.
18 Une 10 column 28: required attr\ute"
"
not speclfied.
<izg ac"drioka.9i!">
_ ____._
_."
h atlrfule ~v&n v
For lnstance, '" most lfi'L
scripl' element and the

Typloal values forty~e
for <S<:rtpt>
thal youve used, ul you have omil1ed it.

types the type' ai\ule is rqu.red on the
ror lhe mg eroment.
for<sty1e> andtype"text/jovascri~t"
W n
-
l.fI)
n.
W -
m, , :
.
,
~
.
258
?>. tU.. ."\(. j u,;;;.l""~- ~t..-.s~1

~ \Ml... .0/1 .t.j t\Jit
~.ll.b;)O~G\.b ./"~j. "ft
~ ~.t... <i.j>.
UcnpaBAeue mou owu6ku

, .
al t <imq>
HTML 4.01. , ! lounge.
html, , ,
n .
<!DOCTYPE html PUBLIC " - //WC//DTD HTML 4 . 01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<titl> Head First</title>
</head>
<d>
<hl>
<imq src="drinks . g-if"
alt="llaDw.rJC">
~ 1>11t~~.)MI(.O.t .. """"-1"1.
<>
Head First</hl>
'5<i""->.. 01/t. Do'5DI-""-t- LW
~~(i""'j>.
< href="elixir.html">a</ a>,

,
<m> -</m> .
</>
<h2></h2>
<>
Webville.
,
< href="directions.html">yaae</a>.
</>
</body>
</html>
HTML4.01
alt?
259
JJtml
..
:~, tentatively valid HTML 4.01
Transonal, .
, . .
Reeult: -..
~ !;sed val1dation
File: lounge.html
Encodlng: utf-8
Doctype: L 4.01 Transitional
1> ~-c..;;;;rO\+\..VI..'Y'
wc..;;;;...:~o1.. .-'~
1was not to extract character enooding laeling fom any of lhe valid
sources for such infonnation. Wilhout enooding informabon it is impossie
to reliay validate lhe document rm falling k to lhe "UF-8" encoding
and will attempt to perform lhe validation, but lhis is likely to fail for all nonmvial documents.
-"\+\.0 .U... \U)\\(..'\1\.t..--"\ >
11\.fo~.A.t...L1!r N> -"\ -_.
-"\Oji-\.DI~~
Read lhe FAQ enlly on character enooding for more de1ails and pointers on
how to fix lhis proem wilh your document
)(.t.. 1-\.D\ -"\ -"\
t..L<'\11.. !. fi...
i
Of h Day:
GIForPNG
uploaded document "lounge.html" was checked and found to tentative/yvalid

L 4.01 Transitional. his means lhat wilh lhe use of some fallback or overide
mechanlsm, we successfully performed formal validation using an SGML or XML
Parser. ln olher words, lhe document would validate as L 4.01 Transitional 11 you
changed the mari<up to match lhe changes we have perfonned automatically, but lt
will not valld untll you make these changes.
11 you use CSS ln your document, you should also check it for validlty using the W
CSS Validation Servfce.
, L
, , , ,
- .
, , .
11\.fo~..t....:Jt o.__'\1\..~~~~I-\.D\~
IML.c..;;;;OI~
-0\~t\.t...
, n
,
,

1was not aieto extract character encoding laeling florr any of lhe valid
sources lor such il'lfonnation. Wilhout encoding inlormlion it is impossie to
reliay validte lhe documenl l'm falling back to lhe "UTF-8" encoding and
will attempt to perfonn lhe validalion, butlhis is likely 1D fail for all nontrivial
/ 1
~"' rs ,
documents.
. ,
, ,
.
: ?
<< , << . ?
: , , ,
? <<

26 ,
: , .
? .
.
: , . , ,
, , ,
?
"' .
: , ,
. ?
: : <<, ,
,
- !
,
. ,
- <t>.
.
: - ?
, - ,
.
: , , !

<meta>
.
~
261
<meta>
68u me2a
< meta >
g ngu muna kogupo8ku gokyema
, , ,

<meta
<meta>,
http-equiv="Content-ype"
c o nte nt="text/html ; c h arse t =wi nd ows-1 251 ">
< head>
L. r , .
r <meta> .
Mt1L vo'S~i~.fDit...-t-.9. jOI.b

t..-~ 'S~ ~f..
~'\11..'\11.. ,~ IC-Ojlil.f'O~
D OI.f~~.t. ,.,;f1....._t .t
jOit..- ~f.P.~'\1\..IO .'\..t..
IC-Ojlil.f'O~\L'\11..j~.,.uuOI.
~'\!\..jO~~~OI w;;,fOI..._~IjL
0)1
Bo:IfoC
]j:DOCYPES, r <meta>...
n, n -?
0:
<mela> -
n ,
Jj:
Windows-1251?
0: n .
WD-40
npenapaa
n n n).
: n
, n , n
99 % ,
n -, . n
n .
n n L-
n n. ,
Windows-1251 - 8-
Microsoft Windows. n -
<meta>
n n ,
n. n n -
http://www.w.og/lntemationai/O-charset.ru. php.
<meta>
262
.;
OcacmAuBu
BaAugamop (u 636), go6a6u6 me2 < meta >
, , . n
(<mt>) L.
lounge html:
...:. ...:.L-z.. <or.tt::/'01.>.
(V\11(.jO~OI..g11ut1-\. ~
.g'YJ...:./" ~DI.
<lt..OI.ol> "-'-f'j ~
<!DOCTYPE html PUBLIC " -//WC//DTD L 4.01 Transitional/ /EN"

...:.. <-h'v.
"http : //www . w3 . org/TR/html4/loose . dtd">
<html>
<head>
<meta http-equiv="Content-ype" content=="te xt/html; charse~--windows-1251">
</head>
<d>
<hl> n
<imq src="drinks.gif"
lt= " J">
b..1jOI. "'-~~L
<>
< href= " e~ixir . htm.l ">a</a>,
n n
( )
</>
<h2></h2>
<>

Webville .
,
< href="directions .html" >yaae</a>
</>
</d>
</html>
? ?
,
.:J c.w.ro~ "''
.g,. f>~""'r'"" L
~01. <\;u.OI.ol>.
<m> -</m>.
n
..d.J.t</hl>
lounge . html,
. ,
: . n .
m~Ja
meta
2 6um mpouy?
,
W3C
1 ounge . h tml -
http : 1 /validator . w .org. .
L- ,
URL-apec: .
,
Check.
Result for !ounge html- W Marup Ya~dator
bt'~A"'jt'I~W\ "'f"O~t'l
j~, .gl:!t n..O~t..
j1.Il1.!
Result:
File:
Encodlng:
Doctype:
Vt\.l:!t"\. ~-....
\<;ot'l
Tip 01 The
:1
tounge.html
windows-1251
L 4.01 Transitional
Unonlered fists: more than \uat bullets
O~OjiWIt'IA ,;;;.-,;;;.
.__o><Ot-r j~W~~I
~"\_ jOA~U\
w-o/'1.,;;;.b( .;;;. -c.-t..
The uploaded document tounge.html" was checked and found to valid HTML 4.01
TransitionaJ. This means that the resouroe in question ldentified itsell as "HTML 4.01
Transi!ional' and that we successlully performed lormal valida!ion using an SGML or
XML Parser (depending on the mari<up language used).
)(0/"~.
l<.o..l(.. .t. 1. w-or1.Il111-r -&~. ~/)\-
!
,
,
HTML 4.01. ,
n ,
,
n .
1. ~/"Oo.j)>j (1. -MV\jt'I,;;;.O/"j){
,;;;. w...,.~t.. IML.!.f.0/1
1ft'\~.h..,/1 1. ~-11\.t- .-..1-j~
t\.D-~t\..1..;;;.-"'j~~vuo.
, ,
transitional.
? n
HTML 4.01 ,
DOCTYPE,
1,
HTML 4.01, r,
D, - r
nr
n r
r.
, -

HTML.
HTML
4.01,
2.0 3.2.
HTML 4.01 Tran

sitional D- n
n , -
HTML.
, ,
(,
n, . .),
n ,
n .
, <<
HTML,
n , n
,
n .
-' <!.i ' ~ ..;;.; '
265
, ,
HTML 4.01 Transitional

DOC1YPE JI -
n HTML
HTML 4.01.
?

n ?
, . r.

. :

HTML,
,

. ? , ,
, n
DOC'IYPE,
<rneta>
al t.
HTML 4.01,
HTML .
n
,
n .
266
. 6
n, n
HTML.

D ,
n .
HTML 4.01 ,
D.
, ( ) ,
n , n

HTML . n
n r, n
D. ,
:
. c...rO'tA.SI ..gt..r'-'WI
~
\ML.!f.O/l1)0C\Y'PE.
<!D
html PULIC "-/ /W/ /DD L 4. 01/ /EN"

"http://www.w3.orq/TR/html4/strict.dtd">
D ":j--'_..gt11:1..1t.S\j~ O.UU:, "-)(.t.
transitional,
URL,
HTML 4.01. n DOC1YPE

267
html-o
U3u nepexogo2o D
cmpo2uii
lounge. html .
r, DOC1YPE: Transi tional

URL loose. dtd strict. dtd. , ,
.+..J\.0\ ~.1...t.. -..g
\foo."'-<51'/-101'\..0\J_
<!DOCTYPE html
PULIC
"-/ /W/ /DD
4. 01/ /EN"
"http://www. w3 . org/R/html4/strict.dtd">
<html>
/._
3..t... 7..0\~.t... }oo.su>ltol sr;;c.-toltol.
<head>
r~
v
<meta http-equiv="Content-Type " content=" text/html ; charset=windows-1251 ">
</head>
<d>
<hl> n
<img src="drinks.gif''
lt="">
<>
< href="elixir.html">a</a> ,
n
~,
<m> -</m>.
n n ~
</>
<h2></h2>
<>

n,
Webville .
,
</>
</d>
</html>
. ,
DOC1YPE ,
, ,
HTML 4.01 .
, , ,
.
Head First</hl>
g Baugauu npowa ycnewo?
~ Markup Valldation Serviceva.1
Reault:
File:
Encodfng:
Doctype :
'\.-'\.-'I.1 t-tU){,I>. "f""'~'I.
"'
uploedJIForm Sumtsslon
.J)
~"1:) ........
,-tl) 'r'IJ)
;:.{t)
.;;;.- W.o ~ ml>."-
ull-8
L 4.01
Stna
~.......1 ~j~~
~.gM"IIIjt'\. ~ """I"O'UI\..
"'f'"'.g'\1\.~>...l 1'\D ~t....:/
Line 10 cc/umn 41 document type does not aUow element " IMG" here; mlaslng
one of "P", " 1", "2", " ", " 4", 5", "6", "DIV", DDRESS" at8rN8g.
"*"--'- ""'
-10-.,
ln""""'
_ _tnll>eody..-INII118ocl>-111elll>d""'-tht-'
INt """'""'
yt>lve ~~ t h e ,.,....
:::":."':":~~ lh8l you noed
ac:ar(""""''-.-, <~ lhll )'OU~8 fDt!/011."
D-.'I.~ ~....;;;.r1...
>O~~"\IU.. ~ o~~ld..." \:\
........1 ...;;;.r..~ t-f"ML~-U
~"'.g~c.... .;;;., ~t.. .l1t ~..t,..(,

m'\1\.'\1\. ~ <i....j> ..
One ~-"" ".. ....IQO. """ you """" ~ 10 pul lo<k- uc.f'
l "> 01 C!.8ll:lt8>1 .,.... art....,.. 88rn8'l (luc:h as <&> ~. '"'~, ot <font>,_
l"t.)(Ojt'I. m
1-\.L r;;w... .
~ j)..l>.m1 .;;;. {, ...;;;./"..

1ML 'IIIQ...t.~-~..'\1\.'1/U.- "'f'"'~
-~...;;;.'\1\.Z

n
n , n
HTML... n
?
269
html
, , .
, n.

HTML 4.01
. n<
~:nr?
: . , <i.mg> <d>.

HTML
, n
4.01
n .
~: , <iq>- .
: . n. , ,

<img>
, <>,
~: n, , n
. , :
<hl>,
<>..
~: .
~: n . n,
<lockquote>. , ?
~: . L
4.01,
n <iq> - .
<lockquote> n ,
.
~: , ,
, ? -
n <<n >>?
: , n,
n.
: , - , n n
?
~: . , .
.
. .
: , n
. , ,
, .
~: n . , .
270
UcnpaBeue owuku >kmu

, ,
HTML 4.01
>>,
, ,
, <> <hl>. n
.
lounge. html
<imq> <>.
PULIC "-//WC//DD L
<!DOCTYPE html
4.01//EN"
"http://www.w3.org/R/html4/strict.dtd">
<html>
<head>
<met a http-equiv="Content-Type" content="text / html ; charset=windows-1251">
<titl> Head Fir s t </title>
</head>
<d>
<hl>
<>
<imq src="drinks . gif" al t="&'l'I">
1::---- -r.:
Head First</hl>
<
.1 . 1 .:J.. ~D\'t.O"""~I-\D
"\11.-...0cJ/"D\~'\i\.t.- Olf1~j' \
v
v~....
-.( 1" >
io~uw ~~l" ..t..J..U
</>
<>
< href="elixir.html">a </a>,
?,_ -.t\t\U... c-.rot\tt.. t..
<> -</m>.
n
(
~117 W.t\"-1.t.. l<l"- (\ ) '1.
n n
</>
<h2> </h2>
Ji
<>
Webville.
,
(tx-..)
j~t.. ~~W.c...s\ .g'"'(}W.f'1. ~t\..111)(1

l<l"- w.'1. t\~301 ~t.
!
</>
</body>
</html>
,
. ,
. ?

:Jr
Head First
-1
n - ,
n .
<>, ,

.
oamt.ctc~~.onow~~tc"
::t!U.notian'8t.a:.~t~.t'tllt.l!w~~ctr.a
o6c.:nlt"'a86oc::npo.QI'IIA..oc:,a (JCaa~c- co6ol c."IICIA ~1)

YJ<aaeJUI
.. ,~1811:8 tlett"rppt "',....._ . .... tty.CIQI ~ 'I06u

....-..~-~ ..... ~
271
ogu w cmam cmpotu

3, . 3

l ounge. h tml.
Result ror upload;//Form Submossion - \ Markup Vai!to'
W3C. Sj; Markup Validation Service
\.
YfJ.7J)
'V.~.\.....,.:.1 ..
~;;.._'Jf;.....,.:.
Oji'.DIDI.....,.:.I .
Encoding:
"1' 0-gt.r'\. "fo~DI
Doctype:
Results
upload://Form Submiss1on
windows1251
HTML 4.01 Strict
j~l-\..0.
\"" ""'""""-"'-~
CAl.OijDI ./ . <011..
t\..0\"-'\1\L-0\1-\..I'.D\ ~f'ato..
!-f\Ml.- !f.0/J.
The uploaded document upload://Form Submission was checked and found to

valid HTML 4.01 Strict. This means that the resource in question idenUfied itself as
"HTML 4.01 Stricl" and that we successfully pertormed formal validation using an
SGL or XML Parser (depending on the markup language used).
...____-
HTML?
HTML 4.01.
n ,
,
n ?
, , n
$1,
Mbi
HTML 4.01,
.
Bonroc:
]j: , ,
n - n
n ,
L, ? n
<img> ( n,
>
n.
<img> , <img>
n) : ,

0: ,
? ,
<img>
, n
HTML
]j:

n>.
nn ? ,
, -
, , ,
. n i
- n.
, n ,
n: -
n n
, n
HTML n n
HTML,
,
n
0: n.
nn,
]j: ,
nn
. n
(n,
). n
<lmG>,
<IMG>
W n,
n .
0: n, n,
. ,
]j:
nn ( ),
nr,
? ,
, n.
n ,
n n
HTML 4.01 1
: ,
n. ,
, n L-,
nn
).
<img>
. ,
, n ,
L <img> ,
. , ,
: ,
0: - ,
. D
directions.html
elixir.html.
<meta>
. ?
, , .
273
6t
Cmpo2uu HTML 4.01; nyme8ogume

r Webville.
, ?
Webville r
L 4.01. Webville,
,

. - ,
r, r
Webville
274
. .
. '.;
coomeemcmeue
n n,
n . n
HTML 4.01 n, .
<html>:
n D,

<html>,
- , n D
<ht.m.l> , </ht.m.l>-
, .
<head>
<d>, L-
.
<head> <d> n
<h~. ,
n
<head>
<d>.
<head>
<ti tle>?
<title>.
HTML n
. <head> , n <title>,
<meta> <style>.

<head>
. ,
<d>
.
n <d>
(<hl>, <h2> ... <h>, <>, <locltquote>
. .). n
,
<d>.
.
n
.
n .
275
Q1Jelwille-uyJne 8oume
110
t ~~~ 4.07
, ,
.

<>.
,

. , ,

<q> . .).
(<em>, <>, <stron g>, <imq>,
<ul>
<ol>
<li>.

-, ?
.'t
,
All 'raffi
c
blocl($
te4-ifi(le.
n.
Webville,
<li>,
? <lockquote>
<lockquote> , i
ov..! 111. tU.. "'f""Jt.r?.'I...g~><.111..Ch :;~>. 4-V'
.'i/)\1"""~>< tf /1 1 I!j/J\
~ 1..1\.l>...gt.. 3 CA>~I>.~M'I.
.:.t...W.. <iovlut'\I\.OW
j.IL \ot\.,'11\,. ~.
~ I'{J+U> ~11l.0
Vt\1)\t>..t>. n..O~~b
..g ~<r>.
Webvill e.
,

<lockquote>.
,
,
,
<>
<>,

. ,
<img>.

.J1
- . ,
. - , -- .
BoJfOCI
: <>
]j: n. , nR
n. r n
HTML4.01, n n?
0: n nr, ,

HTML, ,
. , n
n . ,
. ,
<img>
n, n
]j: n r n n
<ockquote>? n
, . R, .
0: !. n . n
, r,
n n ,
. , , <>. n
. , n
, n ,
n n n
. <ockquote>?
( n!),
n ,
- .
r , , .
no HTML
]j: - n
. n?
,
, , n,
0: . ,
n, r
? ,
n ?
]j: ,
, , HTML
alt
<img>.
n ?
, , n,
?
,
.
HTML, n .
n
HTML, n
n XHTML. nn
0: , . ,
, n XHTML .
, alt ,
]j: n, , n <>
n,
<>, n n,
, ,
. r n
<em>
n, ero n n
ero.
<em>? ?
s ,
0: , , - n
, ~
- . n,
<img> r .
n L 3.2,
r L 4.01 . ?
(n, <> )
, , .
, ,
<q> <q>? ?
n CSS (n
, -, , , -
- ).
--t
DDI'\IIjDI.,;;;;Of
277
~?i!
blml
\t r: Crpont rraiOfCA
m .
rr
, , . ,
,
, -
?
?
, , ,
-

D.
, .
?
.

.
, ,
.
, .
.
?
, .
, ,
.
,

.
.
: ,

HTML,
, - ,
.
,
.
- - ,
?
, ,
.
,
,
278
1.'" ' '' f'i
HTML.

-,
HTML?
? ,
<< -:.
, r
, n
. ,
n ,
. , ,
, r
, . n
.
, ,
.

. n,
n,
,
.
-?
4.01.
n ,
HTML. ,
n n -,

.
, ,
n
.
, ,
n ,
. ,
n , -
L n
,
. ,
HTML
CSS,
L.
n, ,
n. ,

.
n
.
, n! ,
,
.
. , ,

?
...
279
n
n
HTML. J~
,
HTML?
-
n ?
, 1
n
HTML.
, n
DOCIYPE <meta>
n
, n HTML,
1-. -
V1 ..-:; 0
U\ )(OI"o~1 ......
- ..;j . u.wt.. -~\"\.L. "'f"\11..
"-"t..)(Ojt..l(, IC.iJ\1(,"\1\...-t\..~:Jj
~ .u>.gl1t.. v. 01 ~ 011".;;."'... .
? -
"\1\...)~"'~~-. .;;. V.OI/"111)(
"'f111..~11tt..k..
n View Source
( L-) View ()
( Ji
). , ,
-, , -
, -
HTML 4.01
CSS). -
, n -
,
,
. -
...
280

HTML 3.2,
r,
. ,
,
HTML4.01.
<ht:m.l>
<head>
<titl>
Webvil le</title>
</head>
<d bgcolor="tan~ext="l~
<>

<font face="ari.al">Webville</font>
~~
w.,.,vup. ~! "I-j~
v "'-'>..~ ~\
~~
-\ v'"'-T'
1- t.:tO .../"~~.I ?...
<ul>
<li>:
<l~>:
</U~>
<
l5C.
< ali.gn=ri.ght>
Ov
Dier,
~ +Wd).0/"(11)( jDIIGj~OIIO~"\X .t..W

~ .o..ll..W< \(..0\\(.. ( //1> 1- ( 1r>.
<center><font
<
-t ... ..~t.. J'\.."~- cJt..'
16 .
'
Lou
.JJ ~
<
.JJ
\'\1\..jOI.t.. cJ.t..jj"t>O"I-1'\t>( \l..OI"t>l:11.4t.J(.
.gO"fJ!-J~-U\.."\.'\.. 0\./"~~..g.
size="sma~l">a n
Webville
50
</font></center>
</body>
</ht:m.l>
-OIJ..t.r' ~~r''"-<f>.OI ~v."'
t\.0-g.J\..t..,I'...~O~~f..L. k.f"I-.g':jt...tj.g01 ""-'VO- .g 0\Wt,.,~~.t.. .Si~'-
+'"'-+>
~~ .g111t'OI~t-..1..g01t-..V\..SI .~I.
b111t'OI.gt-..1..g011-\.t.. "'-"> hfOI-&'\.

v.orotU- "'~J0\~0\ '\. ~f'1.
ro.go....t.. O~t.AbtWLO o.f'l1tf5\l..OI.~OI.
281
ml
u nru IL-fau.. Dama
"IlfeODwn,
u.mf
'Jmo
ail:rpu u~u,
J}111<>u , :Ilo<:om_rume
m~ Kofle u ~U111,
J u u~u,
html PUBLIC " -//WC//DTD L 4.01//EN"

"http : //www.w3 . org/TR/html4/strict.dtd">
<!
<htl>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

</head>
<d>
<illlg
src="chazaerofc0111118rce.qif">
<hl> :
Webvi lle
</hl>
<>
n ,
Webville .
<ul>
<li> n
body
()
<li>Ka
head
()
htm1. </li>
n.</li>
<li>He
CSS .</li>
</ul>
</>
<>
- n?
< href="http://www.headfirstlas . com"Xe>aopaop

n ?
.
</>
<lockquote>
</lockquote>
</body>
</htl>
282
Webville -
n .
Head First</em><./a>.
n :
!
n! .
n
XHTML.
L. !
,:~,
?
HTML 4.01
HTML,
n .
n (W)
HTML:
HTML HTML 4.01.
a> <head> n -
, n .
W
n -
, n
, n -
, n -
n n
(DOCTYPE) n, , HTML
n -.
<met
n n .
n-
n -,
HTML.
HTML
DOCTYPE,
, .
n,
n n
HTML
DOCTYPE n, n
HTML 4.01, n -
, ,
HTML n ,
n ,
n -
283
ora~omau
umr
u !fU JL
faU. ]}aiila
11feAcmaum, m
u aiimu
u:u. Dom remeue
a.ua:rnor,
<!DOCTYPE html PUBLIC "-//WC//DTD HTML 4.01//EN"

.
" http : 11www. w. org/TR1html4 1str:tct . dtd">
UnPSH{'HUI'f,
<1 1 -
<html>
~
- <ltp.of>jOA~"f"1..t,"t!.e.._....go~O\W".b ~ <'htfv .
<head>
v
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251 ">
</head>
JJ
JJ
, . _ - - ../"1-\.11ti-~ 1-\.0\"f".!\..."<iiO~AO~~ ~
<d>
k::_
<
<i.mq src="chuierofcQIIIIIIerc:e.gif">
<hl>:
< Oot;'J>
.t... 0\./"~;').\ 01/t.
Webville
</hl>
<>

n,
n Webville.
1-\.11t"\_~
head
~+Vi."""
~\
v
~1>
J)
<li>
body
<li>Ka
()
<li>He
()
<r>.
html .</li>
.</ li>
CSS.</li>
</ul>
</>
<>
- ?
< href="http://www.headfirstlas.caa"><em>aopaop

.
n -
Webville -
Head First</em></a> .
</>
<lockquote>
.
</lockquote>
</body>
</html>
. <t>
directions . html
elixir. html. n n . ?
, , .
: n n
alt
<img>.
elixir . html,
] :nerexou JL
HTML
,
S
HTML? -
?

CSS?
. , , HTML,

XHTML. , , , ? ,
eXtensiie ()

XHTML.
HTML, XHTML,
HTML.
n .
HTML XHTML . , n ...
(
CSS).
xml, html xhtml
w
,
HTML 4.01?
XHTML,
: , 1t .iU! ,
.
: , , L- HTML.
HTML 5;
L
1.0.
: ,
r?
: , L 1.0 _
XXI ,
, .
: >?
?

X-Men, X-Games, X-Files, gen-X,

X-HTML?
: , , .
<< L eXtensile ()-
, ,
L.
: ,
, ?
: , , . L <<
.
: -, -
.
: , . L- ,
HTML,
,
n -.
r.
286
xhtml
makoe XML?
, , L (
XHTML) .
...
JI
HTML.
HTML
, . , ,
XML-
<cool>, "' , HTML ,

:>. XML
. :
,;;;. I)r~1-~. ..... ~~"~., 1-\L <l-t../>1 " <ftrv1 """I(.I(.D\1(.

,;;;.,;;;. )\{._,.I)j "i"~~N)II...t\..j.i\-1\ n-11\,.,~ I<(J1\.Difi-\W( f~t.......O.g.
O~f"""~ .g~~ ,;;;..g .U.:.U.. 1'\..t...QAbi) j0h.OAI-'..~t..b~W1>( 01,;;;.rWI:J,;;;.0.g/ 1>,;;;.Oftt-.gl1t ...._~" t\.L .g""Jt..1-.g ~t.. <l-t./> .g 1-f!ML.
<recipe Xllllns:"http://www.:foodnetwerk.cOZD/recipe" lang="ru" Xllll:lang="ru">

<nm> Head First</name> ~ Oto1 .;;;.oi).gj1..1\.9.""'~t..N)I v;;.t.:U.
<descript.ion>y .
15~ ~ ,;;;.uo~ <> 1- 't">l

".g...t..
""''\!\.)( h.OSf\:>1A-A1A-V <f.u.-it"t..>l

..1
<~.v <olt..si~e-/ion->1 <ift..oliP..vvl 't
</descri.ption>
1
1
v
<~eft..MOI-/iOn.> 1- ""j
<ingredients>
1 -~
<ingredient measureent=" caaoa">oa</ingredient>
\
.g."'t.I\.t\}1-g N)\ N)\<ingredient 1118&sureent= " 2 '1'J " > a</ingredient>
v
v
3
0\1-'..'\IU\ ~.g .~
<ingredient easurement= " 2 n'1'J "> a</ingredient>
_
1
j~OI..~v.s\1 ,;;;. f"t..b 'III:Jt_.v;;.
<ingredient measurement=" 6 xyoa">e</ingredient>
..;:;ort.~.~t...
...., "-f<c-..)
</ingredients>
~v-.....~
<preparation>
~ ~t, t,~Oj
~-,.....
~. f}')l:!t .g -UI<;1t_ <time duration="lO 'l' " />
v v ""'b "-DJ~t...
~~~ ""'
nloc...;;.o
<st>
. </st>
<st> ,
.</st>
<step>Xopowo
weepe.</step>
</preparation>
</recipe>
,
n n
, n
HTML.
,
n
XML?
m npou3ougem
XML -
HTML?
, HTML , XML
HTML? ,
. , ,
, , :
. VOC1'('PE.D11Lj.t... .g111jL.Il1..t...W r"~+"'-"~0'5r01,;;;.1...t... .gt\..1....O\+'v~ . u.:iil01(.., ..l:1t ""~
)(\IV\l- /). i..t..L-W.o \IV\ L- tf .0/J.
_:lii.,L/01 (.., h-Q.{\'\JL(..,.S\
k!
PULIC "-//WC//DD L
<! DOCTYPE html
"".r~j. w./tr.JI 01 .\1.(.

.t... 0\.f'~j.iil. )OI"j
1. Strict//EN"
111.. w.l :/01"6.
"http: //www. w. org/R/xhtml1/DD/xhtml1-strict. dtd">

<html
nlns="http://www.w.org/1999/xhtml"
lang="ru"
nl:lang="ru">
<head>
<meta http-equiv="Content-ype" content="text/html; charset=windows-1251"/> ~
3j.t...c." .g_ .gl:11:tJLj~ "f111...giil.Lf1 ~...t... .1 . .g "'-j.",.

~t\P.I.(.O~.t...111..~Abj_jiO.c.". c."1A.-.goiil. <</>>>. \
</head>
<d>
<hl> Head First</hl>,;
<p><imq src="drinks.gif"
alt="HUJ'l':a:"
/></>
<>
< href="elixir.html">a</a>,
<m> -</m>.
</>
ojt\P.I.(.O i.u.- oC.",OI.g~111..1i\.c.".
<h2></h2>
IIV\L-.giil."l.IL.j1.. .+\.0 .\'-'7
<>
Webville.
,
</>
</d>
</html>
111.. .",;;;.r.1. -r{V\ L- . /1 _

3joroio1)(1-t\IV\l-o.I.A--\.. h-D"><;o
t\P. -rIV\L.
1.(.0\1.(.
xhtml
- n.
. D
. ,
n
,
HTML 4.01.
.?
, , ,
L- L, HTML zL. ,
--
, , L
.
( , W3C
L,
HTML)
, ,
L, ,

HTML, .
.
:

HTML
XHTML
D,
, -
.
- ,
HTML XHTML.
, , L
, ,
.
11mv
xhtmi
Umak, 8 >ke npeuyecm6a
ucnoAb3o8au L?

XHTML
n
-
n
HTML 4.01,
. ,
L. L
rr L, ,
HTML 4.01. ,
L, , .

-

.
t....g~ )(O~~V\. 1<.0W.ol"rno - ~jj"-1"~""'

~"-~AI"+WW V\.'ZpO.go'U> c...DI'I.W.~.
D~-~bjO.g~W.t.Jtb <- ....)(l...j/"~
n .
XHTML -
, ,
, n
HTML, XHTML
HTML,
\~ vo~<......-.gU\.._
~'\_ ~'l.
~
290
;.-r1; 7
tv\~ W.t..W.1.k..-
1.I,A.tjO.g~..:;::,t.../l.b l"~~oW.~
.g
l<.f~'\.. ~~V\.~"-fv~t...IL
xhtml
XHTML ,

,
q:.
XHTML n

q:
XML,
XHTML,
HTML. , n XHTML
n n
q:
C~'I.I?\A~ I>.....t.r~
O"'jut"f l(..()~t\..~ > VOj,OIt\.WO VO"..O.g/10( ""LA.UjJol'\.0~
XHTML
n
XML (

) n
HTML, CSS
.
tv\~~v\:\A.. 1"0\Q/"0\~";;;~
k.fatr'OI~ O~u-t..U.....~.
~'1...;;;u/"
~~1. ~111..I'\.D1.
~~.11.'11\..0~'\..
291
cm!IO ''') (':
6u3ku
km,
un36m XHTML

m6 m
HTML XHTML ,
. ,

HTML 4.01 L 1.0.
mu cnucok XHTML 1.0
- mrrwl.!P : ., - ncnucox: .,
r~
HTML L.
u D L. 1::0

L
n
'
n L.
xmlns, lang xml : lang

<htm1>.
/
u
<htm1> n n
~

r </html> - n
3ju- ~'\1\-~t..t\t. "'-t..

""l"~o-~1-\.."\1\.9.1 "~W"'-r~...'I.
-~ j?IU- ><oro~ jt\.D\IW~
1o7.o..jj.IUI ~t.XOj~
..!/J...g~.. ~~
- Cjt...II.~. 1-\.t.. "'-~.. ;;

...t\Dt.O.
D,
~ --.l>jfo~.....U.. .....ow-
-or'\l\-.. 0~ "'-.. ;;"'-
" , ~z,
1
n : >.
v
&
L -
,
. .
"
&
u , ,
. .

n L
1.0 .
HTML 4.01,
, .
, , .J-J HTML,
n XHTML, n .
, .
n.
292
. '"'';
xhtml
XO'f'(
HTML,
XHTML,
\f'(fb ,
. n ..l n
nop
npenonarae,
n r
HTML.
HTML 4.01 L 1.0
. ,
4.01
L L
HTML
. ,
. : ,
,
L-.
L 1.0,
, .
,
HTML 4.01.

,
. ,
,
D.
1.0 DOC1YPE
html xhtml
g om cmpo2o2o
HTML kXHTML 1.0 3 mpu wa2a
D. J< XHTML 1.0.

D - HTML 4.01
,
XH TML 1.0,
Strict.
D, .
:
"'DOCIY'PE - . o'S~-~v.. .'\1\..-..jOIC(J~-
c:
.
<!DOCTYPE html
PULIC "-//WC//DD L
1.0 Strict//EN"
"http ://www.w.org/TR/xhtm.ll /DD /xhtml l -s trict.dtd ">
'l.3ju- U:. trz..L, ji<..'\)~0\IO~V\:I, +'I.DI .__'\.

t~..W.. IML../1 . Jt(;c..t
xmlns. lang
xml:lang <html>.
, L
( ) , L.
, XML , ? . ,
<html> ( , - L
Hippo tpping Markup Language,
n ). , .
, ?
<html>.
<html>?
xml ns
xmlns
<html>
lang xml : lang.
, L- . ,

<html> L:
xhtml
/> , >.

HTML L 1.0.
, .
XHTML , HTML, ,
HTML
. n XHTML,
, - .
,
> . , , <r>.

XHTML
<br />.
HTML
<br>,
. , <r /> - ,
.
, , , <</ >. L
.
n /> ,
n n.
n HTML
L.
HTML 4.01
wn1
,1.}~:
<img src="drinks. if"
lt="'l'">

<r
XHTML 1.0
/>
295
,.
' . . t-t ,
:: .
( ?)

XHTML.
HTML 4.01 . <img> <>
a l t , r Burma Shave <> <meta>.

c hap ter7 /journal journa l . html,
HTML 4.01 .
0
8
HTML 4.01 Strict XHTML 1.0 Strict.

xmlns, lang xml: l ang <html>.
>
/ >.
, , ,
.
3.
Bo:IJfoc
]j: l.j: , URLapec, ]j: n

xmlns? ,
- nn.
0: , 0:,
0: , ,

r , r
XML.
XML.
URL,
HTML XHTML.
1idy,
- , .
L- (
HTML-
n ,
URL
, ,
L. 1idy
). n,
, -
HTML .
L-,
. , n,
<t>. L
;
-
XML. ,
<t> XML,
, ?
]j: , XHTML

<html>,
<xhtml>?
0: ,
XHTML

, CSS. 1idy
http://tidy.sourceforge.net.
]j: , HTML,
?
, n

, .
HTML.
<xhtml>,
n xmls.
,
XHTML - http://
www.w.org/1999/xhtml.
296
XHTML?
0: , . n
.
xhtml
BaAugau ucnoAb3yemc moAko g L

W3G-, ,

XHTML. , HTML.
1'Ntllt.~IC~V~S.0..-.8ii!ICI!thlldltrc:W.
~.", Onlif,._DA..dXf'1,a. ' ~ W
~feltV*'1f!oNr~
Valklaoe Markup
Ef'll8fll'l&t.IAl.dt.P89tyOII.U.I)<:heck,Ac,~~a:.....-.;lilll:lo811Ct:\
Nf.D..dlld..,._
S....!N tle )0.1 ~ 10""C)!)!d llndc8c\. Al!!NJed aplionl; n avIIIIfe ~

N~Fa!e~~.
No-:1*~ fN!YtiOt-.rrtot\(W!fl_",.~aniO!'>'*'IIOt:l'I'IIIow$
XP~Pk?. ... cut!f'd:)l
~Ot'I .... WC:a-.W~
~d
IIUC.l~....::. - ....~~. -~,......

-~-.00)-~--t.=-.:.-~
:=..--._"..,..,_. .. _.,.,_.
-~-.
..
..........
~~~..:::r- - - - - U - . . 1 - n
-~
-------.........-~::::.:=:-;.:":,.._.
r.
'< _ _ ._....)"j,
~
....
.,...___ ..u.;.,-.-.....
Auull:
Ro;--~
En<oaJno; .....
..,"_,
Aoototnnpooce;
31
Xiooll. 1.0 S>\cl

hoi>J._....w3i>-
Nott, Th8V~idQ:)-XL.~hN8)r1118~
:I}f1
]j: , n
:
HTML XHTML?
)(1'l 1 .GSct. thla:mee1hlrtlt!el8801VC8inque:l!fon~lled l!ed asn..1.0

S1f.d 8J'Id N1 we8UDC8fii8UiyPEt"'me4 Jom'\81 ~\I:UIQ en-SGNI.OtX!'t Parr
~00
, , n
HTML.
. .__
The IJpfoeded doctmei""~ Su!risa!on W8:8 chec:keda,.'ldfound 11:>8 valid

1.80d).
~~~re:~~':n~=~::..n:.:=
tmA. )IOUOCJUid \1$1-10 8dd fQ-.con 11:) )CUWttl P*Qt;
0: ,
1 you tike. yoU can :townioed 1' im8glt pn PNG ot GF :0 10 "'"" 111 r: 11
W!'III'J~,811Cf~:hlt na.~~ tr)~,.,."::.J~'"'. .
118Rf'leotl8on'-_....
lyou use CSS "'Y'W docu!ntnl.. ;ou 8t'CUh:l atto~ i.'l tor Y811idi~ '*' N W'JC css
XHTML.
VS!~~~.
.
V\5:~~ Ylle <C.V&tdPI'Tfllfff
------~~~~~--~-------
297
xhtml
jl
n
n, n n
n .
~r.
m m luu
cBau
J1efBu XIIJML!
:
HTML
XHTML.
1, n
, L.
,
, ,
.
, :
L ( , L
L , , ,
).
, , , L
CSS

,
L- .
298
i'l 7
xhtml
L ,
HTML 4.01
, ?
, , L
,
HTML.
L , .
n, r ,
HTML.
n, n XHTML
HTML.
L-
. ?
L- , ,
, .
XHTML HTML,
XHTML?
?
XHTML.
XHTML ,
. ,
.
,
.
HTML >>
n>> n, n, n
L, n
HTML.
HTML 4.01
,
n XHTML .
299
html
t.-!
: L L
L
,
HTML 4.01, ,
,
.
HTML,
, ,
. .

XHTML.
,
. ,
4.01XHTML 1.0.
, ?
-
HTML, - XML.
.
, . ,

XHTML,
. ,
,
L.
- : ,
?iJ'/ ,
XHTML,
.
.
?
4.01, L .
HTML
,- D
<html>.
, ?
,

300
;;J/ iiO<J
xhtml
:L
:L
.
XHTML.
HTML. ,
, ,
,
XHTML
- ,
.
, .
XHTML ,

. ,
L
,
.
? L

HTML,
HTML!
;
XHTML
, :
. ,

,
.
, , ,
,
. .

XML.
,

XHTML
XHTML ,
.
, L . .
,
XHTML -
XHTML.
? << -
>>?
: << >>.
6,_-_.'
---.1:
301
h tm/tJ xh tml
Luu L? 3 u
-
L?
-?
r L L ?
HTML 4. 1
, r,
:L
. - -
? , ,
L,
? ,
/'
L .

DOCIYPE :
.
:L,
.

,

HTML
( ,
) . ,

:L.
, , ,-
.
,
HTML
XHTML ,
L ?

XHTML 1.0
.
-

HTML 4.01 ,
.
,
.
, DOC1YPE
? -
(n
ero 3?)
c hap ter7 1
HTML 4.01 .
XHTML.
journal
journal. html ,
tJ~ 1)0C\Y'i'E ""'L. /1 .0 Jtr;c..t:

<! D btml
PULIC "-/
/W/ /DD XR'l'L
1. Strict/ /EN"
i:
JD~/11-.-:.... .-:.F"'- 111 .-:.F~J.-:."' - o.-:.-
~ ~~1.1. .-:.u. <kt."..f>.
"http://www.w.org/R/xhtml1/DD/xhtm.l1-strict.dtd">
<htllll xmlns="http: 1 /www. w .org/1999/xhtm.l" lang="ru" xml: lang="ru">

<head>
<meta http-equiv="Content-ype" content="text/htllll; charaet---indow-1251" />
<title>Ha CA</tit1e>
~
Ht..JP.~,)j.-:..t.,.-:.o-e.. ....J'-""t11L~t>t.jo~.
JIIII<.IIIIVI1.-e01.-:.c..J~ .."'-.-\."'- />>.
</d>
</htllll>
lu. <."..o:f-111> .-:.111"-t..j.~t.-.J>I"-'\1\.-"'.-:....

.."I..-.. />.

, ,
,
,

L-?
w r, r
CSS.
XHTML, -. , ,
. ,
, .
CSS, L-. ?
, n ; , Webville - .
n ,
CSS,
, .
110~'\.W.t... ~O~t\.'\II.I. '\.J
c...r:.roo.I'\t. 3 ~ ~ w.'\.. ....r:.'l.

"'*'-'\.'U. ~, -~.utt... c...r:.01~
~~....~
6 3
n
, , , ,
, n
..
':., -.
:';..;... ;~:-:
n, ,
. .. . . .
-.~t:-
L, n.
n,
L
( n)
CSS,

,
. n ,
,
n ? ,
, nn ? ,

css.
...
~~~-'
304
;___~--
:- :,........ .:-~~
....
4~'-;- ~
._. :-. -
....
........... ...,.,.........................
.,... ... ......-.. .... tt r OCffiWVIO ~<I Nnor
__...
~
--~-,...:-- "_...
.........
,~
,,..,.... ....-,_" .. ~..-.
............ ,.............~..........
.........--............."..
..........................
.....
..,f'l"''...,.,....,.,......,
~c.W...,. .......'
--"'-
.._...._.
.........
I"_........ ~_...,_
~-""'-----
........,...
_...........
.-.~
__...,..-.-,....~
.................
,~
"",_".,.
...., .......-r . . ...--. ...
"'SA'IC:IC<......... II'IMA.\tt.lt
&.'(tfnol.fA,WI'tf lOft
..-~--.......--..~
............,.....,_,...,..,.,
..,..., ",.,........,
1........
..--.-....................-,....
.........,._..._...
_.,.....,...~~ ................
.,. .."_..,.. ....~U~- ................ .......
~~~. ,
),
..,.l!'t....,...,......... ...
.....
,."' ..
............
.,.... ,......,_.._....~
~..,..,..
....
ll~~
.....
~"' atte, lllf., l<~oo,uo
~~
"."",.,
~--"""""
10
,"""''
.,~--~~
,.
..
...
==-'. . . '"' . .."
~,,._.,,~
~(--_..+t
... ,.,.,..,_. . . . .
............
......................
..,...._
_.. ,
"
.,
,,.. .....
....
..
-......
-....
....
na
126
.,,
--""
41173
"'
7ttt:
l~ ~~,
......
tfi3"""'
~t'OtO....o6~ ~
.,
...
........
lt~-..~-'"'"'..,.."
.
tw..........
..........
,.trf .... "'
. . . . ~~<OP'!Vt')tolniiiY ....
~~::,::::~-:;:,...
........ tn~).t",t;i.~."...c.......,..~
~.........., ..........fo. .- -
....
. ,
....................
11'-:-'-""-"' ~~................
~,..ou..
........
..-=-......".... ~~011""- tt&JU_...,..,.

t..niiII'
..c--.A\......... ~~,_......,n. 8(.~, ...... .
....~ J<t;ol't rO.U ,,.- Oltlf'fi1't&JUdl& t"t..rt...a=41-.&AU83>
.,mtt"CJIUIf..S.tt(S.'UIJJ!.11.C~~,rW. ..-=,.,._.,.....
tJ...,lo'O,..;tf''"~'"''/II!JC~,.-~- ..-..~"""...
~ f\l'f...........w-
11\nstw\[.SAIUP.OZ:Z
....
.........-r-~,..--~
'W'O_....,.
pd~(.....,.
........
.........
. . . .. . . .
..-"~ ....... .....

~~
~..-:~~~
M~~~, .....,_..WII\
......
~pnl. ~..-r<.c .-....,'*""'").

,~~....._
_,;:;
l\w, m npoucxogum
cocega Webville
8 peal\umu-woy KBapmupa
-?
: , $1000.
, $1000,

48 . ...
...
!
. Si
...
bothroom {
tile: lin white;
dropes: pink;
}
bedroom {
drapes: u;
corpet: wool shag;
}
, Webville,

CSS.
: CSS
( ,
- bedroom), -
( ,
- drapes
- carpet)
( , - whi te,
1 - lin).
306
?J
UcnoAbJo8aue
css
CSS m XHTML
, , ,
CSS
, L. , ,
n, . n
<> ? n; , ,
n , ,
background-color. :
3..;;.t.-.. ~111. ~3~0\~t.- .;;. ,-f?'~~ t.-
11a..r~ot-r .;;;.o~l1t.jt..DI~ -~r4>1foo.t..>t- 3 ~1

I,;;. 111."\. )(0,;;.'\Nt.- ..;;;."\1\.'\.j~\,;;. jOO.\"U"\.O..
1"
~
3 0\...I..>~.t.-.
.;;.~ CJJ
.,::J\t.-,;;. 3~ (~>
- . -,
tl.ot.-
~~IW jDjDI~D\,;;.b ( >:gO"f~ "\1\...t.A"'v'I..

~
.J...~~..\1 ~.;;.rt.. >""'~t..1...jR~\,;;. J_JI

t.-'1.0
o<por.IIU\.U\.."\1\.9.1~ jfAt\N>.. .,~.t.-,;;. "j~
<pRtUII ~\ (/">.
L&~.)(.;;.~ .;;.&~. "j~ < a&L!l

"f'D\ t..+l..l1t.
background-color: red;
tv\t.-~jj ,~"\.v.--g. '\. t.:U>

jtU~o.t..t,.:w...... ";;..~'\.,;;.,~
j~O~O'\1\.t....
n :
{ background-color: red; }
, , - .
css-
KO , . ,
n ( ).
Xomume go6a8um 6w cmuAeii?

SS... ,
. , . , :
background-color: red;
border: lpx solid gray;
~J'-"'j'!'~
3~0\ (r> a.jj~

t\.\f\.).gO\t\.\'tf0\~0\ ...

307
Bo!lfoc
]j: <> ? , ,
r ?
0:
CSS,
n nop, n
, CSS :
n n,
n .
, .
}j: , r n ?
0: ,
, , n
n. n
<em>
<em>
,
,
n . , , n
n no CSS. -n.
, n
O'Reilly's CSS Pocket Reference.
]j: n , n n
, XHTML. ,
n XHTML,
n ?
0: n n
n
n:
CSS.
CSS n
XHTML. n
SS- ,
XHTML-.
n, CSS n
. n ,
.
8u
css
CSS 8 Baw XHTML
, n CSS. n
, n n
. ,
S$- L.
Ht..bj-SI ~:.( :.
n - L-,
:. +U>.1iUI.,j~11\.i\,
CSS. n n
Starbuzz
'-)~. ~:. >j:IL

.g j+v\..Oi\. 'l..lt.gt.. ..t
n ,
. , n
l"t>tf.A.....O:./""'...ji"Jl.-01..
? , Head First. , n L
. n, -
, n L
( ?).
, n n .
< !DOCTYPE html
PULIC "-//WC//DD L
'-)~.
1.0 Strict//EN"
" http ://www . w . org/R/xhtmll/DD/xhtmll-strict . dtd">
<html xmlns"http ://www.w.org/1999/xhtml " lanq="ru" xml : lanq-"ru" >

<head>
3ju- :./ :.
1\.D\..~-
~ ~
~~11\. "f'.g11U\. C:.11Ult..i\. CJJ ~'I<;'I:.jO~.g
-~ "f'.. ~.
VJV
</head>
<d>
<hl> n
Head First </hl>
<>
<iq
src"i.lllaqes/drinks.qif"
lt= " "
/>
</>
<>
nn
< href=" .veraqes/elixi.r.html">an</ a>,

n
<>
-</> .
</>
<h2></h2>
<>

n,
Webville.
,
< href "aout/directions.html">yaae</a> .
</>
</d>
</ht:ml>
309
68u mu
8 2m8
, <stl> L-,
, , CSS. ,
,
- .
, ,
( ,
) .
SS<
< ! D html
color:
PULIC
"-/ /W / / D'm
'1'L
1 . Strict //EN"
" http ://www . w . org/R/xhtmll /D'm / xhtmll - atrict . dtd">
<html XIDlna="http: / /www . w.org/1 999/xhtml " lang-"ru"

XIDl : lang=" ru">
<head>
/\111.~~1f01t....
~<r>j.
IL.O.orow ~~"""""
111.
"'f~.;;:.c...s~ .;;:..;;:.
</atyle>
</head>
<d>
<hl> n . ,;~ ~
Head First</ hl>
<i.Jaq arc="iJaagea/ drinka . qif"
al t=" H&n'l' "
1,-/ / . <r>~~'lltjo~
~~~~
/>
)(rfML.v
</>
<>
nn
< href="everaqea/elixir . html ">an</ a>,

n
<> -</m> .
n n
( )
</>
<h2></h2>
<>
n,
Webville.
,
< href= " aout/directions . html" >yaae</ a>.
</>
</d>
</html>
310
css
ecmupoBaue mu
, n. , n
,
lounge. html nn chapt er8 1l ounge,
. ,
-.
()
..
F1rst
:G ~ flle:l//chapter8/loun9"/loU"nge.html
Dc..t- 0~0\Jtbi-\DL
Bead First
~---+-- .~r<j'I.L .\"7

1(./)\\- 'I.,10~I-\D :
jorLOO:giC-'I. ~c..t, ~L
Lf~ \'\......~ .
"N ~. , '!' nn 11 Jlaii.II.I1
n , <>, 11~ 3~<-. r n
6ecnpoeooli -r ( r)
~'\.Jt'I.jOI'J'\.'\. Jt~
~11!.<1">.
1'
J1\.~~1"0\Jt'I.jJ\.5\
Webville Ecmt n. r
nJt ~ l
11 ,
30\~~.
'J~!J UA1tO"'t\L \'\..O,.U\.5\Jtv.$\.
30\\'\..,.\\..~L . ...
, <> -
, ?
?
311
aor.oGJ:OG
11
Cmuu3au 3a2oAoBkoB
n .
n ? '
r11:.
.s:l n ,
n , :
...
hl{
h2
color: m.aroon;
,
:
hl, h2 {
font-famil y: sans-serif ;
gray;
color:
color: maroon ;
Tecm
ss-
lounge .
.
,
html
Head First
<hl>, <h2>.
~:.nt Jr w .awwt..ae1~.1111"06w ~~~ 8"it ::n;
~8 . 8: ao.~~p.ICJ')I'lt14 !(!':fo(~at'll8
bC,rtp08t'1 80A &<.'J1) (nD.I'fWU tol$41 tum,..)
Bw !rr w~~ : .u~ "8~ vo-aeoca..1("tow e.dnl aa.r.

KC.t:.(t&'J11Tt IUC.DI~ patot:kauitt.ra:u.c
gk 328k npuBemcmBue
<< ... .
, ?
.
, :
, ,
h1 , h2
CSS,
, :
hl, h2 {
font-family:
color:
order-ottoa:
an-erif;
gray;
lpx solid black;
color: maroon;
tr d
F1rst:
nto: I// Ch>ttr8/loUge / loung!.html
Head First
<h2>?
<hl>,
? ,
sii , 'l't06w aonpoos;m. 11J:UI01

nn , s, ~~= -(j2
Btmta
ttnposooh 1}'n (sn J! r)
...
1' WeV!!!e .11 rz n, aiiu ,
J!3 R1! ~ IJ'!lt!l" l
css
Jm
CyecmByem 6 m2u: yka3aue
Bmopo2o npaBuAa, moAko g < ht >

hl , h2
h1,
hl ' h2 {
font-fuaily:
color :
~1:, ~~i. Dic..;:;;."\1\. ~u ~ "\!\.~~

0
(V'\11\.~.u.v.,t..~A~
~...o"'t' 0 )
- V
~
tt;;;.~ "\. Vl.,~t.ADI
sans-serif;
qray ;
~jOitV.- ..U-1.
01 ~-...,- - --
~~ (> "\. (\..Z.>.

hl
border-ottom :
lpx solid
lack; 4-. ~
-.;:; t.J~~Oit.... -..;:;ol"ot. "-">01-11\..Ju)f IW""'OJ"Ot.
OCIOI-.s~t.,.;:; ;fro ~
j'-
-JJ
.,.,
<vv
.; ~~ ..;:;oiWjNI ~,..
"'
"-r'j~1.u.. .'\1\.:1/<+',L,. 'Zf01~(1t
color: 11\Aroon;
npomecmupye
SS. . ,
I{l()
,
.
.;;:. ~
~"\1\.~ ~
1.fD1~~01-
IA .W.IW1.
1f01....~1
~-, 1(.0\L(.. t
'\1\, )(O,.;:;t.A'\1\,.
314
t___________
.:...
H.:.....:
e.:.....:
a.:.....:
d.:....;._
F ....
ir
__s __
_..:1
3axort QW lt't"J), 6w uonpo6oa.rn. J1AW:1I1

no60Jt1'UIII . :~w:, fiiJ ptUQ/)p~ lkera t>-n
ecnp.o~~o.a.aol '}'n {:title8"fteft- < 6 )

....
Bw lfiAAtt Nll:.. Q,.lpt w.~ "

~ nOW'IU.. l'QQW .n
ac.nua.s)'t-~ MNDII JX1U1:.1L1 pecowalttJCQ, l
JUC.
css
aCIIlo
Bo:J1foC1
Jj: , Jj: ?
,
, ?
0: 0: . 0: .
,
, .
: ,
. ,
. ,
<h1>
<h2>,
text-decoratio, ,
,
.
Jj:
?
, uderlie.
,
.
Kak g paomaem
, , :
.111...11. "f~.....;;;..- jNI ~~/ o""'IA-c.-Oit\.k\.J11)(
c..IU.~O/"O.{g jOI~... "f1A..l..f'LjNI
~I(>.
, :
Dr:p.oi., ~or. .111...11. '"1''1.2.....9.......-j ~~ (> '\-(~>.

~
hl, h2 {
color: gray;
,
CSS
, ,
. , ,
-
CSS. , L-,
. , ,
L- , ?
,
XHTML ,
.
~
315
, L-
3?

. -,
. n L- (
), , .
, N. n
r.
l
h1
$U
body.:,)
~....:-a.,..)llll
.
head
k .k&& '
($
em

.-.J
-:-ez_p_:
!11!\'
.
+' J
.--1
. MJI! ~
;_
,. -\_______,J
css
)("l-,151 wc...t..
<! DOCTYPE html PULIC "-/ /W/ /DD L 1 Strict/ /EN" . ~

~
J :z:::. Jt
"http :/ /wwwowoorg/R/xhtmll/DD/xhtmll-stri.ctodtd"> iC:
-'I- t. l 11"
<html xmlns="http://wwwow.org/1999/xhtm.l" lang=":ru" xml:lang=":ru">
<head>
<meta http-equiv="Content-ype" content="text/html; charset=windows-1251" />
hl, h2 {
font-family:
sans-serif ;
gray;
color:
h1
border-bottom:
solid
lack;
color: maroon;
</style>
</head>
<d>
<hl>
<>
<i.mq src="i.mages/drinksogif"
lt=" "
/>
</>
<>
< href="everages/elixirohtm.l " >a </a> ,
<m> -</>
</>
<h2></h2>
<>
Webvilleo
< href=" aout/di.rectionsohtml">Yaae</a> o
</>
</d>
</html>
Head First</hl>
u3,\ npegcmaB,\eue ce,\ekmopoB
IY\t ...t......jO~OI~,/1..5\.,:;:;.b
n n nn,
~~ v;:;.~
..r:::.'I..'\. v;:;.l(..() j v;:;.t,X
r ,
n n. n
h1
r:
-----)j-SI.v. ~~.,:;:;.1"'\. bot>l~1
1-\.Dv;:;...~ tU.- ~3~0\t......
(\A,u>.t>l> '\. ~- ~l1t

~~.,:;:;.1"'\. t.:to.
h1
font-faily:
s&ns-serif ;
3.;;:;.0 .,:;:;. ~/" vood....c..v-..~~

~..~ .t,....t..tu~ (> ~ c..r:::.I"Oit\.:\,-
Vj7 t\.0 ~ ~- Ot\- v;:;.obl(..() ojW\..

n, rn n
h1 , h2:
hl , h2 {
font-faily :
sans -serif;
/
n w nn n ,
rn:
font- f&mily: sans-aerif;
318
css
~
- ,
:
h2 {
em {
31.9
cs ~
CWi

. RadWebDesign 4, n
RobotsRU. CorrectWebDesign
RobotsRU ,
,
. ,
RadWebDesign :XHTML
CSS RobotsRU, ,
, ,
.
ff:tllUUJr.rlHaH
RobotsRU
, :
CorrectWebDesign
RobotsRU
: ,
, !'"
, . ,
CorrectWebDesign ,
, .
!- , ,
, RadWebDesign n
. n
, .
CorrectWebDesign
, ?
RadWebDesign , .

.
. JW.nauu RadWeDesign 110.
l v . 'I
'U7? Kmc . Q./ . ' m' -'U'IJ
?
320
css
uu mu anumkau
u k3mu mu 6u mu
2ocme6ou
,

elixir. html
directions. html?
lounge . html,
, .
s t l ,
? . ,

, . , .
lounge. html
lounge. css.
tt t

lounge _html.

elixir . html directions . html.
J ~
321
ss-
Co3gaue aiiAa lounge.css

,
lounge . css,
Head First.
lounge. css.
tJ
dirtlons.html
elixir.html
lounge . css (
lounge. html) SS-. ,
l ou nge. html.
, <style> </ style> n

,
lounge. css
SS
L.
hl , h2 {
font-faily :
sans- serif ;
color : qray ;
hl
order-bottom:
color : maroon ;
322
lpx solid
lack;
CoJgaue ku U3
lounge.html
css
Bewuii CSS-aii
,
. , L-
<link>.
, .L-:
<!D
PULIC "-//WC//DD L
html
1 . Strict/ /EN"
" http ://www.w3.orq/R/xhtml1/DD/xhtml1 -s trict . dtd">
<html xlns="http ://www . w .orq/1999/xhtml " lanq="ru"

<head>
xl :lanq="ru ">
. )(rr\M{_,..Il.Oj/ ll.O.o-
<eta http-equiv="Content-ype"
.
11t1i\. "'-'>~"l:JO9.......-:; wv.OI.bcontent=" text/htl; charset=windows-1251 " />
v
<
., .. ,.. .g l'\.t..I.-1-U{)IO .I cJA'\/\..,v~~
<titl> Head Fi r st<1title>
<link type="text/css" rel="stylesheet" href="lounqe. css" l> vy:J C,W,"\I\,J\.L.1i\..
~sty l
rw
</head>
<d>
<>
Head First</hl>
<>
<iq
src="drinks . qif"
lt= "n"
/>
</>
.xrrr
</>
-.t\.01i\.
{V\(_,..Il.Oj
oV.W.t~~t..ov..s~ 'St..j '\l\..j~1i\..
</body>
</ht.l>
. 1 .
(/ '"'-"' - ..::. "'"'

.:- ~
v"""''\1\..~-
323
t<:: ."
Co3gaue k wu m6u cmueii

u3 u6 elixir.html u directions.html

elixir. html directions. html

lounge. html. ,
e l ix ir . h t ml beverages,
,
,-
d irect i o n s. html -
about,
. . / lounge. c s s.
, , , -
< ! DOCTYPE html
PULIC "-//WC//DD L
<1 ink> :
1.0 Strict//EN"
"http://www.w .org/R/xhtmll/DD/xhtml1-strict.dtd">
<html xmlns="http://www . w . org/1999/xhtml" lang="ru" xml :lang="ru">

<head>
<meta http-equiv="Content-ype" content="text/html ; charset=windows-1251 " />
<title>Han Head Fir s t</title>
<link type="text/css" rel="stylesheet" href=" .. /lounge.css" />
</head>
<d>
</d>
</html>
< ! D html
PULIC
"- / /W/ /DD
1 . Strict/ /EN"
"http://www . w.org/R/xhtmll/DD/xhtmll-strict.dtd">
<html xmlns="http ://www . w . org/1999/xhtml " lang="ru" xml:lang="ru">

<head>
<meta http-equiv="Content-ype " content=" text/html; charset=windows-1251" />
<titl> Head Fi rs t Lo</title>
<link type="text/css" rel="stylesheet" href=" .. /lounge.css" />
< /head>
<d>
</body>
</html>
css
ecmupoBaue 2 cauma

lounge . html .
n d Firs~
~ filo:///ch.Jpt~r8/loongo/bovorages/oll>lr.html
.
.

L-!
CSS.
uanosc orpo>U!oe n~
n n.,r~r<> .: n" , 1l{ 3WI<"
---------------====,,,
.; fift:///Chilpttr8 /10unge/lounge.html
-~--~~~~--
Head First
IIW!HoeA
11
n.. n n n .
: w .. t. <tl'ow <tn608 ~
no&oJra-:. , ::, CJnli~amt~ .1~. n
n oc-tyn (.,."n7 co6ot! csoA oyrtiyx)
: . WebW1e.

Ec..w2 ..;:- nQ. -16 aJi-r ;,,
.. m ~ .l!:.t~,. J ftUJt
305 S . . WebvU!e 0,4 11
11
305. 12 1/I
J<
n n n J<
I!pooaii'fe n :;
0,6
m.
tt 0,7 !UI
- n 0.2
n . IIpeeJmu
1!
~--------------~-------41i':1
325
css
RadWebDesign
- ?
,
>> CorrectWebDesig
? r ,

RobotsRU,
CorrectWebDesign
1998 .
L- ( ) , ,
,
<font.> <center>,
. ,

, ,
SS-. , ,
L-
.
RadWebDesig?
XHTML 1.0,
HTML,
,
. ?
,
SS-,
, .
,
S$-.

RobotsRU
RadWebDesign,
, .
326
css
~ f1'IY i<Op(tiQW
n, ( ), n
, n
sans-serif.
n . , ,
,
sans-aerif.
font-family,
F1 '"t
nlo.{{/Chapter8{1oungo{loungt.html
D ~>-w.o-g\L.O..g '11\).~
"~ ~-wpw. 8t>.hJ-.SU1. Ot\.-1'\J..~ j~>-VLt.J(. '\. .gt1t'LII.j'I.W'.
U\. LW'.IL.O.
Head First
015jDII~OI)(..gvt.. ~L v..y>'I....t..t\JILW'.v~ ~-wpw. .sft
_jc...OII'\.g.'\.~\t..../.1t'\. "'-0
,j....01~.
jI.~'\. '\.
LW'.v.51
W'.t.rOI.
ot\.. '\...t..1....
W'./"-i)\'\LL 'I.W'.OI
\'\ lt.joOitU.. IL.O..-.IOIO-
JtJ
t lllltti10 '& orpoNRoe JCfem.Q &IIOio& tt lllt"epano

npa:&c:R"f ~ .a.u Jop08W1 G.tati)Aapll C9UI8J' 11'.wf ttd. pOWOIUJI
k0pt.8 IIIW61J>R
c:c&to MUKJ(OS'W COk altMN/iHKoe coprO, qlp)' a1Jiyt.OUX J1
mr6,1w mu. -''- npGXII~Itf'e.l!11wA wi (l
tt;pOJHII "-
Dc-plt'X'N!XItllfo~J.Ia.so-~w ~ ~"'!"O.'>.,....
n D'*;.nc ~ChiOXU'I.Wev.stiiiiUC~"IypW
l!k......,..~CVO. . U~ ,.,tWit8
327
Peweue
hl, h2 {
font-family:
color:
sans-serif;
qray;
hl
border-ottom:
lpx solid
lack;
font-family:
color:
sans-serif;
ma.roon;
?
w ?
, , -
<iockquote>, n
?
sans-serif
?
css
uw no2o6opum g6uu
,
font- f am.i.ly
<>. .
m, gu 8ympu m
< > , sm
Ht....gu... ~1.111..
3g g z ceeiicm8o wpumo8
t\..0\t-fjJIO.v.S\ \w
~.r~
, oryr .
<>
<em>
<>,
t\..0\"1"111..-
/t\.tff u....t...'1i\_c-.......go
~~o.g.
. , ,
, . ,
, SS- ~ ."~-.gl1t """~- :2)

t...t.r .. ,)V
... .
L- , , .
~ <i""j> .-J!....S\
'iO...,..I-\.:\I\....11\..jJI ~~j~'Y-..gl +\D

1-\~~"-01.4)~
~~, .....;j ~- 1-\..'\1\.... 1-\..11\..~

1-\L "'f11\....t..t\.J~ t-.S\.
.~~
.gf~"\.
l>ody
m ygem, u nepeecmu font

,
font-family
no gepeBy?
<d>, , ?
<d> , ,
.
11~~~ .. __..-;,
~ '\l\..)o'Srt.k\..1.S1)(
0w1 '-/"0\'SO~D\.O~
11fO~O "-'>~ --~~

fo--.t+,_..;J~ .g n.r'0\~'\1\.1\Lj.ILSI bool~ . DL
'\1\..)..t.-\-~ ~11\..<j:>.. j.ILSI ~U...'tO "01.'\.~\
2 geme? aBaume npomecmupye

l ounge. css
font- family
<d>.
, .
body
font-family:
sans-serif;
hl , h2 {
-Euitt :failJ .
oolo"
hl
sarrs se i:f
gr~y; ~
order-ottcm;
'
ll"' solid
Eo:at
ra:tty.
color:
330
satts- sezif ,
maroon ;
~ uu.>.<> ::t"'"'-""-".g,w....,-&,fo-;1-laok ;
J-f"-i/~ "'-,)
"f'"
><u< j-""
~ " "f'.&.u.. j"" r
M/IAZ-/ "'"""'L
pomecmupye 6u
css
CSS-kog
, . ,

lounge. css,
lounge. html
. "' , .
. , , ,
SS- ,
sans-serif.
Cfh.f'\1\...)r CAOI"h.f'IA...). '\JL\1(.'\)( IA...)~'\1\.V.. tU.. h.foIA...)O~O, t\.D v;;'. 1(..011(./"'\) v;;'.o( t..W t O";:j~.il.'\1\.( tU.. v;:'.~l(.
.11.'\1\.~ 1...., v;;'. .t C..jt..II.M'\1\.( - ~~'\A..II.'\1\. ~1v;;'.
Head First
J~>.h.J-JUf.g h.f~.g'\1\.O bool~ '\1\. "-'>..)~'\1\.i. .gc.L.- ..v;:'.~

+-\t... ~~... u.o ~1'\.0\c...ll-tjo~~v;:-..
< 1< ~ t<\U . ~ nn 1!1!!1

6m1 . I!. cmsesmpsJOit.pyoiJ <: OOeffie~Eitl
n 1 (ti! ~}
118>\l! w We-Aie n n. t .
IOCIIOnyiie l'aW'1~ ~...,..."! !
sans-serif n
body. - ,
-
? n
font-family
body
n
?
331
i' r:.1 (!HJ
epeonpegeAeue g c8oucm8

font-family body,
. ,
, sas-serif n ?
, , <em>

serif.
. --:-'----, .----~ ~--. d:J

~ /$1. ~~"\11..~~ ~~/$1. .g~o
"~ <t.....> ~I.
+\..U.O
c.....A-\.t.:t~..""'--o ~"'-<~- J'J~

:1. j?l<:.t\.1)
":f'~t..o"f~t..~ Mc-At..t; 0.g01h.."tl\..t... .
'V()()-"f0\.g111...Ao..
, , n
,
<em>. , <em>

font-family, body:
d:
font-faily:
sans-serif ;
hl, h2 {
color :
gray ;
hl
border-ottom:
em
332
Z/1<768 8
lpx solid
lack ;
t\.l)\:>f1t.
css
Tecm
..---r..;.;&i e.td l=ir
SS-
f~-&58i.U.~..:..;;"':;.//<haprot8/loungo/loo........;_og:.._~"'-"''-..=====:=!,!
<em> serif fontfamily lounge. html.
Head First
k
. '(!' n6n. anlffi<ll
~. , .Q<> &
n ( 6~ r)
"'ooa~tr .,;;.0\\(.()L 'l..j~1AL ~1J'v;;.OijNI o~t..~~.

~WW </"~0\ .,;;.~01 .g(}v;;,/"'\.. 01aj01~01 UHI\.,:;;;.01-
t.,V;:'.c- "'-'U>)(1... v;;.~ .....v;;....~ ~\ jOIIWt\..~t
11 Web'!lle n . '(!'OObl II ,
nn I' ~ i!J! l
v;;.~'!fO.gOI~~ -&.rt\..~L .gr..t_ ~ ....t.r.gOOIOI.A.bt\.OL

v..t\..1.L ('SLj "'1"01.g'IA..I1.01 ..'\..J\ jNI <L>> ) .
'laano
Bonroc1
}j: , n
, (
<em>,
) (
),
n ?
. , n ,
0:
, , ?
1. -
. <body>
, n
. ,
, ,
, n
0: . SS
CSS

<body>
]j:
<em>,
n. n 1
, - (
, n
/'
n.
). 1
}j: , SSn
nJt
, ?
n.
0: ,
}j: n
'/. n:
/*
*/
SS-
CSS Pocket Reference

O'Reilly. , ,
, ,
, ,
0: .
,
l , -
n , -
/*
.n
R,
{ color:
lue;
*/
. ,
.
,

.
?
M1t1
-.1,
n~t
-., , ,
Bltl
lt .
n?
, n
<>.
?
- '/UttZcct.
L
CSS
, n
, n .
n, ,
. n ,

,
.
, n
, .
l.
. ...--
..
-~:~~~:~-"".,. ~-,.",...:.--.--.4
,,.-:r.:~fl""'~~&-.~~~e<~.:w_.,..._,n ~-.....o..t<
..
w: n-.. n
:fJI.-1"('8.1~"'-"eoot---..f,ooo:"i:UV~C81oo8'~
..,...~)"""r.~"'
~ ~~11to!:IJ!'
......."..
,D\..t'I. .~ ...
.. +U'\.. +U.- ~
1
'\1\.j..t..\-\J\.b.
~
334
?.ni/6<)
11
..
Co3gaue
css
kAacca 8 aiiAe elixir.html
i<
elixir . html
. , , -
<>
qreentea. I<ai< :
<! ht:.l PULIC "-//WC//DD L
1.0 Strict//EN"
"http://www . w .org/R/xht:.ll /DD/xht:.ll-strict.dtd">
<html xmlns"http : 1/www.w.org/1 999 / xht:.l " lanq="ru" xml : lanq="ru">

<head>
<meta http-equiv="Content-ype" content="text/ht:.l ; c harset=windows- 1251" />
<title>Han Head First</t.i tle>
<link type="text/css" rel="stylesheet" h.ref=" .. /lounqe. css" />
4~o~t1tjO~OI~b 7~ ~ IC.AOI~
</head>
<d>
<h2> </h2>
< cla"qr. .ntea">
<i.q src=" .. /im ges/green . jpg" />
n
n
~,
"'fo~o ~~~L 1'1..t..... "'~1" ~~

c-/OI.SJ vo ~..\U\.:w...., v"'-~~:..;.gj~"\...
~~011"\.."\ IC.AOIVVD~/ 1-\."'f"l...t.f jfu...-.~.
<hl> n</hl>
r
:
</>
<h2>0 cpon</h2>
<>
<illlq src=" .. /images/ lightlue. j pg " />
n n,
n
</>
<h2 >-n </h2>
<>
<illlq src=" .. /images /lue . jpg " />

,
,
</>
<h2> </h2>
<>
<i.mq src=" .. /images/red. j pg" />

n
</>
</body>
</html>
, qreentea,
.
335
Co3gaue ceekmopa g k
, :
.-..~t.. .:v....i
w-..w
3 0\.;>:.....<
-" 4 -
.;>:.oc>t1t ~\CJ)I~01""'l
\"\J)I.\\ .gl1t
""'
1"
{<.'>/
,\"\J)I.I(i)~
t..' "\1\t..>
i ?
t.OI.O
\"\J)I.J.g0\...._11\.L
I(.\(..(..1)\.
~ . qreentea
{
color: green;
O"ffjt..JLS\~L
t..~0/"1"
3.-;.-; lor ~'-"'
.gt.t.. Ol~j01~11t \(.1\0\t.t-OijfU......ft..L'I
, <>,
. , , -
class
<>,
.
. :
. greentea.
body {
font-faily:
sans-serif;
hl, h2 {
color: qray;
hl{
border-bottom: lpx solid
color: maroon;
p.greentea
color: green;
336
:?. i'!I:J<J 8
lack;
lounge. css
css
Tecmupo8aue kAacca greentea

,
.
"'
.)!" tti:!lt~(W 79>n orpQ\..._"o~i YIW.fo:C"teO 6}tT~'11.10,.
P;,t~~!)e~t'!Dt1O(IIi n"-'t'!'1!f):t~~ Qcrarty ~fl... f-lh'l
\8~ fJ(Iol\1;,4 I'IO(nu'I : llt""~otb ~~~~~pq
t 6 NiUJIC~bl" ~ MMOIHtOe.
t;OX
CGpf'O,
Ut.,py nt~
Jr
DJt<)J:IW Kt!08UJC:JQ. J''Of >QDA~ Wt N&nM'tOK OQI.t:C:.t.1 ttp<>~IIti'NU ~
lf.t"!PU rouyer.. 11 SIO!DIH, 6w: ~ :t . J ,

t;p.tSY St. J)V:)' eat 8 '~ C.K<.'Jt \lt 6~tiCG'S.t
~
:
raspberry lueerry,
elixir. html,
,
.
raspbe rr y - ~
purple. SS- ,
greentea: raspberry,
lue, ueberry n
lueerry. -t
- .. ... " "'~t-.D\~...~'S~1..0"1'S1..
D~ 1-\J)\"t..r't\..1\1(.01 ~'\1\.."N\f..I....-v/"""'
'S
~v
Hj u.-'\11.. .DI'\1\..t\D.g~"li\. <--1AfO"" 1-\J)\. 1-\J)\.~"li\. t..N.y>t>.t\..~1..0Aj '\1\..1 ..-. jNI
1-\J)\.~ .W ot..N.t>..OI-U>. l
1-\J)\.
V.....jt.JI.L t..t-'\11.. .g~ "'f'\1\..V....>'\1\..
.t..- ~t-1..0j'S~ . ,)"~'\1\..Wot..r . OI-\J)\ 'S~ <f'1D~o.g, 4t...-
1..0j'S. ~fot.W.ojO.gt..r'.u.- 1-\J)\.. '\!\.. <---tjj"li\..t-"'f'\l\..~t.A-U-\.L11... ~.-

1A-~y>j~1..SI..
kAaccau
n n
qreentea,
p.greentea {
color: green;

<lockquote>, n :
ocltquote. qreent.ea,
. gr-ntea
color: green ;
L
:
<lockquote
class="greentea">
ir.. '~~~0\.gb.t- ~ <j~ (..UI.U(..o/"( .0S11t ~0\.g.IUI.b .J\.t.....U\.

.I...1. <b/o~10tv, kf'~J.II.t.-
OI~1....1.IUI..D\t-'-~Jft.J....ft..ot . l01k.Ot-
kf>OI-1.o ~:lJ.... kf'~.-
I(.~I... </"> 1. </~10-/t>

I(..\ ()\ J -r.u...--..ft_.ot.
<hl>,
<h2>, < h>, <> <iockquote>
greentea? n
?
, n n. ,
n
accaqreentea,
(
color: green;
.g.reen
Er.-1..gl1t "-~..1..L t-\A,j.g011-\..1.L.gt.V(
~o-(j0~0\~t, .I(.~ (.)

1. "/"~.JOI I-\J...1i\. - t\..OI,j.g011-\..1.L I(..O\(NOI(
. kf'~~11Ut0 ~Jjt... kf'~ 1
.g_.._ .ll.t.-I"\A... I(..\ ()\.
338
:~II3A 8
css
!
. n ...
: n -
lt<lccy .
.

, nn:
.

. , <>,
n
qreenteA,
rAsperry lueerry. ,
n :
<p clas="qreentea rasperry lu..rry">
--r""-_, t..
.)~~"\. 0\""'
~..._,;;-.01 v\oo..S.S :F"'J/<."\.""'

~ v ~~~~~'\-51 ~)( \(../\.0\v-
<"LI1L
vo~ u.L"' "fod

-, v
1\Of$\jO"- 1 v.tj
, n,
of>OI-
~'\-51 \'\,Lf>OI '1/(.U"-o
<h1>
products,
, specials,
n
,
?
. n , ,
.

<hl>,
, n
,
specials
, n
,
, n .
, ~r, n:
n, n
, ?W
( n <>, n )?
, n? ,
color.
, : , ?
n, n
CSS,
,
.
kpamkoe 8 u pyko8ogcm8o
nuu k8
, , , ... .
, ? ,
CSS, .
- .
CyecmByem AU cekmop, coom8emcm8yuu m?

,
font-family
. ,
: SS- .

font-family ,
Kak m
gu?
, . ,
, . .,
, . ,
.
wu >k2
c8oucm8a? o2ga
ucno3yume m
no u
, . ,
, .
3 kk cekmopoB coomBemcmBym g m?
, , , :
<
class="qreentea raspberry
lueerry">
, ,
color.
>>. ? ,
. ?
' , ,
, - :
{ color:
lack;}
k::
~- w. '"fc-.~11\...11.0 j.II. ~w
~\<~>.
1
. greentea { color: green;
. greentea {
. raspberry
color: green;
color:
<
~-
~ 0+'\..0 ~0.1\..U... '"f1A0/"1.W..t..+\..O.
w. '"f.g11\...11.o W.I j.II. c-.~3C\1~y-.g 1.j
l ue;
color: purple;
L(.J\.C\vvC\jfu....v'h..P.
~....J +'\..0 ~t... ~0.1\..U... '"f1A0/"1.W..t..+\..O.

)
/ W.1. "1'~11\...11.-. W.ot... ~ j.II. ~j~t....g 1.j I~1(
p.lueberry
w. ":t'C\~11\...11.0 j.II. JW JU...t\P. L(.JlC\vvC\jfU....V/JLV\ .
~.t...!WtO
1(./\.C\vvC\. lc-.1(.,
. J ~Wo;: .. "1'-...g11\...11....
l"j'.u...."...'h..P.~:j11\..t\P.I.gl11.1i\.."1'1AOf1.W..t...
css
go cux nop m 82 noegume?
, g reen tea,
: .
greentea
. :
ueerry. , .
greentea, raspberry
greentea, . rasperry . ueerry
. ? '/i
SS.. ,
,
. , n ss- (
) . p.ueerry.
lounge . ht ml
, :
<
class="greentea raspberry
lueerry">
.
?
L-:
<
class="raspberry
lueerry
greentea">
. ?
SS- .
greentea .
.
?
, .
raspberry .
. ?
, , ,
:
<
class="greentea">
.
?
341
css xhtm l
GJ
: CSS L.
css
IL
? !

<style>
1 ,
;
,
.
? ;
,
.
... ,

,
.
,
,
.
, , ;
CSS
(
) ,
, .
,

L,
c l ass .
, .
.
,
... <n>?
342
css
,
,
n 1990-
.

. , ?
, -
. ?
?
.
, .
, .
-; ,
.
.
,

, n .
... ,
, .
. ,
.
--. , ,

<atyle>? ,
, ,
, ... ?!
343
Kmo gm npu3ak?
,
<body>
, n
n .
. n.
<d>. SS-, n .
~ CJJ-\Wj l""'-3j1-..t..
bodY {
n
color: gree ,
344
color : k;
L'LO{ ~~I O"'Fjt..'\1\N\:'.b/ I(..O.J

'I.j ~L'\1\.c.-~.g~
~~ "fJW ....0-gLjO{
'11\. ~ ;'}1'\0\C..A.tjO.gM'\.
t.'I. ~-16~.
Jt..AL-
css
~r~r
t,'\. .g .gOI~ C.JJ-IWjL !.
0~~~<-'I.t . .gc.-t... ""fOI.g'I.AOI{ Ok.'\.I.,0\1-V

u... 1'\..~L .1. o~~~<-'I.t ""fot";;;.o
Uue t um ~~-f,
'I.~f"l!l.fJ.~.,.s>. . tOI~<- . ~.,I""JJ
u~.
""f'\.~(1ti(P.'\..t- ~. ~~~<-'I.
3"'1""'t\Lt... D .... .g01... k-....t-.
KomofoM
0!1
Da!lla -
:noap,aBum ~ m
~rr
~.,AtjJ~ J""f"'~w...
u aU:mu mu
oruu~u. moro
m m, m
rum u
fu f1,
<style>
body {
background-color : white
hl, {
gray;
}
h2,
{
color :
<em> {
font-style: italic;
}
</style>
345
css
...
n n n
CSS,
HTM L XHT ML?
~t, l
W3-
n n
. CSS-a
,
tor/
g/cea-valida
http ://jigeaw .w.or
,
UR L

n
,
.
,

HT ML XHTML.

,
URLapec GSS-
n

.
n
D
,
.
CSS
n ! n

n
( ,
) .
346
Valid.lte Your Style 5 ' -
-- -io .l.! !!llto.!'lo.._,..........

... V ..... jtJAI
SI~'IOI.IWOI.IIdW.~
ltWIIeVRiot ~pn.-"'CSiorC
- -- -- -- ====
==
.__======~
ICSS.=~
~~, .~=
-~
... _
~._
... _
a-
'
Ntt ...... ...d . . . _ . . . . .
.. . ,
Lo:8'C 888t ~ .... __
. ......
tC.....""
~
Nfo....... . ..... __.,...",..~
!16gu, m
css
CSS-kog g 2ocmeOou Oaugii
, SS-
Head First
, .
W3C.
CSS
, URL-apec
. SS- ,
( , ,

CSS-, L-).
Check ().
'wr41 ar
JIQSfi W
~''#"._...
W CSS Valldator Results for fifeI!JocalhostextArea

work ~ lnl<!nded vour CSS styje sh
mear> \IOU should ~ ~
eet needs correct document parse t. This
Wemlng,
URt : le:Jocatholffex!Arf!a
Une : 6 (levet 1) You hav
Une : 6 (level ; 1) You haV: no ~ckgroundcolor wittl \IOUr color : h2

l!ne : 14 (level : 1) You haveno adcground-cotor w~ your cotor : h2
Une : 18 (lewl : 1) You have ;: ~:g~und-cotor Wtl> vour cotor :
9 OUndcolor wlth 110ur cotor : p.green.a
VaJid css lnformetlon
d
..-:. CJv-ILOj1 >..-:.ort.1. "f'1..)"-DD"'-~M"'j~

~\(.. ~"'j~ ..-:. ~.~ ILOj- ..-:. ,J"-DD~, ..-:.~01~ CJJ ~~ "fo~ "fo~
r~~M"'j.~'\.'I...
~ano
j1
{
fonHemlly : sans-serlf;
h1, h2 {
} cotor : gray;
hl {
order.Oitom ' 1 sotd blaclc;

{
oolor : maroon;
p.greente" {
cotor : green
}
Bo:IJfoc
]j:
n ?
(}.
u. n, G
r r,
, ~.

, .
347
mU
u 9 cBoucm.
top
J
background-c olor
Q_ "'- <-~ow-....go Oo-f>CjUUI~

~tlt1i\."j~~I>..
\..-..~"'-t.."'-0 <-~~1 "'-

~11t....o~'\Nb "'-j0~/"0\~....0j
css

. ,

.
'
CSS n n,
. ,
L- .
n
.
, n
, -
. kJiacca.
n .
n n
HTML- <styl e>.
class.
, , .,
L-
, n
n.
, :
, -
<body>,
, n n
< link> n
class
SS
, n W,
css-validator.
http : 1 /jigsaw. w. org/
. .;'of,.(!f.J >
349
, XHTML

3?
. :
350
css
Peweue
h2 {
font - family: sans- serif;
em {
font - family: sans- serif;
351
~ I<OJXIW1
Peweue
: rasperry lueerry,
e l ix ir . html,
.
d
font-faily:
raspberry- lue, lueberry - purple.
sans-serif;
hl, h2
color: qray;
hl
border-otto:
lpx solid
lack;
color:
aroon ;
p .qreentea
color: qreen ;
p.raspberry
color:
"
:-i!Oi ~!<\f\t'Oif' (:<"f.I Ofp()M~Ot: f(0f1N~80 Sf;'J.,ne \\ Mf!t-t~p-f'IO'S _,
r:poc,rr 1n n 1Jlvpt18..q ~,. _t.;,~
lue;
::.otra:S'-1
*tl'~t ~11. t.te,t;-'n<O O('tlyiQtt"'<.~
~ ~~(),

p.lueerry
color: purple;
< " 11\1 cupro, I)J( ~
110""'<. nnl\1 "~! >t< n>t >.~
t<i<!I r~
w. 1f'>! " .
;. n~r r>< n n!<
css
Peweue
<!DOCTYPE ht ml PUBLIC
"-//WC// DTD
XHTML 1 . 0 Strict/ /EN"
"http://www.w.org/TR/xhtmll /DTD/xhtmll -st rict .dtd " >
<html xmlns="http : //www . w . org/1999 / xhtml" lang="ru" xml:lang="ru">

<head>
<meta http-equiv="Content-ype" content=" text/html; charset=windows-1251" />
<titl> Head First </title>
<link type="text/css" rel="stylesheet" href=" .. /lounge.css " />
</head>
<d>
<hl>Haw </hl>
<h2>0 </h2>
<
class="greentea">
<i.mg src=" .. /i.lllages/green.jpg" />
</>
<h2> cpon</h2>
< class="rasperry ">
<>
<i.g
src=" .. 1i.mage s/lightue . jpg" />
</>
<h2>-n </h2>
< class="lueerry">
<>
<img src=" . . /images/lue.jpg" />
</>
<h2> </h2>
<>
<i.g
src=" .. /images/red. jpg" />
</>
</d>
</html>
m~ ~
353
~ femeue ~r
Kmo
yacAegyem npu3ak?
body {
354
color: gree ,
color: k;
css
ora~omaUme
femeue
nraeuff
~ra3efoM
Uue aiieme ~-
f, mr n
: olliuE:o. l}allia
9 - nocmaBum ~
Mecmo E:faH9efa u afut mu

oiiiu:}(u, l} alliu ux -(
355
.v
jl
n

lounge . html
:
<
class="qreentea raspberry
lueerry ">
um8u.

L-:
< class="rasperry lueerry
qreentea">
.
?
um8u.
SS- n
p.greentea
?
, n .
u.
raspberry
C.t..V..II\v ~.~, w.~
.
?
6u.
n. .
, :
<
class="qreentea">
.
?
3ii.
~,, ~../6~1 ,.;;'.0\~<.1<-01~<- ~

../6 CJJ- <J.1...t.. "-'>v.A.tj~'\1\...
".;;.~ '"'f"..f61.II.Oj.ILSI IUI.O\vc-01
1'Mfbu.,~.
v;;.'1. ,.;;.~ t..
(1")
"'f'"\k\.P.jt..~~
,.;;'.o.bll.O OjM..J IU\.11\vvJ
'\. ~.~, '"'fOI~'VI.O

, 1\.0\~.~'\1\.... "'f''VI.0/"~t..,.;;'.O..- "'f' 01~'\.
l"j'(~tv..
Bawe CSS .
CSS , ,
. n , ,
n ,
. n
, . -
. ,
, , ,
. ,
, .
mecma
26 mekcme u wpumax
S$- ,
. CSS ,
, , ,
. ut
,
.
font-family,
, ,
, .

.
font-fomily.
Andale Mono
. CSS
Arial
, ,
Arial Black
Comic Sans
, .
Cou r i e r New
, ,
.
Georgia
IIIIICI
body
font-family: Verdana, Geneva, Arial, sans-serif;
Times New Roman

Trebuchet MS
Verdana
font-size .
- -
. CSS
, .
, , ,
,
body
font-size:
358
.:., J(:H3i:l!}
14 ;
n. n
color.
~ .
-- (we-safe) ,
,
body
color: silver;
- -- --- -CJ
Aqu>
Bl_k
.,ucb.da
<A>r
(:1-.:-11
u~c
Maroon
N a "'}'
\':
Ong~
Purpk
CJ
...
Sit\cr
c:=J
Wbltc-
3 w n
font-weight.
Tcl
c=J
"=Uow
lighter
, , , ?
?
. ,
normal
font-weight.
bold
body
font-weight: bold;
bolder
text-decorotion.
text-decora tion ,
. , CSS
none
underline
( ).
overltne
body {
text-decoration: underline;
line throngh
IDII

359
Umak, m makoe ceeucmBo wpumoB?

font- family

sans- serif.
, ,
- .
...
n .
r n w: sans-serif,
monospace, cursive
fantasy.
serif,
CeeucmBo
sans-serif
on woro n ,
n n .
verdana
Arial Black
Trebuchet MS
1> c-t..J~A.L.V...~~o Jt.if~~j.s~...;::.
, Q~c.-t..IU>..I... ~ IOjt..V...
01'\..11\..
Geneva
~C,C,O~I..'I.fjiO...;::.c,.s~ ,~!-\..\.. ~
~~...;::..s~.'\..
""
3~<-t..~G-'\.
...;::.
jUW/"~ .11\..~1-\U..
~/""W(\1\,
CeeucmBo
Arial
~f'1"-'f>...;::.l1t
serif
1.. t.r.OIG-11\.. --.-0
"f'. ~j"--~-
C.t..J~A.L.V...~~o .S~"-<5-JU"f Vj'.I...

~wp.11t ~t..jj~<-t..W-.
!-U)I.
01-\..11\..
~~...;::.,.s~
"f'~t\..t.. IW~IOW.LfOI j~ t...
~wp...;::.11t c.-t...t..V...~~~ .sf.
Times
')
J~"-<5-Jt.if
Oj!-U)I.O\t..w. (<~t..j
Times New Roman
Georgia
jOI<-t..W->>.
n n n
w. , w
n
r, nr w
n nnn. ,
w w n
w, n w
nnn .
360
'ceeiicmBo monospace
Courier
courier New
Andale Mono
C.t....t.~.go ""'Oh-OJ/"~_ >v.;;;,.'\1\. 1.j ~~o.gf

(,'\l\....gOJ1.l1t. 1(.()";::.0/"1:11)( '11\...U(), ~~'11\..~$.().g.jiO
~'IAf'O.gOI~ ~1ilt"~- l-f~"1'~r (,'\1\....g <<i>>

:;;. ~ .Oik(JIO ?.t- ~1ilt"~/&k- (..'\1\....g <<.>>.
.'\1\. ~~l1t. ~bJ_J.IO.(...s\ .g Oc.D.gi'\.O...j11..9.
.f'~~ "'f'"1A-..t.f0;-g l(.()j~ "'f'l:17.f~.......
C.t...t.:\i\,.(...~O (..11\-(Jivt.. >vv;;;.o'\A.";::.
~Wf>.O.gf a.jk-.gl1t..g I(.().O/"t:/1)(

....Ojo'St\t /".jl(.()""~ lAI'\.O'tj~
.gl1t. ~.j)u;;..t_.gvv;;,./"LOI,;;;:.b .OI.k-'...t~wp.1:1t.g ,)OI't.OO.gi(.L$(_
11\-,)
pa:t
: , :~
serif, rn :tnr ,
, n :~
CeeiicmBo cursive
,J
sans-serif,
. , n :~
monospace,
rn , n n
. :~
cursive
fantasy
Comic Sans
r n n n.
CeeiicmBo
fantasy
LAST HIH.JA
lmpact
f Cliancery
umt r mrufmo
- r
, .
, ,
, n . n
, n . ,
,
.
@ainbridge}
\ u:loo!V
Ceeiiem8o
monospaee
Ceeiicm8o fantasy
Q'alomino}
Ceeiicm8o cursive
{ 1Anget '
IIceland
Ceeiicm8o sans-serif
Ceeiicm8o
r crush
jNautica
(Quarter)
362
serif
Onpegeeue ceeucmB wpumoB
CSS
, , .
? n
font-fa.ily, sans- serif.
0~11\.+W )(DII"DI""'-t.r~"WUII ...L...-.g01 ~~o.g
'j"ljc...DI.gM~ t-0~01/i.. ...-.'"\... 'j"'1-jU1D1~)\1\)( t....~
iJ.g;jDI'I.J);jDI~t...J11>< ~~~-
~'-:.....\
body {
~1..t.. t\;).gOI\"1..'11\..S\
~~o.g "'f'DI.g1..A.w1
- ~-...;;;;...rt..-.v.r"' ~~~-
Kak pa6omaem c6oucm8o font-family
bDI... t\..1... O~J\;)01""-t...b+W ~~~0\W.b t..111jot..

.g DI'I.J);jO\...t...tVIt...J11>< ~~0\. fV'o~w::.:
~;jOI.b j.gOI/ ./""11\. "\. W..j.1> "'f''j"!jj~"\.'L.I\.0\.gt..~
font- fa.ily
.L1t. ~.)~I"I. W.obiW ~~ "'f""\....t...tVIt--!1\."I.
n . ,
"'-'> ~...\1-\."\

, ,
,
.
...
~~ .50\.,-w{. ~
....t...1.. . W.e>.\(.jt...DIW.b tU..~t...DIW.t....w1
"'-'>""-.~ . . tU..j&:>.t.. .gO.)...O~+Wc..."I..g ..,...W"\. .A.ft..IW~fO'\1\j'~DIW.b ~1.<J'""'I11
'"'.orw.. ~,mw. ~.)~./:11.
t.
363
1k ;-
nopa6omae guk u
fll<:i/<.pw9/jour,..Jf)oum&l.hlml
n, , ,
r
CIIIA .
,

!I .. n S& ~ no Tq)pHtopUII I
.2 0
2005
,
, ,
-.
, ,
.
:t
trpoexan 1200 .
~t : ~
1. Bana Bana, JIII r

2. . -. mrr
. :)'R, nmn-
4
5
6.
14
'Pt\,J*- ~IA4'""'01r ~~i. 1-\..0 ~.....~

j. j011.MO~IW.g c..N.f/1\t'>...~~ <-~.. '5~'\.{
. ,
umrr ..
. urnrr ApiDoa
-41 . -tk
JI,
2005
81tcJI Dapo'U:)' t~: .urma Save : r

n w .t' N11:,
: WQoryr n ..
. +U.. ~ j"FD\~.u;.. ..
wr
;n.
~0\.\ .g~t...t.N>. "fov.N.o ...N.~--...

.g'i"D\.go. D11t.0 '&1:11. ~oro~o +U...k\.OW
~~~~ u.. .g~t'>...'I.i. .g'IJr jo'SD\.g'I..g
, 1'06 & xawtal
2005
..N.'\. ~~0\...
v'\. +U.. ~~11t01. <fX>.O'lfOI<P"'-'I.t
.\ v.N.t'OI"'-W;jDI ~+W~.gu;;;+S~{
--....~ +U..--.a~u;:; jo'S01.g~
~~0\.. ':;.gu;;;()l,_
_..../ .
IlepwA . r :r~ t. "ttt oa oJUmo.
J C'tc>f>OY ornpasnc 9 nt1' Q.. co6srpanC11

.r, - r ~~~r~-'

iPod
sr
w:.w
. - n .-.. 't:~
nr. NJtJ11o 'J":R : ~
364
~I<ifR 9
3g
c6oucm8o font-family
n n
nn
c hapte r 9 1 j ournal
sans-serif.
font-family.
j o urnal. css n
n:
body {
font-family: Verdana, Geneva, Arial, sans-serif;
tv\f O"'f~t..lt.S\t..J\.1..
....g'\...., fo"-t-~
'l,.JU\ ~~
ofj>.
V
S" U: ~"'-"jO~~
OJtb~~
1/j
~ ..g....j"'-"....
E.c. .Jt'\, ~'I.LU>..gjL'\.c....::g'I.L
...CjO~f
tu...
n ~~jOc....j~
'I,V...cJtb~'\. ... j.OJt~~WO
~~'I.~..gL
nO..t'v'\,.;>',tr
...-.IOv>'.l.f>O..g (\~ ....
1-
v>'. ~~
)(~~'\,L... .g(!""'-f'I.
<bofj>{ jMvA.tj:JIOv>'. .;>','\,

~~l1t.
Afi~/
~~ ..L1.-.......g~ .s~~-Juf.
'1. 1-\J)\ ""'-<r '1. 1-\J)\ jl"~
_/ ,
3jU.. 1. ..g~fM'I. tU)IS"of'

~'\1\.<f>.O..g vt.....t..'\.c-.._._gD\
JDI~-Juf.
n .

journal. html,
j ou r nal. css,
<link>,
chapt er9/ j o u rnal .
11.-\-~L ..g 'l.II.DI..gL .:r..gl1t fL..gLJt'\,j~"'-'1/..-rol'v'\,

....,.,'U-'\. -rt}
<! DOCTYPE html
PULIC
" - / /W/ /DD
1. Strict/ / EN"
"http ://www.w3.orq/R/xhtmll/DD/xht:ml1 -strict .dtd" >
<html xmlns="http://www.w.orq/1999/xhtml" lanq="ru" xml :lanq=" ru">

<head>
<meta http-equiv= " Content-ype " content=" text/html , charset=windows-1251 " />
<link type="text/css" rel="stylesheet" href="journal.css " /> ~
<t i tle>Ha CA</title>
j
</head>
3ju-o ...l1t VO,)'j_DIL<ody>
vv&t.Jt"-j ....O=f>&t1.
~ ;o'\:r"-"'1-~J.
</d>
</html>
,
.
ecmupoBaue wpumoB mu u
SS-.
n
sans-serif.
...
lr'lluf'. o"f~~ ..t..Nit...w. ~~1-1. ~ ~

~J-~/"~t-\-~!11. 3""'1- .~ ~l1t1..Sij.sl"'~
~0.1\.U.. t...w.ll.O/ ~t-j j~U...~ ~~ jO v'W( ..../"
n +<><
!
20
r,
no
2005
0~'\. ~~'\- jOC:.OIIOti.L> 'ZfO..D~"-'\A.Jioi.'I.jA.S1
.'li\. :./"~~1-~11L
~~ ~ Ol~jOI~t- .I"-L
"""'"'"' '- "'- ""'""' """"'""""-~

, n
1200 "
noblan
~-t-< :
11(,I)"-~ fo"'-t+.,...;/~ - t\P.v~t

v~o'li\.~0/ .~ ~~ 8~\\.8-.U{ ~
1.V....oAb~v.s\ jA.SI ~vV< ~~ t\P.
~/"01~1-';-7j01.t..jA.SI .W< ""~~~
1. ani!l Bei!l, I! 88"1

J..111, UII
2.
3. n<n,
4, II
, II
. --1<, ,.,
4.
S.
14
IIIOJI,
2 0 05
...,..~ ..
11 n >1 urrna Shve >1
r" :
n~ 811I,
r .
r
...
nn-< n, n !
Bo:IJfoCbl
fot..family, r .
r, - ,
. .
n n m
r n, anp
ep,CourierNew?
0: n , n
t<r : sansserif serif,
]j: , n
']j: ,
. n:
font-
family: "Courier New". Courier;
']j: , font-family n

?
0: . , n ,
n n.
366
n rn,
n?
0: .
]j: serif sans-serif- ?
Serif sans-serif?
sas-serif.
rn .
serif
rn
0:
Serif sans-serif -
serif sans-serif,
, -
serif sans-serif .
Kak m,
u 3 nob3o8ameeu
m8 3u wpum?
Andale Mono
. ,
Arial
- ,
Arial Black
,
, -
. ,
,
.
Georgia
, ,
. ,
IIPICI
, ,
Windows
OS),
Times New Roman
Trebuchet MS
. , ,

font-family,
Verdana
Windows,
, ,
Linux).
,
.
) IV'1:1t )(.~ .~1:1t

~ l1til. '\.(-vOJLb.)0~01+\-
''"'-" V
""
.1.- ~~.l:1t
~:ro""'
+\1!1 ~U'I.t +\1!1

~>..-....tI>;
IV'01vi"-to.sk
Geneva
Courier
Helvetica
Times
() D .. ~ 1-\..l.U C../"OII.t\..0'1..0
- ( .I~<:-
~~<:- 11L ...... 1"01.....111-.l-1t01. .
AfiOI/
~-Jj~ Jr..O\t\.D~~ 1-~ \Ji~ow.s1 1-~ IV'c...f
t\.D .u:.-111- J 1- \-\.. +U.. ~-Jj~ +\J!\~t..!-1... ..
367
:.-'\. ~1:11.~c:.-t.. c:.-jt..A 01 .._.;;;;t..~

"'1"01~'11\.Abt\.D ..;;. 1(.01 ?.j t11.11
38 wpuma
\<>..OAb,)O~OI.t..Ab c:.-.D?r<.t...
c:.-0\.Dc:"v;;.O.s\v;;.t..Abt\.D
, , -
1;]~'11\.'\.~\v;;. f01,)..l.ft1l
, ,~'
, .
? n . ~ ""
, :n
01 1'\J)\ ~ 01 ~,_
~-c:"v;;. Ol\'\..w.t.. .'S~:~tt..-;)
<
f
-.!_ ~ '\.,.~>...
C)(Nt0
~
1:11. ~~~
. c:"c,t..AOI.,;;.b.
, n , n :
. ,
f ont- s ize : 150%;
~
t.Lh 11t.)~~'\. r~ '~r'~OijNI
~01 <bool-:J> ..g "-'\l\.l(..(.,t..0\)(1 OljNI jOI'too~u.o~

~~oto -:JfO~tUI -:Jc-v;;;Oi~'\1\..J\.'11\. y>OI,j.t_y> /ISO%.
, -
150%
.;_.
body {
. '- ?
,
f o n t-siz e: 14 ;
f o n t -size- -

. ,
...
. &
U.O..'f'Of""'
. ... (.,I)f
1(.0\1(..
368
14'.,;;.
hl {
font- size: 150% ;
\
.J,r
n , - ~

em.
em
)
Ht- ""'::1v;;:.01,,..;;;;,t,
. , :
.-~...
v;;:. ojt'.DIOit,v;;:./ v;;:.
font-size :
:::-'f'\)AU.f ~w
wpw.t~~
~~t,v;;:.
1. 2em;
.
(~)~
...O\v~OI~0\:>01+'-..
.- IGO<jx/-~~.. /1 /2--
, -
<h2>. <h2>
<
o:J1t,v;;:.
1,2 -
ro , 1,2
01
~OJ,
c.-01...o...ju..t.. fOI ".t.r'
v /1 1
"
1001\:>t\.S\.bc.-51 ( /1:'/Q
'
~.~.g ~rw.o
, 14, 17.~ '4";-~ t-'1.0 j 0 /1

body
font-size:
14 ;
h1
font-size: 150%;
}
h2
font-size : 1.2em;
}
.-"\. tU'If"\.VO.gOiv;;:, ~~t-jt.rt-.gojN1jOI<(J~"'r . c.-v;;:.OI+U.W. .g~r .

(l/1) t\.Div~ .-.g,,.---{01 ov;;:. (boDI'")' \..;;;:...~ r"'J...t.r uo ~~"' ~-i5~
)vv;;:.OI.gNiv;;:,b /150% ov;;:. f"'JAU.fOI ~~01 ~\ (boD/'~>.
hl- 21
11OVIG()Abi<(J t t\.t- j~OI.gOIA11\. f"'J..tt'
~vupv;;:.01jN1 ~\
(f>/ v;;:.o ~
t\.i)$.o~ F"'J ~~"' ~\
(booi:J>r F"'.gt1. /1f)(
.m! ~
369
:
i .
x-large
xx-small, x-small, small, medium, large,

xx-large,
~~:~t. I"OIJ..tt'i:lt ~~r'wpw.o..g1 1(.()W.o/"l:ltt..j~Div;;.c.- I"OIJA'IA.t\.!J..1A11.IOL..gl1t.I.-1A- .-..gD!-1-/ .,,;;;..-,;;;..- j/":JZ- .,j/":JLO- W.OI"-1A--
0~/"0\j-. ~jl:lt'\_ ".!L2j)I0~11\,'\_ /"0\j..t-r' hf~N> t\.01 2.0%

~O.II.bi1>L ~~~~1..0/ Dl J."..,.DI/1 O~l:lt.t\D fDI..gU~.-/12. ~n..~O..g
..g ..gl:lt)W'.j- l .1..-- t\L ...uu..t... t\L jDI~~DI'\_~ ,;;;. II.IOL..gi:ltt.. c.-o..gDI
t\L ..gc.-L1jDI ~1!\,\-\.DII(.()..gO O~ljL.II.IOW'.c.- ..g /"OIJ.II.1A-+Il11>\ ~/"DI,jJ-FO\X
1- ~.ll.bjO..gDIW'.L.II.1A- ~11\, L.II.Dit\..1-1- D1(J"" W( n..t.rLD~IjL.II.~b.

d
font-size:
}
sall;
1_~D ~w..~--.~..-~
... ~~ _
.
~
I ~Di~1A-JLO
1 $J
j~DI~ /"0\j-..t.y> '11f~Di ..g ~.~..- bot.j

fOi N1t... ~1-...t.> /12. "'-11\..k....!Lo..g.
Umak, kak >ke 3agaemc
xx-small
x-small
small
medium
large
x-large
xx-large
3 wpuma?
, .
?
, ,
.
small medium)
body.
, .
body,
em ( , ,
, ).
, ?
d,
-, body.
, ?
body
small, medi um,
body.
370
?: 9
, . -,
<d>.
, :
d { font-size : small ;
hl { font-size : 150%; }
h2 { font- size : 120%; }
.mm
lnternet Explorer
, .n w
nn.
, :
, n lntemet
Explorer
, n
. n,
n n
.
n n,
n
n
-
D"" 'r'
small
~"""""'-{o~t-,;,._ "'-~.....twn, ~'"(] ""
n
n
n
<body>
,J-D\~ 1'\.0\(,~(,.S\ F"''""-1' -~01 ~01 {bool~>.
( em %)
, IE n
, , .
, :
"11t r~t.AL ~~111..~ r"''"-'1'

>~\ V\1\V\ ~j~I..... \... ~
jL.IlOIL> ~ ~ ~r'm"t..
"". oc...;;;:.O\bt\I.t.. ~11t
\~~...\~'\1\.t..1..
c...;;::.OI~.S\~(,.S\ ~~
hl - 150cro body .
120cro bod
body ,
. ,
body.
, , .
, ,
.
371
,- -
3 wpumoB
g -mu u
- .

j ournal.
j ournal. css,
chapter9/
, .
, ss-.
body {
hl
h2
font-size: 130%;
1
~
~~utv
"
<hl> <h2> em, n?
t -
<~> '&L t :>qJJ~aed 1.e'D'g <t>
:1.e8l.Q
ecmupo6aue mu 6u
3. ..u>.g .gl.f'c..'\1\.S\1-g I(.().r1- I"OIJ..t.r '~t''I/',;;;;o.g

~...__,~~ Dl-0 ~1.t\, e",;;;;l"~l-\.~111. e",;;;;~..u>.g~c..
3u wpumo6
~OAU... "'-f''\1\.S\.t\.l:lt..j.I\.S\ 1..11.01,)~
. ...
\~ J011..0o.go~ <>
.giZ..I\.S\j ~ 1'\A.I.AW'W
_)~ 01-\. ~ 1-\.L
h.Oj~.g.!Uit-. c...go'\t\...
~---....-l"liiJ.!vU.fO... o~.g..u>1i\.
,;;;;~ tU'\ e",;;;;."~t\.~L.
~..Lt\.IO~
11 "..~\-\.W j.!UI
t\.U.O ~~..
..--- F'\1. ~t'I.~,
1200
1.
2.
3.
4.
5.
.
14
-,
,
,
,
-- , -
2005
Burma Shave
:
1.
2.
3.
.
-I
--
(I(.().0/"11t1i\.(
(.,1(.()/"t..L
.gc..t:LOI I"~.g~-U~t...c..
/12.'f).;) 01-\..gc..L ~L
).;O'fo~ ~~t-... .
3011..0.g~'\.. <~>
,;;;;~~?L~
,
4. , L
5. , Ar
l"~~~'ti\_ /16.",.,, ..u>

oal1t..u> . 3~:g'VI"(..'I...
. /"~~- Oji'U'II(.()
.g ."~....rt.. .s-.~
.
-
...
, !
2005
, !
"..Lt\.IO~'1.w.-1
'1. '\.).; l"liiJ..
).;O'fO~ "t-.~t-....s\
" /"IJ..... JOI'tOAO.g~

<>.
I.
31
Bo1Jfoc1
]j: ,
. ?
]j: ,
0:
, ,
em %?
<body>,
body
fot-size d
]j: em %? ,
<body>,
?
,

body,
90%,
90% ?
0: , .
0: ,
body,
<h5> <h6> .
body ,
90 %, 90%
,
, , ,
, %
SS-.
0: , .
]j:
. .
, ,
]j:

. ,
em,
16
em.
]j: ,
: ,
, ,
0: , , 0: .
d ,
. ,
]j:
,
16 .
]j:
?
0: , 0: , ,
<h1>
200%
body, <h2> 150%, <h>-120%, <h4>-100%, <h5>90% <h6>-60%. ,

<h4> -
,
ltemet l)
. .

.
-:
Hacmpouka mu wpumoB
font-weiqht
Starbuzz
. ,
Ji ,
.
,
font-weiqht
bold:
~ont-weight:
bold;
.
,
,
,
Starbuzz
~ont-weight:
noral;
font-weiqht
bolder
liqhter.

.
,
.

font-weiqht 100 900,

.

n SS-, n
bold, n no , normal.
n SS- n .
.
.:.r-
375
, ..
26ku nmm normal. Tecmupo6aue mu

, SS- ,
,
font-weiqht <h1> <h2> normal:
body
font-family: Verdana, Geneva , Arial, sans-serif;
font-size : small;
}
hl, h2 {
font-weiqht: normal;
}
QIJA
~ ~ flle:/l/chapter9/journal/journaJ,html
-----.
h1
font-size: 170%;
}
h2
font-size: 130% ;
1200
1.
2.
,
-,
. ,
4.
5.
,
,
--, -
14 , 2005

Burma Shave
.
..,
, !
2 0 05
fuiU
Cmuu3au wpumoB
, ?

. , :
U IU - -
:r-, mr1
cmaaBuBa:tom
CSS
,
,llJiff
IIIftifma ilfaBo.
font-style:
Cj~~~
1"0\~0v,;;;:./"0\~
o~vJ!LCP.f I1j 0\
~.II.L(. 1t01Tic.- ",;111.~j.
font-style: italic;

,
. ,.:t .
,
1"t~>./iv.s. ..-1. ~l1t .~>.~
'jULOit...t. . ~ ... ~
.~ +U... v,;;;.Oitu....
ll()/"v1.~~ I)...j
tu... jOI~~OIIA...L
"'fO:gLf".s>..b v~OIA.. Ij
1
m r~Rm
meu IIIrufmau
u ;rru, m
u:tm Baliiu
nocemumeu, 1
~m U cJaffX
noJIam KfcuBHiU
IIIftifm, fu -
IU, uU
om mofo,
u mu
1 u.
font-style,
font-style:
oique;
.J ,
~
.::: , - . ,
:-~
u ;r, m
:IlfoCJPo
KfcuBiu mu
;fm BuMaHuff
fauuff ( cKofee ,
, .
1 f m
m KoHmfoUfoBam).
?
.:-~- .
377
c mum1
CmuAu3au umam kypcu8o

mu u
n n
style,
no
.!J file;t //cl\apter9/journalfjournaJ.html

font-
Burma
Shave, <lockquote>?
,
.
<lockquote> font-
style i talic:
lockquote
~ont-style :
italic;
S5-
j ournal. css,
.
,
Burma Shave
, n
1200 n
1. ,
2. 11,
.
4 . ,
S . ,
--, -
14 , 2005
Bo:IJfoCt
Jj: <ockquote>
t <>, <blockquote>.
?
0: n,
Burma Shave
<::.

: ...
, n
<> <iockquole>. <>, <ockquote>,

G1 .
Jj: n n
<ockquote> <m>?
t <iockquote> ?
0: ,
<em>
, .
- <ockquote>, ,
<ockquote> . - n,

<em>
, n
<blockquote>. , <em> ,
,
378
m g
,;;;. I'\.O.g(1t,:., ~'\..!I. j "~t<..

1>'\1\.f.t>. Jitu>.vt.. t'.. ~r~>.v....~ tov-...1A.
~"' 1- ~I. ~l'\.01 ~.,'\..II.c..J\
t'..i(..O\'U'\ti. ,;;;.~.
. ~
. ,

? n,
!
, , ,
,
,
.
, .
,
,
. ,
,
,
CSS.
'.:~:
Kak mm
63n m?
,
, n : , ,
. n?
n .
&ni.I)) nn
r, nn
w , n-. .
-. r
n
100
, nn r .
n, n w
100%
100%
100% r,
r ,
n . ,
n n n
n n n .
~ 3"'" ~<.f>Oit-+\L'IIi..r ~'11\. 1.. c..'\.

~'I.'IIi..r ..~~ji"J1-c..ji"J:O...
11...."'"r1.t... ~ "Jw.v:..I"!'\. ;:g~ j~VI.j'I.

"'"'-r "'" h.OAj'I."'"C...S\( t...VA'I. '\.)( ""'t....L
~"'".
, n, n ..
60%
no
r n, r
n? w ,
? r n, n
, n
nn11,
.
380
C'\1\A-\-'I-iA. 1-\.LjOt)OI.g.JLu;::,c.- .g rt...)JAbvt'.'ltl.f~IO~'I-iA.

~t..vt'.
1'\i)\
3"f"OII'U- tl..()ft\>vIOW'.t.r>Oif vt'.OIU- l(.i)IU- J~Oit\..0
~% v'\-\'U..W.
, n, 80 /
r
40% r,
. , 1 n.
, t
r ,
n r .
~'I-.g ~% "f""V+\..O'W
'\- % ~/ ..1 to.OJ\.~
'\... "f"'\1\..S\.t\.tiA. DfOI~t..~l1t.iA.
"J.gt..vt'..
n,
no /
, r r? ,
n r
n, n n
381
.u

~ u~?
no ,
nop?
n , ,
nn
CSS
nn
17 .
17
n ,
,
,
16 UJI.uo.oe .

L,
,
ftfc1257 .
,
, ,
,
.
Kak 3gm 63n
6m?
mu 3 n .
CSS
, -.
1,
- 1.
, , "
, ,
. ,
.
,
, ,
Aqua
Black
Blue
Fuchsia
Gray
Green
.
.
Onpegeeue 6m J
eto J8u
CSS-
. , ,
17 ,
. n.

b ody .
CSS :
Lime
Maroon
Navy
Olive
Orange
Purple
Red
Silver
Teal
White
body {
background-color : s i lver ;
}
~ "-f't\.g1..AOj.II.SI
c.go~...-{0
boo{j
b0\~1o1.Ar..d-c.o/o;.
J,
J"j""""'"'
1"\P.:j.gt\+<.;I)...M-.
, ,
. ,
,
~ n
silver, Silver SILVER, .
17 , CSS. ,
711
, '-.._,/
.
Yellow
nut: t-
383
ng 8m J J, JagaBaeoe mu
kpacH020, J8A8H020 CUH820
, ,
n . , ,
. ,
80% , 40% % . :~
body {
background-color : rgb(80%, 40%, 0%);
}
H011.t\.t\i...W.t..." ~D
~1__/'-
1'
301>U. ~ "f~I1!X .~~ .)~OI~OiiA...W.t... "'fOk..O/"':J1.1.
_ 01~
1<f>Oic..ato1 ~":"-~ "j~t.W.o~1 ~.)I~~
~"t...~'\.\~/"I ow. ~~110( ~

.,~ fuXIj~ '\. b/'IIU...
c...;;;,OI~'\.W.b U\....~ % n..O<-.A..t... 1(..01 ?j 01.0 .)tU>.t..\'\.:\1\.S!.
,
z
255. , 80% , 40% Ow.~t-~OI ~'-r~W.c.-JI W.'\. '\t\"(.,AOI
% 204 , 102 ~ (I0% 0 ,;;;. 2.55 _ . 2-0!f
.
-% oW.
2.55 -
w.
/102.
body {
background-color: rgb(204, 102, );
}
/
~
~ w.o~l1t ~\(..0\.)0IW.b .)tU>..t..l"-~
IY111t ~<.-t... ~ tU>.~t...."
~D. ~ ~ 1..,Jt01)(1 01 1'\R...~ ~~"'>~'1
"'foc...;;;.o t\.t\h.t.-0\""'0\1.""'t... '1 at...)

<.-'\....~\ % t\.t\ ll-OIVJf.....
Bonroc
]j:
RG-7
255 ( , ,
n .
).
]j: , n
0: , ]j: r , -
255.
rgb(100, 50, 200),
n RGB
, ?
, #00fc9.
255
0: . n ,
0: n RG-
, -
,
. ,
. ,
384
CSS. ,
rgb(100, 50, 200), -
Onpegeeue 8m 3 wecmagamepuii kog

. :
,
. , n ,

n - . :
, ,
, n n1
nn n.
,
: n

255.
99, ?
, ,
255
F).
,
, ,

.
m r.: '( ''
um pykoBogcmBo no un38u
wmgmu kogoB
-
F).
9),
(
, ,
: : :::~~
'w:c D
,
-fi
;_
'.1~ F
1""- """"' .,g.""'-"'- ~""-
J~DI~"\1\.~'IA. "~t...t .w...t..1'\:\.S\ .g0\.1\.\-j::.I.~ Oj~j~V~-
N1t)(
"W- j~ ,u;;:.\ . jo 9.
~\ .gtftjOC::."\1\."LL\t..AL
' , , , ,
11. , El FF?
, n", .
War
nepaw
31~ w~ .
, ,
. .
#cc ,6:!s
'P"'.)~t..'I.""-t... ~4.)~01""-t...1""\1\.~ w.-

~10
386
./7tJfl 9
6-~ :
'111..
:~ ;
"f"'""'{JIO/
C,'\U()IO
C::.OI.g~ 10~'11\..t....
~7 r~
~V~"\1\.-
'I..t.. '\!vt...)~"'. >~111.
c,o-
War
u w '*40.
, ,

255. :
DOjb..~t.. ""'' -
.g/:lt.,. ,),..g~ (,'11\.....g.
'11\.. "'ft..D~l"'\X:/1....;;.t.. u.o
.gjLV.!I...;;,'\1\..!Wt.. 'W,..(
~ 3~...-;;.t.... J..!W?b...;;.t..
...;;, '\.-
tU1\
/1 (?.
~ll.O~ -.?~t..
..-;;.'11\..j.g~ '\1\..-~.
Wr
n 1U1 .
.
:
66
~
102
;.
...;;.o~l:lt "'f't..D~I"OIJO.g~...;;, bbf

~t\.D .g~At\..~b ...;;,~1(,'11\..t...g/:lt.4'W,..A.U\.W\ ;
* /l b) + = /102..
...;;.o~l:lt hft..D~l"OIJO.g~...;;, 001.gl:lt

,'i..t. .g~~ ..-;;.~1(,'11\..t..
;g~:~tw-~1.S\ : (
* /l b) + = .
War
r
wara
, !
, , .
, ,
.
.
;1
387
.,,, ~ >-:" ';' :1' ., '
guu m
. ,
. , 80% ,
% .
40%
CSS :
body
background-color : rgb(80%, 40%,
%) ;~0 "1"-jt..u...:w.,t.t't-3 "f'0 ~+Wt

voo.+W~W...~tfOICA'I.(IL()f ~
""'..'\;),
body
body
ge aiimu 3n 8m

n, Photoshop Elements. ,
-, <<n>> n RGB
, . n n
Photoshop Elements (
n ).
Do.~'IA.~......go "'1"01t't....
jJU\ f~Ot~1f'O~Ot~11\.S\
'VIQO~fMK~'IA.l. V<>jt.r
t. 11\,~t..~-... ~.'\.\...
f':Jr- I(.().r... .+W
t\.01 1..1\'\) ~~f'Ot.b .1\~,.
~~t_.( ~AbJY ~~~
'IA.Jt'IA. t\..L.U(..()Jtbl(.() ~-16t-.o -
~tltXj'IA.Ot~O+W~.
Color Picker
Select fore.ground color
<
~ Cancel
Help
~1(. .O.I\bl(.() ~11!.
~~-t.rt-.t- ~
+Wt.... ~~t-.f "f'o'tpOi...DI !)!(.\ t-.
~0\.. uo jt\.01~vu.. ~ 12t-
~~~0\.t..
f'IA. +Wt.l. l(.()j.
UcnoAb3o8aue u-mu 8m8
......
---
tndl...-ed
=----,..;
--- =--.. ._
- - ligiql
-, n
.
,
.......
-tm.kl
irghlyel!ow
IJ.I.tftt
._...
""""
Lto<IO
I LU.b9-
oyon
ltO.t
khold
~e&:~ww42
CSS.
.. ~~~~ ) .W./"~'\1\.~111. t.. 11
t...v.wk,l"uf,~.o;j /w;~; ji.JJ,_)JofJ (/";j((.'\1\.ii\.

0\~'l- - l.ffl": / /f'ltl...wi4AI"ul;~.o~/w;~; jYo[)
--iut
llgh/oy
O%A&YoDO%DZ.YoD0%1>5%Dt1%&Z.YoD
0%- [) %z._ \,JJ,)~ ":f"fjc.W.DI-Jt.Uv.\.D"Iil..
.g <<bV\.Ic.:\1\.~~11\.>> H01~/"01iS ~ ......o'IIU...-1.Lc.L
<L.01~01 ~-t..,.;;;.o->'--111. ~'1Ajt..,.;;;.t..
~ -t-W~..-.gojl":f-1>( ,.;;;~~.
....
-t.t.t-&S
--
--.
._.
""'"
""""
...uu
-.......,;..
.......
mediumWrqtda.e
""'~
........
'**
...
slcyoluo
dooosi<Yiilue
dodgoot>luo
medlumiut
~
Y~~~.t..LI01 . jJ\.,9, --1>( ~-t..,.;;;.o- ~~t..

"'f~;:g11\.J\.b~ ~~~~W.t.p'\1\.~ t.<.Ojl1tr 01 t\.t..
"':foc-,.;:;o .~~ +V;j'-~~11\..9.1 t.<.OW.oi"I1LL Vt.<.OI"U.gc,t:>t t\.1.. ~.jjjw. ......ojjt.r~'\1\..g~,.;:;c-.s>. ~l"r"'.1...
SQNs.._,
..........
--IOOWO
.__
.
-=
"t.fU
...",
.,.,..,
......_.
l1ono
........
O?Utoo
IN,UOf
Bonroct
'Jj: , , n
- n, , ,
. ,
r,
n ,
(n,
n n
n. ?
0: -,
r. r r n
]j: n , n
),

. ,
0: n,
]j:
#. ?
i no
0:
, n
. , #
#, #11-#1.
. ,
- n
, , : #10,
, n>)
, m
, n n n
<):!;11:.111'
389
lt i ecriz;;ai '-'f'''
-:11:.: . ;.=.-1,
n . n ,
n . ,
n , n
.
- . n n
, ,
. .
:
body {
background-color:
#8170;
}
n n :
RIGRT---
LEF'f
RIGRT---
k mu u...
g 3820Ao6ku k6u
.
u ngk ux
, ,
.
. , n ,
.
,
n, ,
, . ,
, ,
n .
CSS. j o urna l . css.
b ody
font -family: Verdana , Geneva, Arial, s ans-serif ;

f ont-size : small ;
tV\11t )(.I... 'jUlOI.b jOIW0~1. <>
1. <\..2.> ~O\~t.:~l1t...~ ~..~ 1>\..0~0\t.....
-~1~ -/;~ "1"01i:>1. j +-\-111.>(.
hl , h 2 {
fon t -weigh t: normal ;

color: #6600;
text-decoration: underline;
_ . ~~~~w..t..r1.t\.l11.1i\.l(.()~j
.
v
_
v
>\~"U> ~
0\l "\j~t\hl..O ~
\(./)\" ~(<~.%1 .%1 0.%).

. ~'-O~I I(.().Oy>l1t... ,.(1t
h1 {
font- size: 170%;
~-.\\~.11.1.~I.t... ~ t.r'"1.-01t\-VU..
.~01. tV\11!. ~Jtb~ --1.w..--
fu-o/u.o;Dif;o..._1. 3~01-t... .t...~
h2
f ont-size: 130%;
jI.ti\.VU... ~/;~
lockquote
f ont- s tyle : itali c ;
11 ~
391
..:& <t,t r.;ema
ecmupoBaue 326k8
mu u
....,
-r
flft:/{/t~pttr9/Jour na.I/}Ou-rn~ - h.unl
co1or
hl, h2 , -
j ournal. css,
w- i'< nl< . no
I
~~ jOAO.gi(.'\,. (> '1. ([2>

ot"Oit\.t-~11U.. . xoro~ )t-
.it...- v OfOit\.t-.go'li\.. .t....O'Ii\..
'\. j<>j~OI~'Ii\.. lo"'-'I..

, " npoexaJ1 1200 ..v1.., not),jan
t' :
1,
8a.na,
8w.,n
2.
.-, w AI1Aaxo
. v.
4. nct ,
S. , -.t
6.
14
--.~:., -
2005
Surma Shave
ADporn:
EcJ'if J NIO-IO i~Wfif,
ro
BiiC.
6r
l.01~ ~AbjO.gOI.b h.Oj.I..fi(.'\..gOI"'-'I.L ~11t.
n , awnal
~)(o'li\.. "":ju..'li\... DD1.g011i\...t.-.gj1..1U1t\.t..... tU~~ jl"j.~\/ 01 jOI..t.
'UI\.t...g"":jl1tjt.)f'1fO.gOI"'-'I.S\
~,....f''\...- .'I. h.OjLf'I(.'\..gOI"'-'I.SI

.g..:&-v./"0\~t....
tU'I
~
? -,
, .
,
n .
1111111
#222222
#444444
#777777
taaaaaa
ldddddd
#555555
teeeeee
#666666
#888888
1999999
tcccccc
, m xomeu 3m gekopupo8auu
mekcma
,
, , ( ) -
- . ,

text-decoration, :
em{
text-decoration: line-through;
}
. ,
, ,
:
~ /"t.-J']Ab~OI""'-t.. "f~'l.SI v;;;_oto

~01~~01
em
text-decoration: underline overline;

}
1(..
v;;;_~.j ~I
(t..v..>
tJ~t.. ""/"~'\. ...Ojt.ri(..'\1\..~DI

~ '\. ~jt.ri(..'\..~DI"'-'\1\..t...
- , , n

none:
em
text-decoration: none;
D/"L.J:JAb~Div;;;.L "'1"~'\.SI ~t "'1'0\~V\.D\

~c.-L .g~l1tjt.>/"""fO~Dit\.'l.SI ~~~ ~DI~ '\..j
v;;;_~D\~DI (-...> .
'lac::rno
Bo:nrocx
Jj: ,
.
<em>
L-,
<del>.
Jj: ,
color
text-color?
0:
<is>, n ,

n .
n CSS,
, . <del> <is>
, ?
0: .
border-color.
"]j: , "]j: ,
0: n
, ,
, ,
. ,
0: , ,
. L , -
Netscape.
n, N
,
.},:;.!' '''
393
:r
gu nogepku8au
-
Do~OI.gb~t.. 1-\.'\ll..~t'I. 'tf'0\1-\.~j.I\.S\

~.g <> '\11.. <V..Z>.Dl1tj<>Mr<:LI'\.W.. th1~~v
, ,
.
ofoftui ~t...g~~c...s~ \(..()\\(. << ~t-'\11..1. ""~t- journal . CSS ~"1Afi-\J1t1.>>. DjOII-U\.O. t.-:JOit.. !.j0~0\~.1\.S\t...
hl, h2:
~Ot\JC "":J~1At"~ w-...'I. "j-&..w.o.-
#8 88~88 --. 1'\.'\ll..~t\L.,.'tf'O\~~O\.
hl, h2 {
oJ
font-weiqht: normal;
color : t;
border- bottom: thin dotted #8 88888 ;
t.eJEt: cieeeret:ie n : ~~
D c..Atjj~.,. 't.l\.0\.gt.. .t. --.oji"O~t\.0 /"0\t.-t.-..o~

f.'I.. 'tf'OI\-\.~11!. ~O~j~L +U...JN1t0( ~
~~;;, :J~L t.-O.gc..t..- (.,1(.0/"0!
,
.

-__,....--~---.;
ftle:(1f chapter9/Journal/journal.html
lu-..t.p :J tU'\t.- ~ ~\.'\11..

<> '\11..
<V..Z> j~Oit\ 1-\.'\ll..~t\.S\.s\ ~0\-
1-\.~0\t 0\ t\L o-.Djt.rl(.'\ll...g0\1'\."\II..t...
/
,
1200
1.
2.
3.
4.
394
,
-,
,
,
s.
--, -
55 n n
, n
, n ,
size
font-family, font-weight, fontfont-style.
-
.
sans-serif, monospace, cursive fantasy.

n serif sans-serif.
n n -
,
n.
font-family n
. n, n
, .
n n
n , n
serif sans-serif.
n.
- ,
.
100 / , 100 /
100 / , n .
/ , / / ,
n .
55
17 nn ,
, , , .
n , n
, n ,
. n
/ .
n n
n, ,
Em
255
n n
n

.
/- n
,
.

.
font-style n ,
em,
font-weight.
n,
(55-
, n ,- serif,
(55-
n, n
0-F.
-
,
, n- .
n , n
underline. n
n ,
n , n n
body.
afHUII11 Jiff ra3Me:IPKU

- r
, .
, ,
, n . n
, n . .
Ceeiicm8o
monospace
CeeiicmBo
fantasy
crush
CeeiicmBo cursi~e
Ceeiicm8o s-serif
Nautica
CeeiicmBo
serif

. ,
.
, ,
, ,
.
. :
body
background-color:
#8170;
}
:
(/l!f*/lb)+O=
(/1/l * /lb) + 8:::
* /lb) ++:::
8
RIGHT 2.2-!f
RIGHT /1 !f
LEFT
2.3
~
Peweue
? n
-, n ,
.
n
,
.
#111111
#222222
#333333
#444444
#555555
#666666
#777777
#888888
#999999
#
#
#
#dddddd
#

Sl ,

,
,
3 -, n
xopowo . n

- XHTML.
, .
, n
CSS. - ,
.
, , n .
, n .
gu3u
.. ;-:; : r:..:i
2ocme8ou
Head First.
Ji
,
, .
,
, "I"
. ,
~ , ~
("
ocrnuS!IIdF.-6c8C.IIDI:COIIOUII ~ ~~ ~. . 8 Wd/.Yk 0cmtoltwa.u~~.~o6w ~

IOIJt C-e6JI ki:I.Y.f., 'fll .... xot~ otaJII.'eQ tlo~OJQ4\X 8 llk.II,Irtt. IDWCIWIMVM t.y.tti:IIJPIIUM -'00, k t
blaoAa81t01'opollt O"'tD a:qtcVW 11 Dpln'OOU(IIW ff1niCO 1D 11r.yp~1wt Qpo,11JX08
epe:w ~ ape6w.uu aw 67~ a.c.11;aan.u :rptlq)8c-ltOI ""'-.neot, onuotW.~ y}trt
co.oc~m.'I'O'Wf1,Wo6wn~~a.IJ"''I.)'('.8UN.Itaca. &SI6y,o.~.'t'I'08tot"te:80l CfiC'.UW'8tttJI<:ao6o;U:l
~~IIOt -.OC1)'!t amopart, taDatlt~ co6oll Cllol ~~~
.."CiaJrtU w~.o,t~~'1UC.88WUf'OC'fti,OAWCO<.a.IOie.crutcaeot:*tllc-aaoe.cclf.'&Ioroo
nOCt!Qr..IIUI roctt110fl 8UJrO, 111111 aw lll.ut 1f1''0 Dpo&e9~ 8<) .d3'f>OIIIIJ'O R'"'7 ..8Ue'Ut ' u
~ltf'JI'I.UI~awli o&..:,aw ,.:nc,"t'f'' atmoka'yXDIIO*.I mpcoaasopaans.ll&dllt tlll.:.u'\0
w.11o. w:r. oeo.aaw.cnt~t:,cilie moan:oxat'OJ!y'&II
N~.C t 8C\t: 80'1800 &pclld~c ~ noua.ux, n::e aOCfOJtltaw.l.u.cei ~Un:q>081CJ't0

~w:q 8 trp"t'P8o UIIO.c, otopa-t-.n nuc . ne tm. k'\>~w:e 6awe n6.11001.a
ta~tN.J.aOk~ Bw wortt1'iiiD:m'lo.aoot naJII(a~lrfXOaaraosr.Jtatxnpatcrf eto ..
Do~0\~.1\.t.AW -\.01..1) 1'\..0-goto
!U~JIOl MOIIIU- k~tJIII6007"'f'Oto. I(.OJ 'IIC'J'I: +: aw 88X<t,t~tttt~o. JNe: 8'r~oo6oAaw:l
tOC"')'n n
.-:.t.ADijA.SI o.,."\.!-0\+\..'III.. >.~i.

1..0v.t-~i. '\. .-:.ow1 .-:. .g t\J.-'11\..
-c.a:tpt.avwoe:p~tca:ICO'rt't1'C"""' .._.aeU.1Mwp.c aocorw<rw~We'I'IIe ~W'hllloVIQ

~tpoar. wafn&, ww ..t ,..IUQilfpat_alldea. n 6 ._.....
n uamn-o
"'ftQ~~v.
Naltta.au.~~~oao OOICUWI utllltolt eo..eps:rr *ltetpJIIImt f'P8, adllrt>W 8W1'Ud8V, 8 k)'tMtt &IIQJta 8 +oPw.
Sdlf"'''C8 ~t~~ a.:ctt)' ttll:wl.ot aJ))'(oawA lllp(loa '....wl 6pu s~nh(..tJI~ct 811.
.....
biL.JI.IOt.A\.0\ ~r~'\1\..
'1.O\JI.b+\l11)( ~.,_~$..0$(.
t.
r Jlt tpiUixaoxavt
JII~W .t:wn!WIW IU'D 'UIJr.wc tnctt nr.:ac o61&1tfa tsao&OQIIIWJ _,. avaDttO
Jea'lcecta:a, ~1'0 CpiUia!"t Mitlll'txyy;IIOIIJJ>JI'.WA ., 4t.Uaorott'Ot
kpo.t... .-:.ow ~~~t..'\. ~""

1
"'f.-~~'\..g..-:. lt..Ot..-IU'I"-~ ..j)t1t"-~1 lt..O""-or
'"''f"'-"" ~ '-""""-~"- <A><j:JIO "'j...
~eww . nuotnJO? .l au tt'II<*"110IIP~P:Jf WOX"&. ~.11uwl

QI~a.IJI)CO &uO#fiJAC8QI6.1KO;t4S)t8M:IO~
n cpa'CCM
llc~
r
8 '70 (llp.1111t11-8*TO ~~. lt~ CJ.'U'f 8 :aUt.. 11 ' lltJ'I~, t'JikU1t W.W: 88i:JI''.M o.n.PCAW!Ot
Jl)"'=ce. ~ 11U NC IQI JHIMJI.til ~.. CC XCOIC .00JmO:SIIt;111t. XD1'0pWit estJI~t.a.8o o6a08'alltfCA.
!~J~ah<.
H011t..0~ ~ """'rO\t\..'11\..'JI ~~'\.JI.v

oc.-o~l:lti. """''1.1 o)(roo.t\.9.t....I:Iti. 01~""-or- ~
""-'\... "'foo..go.., .-:. :y.0oo.I'I.D .g t\..'11\..t\J..... ~

)JtO~~~JI.t.. """'roo.t\..~l1t..
400
uddh..~t,Ct!Ndc.G.k
'Whe:lhF..Zeto7
Eartk 7, LTJ~
LtR.o.&t.Wort. VLel.oi.I,pna
.- !<W" Awpalu;. &c:wo._U,O
200S. 8~t ~d F'IN'I
torn tt~d F"it.

t f11<NIJW7flout19'/lo...ntLI':M
HOI~'\1\..jO\'tOAO.gl(..'\1\.. ...\'\1\.. ._. 'J.g':"'j ~
>t_..OIW.bc..J\ .. Oc..t\.O.gi'\.0'\.. ~'\1\.. W.'\1\..-
W.O\-
0\l(...g\...\I'''~'\... ..t.. ..;::.,
'\.(..k..jj.,;:;... )(0/"~ v....;;;.01t....1111..

n t'))K~oo a.lt.o .-t:V>
(8C'I'. .. . . , . . " " ' " ' - -....
tieod fir
n"'"""1t
....
(1Dooo(-- ll~~-
nt H<tf'IJftOIJ
~~111. ,...t..'\.<.g"' 801~-.s{-
W.....t . OCI..,_tOio ""--'-''..,fp.,.__C8tll ~-, ....0ce+I . rtoo t<'1'-18Cao4~"'"""'...
-"'--Y-.o-
..._, 8C.6.A.&88 ~~00t-811.J-~-~CI IO)
to"--onO<t6wN- r ~itAt""---""'eQOCIII
,.,,_ _.~~-~41tA"~"e"'-&..""cAr
' - - "- ir"~ r:''.-..4ilii'UII'kt-~116i
.0.M~,r,on'tl'l 8 .........T,II)8118~ (W~ ,IO""'!C,
lfJ'O~t!W~;r ....... ~~~.ac,
.........._......,..__""""~..
-.......:~..........,~~"'~
..... - ... ~.JO..UUIIo ....~
;f(l~.aw.._""w~v~
~, .. , ...O<Wii!Otltl'1{odi
\ollfPJC0t"""OOol8f. J'IIaoao.,.,....
&o-~,~t~~
...-
..~-,...~,!11'..--....~
....
....
~...........,."'IIIIO~....,..,..".,.A-.rh
,_..
'""~~
.~.,.- --..:.: .--
......
~u..n .
~~
..
...w .--
~~"III'JI.,.-~f1\ii.,_,
,. .
~IN"'" -
............-' - "''8NI. VIt..C 8cn.c~"""""-~ "-

, _ ,. _ . ..._ ~. ....... .,.. .181\.8180IIIII'68J ltJ -"'""""" 8 <11._,.
- ....... ,_.""""'-"'-.-~~ . ...,_<ocroro,

r
...,..,..,
"..c:no .... . . . . . . .. . -..~.
..:,,.,
..-"'',. 111
""";" .
....,,..._.
...
...
'"""'
~- ,,,...._, "~
f!not "' ~-~w......,.e ....W~~..-o.,..c~o~.-n..
.t.~ t>ooo..-Rr.c. .
.... oo"".,...
,.._ flo0to8 ,,._.,._
1\:.tf(it~ ~>r .t. ..-.rp-.e 1 ~ to c~e():.

.t '8' .,...._,_
O.!Of - t , CO'f8Cit f"' 8 J.tont," ~rt
... , .....,..,......, , ... t.- tot,.....MIII'OI\Io&O , _ , , . ,_ , , T~ofO ....... 8.te
_.,...~u-croooc~-JIOWd,~~>"vA ----.,.a~.
Hcr~t:...f~.
. . . ....
"_..,~oJO'J' O'tN.aie
~~
(~ 7, t.T..). tlltle-
t./oiEtf~.VIwu l((l,f"IIJ....
....... ,..
~tlf:~
t'loo6tl-
--
-~'no.o.IUf-tAtl
.., ta.-...llt~J ..epooro
f!Ndt#tt~,(lw"UI>..It
. . .,."lfA#f.l-7
.....
OtOCII.f'"< ft "'o(~
..
)CN>tt'C0 . &818110W6'rAf'Yt...
&\8tOA""'>I ... roo.IHIIU"J
3.u.o,.t,omr~t ...,..u...a~.,...,.
... .-"'"--- """ ...-~ ~

k...,...- -'"' ._,.,. --
"'*.f.ltrr.~ "'AOI""t
"........~-~.
.".,..t.. W.(}U)r 1-U11."'\I\..W.I(..'\I\.. ~!11.'\1\..

oW.<j.g~.,;:;.111..g .../"~. ~$.. w.
"'f0'\1\..jO~O ~
u nmu 2m8
. , ,
, ,
. <
CW.'\1\.J\'\1\..jO.gO\t\- 11\.. O"'jt..A
kpo.t.. W.(}U)I ~'\1\..?t\..'\1\..'\..
) ""-WAU>. .~!11k.D\Ab
\(.()AOI-\.Vi:\11\..W.yt .gt1tjoO.gl-\.t..t\....C
t\.1:11X \(.()h.Oj~'\1\..'I..
"j~f:J/ 0\-{_; +U... v\..C..k.Mb-
~c... u... A\.t..lti(..'\1\..'\..
~~-
,
, ,
r
.
401
og2omo8ka k pa6ome u 2ocme8ou

,
. .
chapterlO/lounge
lounge. html
. .
: , , , .
L-,
SS-.

lounge. css,
, ,
<head> l ounge . h tml <link>,

lounge. css.
<link type="text/css" rel="stylesheet" href="lounge.css" />

,
<link>
lounge. css.
lounge. css
chapterlO/lounge.
ss- .
kku npocmx u3uu

. ss-
, : ,
- - ,
( ).
,
lounge. css
body {
font-size:
small;
font-family: Verdana, Helvetica, Arial, sans-serif;
h1, h2 {
color:
~
#0077;
"'
font-size: 150%;
h2
font-size: 130%;
LL..L~.g" .St\io.J-Jf. (V\. -i\.
'Sr"11\._ t\.2.(.()JLb\W ~>. w.t.rt\.J?\ w-11\._-ii+W!.)(
~~w.o-i\1 0\ -i\ IW~L-~Ii.-'$M1t\.- w.~
~""
h1
(V\. 'Sznt..... ~~t.r111..-il~>.w.c.. -i\ wc..w.t--ilo'IA..
-ilo1t\.- r.~'!t>VUt'W. .St\io.J-.Sif.
( ) 11\._ ([2) 0~~~11\..... t\li.--ilt\P.I"1t\.-+W-il.'IA..

'J~t w.'S. D+'>-1t\.- ..LW.~>.1.. .. ~Dii.-t\JLO- t\.J?\ atoW.1/U.-..L.
D JLS\ jl>."t..JLO-ii~W-il
~ 1~ o~-ot.J\.11\..... k..Dj)(Dj ;]11\.1...1"'\)...t..r'.j.ILS\ 0orz.o-ilV
~W-il <> 11\._ <l2>. 11o(..IWJLbli.-j _.~"L..j.ILS\ +'>..11\._)(j-i\"

1"'\J+W!.)( r'\J...t..r'"r W.o ~?t\.D l"'\)5t.J1.1t\.-W.b ~t\-i\1..II.t\.
npocmoii mecm
,
n,
. , ,
Ct..i-Oiv j~"-'111. +V'\.".11\\t\t. ~~.. .SOI......S-
.st.t{'\11. '\....U~ "':Jf._./I'\.Oj~~,.s\~'\1\.i_ \.. .i\.()'),'\N,..~
. vo~Oit..W.. v~ ~~~~ .t...~ V.I"Oit\.~~
D ~01 f 01'&j01~~ ..t.. w..-..
~t.- ~~ 801......5-.s;fr .OI~C..I.IC.. ft.-t..

~11t +V>.'-'.!Uj.JIO..-; t.-{o~-.go fo . .t~"".;1~ . ~01 (bool~>.
3f~..1- <IA2> .I~..t.. V.'\1\.A';jofD\t\.J

4-\D-.ft:~t... ~~.. '111. ~1..<f'.. 801......5-.sfr
Ot\.1A- ~ ...t..N1~
Mt:lt 1'\.t.. JOI.jOIA'\11. +\..'\1\..1(.0\\(..11\. "1"01-f'\1\. V.'\1\.
j ~~ (I-3>1 \'\-...~ oti.AI\.. "fo-
v.o +V>.'-'.!Uj.JIO. t.-.fo~o

. ~01 (bool~>.
11t11:: y11.apt.fblt4
fot&to110,
.nlo.a.a
~t:titll nrt
t-4~yp.a.nHwt npo,yi<TOI.
wero nt.~- r r .nr n~ ~t~~, ~ r

; nr ', ~ottot.l ntt.a Jlyu.te yCNit8M.te. Jt, 8 roc-noA
n.nr ii _,..:.t AOC:Jyn "...._, N" .; cttO t.
-.11 :
,...
.rr ., .<.t1.. r:, TOJIf<O ftYWt18 &ne"f<)te-.~~~:
n Jr n@} r"'Cteeott. , tiUUitt 111:1t ,.._.. npoc-10 n 8010

.nt<t t\1' 111 w<t. '4 I1Jit1 a.ca.ill r~t~~ 6. 801 ,t, u"
n+:t swpc~a.n 8tt,iW8
OTNA~te 1-4~ n
Hi
tofa
'. anQI.i. n 8~ -t n,
.n. .
: u 8p81'4f't tu,
KIW nOA~. r t)-. -t% ~'
J~.t< totytt~~y .1 nt~ .,, I! fote.Ta.,
ecto
n~~t~ ~ ~ t i1Q4J . JJ)Itee s w

'!8 rt" ~ . n-r
. - ~~~.,
ero
.ntt n... t~
cr
r,
9CA.t r 6!4t oetyn ..,.r.
n lk!l .~. ~t tr, ?
Mtll PiOOJ10:-tt.t4I
~ 1
Webvlle.
, 81 n ti-., l"'ttt cosii :an~. ~- <1 ~'.

nn n
l~'&1. ~~ f.~C..');'I-r ~V.Dif.J\.U\..
fo. .t+v..i/~
npa8ka
Head First
rocea.aJII 1-f:NCI Ftr$t . ft ;)..& 6oJiooe WeDvth. 1<)81'18

t, r cefll atlf110K, ~ 11111 . Wlt1 1' QAOJ1CIW8 1'1 tiIIHtec
t\J\. 1'\.0 ~..OAOiti.AI\..IOI f~j""-. t\.t..ki.()'LO
tU-~~. ~ '&:Jj~ ~01-.f~
, .
i'I..,:.
""
. l1l V<iU\.Oit....
4"\.
.....-...t...
;7V'V\0(
-..)
\)
\J
~. W11I uanlo1f01<. .m ~tN t. !t.t\I "B"Taf1Mtjf, -~
."t 11P"".Aaet antnity u~ t'l~t'I upycoei:IIA apot-ftT. .....I 3 ~
aaplt"f epntet. . . Al'l'f.

.
, .
:-r n
),
: . , n
~U\.1A-tk\..11\.t... .t...v."l-\.0'1.0 ~f01D1

...t... ~;~1-. ~01t....V. .~I.
kpo.t.. .rno1 . \'\.jf~ '&t...-..~

~ f1A-J'JOI.Abi-\.OL /"D~Jjt..JtU\..'\1\.L .~I tV>. '\)

'\1\.\-\1L \V.1- t~.IC.. . /"OI~O.Oit.../ ~t:lt
:.,
~f""':j""-.L L+\ V\C..0/"0) .
. body
.!'): line-height:
3j.u- .t ...t.AU~t.... .t..V./"t\J1. ~f01 tV>. /l.bt..1
:1 {
. ~ Ot\. '&:Jjt... .g /1 /t> /""\)01 '&~ fw..o.t:lt ~~01.
"> .
font-size :
SIIIAll;
font- family : Verdana, Helvetica, Arial, sans-serif;
line-height: l.em;
403
t:H-':;..;Ir, : . .
>kmu umepBaAau
, , ,
line-height
. ,
,
em
.
,
line-height
. ,
Ss-, .
, .
. .>.~ .-~1i\.;;;.~. J;~-l.Lijkt t.
,'j-&.._V\..I.'\1\. L..;;:.fI'\U..11\.+u~~.!11.
~ ~_. ~~L .. ~(!l.()/1(.()~0ft11.1. ~!11.
jc..;;:.Oo.t\.O~~.> j.\~11\..{j /J.bt_....
roc.t...,.udr"O.t~.coc...... ~~~w~ :..,...tu

.. t.. ~~' - .- (!(.,,..;! ~ 1(01 /
O.,...l.cto ~ .. ~~~..
-.:-y~......,.li'loao0tlot0'opo.t~81!~-~ot~~-..a:~t~
n r n i1 .
t n . ti . ,
npenaraec!l
L------1
awero n110 " I J1 ni1 i,

r~awax...",..t
n -, n11 . ,
.'~.t1.
R~---t,.
n:R t n~ n , .
L __ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _...., ..MioWt
......
. .I'iO!t'IOOtloro.
.
.....-..
Ttn~~P~~>..,.,~.,...,.,...,.
,.;...,rt'"'....,~:.-.,..~wtwr~~
t.t . . . &..NI n_ " ~flol,- CO),t;th! ~i~~llt.."l: ~~18t:...,. 111o06ot ~
Cnett!Vf~~o~e nn.~~ ....an~o
i...
!'
.~1,...-{ }i~-kt.jk+ v-..Po.c.-~c.-!Jo1 .>~-j{ 30\jOo.~ L') jN1 ~. ~Ool.Jt ~111. <j"j"\1\..~L
l(.()...DI"'jJ'> ~_. ~... ..;;:./"01~~111. ~L
~;;~.~ .t....;;;.ft\.111.1. 11\.+ut.r~Oo. /l.bt...
2 % , . Sem 2 ,
line-height,
tf8
. , ? ?
, ,
1.
404
m.
line-height
og2omo8ka
k 28u pekocmpykuu

. !
,
, ,
,
,
. .
, , ,
6/wl . n,
, >>
-
CSS.
.
, .
~j11t'I. ~.11.()1(. ..~'\..v\0 ~ ~l.f?'\...-
1..0/ "fO.IIU..,j.,;:;Ot\.0'\. O~.AD\~11\. (o.,;;;~j~)
.IIU..jj ~l.f'\..t..1. '!..y>DI+"..:V..~'\.I "D!.'\.
"f"""":J"' "'-...,_,_
.... O~DI~b C..Ojt..r'1...C1U>1
/
: ?
JU' )' . auntx ,
u n
. , w
n n
nory
;110m>r ,
, ria tt n
',.
- .
\ n :.
1jt. ~j~C..$1/ t\.D\"'1"11\.AALfl ~ '\I\..1.1.jO~rDI
l--
~ADI~b
1'\.D\
~ ."\1\..
;::.
"'
\ r--......
Dc:..t.. 3~111. ~O""'f'\.W..1..DIIO.;;:;c...s~ """"' ~AOI(.V\.;
Dl~jDI~Iifr jO\'t.O.0~"-11\.I ~AOt'\..11tt. _1:1~01.,;;;t1tr ...-..'\1\(..~

3~111. .-~ 1. ""j DOi.t... ~J'OI'I.I:It.t.3~t1tr t\.D\'j"~ <L> 1. <f;t.J1 ~O~'\.W-1..DI
v>:;c..$\
CJJ "-"'"- ()AOI(."\1\..
~l.f'\...'l.. Ol<.f",JL-
t\..t.O~.siJDI""t..bti.t..1. .;;:;~j
DD~<.f:f--3""'\.)( .;;:;~._.~ .~
~~ fDIC.....OAOt.t\.D\ '!..pDit\..'1-\,~DI
(.;;:;ot.l'\.t- o~.siJOI""t..bt\.0).
mu 6 g 6 nogpo6o

CSS
:
, (
) ,
.
~.I~ ~?1<'\/\...'l. 0~(1\.I'o.D ~
.OitW1. I""'J.t..rt .~(11..g tU.:I.. ......t...
~0\J\.O<:h .~ OC..O.gl'o.Dt.- )j*-j'I....t...
~\.
n-.
r?
, ,
n n n
. ,
- - - - - - " 1 n n
n ,

,
, .
,
,
notrry
tv\(11. \'\..OI/"W..O~OI.1.. tW~~I"

.gO~Cf't.O~.Oit-.1.. c,oj*-Jo !d.
v
'\...01.0 .~ j.ILS\ .n./
.~111..gt1tj\'\..OI.1..
LL
e!lf"''' , -
n .
F"\5- ____
......;._______.
.t..rl1l 0 J\'\..OitW .g ~rowt..r. .
, ,
.JJ
.. tW~~F ~"'
1'\.t...
o.o~r"'"'~c.-.JI.
n?
, ,
. ,
n,
n
. ,

pOIUIJIO
1 ,
, 1;1 n
,.
- ,
r1<.
406
?. 'I 10
~,.,\.~ ~1'\..11\..~ .
tc.....obJYI
....~ o.jt..JIJI~ t-Ojt..r'\...Ot..

. 1f011'\..~t1l
1f01~t1l
r?
llama
CJJ1~t1l t...~ '-i.11\..
j~OI~OI.b ~""f~ ~~..... '\1\. ...'\1\.
: t s
, ,
( ).
)' n
! rs. s, s
n n
tta s ~
ltJ
r'f , s &1111, rro
s/1 n
1: . s
' , t
1 .
r
, .
t""'-'bJYI CJJ, ~!11. '-..~.t.. ...\.'\1\.j~\~0\. ~'\1\.1"~ .....ot..'ii\.. t-0 ~)( .../"01'\.. '\1\.'\1\. ~t..\'\..0 t.. !jo'ii\..
t..o/"ol\..t1l ("~t..r'~ ~0\~P.f ~ '\1\.'\1\. t..doo.).
1
n?
n
-m: 11J
JITI> , , t
1'0
n .
11 rs. . !IIII
rtr
~ ii tiJ!
r:ii,'\. \t.
11
IIIM3ifC )I MCO'Ih. f-:C.II Bbl

'
1, fl
1 .
.
n, n n

q.
r:
.~ ~ ~t..11Ut.J>..3ju- ~ j--r'\...t~.... t-Ojt..r'\I\..Ct01 ~~~ ....:_,-
......;., 'tf'0\1'\..~t..'ii\.. '\1\. --.DA.S\.'\1\. ~t..t.. .'\1\. ....'\1\.

\'\.U)~~jOI.t..bl\..t1l) .
407
m geAam ku
: ,
, .
,

. ,
.
Aoku
..~~ o<fiOI"..'\lu
~()$.. .N.oo."l .N.~ Ot\'\1\...Ut o.N.v.j"1 'tf'0\1-\-~

'\. ).S\ .
.... ,.,....,._, ..... ~
_, _.. -~. -~
~~~-
~ ..-..... -.:u.
.... .... "f''""'........,......('_ _...
....... __
..._
".....lfYII)_..,. ....._ .." " _ " " "
..
-~
~. - -<>6)-...-.._",
--~-oot;
r..-- -.cc-----...-~
. . . . ~IQ ....~
1>~/".~ ~'\.t\- 1.j ~-

..'I-1"'$'I.! v.11\.II.t.:ii\,
r .-. --- ---- "'
'tf'0\1-\-~117 N'\"1"~
~<vj~1f~'I..
1
1
~----l'\.j . ?-t-1"0\,)
~
llt'I. ~OJtb>
>Jt.S\ ~---j 'tf'OO.~
~bl '\. O~v.jl<vOI.
408
j~tfOiv'\lub v~O'I.
'tf'0\~11L
.. ~~
.-~-
wnt801 .._~_,_
.-~.w..._,_
....--~-
.,_........".._....._ .....
--topoc'!'O~..-
-~o6t....... !'IIIWO
..
..... --~-~
~---dt,oo,Q
~---
_.,..__
.........
..
.....~ .~
j"jOI.gOI.b /"Oij.II.'IMft\U.
Omcmyn
"'f'O~~.\l..'\1\. .t..jj
--------------------,
:>jLj<>'\...11t... '\1\. 'tf'OI~'I.-
"':t:;;._ .. .gux :. /" ~ .

01'1. C..OjLf'"''1.QLO.
3j.- .t.j"jOI.II.'\1\. ~
~'\IU.. JI.L.g(11.'\i\_ '\1\. "'1""'.g(1\.'li\_
1>(11. .~ .01"'
1(.()~/"0.II."IfO
.gOI.b
~--------------------~ ~~
"_"',_....-~-"
t.. .t..>t-
....C.IlSI.
..:::::;.:::::."'110(".:"::
..
.,_.,.-*'_....._._
_.,._....... ......... ..
___
--....-.-..-..
--~.,.,..,...,.-_.
,_.
.. ...........
....................
'<&......
-.
"'--~----~
~-ti---~
~- - -&r>;~'\1\.'\i\_
'\1\. ~'\1\..~'\1\..'i .-
"
3jtLb ~O.II.b~1L
.1\.t.-~Ot.. '\11... "f'OI.got.-
..n.,
_ _._..__ .,._
1"'-'fiINI'I-~-
_..-.. ......
.oro"'" __....,.. n~ ""-to:!
~-~.:-.-
.........
...... +-...."""'-'~~""""'~"'
~~-- -~
,...~ --...,.........~
~--~11}
r------...
--~.
3j c..ojLf>"''\1\...ot.
~"' '\11...j.llSI .~.....gl

.g(11. .t..t.- j"j"'-
"~
-0\. ~/"l>....t.-/"(11.
"'1""'-.~ Jl-'1.j-
.jt.-~1 .~(11.
\l..~'\1\..I'\.J....~
I .. npt.noo .w ~ Ot>-
un.~aac::aiU'tO.~'N).I...
IQ;) ('lo\IWII" ~)'1111\01~ ~'f;l:f-'Ciflll! ~
U ~fiO(:('--MJI IW'f\'~
r:-.... ..._.,.-"""'
apono
~.&.~.""O-
~~7.~~~
-c-
..~~,....... w..
.....1I":JJrro.. I(I.I'Wir6-IIIC.
........
... . _..". t .......... -
--~.....,.,...(--
........... ""'"'.1.~ ... -
j.llSI !IjO'iA !/"0~
llpOIIt'flnot'WWO~~
:u..-if'IIIJ)5<QIIIt.l~ rp
__
...tpooomu..-01(1..-,
~:;:~~u:
- f J I I I. . . . . . <>&u... ~
..,.._......
~::.=--=
-k,;"~---.uaw
..~01-01 . .OI\l..'\IU.. ....C.ilSI1

'l"f +U'I"'f'\1\....t.f1.'\!\...
____:;J ,_ _ _ _ _ _ _ ______.
06m cogep>kuo2o
1>111.j""t.- ..ot..>t
rOIJ'\1\.t\.11t...'I. V....CC..O~OI-
."'-'\1\..j"j"".g"'. ~"I.f~
1. -w.-.~. 3jt.L .t.
/"0\t..~"I.f'I..II.'\11.. ~I
C..OjLf''\...()'t.O.
"--~-~..,...1ra.ruc......,~~;...o
",
.,.._IJI_.Jr'""----"'W<W._ _ _,. _ ...... "f"X""'/1'
~-~
..-,..,.c~~-..._..'*'-
- -......--.~-,...,.lll"'",..ok..._
--~~---.,;ao~1..-w- - ............. - .....- -
4::- 3j ~(>.!
C..Ojt.y>'I....O'LO
/"0\t..-
..~.I .g-Lf'>;t ~
(..~t.-\..
409
:;
'laano
Bo11foCt
]j: R, R ]j: ,
r t ,
"
nR
, r
-?
0: n -,
R R
R.
0: n . m
- n
, n+
n , n
3, n ,
n.
,
n
11 ,
]j: R
n n
n . ,
-
n -
n , n
]j: R
? ,

0: . n, n n
, n n

. , n
, n
t . n
...
0: n
n , n
( t)
r , n
n n - n .
, .
. ,
n , ,
]j:
, n- . n
, n - ,
r ?
0: n
]j: , t
n n
, n
, n,
n.
n , ,
0: ,
, ,
n, n n,
, . .
410

, n
.

n~ .
,
nn
k2ocme8oii
, .
,
? ,
. ,
. , .
01'S001"'JOI w~'So'\i\.
<fX>~
D.IU\ ...-:.~01 ~0o.gDI+\.. ~rc.-1..gtl.l:1!.1i\. <>~

.sfr D\ tU.. JDI!o\.J-f.
.1 ,:: .1 3. .
1> ...-:...
_./)::7
, au..'UX , mCVR>o .!t'
DI'?JJDI"'jt-jDIt-
r,-: :
~b 1"1,(.,~-
zo.;:meOu. , r.. .s1 r. HCV'rt 1\l}ocmo

r>.poepum :r(! r
l(r:J tJ.I!u J~ 3::u ,

w, . ri
U;__,.,...I'ICif'\8....., ~
.: u.Q/' 1102 (3.. & 1
CUP""'"J<~".
"_..,._",_,.",_
~- , ome8ai:ime
~~-~"!!
~'(f,&ICtod--~
~~~rOOJll-61>011' '~
6!1oc't.-pu., ..s~ ..
~ ml( :1 .6.
Ol:;l:,.lfcyi ..l'tot.!"
.t"" . .'"" 18, ~ tpot~~ )IIONfi'W.a
-flo.a--,r
oo~llit- ""- Y ...c.~lt00!4iool".6....,.... 6-ot.&.olit
et\4-nll..-..-at~~-.
'~'~.u....,...
I(OO'\Ui!t-'1
1'to. . .,._ft0116~.1toi!IIIO)I'8r.t...t8)'"'-"'*i& 'IJ~MfiWI'o(~aii\N"''OII
-... .. fiii-C'f"etoc.._...~~u~e:a.l4..-..oolll0ar~.
r\lit~ot... _~JIM""'c:a,ya..tfrA"~,.....a9't'ffn"
....
'J'tAI,.....,.;i ...11
t .....
llooc;:'No-"- ll..,..,...,~r " ').,.Y ~~~:t09....,.,._.,....,
...
COIO>ORI~O~,'III
f~Ptt,&..,.
...,..,,.,.lt.,........
..
ltlifO~tU.,.....at
llllfrtON>f
--..,,..,,~, JO"nnt )"'~~" .. ..../f"rlool~~-
ti..D\ ...'\,t\ 'tf'Dit\..~01
- ~.. <r.g~I'\Dl.O
_ " , _ " " , 'Welwtk. \fto6w , .., ' - ~ -~.- (I)UI-
...
1U.II!I"'"-~-~~~~.,. ~"~~~~* ~
....
~'I'O~<t*O IO'fl-, trOfOOollloQI..,8
)-,MJ'n)
'"'t~te~~t.:;..C-- I<flot~~C.O.ti"..._. , T--.IIO.,_ut

-~u
.-.en..oocu..~~~t....,."~t.u.o-100~
....
~~
f\Dotitle-
~aw. ct...dC..
..........,lt,..".l81"07
l'~1, LT.J.. 8kem
...
Ultoltll~~(.8/tdf,E:OI
~1#/~~
toos.r.n."<~~
k,,..,....,, ,.., f'll"'" ...." """:~"=~" c h-- ~cn ""<' "'"'
11.,.1~} O:r.u.alil
.... ~noa,4PJIAII.411!1
~.,. (,Atl\8...... 01) ...>Or'O
.........
~-~
~~........ ,)A#f .....
&leru-""" "f!QA~y
.S.AOAOffl ~oool! o'~wOiillt...j>fl
~6'JJh '"'" Prnw
411
~ pyto/
'~
, ,
. n (, n,
).
: Jtt' ocmae.II~> ,
~: -U, ;. u"'
r11 noc.~~e r
. 1, NaJ
. 1{m <~ i:i
.1 .u ~-t , ,

~< ~ l( ~. -
~(. ~ -r u
.
nc .
, ,
, n , n
.
Co3gaue cmuA J\u g 63 2apamueii

,
, , .
quaran tee,
.
, ,
, .
. , .
lounge. htJnl
~ ,
~w
3n <>
~ r .
n r ~ .
quarantee :
<
11
..L.. 11
Do~OI.g.;;;,t.. Ol.;;;,l''',...~j.;;;, c-ls - 0 U~..w.... j'W!I'fOI\-\-..

11O..I-\-11\.W.t.r .;;;. ~~1011".s1 I(..A.Oic-c-j ...t\!> o"'f~t...'II\.> ...;;;;1..
jNI .;;;,
OI~JOI"JOI! 1U..~~.sl 1'\.01 .";;;;1..'\.. .";;;;It$ OI~JOI'-'j-~
c:lasa"quarantee">
- ,
- .
</>
lounge.htJnl
lounge.css.
rr )I wn. r .
CSS-xo
. ~u ~ .
. quarantee {
order-color :
k;
order-width:
order-style:
lpx;
solid;
ackground-color:
#7;
~ M11tj01j01t... ot\!>~11!.'\i\. "J.gt... j. ~~ .;;;.

\-\-...t..I ....OIUI"'-b /"'$t\.'I..'J_) ..Ujj .;;;,...;;;;~.'\..
'\.. ....oAJI."'-t 01 .;;;,01"-t.. j~~'II\.W. ~~'I..'Ii\. ~""j
OI~JOI"JOI
413
Tecm g 2u 63
, ,
.,14f-"'"
~no ~'"'-..,..._
r ....
. .
..... w~.........._
.._.... -... ~-._ ...........,
_ _ _ . . . ......_._""~- ... -~.... -
__
:.,-.:-_~":.:~~-:::=.=.:::--
...._._._""""""'- .' ooth-----.,.......,._~
""
........
...............
...
.....-_,..,.. ..........'"_....
~- -~"'"'_.,...__.,......"
~-- --~"""-"
-- ~
n , Gt n . ,
n nf ;;,r~ , .
: r ~~ - j!h > , '
n n~ i1. , r n
~t !( , ,
s n1 . -
, -n11 .
; / ~~ ~ , -
( /
..t..'\. ..t.-~jj ~oiGO~I:IL.'I. c..W.o~oNJ~.'I. ().~j().~(). 1. ~...'I. OIUU'I
OjN'IIGOII'MK~C...J\I ~t\..'I.Jj 1. ~~Lf'\J W.otO

/),'8"j/),~/), t.... ...o.JLSI.
~/"~/),-~"'j~-
,
.
NJ\v t..-.
oW.~1.~I1t.L
~Lf>I-1'\..U.- 1. t\..'I.~I'\..U.- >-.OJLS\ .
: ., ,
.n n . ,
}('(' n
, ,
. .1 - , :
v-n .
1
kpo..t.. W.otOI t_ 1-f().~().I\GOW.O/"M /"().V"-'>~ v~~
IGO- ~'I.jiGO "- VOjl..f~'I.-O-:.J.:. "'- OjNJ~().~f w. oW.VW.~
U\.. .\ '\.'\. t:) t\..t..> ~oo'S~
414
10
Omcmyn, 2u u n 3 2apamueii
, , ,
>>, ,
.
0"'-f~~ tU.. )(..gt\~t\t.J

.:.~.....g ..gO"fY. ~ '\II..II.
r""t: ..- oa)'CNCJJ oca

JUI't" , .m(. r. JI
JlfIDSIC: 8":tJJ OCJfC: D.Q n
.I r:. n,
1 r
3a.IUJIJI
CJIOIO ~liC:E"'
noty tr.~.IUe'lxo JLZ

: r11JJ)3 ., . }"8 1-i
. 6u110 11~<:
rt i-)'J ~c:noq..
~ JJUI, O'I"De;4.3.(rte
y.o-unrrow: Jt r.
310
u omcmynoB
. CSS
padding, ,
. ,
, .

25 .
. guarantee {
border-color :
lack;
border-width:
lpx;
border-style:
solid;
background-color: #7;
padding:
25;
~ iV\tjO~t\..gAJ\t..... ~:.~..t. ~1f~i.,

2.S 1-\..wa..t..o..g "1(./;\ji., C:.o/"o~Wt
~t.r'V\...ol.O (t-..gt.y>~ ""'ft\..gt\1 ~11\.J._j

11\. t-AL..gt\).
415
cr<iC!I1J!06
ecm g omcmyno8
, ,
.
,
.
l~ ..tjj .rOit..... .~~'t ~-r-
""'j.ILSI t-0\.I.OW t-Djt.r'"'-1-.I.OWr

1-j.ILSI o,;;;:,t";;;:,,jh..O.g. o+-v t\L 1"0\c.--
?1-.I.W 1. 1.f01+-v~;;.._ ~111. .~t-.g-'I-- _
j~"' t-~o~~I'Dt- "'1"ot";;;:,r01~o ~1f>~1-\
"'"""ot";;;:,I""'~U~t_,;;;:,c.-.s~ h..OJLSI.
2.S "'-"\IU(..(.,t..O~.
0~/"0I.~t.. ~t\..11\..i)\+-vW, ,;;;,

v:;.f6t_,;;;, <f'OM "'"/"~t_,;;;:,t-,S\
, j .
: , ,
. ,
,
, .
- 1, - .
; , -
n go6a8u n
n
CSS
n .
, n n
n. n 30 n
. , :
.gu4rantee {
l4ck ;
border-color :
border- width :
l px ;
border - style :
solid;
bac kqr ound-col o r : l47cec e ;
paddinq :
25 ;
marqin:
;
- Ml1t.jO~OI~JLSIL.. h..()JLSI ~1f>~1.. 30 "'-11\J(..C..Ut~

t-0 ~ t";;;:,opo+-v ~t.r'"'-1-.I.OW ("~'>\j,r ""'1'01~ 011
Vt\..'I-jj 1- v.I\J...~OI) .
ecm g noAeii
, ,
.
n
.
Ct-1i\.OI(., :J (., O"'flj~ h.()AJ\ ~""f'\1\.k\.()'li\.

30 .__'\.lu(...~ (., ~U~~jo1i\. e-.orot\.111.
ocyn
--
~
1
: , ~,
n . ,
n ~
, , ; ,
. {; - ,
.
; , -
~:
...
n )) ,
,
serif,
, . ,
, , . n SS-

1 . 9em, ,
#4 44444 Georgia, 1imes New Roman, 1imes, serif.
n , n .
.,
417
J\o6a6Aeue 82 pucyka
. ?
i< ,
.
.
c ha p t e rlO/ lounge / images , '
backg r ound . gif, .
"'- 1.jO~l'"'"'t..tUI\.t.. "'t"!j~"'..g.A.SI.t... ..~1.
"'fO~IO ()u.J ~J.Q,O~ t-\.01 "'fOjj"DIt\.O..

<f'OtU... O~r"'"'-1."'-t.. ~~+\.-~ "'-o-o"t"J1-
"""'""'t.. J~"'t\.O..g.ll.t..+\.A ~~1 ...

~..g.t...J ~~01~ - ~~.. .
4'\.U...
<>.
<img>, ? .
- ,
"'- v..go~c>.f I(.O.;;;.ol"l;t.t....gl:f\.jO~c>...g'II\..JI.'IAr..gl1t
.....O..vi.SI ~!>,"'~ 1.j
CSS
i.m.age.
- , background-
"'t"IJ~~uo rt...
, :
.quarantee {
line- heiqht :
font-style:
font-fami.ly :
color :
border-color:
border- width :
border- style:
backqround- color:
paddinq :
marqin :
ackqround-t.aqe:
418
"''' & 10
1 . 9ezn;
italic ;
Georqia,
#444444;
"Ti.es
New Rozaan", Ti.mes , serif;
lack;
lpx ;
solid;
la7cece ;
25;
;
url(iaqes/ackqround . gif) ;
background-image
background-imaqe
.

-

<iq>.
:
,
background-image, -
<imq>
,
.
, ,
.

, .

background-~qe.
419
ecm g 62 pucyka
:
,
.
CSS,
,
O~rO\V::."\1\-V::.t- V::.O\I(...t-.g~'\.I\.AI\~'\1\A... ~ v=:.o1 v=:.

<f'OI-\D.g~ r'W.-:J""-1-r IU)\1(. 11\- <f'OI-\D.g~ "j.gt..W.O\( oV::.o-
~r~<.OiV::.c-~ v=:.oiGO ~ ~01-v::. c:..ojt..r"I...OtO

1. ov=:.c-v::.:Jk.Di."\1\- 1- tu_. ov=:.o~r0101V::.c-~ >j >~.1..
tiOIIIO tf .... ..~~ t~Q,t;l(ff 1 ;.Nf'IOAN,'..ojj, tAt fiOC,~,t.lolll~tit~

IIIJ8o('l~"'tWfl'f .... f'OOC.IQtlfooOio"1~.~(ti!\N~t..)'C:.ct..:~t~
68-..
11(16(t t~~"((lot61opt_ . ~~ tao:t1.1noc6oi' .u ~_,~r-at~e,
....,.
npt~tCyr n~~: ,...,~.t,:.t NIJ~o' fOI'O,t.:4(1(~"rloiiCIeeiii-~X~r.a.ya

~aeyar~~tyn~t..~
backqround- imaa .
, , r .
background-position
background-repeat.
3akpeneue 62 u3o6pa>keu
. , ,
no-repea t backqround-repea t, ,
, , . ,
, , .

backqround-posi tion,
. quarantee {
line-height:
font-styl.e:
font-family:
color:
border-color:
border-width:
border-style:
background-color:
padding:
margin:
background- image
background-repeat:
background-position:
, .
1.9em;
italic;
Georgia, "Times New Roman", Times, serif;
#444444;
lack;
lpx;
solid;
#7;
25;
;
url(images /background . gif);

no-repea t;
top left;
~
01.. .I"-~ ~., .~!1t. 1"0\...,.<:W\-)
.<- .g -&r)(+U... .t..g.. ::f'Aj
L.....
'
Ht.0~)(0~1A...ojO~OI.g1..bj~OI
JJ
1:1111>( <-1:10~1:>01.
/$1!. )(.1.. .~!1t. <PO~ot. ~
~ 1-jO~I"Oi.w.1.t. t\J......O.g~or.o<-.
background-posi tion
, ,
center.
<
top, left, right, bottom
110~01~ 1-j0/"t\.U'..1.t.1:1 ~t.r)(+U... t.:~ .. ::f'Aj
~\.
<... ...+W~.g /"'$.1.~ ~<-O~O.g O"f'!::'jt....U\.'\11.. .t.

~ <...r0\~..u-...1. ~01 .g CJJ. 11~r... t h.OW.go1"1... ~ ... 4t.r'Ljj.gL1.JtOI.gl.1l
background-posi tion: top left;

, n n.
background-repeat
, n n.
~ j/"yw- jt\..0\U'....'\. bt\~fO~-ft.y>U't, >./"!1tt..g(1t ...~t.. ~.bjO.gOI~b.
background-repeat: repeat;
Y"-"3~01t..w. . 1-jo~r01.U\-1-L
/'
j. >~./".<- 1. ... .g._,.,.1.

$.\.1.( '\. !> UI/"11\QO~OI.'I.. -rt\IWL
I>.g~U\-1.t. j<..w.t\ t\..0\.g.1..g01t...<- ...

j..\+\..1..
no-repeat
~~/" 01 .01~ "-"!"~~ ..~W ~'Iki..I"'\Jr ~

~ 1'\J...o>.g~o/".s~~ u...
11o.g~ort..w. "~-j~/"01-
11o.g.ort..w.
.W.1.t. ~O.biW >
repeat-x ~ UI/"1-jO~t\.1..
repeat-y '(
~j0~/"t\.W.1.t.
I."-0 !) .g._,.,~~.1..
inherit
:O:AJ!f;ot.bli '
421
6 omcmyr,,, ,~.;
ogu
mecm g 82 u36u
, . , ,
, . , n
,
. ?
!
.
,
6 IIO&Aoaan
roceayto
HNd frst
,...._...,,... . . . _ ......... . .................... . ......... OC:--....a..ortoe.

'-.~~---~
.......... uo&.-........ _....,.""'" ..

- . ...,. . . . . . . . .:. ......
-~,..,.,.,.._
, _ .. _",_,..\'l(t08
. . . . . . . . . . . . . . . .-~..: ............ ~:6~"'--',t.1_.8..,urt
...................
~~\. +U\NnO :J~
~~b'\'$O~fMK~11\..t..IU.. ~
~.;;;,o/".5\t..."'-t-.s!.
j~Mt-.s!
tU'I
~ ._._...._~
1'\.1..
I'U'I~t~ -
............ "......"._.,.
..........................
",.,.... . . . . . . . .
............,.,,......._....,. ._.,.,, .....
..,.. , ~",.,Nollj,
~""""'*~
.. fiPOC,.....,.,....,......~,~..
..
line-he iqh t :
f ont- style :
f ont-family:
color :
order -color :
order -width :
order- style:
backqround- color :
pa ddinq :
padctinq-l e ft :
arqin:
backqround- imaqe :
no- repeat;
bac.kqround- repea t:
backqround- pos ition : t op left;
..
1 .................. t .,~ --~~~~ ...., .. ,....,~w:-~ ..,.",.w.o-...

...".,.....I(, .......
'~~'"-'11-........-
. guarantee {
....,
flor..t.c.,. ..ii~-NiiiCi\8olt-'l' ttc:
.-.4vA11t.......,.cr;ont111ot . . .ty
CSS ,
top, right, ottom l eft.
paddi.ng- left:
IW'jWII'f
,a.v.;.c:tot0140t1''._
,,.~..,-....,......~r......,...,..
~,,.,_ .. ,-.,~NIOIIio\AIItM ...tai'IC. . . t
" 10
... ., .........,...,.. fOIIIoio"Oe-....-
.. _".........,_.,..,....,.
Kak y8eAuum omcmyn moAko Ae8ou m?
422
~ 1 _..,....,.. ......... . . - . . . -..... ~........,....._
f'\..V,j"-
~--.-JI~
.,......__ .............~--- ......... ~- .... ~
-to....,..,
..............,.
~.,.. ,....;~po_.....,.NIPI>~<Ikw"'-"~~~A.,....,._ ta~o~c
..11t ~ ""'\1\...-t
.;;;,o~l1t. .;;;,~
~,.... ,.,.._~
~.-crtf! ,_"..,....., , .. ,-..-&CI86oA..,..~
"'*-
tt~Ceo6c:t808t towy, t . "'""-'~"......". ...,.&< .
3g?
w6\'Aote, .., ~r..oot nptAAit~e rc ~
~014 Ac.t:rytl ..repwer .,. ..._.,"' f6.
, ,
17,)itfn\ll. 1.4: o(i~~qctM"'-ye.:, !t.1 I'Oe''f~ tit;D ~"'~
n~N'"61~ 1'10 IU.Ot'O nooow~ rocQOI\ ... ~:.::, ~ .... 1! n

po~Nfth CIIQIO ~~,'0 ~l'f W \IIUie"'~OO'I ~. 108\t.,._. I"P01toNIIP'""'ti
. ,
J, lhf \150'\A.,t8. \,lfQ H.ltJ,I otn'vM.t.IOW..t~....:l otawa&t ~$'~ I'~YI) .,..

~
f':t\1'1 8111 ......-tQ .q~ OfN;Uio\te ..aut YA~>-'"..-.''tQit 'ft ralt)"trw'l'-
.
, , .
Ct.:i.Oiv ..l:lt.
,
,
-
, .

/"~/"01~.11.0~
h.O O.;;t+'\D~
I(.V\QO~f01~1<J
..?I<-1-- ~~L
O.;;;~n.t ~l1tt.it.sl
j~ ~.t..ltV\).l\.4-.
~..;:;~)(-
'\1\.~ .>J\J..
....~_~
Vlt'f 01~ 011 .'S11
~+'\D h.0/"01-
ao..;:;OI.;;tb ~
'tf'OI~"\..
11\. t\..L Mh.OAjOI~
o..'ajOI~~
'S~-[111.jt..fi..!Jov!l.
tU'I
v;(,.Y'O\~
t\L"U)_
Kak 8uum 3 n mk npaBou m?

, :
, m.arqin-riqht, ~
..
~. ...- v~o~~o.. h.ll>~t...l1t

Oii~j'\1\.-LjOIIU>"'--..t.rt<.OW\.\b ~~~J10""'
/ 1
-t
. guArantee {
line-height:
font-style:
font-family:
color:
border-color :
border-vidth:
border-style :
background-color:
padding:
padding-left:
margin :
margin-right:
~_. W(,.o!"OtU'I.. vro..v:Jt i. v~O~~Oij-~.9. 1(.0\j'\. V.OfO~ LVi. ~~

.j~OI.b ~'\..~~btU1!1-fOIC;v;(,.O!Ioi-\-"WI .
1 .9em;
italic;
Georgia,
New Roman",
"Ties
Ties,
#444444;
lack;
n-'"'-1.~ J1t ~!.-
l;
j~jM'\1\. ~"'f~
serif;
....o-
t-i. h.O 30 ""'\.I(...~

# 7 ' / (... 1(.0\j"\. e;.;;;ol"ov-L
solid;
25;
( t.fb t )(.;;t1...- ""'t.D'f!jt.
80 ;
~ . .j!1t.&'\I\.LjJLS\ 'fOI~
v;:;.orol-\.l1t. i. ~e;,;;;01t\D~~bjJ1 t
v
S
r(S
0
250;
url (images/background.gif);
~"'f~ "'-'>AJI 2.
ackground-repeat:
no-repeat;
~- .;. ._...,.. . --....-~..--..
background-position: top left ;
....
... .. ,-.
ackground-imAge:
""'1.I(...
_._
_
........-... ___ . ..
,._
_............. ..........,............._
.._......,.
-~,....,..
.._~,_...__..._
--~
.......... ._...... _ _ _ _ _ ! .............
marqin-riqht
250 .
........
............. ..,._
w.-.,_._,.._..,...._
,
.......,...fc-...... _
-~
423
um
pykoBogcmBo no 2u
>> ,
. ,
,
.
border-style
border-style: groove;
w..o'SI:1l D"j"Rjt..ll.1_"'>\ c-W.11\..11.b -zro\..~~ 11\..v.>~ jj'l.W..t.. ..-\1...v..~ bo.,-ol-sf'j/t.. 11\.. 0 ~oo.1..W..t.. L-j
'N> 1.j -\0 ...'t>( j~U\..11\..'l...
w..11\..11. .so/iol 0 ~oo.L
solid,
n
.
C....ltO~t'(JIO 'ZfOit\..11\..~.
~
CW..11\..11.b blo1.b/L
~Jlb~j..g.l....
JlV\.t\..11\..11\...
dou!e,
.
'l"- :JLAj'S-
JlU\..11\..t.. ~ c.-W./"0\-
t\..~.1.... ~ ~11\..'l..L w..
j
j ,
'
~ ~ : -
.. 011\.. "-'Dt.-ARjo-\oo.~ .i....JlbN> ~ ~

~
"">O.t.k...
--~~-~~~;,~~: ............
CW..1JI.b ioo..s\;..ol ~-- --- - --- - 1
~
"-''t.-.iUAO..gOO.W..t..ll.b- 1
v~I-
-W. ..;;;;/"1)(..g_
-
, -
1 .
W..1.11. j~ !!.....~~~~~""-~
'!..11..5\jV\.W..
"-"'~C..W..oo.-\JL ~
""'
r======="'ii
-7
w..11\..11. olo+ft
1
1
1
!.. - - - - - - - - - !
W..1.11. 1"'-<5d'
..glt.ll..j 11\..Wo. 'l"

..g~~IU'II..gjoo.-\- ~
..II.UuU\9,
.g c.-W./"00.-
inset .
t\..11\..~.
t.-JlON> j....i.11\..Wo.b).
W..1.11. 11bljt..
~~
.-...W../"11\..W..- ~
c-W./"0\t\..'\.VI.,t.. 'l"..g
J
1:1lc-W.jh.D\IO~O\
~~.
'----------------'
424
. "'
lc
Bem IJaui
order-width
order-color
. ,
, RG-
.
border-width: thin;
order-width:
order-color:
Spx;
rY\o~.t- Dh.f~LJL~b ~'1Af11\k\.(J .. .....~
\U\.IOL.gi1!X C..JLO{; ~i""( ..",.a.li11\..""' 11\..JL11\.. ~ic.k..
,...t.. w.ow1 ... j~v>:. ld>JL11\..~.go
~-'\..L(,.JLO.g.
1
2
thin
medium
Spx
thick
order-color:
red;
rgb(lOO%, 0%, 0%);
order-color:
#ffOOOO;
---
lA~JLbJ:]11\..W..t-
;:;.;_.:;
c...go11\..~1So borol
c..olor1 w.lj~v>:.
~.g~'f+\..11\..~111. 1 .~L
oh.f~L11\..W.b ~.g~
JLIO~bl._ 11\..j "'"f11\...gl1t

t\1).;" ~..:.g.
border-top-color
border-right-color
border-top-style
border-rig ht-style
border-top-width
border-right-width
border-bottom-color
border-left-color
border-bottom-style
border-left-style
border-bottom-width
border-left-width
,

(, ,
):
order-top-color:
k;
order-top-style:
dashed;
order-top-width:
thick;
3W.1A. c...go11\..~.g j~t v>:.obld> j.!L

.gt..r)(+U.-11\.. ~11\.. 'f+\..11\..~111. Dl ...
~L ~-11\..(..~W. I.j;) ~
oW.jLbti..D.
8gu 2u
go co8epwecm6a
>> .
<< . ?
doule,
dotted, dashed, groove, ridge, inset outset.
- solid,
? : n
( ).
,
dashed.
lounge. css
border-style :
border-style: dashed;
~ 3jt...c- ..1 --.()~1.

~11\. 'tfDII-\...~!1t.
- Jo/iol tU>.
ol0\JitU..ol.
r-- -
- - - - -- - - ~ ~-
.
:
, n << , n
. ,
. , :
border-color
awhite.
border-color: white;
~ ~'jt...e- .t. --.()~1.

~ft..N. 'tfDII-\...~!1t. - t.y>
t'\.OW t\.L\
~t..!1t.1..
.
<< .
.
~
\/__
~
-'11
'\
DIOJMAUB
:s, IU1t n
thln, mecllum thick, no n10
:s :s r :sn~11.

,
n.
426
m> 10
--
LOUfige
n
roc:.JII .l rnt
ellltp.ttt '
Head First
6n I8CiiUCX ~ - ~ n J:
Wevh . Ot r.oeecrt t.A8Crt. &.

c86JI ~, . . . n nQ/18 ~11 hfCIC....._. VJ'IIPW4
"...,. : ttt0.11 t:~: t1 npi'Ooenetf .n ~q ~typ~ n

80 ,. IIW8f'O nt8" l'tac .111,~tf' n~~ tI"- 6:...1
tnr , n ~... I~YAttte , u
ecnpoeOAott
f"'C-t..oit np8AnlrltTCfll
t.I
AOCtyn ~, ;. 6k .
1-C..w r...-;
.~ rt
noc.nt
,._.. o~J)'QMC~ OCHIM-tb ' 8,
t011bi<"O
cv.e
11w n
t<aw.,oro nw rocre!IO.
sawr
nCNry 841
npDCto
Hv
",...,~~
& ,
npoept1t M~I-'.Jpo.ty~
QUJoJKQ :t .. n S-3KatM~1 rpaCIJI:/I)t
, 1 yet111;re, r . otny...:oatowt .
Q6.J 8~t11't;}H.,.8 Mil K8X.VIO t'18.11'. : I ll
10 .-eAODOnb,t, 01..r t40W YO"'Hiti'111TOK tiJ
t011'/6~,
'ITO
ICI;
~ .J'l .w n.n. r n
anetf1POt*CYIO w n n., ~ .
6tf,.... .&<:
n4J11 . 8tll ~ .~ S'IIOoti J .
3g8f
&l
B11t1
11n olltiHIIti L- n
ero
- r
6onee
nn~t .n~t, n~t nw~t
15
B11t1
SS-.
ennoxo nn~t, enep~t
Mlltl
npenarae r ~t.
w .nr paccna~t
~t. , 11t1
~t . r
~t,
Mlltl
Blltl
n~t
11t1
CSS.
427
no>kaAoBam
k .
kak 3 u
g,
nocAywam
xopowo npoBegeme .
um, 3m XHTML.
, .
r n ?
Head First:
, ,
: ,
Head First: , -
. ,
<< >>,
, ,
, -
. .
: , . ,
Head First:
, .
: . ,
, :
, .
Head First: , ,
. ?
halloween, christmas.
, ,
- ,
.
: -, . ,
, -
class
id.
Head First: id? ,

4.
,
:
id .
Head First:
, ?
Head First:
id ?
: ,
. ,
. ,
Head First: ,
Head Fist,
: ;

. , ,
<< >>
. ,
. ,
. ,
id.
, -
Head First: ,
.
,
L-.
: ?
Head First:
, .
:
,
. >>, ,
, . ,
, . ,
id,
class.
; ,
, -
: ,
Head First!
id
cll/99
id
, -
,
.
<img>
<< >>.
id).
cll/99
<>, .
(class
<ol> , .
<q>,
1 -eJ.gd~-e ;)H'CIIOEqlfOI ' rq~-en''HIOI
;)Iq-elf.I- ~-\1- :>r '<<ffH' -~d->> 'If~lf ~ :~;)11~0
429
Ampuym
id
id <> ,
class, , , id.
, .
footer
id.
n ov.;;;,o jo'SOI{\b..t.. OI..f~j. iol
D .111..4W... . "'"""'r~j.O\ c.-/Oo..S.Sr t\.0\ v.;;;,/"0\t\..~t..
1Aj~~.OfO\.
.~.r...ft-.
111..;\L.Oin:111...t.. jt\..'\/UL.OIJI.bt\Dt-1/\..-SI
l~
..7f<.t\D j!L.OijOo..b {,c.-t-'1.0 Cj11\..t\..~ . . "":jt..t\..-
.
,
id,
class,
,
.
aCIIlo
Bonrocl
"]j: ? id
id,
, ,
. ,
class.
0: ]j:
, ,
. , -
. , ,
- ?
0: , . :
id-
, .
, ,
( ,
- .
).
430
10
Kak ceekmop ugemuukamopa num CSS

, ,
. :
specials,
.
:
p.specials
color: red;
\01.1(_ 1S~1f>01....-.
.I.~'\1\.L 1(./\.0\t.-t.-;J .sr-101./.s.
~~~~~-~~ "'1''\..N\j./U...-
~l0\1(_ .g111..)1f'I....-.
<
_
.specials {
color: red;
0
"1:>c..-.t.-
specials:
~l:lt I(.JlO\t.-t.-01.
Jl"-101./J.
.
, #
(: , <<.>>).
,
footer:
, <>
footer.
p#footer
{~
color: red;
l0\l(_.g~ 01~c..-. ~ ti">/11\..U0~111..1il..
1i'j~~~1..O+\k\.DL 1...S\ {vofu.

,
.
d ~
431
Un3u ugemuukamopa g
2ocmeBou
, << >>
, ,
.
.
2 nepBu: 3um ampu6ym class ampu6ymo
<
id u lounge.html.
id="guarantee">
</>
2 Bmopou: 3um ceAekmop kJ\acca .guarantee ceAekmopo ugemuukamopa 8 lounge.css.
n/"...;;;. jOI.I..t.k\.-1..,;;;;L {\ c.....IU..IUO/"L

.:\...-\
(<.>>
..:\...-\... <<#>>.
#guarantee {
line-height:
font-style:
font-family:
color:
border-color:
border-width:
border-style:
background-color:
padding:
padding-left:
margin:
margin-right:
background-image:
background-repeat:
background-position:
1.9em;
italic;
Georgia, "Times New Roman", Times, serif;
#444444;
white;
lpx;
dashed;
#7;
25;
;
;
250;
url(images/background.gif);
no-repeat;
top left;
mpemuii: coxpaume
U3u
u o6o8ume mu.
.01~ .g".._j0A?t\.O.g:u~..~_1 ~ -r .01~
~"' "\!\.. "f't..jt- 1"'\).g.._~01. 1-\L "'-f1.S\~t\Lt..

OC..Ojt\.I.g01>1 . .~ .g_ jUtOit\.O ~
t\.0 .\~ ~"-jOMKt\.0 ~11\.>~
nn rocreey
rC)CtfNjll
..! F"!Nt
&tt
Head First
~~ ~~-~
wetvle. Oc'~'tao
., .,roto
I!Wpill AN1 Ctt6 ...ar~fOI(, , t11 : 'ntt QCta.. .CII> nQAOfJufo tt lo!II~"!18Cio OU.C.C........ IIIV~
.._., 6rl!oA ti(Otopo~w~" ......-ot~ ~ottt~~t'IPQiy~tra.
14*'111 .awwo npe&a.-111 v ~<~ at.~y.Qtlt ~*481ta~ "'Pffoep.tOot "'I.... ~ c&.r~ 6vae1
cnocot-ftiON:Ito 1~, \tlou t ~ ~ . 16'r.U18, o.no 8 f"'(. . .Qf\ I"'DN.I\VHfCII (.~
~ AOC'JVII
8 lo'ittpt~tl, '
~r.n oclt ..t.:
Uflt~fNII: -..od~oo-tr.-v .
.._.tOCf-'\t~OC--~~1......,.
fiOCI't.clrO ~..... f'O(t~, f:
IIWI'
Nk ~
8txt-0.
~~O.~C.000-8ftlp>'I'IO
"""''t .,. ~~...,., :w.... ,~~
o6, _.w~t.-.roaw.O(It:r.y~nee-:~
~ . . . . . . . . . . . . lol .t),)'.o~fq-~
TOkU.~""'. t).I8a#\t8t14W'~AO. . . .t/)lt"W1
...........
1,...,. "' ;
- """ ..,....,. ...." .,...".__ "" _,""_,..,..,... .."..,
~f"JX"'!Y'IO M'(hll(y 8 npciOfCIJO II!natle, ~01'\t ef\41118 1'481iJ\.'I, tt.tC 8Cfll ~~~~~
tfal81(~11 8 1 .&\iiiM~ t, lw~X818 111':8. .~1\106oA":I loi~""11"8>11K08 8 ,.,n~, 11 N"
'taapo
jt
1f1
}j: #guarantee,
p#guarantee?
id?
0: n , 0: . n -
. ,
, .
n , , n
8 n
( #guarntee n). n
n,
npo
{;)
}j: 4 n id <>,
. n n
. id r
m, n p#someid lockquote#someid,
, n .
]j: class,
0: n.,
: n, - , r -
, ,
8 - .
433
f5r
CewuBaue kku mu cmueu

,
.
. ,
- ,
?
- L-.
, ?
. .
Head
Fist
, ,
. . ( ,
).
, , ,
, ,

. n ,
.
n
.
n
n
n
n11
11 n
(n3n
n n)
434
: '?N 10
Ucnob3o8aue kku m6u cmueu

, ,

?
6 ,
u
, :
'S-
01
ll- .,_01 .,01""'" ~i.LD ""'
0
)<\(V'\l-~1:11.. .,0'1f<.il-I \.} ...)
OIJ\.'\1\. ,I"'\1\..
c.,~Dt...~ -t
.. "n.- c.,)l."f140IIl- .t j\LDIJ
/
n0:\1\-
)1.'\1\.~ VlfV\V'-'-
cDjOI'"'""~
<!DOCTYPE html PULIC "-/ /W/ /DTD L 1. Strict/ /EN"

f
Oj+V}I. ~0\~J\.~0\ C:.VV..1i\.."http: 1/www. w. orq/R/xht:ml1/DD/xhtml1-strict. dtd">
j.IU1 ~vll-11\.. k..D/"....01"0<.~111..111...
<ht:ml xmlns="http://www.w.orq/1999/xht.ml" lanq="ru" xml:
q="ru" >
<head>
<meta http-equiv="Content-ype" content="text/html; charset=windows-1251" 1
<link type="text/css" href="coqrate.css" rel="stylesheet" />
~
<link type="text/css" href="everage-division.css" rel="stylesheet" />
<link type="text/css" href="lounge-seattle.css" rel="stylesheet" />
</head>
<d>
</d>
</html>
11Df.SijD"- ~ j+V}o.-U-\..11\..1l-! 11/"0I{\1..ILOI ILDI?j01i\..
v./l..t..-
jjiO:Ji-1il.. . \~J\.11\..~1:1!. ~11\..J\.t..iii.. .I..O'l{J""' fll-D"t'Rjll-.IU1W.b

"1"0\.g1..I\.O\ "t'Rj~~11\...
aCIIlo
1
BoiJfoCbi
"}j: , "}j: ]j:

?
,
?
0: , n 0: , 0: -
n n. n,
font-family
, ,
<body> n
n ,
n,
, n ,
, n.
8.
n CSS,
L- n .
, ,
n.
435
,.
\:( ,,._, ..:: .J, ..
6uI cmueu - menep mk

g npegcmaBeu 6 k 63

1 . , ,

,
me dia
<link>.
, ,
n .
. "-'>..t)~ Ol.~f~.j~OI. V10/i01. ..t)i'. ~OI.~b ~"""- .j~,;\,~$ \

j IL{)W.Op()1..0 "'1"2jN11.)tU\U'\..OijOI~ ~0\~~\ t'I..II.L'\1\-.
'\}_
<l i nk type="text/css" rel ="styles heet " href="l ounge - s c reen .css" media="screen" />
<link>
, :
1
\/_
<-'\1\-~(1(. +'\.2.. .)~OI.t..t.. ~"""

.j1.~---..1 W.o ~..~~(1(.
t'I..II.L1. ~~w. "'f''V\..t..tU\W.b<->

j 0~0~/"I.~~ jO"-.j..uu;;:,.?
N'\ ~)( .je/"0'1.L.vi..~OI.)(.
<link type=" text/c ss " hre f= "l ounge .css" rel="st ylesheet" />
<link
type= "text/cs"
<l i nk type=" t ext/css"
href="lounge - pri nt . css " rel="s t ylesheet" media"print " />

href= " lounge ~mobi le . css "
rel="stylesheet" media ="handheld" />
1..)~01.'\1\-~j~I. ~I. </i.Jv:

0j'\1\-~ '1..t.CJI.b~<-.51 _i h.LO\W.'\1\- Cy>OI.~~tJ1
ltbl.fb
~'\1\-UU'\.0,;\, (;IL{)f'OebiO "'-'Ij 0\ '\1\-j 01. tu-\..111)(.
1--
::!/
jf'~,;\, - j U... 0~0~/"01.~ tU\ ~OJI.b~'li$(

.Jero1A.~::::.gOI.)( <- .\.J\.t...!\.\(...'\1\.... lcf 01 i'.O.- '\1\- O'It>01 -
,
'!.
oJlfOCI
]j: . ,
n .
]j: , n
screen ( ), print ( n<
n?
) handheld (
).
0: , 0:
. , ,
, ,
), pojectio (
n),
]j: n,

0:
aural
), raille ( ~
tty (
tv ( ).
chapterlO/lounge/print print. css. lounge .

chapterlO/lounge,
print. ,
edia=" screen" <link>, lounge. css. ,
html,
, - .
, n
Print
().
, !
<link type="text/css" href="print/print.css"

rel="stylesheet" media="print" />
. t-\.().gD\.51 c.-r.AM.I.l.JJ\1 w.oi":JIO .g\. ~?tW

jO~OI.g~b .g <f:>011. /o~\..tw./.
. 1'\.L\.~ .gt.y>v'\.o\.SI. . --...!>~
.gl:lt vo.g._,.,~ '\.J~1.'\. .g~~'I.'I. .g""'j
V.I"O\t<...~t11..g .u.. 1'\.L\W.tW'I. .gt.y>v'\.'\..
._ VI~'\./ +...g_. ~/""'(Jj'-ft11. k..Ojjt.y>

'\..g\. 0\./"~:J. w.uli011 --..{J{
U...Jt'\. .gl:lt tl..f...J.:>~1.II.'\Iu.. .\1(.01.0 1"'--Jj.ll.b..0\1 --."'1"~,j1..t.- 'jt...JtOI.b . .t..
VO\.ot.- .gji"JI.D. ~1"0\Wf''--

OUO!II'I!>UO I! PIITF.I', ' B.'IIO'II!R.
... .,
oi(Of'l. , 11
'
CSS .
background-ima.ge,
, -
, .
"
si tion
background-pobackground-repeat, -
, .
() .
class
id,
.
.
-
i!id
id #
:tt; #oJIID-
, -
mediwn
thin,
thick.
L-
, :
solid, dashed, dotted
- -
ridge.
, -
CSS -
, L- .
(, , , )
.
mdi, rint
handheld, <link>, -
line-height,
6001
~~~
, n n,
Peweue
. n n (, ,
).
1-l>t.r)(t\..Lt.. ~
'"kr~,, o..;;.~.-v ~
.: o:31Jelrtc .11.m ,
NClUX , m\0 CCl.Mble
/"0\~t'\.
m.11u )
. ) .r
~poeepum u
~~
.11 , ,
:11\..
ov-.:.c...;;:.~
~~
'
h-0.1\L
rN
11~t ~'r1. ..-
-l, NaVJ -r1m
(
[
1-+t...,__'\11..'\. o..-:.c..i'iO:J""
H'\1\..I-U.L h-().1\L
439
. ,~ ;:,
n ero , .
serif,
j?eette
, . , n
ntt
, , . SS-

1 . 9em, ,
Georgia, imes New Roma, imes, serif.
44444
. ?
.guarantee {
line-heiqht:
font-style:
font-family:
color:
border-color:
border-width :
order-style:
1.9em;
italic;
Georgia, "Times New Roman", Ti.mes, serif;
#444444;
lack;
lpx;
solid;
backqround-color : #7 ;
pa.ddinq :
2Spx ;
;
marqin:
0~1""'"""'-.... .gt\..'I..OI.t>v~ .;;;; .-'\11..

+-UJ\J.gt\t\..11\..L ~1..<f',;;:;t\ )~~ ""\) +U..W.OAbiGV\.)(
t--~ ,;;:; Ot\.0 JOIIGAIOO\t...t-
.g j.gO~ IGt\iS&LIG11\..
(. ~AbJO.gOit\-1<(}/"'-'\1\..gt\.I.'\A_ ~~ Jt.f
,
: Jtt . , liauroceu, Jlyue

! ~< "'2d rocmeatl. Ht:> eaiio, .11 111r:
..11( u
u.11u .11u >u i5,
, ..~~<.v/1 11 el./ltiaue lla .

- J<.~:>, 'mu 1-! - .
C.f.J"t;t.'\A_ 'J.gtft, jt...OI....,:;;.
,;;:;~ ~.U... "f~,;;:;~j 1..11.01J
; n, n -
---~
-
- :
,
.
s:l :
n,
n
wn n .
L-, <div>
<span>.
, . <div> <span>
, ,
, . ,
(55- ,
n ,
.
,
n,

. :
,
. ...t...tvO . ~W'IAbt\t..'\1\. "'1"'j~1...'\.
~....'\.>I(....g, 1(..0,:;;,0/"ot.. t. ....Oj~t... +\'11-'\1\... \(..1\.~

..-:.~.. 01..0/ L1..0j'\1\.J~,.t\.OU\.. C.,'\1\.Abt\.0 ,:;;,'\1\.~t...".
o,:;;,j'"''~~ji"J!.01. ~",:;:,'\1\.. e",:;;,,..~~t1l 111-VI..f'~

...t.~ 111-VI..f'W\.t. ",:;:,1. ",:;:,/"~~117 ,:;:,~
..gt1tf'd"+U.A-~. .... ~/":J/ '\..(.,....oAbjO..g~I. ~~~ J~

~1(.."'-'?..gO~jL-..gc..u.o ..u-uo t\Ar'\1\..)..g~~ "f~IWI..~~ DI~~~,..'\..ti..O..goto ~~~/ ~ .g.,g._,">\j u..;;;'.b j~L
tU..LI)bi(..O ~,..,:;;,'\..t\..01(.. " I(.."""'t_1..N\."\.
442
11
div
span
mu XHTML onucaue anumkoB

, . , L-
, , . ...
CSS,
, .
L- .
lounge. html chapterll 1 lounge:
N\v
'P~>.JjUL ) ~1.t\\-\.J1L.,L- "'f'Rjo~LI-\..I.SI.L- +-..L--
.....w.
,;;:.1"111- +U\.....~IU'I/
""...LIOt;J'IIU(
,_,---- +-..;;..- .- j.DD~IW. <~>.
D ~.t... <1">5~ IW.~jOW +U\-
<h2> ~</h2>
<>
"'-~lt.DI I... 111-jDa/"OI~LI-\.."\.L ..

./
<imq src="i.mages/yellow.gif" alt="HaiiOJC I " />.,-
~~ c:.I"ZJ~-
</>
,;;;.j/"J-
<h>> </h>
<>
ooC!if:- ...11\_ 0"'-'\-VO\t\..~
:.\~.t...
.g D""j.t...btU>. Ol~jOI~.t....
</>
<>
<imq src="i.mages/chai.gif"
alt="Haiiox <<"
/>
</>
<h> </h>
vt.OI C:./"j~jl"""
~~:./";;..- j
<>
IW.~jOW +U\""'111-W.IW..
</>
<>
<imq
src="i.mages/lack.gif" alt="HUDI'l'oJC R R "
/>
</>
<h>> </h>
<>
\ +ti)\~~ ~ .-0\..
< href="everages/elixir.html"
title="HUDI'l'JC
</>
Head
t\..111-jJ
t.. ~
Dj'11\k\..
~ "''2)3"'~ , ~.t...-IU>.~1-. ~
First"></>.
;;~. 111- c.-c.-111.Jt~L-
+-.P. .-01.,:, vw.r"'t\..111-~-
aJit>Wi-! ~
443
:ft
, ,
.

,

: , ,
, .
.~ ~
<> <lock
quote>?
: n <>
: , ,
n ;
. ,
. , (
. ,
, :
n .
: ,
: <lockquote> -
, , <
, .
: .
: - ,
, .
r.
, <:
: , .
L-,
HTML CSS
<di v>.
, .
, n
<h2>, <h> <>.
- \:
<div>- ?
: ,
: n, .
<div>
: , ,
.

.
: n,
: . ,
,
.
,
<div>...
div span
u, kak >k pa36um mu

o2ueckue 3g
-, :

PetStorz.com.
<d i
v>.
.\ wc./"0\t'-~0\ -tl..I1..J\
j1.V "'f"'-.gt.J<..O\.t..ll.bM:
.....v...--.g 011.0-1-
0\c;OO\':t-.g ""1"'1,.t-Jt\.O\<-.
Oj\-\.0\lt.O/ UW~f""'fO.gOI.g~~ 11.~ 1-\.01

wc.r:-J~.jft..r .gl1t. 1'\.t.. ...~ .w WD~oOI.~
WC./"0\t'-'11\.~.g v-.. ~1(..'\1\.L ~l1t.
.g)(Oj.si. .g .gt..r')(t'-'11\.ii\. ~t.DotuV\..J~ w. 'll\. 1-\.01
WC./"0\ t'-'11\.~t.. t'-'I.~ii\. \t.0/1.0\'\..I'\..J/1. ~ ~lt.O.gl1t.

;11.01 W.'\. c..ojt..rV\....OtO ~
OnpegeAeue Ao~ueckux
pa3geAo8
h1
. ?

. ,
PetStorz.
jOI+UU>... C...:JOit.. 0(;01 /"'\}jt..l\.01 c..oWC.o.s\.;;:;
'I.Oj.gJX: ~-: 0011.0..~ 1. 01<;0 01~01. /
Jn
~ ( h2
\
~ [h2
1 (
'-t\. \W. .;;:;0\\(..'\1\.L'tp~ ~l.fOI.
1-\.0\...tWtO (;~ ~-.
)
~
EJ]
1
L
,:;~~: JJ:, t.lli..~ t
445
.- t> di v
UcnoA3o8aue
D'\.. 3~111.
<div>
(~1
IU'IjOif.. 'tf~- 3.t..-
g o6o31181fellu ptJgeB
, ,
~111. <oliv>.
>)/
L-
. -
-~
\.
div
fi
h2

<div> ,
.
~o'tf~
rr
div
C.o'Soo."'v...>.
h2
]
~
6]

puc8au81ue emok
( h1
m <div>
3ju.. !.j~\'\.. "'jtii-
<div>, ,
n .
...;:;~~'\1\..0+\..t.. '\...S1
t-oo.f.sJ.IUI "4"-cno 3 t..t.tv

...;:;DI <J ~'S111. o~Ojt\.D\
1
~b(j.IUI IU'IIWU> O'U..t..
, n , ?
CAl.CU> 1"0\Qjt..DI C:.r'D\~111.
01-\. "'ffj~t\.D\~
id
<di v>
. ,
t --.. Dlt\.D\ot:\1\.'V...j.IUI oloy.
dlv id="cats"
h2
lp
J
J
div id=dogs"
h2
<div>,
cats,
<div>
-
dogs.
J
~
r EJ]
446
11
Nst 1
div id="cats"
h2
Pet-
Storz. n
Lp
, n
N21?
N!l 2
(h1
Starbuzz nn

div span
div id="dogs
( h2
N!! 2?
~
1
)
\
t EJ]
lu...tr ~111. <oJiv~

11\...t.W'. t..-1. ~'\...
nopa6omae g cmuAe
, -:
PetStorz ,
<div>. ,
n ,
o"13~01tu\t..1i\.jA.SI
<oJiv>1 W'.OI"-..t... w--
(hl
EJ]
".::::'!
...b~(..JI jA.SI -. ~
u~-.
<div>.
3ju- ~ +\.1)\{.. t,L.b j-01 "1'01{\'\1\..AOI: .> ~t\D..~~ 1(.0\~jOW

~I <oliv>.
O<J'O/"~'\o\.5\.
j111.1.
,o/;v> -(\~o ~)
~~ -.~- <oJiv>l
1(.0\~. 1. IO~I1t.t..jOlt\W.. ~~ ~+\.0\t.-.AL-
jjiOW'. 1.j/"~ ; o~~OI -"' <oJiv> +\..0\"f"I.-
t 1"0$) ~~011 ~~ 1. "'-j.).
~oriol.
D 1(.0\j..
llca t s {
bac kg round-image : url (leopard. j pg);
~
/ldogs
b a c kgr ound - image: url (mutt. jpg);
( '\1\..A.t...
~~Oit-ot...S\ J"'-..~
Ol~fo~i.OI_J- D.s~
'tf~ <<t>W'.111.>> w,.>j;)"
.t,.t..JI /"w,~t\DIC. t.."I.j0~/"01-
~ LO~J"jOI/ 01 jA.SI
~ <<.~011(..1.>> - t.-1.jO-
~01 U\-W... .-01..t..t\.IC.01i\.

c:..o~OI \.'\.
447
riiv
8wm88 gemaAuJau cmpykmyp

, 3
01 .,;;;:,w.
rOIJ
div id= header
j~~.g1.1. ~
(~t
(oliv>
div id="cats
<div>.
-, ,
,
,
,
,
- ""jt.-1-\..o~-
7/
~1.~~ 1
J
J
h2
.J!'J~~~1... t\JJ\
w.o1 .,;;;:, w. -&.rt\..1.1.
I(.O~~.J v.r~
t\..~/:lt
div id="dogs
h2
,
.
l t.w;j- ~'l.t\..-j t\..1.~~
IWO~~.jOI v,f~~~/:lt
PetStorz
<di v>.
div id=footer
EJ)
C.,;;;:,r.J~jr1..J~~'\.9. v.r~t\..~f:lt" \..~ ~.g {oliv>
.t.. j~~t- \.. ~~...,;;;:, .U..j"'$~~ ~~1...t..f'/
j_t.:\i\,v.--{~u~"U> 1. .,;;;:,.,;;;:, ~1.I'U>I(.1.1il.. ~ (r> jo~U~...
'h~~u-~
......... ... .... .... .... .... ............ .... .................... ............. ... ........ ........ ............................... ........ ................ .... .
div id="header"
(ht
68u u cmpykmyp
div id::.pets
div ld="cats
. ,
:
PetStorz
<< ...
h2
'
<div>
O~pDI,)O~ V::.
v.pOI~ O\.O.sr1.v.s\ U.
t.-1.1i\.. ri>Qju rti8r ~j'~01 ~1.1.1.~r..
t\JJ\
~1. jo..~t'...'W< ~1.~V::.t>(. .,;;;:,v::. ri>Qju

~\.... .g c.tl).s\ j.gOI U.t.-'l.)( O\.Ojfi>Qjt..II.OI:
c.-~t.s - 1<.0V::.OI)( 1. I>Joj.S - vo~0\1(./)\)(.
h2
Lp
pets.
\~ .. rOIJt-.1.1.Xt-f\tY\lr~ w.~1(.1...
div id=dogs
<< . ,
cat dog <div>
)
~
div id="footer
EJ]
img
div span
3t
Bonroc
"}j: , <div>
n, .
"}j:
<div>, r n
,.,
<div>,
0: , .
r ?
<div>
Jj: , <dlv>
0: . ,
r , ?
n , r
, <>
(. ,
0: ,
, .
cat).
<body>, ,
<html>.
<div>
, , r
PetStorz <div>.
. ,
( <<
n . ,
<( ).
<div>
"}j:
<div>
, r . ., r
<div>.
<div>?
((, , .
0: . .
((.
<div>
),
albums.
<div> , -n
, ,
. ,
, ,
. ,
, ((
, ,
((>, - , , -
<div>
Cilo~Ju.:me CI11faHuax m <JiV>,

mr~1.:m uu. aaBafu:r:le J:lumi<> CI11f~JKm~!J
m, f m J:loMoem fa~u:m: ~raui fuu
m ~
J:loHff!IlHou.
ilu m
<JiV> m u mu CI11f!J1<mft HcJioum
Bailiu
CI11faHut
nruecem uu Jl.
div
8 2m8
, < div>, .
: n , ,
, . ,
chapterll/lounge,
lounge. html
<div>.
3..-:. .~~~~'\;I, ~ '\. .t "'fw.; ~'1: ~-
~ .......
~.....,~"~
, 1j~~.tflu1JI.O/"
J1)(if~.
.,--
<div id="eli.xirs ">
.~W <Pr~
)(\fV'LriWJ."
0..-:,~~ <f'~'I.A
/o~t..ktw./1 ~111.
~ :J~~1..L ~- flllj"
<>
<iq src= "iaqes/yel low . qif'"
alt="H&IDA'Oit
JlJi "
</>
<h> ))</h>
<>
~ ,
Ht...,_~~~~i_~
u
.
...l:ll~>IC.O\ "'11rQ\.t....-
\}
<h2> n n~</h2>
/>
~lc-:J :./"Q\~!1\..
</>
<>
<i.JIIq src="imaqes/chai.qif'" alt="HaiiW.I!oJC
JJJ..cJC&"
/>
</>
<h> )></h>
<>
</>
<>
<iq src="iaqes/lack.gif' "
alt="H&IDA'OJC
111 r"
</>
<h> >)</h>
<>
?
,
n.
</>
<>
< href'="everaqes/el ixir.html"

title= " H&IDA'JC r'1'
</>
</div>
450
;:: 11
, , -
Head
First"></ >.
/>
div span
Tecm g <div>
n, ? n,
,
n, .
)(.......~~ 1-\..'\1\.u. t\.1.... '\1\.j-
~'\ii..OCh~ . )(0/"~ : ((Jiv> . ~ ~/"~lt.lo~/"0\I
'\1\. 01-\.. t\.1....
'"""""""'~'
.~1"10118.. w""'rOIC C"a.alfl~ -.c:cq~_,.,. r~. ~
.,.c~~~.-..c.~
1.,_.,
.....
.. ,....,.,.,~...,......!fiP)'C.08oell\tiiPC"It
'1-.t..t. 1-\..'I'IItO {~~'U> ~""JOI >

~/"OII-\..1.!UIJ-
~ U(.O\jO\.bl . Jiv> - a.ll0t\t.1. ~ '\1\. ~1:11.

......t.. "'f~. "'__~ .llau... ~'\1\..Jl'\1\.. !.01"7
t...V.Il'\1\. ~1:1\.jMt..>~ 1(.0\1(. O"'f'jt....I\..!\.b C..'\1\..Jlb j.ll.SI a.llO
t\I>( ~~ {01 ~1:11. . 0t...t..)1 . -.t...t..
C..'\1\..Jl'\1\.j~OI.b'\1\.~
{tJiv>.
l'1po6i-. ~11 Cr-.uo\ ....., !( 'flot.ap~ v. ~. ~ fll
--
~ ..... ~~r8C1'08(:c;oa.u~~ar6y.I1....,.~U
:
, . ,
<div>. n
, , -
n. , lounge. html
<div>,
, ?
451
cfi~
6u 2u
,
<div>,
: n npucmynum - cmuuaf&UU.
, , -,
, ? ,
<di v>,
,
. .
S5- ,

<div> .
lounge. css chapterl l/lounge

:
#elixirs {
border-width: thin ;
border-style: solid;
border-color: #0077;
ecm g 2u
,

lounge. html .
. n@.t~ n
.. '1-ft:A.v...:vu.~!:/'t ILD..Oy>:JIO ~111. ..obiLD .. jO~t:A.~1.JI.I.j.ILSI
~. (Ofiv> v ""'j~~..>... iJ1)t;ifJ. ~

JLSI~t:A.
Dl1t. \}1,.<,I.
~""'61....:J '1-fi:A.t'-~j ~.~~
v
~
u.t- ~ ""'..v
(oliv> +\. j t\..UO
tA.-- u
11\,
wi. ~1
t.-'1.0
~$,"" ~i.Jr:J-
jt.r~l...OW{ IU>.ILD~I1t.... ~..t-.9. .gtA.~I1t.~"(}..y>I. (oliv>.
'Ji d i:i a
11
1\ .
:
~...........,_,. ......... ......,_ ..... "- <.,....................
~~ ~~ It(;tt . - ~,., ~ICY ...,....~ 811.Vt IIfiOf'O
.~+\..0 "'fljc;;:.t:A."I...b
~ ~""'jt.. ~OIU>.{ .........:Jf ILD"ljt:A. ::gl1t.jO~t:A.~

JLSiu:;,L '1-fi:A.'"'-~{ 0t\.l)\ y>I.V~t-.9. ~OI<fJ'
452
rPN, .-. ...,~ . .
~N8 1'!'10<1 . Nltnt.J "1 li<V1fY 14V8CI!IIIi eu:lnti1 loiT~~ ~t.

r~~~t.~....-~
~",...~...t-~'"'-11\,..{.'"'-~ .. '1-ft:A.'"'-W:'J().
t\.l)\fi.VO~t:A.t\.l)\ ~O~JL~vt.X ~.g;
(oliv>.
~:*111~ nattn~ ~tc.t ~r tt
..t..iA-.1 $( ..;;;..o~t- ~~+\..0 jo~t:A.""~
~~~
r..-. pu:s
...-
""" n~ftll01 OtaeAo11 ~11.1 l'fnfOI( "nOA$.i9.-."IC~ 41 MOV<11", N111 kt
~~.~ .... ~cnpec~ e.u.~ ~'" 15.-1 ..,. ~~
d/v span
m m go6a8um
8 mu 3g anumkau
.
.
v>
, <di
n n,
n>> .
,
. ,
.
t...~l"ot\.1:11.'\i\. ~.g .g c>.~~c>.~~.gl1tl.I\..Sij~

)
+'\.0\..-\.U> ~~1. t..... ...u.~rot\.1:11.'\i\. ~.gc>.r
{
:;~~>.ti..O.g~'\i\. +'\.01 ~rc>......~ k-0 :;.>. .....1. ~ ;;.01.0 ~ ,
.~>.r k-0\(.D\ .1:11. +U.. k.~1. uo .g "f'o~o'\i\. 'LI1.~>.-&.).
~
i! "11~
r " t~.......,.,,:, .!.
cew~ww 41:r iiiHtot.e
n,.., ~ '~ 6..,".,.

~"""' n 80tecuttro
X~f8<i, "''0 n
~ 8tt~~
"'f I< .
~1(.'\.j.IL bool~ ~~c>.ti.O .....t...'~.g ~~~

Jc>.--.5-Jt.tf, ;;.>,!(. ;;. +'\.0\. tu.. "1"'\1\j.....c-.s~ uo ...t.<J~;;..
nO...t\..~t.r ;;. ~ <Milt> 1..g_.g~
.g +U-1.0 ~1:11. +'\.0\-~,;;. ...t..'\.g ~~o.g
;;. ~>. bool:;.
453
geucmBuu
,
n . .
-, <div>
elixirs , .
Wi, ,
.
, .
,
. -
CSS.
, .
6m g wupuou 3g anumkau
, , ,
1/4
. ,
800
, -
200
, ,
. width:
lelixirs {
border-width: thin;
border-style: solid;
border-color: i007e7e;
width: 200;
1'- . ~.~ c....go,.~..g"' wif/1. ..t\.D j~OI..gOI.b ~11\-

\
/"~ \~11\- ..~1...D"t ~I. Dj01t\.t\.D...
"'f'~L ~j~Oit.... ~~~ 2.00 .,._'\lu(..(..t.A()~.
tv\11tj~Oit.... ~1Af4j.II. ~I <i>liv> ..:"'j~~./"... t./i)(ifJ. 'P"'jju

.. tU~~"'"~~..-11\- ~:;,.... ~ ~~~ 2.00 .._'\A.I.(..c..t..JtO..g/11\- "'1""'..g1A-AOI I"OIJU....I(..V\
~1"01~0\ .>I~.\. .OI"f .~11t ~~~ ..g_ ~111 ..g~

..g <i>/iv>/..g ~~~ .\1(..01_ ~~11\-!..
.
.
454
11
lounge. css
dlv spa.
pomecmupye wupuy 3g anumkau

8S-
lounge. html.
,
.
<div>
200 . -
,
.
0 ~1"01,;;;:.'\.t..~t~. .~'I.1-r
.,.; ~w,o,;;;:.01 rD\jjt.J\.01
" .....'I.~..."\. ~ 01 ~
~.~ .,.; .,....;;;:. :.J/ ,;;;. .J:fl 'jt.JtOI."\.
.U.O j'1L "\, Ot\..0 jOitUI.O
~~ ~.,.;~bt\Dl.O
;!lr&_,~....tll
r*"c~..-
.....
. __
_.,.
... 1'1~
,t....,,.._
"fo~rO\t\~OI.
~
I~f.mcyy~t-~-yc
Jl..af"OtCC\it
anrm~v """"'"'~ .v
-...oroo~.
, ,
n? n ,
n. 1
,
. , ,
<di.v> elixirs 200 .
455
tm1pm;:, t;no<<l
widtn n
n.

?
,
n n?
width
nn
n n r.
,
,
, .
,
, , .
_____
....__
i~ ~'tAf''ll\.OI
.
l.'tAf''ll\.OI
(o"f~LA..SI~c....
-~,,~~.
lfit>/tk).
rapa..rrr: 6~;
...
, ..-m roc:reA, JI .
.)'UJ~ : n~ t~.'t
noceem-ur r~ s, m:
n . r1rr 10
J))' rro.,y '

t.. r,1rn. , }'JWt
,-. ooi)'iiR<UQtlti1 n.!r

6 tJ(.
IGl)k,t{fJO .
. 6: 'I('.W'I'() liCOQ:t~~t ,
}';tOu:arro f')fV11.
div span
. 1 nn w n
r, n , r none.
w n.
, width n CSS,

20
300 . n
10 , - 1 n.
n, n -
?
, ,
. , n.
.sp.. tn-JJ: )t . ~
:otn y eae. .ur ~. '1'011W '.\t~)''1I
8CTJJCIIItJI OCJIC t\r
uu11 I"'C'''t.'-OH. "..
3a11ut11
. n -
) HQ't)' 3<"' 'IOtiiiCICO ft:Jf Jtit

.: rJf./t.. , Lt-
~ rro . o6c;t)?1at8o.'UOIJfi .r'

.:u . e.1Uttt..
"Eci l 8.bl N-1'0 11eAOBOJLb1fI, '
2 'I)'()oaiii'OK 143 I")'-\11.
(2.) ~~~~ l"~.t.ri ~.JU...'\i\.1

o~w;;;.j~.g 1. 'lf"'+'-~111.
~
(3) k.J>.~t...s\l ~.jOI~t...s\ (,z_ n.:\!U(..C.U.O\.
l~\"7 jO~OI.gbV:.~ W( \. 300 .-.~.
(~1Af11\A-\A ~01;;1. t.Ojt.r'11\....DW)1 1A. ~
.j~t.. 300 + (,z_:::: 3(,2. .-.~ij
.gU-1..0 ~OIC.OI.
457

'la:no
jt
Bo~OCbt
"V: n , 0: 0:
?
0:
300
, n,
n ,
. ,

, .
}j: n
, ,
0:
. , ,

, . n,
300 .
n n ,
200 n, , <div>
. n
, n
, )
n ,
n. ,
. n
, n
n .
n .
""5: n, r
n?
<body>, <div> . .).
D: ?
n n
.
~
, n .
Hama r:~~~: rt~ oll3)'t'!14(JI n4

~~ . .ur: r, -.
~}"tJUJte nm1 110C'JJe r
n: roceoit. 1t. aJ itJI

u IJaJoc: n q ). 33 3f: aJI
~IC\33.i'l rn . )'11J,IJJJt
, f.' UiWl OcJs)'JiaJOJtA CJX0113JI
. .s )'J .
& Ulol t'" ll)(, .
-.7 m)'.
458
/1 11
no
div
span
:'-1
Cmuu3au 3g anumkau
. ?
~ -, <div> - n
elixirs,
r
3
01
""' "'"',/
Lj"V<Oj1..-"" c...fU.A"tjiO~;J
. JV
, ,
. -
, .
,
.
-
CSS.
: , ,
<di v>
elixirs
. ,
, SS-.
{V\111. )(~ 11\...
"'f'\!~...t..~-~.11\..~b ~ "'f0\~1..ILO ~'1..

1L- ~;j <oliv> v 'j~~~/".. a../i><:ifJ(
~'?J111. Dt\.D I>~Jl'\1\..JtO ~OJlbi) t\.t\ v\.. <oliv> 11\.. L-
~111. ~~~/"11\.. L'UJ/
1-\.D t\L t\.t\
~VIO ~/"0\+'\..11\..~.
#elixirs {
border-width:
border-style:
border-color:
width:
20;1
padding-right:
padding-bottom:
20;
padding-l~f"t:
2;
argin-],.eft:
text-ali~:
ackground-image:
background:-r&Peat:
( t\.DII)~ ..111. ;j\L.O\j~OI~ \L.OII>L 11\..jD'?J/"MKL+'\..11\..L '?)~~ "lt\..(..I)JlbjD~Oit\.0 ~ \L.O\LVI......gL

</JOt\.t\t ~ jOitu"\..O.. vJl;jOIL ~ /"11\..V;}t\.D"- v 1>~t-11i...Ju>...V\... {V\111. ;j~Oit\.t\~JlV\...gOo.L.. jt\.t\t-+'\..11\..L
f'_LOit-)( c..~o'li\.c.........gOI bOo.~fD~-fLJ"LOI+t .g /"Lj.jJlb~Oo.~L t.:l.D 11\..jD'?J/"Oo.t-+'\..11\..L '?)~~
"'-'>.g~/"~.. ~OJlbi) "'-'> UJ/"V\..3o~Oo.1..
~
459
- text-<1liCJii
ecm g cmueii
n npuu

lounge. css
, : ,
<div>

.

.
text-align
?
?
n
,
n .
~
611.~r10?
MA~tt ~
"'""'01(
'ioA$aPNUC<I ,11. Hoat"a'
~~ .r fl
t!Sonuoro KCU'81tcttf
xt~pec:c.o. . ,. 6y4er
N l"'' r..
not.apJW('(
3axaAI1 t 8 ..t 4I
..t npo6ylflt ''" 11

Pyrtt. . . . .r~
.J
8 "$ r.
. ,
text-aliqn
.> . ,

<div>,
. ,
text-aliqn
. :
text-align
. ,
( <img>).
460
<.
Ti
. ,
<div>
<n2>, <n> <>. ,

,
<div>,
.
<di v>
, .
,
i!
text-align
<di v>. <div>

( ,
) ,
center textalign ,
?
-
<di v>
,
.
, ,
,
div span
~ 1i1
, n , ,
. ,
200 . ,
, ,

thi n. ,
1 ( ).
n? n ,
,
.
, .
<div>.
462
< 11
order-width:
thin ;
width :
200 ;
paddinq-riqht:
20 ;
paddi.nq-otto :
20 ;
paddinq- left :
20 ;
marqin-left :
20 ;
div span
nomu 3akouAu
. ?
i -,
<div>
/ elixirs, .
~ , ,
.
, .
~ 11LfLXOj\i\...- \(, >v.ittj..t...-~ ~
. ' -
CSS.
, , ? ,
. ,
,
<div>, .
n .
: , .
<h2>
, n <h2> CSS .
, . ,
<h>.
: ,
.
: .
<h2>
<h>,
.
.
: , . ... ,
.
: ,
. ,
<di v>
elixirs, n ,
: .
1) 71(.'\JV'A'
: . n
, ,
:
<h2>,
<div>
elixirs .
n. ,
: .
: , ,
.
: ?
: , n
.
fJ bU/f' ~
463
3 s
m nm cgel\am
,
.
m u gii m
HD1j01tu'\J11.1i\. .~ CJJ 'LO..gO/"~/ . 'Jf....,;:;.

~..g tM> '1. t!Z> O\l(,..gO\.DI/"~t1i\..?>u..
~lil tM> '1. tl2.>1 jDI~ >t:Oj.SI~"\..U..-.sl..g"'-(1.";./"'1.

~01 to/iv> - ""~~.,... t../1'>(if.Sr "I..U.
.. 'J..g.._._
m xomu noAY"um
tvlt)(O~~ ~o~tjortoO..g$,'11\, tM>
'11\, t!Z> 1.,1\.D\~.u>1i\. ~/"0\tW..I';/"' 0~0\
"1.7 0\l(,..gO\.0\/"'11\,+U>..gO'LO 'J~01.
464
. 11
hl , h2 {
color: I007e7e;
dlv span
cnoco6 66m nomoko6
CSS,
, . .
, , ,
uv . , n
.
1...I{.t.. "'f'O~L ..t.jj '11\...UU... /"~'\1\...t...t.

~\ '\11.. '11\...UU.......I\.1(.0\.
htfl
. /"~'\1\..>t..((..'\1\..V..
i v
~l..2..
. """''-'""'-
div h2 {
color :
~
lack ;
Oc...OI.g~(.,J\ \... h.fOI.g1.O\

"'-~c.,.s; IU'IIC- ~II-\..0.
'\
. "'1"01-g'\1\./U) ~i"'\1\..> .g~/"01. ~V.. ~ <l2.>1

~.~'\1\..,..,.s; .....J(.()...~I 1o/1v>.
<div> lounge. html,
<h2> , .

<div> elixirs, ,
, .
~~ /"~'\1\..>L((..'\11.."\. ~ - . t..
~ "":jU\.I~./"... t./i)(ifS.
1"''
"""''~~
#elixirs h2 {
color : lack ;
1/"0\.g~ ~o/"'\I\..I {~1"0\. ~
~V..~ 1\2.>1 .s>..g.~'\1\..,..,.s; ....IJ(.()... 3~0\
(., "';JU\.I1f'W<-DI"" r... t.} i)(ifs.
'\
1/"0\.g'\I\..O .g~'1f'OI~ .. ~t.. ~, t\.D Ol-\..0 ~..u...

lc.O~~I-\.Ot... (I~-'\1\..... 0~/""$0'"7 {_, ~,jj~ +\.D/".\1-\.0{ t..-'\11.. t.jO~OI{'\1\..... t\ .../"0\"'-~ Uj- ~'\1\..t\- 1o/iv>
., ~I...'\11.. <\.2.>{~,/""'; ....I(J . . h.fOI-
.g1.o{~~ I\.. .t..~~ 1\2.>{ lc.O.o1"/ftt.. ~j..-.s; .g <oliv> - ":jU\.I~.oro... t.li'><ifS.
~~
. , <h>
<div>, .
color. ,
#dl2c47
3t
BoJ1fOCb1
lj: lj: ,
, , .
-, ?
, . .)?
0: . 0: . ,
0: .
, , :
#elixirs lockquote h2 {
color: u;
#elixirs h2
elixis, <h2>
#elixis
elixis.
<h2>,
<iockquote>, , ,
<div>
> h2, <h2>,
<div> (
lj: , -
) . . ,
, <h2>,
elixis.
<ockquote>,
<ockquote>
<h2>,
, .
elixirs?
466
11
div
U3u m g 3a2oAo8ko8 3g anumkau

, ,

<h2>,
- <h>.
#elixirs h2 {
color: lack;
#el.ixirs h {
color: #d12c47;
3j- t ~~ ~orf:ft ~.JW~1 .11t.
~ ~~f'OI.b .IW .t..~I1t (l2> 11\.. (IA.3>1 1W.O
rW- ~J.- ~"'.r'\1\. ~\ (! """:JU\.W.'VI.~

<f'W'.O!.oro. t./1)(ifJ. IY\11t '"i"~t..L....jNI (l2> t.rl-\l1!.1.
"j~~/ 01jNI (~>
~~ ~I-\A
"fOivl-\l1!.1ii./
j"jOI.t.r'\.I-\l1t'\. ~-
mu
mecm
lounge. css,
lounge. html.
-<0t0tt 6~:s
.....
..,._~no~
IY\11t. ~:J1..1. t.rt.t..-111. "fO\c-tt...~{)(U)

O~~t-'\1\. .g- /"'\}jt../\1.. v +\..__~\U)\.11\..'\. t\..11\..-
~~'\1\.1\11\.. +\. O\lt-~O\.O\f'~l1t.'\ii.,

"j~~ J.OI'tOO.giW.g <l2>/ ~b.xf.l1t'\ii.,
+\. 't.ltOI:gt\.01ii. v.rO\~
\UJ\It- 1-U..
~. ~
""'~.,_.,pal',~
..
ea...,....._,.llt\'C:Oi.leR~
8 fNioI< "P1A. .f'
... .....,..~
~~.,
..
"~~.,
~.._.,~,
.....-.:~tti,ll.....
.,;.
....
.. t~
,...ii\, 1
.....,."' ...........
r-.. 6.
8 .._ tP~""'..;~
~
_"_"_
Ct't@WI,
IUOI<n.......... GIIIpOn~
.....c-t~to~r
~)Cvv~~~-~
iJt.:.U.iO >
span
, . . ..~ .,=r.
.n.. --;; U!'fi'i.!p<:~aP :..:
Peweue n6 >kmu umu
n-, uu JI
. ,
, '11<
, , n JJ . ,
n, ? n r l.ine-height
<div >, , .
,i n JJ ,
r
line- height, n :
~,.t...1. ~D\..1. J~""'/",...
r ,
<div>,
lem r line-height. ,
1 n .
small, 12 (
, ). ,
<di v > eli x i rs font s.ize <d>, small.

, , < div >
elixirs , ,
<div>,
. ,
1
120% small , <>
, 1 ,
small. ? line heiqht :
, em %,
< h2>
'. ,
,
<div>
elixirs ,
, :. ,

<di v>
elixirs.
linee l i xirs,
: 1
height <div>
, n .
ftelixirs {
line- height : l;
468
Zt
1;
~ .._0\1.0O~I(L t-'\1\.~..
~._";;;. ~1'U>.t-At:40~D\\'\.O
.,;;;. ,..L?,_.,;;;./"I'.t1. 11\.~Lf 0\ v
P..,;;;.'\1\..,;;;.L~\'\..'\I\"..\1-'v'W-r
....
-t
/"
_..
1.~D\IO""'t-.s\ .
cDO~ D\>,..t_",
.
.. "' e,_.,;;;.l"o"''\1\. .>.,....'\1\. .D F v 11t ~-..p~ol:>j.IUI ~ 0-f5
'"""" (
.IUI~ /
,
D\ j tj~M1.jtu\t..-
{oli v> .,;;;. \'\.0
t:.-1. ~~J01j~
fteli xirs {
.
line-hei ght: l em,
.... D\
-'~ j;....a..-\tu.-i'l\t...t.'L
~U...1..0 ~ \,).._0\1.0O~I(.'\I\..
~ t-~011\."""'
v
:1:) -' 11\, <o11V>( ~....,,
~1..L Jw.D\1/I I<.I)~OfOL .-..;~.-

vv : ~
v
~~ . .i'>(ifJ.
'-
w...-~
31'U'\U\..VU..
c.~- oii\.-~ ~--"""'"""""II!JI I! I"""'
v..;;;.~OI /i....t..-\tu.-j\t...t
j {~> j~OI\'\.0
0\~\... rOIJ.Lf'~
~111.V0.,;;;.11t ~'Wf>.OI ~
3 ~01
<oliv>
w - small
~----~~----~
.-~~~.,;;;.~~~~~~~~
/".. t.)iX;if.SI "" ~

,s.......01//( 1.'\. w
/) 2. ~'\I\,I(..CA..O~.
div spa
ocompume, m nu
.
Dt.O...t\..~ 1(1)1.1(..~~iu
rt>ljjt.. " 1'\1)\""'\1\,.\(J)\...'\1\. .g- >.
, n .
..... MDit... .. ~
L SS- ,
<div> id.
CSS
-,
(L)
, ,
4)
~.~~~
~~~~.=.~
- ~~~~:::;:::,:1r
"'-'..,.., \t0611t ....

_....
,..,::;~t;.;_~~ . .,.;.~,....-
(CSS) .
L-
, SS-.
M~~~..."..r""-C.'9X\IIt r,_,.,~. ~"- 1

~- ..... ..-..n.... ,.......l..-l'l(y~.-~~"""'P'I'C'~~
~~,. ~~NC"~ ... -.:.&-
..DI ~.
1(1)1.
Ot-v~(1t!..ltj
i2
:!DI -.
, n q!
,
n
:t
, n n
n i'l ms
,
SS-.
......
~CNJIIO!Of0tlt
~
~
I"'..:~..Onotlf,.,..... ...o'WI'O( .
Ce.tto'a':.tn.:nP~"P<N,
......o.,..,. ..
l(t~"'rcr.tot
,.._..,
.".... ...llmt......
""""'''
..
"*'' ,....,.111' ,.... ...
~.".~
"""''oo...a.,....,~~it
~~:;
~ ... 'l'(loiA/II,I...~~-,..,.
~IU'11M~CfltW-,
t t.O.t 6.t .<. . .

~..cwct'Ou-o.ert,.".
~..,MI'a(,ff.8JoiII~
II(.,C~Of'O IIOt
f%lin-cne~tO"ntA...,,
...-ti!OII'n.:u..p!l.&lti.LNI
..,..,,ca~tO"'e~
...... N6onworo ("""'"..t
JoCnllt<, - IIOJf 6rA tT . . .
6ntro.a.t:Pttl m.ou'
''
St.toaont .- <txa..- 1.-.-

11f!o6.,t $~,,_
J ...C'..TOI'I""'*~
...
uw 6n38m kuu
, , , SS- ,
npecece,apeppaddinq-left, paddinq-right, padding
ottom paddinq-
top.
. J< ackqround-iJaage, ackqround-color &cltqround
repeat? .
, , .
;
padding- top :
padding- right : 20 ;
padding- bottom : ;
lOpx;
padding- left :
f'liU(Oj~'-~ ~ -\
~0\~( ~O~Ij~OI~b t,.,;:;:.t11t't_
W.\.
, . , t<
, .
""- """"'l"t'I. t..Ot-0~ j 01j

~ ~"""~~-
01 -
~
padding- top :
paddinq- riqht:
20 ;
padding-ottca :
padding- left :
lOpx;
padding :
20
l Opx ;
~'~~~<J'k ~~~~~~
0<.
margin- top :
margin- right:
margin- bottom:
margin- lef t :
, :
padding- top :
2 ;
padding- right : 20 ;
paddinq :
padding- bot tom : 20px ;
pa ddinq- left :
20 ; :..'\. ..g_. ~~~ '\..U~
470
11
- 1f.JA'1/<-j o\fl,
20 ;
~
tt.::_. ~1.+Ui\~11t.1. f~L._""-o ~

j0\"'-11\.Ui\~b ~\1(.1... OOf"'JJ.
..,.
.;;:. jWII'I-""'1
..,.
.. ,..,
~0100"""~
'
<:
...,.
~o\f.JA ""-~~..t ~""

... '2.0 ,.,;viJI.~~-
div span
u m
n n
( n).
ma~in-top:
-",
marqin-riqht:
u.)(t\.t..t- 11\, t\:\1\.~t\.t..t- 0<;11\.t'..l>\~111.

-,
'
20;
marqin-ottom: ;
marqin-left:
20; ~
1 ~.g
..
ot..11\..t.:ot..
<j~I).gl11.
1"
marqin:
..11\. .g.tt'>\t\.t..t- 11\. t\...11\.~~ ~ .~"-.t.. "1"01-ot.. 11\. .t..-ot.. ...

~~~~ . .>~t.. ~3-~. CA>Icf'~~11\.t..
, n ?
n .
border-width:
border-style:
border-color:
thin;
'~ t.rt.J.ov~~t...gu, ~
solid; ~
..-~~~ 'tf"Oit\...~1;1.1(.0\"- order: thin solid i007e7e;
ft007e7e;
~,1-\D. 0'"'-11\. ~.;;;. "'j:-11\.
~ ~...>r.j~ IW..,..ol"l;l.i. .gOI.. k.OI'.f'OI.g11\.,;;;. c...s\

, n
bc..t.. .;;;. 0\'S...W'.\'\.0 "1"~
n n , n
-11\.t.t.. C..O"f0\~11\..5\ j.
jOij~'"'-11\..51 C...gO,;;_c,.;;;.:g 'Lf~'"'-~111.
n.
border: solid thin;

order:
solid thin
#0077;
border: l007e7e solid thin;
order:
ft007e7e solid;
border: solid;
u Jaygme ku g Jagau m
,
:
backqround-color: whi te;

backqround-i.JIIaqe: url(iaqes/cocktail.qif);
backqround-repeat: repeat-x;
ackqround :
3t'...OI.ud.JI ~. "'jW'.11\.
.g 'S.. ... .slj~tA-
white url(imaqes/cocktail.qif) repeat-x ;
471
pf!im.;~
6w cokpaeuii

. ,
:~nt-~mil , ~ont-style , ~ont-weight, ~ont-size ,
~ont-variant
line-height.
, ,
, . body :
font-size: small;
~ont-~amily:
Verdana , Helvetica, Arial, sans-serif;
line-height:
l.em ;
. +u.. '11\.~-..<L. ..-:;'11\. ~.g 0~.g", .... -
~/
..
..-:;0\~e.~UJ~~e. .g~._. OIWI.. ~JL.Siw;~
font:
font-s~le
"'/_'.....,
w.O +\.t.. <./"01~-
+U..OdjOI.%t..bt\t..1..
J.,
'--::i.
font-variant font-weight font-size/line-height
n :
font:
small/l.em
Verdana, Helvetica, Arial, sans-serif;
Ow1jO~O\w;o~ '4""'..-:;IC-01j"'~ ~ .gt ~...ot.,.w;t...wr"'.)]o
~~ .gf"t.....U\.-'11\. :Jjt...A'\1\...-:;b ~.gOL.~ )(~~1..
472
i'.rt:>a 'i r
font-f&ily
div span
aCIJlo
3t
DOJb.:l..~.t.
Bonroc
~OOfj?-U\..VU.,
Jj: n ?
0: , . n, n
n n
;~
n .
. ,
n~
SS- no . ,
, n
. ~r'
. n,
: -
, n
n - -
n. , n n,
marqin: ~ 2 ~ lOpx ;
, n .
~,)
~"<.~~
~"<.~
Jj: , n
n ,
, - . ?
0: , n.
, , n , nn
- , n
, . nn
n n . n
CSS Pocket Reference, n (Eric

Meyer). ,
, n
n .
. ,

, . <div>.
.
, :
t...l\.0\.t..... W'.t..IG.CA jt..'I.-.~'1.~..... .DI.J\.t..k\.~:I-'"7 .g~ W'.
1?A~HAS1 vtHO'PMA~IS11 k. D!' 01)I
font-size: so%; ~ CIA'PAIO~S1 '!i"' !!.

text-aliqn: center;
line-heiqht: normal; ~ b11tf>O.g~t.... .t..IG.CA ~ ~UV.:::.r:J
marqin-top: ;
~
ky.o...t.. .f11..()1 :J~OI.....O.g'\I\...jA.9. .t~ro+WtD ~'.g01
jt\.DIU\-'\.t.. ~f""'OI/ (~4t.:got.. vAO.gO{ .. I(..()W'./". .gl1t /""-1-U>~
D01.g01'\.W'.t.. .\I(.t..j~~'\1\...-&,)(t\.U.. l'l.t.. .g~/"t..M111..t-). "': jt\.DIU\-'\.t.. ~3-..9....;;:. ~r'Oo.jy-r:J

~.., .~I O-'jt..AV\..b ~'1.~'1.'\.
.g~/"0\. ~j)(j.~'\.'\. f'\)...t..p jA.9. v~o'\.w..~01 /i~AL-l.t..f_j!A.t,
I)~'\.~ . ~I'\. ~/"- I(..()W'.O/"Ot.. ~I..... oc.......o-~0\a...;;::.v.S\ t\.\ "'-"'/"01~/"0\)( 1~j<i1.<p.OI.
.DI~'\.'\. t\.\ ~/"01~'\.~L
- ,
l ounge . cs s. ,
n ? , .

. n

?

;.
D~'I.. ~~0\~ .g)(

IAU...OIIU :j11\.UU>.g k(lrC...'I...g~
_;
:..~.,_j"'jt.:li\.
1.0:.t...g1-.
~~.
D~L~b ~ .g<A.)o; w-.....o.~t.J\.t.:lil.. .".~""f~

~~ ..
, n - n
)) ?
474
11
dlv span
Sl ,
<em> <strong>
-
.

: , , n
<lockquote> , .
,
- .

. , -
<>
<stronq>?
: , . ,
n , n
n, n. ,
n.
: ?
: ,
, n
Music for Airpons, Brian Eno.
, n-
.
: , . , .
: , n -
:
<div claaa=" cd " >usic for Airports</div>

<div claaa="artist">Brian Eno</div> .
,
.
: , , , . ,
<div>, .
<span>. ,
: . ?
<span>
n nn
. nn ...
~
475
u m
<span>
< span >
3 mpu npocmx wa2a
<div>
. , ,
,
<span>
, SS-
. , .
<span>.
<span> cd,
f)
artist.
2 nepBii
cd
artist- .
u Bmopoii: go6a8Aeue m < span >
lounge. html << .
<ul>
<li>Buddha Bar, Claude Challe</li>
<li>When It Falls, Zero 7</li>
<li>Earth 7, L.T.J. Bukem</li>
<li>Le Roi Est Mort, Vive Le Roi!, Enigma</li>
<li>usic for Airports, Brian Eno</li>
</ul>
<li>Le Roi Est Mort, Vive Le Roi!, Enigma</li>

<li>Music for Airports, Brian Eno</li>
</ul>
476
div span
mpemuii: cmu11u3au 11m < span >
, .

<div>,
<span> , .
lounge . c ss:
font-style: italic;
Tecmupo6aue m6
< span >
, . :
~ ~ f"\
d F1rst
"' +
~ Ale l//<bpttrll/IOul)9o/loungo.html
'"'ffl>OM.n"!raJ.!
rr w n
n .. ,
ti'l
w
n. w r

notaP!\A~Y

n"
t.n
~.
1-t..r ~~ ...:f!/.1!1(./\'\.
I.......;)'\11...~~ o<fiOr~
~01~11\..t\.0.
.n.w. 1-', r .n,

iii\,
TiiK
,.. w. .n
.n n.. J n nh, ,
~.
&Jddha 8ar, Claude Chall e

When 1t Fa1Js1 Zro 7
Eorth 7, L. J. Bukem
L8 Rol Est
ort,
V1ve ta Roil, Engima
MusiC for ltports, Brian Eno

0 20~. <&4 Fir
& Op.I'Oi bll ap.fl, ltOOPWI noe"_. IO< 8 Ml AIMMw C:lii1-t, M,I/ri'(J CoiCitl(lof'("n.Jt 111
477
spatl
~
. <apan>
.
.
<ul>
<li><span class="cd">Buddha Bar</span>, <span class="artist">Claude Challe</span></li>
<li>When It Falls , zero 7</li>
<li>Earth 7, L.T. J . Bu kem</li>
<li>Le Roi Est Mort , Vive Le Roi! , Enigma</li>
<li>Music for Airports, Brian Eno</li>
</ul>
Bo:nroc1
]j: w "]j: width

<span>
, <em> <strong>?
n <span>? ,
, n
.
0: , 0:
<span>, <em>
. width, padding
margin, ,
. n
n ,
, n n
, n
, n
<em>;
<img>, width CSS,
n n
).
, n <strong>.
n, n .
. n
, n
, .
n ,
. n:
<span>
, , n
n n
n n
n n.
, nn
, ,
n , n
).
478
11
<strong>,
5:
width
div span
, ,

.
,
,
<>.
,
479
mm ccrm<u
m <>
u 2 3m um
, ,
?
- .
oryr .
.
..-:; U.l1f.L(./)\( +V\ 1<..0..-:;oroli\. ~!rt ~~~~ 1'\.L

~t..i<.D\'\1\.. +V\j~l>.~c.. t\J...k..O~li\,
"3<1<
'11\. h-0 _j.I>.+-~...'11\.. ~ C..'11\.>1...'\l\,.1i\, "'::;~~-
<~"
)(
'-?- 1
n
n?
w n11
n AI'I ,
n1 I
111~ 11
IW!W!!)j.
wr
)(
n. r
n1
n t .
)(t.
n6
)(
n6
APynte
9.18..
~-
0 2005., tctt.-a Htt1 F1rn
op,.twt J t~ro ct.t-wt .-oetAitiiiJ'I'C 1111 .uwt" c.ait. .t ct6cnuocnJO tUI
<> .
, ,
- .
, . ,
<> , .
t i'I&.U.IIIIoiLtt
Kak n-3 cmuu3o6am

m ux mu?
'l.aCJilo
3t
Bo:IJfoCt
, (
). ,
. -,
? ,
. , ,
,
. ...
, , ,
nce()!(Jt(J,Cc, , ,
, ,
. ? ! ,
nce()'I(JtO,CC',
~ _
_f)
'11\...-.g... <<. > \1\At..I
<;
v~~. <<:>>{ G\jOI.t...j~Oit..Iv voV.O.S\1'\..~ ld>.O/"OL.t.

>(.111..... ..,_'\.-0\..
j_
.~. .. ~/" "'f111,.....t..A-t..W.-
a : link {
~
color: green;
"Jj: , <>
? n:
color: red; )
0: , , ,
t.~ ,
,
,
, - .
"Jj: ?
0: : .
,
t.~. ?
, .
O'S I.111...L ~1'\..'\...\+"-~ . ~v.ittj j01
div span
v.SI "-~~~"-"-.

, .

. ,
. ,
,
,
. , -
"'f""-a:visited
L~--- Do..tV'\t""- ~or
~j CitAOr ld>.0/"11tt.. ~?L
color: red;
'S:nt..W.
'S(1tA11\,...,_o~
a:hover
color: yellow;
""'\ .. ~ 01" "'f"l....t..-
, .
]j: r
? n,
n
l-\.\\t...v ~01 ..,_j~I......
~'\...
0: , r. ,
1
~~~ vvl1tAI<(J ~'"i)OI.Ut.b
, . ,
: lik, visited, focus, hover

active.
, ,
lounge. css,

lounge. html.
,
. ,
,
"Jj: , n. nn?
0:
CSS,
(). , ,
. , ,
. ,
lounge. css,
...
.~dQ'
tl:...
, n.
n.
Head First:
, .
, .
,
, .
? ,
,- 1980- .
: , ,
:
<>
. ,
-
visi ted
Sussudio.
? ,

. .
Head First:
Head First: ,
, ?
, ?
: <<>>
-, ,
hover. ,
? <<>>

Head First:
hover.
, .
,
?
: , ,
Head First: ?
: , SS
.
,
. <<>> <<>>,
Head First: , ,
?
<<>>: ,
: ,
Head First: ,
, ?
: hover.
: visi ted, : link
, .
Head First:
link,
visi ted
hover
acti ve hover,
:first-child
<lockquote>.
:
:
. ,
. ,
: , L-
,
, }'
.
Head First: , ,
. .
- .
, ,
L
.
482
2'i< 11
Sussudio?!
.
, ,
div
span
uu nce6gokacco6 npakmuke
, . .
, ,
,
: link
:first-child,
, . ,
, , ,
. , ,
, , ,
'nt. ,
.
lounge. css ,
. .
D.W(j..g~ VfOI..g11ULO\)( .t OVf~L.t.....

#elixirs : link
color: #0077;
:---,
~..gL>.D.I\...9. ~c..~UU\tX .L...

0\Le....gO\.D\/"'\IU-'...O..g/:11..;;.._(
#elixirs a:visited {
color: #3 ;
,..
lounge. css : link, : visi ted : hover
,
. .
483
.1ns'
';.~.~
ecm g ccIAok
, ,

. :
, n
,
"
, .
r ..
n?

,

fieoworo :
n . & r
r
n.
\~ t\.t.h.O~ .-.-!1(,"\1\. o""-o~fOI"'OIIO""-t-..!1 \1(.~0\.D\
/""\..~11!.. ~~...w...,_01 ~..-
" ni\
~- c-t.rl1t... t:::..-"\1\. "'t..
.g'~ ~~~"\!\.~ J""jOI""-Ulb

~"\1\. ~ c-c-fI(,~ ""-~~
A..!\~t-..!1 "f'OI~ ~jt-~1(,0\.
200$. t 1 11 Ht d F'Jrt~
&: . Toproaw N8pC~ KOTOP~II 0118.11~10'_. ... A.Mio!O.N (.;,... .IIIMIIOC:II :6.t~~J ""
tn'-1\"t~
. ,
,
. ,

- . . ?
n n, . ,
. n .

484
- >.~ 1'l
l ounge. css.
#0077;
#;
}
}
div span
nopa AU nooBopum kackagocmu?

( , 485- ),
, '/ .
, n , CSS.
, .
n n , n
. , ,
, ~
n . n ,
, n . n.
DO:-.tf;~t11>(,.v;;',b ~(. .t..
~r~-'1..t..~"'-'II\....OI"'-~ . "~~~;:
ff11J..,~11t. ~..'\1\.. ~"-11\U\A'\1\..

j.!U\ ~r~~trt.
"4"t..O"'f'f6t..A'1..b .g'_. ~~~'\1\.. ~""'::"-11\..

D.!U\ w.(1t.O~ l(.()~o"'V\U\"'-'\1\.S\ "~1..
..~\ J"JOI.....W.t-. ~11tf"M.~'VI..L ~i""'fo.,f-01"-t
,~~A~I1t. ~1.I\.t..1../"-.-
...... ~'-~/ ...Cj..gO.!U\I0"_;i'1.1.. ...CAbjO ~,t..-
u..
f11J.., ~
~11!. ...Cj~O.!U\IOI ...0~~-
.. ~1..1..J~
<
~ ~~
~... t-O~OI-tS~. t-DO~~
1"
Jr.'
)(\L--~~- t::t-1....g ~01~11\.. ""'~ ~ -j~'i.~~I.~1..-. ~1..1 . '_}''\1\...L
( !)
t..t-. .~1J~~ ~1.I\1..1.. ...0~\.t..JU\.
l ~\(.()~ ~!11. ~t..J~t..
n
(w nnn)
~ . ~r~ ~.
'-Dj'f'~ M~Of' ~1.I\1..1..(

~.r11!.1.. ~~.-.
... ~.~"""1..I t.....'\1\..~111.

.
O"'f'fjt..A'1.'1. I."-011\..-
. ~'1. j.!U\ ~~-
k>.t.. .(1t.1 ~'1.'1. ._,

~.~\-\..'\1\.. ~Jj..../
u-1.. ~ "-'\1\.. ~~.r(,\(..1/

"""'\1\.. ... ~~.t.(..1(..1
~~ ~/"~~ .~)(~'1... O"'f'ijt..A"\I\...b/I."-01..

~'1. "'f''\1\...U\.."\1'\... "'~_j,t "'- ~~
..g..t...'\1\.. .~~~111. ~1.I\.t..1... 1r'1.r~ "\I\.....U.

~..gw.or(..I(..'\1\..L (. .v;;-. ~~~1..) ~'1.~ 0~.t..... "'$1-
...CbjO..g~>t.b(..I(..'\1\..L ~ ~"-0~ ~ . J/.\j~t\t
~ ~r~t.. ... ~.~"'-1...
iil IJ (111('j .~~'\1\..~ ~1..t..1...

lipayep
485
.
n .
.

.
n,
n ?

. n,

, ,
.
n,

,
.
, .
n
,
n.
, ,
'I' ,
, ,
n n
, 99% -
( ).
486
11
dlv
span
Kackagocm

. , <hl>,

font-size.
Wrn
m.
: , -
-, , - ~
....-------
, . , ~
, !
War
~--~
font-size, ::J'11<-t- ~ 01"'\.'\./ . --..)
, , , <h
u
l >.
J)
"'.:':L'\. :.J\.\JJUI.
-- v ._...t..t\. <.,~0'\.
~"'
, - CJJ-""ft\~'I.t\ ~~MI<.U\-'\1\.L..
<hl> font-size.
War
, , .
~1""/"o-rrt\..._t D .I>... "A::JDIL
.'\. ""ft\~V\.t\ ~t\~. ""'.g...'\. ~ +U)I~'Ii\. wr.'Iil.fO~\d....
, , :
, , . , ,
, , ,
War
~t1
.
,
8.
, . ,
lockquote
h1
<lockquote>.
<hl>,
hl,
, ,
.
War
n.11
, q:> ,
.

( ). ,
, , .
! ,
font-size.
, .
487
,v
u2
6 u2py Kako6 u npuopumem?
Dt>..gN.1L-:JG>..gt\D
~ 1,(.{);)~'I.V
, , :
i:!'
00
-LA111f.t... 1..V>.1
~L. )(l-f"M~..
~2.g~t:l1r
1A-;J.J..i..A-\.-1.ILOt-
, :
t\D
w. ~/.1UI.o jO _~.g-
? .
~.
C~of11tM1A-M.
lo/1A-L VDjc>.W. ~
000
,
1-W.c>.iii..W..t... W.
il..G>.Il.. 1..V ~11\_!-1...
OjNJ..._) ~_j/ W.t>.ll..
L:
hl , :
w. j 1-'v'\ '2>1)(
1..V.g "fc>..go... vo'2>~~..-
'2J~.LA ft>.~+UIW.bc.. /1.
fL ./1-L W.t>.ll...t... vJ : hl . lue ~ 1-w... ~1A-1-'v ~>.,.,.1 W.ll.. w. .g c..f~+U....
, :
lf1-W.c>.iii..W..t... w.
\l..il.. 1..V Oj1-1-'v- ~
11
.-'2iv--j
+u.:to
'2>~-L> .-w. 1..V
~ ~.w...;;;,~W.OfO.g ~ 1-'v1- .g ~l~.I.- ~Of9..; W.ll.. w.j o'2io1)(.g .t....g... .-'2>t..t...~'1~-L .-W. 1..V 'v '-'V
t\.Dij~c>.W..
, ,
: ,
. ,
hl,
hl. lue
11,
1.
~ ~ ~"' , npoprera , <>

:
h1.greentea - - - -
img
a:link
olli
.green
#elixirs h1
em
span.cd
#sidebar
div span
aCJI)O
Bo:nroc
"V: n ]j: n "V:
. ,
!lmportant?
0: 0: nn 0: .
:
100
()
010
(),
, , , 001 (),
. .
, n, :
. n ,
hl(
]j: n h1, h2? ero

?
0:
: n
001 ,
001.
h1,
!important
, . n
font-size: 200%
!important;
nn,
n , (,
nn n.
, , ).
h2
m m
! . ,

color <hl>:
class="lueerry">yo-anw.t'oJC ronyJC</hl>
<hl
War
t::f:::-' \fo~ ~11t.-
hl{
color:
la.ck ;
'Sr~t ....w...~ w.
~0\~ ~/1t.S\<J
n .
t\,.~b, 1.(.0\1(. ow.o'SrOI~0\w.~

{ >.
00111!\
&3
hl{
color: lefefef;
3w.o~t1L (I-\J)\jO\t\..-
..u1ti- .-~).
body hl {
color: lcccccc;
hl. lueer:ry
color: u;
n~38n~
&::----"
t..o~tJ<.r w-....)j~\11;\,
'SrO\~

489
War
hl {
color: ltcccccc;
.
h1
color: black;
h1
color: ltefefef ;
Wr
hl.blu.erry
color :
u;
:
, n, .
hl{
color: lefefef;
hl.ueerry
color:
3j.t...LO .t. "'1"0~0 '\-~.,U,..V\.'\

.t.r~I'\.~ "ft\-{\11\. 1-jt\"-111'\JI.I
lue;
i.X-{\ t:...~jj~ ,__ol"~j~CL: "-t\.oi"

(,\(..'II'IL ,__o~oi't\.Utb(,I(..'II'IL "'1""-{\~
hl
color: ltcccccc;
hl {
color:
War
~l""j,J-f"
laclt;
.
n , n.
color : lefefef;
hl. ueerry
color: u;
0 11
hl
color: tcccccc;
hl {
color:
lack;
2}
1~
lue;
t:..- /w.fj
hl {
color: lefefef;
~~~t:..~
-{\
d
color:
n,.,oit\11\.o (, I<.J\.0\ (,-
t:...t.i. -t\t.y>)(/ ~<..
$..\(.. ~ ..i<..
(,~JI.bi'\.Ot- 'li\.(,J\.0
"'1"'\1\.0/"~~.
h1
color : ltcccccc;
hl {
color :
lack;
11
2}
1~
0~1""";;;.~ -t\1-\.~"'-'II'IL .~ t:..OI".1fjUI- "'1""-{\11\. .1<..0 -{\~";;;.1""'- \(,.

u.l""'-,;;_ "'1'"-t\V\.: "-t\.oi"(,\(..'II'IL ,__0-".U\.(,\(..1..t. "'1""-t\~-J~. ~1"~" tvl11t tU..
t:..OI"."'fjUI--t\u- <...'\-t:..~<.. ":f--1J.U>., ,__..j . 'I\.D\t- "'1""-t\11\. boolj
~jV\.OV ~(1(. -{\~ ""ft\.g'I-J\.t\ \..V11 1<..0.o/"ot-j~t\1'\.0 t\-t\./"..
490
11
War
div
span
RI
,
.
HOo.jOo.t\k\.O.. ...~ ~ "t'o'S"~ ...~ ~~

J +~.t>o.c.. ~oo'S"~t.. I'I..L ~0 0... ~tv.:p~J-
~
/
hl.lueerry
color:
lue;
~111..\( "t'Oo.'1A..Il. /"Oo.~1A..Ilo .. ~.)..
hl
/~UfJ/1/\...LIO~ 41.1\.(..JLO ~111..0/"~t-...
color: /lefefef;
/1/1 1 - ~t1il.. JL"'j~ ..111.. '.J +U:>o.c.. ~j.-
.. c../"'$Jj~Oo. "f'Oo.~1A.JI.Oo. .. 41.1\.(..JLO.I. "f"11\..0/"111...t..... 0/1/11 . ~I111..'1f'Oo.JLO 'S". . "':fOo.~111..JL01

~./"t.. /"Oo.CAJL0\1..0\JLOC.. 'S". t\..11\..?J... 1S .Oo.'S"111..
body hl
color: /lcccccc;
hl {
color:
~t..C...111..JLt..1il...
j~ OJLbJO,gOo.~t.Jtb
lack;
nn ...
,
,
, hl.ueberry
. ,
<hl>
color.
'laOilo
Bonroc
U: , SS- 0:
, ,
. ,
, , XHTML
: , n, n
no
no n. ,
0: : ,
, SS-
. ,

CSS-
L-.
n, n
,
n n
,
n .
U:
?
n .
U: 0:
n .
,
,
.
. n
0: -, .
n ,
. n,
. n ,
, , n
, ,
, nn-
n .
U: , ,
491
, .

8.
, .
, :
, border .
QU~~(lr ,
font - family, line-height
. .), -,
, .

,
.
,
.
,

,
.
,
, .
.
492
.... 'li:
11
(! (eaiime :m ):JI1faeue, !Jf

11t'feiimu cJieiJOIIJ,eu r!
.~MO'JOWO~
.15C(W,-'1PM
"OVfWEt-\t-\ ~t-\0~1'
. ,
,
. , .
lounge. html
<div> elixirs.
f)
<div>
elixirs
.
?
lounge. css.
#elixirs.
float: right;
? ,
div
span
div span
<di v> ,
. ,
div h2 { ...
,
.

<div>,
padding.
. ,
padding, margin, border,

background font.
<div>
<div>,
<sn>
<di v>:
,
, border
<div>,
width
.
<div>,
<h2>,
. , paddingtop,padding-right,padding-bottom
padding-left-
<div>
, . .).
<span>
<span>
),
.
<>
. <>
, ,
,
.
unvisi ted, visi ted hover.
Text-align-
494
. ,
<>, -
: link
: visi ted (
: hover (
( ),
)
).

: hover,
, -
11
:first-child,
:active :fus
div span
Peweue
30
, .
? .
+ 2 + s + 200 + 10 + 2 + 20 =
269
~ ~:.= :~:::;=r::;;~~~:~:;;:.:";:.::;~~ :~=~~:

200 .
, n , ,

thin. n,
1 (
). ?
, ,
.
, .

<div>.
Peweue
#elixirs h {
color: #d12c47;
. ,
<h>
<div>,
#dl2c4 7
color. ,
, . .
495
jt..~.... ~ j'--11\.-
. ,
..~'\1\..t.. .,.J\.t...t\.
~<-~ ~~ . ?.-<-
,
. -
\'l.t,L
1
.. .\'\/{
~<div>, :
1) \'V\
.- ir,") ~ /\.-.,. Ll-n..
t:
"\ D _; o-..n l v
~ .
<:'
~ 1>HtMAHIAto
1>111j<>~..... V:.f...L(..C ~ ~/"~
font-size: 50%;
t~xt-al~qn:
center;
~ kpo.t- V:.Cft()f jv.01~11\....jJ\ .t-?v.I"o-
l~ne-he:~..qht: nor1114l; ~
arqin-top:
+'\.OU>
~.g-0\JI.O\ j~.t...h.VU.. ~;..,... 01 /.
D"'~"'1..~.- ~01~<-?L 0 ~~11\.... ~t.y>)(tU..t..

~~ ~~I 0-'jt...ll.~b t\.'\1\.?t\.'\1\.11\,
DOI~t....~1Aj~~
~1.Otv\.OL 11\..$1 foo+u.
)JI.O~~jll. ~ OvOIJI.btU)i\. ~/"

...\~V\.'\1\. ~ v/"0\t\.~
<div id="footer">
<>
&;
2005,
</div>
~ CJJ-)jjJ\ t\.'\1\-t\..U.O
lfooter
font-size: 50%;
text-aliqn: center;
line-heiqht: norm&l;
marqin-top: ;
496
:::~<! 11
</>
I(.OJI.O~~~J\.01.
Head First<br />
div
span
~ ~
'~ Peweue

<span>
. :
<ul>
<li><span
<span
<li><span
<span
<li><span
<span
<li><span
<span
<li><span
<span
</ul>
class="cd">Buddha Bar</span>,
class="artist">Claude Challe</span></li>
class="cd">When It Falls</span>,
class="artist">Zero 7</span></li>
class="cd">Earth 7</span>,
class="artist">L.T.J. Bukem</apan></li>
class="cd">Le Roi Est Mort, Vive Le Roi!</span>,
class="artist">Enigma</span></li>
class="cd">Music for Airports</span>,
class="artist">Brian Eno</span></li>

, ,
, .
, .
.
Buddha , Claude Challe

When lt Falls, Zero 7
Earth 7, L.T.J. Bukem
Le Roi Est Mort, Vive Le Roii, Enigma
Music for Airports, Brian Eno
497
~ ~
"
Peweue
- n ,
. ,
, - . ,
- .
. ?
n , , , .
:
a:link
co/or
a:visited
color
#0077;
#333333;
~ ~
"
Peweue
h1.greentea
11
img
a:link
. .
003
em
001
002
.green
010
span.cd
011
11
#elixirs h1
101
#sidebar
100
olli
72
faMe:r:nKa
:Il<>UU<>HUf<>Baue
wn L-n .

. ? ,
<div> <span> , .
.
, n n ,
.
gu ynpa>keue Mo32oBou wmyp

nwu co>kocmu?
n <<
,
,
.
.
?
< div> elixi
rs
,
n
e lixirs:
----;
rmAJ1oSur\l rt Hcad f;ir"!it
roet... ..d t'nt6t PIOIII: ~""' .....r. 6 - lt_..,
.". ~~~"". "~'II-"""
tl>wllle.Qefaoo,ot-reo. -...
OI.O. . . ""*oet-~IQ!Iof'QIII~otO!~ICf-IOQif-Cy-~
1 1 -t l t l &\-1 I<f~O..._&<!\'Ct<W "~*"""'fOI'IItltOIO
1!-U'I'~
..... ,~
& ':"'" - - npeM- r ""' ,., , ......,, ..~.- no-:~

,..,. ., 6n-. fJAtcnoOOoknon. ~ '0'1'00 ,.., ,.,._,
1~--. . M6)'llott, '<'> ltOcr.to:i IIIPUJ't'UI 01Jo6o.t/Oiolit
ilt<IPPio.&d,eeayn 1 ...I!, )I::.N,....,t : CIA6oio OtOI! 109tf6)'8:
float: r i qht;
_
-
.l'ltot~I'IOtlt~~
eo."-:tJCJr. ~~..m. ~..
....~-.~.."...~"''C::J-(.,.,,.,_,.
wrV..........~.~~
, -~
,_".,..~* h~<-trtJ-~~'-IQII'fi(Ot '"'~"
? , .
1 . . . . f\(l,ljl......"'o<. fAI
.ot~Oofo'"t(llloA. . . w.a:c~.f~8oW!lt.t6ya.,--"""""'"'l'"~

.
,
,
.
1:
. . . . 1P8AII\oi~ ..tfl.6 .....
~tll;lt;,
- - "''"" .....,._.,
tt4t()(t.Ao6a.ene,._OI\I,I.tl~
QOC>Oo'l t1101;81t'f'O(~...t9
11Dt111. . .1 .._ , )'JIJtll__".,_p

t~tC!'WAt~ltOOt
t<tpt<<tfl,
.,~.~,~........toC'!~~1tW~-
-~ Welw!ilt . o6. t ~np-e...c ...~~no.-cou."..
~
~~..."""'",... . . . . . . ~10810~.
ttJt(l(aSJ "1y:tIKit
..rpr
rQctep(l-'!
..
.. ~. ,.,,.,...,,.~""'~ n, v
~~er~;~.r..c:,~o.:.~~o.. r-..:ou..oc.nr-T-o...".,,e
"'111 1\P"**AJ!IO a&tO ~ COt'Ot\O)OIW;"'" ~Oroo-lit:.!!Ut- &!~

-~..._
IIO.)Ct",(o;-IQ'It~
t>fotl/(~.~~7
'I~~I0..-6#n.OIOf'OI(O~
. ...".,.........
~, .
,.~~sttttt,.~Lt/f:041,hit"'
ko
&!UU.t!I<'OI IIOA,.:III.tllf
fnoo
.,._
~
-....
)tJI~ or;fUft l(t'8.AJtiA. t....P"
8100$,"'..,.~
...... .,.,.,. ......_ ....,.n
....,.........
,.-
~,.,
""., "'lo.-o
...w ............. no.t~ All
tttrt~~7,t..TJ.8ke.m
.."flc."Arpor, ~
"1'\,r
1'1006.... "....._,10~ Ottt,lti/ft
l!!tiOt#lte.t-, CitlrdtC.'flle
;~~~~~
)l:llo.&II
...
500
:t10 tiiCI ... t<of; 1 1'10'<0. . . . .,,"_
"'IO,.."..._a.;eilwpt.-r -~p)fl'l'-f ~,.~O"t"'""I'W\e

~~- IOW!Ialf..~It..Ciert t0oo~...,.,...
6..n_ot.6_..,.
....--e, ., tiOI~J1ffO!I>t-~~--l(e.~e....-..omfOto~
.."'"-..epowtt."""""-""
6,)" U" ~~tP"Ita .
~.-.~
~OOfo-1-tttf'\'l(t~...,.
...
? ,
...,.._"'"'"""'-'fce'tt<l.
"_,..,,~~~_...~
,i('o""..'I,'U<N/10<"~~.."~ ..........
.....
u~
n~ ~rn. roe
-~...
........"..-
~,,.,
~'(4il:t )'!\tM.t;'iiJf'lt
~~.
UcnoA3yu nomok, k
- ,
CSS.
, .
.
... , .
- ,
L-.
L-,
,
.
,
. ,
, ,
, . . ,
. .
<head> ... </head>
DotWt.t.. ~111.
~t.r'_j.t-J\ .g .. k.Of.s\j~
.g !>.r.. .g-.rt...:>.. t-$1
~
.groo~~
<d>
1. k.~.:>..-J\ tU\
<html.>
<hl> . .. </hl>
<h2> ... </h2>
<> ... </>
<h2> ... </h2>
<> ... </>
<> ... </>
<> ... </>
</body>
-.l""'~
1 -... \U)\~jOU>
~AO+U>'LO ~t>.
-..g'I..-.S\ I"OOr~
c-.ro~e.'IA-.
</html>
0~/"D\.~ .g~~~
.~f:lt.
~D\t'-1~\....D~IOI .gc-IO
~1f1-~ -.r~.'I..
( hl
( h2
l"
[ h2
\"
. ~~~~~ v;:;.f'O\t>v~O\. 3.t....ii\_~

~AOt\..11t.t.. ~l1t. t\.01 v;:;._f'Oit>v~
/o~t-/.
ora~omaUme
~rr
OmraU:me faU }ota1ge.

tml u un :t
:m~. jaeiime
u U\J HUX Oil_FaHU~
, f:mI!1 :i
i, i Jl.<><fI1
m ~.l} m
:x:urorufoam couQI1o {
l~~-, maK IloKa m, :m
m. ronerme u omem,
11f uramcff m.
v;:;. ~_ ~.ot\..11t.t..
~t1tr ILO.orlf1.t~0\.. ....Ot\.0\jO~~.c.-~ jM
~11W)A~.U-\.:\.S\ ~~0\t>v"WI.
l
l
hl
h2
\...__
"'
502
12
__))
Kak ?
, ,
,
.
n. ?

: , n .
<>
<m> </m>,
<
href= " everaqes/e~ixir.html"
Head
title=" HaJC
First">anJ<< / a> .
</>
~~ ~t.r'II\....O.t..JOIA1...g01t....,;;;t-J\ ~ t../"01~ t-L..gOI 1'\J)\"'f'OI..gO jO

~ ....rJI"I ~ ..g t..I"ol(..t.. .. ~1 01 JI........ O'-j~..-..gA.J\t....,;;;t-JI
j?l
":'U(Oj ~ '-Atj)IO~IO t../"OIC{J 0~/"01..-:;~ ..g\'1...'11\...l'\.~ .-;; ....___.../
~l"~j "'f'"Wj~". ~ ....rJ-;jl"~..j I"~ ..-:;~ 1'\J)\
Oit..'Ir .-;;~&t Ol"v)(OI"o~ ....rJ~OIAt-JI :g ()4(.+U...
.-:; '-Aj~"!iltt -'\. .t 'j_t..Oit... ~01t..

~
Wjt.r'\1\..DU) t..Ij-- ..41..U-\J:!~~ 1)/"~ "\.1\..L....rJb~
t..OAbl(.() t..J'!~ (,I(.()Abl(.() ~t\.0/ .-:;o~&tJOIA~b 1'\J)\
t../"011'\..~ ~.. Wjt.r'II\....Ot...
1,....-te_xt_ _..,
Gi:]ffi.ill
1
text
\text\~
503
Kak m paomaem
, ,
,
wriii\)O~D\Abt\D.M.. ~"fO\
.
,
,
span em,
3~11tjOIA1..gD\IO,;;;.c...~ ~
. .
.,.,:;;./"0\~ D\t\.D\AOU\-t\111.. O~f"'jO
D\"\.t...... ... ~ ~f~"'t1""'3...t..r' IL,;;;.orow j~~

, <,.., :t.o I.'\-"'~ 1\.D\"\."t!~"\...-
w;;.roN111.. 7~11L
:~ 1.j~ vv.D\"1 ""Odv t.:
)(~ .g ......u),;;;.Of111X ..u..;;::,D\)(
~~ <..,/"01(..
O~fOijO- ~... ~j)(Oj"I.AOI.
Dot\U...~11LjD\A"I..gOIIO.,..:.c....S\
h1
c.";;;.l"o....__"I.~ (.,.gt.r~ :g..__"I.j{ 1. .t...~~
\ ~
text
'Ift
..;;;.ru...~
jOIA"I..gOIIO,;;;.c....S\ ...t.:~D\
text
[ h2
~"fD\.gol ... ""'t.~...
~~.";;;.r~
.g .;;;.... ..u..;;::.Lr "1j t...
span 1~1 span
~
~:.
\ ' G~~~J
\\
jOc.";;;."I.'!.t.,.,;;;.c...~
12
text
text
text
text
1 span
1~1 span 1
"fD\.gM
-"\.
1-joOI..__~"' :D\.
~'-f'~"I....OW.
11
504
text
JJ
text
1 text
l h2
text
""'
30\..__"\..\
1
1
text
text
text
text
G~
~
ogu m, komopii g>k nm

,
. , -
, .
63 pacnoataem
gBa
m ogu 3 gpytu...

, , .
, . ,
1 , 20 ,
30 .
not..
not..
3jt.Ch .g1j1..j.gDI
"V\.jO~fMKU\..1..S\( fDI~O?~
jf~3D1jfjLO.... V\jO~/"DI?W..1..S\
. rtt.. ~l1J
........~ ~r~ j~~Dit...

W( .....o.A.J>.
.~ -11t.W.."V\..
f01 c;;;;0~ .....w... ...t..?jj rW..jc.DI.."V\..
u 63 pacnoataem
ogu
g8a 6 m
nog gpytu...
.
, .
.
Tho-II0-1rtr-....... k."-'U, I
b~CI~o.. w.t..Jitr5&. . tn
..,....,.Wcdtnk.tknl\lol~
DtLo.D\ !>~~ !)~
c-..-<(I(J"."ur. IUJt..llkaaJfl'"
alnojo.,.-dW~U"'Itc..... ~
--~--..ot-
- -..... ""*"'WIItot'r.!!o.itolrnh
-~..m~-
::
1c t~tW..&.-." ... oodwI.. Iw

. . . . .~", III ~Ur. .....in
.;;; -tLo.DI ~Ob!11LW ""3

j..gj>< ~>t..1.. D"'-j~
!>t.. .g~)(~W ~D\ ~
t-OeDI-~t... /10 "'-1~\..~(.C.,U.O.gl

01 .._11\.?~W - 2.0 "'-~oiS.
Ej"V\.!WL !)t.. ~~t.,.;;;
-tL.1. 2.0 "'-~-.
:::::~~.~:;
-.... ....
,....,,~
......~n~...r.~ . _ "
~~...........,d-
~.... _.r~wf;ljt)w\o(oo!OnftNI
..-~.,.J,~
--------
jt
11f
"]j: r, r
, . n
n ( n), n
n,
, n
20 n,
20 ?
, ,
0: . n ,
"]j:
,
n n
"]j:
n ,
r n?
n. n
r ?
, ,
0: , .
n ( - , -
r), ,
. ,
0: , , ,
, n
, , .
, n
. 001 -
no 10
n,
n n n
n n
10 n.
]j:
0: , -
, ?
,
SS-:? n,
float:
right:
float,
xopowo
n~ n.
, , ,
, ,
. , ,
, floa t.
, , float
,
( ).
, n , .
506
12
, - , ...
Kak co3gam nAa8auu m

,

l h2
aiime ugemuukauooe u

.
text
\
.
text
id-"amazing
'
text
text
\=~p~~s=pa=n==l~l~e~m~l~[~s~pa~n~\~l~e~m~l~~~)
amazingfloating paragaph,

amazing.
'"'
1\
. ~~==========~=:=:============~\_
'
\
text
text
Kak 3agam wupuy

200 n.
ld=amazlng
\
text
text
#aJDAzing {
wid th:
lu-.t.r ~1f'I. t>.'S;:yr~t>. rr.g~ 2.00 ---~-'"7_

uo ..r~ )jt.r'~'\...OL ---oj!7U\.Di ---oj~ ...
/"f3.Lf' ~.., r'S;:yr~ - "-:. 'S..~'\.
~ .__."-:...~ t\..'\.UP.I(.W...~I1t 1'\L
"-:. /"(~..~ j".sljO.. " 1'\..'\.../ "-:.(!(. $.(!(. ~lj

~t\l1l..1. .~r..1. '\. .__.-.t.. t\,.'W(jo-&r.g..s~t..Iv$1
'?J
text
2 00 ;
,;=P~
, s=pan=\=\e=m~~~~x:p~an~\(~e~m l~$\
~==========te=xt============~\
text
\ _
j"f;jj"~ ../"\-1..
507
Cgeaiime
nomQJ<
eto ntu
text
right:
la~~~&zing
text
.
left r i qht.
fl.oa t
: id="amazing
width : 200 ;
float: right;
text
\:
'
:~
,
,
.
~--------_]
aazing,
text
(2.) ~t>. ~/"~ v,jt>.'1u>.ge,;;J"t,Oo.t..
) C+W.Mt>. ~l'~ jM"\1\...g~ ~t1t. 1'\.

.:;f ..~ .g 't.. 1'\..0/"~j.a., j.g"'II.."'.. .- c.-~)(,j .g..."'ll..j.
~{ I(.O.;;;.Oft1t.1i\.I'\..O..t..t..I-\-\(.L)\t<
k.Jtt>..gt>.I0~1..1i\.f O.../""'J~t>.t.. UC
r'\..).. ~t>..gt>.. ...'\...t,..,;;;
.;;;..;;;. t>.~j"'~ 1..j oa~t-1..0 \'\..().;;;.~
1...g l"t..J)A.;;;..;;;.t... .;;;..;;;.

(3) n")~ ~D\.gD\IO~"'II..1i\.
j~ ~11t. 1,(..~ "'II..J ?

.;;;. .:;Di~ ~~
1
~t1t.jDI"'II..~t>.IO.;;;,v~ N).
\'\..O.;;;.OV-D\
,;;/"D\...~ """'W., ~.;;;. .'L

Dlaj~DI .t>... ~O;gtA... tU.- at1t.O.
h1
l h2
( h2
~ ~
t7_
,j1...~D\.v~ 1pi>....~I1t
~D\~t\IO~t-1..0 ~D\f
~>....,j e,;;/"OV\.11tt..
'&.t.~~.;;;. u.o.
1
1
~(11.
11
text
text
~
~
~ 1: id="amazing
1
DJr
1~ :1 1
1 span
text
\ 1
text
""
text
text
text
w..t.. tU.- ~t.....~
: '&~ ~>.I..
1
1
~
~
\PGJGJ~EJJ
I'\..Oj
~DI.gt>.I0~1..1..~
.;;;.
~~
c.-I'\..OOI'LDI.. -~
. "'f'1.V~j1. \'\...~
1
1
----------------~
'&t\U.... ~t1t.
~~ ~1... ~....
----------------~
:]
text
o'&r"'.1..t.. ~~~
text
\ span
~ '
() ~" I'\..Oj1..~"'II......""f,jiO.<-<
.:;rt\'\1... ~111
k.Jtt>..gt>.t,..,;;;>> tU>.
c.:;ft\..'IIUj'-
D\..
""'-
'1'\.) t..V1..
:;
f0t\t.t..~I1!.
jM"111..-gt>..;;;.c.-~ 1'\.
0\+\,.~~~t..
t\t.,1..r
Ot\.."111..
.;;;.t.II.;;;. 'tpDi...~t1t
~0\~t.:>
k.JtD\
~\.
knumu g n8u
8 2ocme8oii
.
, .
~1,.t... (~ --.,~;.~'\. ..
/"DI~O~b t.:to ""fDI~~ Dl.gU... oc..;;::.Dib+U1t.L
~t11. w;::.fDI~'':w'jt11. (').t..>.. L1..0
c...L.gDI, t:::.....'\1\. ~I JI.Wt Oc";;::.DI.g'\1\.A'\1\. (o/iv>
... 'li'j~~.o/"o... t.}i')(if.S ~ I"~LAo...

... ...~\1.I.....t...'\1\. 1(.()~.)11U:i~...'\l\.1 . /"~LA
... Mlf\..~\C.DI...'\1\. v~'\1\.Av.S\ ~!.g""fDI.gO """.....t... ~
..f/..0( \C.DI"-.gU... VOjtt"'\I\....OL c";;::./"Dit\..'""'JI jL ~I

~I o.o~/"DIWD.g~.g ~I\'\..../"L'\,..t..
ll.opo noanoan. roceaytO
i'irst
Head
I.tl .d ~lrtl O.t 11!1 ~ ..,...

6oAtowot ::.. 8 W.'181t Ot:t.......,8C ,_...:. w.
~~ AJ! c.OW ~~-. ..-""'" oet W. Ott.,..r
no..Cifl8ol.l.lltM~I.a,l"88ttl(lf. . . . . ol'ji~....-o.Kt
.N t I(Qf09(1 ~ lql~ 1'11 f'ICit'!rOIOio,...... IOI'tt'(O t

~~~"PQAy~<tOI
D.....'\1\.. ~I
...~. .)DI ~... (o/iv)
... 'li'j~~.o~o... t.li><if.Sr

.t>.ll.. . ~ uo ~.t.J(J>...
8Q IPI""~ 8......0 ~ ';'.,..; . . f~Atlt !Ot'...J\II.IK!-'

fQffY, .. , .
""""'11'('4ile !. . .~
..,.tCJ8, , .,
...
--~~
I'1Dtl'~..o~t..,.,f/IIIWoit ~evAtrt.nc*'..... '"
cu....-~I'D<.
... d.,.... , .... ,.
-------~ ....... UII-..~
~'-""'..,.,.".wc~~-ocr,ne
.........._._.
.......
....._,..,
,...,. .......
.......... ,. C"oloi l:t~QotloiO'yr6rylll
~...----
...
___._......_ _____
,....
....,._....#.
tw:a....,___,...,
....
...._
.... .,..._,,...__.....,
__...,.......
. . "..._ ......
.,........'-'..."_. ....,.
......
,....,__4~?01&~
........... -nu~.."..
~-"__"
...~.
, -~
~
r ..........~.... 1101~11 tt.....r., tl~ -t: .....m.t ..w

~~...... ~44~'/I~~
t'CIQ8
'"*'"&wlo
...... ........
... ;:;-;;~.... t0N.8111411'WA.t~ ~......1'81(
0~/"DI.~L .DIIl..L.gt\..'\.....DI"'-~ . ,;;.~

~~t. /"~LA ... .",~~.~>....'\1\."" VI-\..111..J:Jr
.",.....j . Ot\..I'I..DI)r;Oj~c....S\ .g ~I'\J1\)(

~DI)(( ~1f'\1\. I(.()..0y>I1\X /"DI.gl'l. ~VIf''V\"t\.L
w;::./"01~11L .....i. j .gt>.c... .~ ..u.. o~..t.J(J>.!.A

f~LA .,. 1'\..,_~l(,f>....'\. ~J:j( --.o""fO~j'I...L
...~~ Oll..\'\.O ~l"'mt.rDI.
::..~':::: 1
........~"...... 1
S.llo.l,... -
~,.,. ~fto!t
........
.,-.at'J~
KafUIJII
3" r
rOC'ft'o
. ..._,~~ v_. ~ ....,..1 N,

~"' 10/18110 ,... ll'f\1111. . /'180110 .:,....
_
~.,..,_.r~.
_
~
__,
*"
a,a;eer. C/1r'ICOI( <~ 1C01op.t'i
~~.. rc; .C.II.'f'.&tlllit~8
""'..........._..................... :tOt.'
... --..
...... --------._ ~
509
starbu zz
<di v>
n , .
n ? ,

<div>
elixirs
.
, n n
Starbuzz? n
n
, n
Starbuzz
, .
Starbuzz . ,
,
,
- ,

Starbuzz
-
. .
- . n,
, , ,
.
51 0'
12
Ho6ii
caiim g Starbuzz
,
, ,
1'\Av u..;;::, ~)(+-\.'\. w~~~ v jOI.I..OIt..A.bN11..
GSS-o,
(1l..,;;;.~., Jt01~ 1. OVt\.O~t\..0'\. j~()..t..'\i\. w...J>.+U\.1..
n .
1.jo~I"Oi~1t-~ <f'OI".\v;;:.... ~IF.
R1 _ KAECTB~HHblil I!'.tl
8110.Ct-&rb~.&aMM . . . . . . .,..RUWO,'/"11':16wJ~Nary~11~~u'(OI'80111:1C'08Cioll
ou.a.Roii81Utt18CtfJihr~,~tw8CIOr~~(.UCYJcl6ut.uryao.~11Qe~M,....mt~SII.ta
~1 1110aotn,IUIIOC&t~...a:aiUei,~AX'I1INO.oerrpo.'DfP11"1"JioatJOIUI)IJ'e't"YPQ8$10o . . . .M8C80U"
1181"A.HtJI'~o:r~Jiuat,..ao.o~.ti080IIOI.h:ao11~&f..o~lxO4~.
~ll8'8oem:lt;4Da!QOpwlam'~'D~"U.utef'6~.dJID2"!Ao
Yf)I)ICR. .II:IImltoiO~f)!MC\DIIII!Otte....fiOP<Wnl~~npetS.u~~~panJDoJD~e
~jf:ft'li\.1"0\jjt..A.
C~~:~te~aacdt'hih o~
~.:.~-n:rraitt.
- ~
(~, w.ol"f:ft'I. .t..w. ~~

O<f'O/"...A.U-\- t\Lj0\~'11\,VV\...O ~
v.;;.01~ ~~-
.,.~e.toe1Cieltan~&D~CI'IDI8ao.ocaotaea,epyn~x-ri),Q'nu,~
....tu.ll tt
"'..-...,~~&~r,aooiiat~.~s~KtPGnY<r:IVIrA,MtOnc:JJY~""J''''OIC8)Ca~&'WIQt.a11Cr.
rt-=~~StU'bu:suapuO'I'~ . . . . . . autyJU~,...-.erott~La.JStatUamu..,aoynty.
1'0~3.\ ~1;0MtQ~aool Q,OIDI,IIC.WU .a.w I'CO*t'19~&-..,.n tmt~. . . $t.ar~:c 8 ~ "...... i11
--
IIDXf:'ltllo. .,ruu 11010Cnt 81:J1011C ~U, rc:cr1Ad:IOISU..r\ta~I'I)SQC:'dtt'U6.11AJI.~IntA.eA~
~stwll,~mepotO'if:O~~nnoor..-ry~~~...._....aot110~tPYIIJU'.
I rr-t f. SAIUIUZZ
JW.t.SUJ-a ~rJ.i ~ -....~~.x1S..mtt808,lklt.O'J..taa.c..
~-~U8Wk.UtiOI&'fUt.
y..-,ap~.AJ~arpe ~toateciOcoporoz r~ ~ ,~w _,. .unc:cr:ICk!LCI.ra-. 8VY&Jie

lltalrllt'~U&nO!Iecte,'JICnOr.ltiQ'cnawn.I!)"'IIopy
, 1.r ,~n.~..._-:.
..t..W.-.s~1 j.IUI ~.:li\. v.;:;.'f(),~1:JI:ft
~b~v.s\ '~ 1. L
<f'Ot\.O~f:ft'I. ":)~...W.. .,..t.. .(1l..Ol ~ 1i1 j(1l..O
.l\.t.....t.A-().. (~;v) ..;;::. v~.~1.
""'~"'"- r~"""'
.......
1"0\jjt..A.DtA"" /V1()..c..\.i~ 1tJ\.1(.1.

1'\ t\.0~/:Jt'li\. y>Oijjt..A. !i~</'L Jtb'li\A41 ~t..
~111. .~t.. jDI!i~j()..b ~t.. 1'\Ak..~O\G.
~ /"1.-'\,.t.. 0\VI.{)..~ 0 +-\. ...!(.{), tU.
'f()..~.().../ ....,~ ~l:ft ~.jjt.W.I..
V~{),~\ t\.0~111.'\./"0\jjt..A. ~ v~IO~t..'li\.
f -'\ ..... ...........
r. ~ ~- ' :. """~
. - '""'' .................. 0114
'"
f,.,,,.,..,. _, ..._ ....
.........
,..,~
-~-.
'1../t()":gt..
~1.+-\.'\i\. ~.+U~~. -1.0

~ <J'Ot\..0~(17..0 1.jO~I"DI~ (), ..;;::.
~ <f'Ot\..0-gf:Jt,;\. ";;~
~,.\'\,.;;;:.~.-~..'\,.\~'I.t.z -f:Jt
O<J'OJ"-'11\,A'11\, VV/:ftAI(.'\, t\.LO~I:Jtt-\t..
v...ovo~o..: n..Ojt.r~1. W(
t..N1\..1. ~1.SI .,'\,_
511
r>; 5tem;;y
mu pa3emky

Starbuzz.
<div>,
<span>,
5.
<div>
, , S5-.
<! D html
PULIC
"-/ // /'D X8'DCL 1. Strict/ /EN"
"http://www.w3.orq/R/xhtml1/'D/xhtml1-strict.dtd">
<html xrnlns="http://www.w.orq/1999/xhtml" lang="ru" xm1:1ang="ru" >

<head>
D01..u... c..JLRjj.
~I (div>

<ti tle>Staruzz I<ae</ti tle>
<link t:ype="text/css" rel="stylesheet" href="staruzz.css" />
j.ILSI -&r)(t\LW
~.ILO~'IA-.~JLOI
</head>
1- j
<d>
<div id=''header''>
~ Staruzz"
/>
</div>
<div id="mai.n">
<h1> , </hl>
<>
Starbuzz
,
,
,
o'S.ILOI w>.'IA-
VOjLf1.....O't.
src="iag8s/811der.gif" l.t="ul 11 r
<illlq
.JLSI
OV+\..O.gt\.D'LO
Starbuzz,
V.
</>
<>
<></>? ,
<
href="http: / /uzz. headfirstlahs. c:am"
title="ce ~ 11''881108 "> </>.

</>
<hl> </hl>
<>
n,
ilii.
.
,
n:
Starbuzz
Starbuzz -
</>
<>
Starbuzz . , ,
Starbuzz Head First -
Starbuzz,
</>
<h1> STARUZZ</hl>
<>
512
),;
'.1
Starbuzz
n ~ ,
< href="everages.html#house" titi="II "> </>,
< href="everages .html#mocha" titie="Koe "> </ >,

< href="everages . html#cappucc.i.no''
ti ti=''">n</ >,
< href="everages .html#cha.i" titi="" >.</>.

</>
<>
n ,
.
n n <
achine</a>,
href="fox:m..html"
titie="he n achine" >
Starbuzz
n .
</>
</div>
<div
id="sidear">
<
class="beanheading">
<imq src="images/ag.gif" al.t:-="ean achine g" />
<r
/>
--
.~
..
<oliv~N\ -w..__
-.......,~~~
u
<
href="fox:m..html">BEAN ACHlNE</a>
/>
<span class="sloqan">
<r />
<r />
<r />
.:::
I'I'ID1c..\.1kL. I'I'I't"'1"vu.; O'\.Jl1.t..{J
<r
'\U\.1 tl'nA JL. \11.,1.OtUWt- '\1\..J\
.J
v
w. ~t w. ..wtJt.o
- -
,s;Of.J,OI'f.
O~Ojt\.AOI~b(
</span>
</>
<>
? 'I.' n

n achine,
),
Bean
achine.
6(?
n .
</>
</div>
<div id="footer">
&; 2005,
<r
Starbuzz
/>
i"J: ,
</div>
</d>
</ht:ml>
1. +U'\Il.O~ ~ +U'\v U:. ~

<ofiv> jN\ t\.1.t\..1..:1.0 ll.O0~'1.vY.)AOI
C..W./"0\~'t.
513
starbzz
menep nocompu mu
SS-,
Starbuzz-cpay. SS-.
,
CSS .
~.... ..J1t "'t'oc.";;;;o 0 ~0\t.....
~t.+\D..gt\U... c.....go,_c.";;;;..go..jJL
body {
backqround-color: #5789;
font-fami1y:
Georqia, "Times New Roma.n", Times, serif;
font-size:
smal1;
marqin:
;
#header {
backqround-co1or:
marqin:
heiqht:
~I bool,}
'"j..g,__,;;;.
<f>O~t ~Wf'W.i:!tr 0\ W.O\\C..L
jc.";;:;OI~.:gJl'1il....gO\t.....jJL
+U.-1..0
k...IIL
~"'-!"'111..+U>1A- 0 "'-'11\J(..AO..g. l 01\.. ..&!.
1..011"01 tu"'-t"jt..... oW. c...jW. c..-..g111.L
#67547;
c.....go'Slj \'\D1.0 "'t'o .";;;;/"01 ..W...go..
10;
108;
k..
llfOI.- c.";;;;I"Oit\.'11\..'"ji1L
/l:main
backqround: #efeSdO url(imaqes/backqround.qif) top 1eft;
font-size: 105%;
paddinq:
15;
marqin:
10 10 10;
#sidear
~ 3.<.<.. "t'~
"'6:1""
~ 'jJL \C..OI~'LO'LO O'UI\..LUWt.O

' ~ /"l>QjLILOI.D \..\?.j- '1il..j t\.""IIU(
{
backqround: #efesao ur1 (imaqes/backqround. qif) bottom riqht;
..J1t O"'t'jut.L..f'\)...Lj"
font-size: 1Q5%;
~ ~wpw.o.. jo'So....gJLL..
paddinq:
15;
ow.c.";;:;j~ Oo.jJL ~{
marqin:
10 10 10;
/lfooter {
backqround-co1or: #7547;
color:
/lefeSdO;
text-aliqn:
center;
paddinq:
15;
marqin:
10;
font-size:
90%;
hl
font-size: 120%;
color:
#9544;
.s1oqan { color:
#9544;}
. eanheadinq {
text-aliqn: center;
line-heiqht: 1.8em;
514
12
c..."'j~~w.o/"0\-'111..
.",...;."_ '111.. siolt.. 0~..L...
<f'O+U>..gOt... '11\..Jo'S/"OI?fC.t...t\.1/\.t....
3.. W.L... ..J1t jc.";;:;OI~..gJl'11\....gO\L...

1"'\J.I..tf '111.. ~..g,__,;;;. ~Wf'W.OijJLS\
JortoJlO:g\C..O.g:'
l W.OI\C..0'1- t... '"J..g,__,;:;. ~Wf'W.O!jJLS\

\C..JlO\C.,.C.,.O\ .s/ojOI'I \..W./"1- ~~...
..g ~t...
(oliv>
... "'j~~W.ol"o.
siolt... (V'I W.o..~C..t... o"'fJutL..
c.....g 0,_c.";;;;..go..jJLS\ \C..Jlo..c...c...o.. bt~oli"'Jt

\..W./"'1- "'f""1...tk\..S\,__,;;;.c.,. W.OI- t....
a:link
color:
text-decoration:
ftb76666;
order-ottoaa :
thin dotted lb76666;
none;
a: v iai.ted {
col or:
tex t-decorat ion :
ft 675c47;
order-ottoa:
6g Starbuzz cegyuii
:
Starbuzz
, Bean Machine, ,
, .
, ?
.
id,
. .
___,
_
_.....,_
, L-
........
.._, .. .... .. __
__.._
..... _....,..._
............
.....
_.....,.........,
__
..
.
.._.
......
..........
..............
.".
n .
-+
Starbuzz.
.
. ,
, n.
i<, .
,
.
Starbuzz
~..,..
,...._.~--
1'
{V1(1!. ..CJl~1.JI.'\.. ..'\..~
""'-rDI~'WJJr L""'-~~ L..jj.g~

o.jUt.b~ tJlO+WI(.
).
t<
oecmume Bpe3ky n nog Bepxuii koomumy

,
L- ,
.
. ,
L- ,

sidebar
fiF~
..
<div>
..
<div>
L-
starbuzz.
header.
index. html chapterl2/
_____
______
_
-----"""""""'. --l'f'\eo-------------.
_________
...... _____ ..-----
------ .....----------..
....._....._. . . ..
____
----____
.,._._..,_..........____....,.......,,..._.
......_ __ _....,._
-.............
......_--.._.......... ....._,....,_
........,__.,.__.___ ............_.
____,. _________.......,. . ......,_
------,.--~-----.,.,._"._
..._..
....- - .
===:.:::.~~
__._,..._........__, __ "__
" ...
~-.._
~_
tu...a..rb .g/".Lj\4\ jOMK+\.DI
- - ..... - - . . . . ,_
==----~
/"OIC...OD!'tDI~bt-.!1 ~ /"DQjUI.O..
"o~.gt\J1\.. c-ojt.r'\I\..11t-.
__
... _..
....
3agaiime wupuy Bpe3ku u cgeaiime nii

280
sidear.
, float.
l...~ c..t..t.JUor "'j.uu,;;;.~,oi"Oir ,~11t..g~/"01, ~

,J;.> L
1'"""'-""'fOAJ;J...<.
fsidear
{
backqround: tefeSdO
riqht;
516
.~ 12
url(iages/background.qif)
.,...._._
...
_..,...__. _ _ - ... - .
--,-~.......,_
bottom
.....
--~.~-
_.........
.

n,
sidebar
?
,
n
.
xopowa,
nn.
.
J <di v>

,
.

.
,
.
,
n.

, ,

.

.
,
. ,

, ..
,
,
. ,
,
, .
float
Tecm g Starbuzz
,
starbuzz. css
chapterl2/starbuzz
Starbuzz. ,
w. ~t1tLJ\..S\j~ ~)(0, ~ u-'\11. ~11t. ~t..r'~u- I"..DD v>:.r~
<Arr>......~l1t. ~3"jr w.o jf>.~~ w. ..J1I. .....~'\1\.Jl'\11. ..u.. vo ....

w.o, .;;;. xow..t..A'\...
0'-t\D~~t.. <-OjLf'I...Ot..
'\11. .g"._31<..01
'\11. '""'f'l>..gf>.
~ fii//cllaptrl2/s~ruU/tnd~-html
~jJ\"'-t-J\ t-t..~r>.
<-~t.~/
;~f~i!JZZ'
. .....'\11..gu.. t- ..u..
~l;tl../I.J\jW. 1<..0\lt.j~t..
'"'.JA'"""- """"~
... pro,id1ng allthe cafieine
r:-" ff' ~
~~
..
,,
~
you uecd 10 po,ver your

life. jo.>t drink ot.
f. f:
.,.--'
1.,.
1'6ti J.hi KQffi

..& Sto.rbua w A8J1AP1 NJ.R tOro1 t:.1: ~nv
n<r: 1t n11 notp&.I,C'JO't!S r- ar u. 111,
~ 6u r eoet>Aa~.t3Wktnnca-9JOo:wyaWQ
nony:anJI 4~~ CloAJ)OCUI, .I~
nt-..-r~
.41W 1 1''U .J1111210 J omf!DJJPVO '9JQ81&11

:aceomcaA.JSux. u,ocuoan1'e!G 8oU41IUfl"e
oaoJI opror. &i n oecneaul ttOeStl.ruaz~CXW814se
1<..0\lt.
<f1'>.O~t1U.- '\1\.jO~j"t>.~~
j~~ fOIJ.5UlO~ I"..DDO'\1\.Jl'\..CA:>
jr;f-t<..D~ jfJUi' .t.. ~otr>t
itOe:tttiA ~ 0"1'11 DOO'fl!~y~ ~2t~ .r opr~.
'YD'DI'DmMfJ JIJJ MW K~1MW hAU1iO"tl-a,mt Jtvucpoa..n

% I)' rrpoo)ta,'f fiOP."Ut'e1>fflilet JtOCitOAOUIOU: ff4 4.( &...
~ . Ecnn m ''"' 4W caearue r u ~r
pontrfA)( 1 COA8PJU.X
Ja:14'c.rm, M(II'te 8/11 01 Uit.
~ !J3 61\AN t1ACJ1~
ltcTII)plt
..t.-~ \l..~..'\11. ~
llhi<..I'
1\"j"'-'"""- 'f"~
.e.rtoeea, M.)J{, ~~pI1IISO.. Jfao. A!UJ1IAPOM 110 n, ..

ttanyM&CII dp:rociOt AI1lA ... ro$)&1(Hl"Ji ppenop Su
XAk p.t') fOOUCU1'f '4611~.11 iiU yJtte.;)fe4.te.,1141CD8ei'O mtatt:st\.rbuza 1t&
.&Q
rtr>tCJ J4 NIC.\1
yr.n:y.
8cfu'O 7DfiiZJI. :.110 IIOT 08 Aotrl'CeR emt~ ~f'O,J,I 81.1 ~'f

~Jk,C&Tt.Ca lblQJ!J'&atoiSti.ruzt8JOoN r.1f,i6 1 rJIUJIU
~:m>MI'OJ\VTA..."'1!>Y,IIJHnStMhz~<:
J4.~~
u.n,JitJ1'o'PCI8.o4!
6UCJP() 1!' 11 n.r. yAQ1580PJtD n

JSOOO
- I:\'1'!1'>11"01'0f.!!
e&c:o.manto
rpytmw !UmOHOJI!.
'
r au 1!6'f'6? &r 36.~ .ntOCS<d! topr

:3 !f- noOI:I>JO t~4d u
41n'QN~JNec:JtO 4.n .cbtne.l<aa
J*So&et t OJQ!ttiJI''e-tr c:cmte
8e4.n
Ma~ne1 J.' t41~~ Jt .& '..

:6, n(101 3rm),
yni.8086H tJ AOC'Q#J'IeR 11J
0.-.x..,.t.:-...4St..tt.a:
?<lii'r'O~ IV.IO&tOO?W'ffti~\W'.X&/'.11'11"'jC<".tn1',.n'fC80T~ 'f"~"~'t1..I:
&t aUI'
\
1
,
!~...~<.. o~W.t..tc.Dit..w. ~f'..-'3"'~ t-..L~t>. '\11. ~'\1\..jjt w. W.O\~t-t-..u.. <-O.)jDI....W.

~Oij.gj)< ll.OOt\.0\t. I"..DD ~j"Oit\..w.y- )(~ .g_. ......~, W.OI~t.
~ 1<..0\!t..g 'LO<At...go'\./ '\11. ~.. ~0'\II.O W.otr> O""'JOIW.b.
518
12
Peweue n
g6yx koAook
,
, ? ,
.
CSS,
, ,
,
,
. , ,
t.rf>O--r w. .g~.
. , ,
~..u> j~.,.~, .g,..t...jiU>. <<-.-.~.g~.... >) +'\\

VW./"~t'\..wy-r ~ Oc.-N>.gN>t..
.
,
, ,
. ,
~12.f1..t... U..
, ,
~~.....
n ,
.
w. ~,jjt..I u-'\1\.. .11tjDijD1j'\i\....j

~~VW.;, " ~~ c"oj1f>~
"f~.gOt... .,_~ I(..()W.O/"OL ~~~ 1,...t.~
,~~ t... ~'\1\.j"~ IU'\Il- '\,.gc".ll
F.<:UF.\11 ~"11!I!i1 M>E:IItl

6x~&St4.rt.u: I':" ,U7W&llll Jt AIU roro, -o:'f'OOw yAQr."lwrooplrnNy
aoJ)t~oc;t .. ai!X)e11.fJ~cDOJ:&~)tgO;t'Q'Oe: ~.~ .
wW xonrm, ro6u r-eOtrAo' ~!IJUt"-"Y~OOm.y AJ:JY

fiO..'J~ t'Cj._WCM'a.~trd ~.:, JrJ0 "'l:IS.U~i: ,J;IUIC''.JifiII
._.
lroR6tO.IIt ~ Alt"tntO ~PS'~ "Oll'niNJD71'PYe't m
.AJ~
~n~anuux.tn.a,ocnuml.Rn!Q.HWU~ttte..cooitC'O)-~
tc.)li() v.. u. nQAV-.11. u.~ . St.tru:a, q;pp-....mo
aoiea'JU. II.OOpoJfCOO'tlltrC't8Y01' aofptl6ttOC'I',_M 8,jtM ~6H)1WOta.
..
nt-JJW'~~~>1.w~~n+~
,.,21:01'0t,: OJ:JQ!IO~ DQfW)'r*IJ:UM_, J&CC.1JON.n:.ISA at. ~ .i;l/:ll
&mc_awx:om6sa5natJIIII.N~oa~oJI;Ci.n.,l'9'ntJt
~YII!'M,~kL.X I/tx1t 1 ~iipn N .)Wf(A(17.
f>/"t...jiU>.~ l01j~ t.t... "jt.t''\..~

~~vW-.1\~v.ll .,.W.;, jo ~.;,
.:g/"t...jll-""7 ..u> .g_ t... 1-\.t....g-.-..~.
Hc\Uid. ifOQJ)HIIt
Q< ,..... hti-.:J :<Ar.!imt
~.}r.t:t::)w../l..t,~:.,.::.....,.:::::~?:~~
OQ.~ty\J1~~xo-~~~t~C)e.
-.u p.u 1'0'1' c:aJnt! .,., '" yu~,.ROe
-t:rn
!f"f"' '!\:. ~
DI.li1
fir'J t: ~~JI ~~ 1
1!.1.~t1'.11V-
.~" uccmm.om.: oas ,\OCJire-ooe ~""" t"' eu JOII:OWn'&

~~n<::A aarrrtffJ'UI.Stt.:tws a.JOCSo.tc ~- JtQJittO !, rna;o
~-~ro.t'VfUOCOfti)'.\t(rtMStbtm~t'
onna1'8!U:ItH01t0Ftnt~~4mU~S\Uba.~Qttl~
i.;: n noaco.r. y~ent11:10pn nopoOD;7.,. ~I'-~-'t~-
mDOA rpynn'WJI'If.t11tt08 .
l"t-~W.~W.t.. .,.o~;,w.t-.11 /"~VVW.o.11~'\.U..

.\U..._"j.g_j.sl I(..().AOt\JL.OI...'\,. Oe>bll-:J
>\. "f'Oj/"M~ '\!\.. 1-\.t... V\....UOW. <fX>..u>.g-OW
l.jO~/"DI:t...t'\..'\,.\1/ w:ojb t\.U.O ~:n~
.r&l S.W t!"'.OII:efe~an Jf

k.Oe'lf:fSper.s t ~~n Jt08(d\
~8'm~ .~..._.. achtn.t. .~
.t.' I1 Ie.XIOCD 1 CCiot'fU 8r4n
...'\. otof*mt 3UU, = Jr00 IS,..,.,.

~Jl01'1-.M~o.QQ'f(te.~w~ro~~ute),
yn;t.~U. 11 AOCf.ueJS ~* ~p,n
>\..0'"\j~t'\.. ~ v~.l. c..w.,..~~~I1L
w.
IU'IIl-
I"OIJ w.o, w. t\\. +yJN>
~t.r~LV +'\\ t\.J..L)bl(..() VW./"~t'\..~
tVJijDIJI ;, .gl:lt. _j..g"'j;,w.t... w.).
~~;'\.... --.Dt.. ~111j>1A....u>1./
~ /"0(
-----------------------~
..u>l.
v ~'\1\.j"'\,t\.t... "/"t...Jil-V\..
.
519
, ;,.,, ,.
~
npaoro ,
. ? , ,
. ,
. .
{
background: #efe5d0 url(images/background.gif) bottom right;
font-size: 105%;
paddi.ng:
15;
margin:
lOpx lOpx lOpx;
width:
280;
float:
right;
#sidear
/D .;;::.. "'1"0\~'\....t.. ~f:ft .u>.'1Ajt.W.t..~c"t..
fr\
~
\_/
c"oc",;;::.OI~JLIO~~ t\.t..O~~j'\...U..j..
~11t.'W-J\.U\.'\I\. ~'VIf11\..t\t. .;g/"t..jlc.'\1\..
3agaue n g mu g>ku

330
n.
1 n
, (
r) .
n 330 n
#main s tarbuzz. c ss,
#m.ain (
background:
font-size:
paddi.ng:
ma.r gin :
margin:
#efe5d0 url(images/background.gif) top left;

105%;
lSpx;
l Opx;
lOpx lOpx;
{VIf:ft ,)~0\.t..../"0\,)..t.r'
"'1"0\~) k.().IL 330 "'.:\.\(,.,Jl()~(

.;;::. I"OI~.u~t.W.c" ~'VIf'\1\.\'\J... ~/"t..,)~c.V\..
520
.;,
12
Tecm
,

starbuzz. css
index. html.
r .
, .
n ,
,
, <div>
t<A~u:rf6Ct11Udil t;,. M'H:c11~111hf11 h"-:
.. .. .. . . . . . . .,_..,.
&.... S>ut.-~-~-~--~-
~-~~
!!!~--
-.-o..-.~-_.....
(NC')'~ .......,
.,..,_,....'~--aq~,1110-Uot~-.....a
.~-.....--.~-~~'I""".
CIOT~~ ........ -1'~JI.III~IItfl:._..u~

)11.-ll:ft ...... Q-...-~~JL ... OI/Jt)'"'"'-..,."._,..d . . .
..
-r.!.t.o.<QPa... ....,,.~."""'-~Y'"~
~-
.
<div>
(
),
,
.
. ,
..... :U\' ...
--""--
..._.11"'"...--~IIO"....-,.~~
-~~~-~~/(fJ~
-~ .........,...,........,,
""_._... ~--~-...
~----..o*""""'~'UIIIInLo"-~'" .. -no
~
..
...
........
~lll;l,fOIC~t..rw.laof'-~,l:f,-0.,.,
r~JII:I80Cnl-tuYnmCJCo"tn.--81~o.rtN.~"*""'_.1:
"'"":......"...,..r,.&~U~~... -.~~-
~'*'""DONII':ry~~....,...c.:.o-_...
_.f'P'VIN.__I'G8o
......,.,llll_..,..,...,.n-III81Y11t
~ ...S'ft~IIC~--act
Uf9ttll...... ~la~.Jtun.
~-,n~~~J.o
~---~taa
.........Gy.,
Cli8w-,AII,IIt~(c.u..u"__~)
~-~-- .....ei~
<di v>
main
-o
..... ;..~.-~~...,.,..."..,..-.-.
.~
~-,._""...".*~-~----"".
"""'-. . . ., . . . . . . ,.. ~JIIo~.....,~A~

IIJ:OIU........... C"'.\~~;t--)'e.w.--..,
, .
......,..._
')'gU1.11\.411\.~ --.... ~01 <ol-iv>
- 1/lj~~~o/"o. ""'~.;"'1 ..lfl ~jjOit....J

'\.JI.AIOj'\ j~~.llOI'\.OI'\.011\. /"'\)..!...>I<..V\..
...,..,..
18'. 111~UIJ,A.tloU
_____
............ ......................
- t ..... ~....... .
_...._,~-
, nu
g n
, ,
, .
! .... f\art:<AIOI'.ntfl':lri.U~~yp.~.....,~~ . . . . C'PI'~U~8;t.~.J-...-,ICIIo6/f~ ....., . . ~&\)1~-..,..~"Y~..._........<; ..~~nat-....

~~tar-~r~ .......... ~..:r1!810~Pf"~f...... ~OIIO
....
ammw:.J-...~~-~-~
+"C*tvtltot'oWh ...w:tEind . . . ~~w,r.;pu.ue
. . . . . . .IIOI(o88::0U'n78f~...-mt. . . . . . . .
--
~ -...--~ ~-.....--..-~'".n~~n...._-~~
ACIIrtlr: ~.'tt 811:.mn.~C~Na~Ja..8~0~.1.'l.&l~u.~~."JPt 1d.of~
...?'I*
.......................
~-.-...-.-~-I'!Oo'f't"CCIJJC"-._'IO~..-o~IIIIJISifCI.I ..... ~
~U8:f~~51-'ll.uJ*twcQtJOII-,.- .. .,-~...._r....-:~~M~\'f'J11.
--
looro ..... ,.~~tJitf~C81:8.,.a,~aw~~t~'~ntiO(~~~~....e.l(o
...
~,.#,,.".., ~~N~A1'f".oo:-..n""'"~on.-('~tt\lodr~nt.Lu-......,..
.-...:raJit.u'I..a..wJPOtG"~<t~;o.'*'"'o*".u:y.....-'P'D~~~~~.-r"-tn~~t
...,. .,.._"r..,roo.~.~~ux~,1Unu:-.
'I~~IILI'I!a'..,.
--
.......
a.,_..~.,..
tnfO~*'"~....,....~~~~~~.,..-ucO::CS:..~""*'_....
.......s.uu.nn6e..-..--".:~)'l&~,-!
. 111~\:t.&,t.~JIL..~--~~.,
'iot'9._,.~r.,._--~a,aoOr.t~?
li:ott.~!*~PIN'f()fU)N(UO~III.OIIOII:
........tt~-~""
~t~f'IJ'O-mmtonuure~
---~-
~.~U.N-8-'rNlf
OISup..~'IO(Ru~~,,
.
,

.
1'..0\v --.o~11\..Jl01vo "'fo'S.t...OI. .-.11\. ~~ 1"0\"'f't...t.. 0\(..t\.0 'S/"Oij)OI( ~

1'\.11\,.I'\..11\.Vv 1<..0./lO~'\.W.~.Il 11\.~/"t..JI<..OI I11\.t\. ""'t..l<.f'~OIIO~ j/":f-'j/"~
,
. ,
?
521
.
,
,
?
, n nn
nn .
,
,
,
.
, ,
.
. ,
,
---.. . . . .
===
. . .--.
..... . .------
tllllllo;.....,..._~_..j\;U_
~_,~
......
....,.__"..."_
,..........__.._,...._,
.....,........__..,....,..._..__
~
OIU-~---
-....-"""""
.........
----..-..---.......
..----.....................-..---...-..,...,..__
_...__
___.,..____
"_~.::-....=-;:
,_.,.,___
.,...._..i _____
____,..~
~
.....
..,.....
,..
~---
~01 OllAW ~/"~01
/"01'-~11\.'~<-/ 0~'\1\. ....OA+Ww>1biO

/"DQjU\.S\.c-.SI.
522
;. 12
J}_)
k wu n >ku
, - n n
n,
n .
clear. ,
...
div id="main'
w. w.o1 w. .1.1t.'\....U..... t\.01 J~~,_ ..~- 3~

~
<oliv> ...
t.-""'jU\.I~W.ol"o.-fo~+v ~j~1...II.t.
~(...,$\
w. ~1....j~ ~w..-~1 w. ~rt...j~LD~ ~IOI :Jj"~

1.j ~~ ~W.ok.DI. tv>.01"1 ~1""'-:fff "i"oC...W.o l"OI~AOI't.....
~l1t. <ofiv> ... 1j~~W./"I-1. ..Oii"'
1..fooft.t' ILDI"- O~lit.~{1.1..t\.Of"'f;) .gf.._j~'J Ojt\.0\ILO t\.f...

j01~~01"1i\-~ .{ ~01 ~f~ jDIA1..g-OI..... C...W.f"O+'..111L
~f17 04-'-_.'1~~I..... '1-fO\~Iit. ~ft-j"-""'7 01 1.)(
---- -- - - -- ----- -~
~iv id='sidebar
:
1
1
1
1
1
1
1
~~w.oro... ""'~;"'joc...w.~w.o~ IWI"0""'"-"\1\.::i/._1

<oliv>
~~l.f'X 1. "'t..r'~t:1&"01V:. <oliv> <- '\..J..k\J... .S1oiJ:,Oif.
'---::s;
""'~"' :1
( div id-'header'
~ ""'"foo"'
1
1
1
1
1
1
:l---------------~~
~1.f1...t.. otJ~t...w. -, . . . . . ~~11d>.
n n SS-
clear.
, ,
, n n ,
n. nn ...
#footer
background-color: l675c47;
color :
lefeSdO;
text-align:
center;
padding :
lSpx; /
margin :
lOpx;
90% ;
f ont-size:
clear:
right;
t.U
.g'.j
.--
...liLjO~t\~A.slt.- 1'\D.gOt.. <-.go"li\-<-.~O
t\.g1.AO jA.sl t\A..t\.f.-1..0 ILOAO~~~At\. 0~
w~/"11\.W.r . . . "'1'0\~o"li\- c...w.oro....t.~OI

t\.f...
....... ~~ 4-'-1."-DDIL01.0 .....01~0110~1..0
Wjl.f''\I\...01.D.
, n
, ,
n
n .
,
div id='main'
~iv id="sidebar
1
1
1
, .
1
1
. ,
,

.
l~ ~1..t\-11\..1- 10~1.w. l"OI~OI'tt...w.<-. ~j ~

.g/"t-j"-01A.1. ~".g" oW. t\.f.-1.0 ~ .....t\.gt\10~11\.)( ~.g_

523
Tecm
, !
starbuz z. css
lu-..t.r ~~"111.. 'i"o'S..t.....t. .. t'.-"11\.'"'-"\...
clear n

w.......:;."\1\.>~... t:~ ...._~:ljOI 'S.jjt..o.

1"0\--..L... ~'i~l"\)w'I..1 +V-jOI~"\1\.V"\I\....O oW.
index. html.
, n
.
~""'1"'\-\t. ~ 'S/"~01.
, . ,
,
,
)
( ).
__ ___
- .....
___ .......____
......
. ......._....,_.__
.... _
.... . . . .
""'g;en(lur,aft >r.. t:A\tr"''N:ttt0'-41\ l:r.J+rJtil
,.....
....
... ..
"....,_"_,_..,..._...,..,._._.,~.---~""
...-__.,.,.... ..
_...
............. - . . . . - ... _ . .. . . . . . t(jO".._ _ _,_~.,_, . . . . ~
-~~ -"""""__.... _......,~

~~------..r..,_,_.._.._.,_"
....,..._,..,_"
............ ........,. __ __ ..
...,
~.....__
, ,
~---..,._,.,
....._."."..,.,~.
~
~*'-
--~.._..
.....,...
CSS- ,
.... ...
,.........,_
~_,..--...__
~~
. ..... .,.._ ..N )......
.,._~....., -~""'- ....._--rwo_._~_"...__,_.

~'"""'....._.~......_._,_
.,..,_~---
~-,.~---...--,.
. . -..........
-.'111--...........
_ .__ --- ..........t'loeol ............
- ....... ...-c
J... - - . . ...................... _ _......,.._.. _ _
,..,._...
, SS-
,_._"._.........,~
-~,._
.,__...,..~.",._.
...........-.__,
~.--~
-.
~-..~-~u.(u
'-t!:l . . . . ".......... ~....... -
....
......
............... .........
,..."............,........ _......"'....
...
CSS
~(-
" "~~
~~--~--
.....
~"'"-~
~.
--"!.._
.....
float.
CSS
,
.
aCII1<>
]j: , CSS
Bonrocx
XHTML CSS. n,
n CSS,
0: , n n!
']j: .
n,
XHTML -
r fJ1JYX ?
CSS.
CSS
, n
n.
0: ,
no ?
n $64000. , ,
n , CSS
n .
n ,
n, , ,
, n, ,
!~> ,
- ,
524
12
Microsoft Word.
CSS
CSS
, n n n.
, , , .
. ,
. , ,
n,
, .
]j: ,
lj: n
?
0:, . "5: 0: , .
0:, , .
, n
, ,
, n
. ,
, l
, oryr
n~. G
, n
, ,
nop, n n ,
n .
n -
. ,
n
n.

n n
n.
n,
1 n:n
<div>.
,
,
.
(
, , . . ),
, ,
.
,
n .
, :
.
.
c5s
, , CSS?
i ndex. html <link>
<head>, .
n
( , ). , n!
n .
( ,
CSS).
IIW ...,_
_ , . . " . . .. . . L
, ...
~"._
.-...Jw.
:111:' .
v>. r.,.;;;.f.t'>...'IN-JfA J+'fAk'\1\:H at-3

CJJ. ~..j c-<~t...W.j t.
--......
__.... ___..
'I'JI .
..,..._
......,.............,.
_,_....,_._ ......_._
.... ...............
.........,.._...,......,...._., ...-___. ...."
_..
..........
.....
.....,_._..,..___,__...,._.....,..__,....,...._._
~---
- c-------at-.. ". . . .,. . __,._.,._. . . ,__

.....
.__.
-.........,...~".._...- .
. ,..___
_ _ ...__..,.._,_...,....,._.,_....,.._........
f..
, 6w,
npaBee...
Starbuzz
,
. , , ,
Jt> .
.
526
.~
'/ 2
.,..._,__
. . . - t -... ----"'.,._...
,.....,.~_
",."..
tU.. v>.o .t..w .. )(v>.'I....
_
__
_
1. ______
_ _.....
-----
.....
._.. ..........,. ..._.._w.....
..... .................................
......- .- ....,........
=.::::.....tll.&ll6a
."...,
)(()~ f"\}jt..ll. "'t.t...~ M.viA.ik.L

1j..... ""'i"!j oV+Wit\t..
VOjt.r'~ . v>. i.-v>.,!(.'\.
)(Opo~'lli. <fX>p.t... Cv>.pfA+<...'IN-JPo.

iu. ~.._ )(~ ~......v1 __;:7]
i
t nep8aii:
8pe3ku.
, .
,
. - ,
. , CSS,
<div>
sidear
index. html
<div> main.
SS- sidear:
{
background:
font-size:
padding:
margin:
lsidear
widUt.
"!h>at:.
le~e5d0
url(images/background.gif) bottom right;
105%;
15;
lOpx lOpx 4
286;
zigl1t,
7 0;
r- f:.>"(J c..t.:1ft..O\v .gf.t..jiC.O\ ~.1)~ "'j~'111.
.g >~OI<.t.. >vAL Oc..+).gt\.O'l.O C..OjLja?11\...D'U)/ ..u:>~..

tU.O~x~11\..0 ~~'~.~ '>~t.. >t...go
.g/"t..j~ 0~~0\.51 ~VI.f>'ll\k\ ~\~11\. ~t.r>11\...D'U)

.....:.\~.!U\~ -=t() ..,_~.g. /V\o~t..
.g~11\.(..11\.~
3~0\t..... <f''\1\..lc.t/If>O.gOI~IO ~VI.f>~j.!UI ~\

<o/iv> v ..+).gt\t.. C..Ojt.r"'-~ ~0\lc. ~ .:JjOIA'!.ot..
lilc) ~01
..\.'\"'7 ~\~ .gO\v ~.1)~
.gt1tjLOIA11\. ~ j.!UI .g/"':i)"-'111.. /V\t1t VO~VI.f>O\t....V.!\
<oliv> .. ;"j~~~oro. .sioi...
j~OI,;;;.b ~\~11\. ..+).g~ ~t.y>?11\...D'U)

~'lll.f~ l.f 2.0 "'-'\!....g.
v.go1i\.~.g0\ wiolt\. 111. floO\t.
U-
c...go~~N>t.. .g,.,t....S\. "t1tW....!U\1i\.~ t.L ~0\"- ~ IC.O\~e.
Bmopoii: no3a6omue 6 o6Aacmu g>ku.
<div> main. :
lmain {
clear riqht left.

lfooter {
background-color:
color:
text-aliqn:
padding:
margin:
font-size:
clear:
l675c47;
lefe5d0;
center;
15;
lOpx;
90%;
left;
!Aj~t.. ~~U\..'11\.t.. c-.go'li\.~.gOI v/t..Oif

f!jkt tU:\ lt.tr-l0\1(.11\.. O~fO\jO. t'-11\.I'\.111.'\i\.
k.O0~111."'\jA 1'1..~0\
t-\.t..
~l..kf'O~v.sl
~\...:. Ov"'--.gt\.O'l.O ~Lja?V\...cto.
527
mii
mecm
, ,
n
, -
. ,
n ,
......
...._.,..,..,...,.,...........,....,
.....,....._.......__,..."_._..,.._,
....
.....,..........,.,..___..........
~--
starbuzz. css
index. html.
-------..--..-.---~t_,.
.._,.......
....
....... ..... .. . .
~_"
~,...._.~
-~-----,.,....,._.,.,..,.,
..
~
~,~--- (!111110)1'wu..--.-.....-~c:
~
_,_
~~~---
'(o,
"_~-~Wir~~~ ,........,....t__"..._..--,.
--~""_,._.,.,..._
_ _ 1021'1111
. . . . ~8;.:;.~~ . . . . . . ,....... _ . . , ,
............ _,..,....
..
"'~~~
, .
.,.,..~.,.........
-~,.,......_..,._~--r..,.
.....
..... . . . _ . _____,....
..
~~
. . . .-
......l . . . . . . . _ _ _
_..,.".,.-..,..,
_.
__
,.,q.
_.....~
...........
__.......
....... .. -.r.'"''&!ol-~""*"~ .......... ~.,
~--u~.v........_e-~,"..,.._",.,_._
.....---...,...,..,
.................
.,......_....,_'Yt--...~...,
~r
,....flrtfo-...-
..... ~ ........................... ~..f..:o~.~~t
........~~"~~ .....) _
.
...........
....-t_._ _ _:-.,.._.
~,
""""~"
~~
~-Jtt...
...,.,......,..
...........
ryr8.-
ti.Amfn'.JiiF.nA~7-
HOI (,I...jt..ll.t-~..~111:2.JLS\j~ jOv;;;:.OI.OM
'>;oro~1 1. ~ ~t1t <Diiv>
/"OI~AO-U\t~ "f"I~\1\.... h.Of'jlt.L.

t\L o-U-\.D ">f'~ .1 . ~/"LjiGOI ......
_... ..
""''"".........
/"OI~'U!I..~OI.b<,.sl; O.DI c,.o./"t..II.OIC... .D~JI-\.OW
--.
...........,
,~ -----~--
............. ..,........
Jl.j~ ~01 "\...t..JI.OI ~""'f'O~OI~IO
~""'1'~ Lf01v;;;:.o ~/"Lj~<-1. ~JI.b.)jiO.c, j

.D\~1.1.D\~1.1.{ ..-....j
t\L ,.;;;:.~ jt..II.OIW".b
f'OI~-u..~0110~1.-1.<-.
11\
~01 ..t1t <jt..011. ~ <ol;v> , "'j~~.r...
.s;olw .....01:g01~1.- ~01~011j"I.j""~ ,.;;;:. j-.01.

"f'O\<,V\.~t1t... 1. O~J\.0\c,.;;::.b 0(,~1-\.DU) ~t.r'11\...D'l..() ..'U\.01
j"OI~'U!I..~OI.bc,. Oj.D~IC.Or 'jt.J\.01~ oaDiv;;;:. 0<-~I-\.DW
<-0jt.r'11\...D'l..() .....I~\10~"\. <,JI.I.-~01/ ..t1t "f"~V\.
1<- .-j{ .j1.j01"\.~ ,.;;;:. ~111:2.JLS\j.....b 'tC/"OijjO '>\)?1<.'1
01 /"0\~'U/\..~I., .D\OIJ\.01 ~/"t..J\(,0\
.~MO'JOWO~
''(5( W,."PM
, ,

{-
<div>).
: ,

<di v>
IIIAin
XHTML?
528
;~ :JHCi 12
u3u ukcupo8aou
u nmu wupuou
, ,
, ,
. , ,
,
. ,
.
, , .
...< ..,
, .
,
. .
,
- L-
UJu
CSS.
8 XHTML
L-
<div>
allcontent.
, <di v> . ,
<div>
<div>
<d>
<div>
footer.
header,
~ Do~OI.g,;;;;.t... t\.O.gl1t1. <t>liv> c..lAju-u;;::.~w.ol"o. 011/c..o.....~t
<div icP"allcontent">
<div id="header">
...
1.301"-11\..t....g tU.'tO.gt-t..~~ .g~.g <bot>IJ>.
m. L
...
</div>~
</div>
</body>
U3u
' "-.__ w.ow. ~ co/iv> j011Cf>~Oia....;;;. <oliv>
"''li'j~~,;;;;ofo.foo+v.
8 CSS
<div>,
<div>
allcontent
, 800 . 5S- ,

#allcontent {
width:
padding-top:
800;
paddinq-ottom:
5;
5;
backgr ound-color:
#67547;
11.~-J .11t .g~.glil.L /"....t... ..;;;;

~ <o/iv> o"'fljLA1.._j tU.'tO ..-:.~
1. <fX>t\.O.gO.t...1.30~fOI.t...t\,W.... D11tj.g1Aj~tr w.
. .......t.....-:. ~'j1..~~ .g.. c..-w./"01~.
1\.U~*'-1.'Iil.. ~ <oliv> .. 'li'j~~,;;;.ol"o. 011/c..o.....~t-gu_'fjOI ~:J5t.... ~ ~""1"~

800 v...~O.g/jM.t....U.,A1./""\j-tfl1t ~r"W'OI ~~i.:JW. ..t.-t-U\W.bc...J\. lOI~C-'\1\... 0~/"01,)0""7 t.<>~1...g\'\.
j01./"J1.. f111J-tf11t ~I <t>fiv> ~~.t... ..0~~ W. ~)c;~~c...S\ .g~W./"1. .t...'tO.
529
LJ
ecm g uku62 gu3aua
Oji'\P.I(..() . ~L tU. ~vL Cj~OI'~Ar
......>"'-....j "'f"~1..... fOI~O""'.j
m axogumc e>kgy pa3emkau ukcupo6aou

u nm u wupuou? u6ka pa3emka, k !
- , ,
. , ,
. -
. : iG.
,
.
n, ,
.
ffallcont ent {
wi dth : ;
padding-top :
padding-ottom:
.....v. ~ow "'-'511t. 1-j.t..t\.SI"'-b fI,). L~~ ""- n..r01~~

k-DL'\i\. ~~01 (oliv> v 1/ljU\.o~~oro... "'llvo~~tt
Spx ;
Spx ;
ackground-color :
.1:11. .j~OI\-\P.~'I-~0\t.....j 1-\.W( j\'\P.LI-W..t- 0\11\-to.
ff 7 Sc4 7;
margin-left: auto;
margin-right: auto;
't_
~0\ j"t..b ~0\ j~0\1-\.11\-11\- ~'1fi-\t 0\11\-to j '5\~1- ..-w ~...,.."V\...'U>{ '5e0o..J.J1' j"\9.'U!\.~\
t..t.. ~~\(..() ~VI(..()bl(..() ~~ ~l1t.O ~ . D ....oL'\i\. - ~'"'1"'1-'\i\. 0\-;/-' '5rw-r "t>l1t!IV+U~~ IGD\1(..()'\i\.
1
\~1-t...41-jLI-\. '511t. f''l)~{ 0\ ~0\"-Lj.t..AOI~ L~OL 11\- k.fOI.gOt.. k. Oj~l(..()~tft.."~Ar ~o'5l1t
~...,..1-...t.. 511t.0 ~U\.I/"'"'-1"0-g-0\M.
530
12
ecm g 2u6koii pa3emku

cocamarqin
starbuzz. css .
. , ?
..s,~
f!f:i coff~
::.--:.~:~:~:=
... ~.,... ~
______
--------_...
--------
___._ _.__
~
_...,
~-
...
~-
:::...-:=:.:::::-----==-.=...........
=-~..:::=~.:.."==:=
~~~--.:..
=-=-.-=:::=;:.:;::---
..
--------
=-~- ~-.==":....-
:::::~=-=-=''Jito.l.,t.C.r,!II
:::::::-~-~-
, ,
n
,
, n
. n
?
CSS ,
.
,

. , ,
.
CSS,
rw: . 1t nou:uQ1tupoa1tue.
,
,
.
L CSS, .

chapter12/absolute.
, , , .

<div>:
, .
, L- <di v> sidear
, , .
531
Kak pa6omaem 6m no3uuoupo8aue

,
~.g,) ot.rj t 1...,.~

<....go"'i\..c-._;.go y>oJ,'f1o--r .;;;.oal1t. ~"""t.
.;;;. ~ :t,..;;;", k-Dj"IIUJW>~o-tSt\
.
SS- ,
<div> sidea.r
at-.;;;. t\.0.
.
.
,
, .
m geaem
lside.ar
{
posi tion: aaolute ;
top:
lOOpx;
~ 3 ~t....j~t....
right : 200;
~<....go"'i\..c-.-.g toF 1. f~l.t
width : 280;
CSS
, S5-.
'L
0~"6t..A.I\t....
~'lil.f"li.(/JA.SI
~<1v>.
top right ( ottom

left).
100
200 .
, <div>,
, .
by>.t....j!L f<...k.DAO~ 1-U)t.

F"<...~o.s\t\-1.1. 2.00 ....~
.;;;. "1'e>..go'IA. 'Zfl>.t\-1-IJI1t.
~F~l1t.
<
div id="sidebr
L
u.:~ .grt...j~Ll>. ...""~"
'S~1.'\. "-"""O"''jF~ ~!it
.goo~~~ji-U)t..;;;.1 .;;;. o\'\.t\ ~

1-U)t.
~fl>.t\-"IIUJt.r 1. --.t\.~ U..
11\.~y>""f_)IO,;;:..
7 /.by>.t...j~Ll>.
JI
div id="header
y>l>.<...k.DAO~
1-U)t. y>I>.~OJ\~11\.
/100 ..:~.-
div id="main"
.;;;. .gt.r)(~'\.
...
'Zfl>.~l1t.
<....;;;.>~!.
..
'
171 '"' 1d"""'"'"
"
'-
C,;;;.y>Ot\.Ot.. t-Ojt.r1...Ot.. ~.g '\1\.j o'&~-w "-"""0\L.P. ~ o'&~t,..;;;. ~
t-,;;:.t\.0 "-"j"IIUJW>~O.gl>.t\..t\Ul.O ~. 0t\-1. .goo'S~ ~ 'S>~.;;;.

.g~+W\..S\ 1-U)t. .;;;.1 .;;;. .;;;..;;;. ~ "1'1A..<...,)""t.-.g~ 1-U)t. <....;;;.y>Ott\-vuy-.
532
?iR
12
ogu npuep 6m2 no3uuoupoBau

. ,
<di v >
annoyingad. :
tannoyingad {
position: asolute;
top :
150 ;
left: lOOpx ; ~
width: 400; /
"""'l"t'w
div id-header
~ /""'~~.51 1-\D\ f'Oic..w;;.O.SI+WI..'\11..
div
, < div >
annoyingad
div id- stdebar"
/100 .,_1.I(..JtO.g . Jtt...go1i\. "'f'OI..WW,11t r.;..f'0\~111.

'111.. /150 .....~ o.-&.r)c;t\.t..1i\.. c:Y+\...Oi..t.,tU..k\.OW
~~.gf'-3"-'~A uo ~""'f'\!\..1"\D\ ~c;,.DI.g.JUit... .....~.
div ld="annoylngad"
1...,........,
. ,
1J
V/
,

.
J
0~/"0\.~t.. .g~"'-~ ,;;;. (o/iv>
~ ""j~~.r... 01........o:i~Diol ~);~~ - 1-\D\j

~.. (oliv> ~ ""jU\.I~.>.. .S1olt.h.
n
.
~ (oliv> ~ "'j.........~."\..'\11.. ,s;olt.h

'\11.. OI........O:Ji~t:>.o/ 1-\D\I(...~~OIIO""-~.s>. j/"jl- t\D\j/":f-0\ 1-\D\
Kmo ?
,
c;,.f'O\"'--vut;fr hf'I!I...;;;.o.. fO\,.)'jt.. OI........O:Ji~Oio/ ~
~.~'\11..'\11.. ~-i.....olv.;1 ~... ,s;or.:h1 .....;:;;...:J +\..

f'O\~A0?/<1..+\.. ~.g-~
iUi .

,
, ?
, ?

z-index, :l
.
, .
J, ..n11LiJI,;;;.oi"O\..'I!I..
~11t (oliv> ~""j~vv--
--t
c!)cA.-
.k, ...L.. ~ '2..0\A\..gOIIO.~.S\
\;uP,oft.f .,..,0\1"'- '\.\ v0TU

J
1.)
~"1-g '?>~J.-......,;;;.\.'-.
V"
v
~1"0\t'..-
1-\D\
"-.._
--::::.,.
_____../
aQI:Io
Bonroc
]j: position ]j: ]j: n

n ?
0:
static.
position,
static absolute?
0: :
0: ,
stafic, absolute,
fixed elafive.
stafic absolute.
, .
. ,
( ),
float.
800 ,
10%,
, ,
positio.
- .
absolute
]j: r n
40
400
1% 400 ,
<div>?
0: ]j:
.
- .
: , .
, n
, ,
]j: ,
0:
z-idex,
,
.
]j: , r n
0: , , . ,
<img>.
<em>, <s>
0: , z-idex
, .
, .
width
CSS.
., .
, z-idex ).
534
::: 12
UcnoAb3o8aue a6coAtomo2o no3uuoupo8au

Starbuzz
n, ,
n .
. .
<div> sidear
.
, , .
,
,
.
,
, n .
U3u
CSS g Starbuzz-cmpau~
L- , <div>
sidear , (
).

CSS,
.
.
s tarbu z z . cs s
11.--'11\..~ ..111.~t..r~~
~ ~L..t-'11\..'11\.. <P0'-'\1\.DII
-1
~ J '11\..
\0 ~1:1\. ...~L tU'\'11\..I
\U)IO/"j 1 ~ ..L.. 2. D>.io.5ol'11\..-t'L
"- 'I,(,)(j~'\,
J
J /]
~ ~~ wY"/"u
~ /:11. .D..t.IL f'\~.\. '11\.. 1-U..~ """'~

t~~lo.so/~ tU'I"'f'I....t.f' .h-'1f0~01.
<f'OIM11t i~v.;.lt-..tw./ '11\.. .5tb11v-.t-JJ

.g ....0>.~ .5f01~* '11\.. f'\~.\. i ..t..V..1
#sidebar {
""'~<- . 'jt..D\'I. .t.
background: #efeSdO url(images/background.gif) bottom right;
font-size: 105%;
padding:
margin:
position:
top:
right:
width:
}
535
n >k nogkoppekmupoBam
ugemuukamopo main
< div >
. ,
. ,
main
<div>
330 .
#ain
{
b a ckground: #e f e5d0
f on t-size : 105%;
paddin g :
l Spx ;
argin:
url (iages/ackground . gif )
top l eft;
l Opx lOpx ;
~
111. o"'f~t...Sit... c-.go~~t\.Ot.. ..t.J.AN.o1 1-\ I(.()W.o/"o.. ~~t..w.
~ /"01""'-.t.-1-\ .g/"t..j'Ir j~DI.g .~-' <oliv> - 111j~1..
, ,
.
, , ,
<f'WU'IW.o/"o.. ""'011...._ ~~t.. .....t.. . W. W.0\1(.0'11\.. .t..

""-t.t\-1..t...-~.1..'\.. "'f1..t...ti(.()-"'Of11t'\A.. .t '1..e-.....oAbjO.gOIA1..jA.51
k...II.OI.gOi~ .~I. Ej~.w..l'l.!>t.. .1..1..t..j011(.

\t..w.- .g-'""'-'VO~t.. /"01""'-.~ .~I <o/iv> - 111jt..t\-.".:.1..<f'WU"W.o/"o.. Jiolt..h.
111. /"01""'-'AO\W\t... .gl"t..31(.-' 1-\ /"I~"'-1..1. /) 2.& ...._1.I(....g . .gt..rxOI

VW.I"0\"'-~111. 111..gk...II.O.".:.~ \(. "'1"01-go'\A.. u. VW.orot... Ht.. jOI~~01'1A..W.'I w. .g/"t..j'I
w.ot.. ~ "'1"01-got.......ot. ~'lll.f1A.I'I.D'IA.. /)0 ...._1.I(....g1 W.0\1(. w. .g111.1..
'J~ ~~t..w. "'foc-.gt..1..gOI.".:.c- Vl(..go0 +V.:U>1 \UJ\1(.111. "'ft..jt..
~ <oliv> , ""'j~Wf"-
'\W.o/"o.. .,..011..... j01A1...g01t..w.c- 1-\
"t..r)o:l-\.t...t.......OAt.
VW./"01+\-~ (,/"~ .....OC..At.. -&r)o:~1.C

I(.OA0~'1..w."AOI(
~'lll.f1A.I'I.D'IA..
W.0\1(. W. t..'l.C
-&r)o:I-\J\.s\ -zr01~01
/) 0 . . ._11\.L(..C..VlO.g.
~~t..w. /"Oic--
.....OAOI'LOIW.bc- 1-\ ... t.. -'fO.g~

w. 1.. -&rxi-\J\ 'i"DI"'-~01 ~1"..,11(.1...
AO.g. 1>111. ..o.t..w.t.. _,.g""'jt..w..
div id=header
w.o W.\1(.0\. .gf1t)W.Oij~I'.IU\.

.g CJJ.
~w .OII(..t.. ~- "'1"011Sot..
.....t.. W.OIId>'U> t.. J"OIJAU.j>OI( '\1(.
div id=' main'
div id="sidebar
1.-' .g/"t..ji(.1./ ......-"'..-' ~.. t..W
H1A-.l-\.t...t.. .....t. ~'lll.f1A.I'I.D'IA..
VW./"Ot\.Ot.. VOjl..f.ii\..Ot.. 1-\.t... ~~t..w.
/10 ....._11\.L(..t.Vt.g.~
.gk...II.D.".:.~ .....OjXOj'1.w. $. .g/"t..JI(.t..

c-t...gOI. O-t\-1..w.'t . t..
~111. ~? --.W.'\ .goo~~

~ jl-\iO""' c-_,~.g~Oit\-1.1..
OI~VOAIOW.I'\.D .....Oj~'I.OI-\..'III.fO.gOI~
.~.g( ........" VW./"Ot\.Ot..
1>f1t)W.OI .gt..r)o:~1.C I(.OAOI-\..W.~AOI - /JO{S ...._1..I(.c..t...
1>/"t..j\UJ\j!-\ ~11tw.b
fOI""'-'AOt-1-\ 1-\ /"i-
V.!-\..1.1.. /) 2.& ...._1.I(..t..t..AO.g

div id="footer
ow. -&rx01
c.-w./".01"'-~~
........-' w. :.gt.r'XI-\..1.'IA..
Wjl..fii\..Ot...~O.g 0~~1-
--.-"''~ 1-\.t... ~~t..w. ~.U.. 01~
I(.OA0~'1..w."A ~
.OII(."IO .g/1(.),".
-. ...03~'I.OI-\..'III.fO.gOI+U\t'IA..
?> ... .g111.J"..Oit..w.t.. W...1 .".:. "'fo11\Qoii~jt..w. .. t\-1.t\-1...

1
0
I(.()0~1.~'-0... OVI(.()Abl(." 3~111. '>~W ...OW.O'I 1-\..1.t..1. 1-\.t...
~.
jl-\iOW. ~ OldWAIOW.t\.0 .....Oj"I..I:11.O"'-""'f>O.g01tu\1)( .~$(/ ..l1t ~~
536
~ ..t... 1.""'- .g01. c..~o'\A..c,.,..--go t...
~iJ
12
pomecmupye mu m no3uuoupo8aue
,
CSS,
index . html
Ow .g_. .g/l.II..Sij~
1
.;;;.~ .;;::.01~ t.r I.~
~0\ .gl1t 1Aj~~t.. /"0\j...l..f

~t"~0\1 .g/"t..ji. .g(.,t./"0\.g~ t\.D\)(OJ~<.-.!1 ~ /"01<-.....!~~1. /12.& ~,:t..t,.<-t...o.g .;;;.
.g1f>)o;OI v,;;::.t"O\t\..~I 1. .g.......;;;.
"'"(} ~ ~ "'fO\.gO.._j "jjO\IO.
0\<A\.D\
~0\ .t 'W.ObjC>.gO\A11\, ~
.....01~0\~111..1. ~1
______ --..
__
---
~~~I<.D.gl1tj~~'-7 .;;;.
~Et.-31(.0\ ~j~1A.O~o.g01~
.............
.........
--.......
.......
'IIQqrtdAIO,.ft.JI.t'lf'.(1'!'J'.tll.tl'\~t:>iit
~,.__-
.....
0\~)v;;.~.
........
... ....... _......
..........-...._._..,......-....,._
~-.-~........"........,.
...".,.......
..,...~
.......
... _.,_,.
---,.....,--~
--
..... ... .... ...,.....
....
. _ . .~_",._..
.- ....... _ _ _ . . . . Pdia8 - - - - - - -
__
<
.--U.-..-~---..._......
~-~...... _..,.. _ _ _ _ _ ...... . . . , . . .
~.".".,...,.,._..._._~
.......__.,........_,
..............-.................
.
.."",."._,_
.........
~_
_ __... _ _ _ _ , . ._ _ _ _lltro_ _
~--
-~
~01.... OCA\.0-g\'\Dl.O
. _.
::::.=.:.:::.-:.:::;:=:=.-.~-.-=...
---
)j1f>'\...01.0 ~ "'fO\.gO~
...,_..._..............,
~--....--~RI,.,IU_.........__.......,_
*"'lol''"""" -------..,._~
~~ ~ ~'\1\.jo'\-\.t... ~~....
........--
"
.
,....
_...
...._
.gft-j~1.. ~ ft..J_jb,;;;.Oiv;;,t... .gj"t-ji.
...__ ____
------... .. __ __...........
............
).g--.DijOIIO~~ v ~'\.j'1\.01,
'""~~
o.;;::.o~rO\OI~<--.!1 ~
.g v.gO~Cj~.. "'foc...../"011'\.gt.r
........ _......_..
..-....
~...t... ""'CJLOr.gl"t.-31(.0\ 1...t.-
~ "'fOI.gOt.- ~At.. ~'\.j'1\.01.
/10 .,_'~.~t..~I ~,;;;.~

...t...jj +U-1.1. ~0\t..... c....f'OI
t\..~I~b ~~
/"0\~C>.!It\..11\.L
r---_
IV1u.jjjf;;.S1 I<.DAOI'\U.O\..1.
.gVt... ~ ~ ...t.......~
~.g!,_ "'f>.,j.;;;."'
j~OI.gOit.-..C> .. ,;;;.1.- ~.t...-.
.
, .
clear
, n
.
.......__...____
...........
- ................,__..,_
_,..-. . 0!"-----f-.
.......
---
-..~~-
........,...._.....
~o~-''IIICVJOWI4tJ.rr. I(.A.~Qolt"trrJ'H
...... ...._.,JIII._Oilllt..
....._-.,.._~.._,..."._..._,._
_.._....._~....,_
_..,
____
::;:;:-~"'t:::::::.-:::-.;::::.~--=::'J..-:::::-...::.:=-.~:.
--.............
......._,._....,.......,._
...._
......""-,_.IIo
____ .. ___""""&
___ _____11...._....._fl'.,_
.......- ..
",.......
~-~
~-"""-IOW""
=""'-.. . .- . . . . . . . ,.--...;....,...........,.,......._....",_
......_.__
..............._.._...,.._".",.,_-............
,.~-----
,.....n..._ __._
--~--"""'...,_ .q,......,..,..".~t_ _
__ ____
..._"._....,
-~
._,..
- ....
..........
-""-._,
.....
---------,-~---ILOoft.oou--
~-
-1. OIU\.0 ~t"~OIJOv.;;;.OI.;;;.o~

~'\1\.joOI<.D'-J ,;;;. .g(1{),;;;.\ ~\....I.
OCA\.0-gi-\.O'l.O <-Cjt.r''11\..01.0
,j...t...t\..~~- 111...g/"t..ji.
~~~0\.._,;;;. 40\..... t\..11\.+V...W
I<.DAO~11\.,;;::.,jAO\.
m gm,
uu 2U 6 paccka3am, kak co3gam
gk pa3emky, komopa 6ygem nm nopmumc?
, n
CSS -
. ?
CSS ,
<di v>
, n

auto.
L-,
- ).
( ,
),
. ,
XHTML.
).
CSS
,
L-
. ,
, n .
, ,
.
P83emka
6m noJuuoupoBaue
, n
n ,
n. ,
, ?
, - .
n n
, n
clear
p83emka
, ? , .
, ,
Starbuzz-cpa? n
, n . n,
clear
, .
, - .
flt,

n,
, n
, .
n n
? , n.
, ,
uk pa3emka
n .
. n
538
12
, n
Ogu konpoucc, komopu m noumu,

m6 pewum n uu koAomumyo
,
, :
ff:ooter (
background-color:
color:
text-align:
paddi.ng:
margin:
font-ize
f675c47;
lefeSdO;
center;
lSpx;
lOpx
_____ _____
__
_
____
-----
,_...,_.
__...
lOpx lOpx;
90% ;
,
,

. ? , .
, SS-- .
,
_...
:.-:=--.. -.:;::::::.~":::.... ...,.._.

_"""'
_______
--..---........__
--------
-----..-..---...:r
___..__
_______
"""----- -----...----_",_
==--====--=...
=--~.::=...-=:::::::--
.....
----~---
~.:t.-=~=.:.::::::::::
.....
--~-
=~-:..-:--=......
...,.._,"....._
........ ,....,
....__........,.
..._..
\
....-.._
fl\m'*M.CS't.v.l'd
, ,,
. S$-,
( v

CSS).
.",;. r~V\.L "f"".g~"".",;. "'.";. ...~, .",;.

3)~ <oliv> " "'.j~~.",;.oro...
.f-ootu" o.o~rDI?DI~v.5\ .~> k.-Oj
'S.01.. o~\'\DU> c,ojt.r'?f<.'\..O'LO. .",;.

k.-Oj.got.. "f~odi"DI.""""' t\.0\.O?U\..'W.
t\.01 tU.:tO .g/"t..Jit-'11\...
, , ,
.

, .
, ,
. , .
, ,
: , -
. , ,

. , ,
.
,
. ,

, .
J1
539
6 :;:~;; , :J.:: ::;i:.: <-:: ,; . "; ..
Starbuzz
~.
n.

?
.
!

, ,
. ,
,
,
.
?
,

_____
____. ___
-.____ __
..-.
,_...,.,..
. ,.
..._
...,......._.,...
-..-... .._...",_...-,_..
.......,.._............,.
.,.,"..,,..,._.._...........................
~
__.,..."_...,._.
....,....... ..._.........
~-
--~--..._.
, ?
- , . - ; ...,..__..._..._-.-.,...-....._
......_...,..
...
----~-__
oat<t~----~---
.
-~-~-
..
,.._.......,...."...........,_.._.~--
.....

, ,

n, n
__ ___......_._
,....
........._.....,..__.......,..,.
. . ---<{--,&jO&-......
~
-~--
-~--
n .
<div>
( ,
, ) .
<cti.v id="award">
<imq src=" i.maqes/award.qif"
alt="Roaster of the Year award" />
</cti.v>
540
Do...-:. ...-:....-:.
<1)/{V) ~'V\..
11\..jO~/"DIU\.'\A.t..
IU'I1.pt\j "'-
3uuu8u 2g
, n n
800
n (
), n
<div>
#award {
poaition:
top :
left:
asolute;
36Spx;
}
S5-
starbuzz . css, -
. , n , .
nn , n,
.
He6oAwoii geekm
,
? , ,
<div>
sidear n (
). n? ,
n z-index,
n, ?

n
,
<div>
z-index
sidear.
n ,
z-index
, .
laward {
position : asolute;
3~
1 . !<
top:
;
~~~J.It..q
''h'\ l\nm.1fn7'h'\ VAU7
L
/ Jt..lii.c.".,--g ~
left:
65 ;
01 (oliv> .. Vu:
~ ...; 0 ~ , ...,..t.ltol-\.o ,
z-index : 99;
~ CJ/:fU.\; ;.
D.~t~t..
.:;~~

J.lt..q ..grt..~k.1
v ....
~~ J~~..t.. ..- -
, ! z-index
starbuzz. css.
, <div>
~ ...;
...;oroht.
'
.......;.g
Oiw~rol
ol-\.o CJo
~ ~-,~
-'tb~J~~'UI.JOI
1 _Uy
-t ,
.f
- 1'Wf~
award -
, n.
danue
541
ii : .10i (nJ!i paccyQaiO! t, m 11

Jlyme f AU
C03Ai1001 puxeto.
.10
, ,

?
? ,
.
, SS-.
n.
?
flt SS-, !
n .
, , n
width marqin,
...
. , , ,

. , n
, n
,
. n
L-,
.
<< .
. n ,
n ,
n .
.
n ?
,
? ,
,
-
. , ,

clear.
,
.
542
12
n'l'
,
, .
, ,

.
,
, . , ,
,
- .
. ,
, .
? , ,

.
...
!
, .
, , ,
, ,
,
, .
, ,
.
-.
, ,

. , -
,
, .
, ,
.
-.
,
. ,
.
, , .
, -,
, , ?
, ,
.
, .
543
koe-mo, m gk 3m
6 6m no3uuoupo8auu
, n
left, right, top
~ <f
bottom
"""j~~.r
n ,
tv ....c>j'\1\J~i\.()~~t-.S
, ? n n .
.I"."'\Nt....ll.bl'\.0
~t>.
- , .
, , : ? , .
.sioft!1 "' t\.1....
L- n n
. 1'\.0!,..'\Nt...JI.bl'\.0
-? - , - , <htm.l>.
n n .
nn . n,
<div> :
<div
id="aidear">
<div i~"tv">
<i:alg aro-"AeSeenOn'l'v.;if"
</diV>
. I"J).g~1. <of1 .gol,...tU\.J1t'I. .go.grt..j\(,~,
\1/
( dlv ld"header'
&l~"'I'o ~ 'l'"
<ofiv>
"""j~~.oro.N
/>
dlv ld "sldebar" z~
dlv k:J"I"''\\in..
~ r:J
< cl&aa=".anheadinq ">
~ ~~E'ty'
OC'1'&JIWI&II -. 'L-. ~
</>
</diV'>
<div>
..
~~---
tv, -
<di v> sidear.

, .
ftv {
poaition : aaolute ;
lOOpx ;
top :
left : lOOpx ;
width: lOOpx ;
<html>, ,
, bottom n
, .
, bottom -
~1f1
~ -,
<html> n
, ~ n
, n ,
t .
.
, ,
n ,
!11 ~:~~
n.
-
n .
n
n .
_ _
____,=====~;
n
. !
-, .
, .
SS-n
(. ) .
.
div ld="navigation
l div id="header
div id:main
mg id:phoro
margin-top: 140;
margin-left: 20;
width:
SOOpx;
position: asolute;
20;
top :
left:
SSOpx;
200;
width:
:float: left;
position: asolute;
20;
top:
left:
20;
SOOpx;
width:
height:
lOOpx;
t.'! ~
545
nou:~<~rl:,;::-:,rr,t
, n
n .
n
.S1 XO'-f'l n
n ,
n.
, QJ:I
Mltl
cnoaa,
1t1
n: << rn
ltJJ.
: .
: n
,
,
r
.
?
, , ,
.

.
5:46
12
Kak pa6omaem uku no3uuoupo6aue

,
.
, ,
<'I ,
t. :
1>.,..._.401 ..;;:."\l\...;;:.t.. vio'W(
~jf~,. "\1\. I(.()A.AJ.;1.. .... r....;;:.-
, n
, , ,
WJ\~~"\1\.-
"..~\ 1(..0\1(. 1:'-01. '&..~

::J'OCJ..O.,.:;:.r;:o... o"'t'oa~~
<di v>
tVJI OIUU>
coupo n .
<di v>
300 n 100
<jLOI.,.:;:. ..;;:.1 "\1\. 'W3C.
OjO-a~~b~ !(."\!\.~~ ~0\..
w.~1..
..;;:. ~/" jNI ~01

toJiv>
CJ
1j~~.,;;:.l"..
CJO~O~
{)I ~-.
~11\t'0-0\f-UWt...
k.0.)1-\.I~jVu>~V\t'0-0\~'\IU..,
/.
#coupon {
position: fixe d;
top:
left:
lOOpx;
1'100
~
'
div id=coupon
nOj~"VV..t\..~~ I(._'Jk.()t\.. ~ /"0\tO.SH'-V\.V\.

300 ""11\..i(.Lt...(~ ..;;:. ~t.r')(t\L"\1\. 'tf"'t\..~!ft
"\1\. /100 ""11\.i(..(...t..AO- ..;;:. t....g'\.,. Dlfl. .,.:;:.0\"-t... ..~
~bjO.gO\.,.:;:.b "'1"01-g_'JIO "\1\. 1'-"\1\.t\.. 'tf'OI~{ 1(..0\1(.

.g ..w..;;:.~.. .... ~"VV..t\..~o.g0\"'-"\1\.V\.
HOI ..;;:... ~t... i~..;;:./""\1\. \~"\1\.

"'t'OCJ..O.,.:;:.fo.. :~ /"0\V.....OAOU\..
~.
- .
- .
. 6-
lntemet Explorer
, - . ,
n.
n
,
, .
, ,

, ,
"RlMAlf!
vrJ
Hflt'
pacnoo n -
Startuzz.
. , Starbuzz.

547
div
3u kynoa mu
<<
>>.
<div>,
_ .
.,..;. JU....t..kU
((XN>
VO"lAfO"'--
_
_
D"{J""r11\.. a:v~ 111..0 oa",~u....11U.. ~-Jv..!U\1
, ll'j~~""' 0f 0 ... I)""orot... ~t 1-\A'~Ao~t... ~ h.DI.u... c,\;\..f-h.f/12-/
sr-~rt;111..-l4/1v-..Oij.U.
J"
<div id="coupon">
< href="freecoffee.htl"
title="eniC'l'e ,
<imq src="images/ticket.gif"
alt="Kyno .n
n ">
Starbuzz" />
</>
</div>
fV'It ~.JtO11UL111..1.jDaf~~11\..L ~ ~ <~>( .,..;.'St >.itbj0~~~1. .at.IL1.
~L.Jt~.,..;. !-\ .,..;....1. ",~t...~111..1.1. >h.DI~ !-\~"~~~(., ~-Jv..t\D...r I)w.ort111..

...t\D f~t!..~.,..;.~.,..;..
, ! <di v>
index. h tml
. ,
XHTML ,
, , .
#coupon {
position: fixed;
top: ;
left: ;
}
#coupon i.mg
border: none;
#coupon a:link {
border: none;
#coupon a:visited
border: none;
548
: 1:2
3u kynoa mu

css,
starbuz z .
l .....
, , ,
....
c_
...
.."...~ ,...,.~.---.-._...-~o~~ot.
_....,.,IIIJI'II.C__..,._.~~~
....
............ ...........
..........--~--~--~
lliofC6._.........,..,
......
'tcJ....,...QI\MI~
---~-_.,..,._.~
. ,

-........
:rtiii'I_..__,..........,""'*'1~IIY
~~~
~ ,~-_ .. _._.,.,..,.._..............
/..D~~-..., ......
~
..
freecoffee. html.
, ,
, .
..
...... ...........
... _
..... ......
~--,.,...---~-~-....., ...,-..
-......- , f'l~
...:>1~---~~--
-lott..1-.o.ill'ff'llll.fU~U~tlloattNI,.,..,.._
_,.,,..,.......__
~poan--)'~
#t.---~
.:. ~~---------..............,...
....
_..,....,....."_,_,_ ..""---,..
,..,...... lli"'WW_ .... __.~ . . . . .,.... .. -
. ,
"""~""'--$~~
<:*.,._,......"..~......"......,..
...............
~~
~~-..
_
\.
, t .
Ucnob3o6aue mum2 3u c6oucm6a left

,
, .
s3~0\~
ji-\..0\-W-W.. -90 ..,_'\J(._Jt~r
(
..4\t. 1.()~01"'\1\.. arOIJJ-fj
/"0\.......'\1\.. ~ 1-\..01
90 ..._'IJ(..~
c,~OI . ..t.-~'I. 'tf'Oit1...~111. \(..1'\
-r~~
~
-":1-,~-~----.~..........
121
div id="coupon
Dr~ , ~~-..~11\.t.... "-"~~

'I.jO~fMI<U\..11\L ..t.-~t.L ..t.-~0'\_ 'tf'Oit1...~111.
0\(..1'\ '\. a~t..w. ~~1-\..01 .!(.() \t.!
"lQO~/"M.U\..'11\..S\( I(.()!/"01.!1 "-0~0\.... ~ 0\CN>

"i",..r\ .
__
............,................
.. ... , ...
..................
/"OIC:.O.!It~...'\1\..11\..
-~ltlloill
..,..,.,.,._..._...,.._._.
u~..-*"-'~Jtu.m
.....--.
-. ___
_. ,._. ". . ..
..
==-
i coupon {
posi tion : fixed ;
top: ;
1eft: -90 ;
"'" ............
...
...
kw...--....",.,.-....
.,...
~~"'*-----""""
...,,..,...,..,.....(<qq
..,..._,,
,.._,
...
._
>kumu mecm
g mum 3uu
.........**'...
.........................
. . ....
~
-"*-",~<Oiif
..~~~~~
---,~----::
.:...-
t...
~--....w. -~6r...
...... _..._
~-c.-~
r--~U...k--&pf.,
n ,
?
,
.
Bean Machine,

Starbuzz
S1,49
~ wmp:cu '*D pa!IWX ~ .., So.lna

attttt.W
, S2,35
550
12
3km6 mum no3uuoupo6aue

omcu'11Wtuoe n?J,Q'..
, ,
,
tv\!,t)o;o..-:.11\.. .g,),;;:. ~~"\iu(. <- ~
qtoo.J,11\.t- 11\. ~-~~ .t.:te "'t'"lll..t.f+\..0

00 "'-W<.U..AO.g .g"'f'OI.gO.
tU>\ /}
, ,
, , .
, ,
n , n ,
ne
, , .

. , n
Starbuzz. ,
, ,
, .

, n
, ,
n
.
____...._
..,.....,.
..._..... ... _
.--.... ...........--..--,....--....,..,.-.... .
......... __.. ------___..._.......,._
.._-
.-..
...,.. _ _... ..
-
.............
.._.,,.,.-~~-
.;
......
----~
..........
......,_"..,.....,....._,...,._.
..,......,.........,..,_. -,.,....
_
~....,.._
____
..,._,__
-....... .......... ....___

_,._....._--...............................
--
..............
_._
_.....""."<"_.....,.~...- -..-
---~
...-..--~
.........
-~~~--
~--
f.-11\. ~bjO.gOI,;;:.b 0\~V
..-:.+\...t.- ._.oJ~1.o~.....,.~OI~
..-:. ~~"\iu(. c-~~~-.s~,
+\..01 ._....~ 3~
"t..W
11\.jO~OI~W.... ~,ljt_,;;:. ,ljDI~

1.J ~ ......-:.~. j0\<{1~01,
oc-,;;:.0\btU>~.s~ .";;:. c";;:.fD\~~111.
SS.,
.
a,lj.....-:. "'t.l<f~D\,;;:.bv,S\ ..-:.'\1\..

""'oa,.D\.u-.w....
v nN -. ,,. : : '
., .-
Tecm

Starbuzz,
. ,
n'
.
? ,

, ,
.
,
. -
,
. ,
,

.
, ? ,
'. (
,
).
r, .
,
n,
,
, .
r
?
CSS.

,
n.
552
.,., ,;,
Tpu
kooku
u ..
,
flt
clear, ,
CSS. , , (
) . , .
! , ,
( , ,
chapterl2/threecolumn).
.. (~i\r> -
..~
(~iv>- ~\~0\~'\.'\.
t:-.1\.t-.gO\.
~.g\~"\1\,'\.
...........
5 .... sta:'WI!r1CW"itl!fJIOJ.t;.Poto,~ )'.13~ ....
~ ~"'""
~~~-~-. ...... Xotet1NO
:a.hl~~'ln'OWJS~_.Jt.,....,"DiUft"Joo.tui.)"'')u~
~-110"!- UC11:'1am.md~PJI.\~* lldl A1l;/tiiiNICA
. . . -.S2;3S
.J;I\.JtCniO~ lctmt,...~ tOPU..."..-.o ~r?r.
V.:::/'...
OD'FIQIQQ""'V~~8QIIGN,XIU!..,.....,th'U,OC1fo~
".)d...m..soec-~...:.d.",..v.lltao,....,.&a~
woeetuu.a:,~tpUIUie.aunu81107'0p!~fC
..........
--
JI'..u'i. otepes"'!U..N
r<:Aat!'lt
D~~QP'~
.n.u
YOORttR.II'IIIOIOKO...~fOO.OC.~~
~~n-~,fiO~npO.......,.~JU~tce~'lnd
........
._.,.MWJ'
~~t ."",.S.IIIr~>~ct!*,ectc~O
Uc..u-. "
............
Hm.a&IC"tQp~t.a
~-~a~(V11S'OUCoCIO.\t......-x~ll.2o~me....I'fO'te.1olh\
~..:W,tnUC,IIOtt-~oI\IO.,~IJAPC*IO'J-'1~.
MW~<ot~~.......-.. ..... ~IOdl
~$Qt~11... ~JOOtt;~o.o(l ..e~8Nf*I'.h,U8
t'r'O IUWf: StutN:a n.IIIW!fAO JIJY
.t...'\.\t- ~\-W\
ec.romt&DM~IIIn<oaNIC'f-V~t:at,a~~~
~enc.:.s~lh~aol'dll:'n.,~
t.nuxatr~ ~ tuo CIOJJY.vm:ot~~
theRf!UI.."*"~'UI'in.'1,1t~~Ac,o.tI!P~
~iLf""'V\....OW '\1\....t.t.
$'tltti\UI,~0'4c00o6Wt~S*'t'f't~rryp~
~e~.. ll6co:,.~IIOidf11't"tralf.lmeltO.,
A.t...~ot...~ "1'0\.gOt...
\1111'Q! t:S AR8ll2:1.
'itro ., *AI'N r IW .....,.,.

~mollotQOPtJ!Ot
"~ tmprC.QOOIQ4!)
tcdl'tllft*O .no.tJJI~
toPrJJJ~.ad'li.Xuto
;r.6f4off'rnPQIOW~1WQI'Je
. . ~ . . .Q~~
... .......
~
r-o~PPfllllltt~
{:.~~),
fQ. .8 AOI:fAII'II! tl
.llld,1Npll.
D. "''\A."'+U.U>
wo~'\A.W\~AO\
~c-W\0\y,.o.gJ\.t..t\J)
j~~ bot\1--.
...
......
o_,..,t:...O.$-.,.._-
~.-...r--- -.~.&..-wfh.. -~~o"-
c-.go,.c-w..g~
c-/1...0\f.
,
. , ,
,
CSS -
.
.
SS-, :
http ://headfirstlas.com/books/hfhtml / chapter12 /c ssdesign.hml
553
.
.

, .
, . ,
top, right, bottom
left
,
.
z-index.
z-index,
clear ,
).
( )
, ,
clear
au to
width.
, ,
,
.
, .
,
.
left, righ t, top bottom
554
posi tion
static, asolute, fixed relative.
, .
-
.
, ,
,''n 12
ora~o:maU:me
~r~r
t n
{}foilme fau lo1.111ge.html u aUume

:t ~eMeD:I];Il. 3aeih:x:1e
[1
tu u u avrauL ,
ocreomo.IJltC :
'
)~
r-
( Fi2
'
'ul\div
\div
~ 1-
t, 8 nq>rt
-~
~.ot\J:fi.L
~111.~ <f'l"i..IU..
/o~l..t.....J
m . D m
~uroruroarn couono rloat
l~~-, m . n , 'l1J)o
m. nruee.Ro remeue.
j011.~.-.s\ c,~\j
~"'-~"-3111\. ..u~
\'\..'\....1.J01~~.
/""\)/"l1f V./"O~t-'\11...
)~
<di v>

)
)
?
n
.
tv'\111. 1'\..t- ~Oviii..1.
~Oiv k.~.
div
h2
~
(
1'\.0\j .~
)
~
k.1..1.
j01~ .>:.
\o\.Dv.D.I""\1\.At.
[h
~
~
1(.0\1(. \'\..11\.
~
~
( h
.u.-.11\. ~1:1\.
301)(0.>:."\1\..t..
1'\.0
)
)
jI.v 1'\.01
V./"01~.
~ <oliv>
(<k...AOI~OI~ >)
:-..:=...=:..~----
~01~0\1 "'f .
"'-'>j
--. --------------..... .
---
.-........--.. --
t..'\....
---,'- ..~-
.~111'\ l'\l1tX
$.()...-,j~11\."li\.1
01 V.011.
\~ 1 ~
"-~>j (01 .
1'\..'11\.\'\..11\."Ii\.
)
)
IU).Ot\.I"11\.~)
o~.>:.~t..1..o.

555
~
Peweue

,
. ?
, ,
.
,
. .
lsidear
{
background : #efe5d0 url(images/background.gif) bottom right ;
font-size: 105%;
padding:
15;
margin:
lOpx lOpx lOpx;
width:
280;
float:
right ;
~
Peweue

!
-, .
, .
-
margin-top:
margin-left :
width:
140;
20;
500;
SS- (. n)
. .
?
.,"..,,..,
div id=navigation
#~v~-hoh-
~t~on :
asolute;
top:
left:
width:
20;
550;
200;
div ld=main
mg id=photo
float: left;
gg
JLZ
position: asolute;
top:
20;
20;
left:
width :
500 ;
height:
lOOpx;
13
:r:nae:unx
~11Iu C:Ilucu
nywe n ...
. ,
,

Beanie ( ,
), , XHTML. ?
: -
, L-.
- :
L-.
,
L-. , !
- )r>'
, ,

. ~
,

, ~
.
J'
J-'"&..1 ~..;:.
'"&..~~ ...
\~
;15 '1.viWI
=ts
2.5 WOAJI
-=t-
/10 1OAJI
9/1
2.3'1II.IOJI.II
102.
~D\,;;; \,10-~W.
~~ ...
93
"~ ~...,;;; Ar"''f>"'
/I.S ...~c,.,;;;"'
//
j"'w.. ~"7
~... ,;;; A~D$(0
"];~....-.~~..;:.
......
...
1\,.,;;; .J", ~",...
~f'DijO
-r,;_,....-or-~~:ft\LC..(.,
558
't"
\1
~
rl2.0<f
!
"
:t:
~~
~~~
~~
~I>
....
z..s
/5
50
3/5
Cf2.2.b
~ .....~
'/173
Cf/5
ct-=t&o
~~
Z.5
3/5
-tz.
5/5
<fgo
3/5
......
53/12.
<P:J"'Og
'f2. 'f2.
~"
&
~..:.~
Kak 3g mu 6 L
, L
. , ,
CSS
<di.v>,
XHTML <tale>,
. , ,
:::=~~~~
~
D.;>;oii\. :.F
f\.0\)j ,;>;.- ,)OI'tOAO.gl(;~'\
-,
75
15 m

--,
-
,
4/5
50
3/5
41 173
4/5
265
3/ 5
93 4242
7289
5/5
104 860
480
3/ 5
74
25
1204
5312
10
91
29686

-,
4226
~3'
102.
,\
4780
1\
18 \
.~~V~------------------------~
rxr'W,.~PM
L-, ,
, , ,
?
559
ht/-
Kak co3gam mu,
un3
XHTML
, ,
L-.
n tale
. html nn chapterl/journal/. :
,.~
~~"\i\.
<!D
html PULIC "-//WC//DD '1'L 1.0 Strict//EN"

"http: 1/ www . w . org/R/xhtml l/DD/xhtmll -strict . dtd">
<ht:ml xmlns="http : 1/ www . w . org/ 1 999/ xht:ml " lanq=" ru" Xllll : lanq="ru">
<Priii1....L~
CJJ-~01/
.~11!. .~<hd>
~WtO.gV~j~b
<meta htt p-equiv=" content - type " c ontent="text/ html ; charset=windows - 1251 " />
~I":J~:jl":j
.01~~111.-
.g ~rwl"t.. "-01 t\L
<style t ype=" t ext/css">

)..
td, th {border: lpx solid lack;}
</style>
<
<tOib/t.>/ -~111. ~01.1 .

tU~~.'Ik\J!\~c.-.s~ .OI~AV\.~01.
<ti tl>
-o'"'(J1i\..t.L </head>
...
tv\111. ~.)_'f--- .t..'L
. ~{ u.I" 0"-"'II(.().of::J 10 ~
<d>
<tale>
-------
tUI\'Ik\J!\t..... ,~. <tP.
<tr>
~"'
11!."\i\. ~
<+Vv - .
~ ~~v,;II':J,.t r....'&~01 .01'&~11!..
<th>opo</th>
<th>aa</th>
<th>Tenepaypa</th>
<th>Bcoa</th>
<th>Haceee</th>
<th> n </th>
</tr>
<tr>
<td> - ,
</td>
<td>l5 </td>
<td>75</td>
<td>l204 </td>
<td>29686</td>
<td>4/5</td>
</tr>
<tr>
0'&f01.~t.. {t~.:\..M.DI+'-1A.t. . jOIWO.g

1(.'\1\. .I~~11!. ~t..V\..-..-.5\ Oj'I.+'-JOI
jl"~ tv'lo"'~ "-'>""'JOI.c.-.s~1 . +'-'\1\.
j?t\\. ..r....I{~ r....~ ~ tUII

;\..jUIL O"'f!jt..~C...sl r....fO"-"' .- J01"
W.g"-0\...'\1\.. -J'l.JLS\"'-~t.. tU/1. ....1..-"- lo""-'\1\.
~
"\) 1.
o~rOI>~t.. .g"'-1....Oit\..W.. tU/1. .
"-"'"-l tU.... fOI~0\1.D\IO.C...sl jOI'tOO.g"-'\..
. tU~~.Oio .g.oro"li\. ~"-V\.1 1(.()-r

Ok.:l.c.-~0\t... 'tOfOj -OIJLOI _:.DOIOI.
<td>-,
~jt"li\. ~ <t~> ..jt.r?1..

j01+u-\1.t.. Oj~"li\. .I~'\1\.~"\i\. .5\t..~V\. 1. -c.-t..
<td>25 </td>
<td>74</td>
<td>5312 </td>
<td>SO</td>
Du.. .'\1\. ~11!. <t~>
<td>/5</td>
ji,t..~'\1\. I'UII)(Oj.c.-.s~ .g f"\)I'I.1X ~~~I)(.
.-~I{. .../"~.
</tr>
</tale>
</d>
</html>
560
~: 13
. ""r~ ~ro"-"'. vt .g~.g "-"'"'j&t"li\. ~ <t~>

C..Ojt.r?1..,~OI~ Oj~"li\. j~,L~'\..
m co3gaem 63
, L-'.
: ,
. , n
, .
~ fHe:///chapter131Journal/taie.html
~~11./'
t ~ vo;._~~cl61
,;\:',~~""'1
,;\:',0 \. o~K1.11j01Jl1-
~~~b.
~j11t1- <f\A.>- ,;\:',

,;\:',0\!(.,?..t-t-~. ~~v.s\(
!> ~..OJLO\t\..WO '&/"~
,;\:','&/"\ 01t...> j01'Z.MO:g"-1-
h.OJL~"If'L-
'11fwp,;\:',o...
L- ,
. ,
<tale>,
<tr>. <th> <td>.
, .
.
3gu m6u
Bw
n, n11 11 6nw cnon~tay
IOCJI w n: <t>,
w
no n~t,
6nw.
\t.-t- >,lo/v -
3~ <+i> !-j"~ jDI~ j~,,
w. ~ .. I(.()W.oroto
..t...~1. <.- jOtU>.o-&o c..oti~DI. 0~j~
1'\.'\\.0\t...... ~c...s\ W.01'~1>..

Co.jj~>~~M W.01~~ t\.P."1.t\.P.1A.w.t...
..
<tr>, <th> <td>.
6~tl nottJ~~t, t pon~t ri
~j~bC...SI ~~W.f'\. ../"01(..'\. W.DI~~~
~...
I-\J..:LO.
\t.-t- </tf> jf>.\(..0\+\..'\.~\t...

..r~ W.01~~~.
<th></ th>
<tale>.
.
:r
<tr> .........
~
.....</tr>
<tr> .........
<tr> ......... .
<tr> ........ ..
-,
15
1204
29686
4/ 5
.... </tr>
50
3/ 5
.... </tr>
41173
4/ 5
.... </tr>
265
3/ 5
.. .. </tr>
-,
25
74
5312
10
91
4226
23
<tr> ..........
<tr> ..........
-,
<tr> ..........
102.
4780
93. 4242
7289
5/ 5
.... </tr>
./ 18
104 860
480
3/ 5
.... </tr>
\(Q.?j11t1. ~
<tf> jDijDILA ../""'~
w.~>.'a~l:lt. lW.DI~ :g.

W.DI~'\.\'\U.-jl>.~
~~~,_ ../"01(..'\.
..gi(..D\j~I>.IOW.c...s\
~~<tf >.
562
75
.; 13
<td>.9
aryca</td>
</tale>
Tu.< /t01/v
j01~~111t,...;;:;
W.D\~~.
aCIJlo
Bonroct
")j: ")j:
? ,
0:
XHTML
, .
, ,
CSS!
1 IL
0: SS-.

$200.
HTML,
CSS.
")j: ,
? , ,
. ,
,
.
, -
- ,
<ld></ld>.
CSS
XHTML.
~u coc:mo:m
u , :mr
~u c:mrou
U :m~.
u:m :m~
ameu :ma~une ~:m
f um.~
u u
, .
oJlfeeH:m :ma~U t
<td>
0:
~ut JloBo.ffi<>:m
")j: -
")j: ,
: :m~u
, ,
?
0: .
0: .
CSS,
I1f
faMe:mKu :m;
:m ra~o:ma ~~
<lh>,
563
m .; r:,:
( 1
um IL-
<tale><tr><th>cnon~e</th>
ma~ulf.1.
<th>Ano</th></tr><tr>
<td>Eniqma</td><td>Le Roi Est Mort,

Vive Le Roi!</td></tr> <tr><td>LTJ
Bukem</td>
<td>Proqression Sessions 6</td>
</tr><tr>
<td>Timo aas</td>
~
<td>Pictures</td></tr></tale>
564
:<~ 13
3-
"'f'oc...W'.o
..'f>~"'
D Il<>Qilal5um c~ff Mecmo

~fa~'efa, om~raaJOero m~
cmraur. Dnu nru,

:nroerme :nrum remeuff
KoHlf.e
)(\(v"\lr
1,
66u 326k u kpamko2o onucau m6uI

, , -
summary=" B
<tale
r01,;;;.\(.()t., o""'\.L.Oit\W.- .t..

~~J\t...c....s~ ~OI+V-
n.
~~....s~
~, n n . ~ jNI "f'~C...W.OI~.J\.U\..J\
~f~~~~
J n ,
no
5.">
<th>Bcoa</th>
oW.o
<th>Haceee</th>
</tr>
<tr>
</td>
<td>15 </ td>

<td>75</td>
<td>l204 </ td>
<td>2968 6</td>
<td>4/5</td>
</tr>
<tr>
<td> -,
</td>
<td>25 </td>
<td>74</td>
<td>5312 </td>
<td>SO</td>
vv-r
1"0\.~..-. ~ """1"01 ~t...1il...
<th> n </th>
<td>/ 5</td>
O""i,(...DIW.b W.Oic>~.
-fS
<th>Tenepaypa</th>
<td>-,
j~~l1t. "-"'0~!1000\IOW.jNI
<
JJ
~"' 01W.~1i\..~c...~
v 1 w.oo11t.
<
v
HDIQ-01~ ,;;;.~r~....s~
()l(..tU, ~I"C~JJfOI. _).\t\..1!u
15 ~~~.gt... ~I"O\'i't.o>015
<tr>
<th>opo</th>
<th>aa</th>
</Ule>
3~.~.1i\.. 0 ,;;;.f!1t~
JJ
</caption>
</tr>
1(..01"
~01( I(.(),;;;.Of11t~ ~Oitu\.lftt...
<caption>
,
~b ~ 01,;;;.t...N\~~15~j~
...~ 1501~ tU.. "'f"'15~c-.s\

~O/"OI~-U\..~30J\O-{SI(..OI(
3~01tu\..Ot... ~ _).\""-~( W.o jNI

~3~ t..1..0 ~U\..~
C...W./"0\~ ......t... ~b30-fS01W.b

CJJ. iY\!1t ~"f'o~~ 'jt...OIW.b ,;;;.
t.rt...j_ ...~W."~ )(Q~ ~1(..01 tU..
-fS... '?>r~l1t. ~jjt.r~-01,;;;.
""~ ~3~11\.0~~0\1'-~
mecm ... u ng cmue
1>1
~ file:/// chapterl/journal/taie.html
, r; II
-~--------'---.:;___---,11 n l e~t41 n I ace~xmii,. .P. eimoa

--;
-~
-.~-
----,
l-,~
1115 1175
~================~
l~~
1125 1174
~~~~:~~ IEJI4/5
~==========~
~~DI/5
~=-=====IO=a======:ll:=l=OIOIV!=
~
. .=~~:=~=!====:114226 ii4117
ln ,
!12 1V! 11102
114780 ll265
11415
ll
~=;=r;=-~==~====~====,====~=-==~~~9=~=r
===4~1~9========:II~~4~1~5/=5============~
~----------------------'~ ~r8ry~c_a~L~l-04----~~~:~o ~~~L/_5--------~~~

~
.. ~~j+U'\~ "'{1?1<.1'\..0 J5>~"'i~
o""-<NC.~j.SI .SIUJL. - ""-01~1.~1..
J"'~~ w.o~t1t. o\U\. ~~

~\Wh.
-1.jO~P..g~b ~ orO\~iow
~~011 W.o W.~~Oijt-1.<NC..g~t...b~
0 .".:.1.~.g..._~-. ~ ~~ ILDif""-~
/\~1.. 1f01~11t -.g_.. ~O\v1A..g!11L 1.. ILDI..'I.t.--""-0
<<W..t...t1tt... ~bjO.gOI""-b tU~~A-WW ~o.I\J...t.. <<t-1JG.'Ii~.t.>>
'1'"'~11tj.SI .t..Ucz )((>~ ~11t.~ ~11tj1oroio tU~~r1..c-Oil.ll.".:.

.".:.~ '1-fOI~ .gO"fJZ'.g.1.. OI~~I1t
566
13
g m kak nepeiige k cmuu3auu,

noecmu mu mu u
,
. ,
, , .
, , ,
.
,
journal . html
ch apterl/journal,
20 .
, , , .
<h2>20
r,
2005</h2>
<>
<iq
arc="imaqea/aegway2.jpq"
&lt=" c:rrep -"
/>
</>
<>
1200
-:
</>
. :.~.>t'i. ""'11\.)I(..'l.O/"~o.g. YjM~(..

UVI h.OIO...j . .g...t...t..o t\.UO ..t ~~t..
'1..Lv...ObjO.g~.b .~~'\1\.~.
EH::.OIIs-111 61""1 , ......., </li>

Eli::.OS&)IIIJI'N.)III ,
-e:t' Jlora</ li>
<li:.Obe'JI' atle , atat lto11op.ao</li>
EliJo'III)"'JJ'
11"511,
<1i>~r 1
........ Apsoa</li>
-"~" ll-</l i>
~
<tale
summary="B
n;.
';' RR atulble ,
; ,
; ; r.
r :~~
<caption>opoa,
no
s:r
5 . ">
w ; ; n CA</caption>
<tr>
<th>opo</th>
<th>aa</th>
<th>Teepaypa</th>
<th>wcoa</th>
<th>Racenee</th>
<th>r xae</th>
3jt..c- ~~u;;;. t\.0-gO\..S\ .~~~~ t>...ti.

~:.i. ~vo~ '<\....t...t..~ .u... ~DI c._,~O.gDI~b '\1\..j k..f\j~~ cpt'~'\.DI.
</tr>
</tale>
567
Cmuu3ye mu

j ournal . css. ,
. ,
, .
d
Ver dana , Geneva , Arial, sans-ser if;

sm&ll;
~ont- ~aily :
~ont- aize:
hl , h2 {
font- weight: normal;

color: tcc6600;
order -bo ttom : t hin dotted 1888888 ;
}
hl
~ont-s ize :
170%;
~ont-aize:
130%;
h2
lockquote
~ont-s tyle:
i tal i c;
~ .~ t. t.1J1.~ .01~~. Do~A.g'\1\.. t...got..

)"- "fDI.gOt.. ~J\1.. ,~ '-f"'(} 'tf'A..~jJI ..~'\IU.\.f:.
~
tale {
JJ
margin-left: 20; / _". ~ . "f
. ~ f'-ft...t...t-.'\.o\....j0\1.0O.g()l(.. k.Oj ..~'\IU.\,~.
l'Q&rgin-right: 20;
JJ
order: thin solid lack; ~ ~
~___../
caption-side: ottom;
kpo.t.. .L/"\)~ .g~ -zro~J~tlt.jNI .t..U.

~ -J"'~1..1.. 'ju.. u.. ~u.. .1\.t.:ZJ(..()iii... H01r11\..C.-jL'
'tf'A~ .ot..I'\l>iii.. ~iii.. CA.pat.O ~.g..,;:;.P..
order: thin dotted gray;
td, th {
padding: Spx;
~
caption
font-style: italic;
padding-top : 8;
Do~OI.g'\.o\.... o.v.ji-\.JjNI JI.~ .o~tlt. .t..~jj W(

'tf'Oit<..~ii\.1.. VOj'-f~'11\..J1t.. ~I v.gO~Ojl'\l>t.. ...u....
. "fDI.g1..O jNI
VI1.1..j01~1..1.. JOIU>O.g!WI.
Mt~t ~t... t.1.. ~~
~ ~/"<-1...g...tiii..1..jO~OI.gNit...
~~'I. .v.,..._ ".g'-f~
568
; 3
ecm g cmuAu3o8aou mu
. ,
, .
journal. html
_
------------.
1oc...JtL ,;;:.ow \U)\1(.~1.11.
il) flle:///chapterl 3/joumal/journaJ.html
~11\.'I.jO~DIA'I. "'-DI~A~{ O+UJI
~/1l:l..IIJ\j1."'- ...~..... '\1\\..0\t....

O+UJ~ ~+UJIC...A.tjO~DIADI t\.t..J(.()"'-01"111L
~11\.'11\. "'- ot.O~t\.Oii\.
~/"D\\'\..'\1\.~111.jt\..1...~~ lo\'\..'\1\..
---============~1'
no
n~>JIOK
no
~~~.-~~
~wp"'-1.11. ""f~JJI.L~DI,;;:.
c...t....t.,'~.,w.._g~ ,5DI....J-8U'{
'\. '\II..LIO"'- .,t..,\'\D~'\1\.ii\. 1"1>0~.

,;;:. '11\..j ,;;::.t>:; "fD\~11\. ~V\..A9.r
\.,;;::./"111.- ~1t.. 'a1.1tA'11\. j~D11'\l11.jNI
, n
1200 ~:
~/"DI"-~1.11. /"0\.t.-.
lf
,, 15
~ ~ ... u... ,;;:.t...N\.S\-~",.,.1
1.pDI~DI '11\. ,;;::.ot..I-\..I1tt..
25
1204
75
5312
74
29686
.. 50
4/5
/5
'\.\'\..'\.1...
10
+UJ~\.Lii\. "'-DI~A'I.~/.11. ---

~-.....OJLS\ '\. ~OAb~'\1\.t..
' 23
..-;; ..t..1~ IU)I.~j(1t...'I.
4780
4242
'
18
r
41173
4/5
265
3/5
' 7289
5/5
480
/5
. r
93
Oj+UJ~IC.O .'\1\. ,;;:.ot..I-\..I1tt..
'\1\.\'\..'\.'\. v1.t\. ~/"OvDIIO"'-v.s\

~ -t.l1.1>.jDI '\. "'-~.1\.t.)\.
~~"''W... r..t...w1
~ \'\..'\1\.t..W )(0/"0~W ~ .-;;-
"
. 4226
102
,_n
0,;;::.~~~ j~DI~jNI
"""'j"- '"~"""""
91
~~ n
,, 104
860
r4, rr .r
_:! , ]005
ll ll crne
Burma Shave 4 r:
J
P<>fiJ4IOtfe H4I!IHOI1
.
tI!t~
j~~..s~ .s\t..ii\.\U)I....'\1\. ~
~'SA'\1\.y'~IO.v.s\,
569
,

n ...
n.
?
n 11 r
n1, nr n
n, 11 none, 11
r n11 ~ n.

, ,
. :
; ; 0 0 ~~~0~~~r.o
; .
..........................
j ....... 1-....
00
512
~~~~~
.....
..
..
. ~ -z..,t\+\..11\...L.\.0\.
-
V
'f't>.c...O.S\1'\."\1\..t.. L~l'J J\t..~.:\..
3~"'......-J\ c.-.go1ii..c..~o... bo.,.o/-Jr"'c.-1~.

, order - spacinq,
. ,

. ,
.
~ ~illf UJ , ' m
. ,
, .
, ,
? -
r ) .
....
.
..G. . ............................. ~:
6312
. .....
...... -.
011
Bonroc1
]j: - ]j: , ]j: ,

,
, .
0: . . 0: , .
border-spacig .
0:
lntemet
l?
, 6-
ode-spacing. ,
, ?
.

.
order-spacinq:
lOpx
10 ,
30 .
571
.;
66u 2u
.
$5- order-collapse, n
,
. ,
(
) , .
.

border- collapse, n
journal . c ss:
.
tale
{
margin-left : 20;
margin-right: 20;
order : thin solid lack;

caption-side: ott0111;
order-collapae: collapae;
Do~OI~b.t. .-~1..........g bofolu -)I/Oif.St,
.
1/
01
'11\. ~""""'t\.0~~j.AJ\ tU.:tO jN'IU\..W... )
1".st..
~
; .
-r
no W
"~ ~ ~ -
. 5312
..
~ (r~ ~
- ..
15
2$
-r~ f>o"f"Jl' I(j01_ .S\t.:l.~t.'\1\.

N11/'f1.C.O~DIN'I ~'I.N'IfN'I.SI 'tf'Oit\..~01.
-..
....
"
_,.
~
&.y~m~yn, w
/'f ', "'
Koaoe>uo
r
)(o,..UK'tOQOC, WI'A'r
lt1014UQf.ltO
)'., IWf" AOK)OII
14'YC'f
..".,.,.
.....
15
...
31>
41173
41>
..",,...
42~
.....". ,..
..,,~
...
. \("' 1""'3 ., t.:U> .t. )(.t...'I..
C.cn.Dit-~t.L( .OI~.~DI """0\.\
~11t1JLS\ja....;;::.
N'IAU-\.OW
.~~
l\ln rpootr VIUO et-n ~rm stlve 1\1 ~ Jt~on.:

&
.,.
.......
""'
"'
""
>1$
~ = n n ,...".,
XHTML
CSS,
n
. , ,
.
? ?
: ,
no
- , .
tex t-al ign . ,
<td>.
, , .
, , , ,
, .
&n641\, w
&fw~trtO
15
s:~~;-t~, -
25
-. :
6oJ'"I'IYn. w.,- >
10
~ tttO,
&~~.
W'J'OT
no
~:
Tefo4nepTYPfi
, 1 APHIOI'IO
18
aerycr
.n ..
~686
91
4226
115
102
93
104
4/S
'r- -
KOHteltJ)HteC1 IDOT
H~ttOMcmo
C!liA
"'- -11tjoo-t\.LI-\D h-0

"'f'OI.gO(J k.fOIIO.
860
~IOIOif!O /'<#No,..W.~,
1'(1 n. e/JIC.
~
573
Kak m 6m?
, ,
.
:<r ,
.
,
background-color ,
( , ,

XHTML CSS,
!). :
th
background-color:
#;
journal. c s s
. .
___.::::r
R 8~\Af~/t ri~T_..,t~ t r. &unJ.e. S...... N ~ AOoont
~",._
... ,..__
~-.11[---........0
............,
1001\W~c:tforr..c
Kak m mo2o, m
packpacum cmpoku mu?
(),~-
.
, . n
n
,
. .

CSS? .
cellcolor:
.cellcolor {
background-color:
ifca7a;
class
cellcolor ,
. ,
<tr>
-,
class="cellcolor".
574
13
Al"'*etlt169'0.._r~..c.oat~ &~$tl...-tttt ofo.tto1'18A~
&.w _ _
...
J.,...._
,..,.. ......,__
~,..,..,"'"""",.._
~~~
cel.lcolor
journa l . css,
L- class="cellcolor"
<tr> ,
. ,
.
toBopuAu, m u cgeAaA
um omkpmue
m--k?
, -
--,
-.
,
.
, , ,
.
-
,
.
? ,
.
~ ~
575
npot.! r::;v.yrm
J?
-.,..:~_...
liS\V..d
'15
~k~. . . . .
2$.~....
~".....1:t_
""
J'IO ;.,.o~
1'1
......... ~
! j~t
1WI
~
s;z
2.~~~~
ts
so
3/fi.
'f,ft3
mu ma6Auy u 3
,
27 -.
,
(
). , , ,
,
(, ).
-,
3ju-
0 ";;;..t-U\t. -&01
.g""-j""-";;;.0\ 10\'\,.'\1\.g 1f~";;;.-o/"
~I'WUV~
15
75.
74
1204
29686
4/5
5312
50
3/5
41173
4/ 5
265
3/5
4242
7289
104 860~
48\>
5/5
4/5
3/5
-,
25
10
91
23
102

-<>-,
XHTML.;>
4780
9
27
, ~'\. 18

4226
93.
gso
111-
~\-
, ...
, . L,
, ( ).
, .
0\
~ ;7";;;.'\1\-j~tU\J1U.
jDI~..;;;.D1>E
c-.rol(.'\1\-.g ";;;..'&""'~
Kak gm, m6 uk oxBamua kk cmpok

- ?
-- . ,
, , ,
- , .
- ,
15
75"
1204
29686
4/5
25
74"
5312
50
3/5
10
23
91"
102"
4226
4780
41 173
265
4/ 5
3/5
9
27
18
93"
98"
104"
~42 rj ><!.
7289'
860 f
480
5/ 5
4/5
3/ 5

-,

,
,
J2
( ~--~
~ -_..1
, \
'
1/
__)
i::.
t..1i\...1.. c-j 01 .1.

-
""'~OI..J/"01i\.
[>'111..
rt..1..1..t..:>..
kf''VIjOJ"O~
IU'Icpt.. jOI~'Ii\...O\ .
>) ~t\.01i\. V./"0\d...
<td class="center ">4/5</td>

</tr>
~
577
+~,-~ 1.\~\,-?
,
,
<td>
, n
n.
<tr>
<td
<td
<td
<td
<td
<td
</tr>
<tr>
rwsn="2">--,
JD-</td>
class="center">9 aryca</td>
class="center">93</td>
rowspan="2" class="right">4242 </td>
rowspan="2" class="right">7289</td>
class="center">S/5</td>
<td class="center">27 aryca</td>

<td class="center">98</td> - - - <td class="center">4/5</td>
</tr>
'
578
'-' 13
--, 1 9 1
1 27 1
93'1 4242 1
98'1
72891
1
5/5
4/5
u wm ma6f\ua

j ournal. h t ml
. .
,
: L-,
,
,
<td>
15
l~ "'-.~" ~~j1."'
MIOti/1,
........
J"...t..""'-.utbl'\.01 11\. ~ tU...1.. ~

1.J~!'\.01.. 'I.tv:/'0/"...DI ~1.1.
.-
..".
,.
15
10
91
Z>
102
12..
.,.,
2t686
4/S
11>
4t226
411?3
<15
4160
26$
""
'"
.'f8
t&
5I$
"
4/5
~,,,.
IJ\4t& 1"<
,,..
.......
..,.
JIS
C?W'Ie 6wm Shv " "" opont
ECIO#tto~J1&P.IttetJfle
npo(f>a.aw ~ ".w,.,~,
'fO <Nfif ; c6fr.

l>i>l'fr~e~.
.ttt
}).
]j:
Bo!1foCI
, ,
]j: , , ]j: r r

<td> n colspan,
rowspan?
, ?
0: n
0: , . 0: , .
. n
,
colspan <td>
n n
<td>
, ,
r r. n rowspan
. ,
, n
, n colspan
<td>,
r ,
XHTML. n
r (n
n , n
, ).
L- .
n?
.s:l ,

n!
.
8 ?
,
27 . , , ,
? ,
. ?
, . ...
?
-,
1 5
75
25
74
1204
29686
4/5
5312
50
3/5
41173
4/5
265
3/5
7289
5/5

-,

1 0
91
23
102

--,
-
4226
4780
9
27
18
93
980
4242
! 1 5/5 1
1 1 4/5 J
104 860
480
3/5
11...j ~{1(. tU... ...0~'\1\.. -{5 .I~1.~ O~t\ J"(..1i\..'\.k\2.01~
1> rt-J).".(.. j
580
,?f'! H :ld
13
... ~~t... ~..u.. .t\.. ~r.JW,;\~'W\.
. L
. r
<td> <tale>.
? n ,
r
( ), , ,
n,
4/5. ...
<tr>
<td rwsn=" 2 ">--, 111'1'&'1' -</td>
<td class="center">9 IU!.r>yc'lla</td>
<td class="center">93</td>
<td rowspan="2 " class="right">4242 </td>
<td rowspan="2" class="right">7289</td>
<td class="center">S/5</td>
</tr>
<tr>
<td class="center">27 a:ryc'lla</td>
<td>
~
0101 ~01'~..t...
<t>
<tr>
<th>Tecc</th>
<td>S/5</td>
</tr>
<tr>
<th>To</th>
<td>4/5</td>
</tr>
</tale>
</td>
</tr>
e;;.Oir11t.1.
l"t...1A...;::.'\.t\:1.. ..
Tecm g >kii mu
, ! .
,
, .
.
:l<yrepe no
-----
~ flle:///chapl3/jouma1/journal.html
~~--------------------~
-
n no I
npoexan 1200 n n :
15
84, w 8wr
25
1>1, WII1 l!
10
, w
11
23
~ ~, uno Konop~o
'_f;
, ~r~
75
74
91
102
14
512
18
r
29686 1
S!l
4/5
/5
4226
<1~
4780
"
o'L01..g!1l:t..IU\J'IN Jjor~c
5/S
4242
27
Yali, "3
93
, w
1204
Ej'\oi.Li~L
jDI..A..t>o~ V;)~MV...
<fX>"'-JAJI jDI'LOO..g~
7289
98
104
860
"
480
..g~i.
/5
VC.t>o~~I - V.
R noctmf tto tJfX'r<R ~ ct<yafX'
2005
. n > Burma Shave r:
~ Dt>o..gDii.VC.L
"'
..g~L1... ~
';
....j"'""ft\t....
~--------------------------------------------~~
582
13
~~O~Mj~~~
~~i. .....
MO'JOWOii\
W,.'YPM
"QWW~~ ~Q~Q~'
, .
(
) n .
? n ,
102
9
aerycra
265
93
5/S
l)- .~'1 W,JT

- tt
98
104
H~t\D '\Q~ ~~..... 4'01'\ .s!t..I.J(..

. j..0~1(..0\.1.jA.sl .g-'_~,.
.t>.~A~Ir fji..AOI~ UO ~t..AI1!..
backqround-color: white;
HOI.,.~i.W.t..
~ort
~~I~1.1.
.~(.{) j..0~1(..1.
~.~1.
.OI~A~I1t.
Cmonl nepe6opau6aume
cmpauu,y, noka 6num
m ynpa>keue.
583
": . ,
ngu CSS g 326k6

>kii mu

'Jacmo
, .
SS-, tale
th,
11f
<th>
tale
Jj: n n
n ,
nestedtae ero
tale tale
n .
th {
backqround-color : white ;
{
background-color: white;
.nestedtale
journal. css
n n
?
0: n
n n
CSS,
, ,
. n, ,
n n,
- XHTML.
n
?
n

<lh>.

a......~ .,..t&*~
.,..,~"~
-,.
nx:t ..!-I, Wf' Kct~<~O&AO
..,.,.
~~.~.~.~.-.
unn l.li.A'II:o
.,,.,. Ot
2$
- ,.,..,.. .,..,...,...,..,..
.,.....CJ.
TplfOQiCOttcep!oiQeC,
III"'
H....o-f!\~OUI(o
,.
..,.,"...
226
..
.173
,.,
~~I
<th> - -.~1i\.
VC.OI~A'\..~ '\.o\...UoVC.
~t.Jl11i\. <f+\..
584
::. ..! <1
n,
.
n
n ?
caiim u go co6epwecm6a
,
, , -
, .

<h2>2
2 :
2005</h2>
<>
<ig
src="i:mages/segwayl . jpg"
first day of the trip" />
alt:="he
</>
<>
. t\..'\..?\"\.9..11 01... j+-\.L~t\..'\.I(.O\

lot\..'\1\.. '\1\..j <f'011... io'\1\..f..../J",..t ...../.
1 o~t... .. c-.vw-ol(. ~ ~~"\.

jOih-'\1\..V'\1\..j+-\.L~t\..'\.I(.O\ ~
</>
<ul>
.!) file:/t/chapterl{journai!Journal.html
n , .m w!
<li> </li>
<li>iPod</li>
<li> </li>
<li> </ li> )
</ul>
<>
-:
<q>
</q>
</>
</d>
</ht:.l>
s n.w!I! ,
m m
nw&. ,
' :
iPod
D. .\1(. .. <.:W-!(. ~t1ttJt.S\J'"-""

N'l jOI~"IA. ...~.
(___:;:{
&
w
. K.!IK '.m :
"ws H.!l .!I.!I
.
585
Cmuu3au
cnucka
, , , , G5S (, ,
), .
. ,
.
list-style-type
3.ju- . o~!jt...Sit.... ..;;::.'\1\..1\ JM 3~~ .
tvlo~+U> .OI~c.~t..jDI.j"'~"'""" uoJM 3~~ {v../>1

~
'\1\..
01-\..~N'\C,~(,.s\ 3~0\.'\1\.. {/1>.
1);,sc,- .'\Iuv o..Difta.r'O~(
li
n~ ee.~til
-
il'od
~"~k.O
list-style-type: disc;
j..\1-\.W.
..'Q i
woona.,.IIP1 t()I.(
li
list-style-type: circle;
>
ti rtt.net
iPod
10 ",.
w~...,
~ r.
3N'\t..I-\..W.. c..ift./t- c,~o~--gD\
J;Jt-~/t..-~1".... ~v;;::.D\N'\-.'\i\..-01~
~oc..;;::.oi\. "f":f11.. o..Diflc.t.f.
li
list-style-type: square ;
iPod
v;.
J<.i"IPY
u~ ~
3N'I~ .S~'\1\..D\ft..
O~Ajt...Siu;:; ~DI.j/"DI.ti\.
...D\~.
ffn
1 '..
li
8I
IPod
list-tyle-type: none;
110 ...,
}1.
31'U'\w..'\i\..t.. ~...,.._
-~~~"'~
.~rlc.t.fi.
586
"""" ~ ...
13
wt:II . t
'
u k
oco6oii ?
,
n ? , CSS list-style-
image,
n. n~ .
. c-.goiA..~o J;sr-~/t""'I>JL .g ~<~~
jN>.U\..'\i\.S\ \.f't tj~j~t..JI- \IZ-L ~
..r
liat-style-iJDage: url (iJDages/backpack. gif) ;

pa~nq-top: Spx;
margu-left
<
'fOpx;
_,.
fiOI("j~~<. ~~c-J\1 N'~...
~>j"-"l "'- "'~ "'-1
- ~.g ,.,_~ t -w.~
.~~j~~.g'\1\.. c--otji'\..OL <--:ro~r~~

-t.: ~ ~""' _ -&r)(\'1.1...'\1\.
~ \(...'\1\.
_,. .-:v~
1 .. , ""' - .!..~~
- _,. ....,....__, _,. i ~
""
J)
I'\..OL.. f..t- .W( jOijOIL.. tU..CJOb~'\1\. 01t.<V
c-.go'Soji'\..OL ~~/"._,..g.
""'
~ "" ~
~
~-'====-._
r ~____
_ _.....__
f!le./ //chapterl /j ournalfjournal.html

11,
2005
U nocguii mecm
n .
n
n SS-, .
n! ,
n
n. ,
:
iPod
. -:
"
t-ta
-v"':"j~ ~Jtr~ck..Jf o.:-rtQ(..o,~.gu

c-o~oiA.. .AW\.1\.t..k\.IL '\1\.jO~f~-v...w...
t-t
587
:::.
\laCIJlO
3t
nr
]j: ? ]j: n n ]j: , ?

:,
, n, n
n n,
0: n
. ,
n n ?
, .
0: ,
:
0: n
inside
line-styte-positio ,
list-
style-position.
inside, n n
n, n
n n
n outside,
. outside,
(n, , , ).
no
n n
n n
, . CSS
list-style-type.
n n
n .
n n no CSS (
, ).
?

,
. - ...
,
-.
L-

<tale>,
HTML:
, (55-
text-align
<tl>
cocybackground-color.
<tr>, <th> <td>,
<tr>.
<td>.
,
.
- ,
<td> .
<td> ... </ td>

,
<th> ,

.
,
,
vertical-align.
<tr> ... </tr> L

- <td> ... </td>
rowspan
colspan
<td>.

, <tale>
<tale>
summary
<caption>.
, -.
(55-,
55,
12.
).
, ,
list-style-type
list-style-
image.
55.
border-collapse-
(55- ,
list-style-type
list-style-image
<! D html
PULIC
" - / /W/ / D'ro
DL
1 . Strict/ / ZN"
"http : / /www . w . Qrq/'l'R/xhtmll/D'ro/xhtmll-etrict.dtd">
'
n
<html Xllllne ="http: 1 /www . w .org/ 1999/xht:ml" lanq=" ru" Xllll : lanq="ru" >
<head>
<meta http- equiv="Content- Type " content" t e xt/html; charset=windows-1251" />
<etyle type="text/ces" >
t d, th {border: 1 sol i d lack; )
</style>
<titl> u To</title>
</head>
L-
<d>
, n
.

,
<tale>
<tr>
<th>opo</th>
<th>aa</th>
<th>Tenepaypa</th>
<th>Bcoa</th>
<th>Haceee</th>
<th> n </th>
<tala>,<tr>, <th>
<td>.
.
.
</tr>
<tr>
<td>-,
w </td>
<td>15 </td>
<td>75</td>
< td>1204 </td>
<td>29686</td>
<td>4/5</td>
</tr>
<tr>
<td>- ,
</td>
<td>25 </td>
<td>74</td>
<td>5312 </td>
<td>50</ td>
<td>/ 5</td>
</tr>
<tr>
<td> ,
</td>
<td>lO </td>
<td>91</td>
<td> 4226 </td>
<td>41173</td>
<td>4/5</td>
</tr>
<tr>
<td> ,
</ td>
<td>23 n</td>
<td>102</td>
<td>4780 </td>
<td>265</td>
<td>/5</td>
</tr>
<tr>
<td>--~ ,
<td>9
590
13
</td>
Q-</td>
<td>93</td>
<td>4242 </td>
<td>7289</td>
<td>S/5</td>
</tr>
<tr>
<td>Ya, </td>
<td>l8 aryca</td>
<td>l04</td>
<td>860 </td>
<td>480</td>
<td>/5</td>
</tr>
</tale>
</d>
</htllll>
1 ~-
..
1~ J@]( [!! flle:///~hapterl/journal/taie.html
.' ':i
I:-, r
~m r
l , r ,
1
~--~~:, 61\::
ly ,
ti
""'
'
no
[~le-,aypall II~eeaell ~~
75
11~~~~~ IEJF5
181
74
1~;;08 I DF5
181
~~226 1~117
1~5
1 10 OJLII 1~1
114780
11265
1123 OJLII 11102
11315
114242 yaiEJI5/5
, 11: n nyreecnx !'
1
1881Ia-881Ia, r I!
IBF
~~~r 11104
I~EJ~5
,.,%;
:=
591
.\mpl!i-! t>ii uu
ora~omaU:me
~rr
( 1
u.m IL-
tr ma~un1.
<tale>
5 -
<tr>
Mecmo
<th>cnOJI~e.</ th>
nocmaBu]Jl C~ff
<th>Ano</th>
~rr. o:m~raaJOtnero m
mru. Dom ru.
</t.r>
<tr>
<td>Enigma</td>
<td>Le Roi Est Ort, Vive Le Roi!</td>
</tr>
<tr>
<td>LTJ Bukem</td>
<td>Proqression Sessions 6</td>
</tr>
<tr>
<td>T~o aas</td>
<td>Pictures</td>
</tr>
</tale>
Unt1ded
,
!mll
IEnigma
IILe Roi Est Mort, Vive Le Roi! j
llJJ Bukem
IIProgression Sessions 6
limo Maas
j~ictures
. ,
Peweue
.
, ,
?
border-pacing,
.
V12
::: : )
....~ j... ....~.~.~ ..........
ucnoAJo8am c8oiicm8o order-spacing'
m6 ycmaoBum wupuy npoeymka e>kgy

2 uu,
. Tozga gOe 11uuu

n11 811110m gpy% k gpyzy.
6ygym
{
margin-left : 20;
margin-right: 20;
order : thin solid k;
caption- side : bottom;
border-spacing: ;
tale
~ ~
;-
'--' .
11111 1 11118111 11 1111111111111111111111 1 11181111111111111
5312
~ 50
1111111111-~11l l l l l l l l l l l l l l l l l l l l l l l l i i l l l l l l l l l l l l l
----
-:-- .41
m 11w, * u g8e 1\UHUU,
g, m u u n* nm gpyz k 9PY2V
....___ peJyAmame wupua u ygBauBaem~. 6
6o~we nopaButcb, 8CU\U 6 *g uku 6n
gu u. mak 110?
~
593

. center {
text-align: center;
Peweue
SI.IIIIIII&Iy="B
<tale
.right {
text-align: right;
'l' 'l'& xp&IUI'1'CR w
~ 'l''l'.
'l'&'l'}'
II
:,
0'1'
'l'oro r
~~:w .,
<caption>opoa,
'l'eX
r,
XO'l'Opwe
'l' n r,
:'l'
u BJUtiDn 'l'. 'l'r n1U
no IIIX&.ne 1 5 . ">
noce~ '1'8
~~:o'l'opwe
'1'8 CA</caption>
<tr>
<th>opo</th>
<th></ th>
<th>Teepaypa</th>
<th>wco'l'a</th>
<th>Hacenee</th>
<th>r n xae</th>
</tr>
<tr>
<td>Bana-Bana, ~ r</td>
<td class="center">lS JOR</td>
<td class="right">1204 Y'l'a</td>
<td class="right">29686</td>
<td class="center">4/5</td>
</tr>
<tr>
<td>.--'l', 'l' </ td>
<td class="center">25 </td>
<td class="right">5312 Y'l'o</td>
<td class="right">50</td>
<td class="center">/5</td>
</tr>
</tale>
'
n
<tr>
<tr claaa="cellcolor">
<td>I- ,
</tr>
594
13
III&T </td>
class="cellcolor"
=- .: . .
~,. ~ ~~\,-?
, ,
n
<td> .
, n n.
<tr>
<td
<td
<td
<td
<td
<td
</tr>
<tr>
rwsn="2">)"1'--,
class="center">9 UII')I'c'l'a</td>>__.J-----...;..
class="center">93</td>
rowspan="2" class=" right">4242
rowspan="2" class="right">7289<
~-4-.;;.=-+--
class="center">S/5</td>
<td class=''center">27 ai')I'c'l'a</td>

----1
<td
</tr>
5/5
r--,
-
4/5
595
VC1A!-I~ fllt
n
MO'JOWO~ w,-~PM
"OWWEt'\t'\ ~t'\~"f
, .
(
) n .
? n ,
tv\!1t. :~;:.-:.L....
'\1\.j.t.A\..~b
'J.J.t..> <fX>t\.0\ .s!UJ(.
v jOI'l.OAO~I.(.OI..'\11.
j ~.~1.
W.\.~r., <jU.OI.g
.t..W u.t.. .
1(.0\1(..gl1t ......t..
.-:.
(/1) HOIf-\.-~.t..
~~01"0\ ~~1i\.
.-:.01.~11t.
10
91
lofiO.nA
23
...",.
11n
93
<JU.OIW.b.
98
104
(2.) 30\W.t.... .g~"'\1\.W.t..

.g~W,/"8...+-UUQIO VW.rO\~.
(3) \~~~"~
jOI'l.O.O~OI(. .-;.01.~!1L
(/1)
(2.)
(3)
table th
background- color: white;

}
- n : - n
n. , ?
XHTML.
( -),
, ,
-.
L-,
-. - ,
.
Kak mm
, , . ,
, , L.
, - - ,
. . ,
n -
-. ? -
, . , .
"Dr~ ~$.()~~OILA -.
jOI\'U'I.tt.- "'-j <fX>f..l1t '\. ,;;;.~
'$( .gt1) -u.r-t..rj
L
~~~ --"
-
6-
&pay:sep
V-
&
Dr~ k.().ttj.LA .;;;.,;;;.

.;;;.~ '\. o.;;;.o~fDIDI~
.uo.
598
ll
14
j
Odt..- .;;;.
)(t-f!Ml.".w;;./"01~01.
htl-
Kak mm 8 3
n 't <:
- L
t' sseltl'e J ..,. ( """" r.wr),
. ,
r :
. ,
.
6 r
, , L-
,
, v
. .J!',m ynpa.JLe1tu - , ,
,
, IIJ, .
ft
_..,~""""~
.~
'""'. . ~
nr )"'<d" ~
~ ~le:l//ch~ttfl4/COtlltSf/form.ht"'!_
_;;:...._
__
J 1,l
~,,
11..,. (11 HUIIO!e n m.).

nt ~o1f1CYPce ~
:~!!
. ,
:l<'i~""!<'=;'"'~=i===--..
-.
I n.w 1
>>.
.
Bw
nn
]'
, ~
Submit ().
,
! first !.. W1th css & L C~apter 14 Cont...

+ hltp:l/........head~rs.com/cooa.php
r
,
-
.
L- ,
Thanks. U!3. for nte1'1118 the Head Forst

contest
L wtth CSS &.rL Chpter 14
. it workedl Unfonunatdy. the conte<t u now closed

Stay tuned to tho Hcad F!W L;;s hoeoase ;d d:tooa!
~ for news about upto1J18 contem and promotions
.
L-,
.
, ~
599
<f:,.,
nuweme 6 XHTML
L-.
L, .
- L
, , . :
<!DOCTYPE html
PULIC "-//WC//DD L
1.0 Strict//EN"
"http://www.w.org/TR/xhtmll/DD/xhtmll-strict.dtd">
<html>
<head>
~ "_..;;:. .g01. ~t..

)(0/"0~ j~IC.O-0.
<meta http-equiv=" Content-Type"

content="text/html; charset=IS0-8859-1" />
<title>Enter the Contest</title>
</head>
..;::. 4'0/"-01.
<d>
<form
~
)__
action="http://www.headfi.rstlas.com/contest . php"
method="POST">
<> ( n n), ~
: <r />
~, ~ <J~.
~<f(""'>.
: <input type="text" name="firstname" value="" /> <r />
@}
.: <input type="text" name="lastname" value="" /> <r />

<input type="sumit" />
</>
</form>
</body>
</html>
htl-
m co3gaem 63
! <fon>.
, oryr <fon>,
,
. . :
, , . .
, L-
,
, <fon>.
('
~ 1~ ~ fe:/ftchapterl4/contest/form.html
- ( J< n'),
:
--;=:====-----.
[ J
. \(".~ d'I.b.,..,1t
(0 .~I~'\1\.>) (\VI'\.0~ ...i..>

.OII(.t.. ~,)~OI.bt-.9. d'\..,..,1+
G'\.t..f.j (n -01. ,)OI~oc-)).
chapterl4/contest. ,
,
.
601
torm
Kak pa6omaem m < form >
www.headfirstlabs.com,
n
n, n
.
$1 n
- q
POST.
contest.php.
contest.php
www.headfirstlabs.com
602
14
htl-
, ~
L-q, ~

. ~
-n?
~ ?
n. -
,
, n
. ,
,
, ( ). ,
...
-n,
.
,
.
, ,
Perl, Python Java.
,
-n.
, n,

.
-.
,
, .

U RL-apece action
<form>.
'
603
m o>kem Bxogum
, ,
. .tt . ,
.t .
. <input>,
.
text mrut
<input>
text
---
:: i ..!:!
-----------------
~--
--------)":
~ <1"-f'l.t> ... jt\-C\4-U\..VU...... ~t
I./"~j.I fj/"L ...~IL. I-\.J}I. C....J"I+\..~L
'&I""ZJYi"" ~ Z1""f"..g.lt-U\..1.S\ j.lt.9. ..g;g~"
..u..." 1.j ~~'lil.. ....r~1..
o'&r".~t..
..gt\..1...t\ t\..1tU..r 4.
..g '&1.'>\ ...j4Mx
~.ltb~C....S\
~1.t\..1. .. t..
X\tv\l.r~1
~c...I"~Jt1.4~1.~----------------------------------------------------------------------
JI-\.J}I. 4-U\..'l.S\ ...1.
f J...O.it41t\..1.IO I(,()V\J(.i)\
".r''I\.'&ZJ." f;:Jrt..
I-\.J}I.o~"t.,.c.... ~1.""'
<input>
submit
,
-
.
~1.I.1t' Q1.Uj
(0 ,"f1..g1.. jt"fOC...) {
)(.. . I-\.J}I.J./6/t\-'l.Q...
...?/<.~ 1.j..l\f\..U"\..1..b (~~
. 'jLJtt.bl .t IJ~-
~
<input
,-----V\-. (."f"..g1.,) 1.Jl1.
type="sumit"
/>
?1<-L... 4J. IJ:j?~<.L).
D.it.S\ I\Dh.k.-1. cS1.b..",.1't (.""f"..g1..)

j~1..Lji-\.J}I.4-U\..1.L .S1.b..",.1'fj.lt.9.
I./"~_j.I t J"L~t;\
<1
1.f'>.
ht/-
<input> n radio
. n n
:
n,
.
y~~t>.1i\,W.t_.~ bc.-t... h.OJLD~11\..( 1.J..IO~"v\.t...

<1"'1"nt> w.~ 1/1 j.ll9. oW-1'\D~"v\.t... ~-jc>.tu'\.D..;j
"""UULIOt>.W.ULIO{ j OJL \'\l11.
~jO'Z.O h.OJL0~11\..
"-'>JLDU\..11\L.
:::1: "'-"-' ,&,.,.w
~...>.~.
lo L U)o..I..Ot-
... t\.0 ~jDL
<input type="radio" name="hotornot"

jDlLt\.0 ~
of.jJ""-~
vlu=""
value="e"
/>
/>
3_j.i...L-b." .g_
~ 11\..C.-t>JLbjj-L
~ <1"'1"v..:-hr
"i";:. .-jl":f-1A.
j+U>\ ~'IIU....
~Fc:
<input> n checkbox
, . n
tv\o+\D
+\.1- ;jc.-w.P.t\D.g1A.W.b
1\::__;t\..V\. Dj\'1.01.0
<jJJLP.~ V\.J\.11\.
;Jc.-w.t\D.g1A.W.b JL-aot...
k.:>..~e- "v\.j.ll9. ~-.i\.IOP.W.t...JLL1i\,(
1.)( ~e-DJLV\.4~-f. w.
.gt ~Jlb~t... "-'> ~t\.O...j
<fJJLc>.~e-n W.c>.~e-t...
oW.JLV\.t...Wo <jJJLc>.~e-11\. oW.
~j
11\..C.-t>JLbj.jiO w. ~ 1'\D
"""R...IU\. W.t...JLL1i\,.
<1"'1"nt>
.-
j+U>\~'IIU.... .k;>.;
n W.o
t... 11\..S\.
~jt1i\_ </JlLP.?OIC- ~
c.-oac,v;;:..gt...tu'\.DL j+U>\~"v\.t....
t>.W.J"~jW.t>. fj}"L j.ll9. ~jO'Z.O

h.OJLD~11\...
<input
<input
<input
type="checkox"
type="checkox"
type="checkox"
name="spice"
name="spice"
name="spice"
;;
/>
/>
vlu="" />
value="co"
value="nepe"
m o>kem Bxogum (m
11)
<input>.
<textarea> .
, -
, <select>
, ?
90%
99%
).
<textarea> r-
08
. -
.-...____..,.--'::"---!'l___~---~-______.- - - - ,
,
, .
------------~
~-------~
)ls
~ (MO\U\) -
.. ~ ""v.oiii..
~,..
~bj~~b
1. o..~~OIIO~'I-iii..l
1. jOI~~OIIO~1.1i\.
W'.t..'Ufo....
+~
<textarea name="comme nts" rows="lO" cols="48">< /textarea>
~~~ tU>.)(Oj.~1-1i\.c.... .Ljj
..~~\~11\.. 11\, jOI~~OIIO~11\..
W'.t..'LOI...'I-1 ~~L.I .... j....Il\1-\-11\,

OW'.0~/"0\OIW'.bc.... ~ ....O.Ilt.. ~~~01.
606
14
ht/-
<select> -
<select>
<optio>,
.
~ <su..t> C..OJ)Oit... f'4"~0\IO~V1.-Li\.t-.9.

v.-..V1.-c..o~ ILOW.Ofblli\. i\'!1..11..9.j~ t-~IO~11\...
~f'\J... (xovV..S>.
L"LL i\~111.-Li\. i\'tllj
t-11\...!Lb+\..0 i\OifblfOi\OIW.bt-.9. i\ f'\Jt\.11!)(
...t.. O.I.AU>
~f"\JY-fOI>J
3~ <....t>
jO.II..Lf.\... O"fjOI.;;;.b i\VL
"'-j~ ..t.../ w.~
c.--zrj"'-"'-lltt'o'i50\.;;;. ~-
<select name="characters">
<option vlu=":"> </tin>
<option vlu="">.I </tin>
<option vlu=""> ..</tin>
<option vlu="">i:I-</tin>
<option vlu=""> napep</option>
</select>
Ot-.1\.L W.az..o IU?Ik- .gbl

,
<optio>
<select>. <optio>
.
~~L +\.01. .t..I-\.IO(
"'-0~111.-W. v.-..111-)k- u.o

"'-j~oi\.
,____;;:
-~---------------
!:J
--:l
!:J

-
>
C<jt.pV1.-...oL ~ 01
<select name="characters">
<oft1o"'-> ~Ab~c.-.s>. j.ll..9.
<option vlu="">: </tin>
o"'-111.-t-0\t\..11\..$1 "'-j~oi\ ..-u.
<option vlu="">.I </tin> ~ ko..jli\. "'-j~ W.Oik-L
<option vlu=""> ..</tin>
.JJ
~k-.1\.\t... ~<>UVW.O\.g ~
<option vlu="">i:I-</tin>
1 oJ
..__,~"'-111<option vlu=""> Dap:ep</option>
L"LL 0\W.f~j.V. vOI/"VU..
</select>
607
mar:hinc
< Starbuzz .
HOBOSI
Bean Machine.
\)~'4"~0\~'I-,_, c.-.v'I-
C..O~ " t\~-v~ILOI..;\,.
Mo.JtO.;:;:;l1tii\. \(.()4't- '\.'I

\(.()4't- ~ jtft'\.D!.)( (...
1)..>.~.S\ ....u
Do'l:~'WI
n:
i =-
t\.0 ~~r~.;:;:; .;:;:;.l(.()

~t\.0)
~0\.;:;:;t...P.JLO\
~1"'F ~l'vc?\
!> n
l(.().g\LOI '\.'I- .g~-
~ \L0\.;:;:;0\J\..()'l.. (+U..
nn ycnyr:
~ ~~1.f01iil..;:;:;t- ~""'
ol".jOA
M;gl:lt:l.!LSij~b
,~~'1-\..
O~f"D\jO...
'------1"
rs/ nr

.:
'-;:::::=======::.,)
~: l
~====~)
: (
:::=.=======:=::)
~I'>J)'to '\.'I-~~t,-
1"""-w.t.. ~~ '\.A'Ij~OI).
...:!"'---~
~"'-<PDr.'J~ J"'IGOIJ1.Id...""- t-w "'Jrt,e",
.....;:;:; II;J'\.L 'IQ ~.;:;:;""-
.;:;:;~O..gt11X k..O.Jtt,ii\..
:(
n~~v----~--:~======:_~----~
n :
ro.Jtt-j.II. l(,().,..uv
.;:;:;0\r.w:g ~~~.
14wh.I o.;:;:;""f"OI~.Jtt-
-(IG------+...._-t\..'I-
jOIILOijOI.
htl-
afHum:t JI.ff faMemu

n .

<input type"'" text " ... 1>
w6 :
1)o.DI~~ ,...t..V
-:~:~11\J\
n :
,-:gc:\~L.M.M~
~
<input type-" checkb ox"

nw4W yc:.nyr :
'
. 01081(4
0810
ICQT4110f'Q
8 3QICQJO
\ <texta rea> ... </text area>
;; 2
--
.:
:'-;/=========-,)
)
1
=:)
:[:========:=
:
l
~ : ~..-
....J
______
13alfacm. 1
609
og2omo8ka k 3gu g Bean Machine

,
starbuzz form. html.
chapter14 1
. , ,-
XHTML.
<! DOCTYPE html PULIC "- / /W/ /DD L 1. Strict/ /EN"

"http://www.w3.org/TR/xhtml1/DD/xhtml1-strict.dtd">
<html xmlns="http://www.w.org/1999/xhtml" lanq="ru" xml:lanq="ru" >

<head >
<title>Starbuzz Bean Machine</title>
</head>
<d>
<hl>Starbuzz Bean Machine</hl>

<h2>
</h2>
3ju- 'S~LW.
/"I(.071<~
</body>
</html>
D .:. h-Of ~ 1-\. .. 'S11Li1.1

~ j011.{)O.g0"-j.11.
c:..W.rOII-\.-~1:1!. 1- '!-t\.r.J~'\-'\-.
<J>r...
U3 2 cocmoum m < form >

<form>.
URL
, .
. - :
http://www.starbuzzcoffee.com/processorder.php
/'-
~~ LtHZ.(..,~f.Lv
,J!j&t01~ 1-\. V0<.1i\.~

8'/--if'!---~..
...OI .gt..'S-"'f1-A07r<U\..VU...ffovt.JJOfofU.
/"~ 1-\P..\"Dj'\!Uc.. 1-\. 11\.\" vt.r-&.r.L.

. ~1-Jlo71<-U\..VU... ,J?f<Ljt\P.LW.I "-"'"'
'S/"0\'S\.~\. j01"-"'jl1L 'I-j ,V( <!JOf...I
I(.Q.orl1l.L ...l:1t 'S~t.... v~"'.g"'..
610
14
xhtml-op
8u

URL
< form >
, ,
r action <~orm> (
L- ) :
< !DOCTYPE html
PULIC "-//WC//DD L
1 . 0 Strict//EN"
" http ://tnnt.w3 . orq/ R/xhtml1 /DTD/xhtm11-strict . dtd ">
<html xznlns= " http ://www . w. orq/1 999/xht.ml " lanq=" ru" xznl : lanq="ru" >
<head>
<meta http-equiv= '' Content-ype " c ontent=" text/ html ; charset=windows- 1251" />
< title>Starbuzz Bea n Machine</tit le>
</head>
<d>
<hl>Starbuzz Bean Machine</hl>

<h2>n ,
</h2>
method="POST">
, <~o rm> .
.
, : ,
. , . ,
, .
Starbuzz :
t ~~
<1"'-"'" . .L..j "' ""'"
' V' ''"" .....__.., ~-.....
('~t\.111)( ~~
.J"'fDI~.t,.:\ii...S\. A~f~j~
J)
<input type="text" name=" address "
<input type="text" name=" state" />
v v v
~"'.J"'f"'.g.I\U\..'V\..S\.
<input type=" text"
j""""~
"'"""
( "'-~.-,1 v>. ~~ .A.t...t...tu
.J"'fOI:g~'V\..S\ ~~t.,o;;;; ~0~/- "'-DA.t....
n~----
....- zp
...
~
, -- Ot;I'\.O-"'
...;
v ~j
>
<input type="text" name=" city" />
t .."._'tfiWI. .~Dit.. ~""'"'-
1>
~ +-~... u..;;;. .>
<input type="text" name="name" />
/>
'l~ ILDIjotO I>A..SI

~o<;DI.g mn10...t..: 11\...S\/
...;
-,
~ - - - - ~fu-t wl". 0jt ~l""'tU>.

~_____.- '\- .>~O:gi'Ii\. '1v;L-.
~
...;
~ ~~"""""' ~ ~" '" "'6'-"""""""""'"'r

""""-
,'iOitu\.t)(, I)V::.or~ ~.goj~ .>3.g01~. O~r"'""'~
~+'\..1....+'\..~ V::. .gc..t_ 'W( jtU>.~ f~'\-1-\J11..

1....~f~ ILDI"- ~ fDI~Ov>.Dit.. ...
611
Kak pa6omam ampu6ym name

r n :
-,
. , .
r n nn11 n
input
ecn.
name.
q: L-,
. ,
v
/!::.. ,_

<input type=" text" name="address" />
<input type="text" name="city"
<input type="text" name=''zip''
r
Blltl
_ """'""'t...~"
-~t\t... """'' ~""'

~,y...~t...\'\.o'\.t.......D~""'L.
~jt~t11\. ~ (1"'1"'\11..-h
<:f--- ....~";;. '\l\.l'j'\11..~"'6-jt...
/>
<input type="text" name="state"
< ~ ~ J) ;\....J>.~ 4 .;;::.0 ~j"tv\.O..

Oc>.."""''INt... ~\'\.. -- --,
-
/>
'\,..S\.
/>
nn11
, n~t1
~t1, nn11 n~tw .
--
n, , , ,
q:
Submit
(n).
__?
: i~!j ~ .
: ~~-~~~ _
n , n
name.
..... - . -
: :_~~~.!;! -~~~_
. -- --------
: ~ ___ - ------- __
:
fgooso.. -...-....------ 1
- ........____ --..----- --
:s.
~.ltbt\t.f... 11\..t..t
j.lt.SI ~j ~"
add.resa =
~rt.
city
~ -
state =
~
'l''l'
= 900SO
proc:essorder.php
. . _..........-.com
~ ~-"'1"1.~w1 .o'St~t.j"~
~r..t~t. ~tlt.!t'\1\. .....t...U\t. voo~t....t.v..-'-:;~'\l\...
0~/"".)..
612
..;,.~
t -1
ht/-
I}1
jt
]j: <input>
: ,
]j: ,
text <textarea>?
: <iput>
Submit
(),
<input> n
radio .
text ,
. ,
:.
, ,
90050 <input>
text zip,
"zip =90050",
. , ,
<textaea>
.
]j: n
Submit
(n) -
Q:,
value
]j: -n ,
? ,
:
,
. ,

"color"
() "", "
" "".
: .
, ,
: ,
, , ,
]j: ?
]j: -
. -,
, n ?
value
iput
text,
- , -
:. ,
<input> n text
<textaea>?
]j: <option>
. "spice" (
<textaea>. -
) "", "n" "
: .
Q:
,

<input>
name?
<option>
<iput>,
checkox. ,
", .
"spice
= &&".
, <select>.
]j:
, nn ?
100 .
<textaea> XHTML
<select>. ,
<option> name,
<select>
. ,
, ,
maxlength
maxlength="100"
]j: n,
.
: n
n.
613
input
k 3u m < input> 8 XHTML
<input>
, ,
w. IO/\bD
<11'~ 1X'I".tlt
fof. . ..ktw./.
method="POST">
<r
<input type="text" name="address" />
<input type="text" name="city" />
<r
<r
<input type="text" name="state" />
<input type="text" name="zip" />
~l;fl.
/>
/>
<input
type="sumit" vlu=" "
</>
</form>
iV1f.jO~t\.g1.It'\l\, ~"(1
j.. ICDI?.jOtO ......r w.o~l;fl.
.....OAbj~OIW..t...b j+'IJJI/ W.
.g.g~~b.
/>
/>
form . html
14
.g
/"0\~t...I\L
<f'Df...I;II......Oj
tDo~O\.g'\1\,W.b
/>
..... Ojl"u-~>.
W. ~/"OI-\11t'IA
~{ .....W...~ U--'\1\, i)I;II.)(OW.'\1\,W.~ W.O~I;fl...L?.~

~\..'\1\, ti"i"-vcf'> ~I;II.A'\1\, 1"'\J/"11!:111. ~I"O"-""t "f"'jt..W".v~
jO~t\.g~b ~l;fl. tb( / >. \..t...tuW .....W...~-{)0\... W.D\I(.t..
~?.t\.0-g?.~ W<;.g JU....J...~ t/">.
001&,~w.t.. "i"o.gt.y>'II\.W".b c.-.go'IA)(IML--~G.Dj +'1..D1 .gDI'IIIjtU>~b.
H t..
3 ~1;11. <f'D/"..l;ll. W.O?.t..jOA?1(.1'\t. ~l;ftab
"i"~wt!
614
w.~-hxr
+'I..Dij.gOI~
bl;ll. W".OIIG.?.t..jO?.I'\tj+'IJJIW.bJ W. t i"'f-vcf'> -
~t\....~j..
~\
</>
<>
.....0
ICDI ?j otO
/>
<r
<r
tj"i"'\1\,-h:
htl-
Df:1l .t.. tU..jjA~~~ ~ .t1t.j"jV\... .g...
Tecm g
"'f'~t 1(..1)~0",!:1l'I. .g /"U\J\.t\D~'\.. \U..
~ ",~~0~~~ ~ ~~ .stb'\..c.oftu.::)""'
-t.o~o.g "'f~~ .g~~-'1. <fX>I"..:J tiA 0~,.,~~0~1(..:;.
, Ht- :J"'~~t-~'\. .g 00.t\D~'\..!
. , ,
action.
www.s tarbuz zco ffee . co~
~
<fX>I"..A.
Stabuzz
Bean Machine
(.
~",~~'\1\..t.. .gt\.'11\...D\~ tiA ..t'.o,

~1(. 'I..J~WI \ {2(....g "j/"t..Vt\D'\.
~",0\Gt.. ~",~~ h.()c;,J. ~<
~\(..gf:1l ~~AiS'\..~ <fX>r~ tiA
r~c;,c;,.o~r~'\..L fflf:1l ~.g'lllj'\1\..t.. uo
- ~~l"~:J~Ac:-f;o.__).
m,
t88111 1!0 :u.peCJ
Iut L - -
=:.=J
.< ====~
OJ>OJ! '-==---=" '
Starbuzz Bean Machine
Ctpaaa.
Ilo<toal ..:
1 - cel'lac 1
~ ~~ h.Oc:-JLt.. /"Ac;,c;,.o..t'./"U\..11\.S\
..,
<fX>/"~ "'f'\1\.J\.0~'\1\..t...
68u
8 kk m6 < input >
, - ,
, ,
. ,

<select>. ,
,
. , rr
. ,
n . ,
<select>.
~
61 5
:?~"-~"N-Im.' ~ ..,
"'
68u
< select >
<form action="http : //www . starbuzzcoffee . c om/processorder. php" method="POST">
<> :
<select
. +\.'11- +\.0"1:111!:1. ~ (Jt./-:h .
.~ J~W..L 11\...S\.
name="eans">
<option
vlu="">
<option
vlu=""></tin>
<option
vlu="s"></tin>
<option
vlu="" ></tin>
</select>
t ~./" .t >~it... ~11t.

t@.jOW t.-0/"~01
</>
cec</option>
(o/"-ho.v -
> ~1-\.0.Jj.ILSI
IC.O<J't-
no : <br />
<input type="text" name="name" /><br />
: <input type=" text " name="address" /> <br />
: <input type=" t ext" name= "city" / > <br / >
: <input type="text" name="state" /> <br />
: <input type="te xt" name="zip" /> <br />
<>
</>
<>
<input type="submit"
vlu= "
"
/>
</>
</form>
<op t
t@.<;OU> ~"' or>hOIN ~

.J
c.-f>ot..jt\.0\t..~
~1..t..~I ~~..
<option value="House
ion>.
~ t@.u...n..--&_ "-j~OI fOIU<fl11:01~t.:toc..

~~. J
lnd" > cec< / option>
~01 <&r"'1' J"-D~IC.O~I11:"'~ ~

\11.. .)....U\."\II..S\ ~or..11tr ~ ~~
11\... ~I <J.t.}u.:/-'> ~~t.. t.-0
j....U\.\1\..t... ~~/"011-U\.D'to ~\
ol"-ho"'"'
l::-- jOII-\.IW. t.-jO\t.. a/"0\:'J)t.r' .1~

~~1-f,;J f>t11joMKU\.\I\..t.. t..~ ~ .U.\~
t.-..t.L-
htl-
ecm g m
< select >
, <select>.
r, ,
. , n
.

rn,
. <fX>I"JJ\tjO....OA~
~. <Jt./u...f'>. 0~/"0\.'\..L
i~1A.JJ\~ .- +U.... ~ ic-t..
~n~~~~.~.~~--~------------4
n. . ~<
~ fu~~~~K~~!i.IIIIIIIIIIIIIII~
G~
: ~'!:! - O><I!Oro .
. -.
>. :""
ciu
=-:...._-==
J( ..:.90::.:115..:.0'-----~--'
1 1
Starbuzz . Mach111e
ft i>!lp//..ww.sta.ri!'J coffu.com/processorder.php
tv'1111. ~L +U.. "'f~~Dii'I..II.'I.
-~ -"'f'I.U\.-11\, i- t\.W~>j'I.._}IO
L._j 1\.<f>/"JJ\~1,/ N> DN> .... ~oo.Wu..'I.

..L _}~ "f'\I\..+I.J\.11.0 ~jOI~
IGO.0/"11t.t.. ~11t..J\.1. .g~LI-U1t- <f>/"._}.
Thanks, < :J, for your ordcr... But we didn'! gct your i: of eans
or whelhcr lhey are whoJc or ground. You mighl wt click lhc back buiiOn 10 go
back d !!' agaln, olherwise, we won't \ makc your ach!nc ordcr.
d tha! would suck.
Herc's what wc reccivcd from you so f.
.;; I"<XX'"'"'"""-&.aor / (
<s<iu-t>
. jDI~ -~~
- ~o-11Lt.-....o.IU\.
: !! J:t
1:
1'
~-:
: ~:~ J:t
r : n-n
/~
: .
.: 90050
,
!
11
1:~
[:
name <sel ect> themeans.
. , -?
, ,

beans.
pegocma8me kAuemy ,
m mu k uAu k 3
,
: .
.
: .
<input> radio
XHTML
no
n n.
n :
,
. ,
<>n:
<r
/>
<input type="radio" name="beantype"

<input type="radio" name="beantype"
</>
D N\ .U> ..t
w...~~
<;"f~ \11.. ~~tt'.....g'\....jNI

..u...w .~ fo..ol;o.
3ju- t..-. j..gt .,.~

'"'-'t.Jc.J\.IOt~: ~t\.0 jNI IU)cpt..g Y-'t'~tji":JU>L - jNI ....-:;01.0 \(.I)<Pt-
value="epa"
/> <r
value="oo'l'I" /> w I
~~
. lt\..."'\..I(.O\AbtU>t..
1...SI. DVt.. .,.oot..tW~..S~
~t\.O"'tO '"'-'t.;(...f"..:.t....s\
11\...U<)..-:; ~ t\.0 1...S\.
1>. jv....D~t..t'..-"I-S\1 IU)"'-ol"l1tt...
~:ri"..:. o"..:."'f't..g~
..gtl)-"f"\1\..AOt..t\..ii\..IO.
f1"\1\..t.... o."f't..g.l\..t..tW
~,j_j~ .\(./) ~t\.0 ill..j t\.W(
(w.o1 \(.1)..-:;ol"ot... {:~l"t "1"\11..
"f'!J~f..g~\11..\11.. <fX>r..t.
rt.....ow.rt..t'...'W..) .
/>
o~rt"..:.~.._
..g'""-'\I\...WI'~-;w1 ..-:; jN1
'"'-'t.Jc.J\.IOt "..:;t_.ltt..:\il_
~1(..\1\..t~
~t..g..sl"'-v..s\ c...rt..gt .
vt.DW ~t.
xhtmi-opl
Cmuu3au nkmu

L-, ,

<select>.
, ,
.
Suru:<:< n Machr
~ lile:!{Jcnapttrl41Staruu/fotm.hrml
Starbuzz Bean Macl1ine

n
n ,
c.IGO,......_.g:t.Of ...ct-..t.. ~~..t..~-\.:\1\.
{jj~eana:___ _ _ _ __,S.,.
"'
v.ro..~I tl..t... ~:n~ .g~ro.. t\;\1\,

~1'\D 0\.C.O-t..t\.W... "-'t...Lc.JI.IOOt..t...IU\{
. ,)Ot..g"\1\..(,"11\..o . .Cft.Of IU'IIGO'Iil.
0 .
-r !
'I
"~ .gt1t 11\.v0~
no
[~ R J
~.~ J
~~nec -:=]
-r. 1 w
11 u : ~511 ._ _ ___,
1 i!> R 1
1.0! ~cpt.. Jtb'\1\..+t- "1"VI..t\.o t\~ ,JOt.k,Jr >..
.l:1tj0t.t.. tl..t...,jOt.-&r~VI..AVI.. f0t.~O.t1t 1-\j </'Of.O'\i\..

... .g.. ~~ +) jO~Ot..g"ll\..ob (,.g~~
...CjOt.fO'\i\. ~IGO.gld.... V\. ~t. j.1U1 .g.g~Ot.

IGO~Ot./"VI..t...g IUI.~O.g.
~

Thanlcs, . for your order from 1 Swu2:z Bean Macbloe.
our onlet of whole Guarcmala has n
~1(.. t.. ..t.0 '-A:J"II\..obt-9.{ . ,)Ot.IU'I,) ~11t. ~~~

1'\D "t'V\.t\..{ Ot. t\ </'0/"..t.. t..Wj- tl..t....g_. ~t1t~
'. ,)Ot..g"\1\..(,~ . .Cft01 IU'\1(.. ,JOt."t'O'lf'Ot...'\1\fO~
scnt :
lia:rpy
:u
-..
CJJ.J..A.90050
.gOt.+\D .g....a~"t'V\,AO~ Dj0t.+U-\J). (,~t.t.. 0+\D
I\JI\v.rot.. 1\J)\ ~r...'</ ,)Ot.IU'I,)Ot.jOt.~.g ..

t-~t...., t..t-VI.. .g~ t- ~t.t\t...1.jOt.~VI..
t1..t...
"t'~wr;.o...g.At..t\ ~r...Ot.~V\.9. ~o../"ot\D1A.
~......O..IGO~~ IU'\.Ot.OU... V\. IGO~Ot./"V\..9.)( IUI.'I..t...+v

.Ot.. .~t1t ;'1)1\J1\.1 IU'\I(..W... ~ ~t1t
<f'Ort. .rtli~."..g....a~"t'V\,AO..t....t\WO' ""foc-V\.~

~ ,. /"'\jf'Ot.~O.'\I\.Ic.D\ V\..1. "t'111..t.'\..;;'.t..
.g jO'<J~Ot.~VI..V\..
. ~
619
80 ~
.
, ,
n ,
no
n n
?
.__.......
checked checked
radio,
. checked
<input> radio .
i nput
nu
.
:
,.. -
>>
Do.<>.~JI <-......
.
_,
u~(Jr ~:'~' ~
jOC:.~>t-,1L...11\. I<.AW.I>t~.
~
~ ii'
n1111w
'PD\Qjt.. t<D~~t\tt.. :j".:.>
):,~ 1-jj-,:t cp.i)II(..()~: ~~j.IU\

v...Dji>./"O+U>i.. :jv...OII(..()~IL...'I./j/"jU'LC - j.IU\
DOA'III.~
n:
(
/
1'
~t,...,.$1/ cp.OIOIL... t<Doc:.OI-,1< ~<W.I.~
-,..t..Vt.. , jDII<.AjO... jO.A.t..t\.. ~!11.>

:jC:.I>.+U>~.A.t..t\.. v...D :j../>,~11\..
[]
'
..
~ ~...
~
ycnyno:
~~ -
:Q81 llaQIIora
:n.
-:
~ tftxr~>.~>.
:'-;/===========-,)
:
:l;::.======~
8 ~ = ._/
'PDijjt.. v 1(.0~ 01/"'W\..'111"-~ 0-, - w. "'f'oC,W.o
>01<4JOM
no
_____--...~
xhtml-op
66u >kk
u 2m2 mekcmo6o2o n
, : L-

form. html.
<form action="http://www . starbuzzcoffee . com/processorder.php" method=" POST">

<>
<select name="beans">
<option v lu =""> cec</option>
<option v lu =""></tin>
<option v lu =""> </tin>
<option v lu =""></tin>
</select>
</>
<>:
<br />
<input type=" radio"

<input type="radio"
/>
nm=""
<r
nm=" "
="checked"
/>I
</>
<>JIw yCJJyr:
<input
<input
type="checkox"
/>
name="extras[]"
name="extras[]"
<r
type="checkox "
vlu="" /> ynatcotca<r

value="aaor"
checked="checked"
)'
</>
(V\11t. ~,).1-- 0\./"~~.
v~/ .~11t. ::f-0\JO\.b/ . <f'\~ ,13V.0\-1(J..

~.\W\ JOA~ ~~ ~V.\-.1\..U\...... -'.\!-\.W. D11t. .t..>t...J0~01-~
01./"~~. ~ "/"0\jjJNI 1-\J...(.)JI.b~W( <f>i-.
<br />
<input type="text " name="name" /> <br />
: <input type="text" name="address " /> <br />
: <input type="text" name="city" /> <br />
: <input type="text" name="state" /> <br />
I : <input type="text" name="zip" /> <br />
<> :
:
\l
~~'\I\,JJ\~t...
~IOOI.t..t...1., ..J1t
/"0\j..t...'\I\,JI.'\!\,
~~'\!\, <-:"1'0\.gt\ .
<f'AO\ I.g.
<> :<r
/>
<textarea name="comments" rows="lO" cols="48"></textarea>
</>
<>
<input
</>
</form>
/>
/>
{V\t ~~t\JI.'\1\,/ . )(.'1.. .~11t. Ot\D ~11t.J\.0
/10 v1...-:g- 1:\11t.V0.~ '\!\, '+8 v1...--- ~"VIf~
3a6epwauii
mecm
. ,
nJJ n
hn,
Do~ ~ ~.g~...~~t.....-t..
1
"'f'j;;"'.g~ ~/"-01~111.111. ~
Tn

I""'"".O~/"t.t\.'\1\.t.. D~-"'f111.O~
wl J
"-~~ .gt.f...j01\U\tt.. lf'<>l"~

111. ~bjO.gMO '11\)( ~ ;;/"01"'-~t..
8tR J.11
u ynaoau
ot"t'III'DDrUon8WCC'eCJ:DOM
ornuo..,.
"~.. ~'j~t ~ .L>t..

~"\.~111. ~ 1"\.1.."\. ~...jOI~ 1(.0.;(:.0/"1111..)
no
..,. f-?~.
.. 1
Al;p '...!f eJOII
~"'- <i'<'r......
.: .}!~- -~
r: !w =--
~w~
:=J
~~~--___j--,
SUrun ~an Mactnt
ICOIIIttplt JCI(t:HT08

hanks.
U>< . for your order... But wc: didn't get your

i: of eans
orwhelhcr lhey ~ wholc orground. You mig/lt want to click t bllek
uuon to go
and uy apio. olhcrwl!e, we won't : alllc 10 makc: u n 1:
Ol'der,
and lhat would suck.
.k
Hc:rc's wat wc: received from you so far:

:
..: ~ !I
: !l !I
O"'fO~~t.. ~bjO.gOI~b
~'\)111.t\tt..I~WV\~111.111.jOI~
~ lf'<>/"..t.r "'ftjDo:tAt..O"I. ~
/"0\-v.~~ (- ...j011"1.
~~1(.0"\. 111. ~t..j ........__, , 1(.0\~0\L.
111. ~t...} , /"'\)1.~1. <-/"~\.111.1<f!t..
111. ~-j>t 111. .,.(),)~/"~ """'.gt.f...
~~~ /"01~0~0\~.
622 -
14
; -.><n
: aJJ
: 90050
xhtml-op
. .
. nn

extros[]"?
!
w n ,
extr as[]-
~t n n
n .
, ,
~ t'J, ?
XHTML
,
!).
?
, ,
-n process order. php,

n , n

. n,
n. -
[] .
,
XHTML , n
.

, -
n .
n -n
.
623
ora~omaiime
~ra~~ero
u JJfUBeea XIL-fora, cnraa - me

. Komo_rle Jl:m. Dama
c:r:I1IOil f SfaHefoM u IloanaBurn
coomBemcmBue 9 uu J: fofM
u, Jl.:m. DJ11u m
ru, "I1foBef1ne u 1 u I1fU,
1 <form action="http://www.chooseyourmini.com/choice . php " method="POST">

<> : <br />
:
<input type="text" name="name" /><br />

<input type="text" name="zip" /><br />
n :
</>
<br />
<select name="model">
<option vl.u="n"> Kyep<:/option>
<option value="xynepS"> S</option>
<option vlu=":rJR">
</select>
<> ?
epxo</option>
</>
? <br />
<input type="radio" name="color"
<input type="radio" name="color"
<>
vlu="."
vlu=""
/>
<br />
/>-
</>
<br />
<> ?
<input
<br />
<input
type="checkox"
name="caroptions[]"
value=" .rao:ren"
type="checkox"
name="caroptions[J"
vlu=" l" />n
</>
<>
<input
</>
</form>
type="sumit" value="axasan "
/>
/>
htl- .
hnp://,vww.chooseyourmint.com/
: .!:j .
'9ii050
. ?
' Kunep
-~-
-----..lii.i.
"
0 ii
-
11 ?
0 i! r.
.
1 .J.t cet:~ue.c 1
ow;:;~-~t.. .g voo~-~c..."..,--vu..
~jO-J "- f~. t:z.c j..A.t...t\.VU..
11\. "-~~ .... --11\. o~-~11t ~~.
name = "akkapy 3u"

zip
model
color =
caroptions [] =
625
get post
,
nn :
POST
POST
GET
GET.
-
.
.
POST
GET ,
, n ,
URL-apeca.
POST
- ~/"t..L+W'Ii\.
~,.,OI(,.t,.-s/"~01
http://www.headfirstlas.com/contest.php
-0\..... jOI"'fOc-t.. ~
1'\..'\JU)\1(..'11\.)( j/)\t\A'\t)(
lf'Or.t
GET
_,
...OAbjO..g/J\.-:;t..Ab
~..g'lllj~ .-::.((.() tfZ.l..
..g~-"'f'1A-AO?t..t\..'III..SI .
f1"""- ~AbjO..g~"'-""-""- ~~01 CtE[jOit\\.1:1t.t. lf'OI".t.1 o~/J\..gA.S\.-::.c-.51

"'-~J~.....~ t 12-L--~rt..v~ .-::.01"' .-:. .-..ojo..g/J\.-::.t.JI. 'I.)(.g"'6~
~1
o'S,.,/J\.-::.~t.. ..g""''\...""'~
.-:. j 01t'U'I1..t.. <fr.t..1o'S01:g-
.S\.-::.-.51 ..g ((.()~ t~
~,/"t..c-0\. .-::. .-:.1 .-:. .-..j-
1r01.-::.t.. ..g"'6~ ..g ~/"t..L+W'Ii\.

~rol(..t..'S/"~01
http://www.headfirstlas.com/contest.php?firstname=buckaroo&lastname=banzai
626
14
xhtml-opt
u GET
npakmuke
I"~ V\Q~'IIU.t..
,
.
form. html
GET,
~~ '-' 'POJ(
CtET
l--
<form action="http://www.starbuzzcoffee.com/processorder.php" method="GE'l'">

;
. - :
--
.........._
~~-
C/UA,I>OOJ()
'wlk)'OP:f~'!Od~"'~\\oto~f.CC!nt
012r8C88~'*IL YCIII.tllld,
http://www.starbuzzcoffee.com/processorder.php?beans=Kenya&eantype=qro
und&extras%5B%5D=catalog&name=Buckaroo+Banzai&addres=Banzai+Instit
ute&city=Los+Angeles&state=CA&zip=90050&comments=Great+coffee
l~ ~l:ft ..L\t.. ~'\1\j~ ~ I<..D\jOW

~DI <f'/"!r
0\
1'
.;;::.0\~-L t.:U> 3t'\J)\~ "'f.!\ ..
3jL'-'( ~ tA 12-(_,."'jl"t..U....
Bo:JJfoCt
]j: n
n
POST GET?
0: ,
]j: GET (
. r ,
,

. , r

G, - r
-,
r ,
r .
n), , , n
- ?
URL ,
0: .
GET,
r n
, n
S. ?
GET, n -,
, -,
, r
? -
GET .
. ,
<textarea>,
URL-apeca.
r r.
GET
POST,
, -
256 .
r , r .
r .
POST,
, ,
POST
627
css
: n CSS r
, Aenan r .
css
CSS, ?
,
?
? ,
.
... , .
,
, .
, ?
, , ,
- .
,
, .
- ?
. ,
. ,
.
,
.
, <<
>>, CSS.

, , ,
,
.
, ,
,
.
,
,
,
628
.~ <. 14
xhtml-opt
css
, .

.
,
, ,
, .
.
, .
,
CSS.
<div> <span> .

,

... ,
.
XHTML?
<tr>
<td>,
, ,
.
, .
, ,
12. ,
...
L-, .
, ?
, ,
.
?
... , ,
, -
, ,
, .
, .
.
? -,

...
?
i"J
,.
629
get
post
GET
POST
GET,
POST,
. , , .
.
GET
POST
!,; . 888 1t 8. 1z.
GET
POST
!op.t1ta .t1t-88.
GET
POST
!,; 8.
GET
POST
,!t 88 ' '?j.
GET
POST
!,; <tu. (;,; U. 88.t1t

8''.t111J 'O.t1teptj.
GET
POST
!,; 88 8.
Bean Machine! q
.

,
8w6cp1'C~ r~~ --=--~
...
O ICoea:sepaa
..vl.-.<
oat.~:llJt''tJU.JfWeye.aynt:
O IIo.-illpO"'.I!I-"' JD8XOSICI
sn xauon w: s
tm. no ~';
-~~"'~
A.qpec
ropo..
~~~;~
n-~.
Ctpu"-~~-:===1
II~w IIU~ ~""ciOSC=--,___-__.1-'\
CSS?
ht/-
UcnoAb3o8am m6u uu m
, , ,
.
CSS
? , ,
? ,
CSS .
CSS, , ,
. .
, , CSS ?
.
pa3emku
, . , n , ,
. , ,
. ,
.... 0 v._ ,01'S'W:\~

.<. ,.'\.\..) ~"""'
1\A_o'i '
:\. '\.\.~jt(S..x ..'Sv..
~_
..!w:r
Start>u~z 8en Machine
,.. t
~m ~~ t\Jt:///cll&prtrl4/statt.lu/sr~tdfotm.hrm1
t..<.'\.\. ..~t~"
~ Oj+U>'\11..
1
~
'\.\.=----
j! IL.OI~jOW ~
1'\.D'W
01
UlOI
J5
<!JOI"...lfl.
.......
~-+- 0~/"0\.V\.~ -+-\-11\..f\..l.t. "'-
n 1111 n
r:
t!!
JOKOW
~tx.A.IOOI"'-t..b 1. <IJOI.I(.V\.
/"01~U\!.- O~b+<..I1D(
~~:
.5\t..~ .,j01~1..
:;
no
:
q ~----~----------~
--~
n,.,~ !At..iNt-01
j! ..r~'\.
(., 1'*\.0""'-'>'\.
301IL.OI.)OI.<.b
Ht..w. ~1(."'7
~.j"j
~~+\..0
.~L~!__________J=I=a=~==e=~=A=~~~----------------__j
~~~
~/"Uj> UW.b 1>'\..S\"'-b ~-
<'1"1.f> ""-~
+udf. "'-011(.
"'- t <t'j."'f'-1.
~ '\. k.......;;;.'\.1.- fj+y;
..,'\,\V ""j~D\.
j\. 1> J"O!Jjt..ll.t.. <D"""-1."'- k..O
-~ "'-I~~.
?>~ "'-01~1.~I ~
"'-OIIl(JIO ~ Ot-N>-j /"~'\}M..t~l(.'\1\,
-: '\. "l.AOI-.... "'-OI~~OI:j-~

.__~~I 1. 1>'\..S\"'-b """l"o~ k..O
~+\..01.
"""roi(.;Lj.ILSI. I(.Oi.jo1i\.. vJJ\1"1.11.
<~1(.01/~.

631
: '<
3u m m6u
, , ,
Jorofl
X~-KOJI.
L-. ,
!
. . ,
.~
, . :
1"of""'' ...-
styledform. html, chapter14/ starbuzz.
, , r.
, .
t\.L
~~....~...
W.j \v.
{, w.""'S\1\-~-
<fo:rm action="http://www.starbuzzcoffee.com/processorder.php" method="POST">
<tale> ~ 3j.- t\.J)\\1\-t\.1)\~t.-. ...'S~\.

<tr>
<th> xoe:</th>
1, IW.~joii\. v.ro~a- .-{~
<td>
~I 4f..l:lt.
<select name="beans">
<option vlu="">R cec</option>
<option vlu=""></tin>
</select>
</td>
~j l:lt1i\. fOIJjUL 4'0/"-t11.
</tr>
~0\j~O\~t.-. .g O""jULb+->1i\,
<tr>
c.v;:,/" Ok.L
<th>: </ th>
<td>
<input type="radio" name="beantype" value="epa" />
/>
<input type="radio"
<r
name="eantype" vlu="I"
checked="checked" />
</td>
</tr>
<tr>
<th> ycyr:</th>
<td>
<input
type="checkox"
<r />
<input
</td>
</tr>
632
name="extras[]"
type="checkox"
name="extras[]"
~...'S~.t... ... j{t-.t-1.1\.k-\1\-.

--- <ftv j. .;_..;;;.~\1\- \1\- >i) - j.
value="xaano"
checked="checked" />
ht/-
<tr>
: </ td>
<td>
<input type="text" name="address" value="" />
</td>
</tr>
<tr>
<td>A,pec
<td>opo:</td>
<td>
<input type="text" name="city" value="" />
</td>
</tr>
<tr>
<td>Cpaa:</td>
<td>
<input type="text" name="state" value="" />
</td>
</tr>
<tr>
<td> :</td>
<td>
<input type="text" name="zip" value="" />
</td>
</tr>
</tale>
</td>
</tr>
<tr>
<th> :</th>
<td>
<textarea name="comments" rows="l0"
</td>
</tr>
<tr>
<th></th>
<td><input
</tr>
</tale>
</form>
type="sumit" vlu="s "
/></td>
ecm g
8 Buge mu
s tyle dform. html
. , ?
,
.
CSS,
. , .
tv\1:11..
v
~1. -U>~~ v."\1\."'-7
I::Of~'\11.. ~1:11.. ~?L >f~ Jt\1)1\~-
" ,n..-;. '\ll..jO~D\~1.o
t\1)\"1'"\1\...t.f '\.j,..U\..1. ~ ..,.. ...
4><>~(11."\. ~~....
tv\(11. .1.'\11.. ~(11.

..gt1tt'~IV\"'-b ..gc..t..
Ji
~1(."\1\. ~ ~0\..g..,)
r,
~0\., "'-0~(11. 0~"\1\.
"..>/"0\ 01v..,
~t.r'jv"..~
---?(
01J0.1111
~'j ~D\.'\11..
~/".l1t
I
k.JUf808:
____~__~--~------------------~
HDII~.~~D\~'\II.... ~~------------~-_~
~v~O~Oj~
""fov.I"DI"'""""'..g 01 v.t......gD\ -"
<rt.
634
14
htl-
Cmuu3au
u m6u
CSS
L, .
- Starbuzz,

CSS-op,
starbuzz. css styledform . css,

Bean Machine.
S5-.
: .
th
text-align : right;
vertical-a lign: top;
padding-ri ght: lOpx;
padding-to p: 2;
td
vertical-a lign: top;
padding-bo ttom: 15;
~'111....0.L .LI...I(. . .j01tu-\.t.1.. ....0 _j...\t\..1.. _jL .g!1tjc>O.gt\..U-I.O ....0
~ .,) ~.. . 1.(.0\1(.. roo.o .1 . 1-\.t\. tU...Oa)(Oj1ii....O. oj+\.t\1(..0 1-\.t\.

w.O\I(..L ~+-\.D .g~O.g+\-1\.b 'W( 1.. .g ~""'-1..IGO\Jtb+-\.D- +U\"-f'O\.gJt.Lt\..1..1..
.. Ot\..11\.. .f01\Jt1..... 1-\.t\ _:>)+-\.D- ,jfO.gti.L . . jorl.OJtO.giGO\-11\.. .oo.a1~l1L

3j.Lc... -/ ..LjOaO\.gJtL- +U..i>oJtb~1..L ....._j~ .. .Ljj
C...W.f'OIGO\-11\.. abl.Jto c....goa~N)L ..L.....
3.1..j-.oo. "'foo..g1..Jtoo. ~w"'f'Jj.LJt""'- t\..LU..O.orli!L c....gov...t-.oo.~ I(..O.ori11L
tale {
border: none;
padding: ;
..j~\Jt1.. .g~jJt.!l ~.g too.b/.t... 1.. to/.
td {
text-align : right;
padding-bo ttom: ;
)(.I.. ""'-. "'f'O.L~,j.I(..'V\.. .II.i.-jj LL ..t...1.I..\-'V\.. abl.Jt1.. _j ~-tr

.....-,j ,Ja1f0\L- .....,jh'!. .. ""'-0\I(..L ~~N) -.!1tjc>O.g+\J\.b
.L""'-I(..'V\.. <r-~.g .S\L~.gJtO~~v._ ""'-aJt~bl. ....0 'j"O\.gO-,j
~0\ (ot\..11\.. 1'\.L ~Jt.S\IO.C... jorl.OA~IGO\-'V\.. 0~+-\.Dv._ .OiaJt~~ IG0\1(..
oC....O\Jtbt\..111L j01't0Jt0.gl(..11\..{ .....-,j 1'\.L ~. .g!1tjc>~t\..t.k\..bl. "'f"0\~1..JtO..,
tale
11L-~ 11~-,j
. -/ t1.L )(.I.. .. _j .gJtO~~v._ .oo.aJt1..~bl. ~bl.AO\ '1-f't\..11\..~0\{

0\
tale tale
,jiGO\j01U\l1t... :g~).
~
635
ocAeguii mecm
< link> <head>
styledform. html.
12 - starbuzz. css
- styledform . css. ,
link : starbuzz . css,
styledform. css. ,
Struzz
.
Starbuzz
Bean Machine.
...t\... ..""'
, u.....
or...D\ "..._
, ~ ,
....."...... ~
..t\....~ w:V\..r;;.~ JtOt.-k111..~.
Sta.rbuu 8ea.n Mach>ne

~fil~t:-1/~/c~ha-pt-tr~H-:-/s-,ar... ./styftdlorm.html
tv\t.,.$,11\,
~1f'~~
... .:g._")(~
111.. "'f0\~0~ "f'...
~:g
<rt. DO!U>JP.r.A
....~ '1'~
V.P.t\.O::g111.."'-v.A
r r O rnpaer, r
r
r :
n :
~
- -,{'n
~
0 MOJIOrt>I
n" n
n<: El ~
--.a+V~o..-:.t\.0, I"-
: -------,
~\ "'I"-...~
~~
: ~==:.::=:=:::::::::~
o..-:.t\.Ov~v.A .
l :
: ~:::::::::::====~
nr.t.""""''\.
..t..'!::
KO>IMSHHtpI1
.:
.'? 14
.UjjU....
~
.s>.t..'\I\.IUI\...111.. ~ t...
lOt."- "1"0":.)0~0
~v~....~1.t..
f'O\~o.r;;.lil ...:
"1"0\~11\,( "-0..-;;.0f lilt..
OVt\..O~t\.0'\i\.
,r;;.P.~~I1t.
~~,..:g"::jr
636
~ 1fP.t\.."'-'Jirtr
111.. "t'..t-~."-111..
v~o'V\.c.........g-t>.
..-:.~~11!. "11\.. t\.0

.:gA'Iii..IO. ~ U....
11\..~f'~'II\...
-.._ ,r;;.O\~A~Iil
~t..O"f~t..A.s\IO,r;;.
1'.1 v.rOI...'\i\..
~ +U..'li\. '\1\..Oit.."'-t-.A
~..t'$ "'fO":r
o~,.O\.r;;.~
~~~.
~~~'\..
1 ~ 8 1
xhtml-op
m o>kem Bxogum
, ,
, , , .
,
n1
<fieldset>
<legend>
,
. ,
<div>
CSS, L
<fieldset>,
<legend>
~ jit..io/sd--> O~f:j?.Oii...I +U>.'SOf

~o~i"'i"~
<input
<r
<input
value="co"
'
/>
'SfO\jJt'/:1t o...-:.o'SfOI?I<.OIIO...-:.
/>
type="checkox"
<r
'SrOijJt>L ~1:1t
tJol.sc('IA-/~w~IJt,~v::.
...-:.oo.l(.. D1:1t ;J~1j~~ ...-:.
0
0
~ </~W> j~OI.i...<
~I(.Jj.IUI ~c,L1i\.. 'Zf'J"'-1-..t.
<fieldset>
<legend>Condiments</legend>
<input type="checkox" name="spice"
name="spice"
value="epe"
name="spice"
value="ecox"
/>
"\!\..)(
"'""-rOIJM...J-
/>
type="checkox"
/>
</fieldset>
n
<label>
XHTML
<lael>,
CSS.
...-:.
'S
/:1t
~0 ~01...-:. ~ </.>1 .....
jO'SOI~b...-:.L 01...-:.f~J...-:. io/~ c,~o1i\.. ~ <fX>f...1:1t

<lael for="hot">opo</la~>
<input type="radio" name="hoto
ot"
1 ;J...I+~...'I- ~I(.'I- +~...'I-L...
...-:.'I-i...-:., .-:. o'SI:1t+-I.J)"l.O

...-:.~01. Lc,A'IA- ~~...-:.~
jOI+U\ ...-:. , 'I-...'I-{ .-:. ... ? L+\.
+U...
,'I- 'IA-j./..Uo\..'IA-...-:. ~~+~...1-1il..
~1j ..L.iV.OI(..
value="op~;..
~
value="e"
id="hot" />
id="not" />
<lael fo="not">e</lael>
~ 3oo....-:.L...jo'Soo.~...-:.L ~ </oo.bJ>
1- "'f''1-c,.go1i\.....-:.L LW oo....-:.f~J...-:.J
c,oo~.i...<~~J;]LL
fof
1j~~~ 'I-D+U\..OL 1-...>1.
Dl11. ...?.i...IL
1-(,.)J.~I...-:. J>
jA>'> 'w ~ 01
<r.t.
<input> n password
<input> password ~
<input> text, ,
. ,
,
, .
:
- ,
. n
n.
~~ <i~oYt>"\1\.f> W\1.h.D\ JDO\J8WO(ofiDOI~OW\O\t...
1
'
W\041-\..0 W\0\1(.. '11<.'( 1(..011(..7~ <i"'f"\1\.f> W\V........
f,{
<input type="password" name="secret" />
+txf{ jf>. V\.(A(.JI.I04U\.W...... W\(1U){ 4W\o ~{

n <input> n file
n i
I(..OW\ort~tif.... ~111.~~~"\1\.""''f o"'~"Wf>ro~"'~

nput,
. -
,
<input>,
~ [...
file. <input>
,
~ow-. ""'"'"-~tz..s~j~ ~
~"'f"\1\.t W\vu- {i/t.. .g f'"'J"\1\.t\t)(
, n
f'Dt-f'OIX.
. : -n
. ,
n
<input type="file" name="doc" />
POST.
f\
w-.o~tlt. ..~01W\ ~ i"'f"\1\.t W\v........

fll'f "f.- ~\(..0\'1/<.~t..W\oW\ ,.;;."\1\..h...
multiple
, n n
. mul tiple
mul tiple
<select>, n
,
. n ,
(
Y"-"'Jt>..g ....r"'.-....r
-v..lkrlt-r ~~n
..t....t.. .g~f'"' w-.
"f"'.)j +....I(..I(..
, n ).
~+\J.(..W\O.g AU..+U<>
~I-\..O.g/"t...t..lv-u>.
Ctrl (Windows)
.
Command
() ,
name="character" multiple="multiple"~
<select
<option value="Saxxapy">a.apy </tin>
<option vlu="-">w -</ option>
<option vlu=""> </tin>
<option value=".epc">w:l-.epc</option>
<option vlu=".">. apxep</option>
</select>
638
~<"i 14
~~
__ LL. J
r... j 0 01 .t.. "'""'f' ~""' ""'IIT 1 f' t..

.. jt\P.4U\.W...... ""'"\1\.1-hrlt-r 4..;;.o~t1t
"::"t.O~f'"'JO~OI..;;. .u<> v ~I-\..Ojt\.IJ\4~
.g~oro.. ~ ..uuo v ~jt\.IJ\4~

JJ
<
~I:IWO~aO...
ht/-
<form>
action
<textarea>
URL-apec -
<select> ,

mthd :
POST GET.
<textarea>,
-.
URL-apecy.

<option>.
<option> .
value
<input> text
POST,
. ,
, ,
<textarea>
<input>
value
Submit
(),
fil.
GET
<input>
type.
text
sumi t
-
,

;
.

CSS
Submit ().
radio
. , ,
.
checkox .
,
.
. .
XHTML
<fieldset>.
<lael>

, ,
.
639
)lr
. .
<select> ... </ select>
Jl
Do..DI~ .,.J..U.-
<option> ... </option>
15oxt:Kvl
<option> ... </option>
~\ W.LP.JLO\
<optJ.on> ... </optJ.on>
~1..S\
<~ion>
J<input type="radio" ... /> _}

l<.L'pU"C " radio" ... />
,,
\<input type="checkbox"
...
/>
rir<input type="checkbox"
...
/>
L_j<input
type="text"
: U<input type-"text"
l <input
...
/>
...
/>
= <input type="text"
...
...
/>
,<inut type="text"
...
/>
type="text"
/>
~ :
-.
01.. 1-\L h.~~~.- ""'
\<textarea> ... </textarea>
111
1111
1. 1111
-~
~<input type="submit" ... /> ~
t>
...
:
>
...
::
... </6ption>
ht/-
name
"6akkapy aJaii"
zip = "900SO"
~~~----------------
model
" omkug "
color = "uAuiickuii kpacii"

caroptions []
="cnopmuBe ug
11
~ ~ F<
Peweue
"
GET
POST
GET, POST,
,
. , , .
.
GET
6sv
GET
!. . 88ofJa ,;, .8.. ...

Jl!opta fJ. at<aJa otnan-fJucl(()8.
POST
Jl!07ta fJ. 18.
GET
Jl! . 8 88 1 v.
GET
C!OS!)
Jl! fJ. nO.?j"tCl.ll f wcyfJapcm8eoAt1j

t oAt&p?j
GET
Jl!.! fJ. (tmnpa8u cmzu8o8 .8.
641
.
, ,
jleette
ntt
.___ ~-J< ?
checlced checlced
<input> n radio, n
no .
checlced <input> n radio
n . n .
"'- "'1" 0 ~ 0 1"0\~t.. j.IU\ <fX>I"t
~1i\..0\ ft>;.-...~t...../.
<form action="http : //www .starbuz zcof fee . com/processo rder . php" method=" POST" >
<>
<select name=" beans ">

<option
v l u= " " > cec</option>
<option
vlu=" "></tin>
<option
vlu=" " ></tin>
<option
vlu=" " ></ti n >
</select>
. t\D..g11t.'li\.. ~>."'-1"~-J"'-l 1(..()"'-ol"'li\..
~~0\t\.0\..g.ll'\i\....g~ ....t..rt..k.IOO\.t..b
.g h.O.I\.0 ~11\L < tv\oo"'-11t.'I.\C.O<f't-'>.
</>
<>:
<br />
<input type= "radio" name="beantyp e"

<input type= " radio" name="beantyp e "
</>
<br />
<input type=" text" name=" name" /> <br />
: <input type="text " name="address " /> <br />
: <input type="text" name="city" /> <br />
: <input type=" tex t " name="state " /> <br />
n : <input t ype=" tex t " name=" zip" /> <br />
<input type="submit" vlu= " " />
<> :
:
</>
</form>
/> <br />

v lu=" " checked="chec ked" />
value="epa"
Ton-1 ,
v
r r , n n
.
, - . ,
, ,
XHTML
CSS ( , n ),

0,00004. , .
<>:'.'"'--
#1 num mun ceAekmopoB

,
, , , .
gm
, .
' .,,
<div> <span>. , ceoee:first-letter

, .
,
:first-line
. ,
<>:
p:first-letter {
font-size:
m;
~~W, jutOIL- ""'.gjiO ~;'1_1(.-g) 0\~jOo.t;]O\
'~1..
1 01. ~w. "'-':g'\1\.. e;;;;l"ol(.'\1\.. jutOo.t...
p:first-line
font-style: italic;
\(.jl""'\l\...g+\11t...
CeAekmop ampuymoB
,
.
: ,
. :
:imq [width] { border:

:imq[height="OO"]
lack
thin
{ border: red
i.mage[alt-="flowers"] { border:
thin solid; }
no m mo2o >ke >kmu
,
. , ,
<hl> .
:w.~.1.w..t.. "'1"~~..gji0~1.1i\, ~IJOI..L.. v11\......gOJl
HOI.o..
~ ~j.S\~1.1i\,c,.
hl+p {
font-style: i talic;
1-\D\
<<+>>
... L ji"D..gt\.L ..gom.2..k\.A-\.OV.1..

.
<
1. +"(Jm.\'\l:lt.,;;\.,
<
.~ /" ~litC)Lft... j01~7 ,.~~LJ...
. ~ ~..g <>.
c,./"0\jj m.t.. ....ovt..
mu ceekmopoB
, . ,
:
. lueerry
{ color: purple; }
3j.u- .J:1t ..g~1fOIL.. Ol~j01~11t- .......1. ~..g1
~ .s>.1S.S~~'Wo;v.S\ .i...I-\DI...1.LULDI.VVOI bj~u'j
,
. .
( 1)
, , ,
3j-U- .J:1t 1.V....j.)'-- v~O/" .......\I..g ll.O.D/"O..

div#greentea >
lockquote
j'WfJ'dOI.....v.S\1 . ~ <IJ!iv> ,. ""6~~""-l"...

'11.u......-fu.. j~ ~/1t /"j1.>t..411\... ~D..j.SI
<io9'V\.OW.
(2)
, :
~iv#gr~ntea
>
lock~e
--
/'..
ll.O!-U~
\(..0\1(.
.. ~1
ll.O.0/"11!..,;;\., +"(JIW ..g~/"0\. 1.j ll.O~~OI
~ ~I.
(3)
D01t..t.. .J:1tjD~OI..gJl.S\.u.. <1">

<blo9'V\.Oft>.
3~
</"> j~
~ /1t ......II.. < j 9'V\.Oft>l ll.O.O /"11!..,;;\.,1
..g v..gOIO DI.f~bljD~>I..gJl.S\.bv jOI.f!-\..11\....

j.SI ~I <IJ!iv> v ""6~~~1.~
~j.u......-fu...
.:);;, ,_:.:
,.
645
#2 ii
HTML
- ,
. , ,
,
HTML>>,
W3C
. ,
. .
,
~01~ +U~t.'So/" <Pf"t.:li\....o.g .g c..W.I"o"(J
~.._ "-'.gt1. <Prt..1ii... 301+\..11\...J;>.~ 36 %
<frameset> <frame>:
Dt W.OI"'t.- ...~t.. 3~01W. +U~t.'So~
111-"1ttf"VI..t\t 0 ~ 'Sr'~{JY:f' 01r k.()c....!Ujt\..VI..1i\. -
<Prt..1....o.g .g C...W.o'S~ 11\..Jt11\.. 1(..0\1(.. +\D\ or

c...w./"o"'111.. C...W.o'S~o.g.
2.0 %{ 0\ c...f"'jt\..11\..li\, - .g_ Oc..W.OI.itb+\..Ot..

..t...c..W.o.
DJt 1(..0\?fCjcrz..o <rt-11\...

<frameset rows="O%, *, 20%">
<frame name="header" src="header.html" />
<frame name="content" src="content.html" />
<frame name="footer" src="footer.html" />
</frameset>
111.....k.D~... ~ +0\""'v.
14-.jtli\, ~ +01""'v
3 ~01~ ~.gOit\..11\..t.. <rt-11\...

11\..
1....S1 fY"Ilr<f'011i\..it011 ~w.ort1.
ow.o~OI?OI~c... .go <Prt..i!u.t...
, <>.
target
<
href="newpage.html"
target="content">o </>.
<iframe>
. <iframe>
:
<iframe name="inlinecontent" src="newcontent.html"

width="SOO" height="200" />
, , D,

frameset.
, D ,
- .
HTML 4.01
<!D
html
PULIC
"-/ /W/ /DD
4. 01 Frameset/ /EN"
"http://'W'W'W.w3.org/R/html4/frameset.dtd">
XHTML 1.0 :
<! D html PULIC "- / /W/ /DD L 1. Frameset/ /EN"
"http://'W'W'W.w.org/R/xhtmll/DD/xhtmll-frameset.dtd">
646
#3 MyAmuegua u w
- , ,
-.
HTML <jt>,
- (
).
,
<object> - <emed>.
, ,
, .
,
, .
, , ,

HTML,
, .
Quicktime-a <object>:
DI .~t.. ~..1.""'
~<......i../>
<object classid="clsid: 02BF25D5-8Cl7-4B23-BCB0-D488ADDC6B"

codease=;"http: 1 /www. apple. com/ qtacti vex/ qtplugin. "
heinht="200"
"'
width="OO">
<param
<param
<param
<emed
name="src" value="buckaroo.mov">
name="autoplay" value="true">
name="controller" value="true">
height="200"
width="OO"
~ ~ <obiu-t>r ,.,..-&
h.f.Rj0~0\~11\...b
..D
ai"OIJY:r;j
..D
t\1..L).bk:.O l:>OI/"11\..0\~0l:> t.
..
<
l:>l1Lc:Jo~a.
t:t...1.
1
c:J"'G
<
1-\.J....
~t.t"1.~OI~ ~+\.1.1ii.
<obiu-t>r O+\.'&-lj~
~0\,.,..t.-. /"01-&o,.,..OI""'b
t.. <......i../>.
src="buckaroo.mov"
pluginspage="http://www.apple.com/quicktime/download/"
type="video/quicktime"
controller="true"
autoplay="true">K ID, n
'1' ,</md>
</object>

. <object>
, ,
, .
647
#4 u
n2 g 3gu -mu
, L
CSS,
, Dreamweaver,
GoLive FrontPage.
<< , >>. :
XHTML
, ,
. ,
, L- .
, ,
.
FTP.
,
, , L- SS- ,
.
XHTML
CSS,
( ).
,
,
, .
Hekomope u n2, komope ng2 mm
Macromedia Dreamweaver.
Adobe GoLive.
Microsoft FrontPage.
GNU Emacs
648
'i:
( ).
#S
I<Auemckue uu
L- : n'J!
.
. ,
, - JavaScript.
, ,
. .gt1. H\(V'IL.-~
(Jc.,firt'>r
., !)...D~ ~.orow ... -.:1-v0\.
<script type="text/javascript">
function validid (fo:rm) {
if (form.bid.value > ) return true;
else return false;
~j "f... .g1.r'\.. -\(V'IL O'Sr.~L

.g~V\....OI~'VU.... . .tl1. '2,0\<;0o.JL'\...'!AJ..yjO\vOo.JVfiJOt
r
VJ
'
</script>
r- )(-\(V'Il...gt ...D?.L.L VOjlOI.b <fJOf..j( .g ~.0f01. '11\..V!)JLb~v v~~j"'11\..1..j "fO.gLf'"';~. ~R..JN.
nf'\.. .. ~ a,jj.L. "fO:gLf.bv jO .t(
<form
I(.D\1.(.
<fJOf.DI a,jj~ "fR.jOV.tl..gJLLt\.01. t\.01. fOivv...D.f~'\..L.
onsumit="return validid(this);" ethod="post"
tt
. .gt1. 0\.f~.j. .....s'1...1+ ~. (1...-.f""'> ~. t1..
?\.'\i\..'11\.. t\.01. <fJOf...L IVI-\D~'\.. J'\..b""'1'f (."f;~~).
action="contest.php">
-
jtl."-.j(.,I(.D\~ v~Lt\.0\f'IA'I- "f'IA
m 2m ge11am uu
, -
, ocpecoJavaScript. ,
JavaScript.
( ,
3)
. ? ,
- , . ,
, JvSrit.
,
.
,
.
, .
# 6 uu
, -, .
n, -,
, . , ,
, - .
14 Starbuzz Bean Machine,
-.
-
. , .
- , n ,
n
.
n n.
, .
n .
n .
-
. , , ,
. -
: , 3r-
(, , , . .).
- . , Pytho,
Perl,JavaServer Pages (JSPs)-
. r,
. , , n , .
- , aJSP.

Microsoft, ,
, V.net ASP.net.
,
-n.
650
#7 2u nouckoBx cAy>k6ax
- (,
Google
Yahoo!).
- ,
, . L.
, ,
. ,
. ,
- ,
, .
Kak ku
k pacnoo>kum
caum cnuckax,
3g nouckoBu >ku
.
,

<meta> <head>:
, -
. w Cttoo- ( ),
, >> >>.
1
<meta name="description" content="'l'o CSye'l' co&pDDIOI'O

.n XJDDea:we c.noaa .m:w CSW'l' n 'l' ." />
<meta name="keywords"
'1'.
."
content="XJDDeaa: _l,
XJIID&aa: _2,
'l'..
JCJDDea _
/>
al t
ti tle ,
, .
, . ,
. , ,
.
Kak gm mak,
Baw caum
m>k
cnuckax, 3g nouckoBu >ku
, ,
, . ,
). ,
, ,
<head>
<meta>
<meta name="robots" content="noindex,nofollow" />
il
.;;;.,;;;; .;;;;a..:t. <""'.d--01> w'ilo/"1!\..I ~~1:11.. ..._j~01...

1..'LN)/"1f0-i\OI,;;;;b j014IO c.,.,;;;;/"OI+"v"\..~f 01 ,;;;;OIIt...L -i\c...t.. oc.";;;;Oibt\IL
c.";;;;I"OI+"v1..~t c...o..-V..;;;.011 1-\.D\ Lt..O,;;;;ol"w.. 1-\.D\ +U-1i\. -i\.,.,;;;;/"...i.;;;;.... ......t~t..1...
~
651
#8
;,: ,
',,/,,..:; :
g mu mu g neamu
1,
media <link>,
.
.
print,
<link>
forprint. css,
Print
(),
, .
,
.
, .
, , ,
,
em. .
12 .
sans-serif ,
serif.
, ,
. ,
display none .
-, , ,
, ,
.
-, , ,
, . -
,
.
,
, ,
. ,
,- , .
#9
mu gl\ 6ul\
ycmpoiicm8
, - u ,
()? , -
. <<
>>,
XHTML
CSS
CSS,
- ;
L-, . ,
,
media
<link>,
handheld.
<link rel="stylesheet" type="text/css" media="handheld" href="formobile.css" />
w.o'Sl1t vo~t\W.b w.~'S~ W::.1..t.:~-j~
..'S'\.t\.11()( Jc;;/"o11\..W::..g{ 11\)_j1..""'.t...

t\W.I"~Jw. .,....>/it\ 11\.. ,~;>"''j"'I.W..t...j.J\.9, +I...L'l..O
jN>14tkl-11\...t... ~No.....i\;u.Jol.
, handheld , ,
- , ,
. ,
, - ,
, ,
. , L-

CSS
-.
. ,
, .
, .

handheld,
, ,

XHTML.
,
.
,
, , .
, , ,
handheld,
, .
:i.u
653
#' I\02U
-,
, - . , ,
- ,
.
,
, .
, .
,
.
XHTML CSS,
, , .
XHTML-
SS- ,
Blogger.com.
,
. :
XHTML 1.0 Strict,
, ~
L. ...
< !D html
PULIC
"-/ /W/ /DD
1. Strict/ /EN"
"http://www.w.org/TR/xhtmll/DD/xhtmll-strict.dtd">
<html
xmlns="http://www.w.org/1999/xhtml"
xml:lang="en" lang="en">
~ w.1- <$ ...$>- "-~ 1~.o$o!-'..DI ~D'LDI.b t\..'\II.X..g+-\..OLolA-v'c...
<head>
I'<P.j..gt\t\..11\.L ~D'LDI/ t\ W.t\~'}f<..Ljf',Jl-01.. Lj'\..-t 1Q..I.-+\..S\t.....Dt.. "'f1- LoDj<title><$BlogPageTitle$></title> jt\t\..11\-11\- ~D'l.DilA-jD~t\..g~lA-11\- +-\..O..gDW LoDD~~1.9.. b11tjD?t-I.t. oc...t\..g_
.v' v''I. ~~ 1-\.t..'IAQ...u-u'\J:It.lA-/ v'>.t\~ ~~ Ot\..11\- ~~:.,j'\1\...t
<$BlogetaData$> ~ j. w.ow1 w.o~l1t ll.Dff~+-\..0 ov'o~rt\?t\v'b Lj?'\..t.. ..gt\~ ~D'LDI.

body {
.argin: ;
padding: ;
text-align: center;
color: #554;
ackground:
r v ..gL&oL;_:\-\1)1 W.t\~I1t c...1A-At..1il./ ll.OW.Ort\ j~t\~

ll~
-.
<
0 - ......,
..g~t\..1A-1il. ..g'll';j cJD'l.DI. ~u- ~t\~ ...... 1- """~ v-
....Lj~ ~t\ <bool~>toOIJt\t-I.t.~~lA-.....o
. -~ ~ ~t\ 1- -t>n+-\..O..gDt.. '\.:,ocJ ..t\~~

v
~...t\1-\..'\ ~'~""'
t\
W.t\~?t.. ~c...t\+-\..O..g~ c....go1i\.c.....gt\ ~~t\.
#68954 url(http://www.loglog.cCII/dots_dark/g_minidots.gif)
font-family: "Lucida Grande", lucida, helvetica, sans-serif;

font-size: s.all;
</body>
</html>
654
top center repeat;
a(ordomo
. . .
(812) 335-35-45
(495) 727-22-78
www.majordomo.ru
- .

2000 r.
Registrant

.ru .su
- .
(812) 335-35-45
(495) 727-22-78
www. registran t. ru
, ,
.
TELECOM
Wi-Fi
www.comlinktel.ru

Э.Фримен, Э.Фримен - Изучаем HTML, XHTML и CSS (Бестселлеры O&#39;Reilly) - 2012

Загружено:

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

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

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

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

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

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

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

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

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

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

Э.Фримен, Э.Фримен - Изучаем HTML, XHTML и CSS (Бестселлеры O&#39;Reilly) - 2012

Загружено:

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

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

Head First HTML

with CSS &

2006 O'Reilly Media, lnc. All

""~ ..L?$) "1" 0\~

" v;;....g 1...1\.0\.gL .

The Ada Project

Disney, ESPN Movies.com.

(David Gelemter) ( nop

Principles Pattern.~ and Practice.

:.':'~:t ;;.:.~-::==~::... . ..-:::~~-5~

_ __.,.... ___ w._ ~--~nn..l'ill

<img>: n r.-.~!> .1JI

-<:111!' :' Pod

, n eXtensiie (Ww L. XHTML,

cpororo ~I.L 1t -'-:~! ;,_

~f: :-::..~: .:.!..& ~IL

Bawe s s CSS n ycnewo. CSS

8 (''~,. "'"'I'ICI"~<- ,...,~

1> ,,..,;;.. """"""'- ""' .~"""- ""' ""''ri!""'"' ~:

t-'111. :J .gDI'- t..t..n:;

+U.. u... t...

cmoum umam m ku2y?

maloke 3, gyaem Baw 32

I cum.aeM, m umm mou uru HumcH

100 n:, ~"'

:mopuu, .. ?~W..J 1710 ,

Bom m o>keme gm , m 3acma6um cBoii

n.. nn.. on..we 81ol n

<< <>>>, << <>>>.

r (Johannes de Jong), i 11.1.

(\ 'aJenrin ret taz .

(Mike Loukides) Tww.y

n : HyperText Markup Language

8vgeu 6u: paguo36e3gy

3(1tl(. -rL..~01~1. ~~-c...r01\o\..~11t.w~or~ ~r~"

~U, . t..._) t\..LO~~'i'\..O ji-U'I.b j.. .~rt-..~ .'\.

C,J~~ ..I-\.t._...g I(.........~

~t...~'\.I(."\.\. "\.\. >,;;;;t.~J~i~btU1tt...I>~.;;:;t_."\.\,

~....~ ft..t-;)l"c...01r 0 "- 0 ""-

"'f'".gN\t... .t-1..0 'SI"t>.~;J

... :\1\.. .~/"0\t\~ u...

, ..D HT\1L. _l .1.-1.

<head>, <>, <hl>

lj: L- Head First

1oSDf1At/1 JfOifJ'lf f/1D

Su SJ-Ui-1fO1A14PI (h.DffDJee oJ .?>WJDf'1 fY'ee).

1-f"..I~ JOk!~IAe CJ-VIffIAi?l.

Ua,D(f~ v((:! fLAfWi

f!-9. ""felf!IDCIA-9. V\DJY{)J/OJ1117.

'loBDfLAWi dfOJ[lo/lj WfO .?WfO hDff~!IDBo.

1oBopLAWI Je~ WfO .?WfO . rf'L-.or.

"* :t::CII 801 Botlr,

! .-u 9 . hfe!fXff!. f, 1D I"!I

Open and Save

Add .txt extension to plain text files

lgnore rich text commands in HTMLfiles

" - Start (), - \

Set Pr. .~ Ac<ess !lnd Oefeults

tl) wr.dows Oltaog

> System Tools

1~~~~~~- ~~~Win=do~ws~o~v~ie~M~ak.er===~ ~W Pram

Hide extensions for known

Hicle .,......",. 101 known typos

St- enaypled 01 COfi'C>fened NTFS liet n co10t

Э.Фримен, Э.Фримен - Изучаем HTML, XHTML и CSS (Бестселлеры O'Reilly) - 2012

Э.Фримен, Э.Фримен - Изучаем HTML, XHTML и CSS (Бестселлеры O'Reilly) - 2012

_ .,.... _ w._ ~--~nn..l'ill

1~~~~- ~Win=do~ws~o~v~ie~M~ak.er===~ ~W Pram

~:... 0\"-~t.. 1""'....." .....~