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

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>
<title>Kae Starbuzz</title>
<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

<style type="text/css">
<

(.,;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. , > &gt; ,


&1 t; .

<-

<html>

>>

. ,
:

&lt;html&gt;

, , - &.
, 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 &gt;?

&.

. ,

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
&#208;&epsilon;&tau;&#114;&ouml;&iqrave;&tau;.

'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

www.starbuzzcoffee.com

. ,

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

,
www.starbuzzcoffee.com

http: 11

l
www.starbuzzcoffee.com

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?

-:
:, .
,

www.starbuzzcoffee.com
, ,

URL

n , n n

. ,

URL

, n
.

: --.

. , ?

- - - -:

/h~html?

~~
-:

#404,
.

----

www.starbuzzcoffee.com

, 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
www.starbuzzcoffee.com
\;;;:..~

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>
<style type="text/css">

<title>Kae

body
background-color: td2b48c;
margin-left: 20% ;
margin-right: 20%;
border: lpx dotted gray;
padding: lOpx lOpx lOpx lOpx;
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>
<title>Kae Starbuzz</title>
<style type="text/css">
body {
background-color: #d2b48c ;
rnargin-left: 20%;
margin-right: 20%;
border: lpx dotted gray ;
padding: lOpx lOpx lOpx lOpx;
font-family: sans-serif;

</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>
<style type="text/css">
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>
<title>myPod</title>
<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>
<title>myPod</title>
<style type="text/css">
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>
<style type="text/css">
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>
<title>myPod</title>
<style type=" text/ css ">
body { background-color:
</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">
body { background-color:
</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 type="text/css">
body { background-color:
</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>
<title>myPod</title>
<style type="text/css">
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">
<titl> Head First</title>
</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 ">
<titl> Head First</title>
</head>
<d>
<hl> n

<img src="drinks.gif''

lt="">

<>

< href="elixir.html">a</a> ,
n

~,

<m> -</m>.

n n ~

</>

<h2></h2>
<>

n,

Webville .
,

< href="directions.html">yaae</a>.

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

< href="directions.html">yaae</a>.
!

</>

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

<titl> Head First</title>

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

< href="directions.html">yaae</a>.

</>
</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" />
<titl> Head First</title>
<style type="text/css">
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 {

font-family: sans-serif;

em {

font-family: sans-serif;

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;
font-family: sans-serif;
}

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
<titl> Head First</title>
<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>

<meta http-equiv="Content-ype" content="text/html; charset=windows-1251" />


<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 class="center">98</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="center">75</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="center">74</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>


<td class="center">98</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"


<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 >
<meta http-equiv="Content-ype" content="text/html; charset=windows-1251" />
<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="name" />


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

<input type="text" name="name" />

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

Starbuzz Bean Machine



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

Starbuzz Bean Machine

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

Starbuzz Bean Machine


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

. ,

Starbuzz Bean Machine

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

Starbuzz Bean Machine


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>
<option vlu=""></tin>
<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

Starbuzz Bean Machine

. , ?

,
.

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


<input type="radio" name="hotornot"

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


<style type="text/css">
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