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

., .

HTML, XHTML CSS


2-
Head First OReilly
.

.
.
.
.
.

32.988.02-018
004.438.5

., .
88

HTML, XHTML CSS. 2- . .: , 2014. 720 .: . ( Head First OReilly).


ISBN 978-5-496-00653-8
HTML, ?
HTML, XHTML CSS. HTML, -, ?
, , ? . ,
-. , ,
, HTML, CSS XHTML, -,
. HTML5, - , .
12+ ( 29 2010 . 436-.)

ISBN 978-0596159900 .

ISBN 978-5-496-00653-8

Copyright 2012 Elisabeth Robson and Eric Freeman. All rights reserved.
Authorized Russian translation of the English edition of Head First HTML and CSS,
2nd Edition (ISBN 9780596159900). This translation is published and sold by
permission of OReilly Media, Inc., which owns or controls all rights to publish and
sell the same.
, 2014
, , 2014

OReilly. .
.
, , , . ,
,
, .

, 192102, -, . (. ), 3, , . 7.
005-93, 2; 95 3005 .
19.07.13. 84108/16. . . . 75,600. 2500. 0000.

. 180004, , . , 34.

.

6.

(W3C)
(HTML) (CSS)
w HTML CSS , .

an)
(Eric Freem

obson)
(Elisabeth R

Head First
: ,
,
, ,
-, -, -.

, .

,
.

: Disney
Online & Disney.com Walt Disney Company.
WickedlySmart ,
.

-
;
- The Ada Project,
,
, ,
, .

,

, (David Gelernter),
.

,
,
.

WickedlySmart -, -,
, , . ,
OReilly
Media, -
,
, .
OReilly Media Walt Disney Company,
.

; ,
(Steve
Roach), iPhone
Immersion Station.
,
. ,

.
eric@
wickedlysmart.com, http://ericfreeman.com.

, , , , ,
.
beth@
wickedlysmart.com, http://
elisabethrobson.com.

()

23

. HTML

35

75

-.

107

Webville.

149

187

HTML.

241

. CSS

275

329

377

10

-. div span

427

11

485

12

HTML. HTML5-

557

13

611

. HTML-

653

14

. -10 ,

705

()

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

,

( )
( )
( )
( )

24
27
28
29
30
32
33
34
34


, , , : HyperText Markup Language (
), HTML. ,
. HTML,
, . , HTML , !


-

(HTML-)

Starbuzz
- Starbuzz
HTML- (Mac)
HTML- (Windows)
Starbuzz

-



<style>
Starbuzz

, ,
,
-, .


!

HTML- loung

<html>
<head>
<title>
My Playlist
</title>
<head>
<body>
<h1>Kickn Tunes
</h1>
:
<p>BT - Satellite:
nice downbeat tune.
</p>
<p>
...

<html>
<head>
<title>
My Playlist
</title>
<head>
<body>
<h1>Kickn Tunes
</h1>
<p>BT - Satellite: nice
downbeat tune.
</p>
<p>
...

, !
-

e.

ml.
ht

<html>
<head>
<title>
My Playlist
</title>
<head>
<body>
<h1>Kickn Tunes
</h1>
<p>BT - Satellite:
nice downbeat tune.
</p>
<p>
...

<html>
<head>
<title>
My Playlist
</title>
<head>
<body>
<h1>Kickn Tunes
</h1>
<p>BT - Satellite:
nice downbeat tune.
</p>
<p>
...

HTML

36
37
37
38
39
43
45
46
48
51
52
53
54
58
59
63
64



- ? ? , . 1
HTML, , , ,
, -. , .
<a> ,
. , , -
.

76
78
80
81
83
90
92
98

h1
p

h2

img

h2

h2

img

10


-
, -.
, : , , , , , , ,
-. -:
, ,
- . , , ,
,
, .

12


-


<q>
...
---
<blockquote>
<q> <blockquote>
...
HTML-

,

109
110
111
112
114
115
116
116
120
121
124
130
132
134
139

Webville
- ,
. -,
. ,
. - .
- , ,
.
, h, t, t, p, :, /, /, w, w, w. , ,
Webville.

Starbuzz
( )

, ...


FTP,

...
HTTP-

,


...
-
title

id
<a>


target

150
151
152
152
154
155
156
159
161
162
165
168
169
170
173
174
175
176
177
181
182

11



. gif, jpg png
, , .
, - . , ?
. , -? .
, , <img>?
,
. ,
.



,

.

12



<img>:


: myPod
index.html myPod
!


,
HTML- myPod
...
myPod
myPod
,

myPod


, -?
myPod
?
?
PNG-
, -?



- myPod

188
191
195
197
198
199
200
202
204
206
210
212
212
214
215
216
217
219
220
221
222
226
227
228
229
230
230
231
232
232

HTML
HTML? HTML-. CSS
? , ,
HTML . ,
HTML, , ,
- HTML. , HTML-,
HTML5. ,
( , ,
), ,
Apple, ( ).
, ,
CSS, . ,
!

-
HTML Webville

lle
lle
L-
ebvi
HTM
W

HTML

HTML5
HTML

DOCTYPE
W3C-
Head First
, ...

<meta>
HTML-,

244
249
250
251
252
255
256
257
258
261
266

13

CSS

, CSS.
HTML, -. , ,
. ,
, . CSS, HTML-. ?
, ; , Webville .
, CSS,
, .


, -
Webville
CSS HTML
CSS HTML




:
<h1>




lounge.css
lounge.html CSS-

elixir.html directions.html


, font ?
CSS-

greentea

greentea


, CSS-

html

body

head

meta

14

title

style

h1

h2

img

em

276
278
279
281
282
283
284
285
286
287
290
293
294
295
296
297
301
302
303
304
307
308
309
310
312
319



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

A
4

3
7 8
0

11
12

2
1

10

B
D

13

14
15


, ?
CSS
font-family

font-family

,
?
-
-
: !


-


normal.


?
? ...




...


,

330
332
335
335
336
337
338
339
341
343
344
345
346
350
351
353
354
355
356
358
361
364
366
366
369
370
371
372

15



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











,








?
?


id
CSS





CSS

16

378
380
380
382
383
384
386
389
391
392
393
393
394
394
395
396
398
399
400
400
401
402
405
410
411
412
414
415
416
417

10

div span
-
.
HTML-, <div> <span>. ,
. <div> <span> , , , . , CSS- ,
,
.
,
.

,
.

,


,

HTML
,

<div>








...




,

<span>
<span>
<a>
- ?


?
?

429
431
436
437
438
438
439
440
440
441
445
446
449
451
453
453
454
455
456
462
463
466
467
469
470
471
474

. .

17

11

h2


HTML- .
.
? , <div> <span> , .
. , , .

text

h1
h2

text

p id=amazing

text
text
span
em

text
em

text

span

text

text
text
text
text

p
img

18

img

img

img


?
,
?


Starbuzz


Starbuzz


,

, , ...


? , !


CSS Starbuzz-
<div> main

CSS
CSS HTML
HTML-
CSS
Starbuzz
?

CSS-


float



left

486
487
489
493
495
497
498
500
501
505
506
507
509
512
515
516
517
518
521
522
523
525
526
527
529
530
531
532
535
538
539
542
545
546
547

12

HTML5-
HTML
, HTML5. ,
, , , ,
, .
: , , HTML, ,
HTML5. HTML-, HTML5, ,
. ,
, ,
.
(, <video>), . ,
!

HTML-
Starbuzz
HTML- Starbuzz
,
CSS,
- Starbuzz
CSS -

<time> blog.html
<header>
?

CSS
GPS?
<nav>
CSS
-! - !
-
<video>
, ,
video?
<video>



2: , ,

558
560
563
565
566
574
575
577
578
580
582
586
586
587
587
589
589
592
592
593
595
596
598
599
601
602
602

19

13



...
. , ,
( ,
), , HTML. ?
:
, HTML-.
- :
HTML-.
,
HTML-. , !

HTML



...
,



?
,
--?

,
?
CSS


?

20

613
615
616
619
620
621
622
626
628
630
631
632
635
639
640
641
642

14

HTML-

- : - . , ?
HTML.
( -),
, ,
-.
HTML-, -.
- ,
.



HTML

<form>

, -!
Bean Machine
<form>
<form>
name
<input> HTML
<input>
<select>


<input>
<input>, number date


GET
HTML-

CSS

?
,

654
655
656
657
658
660
664
668
668
669
670
672
673
674
676
677
678
679
680
681
687
692
694
696
697
698

21

-10 ,

,
.
,
- . ,

, , , HTML CSS
( , ),
0,00004. ,
.

.

1. CSS-
2. CSS-
3. CSS-
4.
5. API- HTML5 -
6. -
7. -
8. XHTML5
9.
10. <audio>

706
708
709
711
712
714
715
716
717
718

,

HTML!


HTML?

?

1

,
-, ?


, ?

,
.

, .

?

1

?
( ,
, ,
, .)

-,
?

- ? ? ,
HTML
?

[
:
-
,
.]

24

,
?
?


:
.

- ?

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

! !

.

695 ,
.

, .
. . . , ,
,
.
.
.
,
. ,
- .
. . ,
.
: , ,
,
, ,
.


25

,

-?

.
,

,
.

HTML-
, .

.

, ,
.

,

,

Web Server

, !



.
.

.

%
40

,
.




.


.



?

:

,


,

,

, ,

,
,




. ,

, ,

.


.



,

-
. ,

.

,
?

,

. ,
, ,

,
.
!,

-,

?..

, .
-,

,


,
<html
<htm
<html>
l>
<he
<head>
ead>
<title>
<title>
My Playlist
</
</title>
<hea
<he
<head>
<b
<bo
<body>
<h1>Kickn Tunes
Tune
</h1>
<p>BT
p>BT - Satellite: nice
nic
down
downbeat
nbeat tune.
tune
</p>
</p>
<p>
<p>
...

26

:
- , , , . , .
, . , ,
.

,



?..

, ,
-. , ,
, , ,
. .
( )
,
.
, , , , .
. , .
,
.

, , HTML CSS
, ?
: .
. , , .
: , ,
. , .
-, , . ,
, . ,
, , (
- ,
), , ,
, , . , , ,
, , .
,
, , -,
.
, , ! ,
, ,
, . .
.


27


, , . 1024 .
, .
, ,
, , , , -.
h1

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

html

b
body
d

h2

img

em

,
, , - ,
. , .
100 , ,
- . , ,
.

,
,
, . ,
,
.
,
,
.
,
.
, ,
, .
, ,
, ,
. , ,
, . ,
.
,
, ,
.
, , . .,
. , .
80/20. ,
-, .
. , .
28

,
, .

.
, .

. . ,
. , - .
, , .
2

.
.

,
.
. . ,
.

.
! .
4

. ,
, .

(
)
, .
.
- , .
5

. .

. (
, )
.

.
;
, ,
. - .

6 , .
.


. -
- ,
. - . , ,
- ,
.
7 .

,
. ,
,
, ,
.
, , ,
, .
8 !

,
.
.
. , , , ,
.
9 -!

-
. -
( ),
. , , ,
. ,
HTML CSS.


29


, . ,
,
. , ,
, .
HTML,
HTML5.
HTML, ,
, ,
. ,
HTML ( ), , ,
HTML ( HTML5),
. ,
, .
, CSS HTML,
.
HTML CSS, - .
HTML CSS. ,
, ,
, , .
HTML CSS,
, , -
, .

, .

.
- HTML
, CSS .
- 1990- , HTML
, . HTML , CSS ;
.
.
HTML CSS, ,
- (, , )
.

30


-. , .

.
<a>, <a>. ( <a> , ),
,
.
.
, .
, . .
, .
,
. ,
. ,
, .
, .
, 200 ,
. ,
. , ,
.
,
http://wickedlysmart.com/hfhtml/css.
.
,
, . ,
.

31


( )

.
(Johannes de Jong), ,
.
(Pauline McNamara), ,
, ,
. ,
. (Valentin Crettaz),
(Barney Marispini), (Marcus Green),
(Ike Van Atta), (David OMeara), (Joe Konior)
(Corey McGlone) ,
, . , !
(Corey) (Pauline),
. JavaRanch
.
(Louise Barr), -,
HTML CSS.
32

( )*



(David Powers).
, ,
! . , , ,
.
OReilly:

(Brett McLaughlin), ,
. , ( ).

, , .

OReilly:
,
(Greg Corrin), (Glenn
.
Bisignani), (Tony Artuso), (Kyle
Hart) , .
(Ellie Volkhausen) ,
, (Karen Montgomery) , , . , (Colleen Gorman)

( ). ,
(Sue Willing) (Claire Cloutier). ,


(Mike Loukides)
(Tim OReilly) ,
. ,
(Mike Hendrickson) ,

.
, : , . , , . , .
- , .
,
LTJ ?
* , , , , ,
. , , , .

33

( )
, ,
HTML CSS (David
Powers) .
,
, ( ,
, HTML CSS).
.

.
(Joe Konior)
(Dawn Griffiths) ( Head First C ( )
(Shelley Powers) ( HTML CSS, ). : ,
! , . .

( ))




HTML CSS!!

(Mike Hendrickson),
( ),
, ( ,
), ,
! , , .
, !
. OReilly: (Kristen Borg) ( ), (Rachel Monaghan)

(), (Ron Strauss)
, (Rebecca Demarest) ; (Karen
Montgomery), , , , , ,
, (Louise Barr), .

1 HTML



,
HTML CSS.

, , ,
: HyperText Markup Language
( ), HTML. ,
.
HTML, ,
. ,
HTML , !

html


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

,

age
t MarkupLangu
HyperTex

ML)
( HT
( ,
-
-,

).


-,


-.

<html>
<head>
<title>
My Playlist
</title>
<head>
<body>
<h1>Kickn Tunes
</h1>
<p>BT - Satellite:
nice downbeat tune.
</p>
<p>
...

HTML - ,
.
,


.

36

,
-. ,
, , .

html

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


HTML


...

,

.

- loung
HTML
e.h

.
ml

<html>
<head>
<title>
My Playlist
</title>
<head>
<body>
<h1>Kickn Tunes
</h1>
<p>BT - Satellite:
nice downbeat tune.
</p>
<p>
...

<html>
<head>
<title>
My Playlist
</title>
<head>
<body>
<h1>Kickn Tunes
</h1>
<p>BT - Satellite:
nice downbeat tune.
</p>
<p>
...

<html>
<head>
<title>
My Playlist
</title>
<head>
<body>
<h1>Kickn Tunes
</h1>
<p>BT - Satellite:
nice downbeat tune.
</p>
<p>
...


HTML,
,

<html>
<head>
<title>
My Playlist
</title>
<head>
<body>
<h1>Kickn Tunes
</h1>
<p>BT - Satellite: nice
downbeat tune.
</p>
<p>
...

, !



,
.


, : ,
.
, HTML- -,
.

<html>
<head>
<title>
My Playlist
</title>
<head>
<body>
<h1>Kickn Tunes
</h1>
<p>BT - Satellite:
nice downbeat tune.
</p>
<p>
...

<html>
<head>
<title>
My Playlist
</title>
<head>
<body>
<h1>Kickn Tunes
</h1>
<p>BT - Satellite:
nice downbeat tune.
</p>
<p>
...

<html>
<head>
<title>
Head First Lounge
</title>
<head>
<body>
<h1>Welcome to Head
</h1>
<img src="drinks.gi
<p>Join us any even
</p>
<p>
...

...

.... .

<html>
<head>
<title>
My Playlist
</title>
<head>
<body>
<h1>Kickn Tunes
</h1>
<p>BT - Satellite:
nice downbeat tune.
</p>
<p>
...

-
, ? HTML. .
,


37

html

(HTML-)
, , HTML , , HTML ?
HTML-. ,
- , .
, HTML:

<html>
<head>
>A
<title> Head First</title>
</head>
<body>
<h1> Head First</h1>
>B
<img src="drinks.gif">
<p>
,

, , ,
<em> -</em>. E

( ).
</p>
>
<h2></h2>

<p>
Webville.

!
</p>
</body>
</html>

38

,
HTML.

, HTML. .
HTML- ,
. , ,
.

html


HTML-,
, .
,
<head>, <p>, <h1> . .
. , ,
, HTML
, ,
, ,
.
,
Head First.

,

HTML

B
C
E
D
F
G

39

: , HTML
, ?

,
, ,
.

: . , HTML : :
HyperText Markup Language ( ), ,
.
, HTML ,
.

: , HTML?

: HTML
: , ,
. . ,

,
.

CSS, ,
, . CSS .

: HTML- Head First



, ,
. ?

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

40

<h1> <h2>?

: : <h1>
<h6>. , .
<h3> .

: <html>?
, HTML-?

: <html> ,
HTML-.
,
,
. ,
.

: HTML-?
: HTML-
. ,
. .html .htm
( ,
),
. :
.

: HTML5.
? ,
HTML- HTML?

: HTML, HTML5

HTML. HTML5
,

HTML- ,
. Javascript API (Application Programming Interface),
Head
First HTML5 Programming (
HTML5).

: , . ,
, , 1970-
.
, Microsoft Word?

:
- .

-
. , , , ,
Dreamweaver, .
.
,
Dreamweaver .

: - HTML-?

: , <!-- -->,
. ,

, :
<!-- -->

,
. ,
<!-- -->,
HTML-, .

html


HTML, ...
HTML- Head First. .
, ?
- .
...

, HTML-.

<html>
<head>

- ( ).

<title> Head First</title>


</head>
<body>
<h1> Head First</h1>
<img src="drinks.gif">
<p>
,
, , ,
<em> -</em>.

( ).
</p>
<h2></h2>
<p>
Webville.
!
</p>
</body>
</html>

41

, HTML-.

<html>

-.

<head>
.

<title> Head First</title>

</head>

<body>

, .

<h1> Head First</h1>


drinks.gif.

<img src="drinks.gif">

<p>
,

, , ,
.

<em> -</em>.

( ).

</p>
<h2></h2>

, .
.

<p>
Webville.
!
</p>
</body>
</html>

42

.
.
, HTML-.

html

Starbuzz
Starbuzz
. ,
, , , .
, , -
, Starbuzz Chai,
Starbuzz...

HTML.
-,

Starbuzz. ?

arbuzz
St

 A. .


( ).

 C. Starbuzz
.

 B.

 D. .

43

starbuzz

!
,
.

Star

z
buz

Star

zz
bu


,
! -

),
( ,
.

, $1,4

,
,

.

, $2,35

, .

$1,89
,

,
, $1,85

.
,

. ?
, ?
? ?
() , , , .
1.
* A, B D ,
-
,
, , - .

44

html

- Starbuzz
, , -.
HTML ?
, ,
.

HTML-,
.

, Starbuzz .

index.html.

index.html , ,
, .

,
,
-,
.

!

45

c html mac os

HTML- (Mac)
HTML- .
,
.
, .
extEdit ac.
, .
Windows,
Windows.

Applications ().
TextEdit Applications ().
New Finder
Window ( ) Finder'sFile
( ) Applications
() .
, .

TextEdit.
, Applications () . ,
TextEdit.
.

TextEdit

()
TextEdit .
( )
TextEdit (
).
Options (), Keep in Dock (
). , TextEdit
, ,
Applications ().
46

html


TextEdit.
TextEdit Rich Text ( ), ,

.
.
TextEdit,
.
TextEdit Preferences
().

Rich Text
(
),

.



Plain Text ( ).
Preferences ()
.
-, New
Document ( ) Plain Text ( ).
-, ,
Open and Save ( )
Ignore rich text commands in
HTML files ( HTML-).
, , Add .txt extension to plain text files (
.txt
). ; , Preferences
().

.
, TextEdit Quit
(), TextEdit
.
. HTML-.

.
,


.

47

html windows

HTML- (Windows)
, , , Windows 7.
, . ,
.
HTML- Windows 7
Notepad (). Windows,
. ,
Windows 7, .
, HTML.
, HTML- Notepad ().


Start () Notepad ().
Notepad () .
Start (), All ProgramsAccessories ( ).
Notepad ().

48


Windows.


indows.
W

html


Notepad ().
Accessories ()
Notepad (),
.
, HTML-.

()
.
Explorer ()
Windows
. ,
Irule.html Irule
.html.
,
, ,
.
-, Folder Options (
), Start ()
Control Panel ( ) Appearance
and Personalization ( ) Folder Options ( ).
View ()
Advanced settings (
) , Hide extensions for known file types (

). .
. , , Explorer ()
.

49

html

: - : , ,
?
Dreamweaver Expression Web
-?

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

HTML CSS, .
, , ,


. , HTML
CSS ,
.

, ,
(
HTML-, ),
( ), (, , ,
) .
HTML- CSS-
, , ,
Coda, TextMate, CoffeeCup
Aptana Studio.
( , ).

50

. : Internet Explorer,
Firefox, Chrome, Opera, Safari. ?

: : ,
. , HTML CSS ( ,
, ).
: , -. ,
- ,
.
, . HTML CSS
,
.
.
Internet Explorer, Chrome, Firefox,
Opera Safari
( , , );
,
HTML CSS. , , ,
,

!

: .
?

: HTML ,
,
. ,
.
.

html

Starbuzz
, , , , ,
.
.
HTML- ,
. , Starbuzz.

Mac

Windows

51

html


, index.html.
, starbuzz, .
, File () Save (),
SaveAs( ). , .

1 starbuzz
,
Starbuzz.
New
Folder ( ).

52

Windows


Mac, Windows
, Encoding
() UTF-8.

Mac

,
.

UTF-8
;

.


starbuzz index.html
File name ( )
Save ().

html

-
-? File () Open File ( ) ( Open (),
Windows 7 Internet Explorer) index.html.
Open ().
Mac




,


).
Open (

Windows

Windows Internet Explore


r

.

.

Browse (),
,
.

53

html

Windows

! ,
. ,
,
-
.
-. HTML.
. ? ,
, ,
, ,

. .
,
.


HTML-


.
.

54

Mac

html


,
Starbuzz.
( )
, , , . -
, . ,
.
.

<h1>

Starbuzz </h1>

, $1,49
,
, .

, $2,35 </h2>


. </p>

.
<p> ,

<h2>

, $1,89
.
, $1,85
, ,
.

>>
<hh11
< >
<h1

>>
</h1
1
</h
</h1>
/h1>

<h2>
<h2>
<h2>

>>
</h2
1
</h
</h2>
/h2>

<p>

<p>

<p>

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

55

html-

!

HTML-.
, ,
HTML. , ,
, .

, ,
.
h1
h1 /
.





.

<h1> Starbuzz</h1>
<h2> , $1,49</h2>
<p>,
, .</p>
<h2> , $2,35</h2>
<p>, .</p>
<h2>, $1,89</h2>
<p>
.</p>

h2 /h2 .
,
h2
h1.

p /p

,


.

<h2>, $1,85</h2>
<p> ,
, .</p>
,


.



,
.

56

html

?
HTML- . ,
-? . <html>, <head>,
<title> <body>, , HTML-
ad.
head /he



-,
(

l.

tm
/h

l
htm

:
.
.
HTML-
-

<html>
<head>
<title> Starbuzz</title>
</head>


head /head ,
.

<body>
<h1> Starbuzz</h1>
<h2> , $1,49</h2>
<p>,
, .</p>
<h2> , $2,35</h2>
<p>, .</p>
<h2>, $1,89</h2>
<p>



body
/body ,

.

.</p>
<h2>, $1,85</h2>
<p> , ,
.</p>
</body>
</html>



,
.

57


index.html,
<head>, </head>, <title>, </title>, <body>
</body>. , .
l,
index.htm

Open File


( )
.

58

,

,

head.

html


, , ,

-

,
.
,
,
Starbuzz

.

,
.

<h1>

Starbuzz

/h1
1.
h
,

/.

</h1> h1


.
/

h1.

rbuzz
,
Sta

,
.
:
= + +
+

59

: , - : , HTML- : , !

?

: . , : , ,
, ,
.
,
, <h2>, ,
</h2>.

: /?

: , ,
. ,
, ,
?

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


.

: , <img src="drinks.
gif"> ?
?

, .

, .

: +
+ + ,
,

<html>?

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

- , ,
. .
, ?

<p id="houseblend">,

, .</p>

60

html

, ,

-.

.

...


Starbuzz


.

.

HTML-
mission.html.

,
,
mission.html ,
index.html.

, mission.html
.

,
...

61

css -

, , -
.

. ,
,
. ,
,
?

.
, .

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

CSS, Starbuzz
(
).

62

CSS
Cascad
ing Style Shee
ts
(
).



,

,
CSS



-
.

html

<style>
,
------ (
) <style>. Starbuzz .
,

le
sty
.
HTML-

,
style
/style...

<html>
<head>
<title> Starbuzz</title>
<style type="text/css">

... style
() ,
type ,
.
CSS,
text/css.

</style>
</head>
<body>
<h1> Starbuzz</h1>

<h2> , $1,49</h2>
<p>, ,
.</p>
<h2> , $2,35</h2>
<p>, .</p>
<h2>, $1,89</h2>
<p> .</p>
<h2>, $1,85</h2>
<p> , , .</p>
</body>

</html>

: ? ?
: "text/css"
? ?
: . , : HTML- ,
<style>, ,
.
; ,
.

, , , ,
<style> , CSS.
;
<style type="50sKitsch">.


63

Starbuzz
, , <style>, ,
, CSS -,
. CSS-,

. ,
,
HTML CSS . .
, , .
, CSS-, index.html.
, .

<html>
<head>
<title> Starbuzz</title>
<style type="text/css">
body {
background-color: #d2b48c;
margin-left: 20%;
margin-right: 20%;
border: 2px dotted black;
padding: 10px 10px 10px 10px;
font-family: sans-serif;
}
</style>
</head>

CSS

ML.
HT

<body>
<h1> Starbuzz</h1>
<h2> , $1,49</h2>
<p>, ,
.</p>
<h2> , $2,35</h2>
<p>, .</p>
<h2>, $1,89</h2>
<p> .</p>
<h2>, $1,85</h2>
<p> , , .</p>
</body>
</html>

64

html


. ,
index.html . - Starbuzz .
.


).
(


.

! .
.

65

css

CSS-, , .
, .
background-color: #d2b48c;

,
.

margin-left: 20%;

, ,
.

margin-right: 20%;

border: 2px dotted black;


: 20 %
.

padding: 10px 10px 10px 10px;

-
.

font-family: sans-serif;

: CSS HTML
-. ?
,
, ?

, . ,
,
.

: , HTML : , #d2b48c
CSS , ,
. ,
,
CSS HTML ,
, .
, . ,

66

. - ?

:
CSS. ,
#d2b48c.
- . ,
, #d2b48c
.

: body CSS?
?

: body CSS ,
{ }
HTML- <body>. , sans-serif, ,

-.
CSS,
. ,

, , ,
.

html

Starbuzz index.html, mission.html.


1

HTML- mission.html,
CSS-.

2 mission.html, .
3

, mission.html .

4 , - , (.
).

67

: HTML CSS .

HTML

CSS

, CSS! , ,
- .
? ?
,
, .
! ,
.
, , ,
!
, , . , HTML CSS
.

- ,
? , HTML-
. ,

.

, . ,
. ; .
! - . ,
, .
.
, !
- .
,
.
68

html

HTML

CSS
?

. ,

,
.

.
, , ,

.
, .
, ,
CSS. .
HTML !
, !
- .
.
CSS:
, <> <>. <><,> <> <>
<> <> <> <>
<HTML><,> <> <> <><!>
, -
?
, , , <style>. , !
! ?

69

html css


,
-,
.
!
.
,
,

.

HTML CSS ,
-.

,
/.

- -, HTML CSS.
, HTML CSS.

<html> <head>
<body> .

HTML HyperText Markup


Language ( ).
-.

-
<head>.

, <body>,
.

CSS Cascading Style Sheets.



HTML.

HTML,
, .
.

(
, , ) , ,
HTML- .

:
, .
, <img>, .

HTML- - CSS, CSS <style>. <style>


<head>.

CSS
HTML.

70

.
: type.

html


(), , .

.


! (
-
),

,.

zz

Star

Star

zz
bu

z
buz

S tar bu

9
, $1,4

,
,

, $2,35

$1,89

, $1,85

.
,

71

.
Starbuzz.
, , , ,
, ,
. :

<h1>

Starbuzz </h1>

<h2>

, $1,49 </h2>

<p>

, . </p>

<h2>

5 </h2>
, $2,35

<p>

<h2>
<p>

. </p>

,
$1,89 </h2>

. </p>

<h2>

,
$1,85 </h2>

<p>

, ,
. </p>

>>
<hh11
<
<h1>

>>
</h1
1
</h
</h1>
/h1>

72

html

<html>
<head>
<title> Starbuzz</title>
</head>
<body>
<h1> Starbuzz</h1>
<p>

Starbuzz

.</p>
<p> .</p>
</body>
</html>

HTML-.

HTML,

73

CSS
.

<html>
<head>
<title> Starbuzz</title>
<style type=text/css>
body {
background-color: #d2b48c;
margin-left: 20%;
margin-right: 20%;
border: 2px dotted black;
padding: 10px 10px 10px 10px;
font-family: sans-serif;
}
</style>
</head>
<body>
<h1> Starbuzz</h1>
<p>
.</p>
<p> .</p>
</body>
</html>


zz.
rbu
Sta

CSS, - , .
, .
background-color: #d2b48c;
margin-left: 20%;
margin-right: 20%;
border: 2px dotted black;

padding: 10px 10px 10px 10px;


font-family: sans-serif;

74

, .
, ,
.
: 20 %
.
- .
.

2

, ,
.


.

!

- ? ? , . 1 HTML, , , ,
, -.
, .
<a> , .
, , - .

head rst


Head First? , ,
? ,
- , .


:
,
.

HTML-
.

directions.html

76


,
.



...

Head First , .

,

directions.html elixir.html.

,
http://wickedlysmart.com/
hfhtmlcss.

lounge.html HTML-
directions.html elixir.html.

.
, ,
.

elixir.html

77


http://www.
wickedlysmart.com/hfhtmlcss. , chapter2/lounge lounge.html, elixir.html
directions.html ( ).


.
,

lounge
,

<html>
.
.
.
</html>

lounge.html

chapter2
<html>
.
.
.
</html>

lounge

elixir.html
<html>
.
.
.
</html>

,

.

,
.

directions.html
ti
ht

green.jpg
blue.jpg
,


.

drinks.gif
lightblue.jpg
red.jpg

Head First . ,
? ?

78

lounge.html
lounge.html .
HTML-, . , , .
<html>
<head>


<title> Head First</title>
.

</head>
<body>
<h1> Head
First</h1>
HTML-
<img src="drinks.gif">
.
<p>

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

, ,
,
<em> -</em>.
...

( ).

</p>
-

<h2></h2>
,
.

<p>

Webville.
, ,
<a href="directions.html"></a>.
</p>
</body>
,
</html>
a.

lounge.html
, lounge.html
. .
1

,
.

lounge.html.

,
.

79

,

,
,
. ,
,
HTML.

HTML-.
, ,
<a>. :

<a></a>

<a></a>

.
,

,

.

, ,
- HTML-, ,
:

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

l.
m
elixir.ht


,

directions.html.

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

-,
, , <a>,
,
.

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


a,


,
-

.

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

<a>
.
<a>
-.
href .


81


, ,
href, ,
.


...

... .

,
href


s.html...
ion
ect
dir


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

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

82


. ,

:
,
type
CSS.
<style type="text/css">
,
<a href="irule.html">

href .

<img src="sweetphoto.gif">

src

img.

, ,
.

<car>
<car>, , ,
- :
<car> </car>

,
,
.

<car> .
, , , ,
. , <car> ,
:

,


.

<car make="Mini" model="Cooper" convertible=""> </car>


, ?
.

:
, ,
, .
,
HTML-,
,
.
(
).

( )

<a href="top10.html"> </a>


<a href=top10.html> </a>

.


83

:
HTML?

: , .
, , .
,
, .
, .
, - ( Head First HTML5 Programming
( HTML5) HTML5
,
.

: , , ?
href
-...

: ,
...
.

HTML. ,
,
, HTML ,

.

: , ? ?

: .
, ,
.
, . , ,
HTML & XHTML: The Definitive Guide (OReilly).

84

, .
href
Head First: , Href. , .
Href: . , ;
. , ,
, , - ? .
Head First: ,
. , ? ?
Href: . , .
, <a>. ,
! : <a> !</a>.
, href, <a> .
Head First:
Href: ... . , : <a href="signup.
html"> !</a>. , <a>,
!, signup.html. ,
<a>, ,
Head First: . ,
: ?
Href: -. ,
Href.
Head First: ?
Href: , . ,
PDF- .
Head First: .
. ?
Href: ! , . , ?
Head First: , , , . ,
, Href.

85

, lounge.html
elixir.html directions.html.
. HTML- elixir.html. ,
lounge.html.
<html>
<head>
<title> Head First</title>
</head>
<body>
<h1> </h1>
<h2> </h2>
<p>
<img src="green.jpg">


: , .
</p>
<h2> </h2>
<p>
<img src="lightblue.jpg">
,
,
.
</p>
<h2>- </h2>
<p>
<img src="blue.jpg">
,
,
.
</p>
<h2> </h2>
<p>
<img src="red.jpg">
C
.
</p>


HTML-
.
</body>
</html>

, directions.html.

86

<a> . ,
<a>.
, <a>.
. .

HTML

hot.html

<a href="hot.html"> ?</a>

cv.html

candy.html

<a href="

"> </a>

mini-cooper.html

<a href="millionaire.html">

</a>

: , : , <a>,
, .
<a>?

: , <img> <a>,
, .
,
.

? , ?

: <p> <a>, . ,
, (
) <a>,
<p> <h1> , .
,
, , .


87

Head
First .


.
online .


HTML-,
.
. , ,
-, .
, :
<html>
.
.
.
</html>

,


lounge

.

lounge.html
<html>
.
.
.
</html>

lounge


HTML-:
,

.

elixir.html
<html>
.
.
.
</html>


. ,
,
.

directions.html

green.jpg
blue.jpg
. ,
- ,
.
- ...

88

drinks.gif
lightblue.jpg
red.jpg


- .
,
,
.



nge.
u
lo

lounge.html lounge
.

<html>
.
.
.
</html>

lounge

lounge.html
green.jpg
g

about

<html>
.
.
.
</html>

beverages

<html>
.
.
.
</html>

images

blue.jpg
drinks.giff

directions.html


,

.



,

. .

elixir.html

,
.

,
.

: ,
html
HTML-?

red.jpg lightblue.jpg

,
.

: .

,
about beverages?

,
.
,
, ,

.
,
,
.
-

,
,
.

: ?
: , ,
.
,
.


89

,
. , .
1

lounge
about, beverages
images.

directions.html about.

elixir.html beverages.

images.

, lounge.html
. .


, -

...

,
( )
:

,
.



,
.

90

, ,
,
,
lounge.html.
,

.

.

.
href,

.
,
.

.
,
,
,
href.

91


,
?
.
: ,
, ?

,
Google,

!

, . , ,
, ,
.



.


.


( ).

lounge.html elixir.html

lounge.html.
<a> :

<a

elixir.html,


nge.html.
, lou

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

, lounge.html
lounge elixir.html beverages,
lounge.

...
<html>
.
.
.
</html>

lounge

lounge.html
green.jpg
g

about

<html>
.
.
.
</html>

beverages

<html>
.
.
.
</html>

images

blue.jpg
drinks.giff

directions.html

elixirs.html

... .

92

red.jpg lightblue.jpg

. lounge.html
elixir.html, beverages.


beverages.
<html>
.
.
.
</html>

lounge

lounge.html
g
green.jpg
<html>
.
.
.
</html>

about

beverages

<html>
.
.
.
</html>

images

blue.jpg
drinks.gif

directions.html

elixir.html
red.jpg lightblue.jpg

elixir.html
.

href

, ,
, .

beverages.


,
/.

beverages / elixir.html


...

<a

href="beverages/elixir.html"></a>

href
. ,

,
elixir.html beverages.


93


: lounge.html
directions.html. , <a>,
. ,
<a> lounge.html.

<html>
.
.
.
</html>

lounge

lounge.html
green.jpg
g
<html>
.
.
.
</html>

about

beverages

<html>
.
.
.
</html>

images

blue.jpg
drinks.giff

directions.html

elixir.html
red.jpg lightblue.jpg

<a

href="

94

"></a>

:

1

directions.html lounge.html

.
<a> directions.html:

<a

href="lounge.html"> </a>


l,
lounge.htm


,
directions.html.

.


- .

directions.html,

about.
lounge.html,


about.

...
.
<html>
.
.
.
</html>

lounge

lounge.html
green.jpg
g

about

<html>
.
.
.
</html>

beverages

<html>
.
.
.
</html>

images

blue.jpg
drinks.giff

directions.html

elixir.html
red.jpg llightblue.jpg

...


.
directions.
html lounge.
html,
, lounge,

lounge.html.


lounge.html.
<html>
.
.
.
</html>

lounge

lounge.html
green.jpg
g

about

<html>
.
.
.
</html>

beverages

<html>
.
.
.
</html>

images

blue.jpg
drinks.giff

directions.html

lounge

elixir.html
red.jpg lightblue.jpg

95

href

href

. , ,
, . .

?

,
...



/.

..

/ lounge.html

...

<a

href="../lounge.html"> </a>

,
,
lounge.html
( ).

96

, , ,
?

: ? : , : ?

,

?

: , . ( )
. , .

,
( ) .
,
, .
.

: ,
, ..?

: ,
, ,
, ... :
, . ,
.
directions.html, about, lounge.html, lounge,
about.
.
.. ,
.

, ?

: ..
,
. , ..,
. ,
, ../... ,
/. ,
, ....!

:
, , ?

: ../.. .
, fruit.html, ,
../../fruit.html. , ,
, , ../.., -,
.

- ,

?

:
, .
10 ,
,
10 .
: ,
, , ,
!

.
255 ,
. ,
.

: \;
/?

: - : ; -
, ?

: ,
.

lounge. ,
.

/ ( ). \
( ). (, Windows \ /),
,
. ,
, /, HTML.

: elixir.html
lounge.html .
directions.html?
: , .


97


. , , , .

, ,
, ,
, - .
!
,
.

<img> (
). , src <img>
, href.
<img> lounge.html:

<img src="drinks.gif">
,
, .
,
href a.

lounge.html drinks.gif
, lounge.html
, , images.

...

unge,
lo

ges,
ima

.

(1)
images.

<html>
.
.
.
</html>

lounge

lounge.html
green.jpg
g

about

<html>
.
.
.
</html>

beverages

<html>
.
.
.
</html>

images

blue.jpg
drinks.giff

directions.html

elixir.html

(2)
drinks.gif.

, (1) (2) , images/drinks.gif, :

<img src="images/drinks.gif">

98

red.jpg lightblue.jpg

...
.

elixir.html red.jpg

: red.jpg, green.jpg, blue.jpg . .
red.jpg, , .
:
beverages,

(2)
,
images.

images.
<html>
.
.
.
</html>

lounge

lounge.html
green.jpg
g

about

<html>
.
.
.
</html>

beverages

<html>
.
.
.
</html>

images

blue.jpg

...
.

drinks.giff

directions.html

elixir.html

,
(1) ,
ge.
loun


,
.
..

red.jpg lightblue.jpg

...

(3) ,
red.jpg.

, (1), (2) (3) , :


,

.

..

/
.


images.

images

/
.

red.jpg

<img src="../images/red.jpg">


99

, ,
. -
lounge.html elixir.html. , .
1

lounge.html src <img> images/drinks.gif.

elixir.html src , ../images/.


lounge.html .
.

P. S. - , chapter2/completelounge.
.

!

.
.

.

100

,
<a>.

href <a>
.

<a>
. ,
-.
. ,
.


, -, href.

,
-,
,

.

.., ,
(
, ,
).

..
.


/ ( ).

,
-.

,
.

,
,

,
.

. ,
.

101



.
100 , music. HTML-,
. ,
- - .
, .
. ,
.
!


,

.

<html>
.
.
.
</html>

music

top100.html

<html>
.
.
.
</html>

genres

images

genres.html

logo.gif

<html>
.
.
.
</html>

rock

pinkoyd.html

oyd.gif

darkside.gif
cdcovers

artists

<html>
.
.
.
</html>

coldplay.html

102

xandy.gif

chris.gif

.
... ... !

<html>
.
.
.
<html>

genres/genres.html

top100.html

<html>
.
.
.
<html>

genres.html

00.html
top1

music,

l,
genres.htm

enres.
g


<html>
.
.
.
<html>

top100.html

logo.gif


<html>
.
.
.
<html>

genres.html

logo.gif


<html>
.
.
.
<html>

top100.html

<html>
.
.
.
<html>

pinkoyd.html


<html>
.
.
.
<html>

coldplay.html

chris.gif

103


elixir.html,
lounge.html. .

<html>
<head>
<title> Head First</title>
</head>
<body>
<h1> </h1>
<h2> </h2>
<p>
<img src="green.jpg">


: , .
</p>
<h2> </h2>
<p>
<img src="lightblue.jpg">
,
,
.
</p>
<h2>- </h2>
<p>
<img src="blue.jpg">
,
,
.
</p>
<h2> </h2>
<p>
<img src="red.jpg">
C
.
</p>
a

<p>
.


<a href="lounge.html"> </a>
</p>
,
</body>
.
</html>

104

hot.html

<a href="hot.html"> ?</a>

a href=cv.html/a

cv.html

<a href="

candy.html

candy.html

"> </a>

mini-cooper.html

millionaire.html

a href=mini-cooper.html /a

<a href="millionaire.html">
</a>

about


lounge.html directions.html.
, <a>
(. ).
<html>
.
.
.
</html>

lounge

. <a> lounge.html?

lounge.html
green.jpg
g

about

<html>
.
.
.
</html>

beverages

<html>
.
.
.
</html>

images

blue.jpg
drinks.gif

directions.html

elixir.html
red.jpg lightblue.jpg

directions.html

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

105




<html>
.
.
.
<html>

images/logo.gif
logo.gif

top100.html


../images/logo.gif

<html>
.
.
.
<html>

genres.html

logo.gif


<html>
.
.
.
<html>

genres/rock/pinkoyd.html

top100.html

<html>
.
.
.
<html>

../../images/artists/chris.gif

coldplay.html

106

l
genres.htm

,

genres, ,
logo.gif,

ic,
mus


images.

.html
top100

r
gen


rock

l.
yd.htm
pinko

pinkoyd.html


<html>
.
.
.
<html>

00.html
top1
usic,
m

res.html,
gen


enres.
g

chris.gif

coldplay.html,

rock,

music,
images


chris.gif.

, !

3 c


, .
,
-
!

,
-. , : , , ,
, , , ,
-.
-: , , - . , , ,
,
, .



,
.

.

-,
.

, 2012
2

12
, 20
14

a
Burm

Shave

,
12

20

, 20

200

,
,



- ,
.

,
-

,


:
,
,



d,


, iPo
,

.
,

,
:

108


,

,

.

12
, .
-?

, .
1

-, ,
.

HTML (<h1>, <h2>, <h3>, <p> .),


( ) HTML-.

, HTML-.

: ,
.
.

! , .



,
-.
.
, .
, .

:



:
, ,
. .;

-
,
?

109

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


.
.

, ,
.
, ,
.

.
,
()
.

, : , .
,



,
-




.

,

:

.



.
,

110

20 , 2012

, 1200 : , , -,
, , , ,
, , , -, -.

14 , 2012

Burma Shave
: , .
, !

2 , 2012

! , . , :
, iPod, . . :

.


, ,

HTML-...

.

h1

, , ,
HTML-
,
HTML-.

:
-
, . , ,
.
, ,
- .

.
h1
h1
h1
h2
h2
h2

p
p
p

h3
h3
h3

img
img
img

h4
h4
h4

a
a
a
h5
h5
h5
h6
h6
h6

111

-
.
.
HTML-,
.
, , - <html>
<head> <body>.

h1

h2

img

, ,


,

HTML.

h2

h2

img

112


,

title
tml,head,
h
body.



-.

<html>
<head>
<title> !</title>
</head>
<body>

<h1> </h1>
.

<p>
!
</p>

<h2>20 , 2012</h2>

<img src="images/segway2.jpg">


<p>
.
, 1200
: -, , -, ,
, , , , ,
, --, -.
</p>
<h2>14 , 2012</h2>
<p>
Burma Shave
: ,
.
, !
</p>

,
.




ay1.jpg.
segw

<h2>2 , 2012</h2>
<img src="images/segway1.jpg">
<p>
! ,
.
, :
, iPod, .
. -:
.
</p>
, :

</body>
body html.
</html>

, .

journal.html chapter3/journal. images


.

segway1.jpg segway2.jpg.

113

, 2012
2

,
14

2012

a Shave
Burm

.
,

20

, 2012



00
12

,
,

,
,

-

,

:
,

,
,
-

, ,
,

,
:

, iPod, .
--

!
;


.

114


HTML:
-
HTML- <p>, <h1>, <h2> <img>.

.
, ...


:
.



:
.

HTML q.

115

html

<q>
? <q> , . HTML-, , .
<html>
<head>
<title> </title>
HTML ...
</head>
<body>
<p>
, ,
, , <q> </q> <q> </q>.
</p>
</body>
</html>

,
/q.
.

...
, .
, .


<q>.

,
, ,
<q>

.

116

...

<q>,

? ?

.
.
,
,
<q>, , ( ).
, ,
. , ,
.
<q>, , .
, , ,

.
, ,
. ,
, .
,
,
.
.

!

,

.

<q>
( ,
CSS )
, , . ,
, .
<q>, .


117

. <q>. ,
journal.html . .
<html>
<head>
<title> </title>
</head>
<body>
<h1> </h1>
<p>
!
</p>
<h2>20 , 2012</h2>
<img src="images/segway2.jpg">
<p>
, 1200
: -, , -, ,
, , , , , ,
--, -.
</p>
<h2>14 , 2012</h2>
<p>
Burma Shave :
,
. ,
!
</p>
<h2>2 , 2012</h2>
<img src="images/segway1.jpg">
<p>
! ,
.
, :
, iPod, .
. :
.
</p>
</body>
</html>

118

Webville ,
, - , -,
. ,
,
.
,
. .
- . <q>
,
<blockquote>
.
,
,
.
( ) , .

, : HTML-. ,
, ,
, ( , , ?),
.
,
.
? ,

119

---
, , , .

Burma Shave.
.

? , :
Burma
Shave :

,
.

,

Burma


Shave,


...

,
!

<blockquote>.
<q>, , , <blockquote>
,
.

120

,
<blockquote>


.

<blockquote>
<blockquote> - .
1

journal.html 14 . , :



blockquote,
.

<h2>14 , 2012</h2>
<p>
Burma Shave
:

</p>
Burma Shave
<blockquote>
blockquote.


,
,
.


.

</blockquote>
,

<p>
p,

,
blockquote.
!
</p>

. journal.
html :

blockquote ( p),

,
.
,

,

.




.
.

121

: , , <q> ,
, ,
<blockquote>

-?

: , . <blockquote>,
, <q>

.

: ?

: . <blockquote>,
.
.

: ,
( )? ,
-.

, ,
.
,
, , .

: , <blockquote>
,
, <q>?

: <blockquote>
.
.
, Enter .
, .
,
.
,
,
<blockquote>.
. ,
<blockquote>
.

: . :
. , ,
.

122

? , <q> <blockquote>?

: .
<q> <p>,
<q> <blockquote>.
, -, - .
<blockquote> <q>
, ?

: ,
CSS.
, , <q>
, CSS.
<em> ?

: , ,
,
<em> -
,
,
. ,
, -
,
, <em> .
.
,
, CSS.

?
, <q> <blockquote>
, . <q> ,
<blockquote>
.
:
.

, <blockquote> <q> ,
.
( ).

123

<q> <blockquote>
, : <blockquote> <q> . <blockquote> , <q> ,
. ? ,
, ,
, .

h1, h2, ..., h6, p blockquote


.

h2

blockquote

q, a em .

q,

,

p
q

:
,
.
124

: , , ; -
Enter . ?

: . , , Enter. ,
HTML- , . , ,
, .

, ,
, ,

,
?
-?

,
HTML-. , .
.
:
-,
.
, ( ),
.
,
HTML- CSS. ,
,
HTML-.

125

br


Burma Shave.
,
,
,

,

,
,
.
?

, ,

,
?
?

, .
, <br>,
. :



14 .

126

<h2>14 , 2012</h2>
<p>
Burma
Shave :
</p>
br
<blockquote>

<br>
,
, <br>


. <br>


<br>
.


<br>
</blockquote>
<p>
,
!
</p>

<br> .
, .


. ,

Burma Shave!

127

1 ,
+ + .
<br> ? ,
!

. .
<br> , . ? ,
. , ,
, <br> .
, ,
<br></br>,
?

, ,
,

<br> ; - , , . ,
<img>. .

, - , . .
-
( , HTML- . .). , , HTML, , .
.
? ,
. - .
.

.

<br>

</br>

<br>


,
...
().

128

</br>

<br>

. ,

.

,

.

: , <br> : - ?

: . ,
, ,
( <p>, <h1> . .).
, <br>.

: <br> ?

: , ,
+ + . ,
, . ; , .

: . , <br>
?

: , , <h1> ( <p>, <a>).


- ,
:
<h1> , </h1>

<br>,
. , .
,
, . void
void element ( )
, :
.

? , <img>
, ?

: , . ,
<img>, .

-
? , ,
,
<a href="mypage.html">?

: . :
, <p>, <h1> <a>, ,
<br> <img>. . ,
<a href="mypage.html">, (
). <a href="mypage.html"></a>,
,
!

: <br>, <br/>.
?

: . , <br/>, ,
XHTML. , <br/>,
<br>, , XHTML ( XHTML
), <br>
HTML-.

, HTML-,
.
, <br> <img>,
. ,
HTML-.


129

...
:
,
- , , ,
(, , ).
. ,
, .
HTML .
? ? , .

.
,
.

, ,
, ? . , :
, 1200
.
1. -, .
2. -, .
3. , .
4. , .

,
,
,
, .

.

5. , .
6. --, .

130

, <p>

, <p>.
:
<p>
1.
</p>
<p>
2.
</p>


<p>? ( .)
 A. HTML
. ,
, ,
.
 B. <p>
, .
 C. , ,
.
 D.
, . .
: A, B, C D.

,


. <p>

.

.
HTML-, .
, .
, (
) ,
.

131

HTML-
HTML ,
.
. : () ().
, .


HTML- <li>.

, HTML- <li>. ,
<li>, </li>. HTML-,
. ,
.

HTML-

jou

rnal.html

L ,
HTM

.
.

<h2>20 , 2012</h2>
<img src="images/segway2.jpg" />
<p>
, 1200
:
-, .
</p>
.

<li>-, </li>


<li>-, </li>
li /li.
<li>, </li>
<li> , </li>

<li>, </li>
li <li>--,
.
-</li>

<h2>14 , 2012</h2>
<p>
Burma Shave
:
</p>

132


<ol>, <ul>.

<ol>, , <ul>,
. ,
<ol>.
-
HTML- .

<h2>20 , 2012</h2>
<img src="images/segway2.jpg" />
<p>
, 1200

:
,


</p>
,
.

<ol>
ol.

<li> , </li>
<li>-, </li>

<li>, </li>
ol <li> , </li>
.
<li>, </li>
<li>--, -</li>
</ol>
ol.

<h2>14 , 2012</h2>
<p>
Burma Shave
:
</p>

HTML

ul ol

= ul

<ol> ?
<li>?

= ol

= li

133


, HTML-,
, journal.html.
- :

,
.



ol,
,
.
,


, , li
!

,


(
).



-
.

,


?

134

: , iPod,
. 14 .
.
HTML- . ,
(,
<ul>). ,
.
, , . journal.html .

<h2>2 , 2012</h2>
<img src="segway1.jpg">
<p>
! ,
.
,
:

iPod


. :
<q>
</q>
</p>

135

: <ol> <li> ? : , ,
, ,
: , <ol> <li> ( , , ,
<ul> <li>) .
. , : <li> ,
<ol> .

:
<ol> <ul>?

: , <ol> <ul>
<li>.

: ?
?

: . . ,
CSS -.

: , ?
?

: , . <ol> <ul>
- <li>,
( ).

<ol>
<li> </li>
<li>
<ul>
<li> </li>
<li>iPod</li>
<li> </li>
<li> </li>
</ul>
</li>
<li> </li>
</ol>
li.
.

136

: HTML.
, . -
.
, ,
.

: , HTML
. - ?

: : .
:



dt
dd.

<dl>
<dt> Burma Shave</dt>
<dd> ,
19201930-
.</dd>
<dt> 66</dt>
<dd>
.</dd>
</dl>

: Burma Shave?
: , XX
, .
, , 1925 ,
(
).
, ,
. ,

7000. ,
, .

html
body
p
q



, . ,
<p> <body>.
,
. <body> <html>, <p> <body>,
<q> <p> . .
<head> <html>,
<title> <head>.
HTML-.
HTML, , . , , ,
.

q
p, body,
html.

137

,


-
. ,
, . . , :

-.


,
,


,
.

html .

html
:
head body.

html.

title
head.

body html,
,
body html.

html

head

body

title

138

<html>
<head>
<title></title>
</head>
<body>
<p>
,
<q>

,

.</q>
</p>
</body>
</html>

p
q,body
p,
html
body.

,

,
, ,
( ).


? :

<p> <em></em> Twitter</p>


p

HTML
, em
p.

em

, :

<p> <em></p> Twitter</em>


, , <em> <p>.

: p
em! ,
em
p.

p
em

em

: em
p.

: em p. , ,
, .

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


139


HTML-,

.



.
, ,
(
).

<html>
<head>
<title>-100</title>
<body>
<h1>-100
<h2>Dark Side of the Moon</h2>
<h3>Pink Floyd</h3>
<p>
; <q> .
</p></q>
<ul>
<li>Speak to Me / Breathe</li>
<li>On The Run</li>
<li>Time</li>
<li>The Great Gig in The Sky</li>
<li>Money</li>
<li>Us And Them</em>
<li>Any Colour You Like</li>
<li>Brain Damage</li>
<li>Eclipse</li>
</ul>
</p>
<h2>XandY</h3>
<h3>Coldplay</h2>
<ol>
<li>Square One
<li>What If?
<li>White 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>

140


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

.
,
.
, .

.
.

.

141

HTML,
, .

<html>.
? ,

?

,
.
< > ,
HTML-
. HTML
,
.
, . ,
-, (, ),
HTML. , > &gt;,
< &lt;.
, <html>
. , :
&lt;html&gt; .
, , & (). , HTML-, &amp; &.
, ( &copyright;)?
, ?
:
http://www.w3schools.com/tags/ref_entities.asp.
:
http://www.unicode.org/charts/.

142

: , ,
. www.
unicode.org .

: .

,
. ,

www.w3schools.com, ,
.
- ,
,

: , &
.
, &.
, , >
&gt;?

: , ! , &
, ,
.
, & ,
. -

& ,
,
&,
.

:
www.w3cschools.com, ,
. ?

: , ,
&#100 (
).
, ,
,
.


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



&#208;&epsilon;&tau;&#114;&ouml;&igrave;&tau;.
.
: http://www.w3schools.com/tags/ref_entities.asp
/ HTML- , .

143

<em>

<strong>

,


,

a.

,
,

, ,
.

<a>


,


,

.

<q>

<p>

,
.

<address>

<c
od
e>

<pre>

, ,

,

...

<br>

<ul>


?
,

ul.

<ol>

code

.

,
.


,
ol.

<li>
,


,
:

...

<li>

<img>


- ,

.

e>
ot
u
kq
oc
l
<b

,
, .
,
HTML !


.

144

.

,

,
.

.

-
. , HTML-


. ,

?

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

<p>, <blockquote>, <ol>, <ul> <li>


.
( ) ,

.

<q> <em> .
, .

<br>,
.

<br> .

,
, .

,
, .

,
.
,
.

HTML :
<ol> <li>; <ul> <li>.
,
.

, , <ol> <ul>
<li>.


HTML.

145

HTML-
, <q>. ?

...

q
/
.

<p>
! ,

. ,
:
, iPod, .
. :
<q>
</q>
</p>


...

, ,
?

: , iPod,
. 14 .
.
journal.html. , ?
<h2>2 , 2012</h2>
<img src="segway1.jpg">
<p>
! ,
.
,
.
:

</p>
<ul>
.
<li> </li>
<li>iPod </li>
<li> </li>
<li> </li>

</ul>
<p>
.
: <q>
</q>
</p>

146


li.



/
h1
. -

<html>
.
/head


<head>
.
<title>-100</title>
:
p q <body>
<h1>-100
Detroit!
: /p
<h2>Dark Side of the Moon</h2>

<h3>Pink Floyd</h3>
/q.
<p>
; <q>
.
</p></q>
<ul>

<li>Speak to Me / Breathe</li>
/em <li>On The Run</li>
<li>Time</li>
<li>The Great Gig in The Sky</li>
<li>Money</li>
/li.
<li>Us And Them</em>
<li>Any Colour You Like</li>
<li>Brain Damage</li>

<li>Eclipse</li>

/p,
</ul>
&#208;&epsilon;&tau;&#114;&ouml;

</p>
&igrave;&tau;.
<h2>XandY</h3>
p.
.
<h3>Coldplay</h2>
<ol>


<li>Square One


<li>What If?
/h2 /
h3.
<li>White Shadows
<li>Fix You
ol,
<li>Talk
/ul.
<li>XandY
<li>Speed of Sound
<li>A Message
li.
/

<li>Low


<li>Hardest Part
<li>Swallowed In The Sea

<li>Twisted Logic
ol, .
</ul>

</body>
</head>

/head;
/html.

147

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

:
HTML-, , !

h1

a
em

ul

br

li

ol

img

blockquote

.
,
.
, .


.
.

148

,
<a>
,


,

.


,
,

<a>

,
.

?
br
,

.
,

,

<p>.


,
img

.

,

5.

4
Webville

Webville!



.

- , . -,
.
,
. - .
- , ,
.
, h, t, t, p, :, /, /,
w, w, w. , , Webville.
: Webville, .
.

, 1

Starbuzz ,

?

Starbuzz
( )
, Starbuzz ,
, . ,
, ,
( )
- .
.
, ,

, .
. , .
.

(,
www.starbuzzcoffee.com).


( ).

, , ,
, .

,

, ,
- , . , .
HTML.
150


, ,
. ,
.
, .

,
( ,
HTML CSS), ,
.
,
.

? , ,

Head First Hip Web Hosting, Inc., , ,
. . ,
,
:
. , .

 :
?

.

:
, .
.
- ,
,
.

,

.

,

, -

HTML


,
.



,


,

.

: ,
.


. ,
, , ,
.

:
, ,
?

:
?
.

: ,
99 % .

:
-
,
,
(-, )?

151

, ...
, . google.com, facebook.
com, amazon.com, disney.com , , ,
.
, ? ,
. :
.

www.starbuzzcoffee.com

rg,

.o

: .com

;
p

u

k, .co.j
.gov, .ed

: .co.u


,
.
, .

,
.
(

).
-, .
( ICAAN). ,

. ( , ),

.



.
.
, , . , , , .
152

:
, ?

: .
www.starbuzzcoffee.com,
, starbuzzcoffee.
com .
, ,
corporate.starbuzzcoffee.com employee.
starbuzzcoffee.com. ,
.

:
Starbuzz,
www.starbuzzcoffee.
com? , www .

:
: starbuzzcoffee.com ,

www.starbuzzcoffee.com .
, , 100mainstreet.com.

, , :
home.100mainstreet.com, toolshed.100mainstreet.
com outhouse.100mainstreet.com.
, www.starbuzzcoffee.com
starbuzzcoffee.com.

: - ,
?
?
,
: www.dirtcheaphosting.com.

: ,
, .
( )
: -
-

, ,
,
. ,
,

( ,
).

: , , - , ?
?

: . , ,
, -
(
).

. ,

. , ,
.
,


.
, Head First
. ,
( , !).

:
:

153

! , ,
- ( ,
, ).
? , . ,

: .
, ,
, .


-. Starbuzz
. , :



Starbuzz.

starbuzz

<html>
.
.
.
</html>

index.html

?
Starbuzz (index.html)
:

,
on.html).
issi
(m

<html>
.
.
.
</html>
<html>
.
.
.
<html>

index.html

starbuzz
<html>
.
.
.
<html>

mission.html

mission.html

,

.
arbuzz-
St

starbuzzcoffee.com ( ,

).

154

-.


,

.

starbuzz

www.starbuzzcoffee.com

: , - -

: . -

, ,
,
( ).

: ,

:
, .
-
, ,
, .


,

.

images? ?

: , : , - : , mydomain_
com. ?

: . .

.
,
.
?

,
. ,

images, , .


Starbuzz : , ,
, .
-? ,
,
FTP, .
, FTP.
, .

.

<html>
.
.
.
<html>

index.html

starbuzz
<html>
.
.
.
<html>

mission.html

<html>
.
.
.
<html>

index.html

starbuzz
<html>
.
.
.
<html>

mission.html

www.starbuzzcoffee.com


155

FTP,
HTML CSS,
FTP . ,
, ( , ). ,
HTML CSS ( ).
, FTP-. , , , Dreamweaver
Expression Web. ,
, .
, FTP.


FTP.


,
.

ftp www.starbuzzcoffee.com
.
FTPsttar
arbu
b zz

.
www.starbuzzcoffee.com

cd,
,
.

,
,

zz

starbu

cd starbuzz

<html>
.
.
.
<html>

starbuzz

index.html

starbuzz
<html>
.
.
.
<html>

mission.html

starbuzz.

www.starbuzzcoffee.com


l
m
.ht
ex
ind

,
put.
l
.htm
ndex
put i
<html>
.
.
.
<html>

index.html

starbuzz
<html>
.
.
.
<html>

<html>
.
.
.
</html>

mission.html

index.html

starbuzz

<html>
.
.
.
</html>

i d h l
index.html

www.starbuzzcoffee.com

156

-
4


, mkdir.
mkdir images

,
,

,
.

<html>
.
.
.
<html>

index.html

starbuzz

starbuzz
<html>
.
.
.
<html>

mission.html

<html>
.
.
.
</html>

index.html

www.starbuzzcoffee.com

images
im


get.


images,
starbuzz .

get index.html

<html>
.
.
.
<html>

index.html

starbuzz

starbuzz

<html>
.
.
.
<html>

mission.html

<html>
.
.
.
</html>

index.html
<html>
.
.
.
</html>

www.starbuzzcoffee.com

index.html

.
FTP-
.

images

FTP-

,

,


.

FTP-

File Edit Window Help Jam

%ftp www.starbuzzcoffee.com

Connected to www.starbuzzcoffee.com .
Name: headrst

Password:******
.
in.
logged
230 User headrst

ftp> dir

drwx------ 4096 Sep 5 15:07 starbuzz

ftp> cd starbuzz
starbuzz.
CWD command successful
starbuzz
ftp> put index.html
.
Transfer complete.
index.html.
ftp> dir
-rw------- 1022 Sep 5 15:07 index.html
images
ftp> mkdir

Directory successfully created
index.html.
ftp> cd images
CWD command successful ,

ftp> bye

, FTP- FTP- ,
,
.


dir:
.

cd: .
.. .

pwd: ,
.

put <_>: .

get <_>: .

bye.

157

: : , : SFTP, FTP.
?

: SFTP, Secure File Transfer Protocol


( ),
FTP,
.
SFTP , FTP- .

: ,
,
, ?

. , , ,
, ,
, .
,

,
.
, Dreamweaver
Coda, .
,
.

-?

: ,
,

.


. ,

MS-DOS Linux, ,
.

FTP-
FTP- Mac

Windows.
Mac OS X:

tworks.com/)
 Fetch (http://fetchsof
Mac. $
FTP-
.panic.com/transmit/) $
 Transmit (http://w ww
) FREE
Cyberduck (http://c yberduck.ch/


Windows:
.smartftp.com/download/) $
 Smart FTP (http://w ww
.asp).
switch.com/products/file-transfer
 WS_FTP (http://www.ip

$
,

yberduck.ch).
 Cyberduck (http://www.c

158

FTP-

.

,

,
,


( , ).


, ,
.

( )
.

Starbuzz index.html mission.html


.

...
, -.
Starbuzz-: index.html
mission.html,
(, ,
, ).
, ,

. ,

<html>
.
.
.
</html>

index.html

starbuzz
<html>
.
.
.
</html>

mission.html

-
c http.
,
http.

http://

www.starbuzzcoffee.com

www.starbuzzcoffee.com
.

index.html


/.



.


159

URL
,
, , h, t, t, p, ,
, . ? -, -, ,
URL-,
.
, -,
, . , URL:

http://www.starbuzzcoffee.com/index.html
URL
,



.


.

.

- ,
, , .
URL-, , ,
, , HTTP.


http:///www.ea
rlsautos.com

160


(URL)
,


- ,
HTML, ,

-.
,

URL
,
,
.

HTTP-
HTTP . , () .
HTML-,
,
-.
HTTP - . , .

HTTP-:
/index.html?

HTTP-:
, .
www.starbuzzcoffee.com

, , URL ,
,
HTTP. ,
. , ?

,
URL
,
.
: --.

HTTP-:
/hardtond.html?

HTTP-: #404,
.
www.starbuzzcoffee.com

,
404, .


161


, HTML- <a>. , ,
. URL-, (HTTP)
(www.starbuzzcoffee.com).
,
. , , Earls Autos . ,
, Mini Cooper.
, inventory.html,
new. , , , , new, inventory.html.
, , new.
: ( /), cars, new , ,
inventory.html. , .

.

Earls Autos.

/
earls_autos

,


.

cars
/

cars

new


,
/
.

new

<html>
.
.
.
</html>

inventory.html

inventory.html

inventory.
html.

162

/cars/new/inventory.html

used

<html>
.
.
.
</html>

inventory.html

:
?

: ,
.
, ,
.

: ,
(, , ),
.

: ,


( ) . ?
,

( HTTP).
(
) ,
. ,
.

: href <a>. ,
?

: , .
,
,

, . ,
, -, .

:
HTML-,
?

: , ,

.

URL-


. URL-.
, (. ) URL (
). - ,
, .
,
www.starbuzzcoffee.com URL .

://

163

url

,

http://www.starbuzzcoffee.
com, index.html.
?

, . , , , -
. ,
:
http://www.starbuzzcoffee.com/images/

http://www.starbuzzcoffee.com/
, ,
.
index.html default.htm. - ,
.
, (
) , ,
index.html default.htm.

http://www.starbuzzcoffee.com,
.
/.

, . ,
, / , , .
, :
http://www.starbuzzcoffee.com
:
http://www.starbuzzcoffee.com/
, , ,
:
http://www.starbuzzcoffee.com/index.html
164


FTP,

images

.
.


,
.

http://www.
1
starbuzzcoffee.com/drinks/ .

2 HTTP-:
/drinks/?
3 :
.

,
?

5 HTTP-:
,
index.html
.

starbuzz
<html>
.
.
.
</html>

drinks

index.html

www.starbuzzcoffee.com
4
drinks
,
,
index.html.

: , ,
URL http://www.mysite.com,
index.html?

: . default.htm, , -
.
( , default.htm
l.
- Microsoft.)

, , index.php.
,
.
, ,
.

: , - URL,
index.html ?

: . . ,
-,
, , default.
htm?
index.php? URL, , .


165

URL-
, URL
A, B, C, D E. URL-,
www.earlsautos.com.

<html>
.
.
.
</html>

earls_autos

index.html
<html>
.
.
.
</html>

directions.html

cars

<html>
.
.
.
</html>

new

<html>
.
.
.
</html>

index.html

used

<html>
.
.
.
</html>

index.html
<html>
.
.
.
</html>

inventory.html

inventory.html

images

166

images
minicooper.gif

thunderbird.gif

element.gif

mustang.gif

.
URL

167

!
.
.

,

:
, ,
,
-
.

buzz.headrstlabs.com
?


URL- ,
. HTML.
, , Starbuzz : Starbuzz- http://wickedlysmart.com/buzz,
. , , ,
URL <a>. :

<a href="http://wickedlysmart.com/buzz"> </a>


,
.
a

URL href.

wickedlysmart.com/buzz.

, -, . , , <a> href.
Starbuzz- index.html.
168


index.html ( Starbuzz) chapter4/starbuzz
. , : mission.html .
, , index.html
. .
<html>
<head>
<title> Starbuzz</title>
<style type="text/css">

body {
background-color: #d2b48c;
margin-left: 20%;
margin-right: 20%;
border: 2px dotted black;
padding: 10px 10px 10px 10px;
font-family: sans-serif;
}

mission.html.
<body>
,
<h1> Starbuzz</h1>

<h2> , $1,49</h2>
<p>, , mission.html. .</p>
br,
<h2> , $2,35</h2>
<p>, .</p>

<h2>, $1,89</h2>
.
<p> .</p>
</style>
</head>


<h2>, $1,85</h2>


<p> , ,

b
r

,
.



</p>



<p>
.
<a href="mission.html"> </a>
<br>
<a href="http://wickedlysmart.com/buzz"> </a>
</p>
</body>

</html>


buzz.
wickedlysmar t.c
,
om/buzz

.

169

...

.
,



.

,

HTTP-
wickedlysmart.
com/buzz

170





URL-,

, www.
caffeineanonymous.com.

: , - : , .
:
URL-.

: ,
,
URL-
.

: URL-
, ?
?

: , , , .
, URL-
, -
: , HTML-
( ).
,
URL,
,
URL-, .
, ,
, , ,
href
<a>.
,
, URL-,
.

:
? file://
, -.

, . URL-
, , file:///chapter4/starbuzz/
index.html, , index.html /chapter4/starbuzz/.
-
.
, ,
URL , , URL-
, , HTTP.
: URL- HTTP
, .

: - ?
: , , FTP-. ,
, . HTTP ,
.

: URL, :
http://www.mydomain.com:8000/index.html.
:8000?

: :8000 , URL HTTP.


, ,
: ,
(, ). , (
80), - ,
(, 8000).
. -
80.
,
80.


171

PlanetRobots, Inc.
: PlanetRobot
Home PlanetRobot Garden.
. RadWebDesign,
,
Home , URL- ( ,
, , ).
CorrectWebDesign,
, ,
PlanetRobot Garden
.
,
PlanetRobots : ,
RobotsRUs. - www.
robotsrus.com. CorrectWebDesign
, ,
RobotsRUs.
RadWebDesign 4 , -, , ,
.
:
RadWebDesign ,
404
.
RobotsRUs , RadWebDesign BadWebDesign, CorrectWebDesign,
.
? RadWebDesign ,
-?

172

-
-? , , ,
Starbuzz, , ,
( ).
, , . ,
, . ,
.


, , ? ,
. , URL
(h, t, t, p, , , , w, w, w, ),
, .
<a> title, . , , <title>,
<head>. , : ,
title <title> -, .
, , title.
, title <a>:

<a href="http://wickedlysmart.com/buzz"
title=" "> </a>

title
,
.

, title, ,
. title
-, .
, , index.html
, , .

173

title

title ,
. ,


.


,
.

Head First
,
, .
 .

.

,
title.
 .
,
.


. ,
.
-,
. - ?

, , ?
 .

, ,
.

174

index.html Starbuzz title


mission.html
Starbuzz. ,
. .
, .

.
,

.
?


,
,
.
Starbuzz ,
: .
- ? , Head First
. ? ,
<a>. ,
<p>,
.

175

id
<a>
id; ,
id.
. id
. ,
id <a>.
1

,
. ,
.

, , , id .

, . ,
Starbuzz. :
<h2>, $1.85</h2>
<p> , ,
.</p>

, , .


index.html

.

.
chai. chai
chai
!
<h2 id="chai">, $1.85</h2>
<p> , ,
.</p>

id

.

,

index.html.

176


,
URL-. ,
# , .
, Starbuzz
chai, <a> :
<a href="index.html#chai"> </a>

,
,
.
http://wickedlysmart.com/buzz.
, .
1

<a> Starbuzz-
index.html , .

index.html .


,
HTML- wickedlysmart.com/
buzz. ?
View Source ( ). ,
, , ,
HTML- .


,
,
View
Source ( ).

177

, HTML ...
, , :

<b></b>
<b></b>.
.
</p>
, .
<h3 id="Coffee"></h3>
<p>
<i>
,
,
.</i>

. Coff
</p>
ee.

index.html
, ,
, :

Starbuzz index.html.

,
wickedlysmart.com/buzz,
index.html.
URL-,

.

#

href.

<a href="http://wickedlysmart.com/buzz/index.html#Coffee"
title=" "> </a>

Starbuzz-
index.html.
.

.

178

: , : - : .
? ,
title href?

: (

), .

:
, <a>?

: title


id. ,
href id ( ).
, ,
.

.

: . (,

: id

/index.html URL-
,
?
http://wickedlysmart.com/buzz#Coffee?

: , .
, id <em>, .
, ,
, .

: , id <a> ?

: !
: ,
chai ,
Coffee C.
?

: id,
Jedi Mindtrick, id
?

: : -

, , ,
,
title <h1>
, <a>.
, title - ,
,

.

(
id),
. (
, !).

) top,

. ,

. ,
top , <a href=#top> </a>.

,
id (AZ az),
(, ,
, ,
). ,
Jedi Mindtrick,
, ,
Jedi-Mindtrick,
Jedi_Mindtrick, JediMindtrick . .

,
: :
?

: , ,
URL- ,
id-.
http://wickedlysmart.com/
buzz/#Coffee, ,
, index.html. ,
, ,
, index.html.

: - ,
,
?

: , View Source
( )
, .

: <a>
?

: . <a> ( ),
( HTML5), <p> <blockquote>!
, <a>
.


179

, RadWebDesign
?
href URL-
,
http://www.planetrobots.com
http://www.robotsrus.com. ? 3 -
http://www.robotsru.com (
, ).
CorrectWebDesign, , . , <a href="../
products.html"> , : PlanetRobots
RobotsRUs. , ,
CorrectWebDesign,
.
, RadWebDesign ,
CorrectWebDesign , . . ,
RadWebDesign
, , ,
HTML CSS. ?

.

180

s
.


... ,
- ,
.
,
,
? ,
Starbuzz .


Starbuzz (
). :
Starbuzz,
.
.


Starbuzz.


,


,
Starbuzz
.

,

,


,

.

181

target
, , . - ,
. , ,
<a> target. .
target _blank,
. :

<a target="_blank" href="http://wickedlysmart.com/buzz"


title=" "> </a>
target ,
-,

href .
target ,

.
target

-blank,
.

: ,
. - ?

: , .
Starbuzz- index.html.
target <a>,

. ,
. ?

, , ,
, , . ;
, .
, ,
.

: , <a>
target? ,
? ?

: _blank target <a>,



target ?

182

.
, .
target _blank.
, coffee,
. ,
target ,
,
. _blank ,
.

target
, .
target ?
, .

.
Target: , . ,
.

?
Head First: ?
Head First: , Target, ,
!

Target: , , , Target: ,
?
.
Head First: , ? Head First: .
,
Target: , - , . , .
, ,
.
. ,
Head First: , .
. Target (): , , ,
, - , .
.
, , Target: -
... ,
( , . ?!
).
Head First: , , , . Head First: . , ,
.
, .
Target: ,
.

Target: , -
.

Head First: ?

Head First: ,
,
.

Target:

, .
Head First: , , ,
,
, ,

Target: .
; !
Head First: , Target!


183

-
, -.

, amazon.com starbuzzcoffee.com,
.


- . www.

index.html default.htm
, .
,
- , .

-,

, URL- href a. ,
URL-.

(FTP)
- .

, Fetch Mac WS_FTP


Windows, FTP, .

id
. # ,
.

URL , -,
- .

title,
a.

URL- ,
.

HTTP - ,
-
- .

target,
. ,

.

le://
.

, !
, ,
- .
? ,
5.

184

. URL-. ,
(. ) URL ( ). - ,
, . , www.starbuzzcoffee.
com URL .

http

://

www.starbuzzcoffee.com

/index.html

URL-

http://www.earlsautos.com/

http://www.earlsautos.com/directions.html

http://www.earlsautos.com/cars/new/

http://www.earlsautos.com/cars/used/inventory.html

http://www.earlsautos.com/cars/new/images/minicooper.gif

185

title mission.html
Starbuzz Coffee. ,
. .
; ?
<html>
<head>
<title> Starbuzz</title>
<style type="text/css">
body {
background-color: #d2b48c;
margin-left: 20%;
margin-right: 20%;
border: 1px dotted gray;
padding: 10px 10px 10px 10px;
font-family: sans-serif;
}
</style>
</head>
<body>
<h1> Starbuzz</h1>
<h2> , $1,49</h2>
<p>, ,
.</p>
<h2> , $2,35</h2>
<p>, .</p>
<h2>, $1,89</h2>
<p> .</p>


title


mission.html.

<h2>, $1,85</h2>
<p> , ,
.</p>

a.
<p>
<a href="mission.html"
title=" Starbuzz> </a>
<br>
<a href="http://wickedlysmart.com/buzz"
title=" "> </a>.
</p>
</body>
</html>

. gif, jpg png


, , .
, - .
, ?
. , -? . , ,
<img>?
,
. ,
.
187

html


<img> ,
. , , <h1> <p>. ,
, , . .
<img>, :
.
.
Head First,
<img>:
<html>
<head>
<title> Head First</title>
</head>
<body>
<h1> </h1>
<h2> </h2>
<p>
<img src="../images/green.jpg">


: , .
</p>
<h2> </h2>
<p>
<img src="../images/lightblue.jpg">
,
,
.
</p>
<h2>- </h2>
<p>
<img src="../images/blue.jpg">
,
,
.
</p>
<h2> </h2>
<p>
<img src="../images/red.jpg">
C
.
</p>
<p>
<a href="../lounge.html"> </a>
</p>
</body>
</html>

188

L HTM

,
,
http://http://wickedlysmart.com/lounge/:

elixir.html .

, .

elixir.html

<html>
<head>
<title>Another
<html>

Page</title>

<head>

</head>

<title>Head

<body>

First Lounge

<h1>Another

Elixirs</title>

Page</h1>

</head>

...

<body>

</html>

<h1>Our

<html>
<head>

Elixirs</h1>

<title>Another

...

Page</title>
</head>

</html>

<body>
<h1>Another
Page</h1>
...
</html>

<html>
<head>
<title>Head First Lounge
Elixirs</title>
</head>

<body>
<h1>Our Elixirs</h1>
...

,
.

</html>

elixir.html, ,
. ,
-, green.jpg.
HTML- ,
.

gre

en

,
.j p

<html>
<head>

<html>
<head>

<title>Another
<html>

.
g

Page</title>

<head>

Elixirs</title>
</head>
<body>

<title>Another
Page</title>
</head>

</head>

<title>Head

<body>
<h1>Another

<body>

First Lounge

<h1>Another
Page</h1>

Page</h1>
...
</html>

...
</html>

<h1>Our
Elixirs</h1>
...
</html>

,
.

189

green.jpg,
: lightblue.jpg.
green.jpg.

<html>

.
pg

,
lig

htb

lu e
.j

<head>
<title>Head
First Lounge
Elixirs</title>
</head>
<body>
<h1>Our Elixirs</

<html>
<head>
<title>
My Playlist
</title>
<head>
<body>
<h1>Kickn Tunes
</h1>
<p>BT - Satellite:
nice downbeat tune.
</p>
<p>
...

<html>
<head>
<title>Another
Page</title>
</head>
<body>
<h1>Another
Page</h1>
...
</html>

h1>
...
</html>

,
.

lightblue.jpg, ,
: blue.jpg.
.

,
bl
ue.

j pg

.

<html>
<head>
<title>Head
First Lounge
Elixirs</title>
</head>
<body>
<h1>Our
Elixirs</h1>
...
</html>

190

,
.

lightblue.jpg
.

<html>
<head>
<title>
My Playlist
</title>
<head>
<body>
<h1>Kickn Tunes
</h1>
<p>BT - Satellite:
nice downbeat tune.
</p>
<p>
...

<html>
<head>
<title>Another
Page</title>
</head>
<body>
<h1>Another Page</
h1>
...
</html>


, ? , . , : JPEG, PNG GIF. , ,
.

JPEG, PNG GIF?

JPEG

,
.

,
16 .
,


.
.
, -.
.

PNG GIF
,
PNG

,
, . ,
, .
PNG . PNG
: PNG-8 PNG-24 PNG-32
,
.
PNG , , .
, .
,
,
.

, JPEG-,
GIF-
.

PNG, GIF
, , .
, ,

.
GIF ,
256.
GIF
.
GIF ,
.

, JPEG-.
.

191

gif, jpeg png


?
, :

Head First: . -, ,
!

GIF: -
.

JPEG: , GIF PNG, .

PNG: , GIF, ,

256 ? .

GIF: ,
. , GIF
.
JPEG: !
, , , , ,
, 256 .
Head First: PNG, ?
-

GIF: , 8-
, .
JPEG: , -
, GIF?
, GIF.
GIF: , ? , .

PNG: , , ,
. ,
JPEG, ,
GIF. .

PNG: ,
GIF.
, .

Head First: ?

GIF: ?
, .

PNG: ;

.

PNG: , , !

GIF: ! .

GIF: ?

Head First: , - ?

PNG: ,
,
.

JPEG: . ,
,
.
. JPEG-.
PNG: , , -
, ,
, ? JPEG
.
Head First: -, JPEG . GIF PNG, ?
PNG: ,
, ,

: PNG-8, PNG-24 PNG-32.

192

Head First: , JPEG?


JPEG: , - ;
.
.
PNG: , ,
.
Head First: ,
,
, , , , GIF PNG,
;
, JPEG, ; PNG,
, ,
. !
PNG, JPEG, GIF: , , !!!

?
: . ,
.

JPEG PNG GIF

193

<img>

,
,

,
! JPEG, GIF...

?

<img>

: <img>.
.
, ,
HTML- . ,
... <img>.
, ( , ,
, ):

img.

img .
, ,
.

<img src="images/drinks.gif">

src ,
-.

,
img

.

, ? . , . , ,
<img>, , .
, <img>.
<img>,
.
194

<img>:
src ;
URL-. HTML-,
URL.
URL- , ,
(, , ,
).
, URL-:

<img src="http://www.starbuzzcoffee.com/images/corporate/ceo.jpg">
, URL, ,

src.

URL ,

. ,
,
.


( ).
. .
, , ?
? ,
HTML-. , URL-
http://wickedlysmart.com/hfhtmlcss/trivia/pencil.png.
:
<html>
<head>
<title> , </title>
</head>
<body>
<p> ?</p>
<p>
</p>
</body>
</html>

195

: , <img> : - : JPEG-
.
,
?

-... -, ,
.
?

GIF PNG, GIF-


PNG- JPEG?

: , . : -


. JPEG-
,
PNG GIF ,
PNG GIF
,
JPEG.

,
. ,
CSS,
.
,
. ?
, ?
?
-?

. , .

,

.

: ,


,
. Copy Image
Address ( )
Copy Image Link (
), URL- .
URL
Open Image in
New Window (
).
.
URL .

View Source (
) HTML-.
, , ,
URL,
.

. ,
<img> . ()?

: ,
,
HTML-,
. ,
, <img> .
HTML-.
<img>,
. ,
HTML- ,

.

196

: - , URL-,
?

: -

: -

: GIF PNG?
.

PNG ,
.
, , . ,
,
GIF. PNG ,

. GIF PNG,

. -, PNG
, GIF,

(
256), PNG-
.
,
GIF, JPEG (,
), PNG, ,
.
,
GIF, , .


, , ,
, .
, , ,
, ( ,
), , ... ?
, , .
, .
, ,
alt <img>. :

<img src="http://wickedlysmart.com/hfhtmlcss/trivia/pencil.png"
alt=" 35 .">
alt
.

,

- - , alt ,
.

, alt, . ,
, alt.
, .
, .
1

HTML- .

<img> , alt

35 .

pencil.png broken.png.
,
.

,
. ?

, .

)
w.mozilla.org/
Firefox (http://ww
w.opera.com/).
Opera (http://ww

197

<img>


<img>, .
, : width height. ,
.
, width height:

<img src="images/drinks.gif" width="48" height="100">


width ,
.

height ,
.

. , ,
. width height
. , , .

: ,

?

: HTML-,

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

, ,
,
, -

198

.
, ,
.
, ,

width height.

:
?
?

: , , ,
, , (

,
).

: , HTML
, . ,
-. ?

: , . ,
.
width height,

, , -.
, ,
CSS,
.

: myPod
iPod
.
myPod,
iPod
.

iPhone
!

, ?
HTML, iPod.
- HTML-
, .
. ,
,
; chapter5 .
mypod. .


chapter5.

mypod

iPod !
. 628

-

HTML-

myPod.
l.
tm
x.h
inde

<html>
.
.
.
</html>

index.html

iPod:
.

photos
seattle.jpg


photos .


:
ypod,
m
.

199

- ipod

index.html myPod
index.html, , myPod
. HTML-, :
.
CSS

. ,

,
.
!

CSS

<html>
<head>
<title>myPod</title>
<style type="text/css">
body { background-color: #eaf3da;}
</style>
</head>
<body>
HTML- ,
<h1> myPod</h1>
: h1, h2 p.
<p>

, iPod ,
. ? ,
, iPod: iPod Classic
iPod Nano, iPod Shufe iPod Video,
. iPod ,
myPod. , ?
</p>
<h2>, </h2>
<p>
iPod ! .
628 .
</p>

</body>
</html>

. ,
.

200


, HTML-, myPod . ,
, <img>
, .
seattle. video.jpg,
, . ,
.

<html>
<head>
<title>myPod</title>
<style type="text/css">
body { background-color: #eaf3da;}
</style>
</head>
<body>

<h1> myPod</h1>
<p>
, iPod ,
. ? ,
, iPod: iPod Classic
iPod Nano, iPod Shufe iPod Video,
. iPod ,
myPod. , ?
</p>
<h2>, </h2>
<p>
iPod ! .
628 .
</p>
<p>

</p>

img

.

</body>
</html>

201

!
, , ,
. , ,
, (
). , ,
, , ? , .


, ,

.
...

, .
.


,
.

.jpg,
attle
e
s

l.
.htm
index

,

... .



.
800


,

,
,



?

1200 .

202

: ,
?

. , 800
.

: - : . ,
,
. ,
,
,
.

: width
height, ?

: ,
, .

: , 800 .
?

: ,
. ,
. ( , ),
- 800 1280
,

,


.

: : 96 ,
. 72 (ppi pixels per inch),
, ,
CSS-. CSS- 1/96
(96 ). ,
3 3 : 96 () 3 () = 288 288 .

: , ?
: 800 .
, , ,
( ), ,
. ,
. , , ,
, . ,
, 100 200 .
. ,
, ,
,
. .

: ,
,
. ?

:


,
.

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


203


, . : 1200 800 ( , ).
, 800 , , - myPod .
iPod, , , ,
. 600 40 , ,
. ? ...
1200

600
800

,

,

800 . , 600 ,


.

400

204

( 600 400 ).

seattle_ video_med.jpg.


, ,


,
.
Photoshop Elements.
?

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

, .
, ,

. Mac,

iPhoto. Windows, Microsofts Digital
Image Suite. - , HTML-
.

Adobe
Photoshop

Elements,





3


0 .
: http://w
,
ww.adobe.
com/go/tr
yphotoshop
_elements.

205


-, seattle_video.jpg. Photoshop Elements
Open () File (), Open (). ,
seattle_video.jpg chapter5/mypod/photos.
).
Open (

,
seattle.jpg.

,
.

seattle_video.
jpg, Open
(),
.

206


, seattle_video.jpg ,
Save for Web ( ).
, Save for Web ( )
File ().

pg
ttle_video.j
sea

Elements.
Photoshop

, Save for Web


( ) File ().

207

()
Save for Web ( ),
; , .


,
.


.
JPEG -

.

EG
JP
GIF,
.


: 1200
800 .


,

,
.
GIF;
JPEG.

208

, .
. ,
600
400 . c JPEG.
...

(1)
: 600
400.
Constrain Proportions (
), ,
, 600,

400.

((2)

Apply (),
A

,
, .
Apply (),
;
.

209

,
(JPEG).
Medium ().
.

(1) ,
.

,
EG
JP
GIF;
.

(2)
Medium ().

(3) .

OK


.

,
, Apply
() ,

.

210


OK, . seattle_video_med.jpg, .
seattle med.jpg.
-

,
mypod/photos.

, seattle_
video.jpg
seattle_video_med.jpg. ?

,
.

seattle_video.jpg,
!


Save (),

.

:

Save for Web ( )?

: JPEG . ,
.
Save for
Web ( ), ,
,
, , .

(1

1024
).
Photoshop Elements
,

.

:

. ,
- .
, JPEG
.

: 30 JPEG Quality ()?

: 30 , Photoshop
Elements Medium
(). JPEG
1 100 %, Low (), Medium
(), High () . .
,

width height <img>, ?

: width
height, .
?
,

( ,
). width height
, ;
,

.

211

HTML- myPod
, Photoshop Elements.
, , - myPod index.html,
: seattle_video_med.jpg.
index.html, , .
<html>
<head>
<title>myPod</title>
<style type="text/css">
body { background-color: #eaf3da;}
</style>
HTML-.

</head>
index.html.

<body>
,
.
,
img
.

.

,
<h2>, </h2>
med.jpg.
: seattle-video<p>
iPod ! .
628 .
</p>
<p>
<img src="photos/seattle_video_med.jpg" alt=" iPod , ">
</p>
</body>
</html>

...
, ! , index.html
. . ,
.

.
,
,

.

212

?
: chapter5/
testimage/eye.jpg Photoshop Elements.
Save for Web ( ) (.
), JPEG (, , . .), PNG-24 GIF.
, .
, , .

.
.



PNG-8!

PNG-24

JPEG

JPEG

JPEG

JPEG

GIF

213

myPod
myPod : .
, 800 .
<img> ( photos).
<html>
<head>
<title>myPod</title>
<style type="text/css">
body { background-color: #eaf3da;}
</style>
</head>
<body>

,
.
.

<h1> myPod</h1>
<p>
, iPod ,
. ? ,
, iPod: iPod Classic
iPod Nano, iPod Shufe iPod Video,
. iPod ,
myPod. , ?
</p>
<h2>, </h2>
<p>
iPod ! .
628 .
</p>

<p>
<img src="photos/seattle_ video_med.jpg" alt=" iPod , ">
<img src="photos/seattle_classic.jpg" alt="iPod Classic , ">
<img src="photos/seattle_shufe.jpg" alt="iPod Shufe , ">
<img src="photos/seattle_downtown.jpg" alt="iPod - ,">
</p>
...
<h2>, </h2>
<p>
.
, iPod.
!
</p>
<p>
<img src="photos/britain.jpg" alt="iPod ">
<img src="photos/applestore.jpg" alt="iPod Apple">
</p>
</body>
</html>

214

myPod
;
, .
, !
- .
, ,
,
. ,
, , . -
, , ,
.
, ?
.

215

,

, (
).
. , .
1 .
2

150 100 thumbnail.

3 src

<img> index.html.
4


, . ,
, ,
. ,
, .
thumbnails mypod. , , .

mypod

<html>
.
.
.
</html>

index.html

photos

thumbnails


thumbnails
mypod.

216


, , .
seattle_video_med.jpg .
150 100 , , EG,
600 400 .
JP

Photoshop Elements
for Web
Save
( ).

).
150,

ium

Med

00



ply (
p
A

OK.

, OK
, thumbnail. : photos, .
photos.

?
.

150 100?

,
,
thumbnails

( ,
HTML, ).

.
, :
( 100 150)
150 100 .
. ,
,
150 100 .


217

HTML- ,
HTML- , <img>
thumbnails, photos.
, photos/seattle_video_med.jpg, . , ,
photos thumbnails <img>.
<html>
<head>
<title>myPod</title>
<style type="text/css">
body { background-color: #eaf3da;}
</style>
</head>
<body>
<h1> myPod</h1>
<p>
, iPod ,
. ? ,
, iPod: iPod Classic
iPod Nano, iPod Shufe iPod Video,
. iPod ,
myPod. , ?
</p>
, ,
<h2>, </h2>
photos thumbnails.
<p>
iPod ! .
628 .
</p>
<p>
<img src="thumbnails/seattle_ video_med.jpg" alt=" iPod , ">
<img src="thumbnails/seattle_classic.jpg" alt="iPod Classic , ">
<img src="thumbnails/seattle_shufe.jpg" alt="iPod Shufe , ">
<img src="thumbnails/seattle_downtown.jpg" alt="iPod -
,">
</p>
<h2>, </h2>
<p>
.
, iPod.
!
</p>
<p>
<img src="thumbnails/britain.jpg" alt="iPod ">
<img src="thumbnails/applestore.jpg" alt="iPod Apple">
</p>
</body>
</html>

218

myPod
---... .
, , . ,,
,

. ,,

.

,
,

?

;
.

, <img> .
, . <img> , ,
. , HTML-
<img> ,
, .
,
, , .
. ,
, , , .
, <img> .

219


.
. .


,

...

...



...

,

myPod.

.
1


, .

index.html
.

,
-.

220

...


html mypod
.

mypod

<html>
.
.
.
</html>

index.html

photos

thumbnails

html

HTML- .
seattle_video_med.jpg, HTML-
seattle_video_med.html. HTML-
, , .

, ,
,

.

HTML- . :
.

.

CSS,
.

<html>
<head>
<title>myPod: </title>
<style type="text/css"> body { background-color: #eaf3da; } </style>
</head>
.
<body>
<h1> </h1>
<p>
<img src="../photos/seattle_video_med.jpg" alt="iPod Video ">
</p>
</body>
</html>
img,

.
ed.jpg
eo-m
seattle-vid
alt.
img
, ..
, html
photos, , ,
photos.

221

<img> <a>

html
, , seattle_downtown.jpg.
seattle_downtown.html html .
, , . -
,
.

, -?
, HTML- .
index.html
href
html. ?

HTML-

-, <img>

<a>, :
a

img.
img
seattle-downtown.jpg,

index.html.

<a href="html/seattle_downtown.html">
<img src="thumbnails/seattle_downtown.jpg"
alt="iPod - , ">
</a>


a.

<img> <a>,
,
.
, ,
href.

222

seattle-downtow
n.html,

ht
ml.

img
a.

- index.html
. <img>
index.html <a>. , href
<a>
html. , , .
index.html. , ,
HTML-, .
<html>
<head>
<title>myPod</title>
<style type="text/css">
body { background-color: #eaf3da;}
</style>
</head>
<body>
<h1> myPod</h1>
<p>
, iPod ,
. ? ,
, iPod: iPod Classic
iPod Nano, iPod Shufe iPod Video,
. iPod ,
myPod. , ?
</p>
<h2>, </h2>
<p>
iPod ! .
628 .
</p>
<p>
<a href="html/seattle_video_med.html">
<img src="thumbnails/seattle_video_med.jpg" alt=" iPod Video , ">
</a>
<a href="html/seattle_classic.html">
<img src="thumbnails/seattle_classic.jpg" alt="iPod Classic , ">
</a>
<a href="html/seattle_shufe.html">
<img src="thumbnails/seattle_shufe.jpg" alt="iPod Shufe , ">
</a>

223

<a href="html/seattle_downtown.html">
<img src="thumbnails/seattle_downtown.jpg" alt="iPod downtown ,
">
</a>
</p>
<h2>, </h2>
<p>
.
, iPod.
!
</p>
<p>
<a href="html/britain.html">
<img src="thumbnails/britain.jpg" alt="iPod ">
</a>
<a href="html/applestore.html">
<img src="thumbnails/applestore.jpg" alt="iPod Apple store">
</a>
a.
</p>
</body>

</html>
href !

<a> index.html. , , myPod!

: <a> , .
?

: Internet Explorer , ,
( Safari ).
-, , ,
, CSS.
, ,
-, ,
, . ,

224

,
, .

: JPEG HTML-? ,
,
.

: , : <a href=photos/seattle_downtown.jpg> ... </a>.


, ,
. ,
- .

- myPod
!
,


.

.
myPod.
chapter5/mypod
, logo.
mypod.psd. PSD ,
Photoshop;

.
Photoshop ,
-, ,
.


PSD,
,
Phot
oshop Elements
,




.


PSD-
,



logo.

225

myPod
myPod: mypod.psd
chapter5/mypod/logo Photoshop Elements.


,


.

logo
chapter5/mypod.

...
; :
( click wheel iPod Classic).
? , . ,
...

,


.

226

?
, : JPEG,
PNG GIF. , .
, , , , PNG GIF.
; PNG
, . ,
PNG-8, 256 ,
.
, ! Save for Web ( ) File (), PNG-8
. . ...
,

,


.


GIF.

shop
Photo

Elements

,


PNG.



56.
PNG-8 2
.

PNG,
Transparency
().

.

?


Transparency (), ,
PNG
.



Matte ().
,
.

227

?
myPod - . ,
? ,
, ,
Save for Web ( ).
,

- .

,
.

(
).

, ,

Transparency ()
. ,

?

, .
Photoshop
Elements
.
? .

228

,


,

.
,
,
.

PNG-
, PNG,
, ,
. PNG Save for Web ( ).

,

PNG-8.


Transparency
().

Matte ()
. ,
-.


Matte ().

Matte ()
.

- -, ,

.

Other
(),

.

229

-f

, -?
CSS- index.html? - .
:

<style type="text/css">
body { background-color: #eaf3da;}
</style>

? ,
-? ,

.


Photoshop Elements Matte () Other (),
Color Picker ( ).

,
eaf3da

... .

230

()
, ! eaf3da Color Picker
( ). , ,
myPod.

,
.


Color Picker (
), OK,

.


. , -
. myPod , ,
-.


,
,


mypod.html.

231


, Save for Web
( ), OK,
mypod.png.


G.
PN

ng
d.p
po
my

logo.

- myPod
, ,
- myPod. ,
iPod.
, ,
.

<html>
-
<head>
myPod.
<title>myPod</title>

<style type="text/css">
,
body { background-color: #eaf3da;}
logo,
</style>
alt,
</head>

.
<body>
<p>
<img src="logo/mypod.png" alt=" myPod">
</p>
<h1> myPod</h1>
.
.

.
HTML- index.html.
</body>
</html>

232


!
, myPod- PNG .

d
myPo
.

.
.


myPod!

233

: , :
-?

-?

: . - : , :
. - ,
, ,
.
.
, , .

: ?
: myPod:

- ,
, . ,
, CSS.

: , ,
?

: ,
. , PNG, .

, , , ,
, .
.
, . ,
, .

: ?
: .
( )
, . Matte ()
Photoshop Elements ,
,
.

: ?
: , ,
. myPod
.

234



-,
,


-.

PNG GIF

.

<img>,
-.

JPEG, PNG GIF ,


.

<img> , HTML.
HTML- - .

JPEG .

GIF PNG

, .

JPEG
,
.

GIF PNG .
-, ,
, -,
.

GIF PNG , ,
, , ,
JPEG.

PNG
, GIF, , GIF,
256 .

PNG ,
: PNG-24 ( ), PNG-16 ( )
PNG-8 ( 256 ),
.

Photoshop Elements
PNG GIF- Matte
() Save for Web (
).

-.
-, <img>, <a>, href <a>.

-,
. ,
,
.

<img> . ,
.

src .
, src,
, URL-.

alt <img>
. , , ,
.

- 800 .
, ,
, , -, .
Photoshop Elements
, ,
. - .

- .
-

.

235

?
: .
,
.

JPEG PNG GIF



.

; PNG GIF.
? PNG
.

;
JPEG PNG;
, PNG.
- ; PNG GIF.
,
,
PNG.
.
(JPEG),
(GIF), ,
,
(PNG).

236

( ).
. .
, , ?
? ,
HTML-. ,
URL- http://wickedlysmart.com/hfhtmlcss/trivia/pencil.png.
. :
<html>
<head>
<title> , </title>
</head>
<body>
<p> ?</p>
<p>
<img src="http://www.headrstlabs.com/trivia/pencil.gif">
</p>
</body>
,

</html>
.
,


35 .

: http://www.papermate.com.

237

, .
alt, , . ? , - , ?
, - ,
, ,
, .

Internet Explorer
,
alt.

Chrome ,
alt.

Safari Mac
alt .

Mac Opera
alt.

238

Mac Firefox
alt.



,
,
.





JPEG?

PNG-24

32 K

13

JPEG

21 K

JPEG

6 K

JPEG

3 K

JPEG

2 K

GIF

22 K

? .
, .
, . ,
, .
, . , , .
. , , PNG GIF
( ).

239

html , , seattle_downtown.jpg.
seattle_downtown.html html .
, , .
:


HTML-
wn.html.
seattledownto

<html>
<head>
<title>myPod: - </title>
<style type="text/css"> body { background-color: #eaf3da; } </style>
</head>
<body>
<h1>- </h1>
<p>
<img src="../photos/seattle_downtown.jpg" alt="iPod - ,
">


</p>

.
html,
</body>

</html>

mypod.
mypod

thumbnails

photos

html

, seattle.jpg
index.html.

<h2>, </h2>
<p>
iPod !
. 628 .
</p>
<p>
<img src="photos/seattle.jpg" alt=" iPod , ">
</p>

240

6
HTML

HTML? HTML-.
CSS ? , ,
HTML . ,
HTML, , , - HTML. ,
HTML-, HTML5.
,
( , , ), ,
Apple, ( ). ,
, CSS,
. , !
241

html

, ,
.

CSS Head First, ,
, HTML
.

: ?
: , HTML-5.
: HTML- . , . .
: ,
.
: ,
, , .
, : ?!

:
, . HTML, ,
HTML 4.01 , , HTML5.
,
HTML5?
: , .
.
;
.
: , ,
.
: ? ?

242

: , HTML-
, .
, , , ,
. , ,
, ,
.
CSS, HTML ,
.
: , , HTML ,
,
?
: .
: ,
3 , .
: , ?
? HTML-?
: , ,
HTML5, ,
HTML , HTML5,
, ,
. ,
CSS.

-, HTML- . ,
-. ,
?

243

html

HTML

HTML 1.0-2.0
.
,
HTML, .

,
HTML.
,

. ,
- (,
, , ).

1989
244

1991

HTML 3

. Netscape
Microsoft
. , ,
,
, ?
-.
,
, ,
, .

. ,

-: Netscape, Internet
Explorer. .

1995

HTML 4
... , ,

( W3C).
,
HTML-,
.
?
HTML-
: (HTML)
- (CSS), , .
?
, ... ( HTML 4.01).

1998

HTML5-.
, HTML
,

.

HTML 4.01
4 01
, . HTML 4.01
1999

HTML .
4.01
4.0; .
,
HTML ( ), HTML 4.01
,
, (
,
)
-.

1999

HTML5

XHTML 1.0
10
,
.
XML. ,

HTML,
, XHTML 1.0.
XHTML -

-.
,
-
XHTML.

-, ,
HTML 4.01. -
HTML, XHTML.

-,
,
( -
)

2001

, ,

HTML HTML5.
,
HTML 4.01,
,
,
,

,
,
-, HTML5 .
- , HTML
XML ,
,
HTML5. ,
,
,
HTML5
.

2009

2012 ????

? ,
?
, .

245


, .

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

. , ,
- .

: . -,

HTML . ,
- ,
.

: , - HTML5
.

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

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

Head First: ,
HTML ? ,
HTML5.

Head First: ?
HTML? -,
.
: ,
,
.
HTML5 ,
, HTML . , HTML5 -
,
.
Head First: , ,
HTML-?
: ! , , ,
. .

, ,
.
Head First: ,
, HTML ?
: HTML DOCTYPE.
,
,
HTML-. , !

HTML

, HTML 4.01 XHTML 1.1.


DOCTYPE, HTML- ,
, HTML .
DOCTYPE.

.

,

html ()

- .

HTML 4.01
.

,

HTML 4.01 HTML
.

,

,
.

,
,

,
.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"


"http://www.w3.org/TR/html4/strict.dtd">

:

HTML.
!,

,
.

DOCT YPE
.


, .

-
HTML XML-.


XHTML 1.1 XHTML.

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

XHTML
.

URL-,
XHTML 1.1.

247


HTML5,
, , , .
HTML 4.01, :


html.

,
.

,
HTML 4.01
HTML-
.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"


"http://www.w3.org/TR/html4/strict.dtd">
,

HTML-
HTML 4.01. DOCTYPE,
-.
, , : , , HTML5?.
( , HTML5 , ,
!):

248

HTML5
, . HTML5:
<!doctype html>
!

;
.


? ,
? , ,
, , ,
.
,

HTML?
? ?

,


,
.

. , , : , .
HTML5 ,
, ,
, html;
, .
? html
? ?
, , :
<!doctype html>

, HTML.
, ; , HTML
, ,
. , , :
" "? ?.

249

html

HTML
6, 7, 8 HTML,
, , ,
. , . HTML5, HTML. ?
, ? ,
-? . , HTML,
, . ,
HTML-, , , .

Internet
Explorer 9,
Chrome 17,
Firefox 10,
Safari 5,
Opera 11.

, , - ,

:
? ?

:
HTML-, -
,
,
. ,
.

250

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



,

!

HTM
L -
,

:
?

: , ,
HTML,
HTML, .

(World Wide Web Consortium, W3C),

.

, ,
.
DOCTYPE

HTML5.


, DOCTYPE HTML.


DOCTYPE.
ge.html.
loun

DOCTYPE, doctype.
<!doctype html>
.
<html>
<head>
<title> Head First</title>
</head>
<body>
<h1> Head First</h1>
<img src="drinks.gif">
<p>
,
<a href="beverages/elixir.html"></a>
, ,
<em> -</em>.

( ).
</p>
<h2></h2>
<p>
Webville.
, ,
<a href="directions.html"></a>.
!
</p>
</body>
</html>

251

DOCTYPE
lounge.html chapter6/lounge
.

.
,

E,
YP
CT
, DO
,

ML5.
HT

DOCTYPE directions.html elixir.html. . lounge.html,


( ).

252

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

Head First: ?
?
HTML5: . (
3)! .
.
, , <article>,
-
.
Head First: 3
, ?
HTML5: , .
Head First: , ,
HTML ,
HTML5?
HTML5: ! HTML5 , , , HTML5
. HTML5
- . , HTML5. HTML,
HTML. HTML5
, .
Head First: ,
HTML5 ?
HTML5: . , , .
HTML, HTML5.

Head First: .
HTML5 , , HTML,
, , . , ,
,
HTML.
HTML5: .
Head First: : , -
-. ?
HTML5: ,
-;
-.
Head First: ?
HTML5: - , , . ,
, ,
. -
,
.
Head First: ?
HTML5: , ,
.
Head First: HTML5?
HTML5: , ,
,
, . ,
, .
Head First: , .
HTML5:
Head First HTML5 Programming ( HTML5).
- !
Head First: ! , HTML5!


253

html

;

,
HTML.

: , .

DOCTYPE , ,
HTML, ?
.
: , ,
, HTML. ( ) .
, , HTML-, , DOCTYPE.
: , HTML- ?
- HTML-?
: , ,
. , ,
, , , .
, , ?
?
: , ?
: ; , .
: ,
?
: , ,
, .
: ?
: ,
. , . - HTML.
: , . ?
: W3C, , , .
: , .
254

W3C-
W3C- .
, http://validator.w3.org .



HTML.

W3C-
org.
://validator.w3.
http

(1)

,
URL

,
Check,

(2)

. ,
Check,


, .

(3)
,

,
.
Check,

HTML.

255

alt

Head First
, Validate by Direct Input (
) lounge.html. , HTML- lounge.html , .
...

(3)
(3).

Validate by Direct Input ( ) lounge.html,


DOCTYPE HTML5.
... - ?
- ?
Check ( ), .

256


(1) (2),
.

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


.
,
.

,
.

W3C
-
.

- W3C
,
,
, .

,
.

.
,
alt
img.

257

html


, .
alt <img> HTML5. , !
lounge.html, , ,
.

<!doctype html>
<html>
<head>
<title> Head First</title>
</head>
<body>
<h1> Head First</h1>
<img src="drinks.gif" alt="">
alt.
<p>
img.
,
<a href="elixir.html"></a>,
, ,
<em> -</em>.

( ).
</p>
<h2></h2>
<p>
Webville.
, ,
<a href="directions.html"></a>.
!
</p>
</body>
</html>

, HTML5 alt?

258

...
! ; , .
. , . :


,
, W3C
(
).

, , ,
,
.


, ,
,
.

, HTML- ,
, , , - .
, .


259

,
,
,

.

: , . , , ,
.
: ?
a, a. ?
: , , ,
?
26 , .
: , .
? .
: , . , ,
, , , ? ,
.
- .
: , , . ?
: : , , ,
- ! ,
. ,
<meta>.
.
: - ? ,
- ,
.
: , , !
<meta> .
260

<meta>
,
. , , , ASCII ,
. ,
Unicode. Unicode
. ,
, Unicode ( ).
Unicode -, <meta> HTML-,
:
charset
,

.
meta
-

charset

<meta charset="utf-8">
.

ML,
HT
.
meta

utf-8
Unicode ( ). utf-8
, -.

: DOCTYPES, <meta>...
, -?

: DOCTYPE
<meta> , .
: 98 % , -,
. c
HTML- DOCTYPE <meta> .
, DOCTYPE <meta> HTML. -
.


,
,
. ASCII,
. Unicode
http://www.w3.org/International/O-charset.ru.php.

: <meta>, : <meta httpequiv="Content-Type"


content="text/html;charset=utf-8" >. ?

: utf-8?
: . <meta> HTML 4.01 .
HTML5 <meta
: . WD-40 ( - charset="utf-8">.

). :
, , . , utf-8 (
UTF-8) Unicode. u
utf-8 Unicode. Unicode , -

utf-8 1?

: . , ,
, , <meta>.


261

meta

( ), <meta>
<meta> <head> (, <head>
). <meta> HTML-.
lounge.html:
meta.
<!doctype html>
head title.
<html>
<head>

<meta charset="utf-8">
head.
<title> Head First</title>
</head>
<body>
<h1> Head First</h1>
<img src="drinks.gif" alt="">
<p>
,
<a href="elixir.html"></a>,
, ,
<em> -</em>.

( ).
</p>
<h2></h2>
<p>
Webville.
, ,
<a href="directions.html"></a>.
!
</p>
</body>
</html>

? ? -,
lounge.html, .
, .
.

262

?
(Validate by File Upload ( )).
,
. , lounge.html
- W3C http://validator.w3.org. ,
Check.



HTML5.
!


(. ).

!
,
HTML- ,
, ,

HTML5.

,
. .

263

: ,
HTML5. ?

: Using experimental feature: HTML5 Conformance


Checker ( :
HTML5) ,
HTML-, HTML5,
(
- ), ,
100%. ,
, ,
HTML .

: ?
, .

:
, HTML.
? , ,
. -
, , ,
DOCTYPE, (
alt) HTML-.

: alt?
: . -,
- - (,
-
), alt ( )
,
. -, ,
,
, alt,
-.

: , , HTML5,
?

: ,
HTML5, ,

264

, . , , , ,
- .

, HTML5.

: - HTML,
, HTML5?

: HTML, HTML5.
HTML5 - ( ),
-, HTML5
HTML, HTML5-.
HTML,
, HTML5.
HTML5, , , ,
HTML- HTML-,
.

: HTML5 HTML 4.01?


: HTML5 . -,
HTML5 (, <video>), - ,
( ).
-, HTML5 ,
- -
HTML. - -, (
,
), -.
-, ,
, Head
First HTML5 Programming (
HTML5) (OReilly).
, HTML5 ,
HTML. , ,
, -?
, ? ,

, ,
.

. <meta> directions.html elixir.html.


. ? ,
, .


, .

. ,
HTML5 ( . 263),
DOCTYPE. , , ,
. .
.
<!doctype html>
DOCTYPE!
<html>
<head>
<meta charset="utf-8">
<title> Head First</title>
</head>
<body>
<h1> Head First</h1>
<img src="drinks.gif" alt="">
<p>
,
<a href="elixir.html"></a>, , ,
<em> -</em>.

( ).
.
</p>
<h2></h2>
<p>
Webville.
, ,
<a href="directions.html">detailed </a>.
!
</p>
</body>

</html>

ML,
HT
.
CT YPE?
DO
?

265

HTML-,
HTML-, , - . , Webville
-, . Webville,
-. - ,
, Webville
. .

266

Webville- HTML
HTML- .
:
<doctype>.

<doctype>.
, .

<!docytype html>,
HTML 4.01
XHTML.
<html>: .

DOCTYPE <html>,
-. , DOCTYPE <html> , </html> ,
.

<head> <body>,
HTML- .

<head> <body>
<html>. ,

<head> <body>. !
<head>
.

<meta charset="utf-8"> <head>.


,
,
.

267

html

Webville- HTML ()
HTML- .
:
<head> <title>?

<head> <title>.
. , HTML
.
<head> , <title>, <meta> <style>.

.

, ,
. ,

.
<a> <a>,
.
: ,
<img>.

HTML-!

,
. , <img> scr,
, , alt . ,

.

268

HTML

HTML. , .
HTML 4.01, -

-, .
HTML 3.2,
, . , , HTML.
<html>
<head>
<title> Webville</title> ,
</head>

: bgcolor

, text
<body bgcolor="tan" text="black">
body.

<p>

<font face="arial">Webville</font> ,
.

</p>
face.

font
<ul>
<li>: 15 C.
<li>: 16 C.
</ul>
<p align=right>
!



-
, /li /p.
!
,

. ,
.

<center><font size="small">
Lou Diner, Webville 50 .
</font></center>
</body>
</html>
.

.

font
size.

269

html


HTML-.
,
, .
,
,
.
,

(


).

,

<html>
<head>
<meta charset="utf-9">
</head>
<body>
<img src="chamberofcommerce.gif">
<h1>: , Webville

<p>
,
Webville.
</p>
<ul>
<li> head ()
body () html.</li>
<li> , .
.</li>
<li>
- CSS.
</ul>
</p>
<p>
- ?
<a href="http://www.wickedlysmart.com"><em>WickedlySmart</em></a>.
? , Webville
. - . , :
</p>
<em><p>
. .
</em></p>
</body>
</html>

270

, HTML-
,
,
, .

CSS.
, ?

HTML 5 HTML.

(W3C) , .
, HTML.

-
utf-8 HTML-,
charset <meta> .

alt
<img>.

(DOCTYPE) , , HTML
.

HTML ,
,
- .

W3C , .

, ,
HTML ,
.

<meta> <head> -,
.

charset <meta> , .

,
, CSS
.

271

doctype .


utf-9 (
!)
utf-8.

HTML.
,
,
.
.

<html>
<head>
<meta charset="utf-9">
head </head>
<title.
<body>
/h1.
alt.
<img src="chamberofcommerce.gif">

<h1>: , Webville
<p>,

.
<p>
,
Webville.
</p>
<ul>
<li> head ()
body () html.</li>
<li> , .
.</li>
<li>
- CSS.
/li.
</ul>

,
,
/p
</p>
.
p

<p>

- ?
<a href="http://www.wickedlysmart.com"><em>WickedlySmart</em></a>.
? , Webville
. - . , :
</p>
em p .
<em><p>
. .
</em></p>
</body>
</html>

. DOCTYPE <meta> directions.


html elixir.html. .
? , , .
: elixir.
html, alt <img>.

272

. ,
HTML5 ( 241), DOCTYPE. , ,
, .
. .
<!doctype html>
DOCTYPE!
<html>
<head>
<meta charset="utf-8">
<title> Head First</title>
</head>
<body>
<h1> Head First</h1>
<img src="drinks.gif" alt="">
<p>
,
<a href="elixir.html"></a>, , ,
<em> -</em>.

( ).
.
</p>
<h2></h2>
<p>
Webville.
, ,
<a href="directions.html">detailed </a>.
!
</p>
</body>
</html>
,
DOCTYPE.
, HTML 4.01 Transitional ( HTML 4.01, ,
XHTML. DOCTYPE, .
meta charset=utf-8, charset HTML5
meta. , DOCTYPE , .

.
?

273

7 CSS


, ,
.
,
,

HTML-?

, CSS.
HTML, -. , ,
. ,
, . CSS, HTML-. ?
, , , Webville .
, CSS,
, .


?
-
.


, , , ,
,
, -.
: ,
HTML, .
,
HTML
( ) CSS,
.

, . , ,
? ,
, ? ,
CSS.
...

276

c css

277

css

, -
Webville
-?
: , $1000.
, $1000,
48 . ...
...
!
,
...
bedroom {
drapes: blue;
carpet: wool shag;
}

, Webville, CSS. ,
: CSS (, bedroom), -
(, drapes carpet)
(, white,
1 1in).
278

bathroom {
tile: 1in white;
drapes: pink;
}

c css

CSS HTML
, , , CSS
, HTML. , ,
, .
<p> ? ; , ,
, ,
background-color. :
,
,
,

.

, CSS

p.
.


, ,
p.

p {
background-color: red;

,
.



p
{
}.

:
p { background-color: red; }

, , . CSS , . ,
( ).

?
CSS- , . , . , :
p {
background-color: red;
border: 1px solid gray;
}

p
...

, ,

.

,
... 1
.
,

279

css html

: <p> ? , ,
?

: CSS, ,
, CSS :
,
.
, .

: , ?
: , , , ,
. . , ,
CSS. -.
,
OReillys CSS Pocket Reference.

: , , HTML. ,
HTML,
?

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

280

, <em>
. ,

<em> ,
,
?

c css

CSS HTML
CSS. ,

. , CSS- HTML.
- HTML-, CSS.
Starbuzz ,
. ,
? , Head First. , HTML . , -
, HTML ( ?).
,
.

,

.


.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title> Head First</title>
style.
, :
<style>
CSS HTML,
</style>
style head.
CSS
</head>
<body>
.
<h1> Head First</h1>
<p>
<img src="images/drinks.gif" alt=""/>
</p>
<p>
,
<a href="beverages/elixir.html"></a>,
, ,
<em> -</em>.

( ).
</p>
<h2></h2>
<p>
Webville.
, ,
<a href="about/directions.html"></a>.
!
</p>
</body>
</html>


281


, <style> HTML-, ,
, CSS. ,
, - .
, , ( , ) . CSS- color:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
, <title> Head First</title>

<style>


color (, ,
font-color
text-color, ).

p {
color: maroon;
}



-
,


.


</style>
p, </head>
<body>
<h1>

Head First</h1>

<p>
.
<img src="images/drinks.gif" alt=""/>
</p>
<p>
,
<a href="beverages/elixir.html"></a>,
, ,
<em> -</em>.

( ).
</p>
<h2></h2>
<p>
Webville.
, ,
<a href="about/directions.html"></a>.
!
</p>
</body>
</html>

282


HTML.

c css


, . ,
, lounge.html chapter7/lounge,
. , -.


,
: -

,


p.

,

.
...

, <p> -
, ?
?

283


. ,
?
, :
h1 {
font-family: sans-serif;
color:
gray;
}
h2 {
font-family: sans-serif;
color:
gray;
}
p {
color: maroon;


?
.
,
, ...



, h1


-serif
sans

.
.


,
h2
.

,
:

h1, h2 {
font-family: sans-serif;
color:
gray;
}



,


h1, h2.
,

p {
color: maroon;
}

CSS- lounge.
html . ,
<h1>, <h2>.


.
sans-serif

284

c css


.
, ?
.
, :
border-bottom: 1px solid black;

,


.
1

,
h1, h2 CSS, , :

h1, h2 {
font-family:
sans-serif;
color:
gray;
border-bottom: 1px solid black;
}


.
h2

h1

p {
color: maroon;
}

...
...


.
,
.

,
<h1>, <h2>?
? , ...

285

:
<h1>
h1, h2 ,
h1,
.
h1, h2 {
font-family:
color:
}

sans-serif;
gray;

h1 {
border-bottom: 1px solid black;
}
p {


.
h1 h2



h1:

.

color: maroon;
}


CSS- . ,

, .

,
.

286

c css

: , - : ?

?

: , .
,
. ,
,
<h1> <h2>,
,
,
.


,
, ?

: . - ,
.
,
,
.

:
?

: . ,
.
-
: ,
,
. , ,
text-decoration,
, underline.
,
.


, , :

.
h1 {
color: gray;
}

;

.
h1

, :
. h1 h2.
h1, h2 {
color: gray;
}

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


287

, HTML-
3?
. -,
. HTML- (
), , . , . .

html

head

body

title

html

title

img

h1

body
p

em

h2
meta

head

288

style

c css

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title> Head First</title>
<style>
h1, h2 {
font-family:
sans-serif;
color:
gray;
}

HTML
Head First.

h1 {
border-bottom: 1px solid black;
}
p {
color: maroon;
}
</style>
</head>
<body>
<h1> Head First</h1>
<p>
<img src="images/drinks.gif" alt=""/>
</p>
<p>
,
<a href="beverages/elixir.html"></a>,
, ,
<em> -</em>.

( ).
</p>
<h2></h2>
<p>
Webville.
, ,
<a href="about/directions.html"></a>.
!
</p>
</body>
</html>

289


,
,
. h1 :
h1 {
font-family: sans-serif;
}

html

head

body

h1


h1
.



,

body,
head
-

h2

img

em

, h1, h2:
html

h1, h2 {
font-family: sans-serif;
}

body

h1


h1 h2.

h2

img

em

p,
:
html

p {

body

font-family: sans-serif;
}
h1


p .

290

h2

img

em

c css


- , :

p, h2 {
font-family: sans-serif;
}

html

body

h1

h2

img

em

p, em {
font-family: sans-serif;
}
html

body

h1

h2

img

em

291

css



RadWebDesign 4, RobotsRU. CorrectWebDesign
RobotsRU ,
,
. , RadWebDesign HTML
CSS RobotsRU, ,
, ,
.

RobotsRU
, : CorrectWebDesign
RobotsRU
: , , , . ,
CorrectWebDesign ,
, . ! , , , RadWebDesign
.
, .
CorrectWebDesign
, ?
RadWebDesign , .

.
RadWebDesign
-? -
?

292

c css

, ,


?



, lounge.html,
elixir.html directions.html?
, .
style ,
? . ,
. , .
1

lounge.html lounge.css.


lounge.html.

elixir.html directions.html.

293

css-

lounge.css
, lounge.css, Head First.

lounge.
lounge.css.

e
css loung
).

<html>
.
.
.
</html>

lounge.html

lounge

CSS-
.

h1, h2 {
fon
col
}
p {

lounge.css

green.jpg
g

about

<html>
.
.
.
</html>

beverages

<html>
.
.
.
</html>

images

blue.jpg
drinks.gif

directions.html

elixir.html
red.jpg lightblue.jpg

lounge.css (
lounge.html) CSS-. ,
lounge.html.
, <style> </style>
, lounge.css CSS HTML.
h1, h2 {
font-family: sans-serif;
color: gray;
}
h1 {
border-bottom: 1px solid black;
}
p {
color: maroon;
}

294

lounge.css
.
:
style!

c css

lounge.html CSS-
, . , HTML- <link>.
, HTML-:
HTML-,
<!doctype html>

<html>

<head>
.
<meta charset="utf-8">
<title> Head First</title>
<link type="text/css" rel="stylesheet" href="lounge.css" />
<style>
</style>

style
.
</head>
<body>
<h1> Head First</h1>
<p>
<img src="drinks.gif" alt=""/>
</p>
.
.

.
HTML-
</p>
.
</body>
</html>

HTML
<link>, :

link,

text/css.
, CSS. HTML5
(
),
-.


href (


,
URL-
).

<link type="text/css" rel="stylesheet" href="lounge.css"/>

rel HTML , .
, stylesheet.

link

.

.


295


elixir.html directions.html
elixir.html directions.html
, lounge.html. ,
, elixir.html beverages,
directions.html about, ../lounge.css.
, , , <link> :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> Head First</title>
<link type="text/css" rel="stylesheet" href="../lounge.css"/>
</head>
<body>
.
.
elixir.html.
.

link.
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> Head First Lo</title>
<link type="text/css" rel="stylesheet" href="../lounge.css"/>
</head>
<body>
.
.

directions.html.
.
link
.
</body>
</html>

296

c css


lounge.html .
,

.
.
!
,

HTML-!
CSS.

297

css

, RadWebDesign
-? -
,
CorrectWebDesign
? , CorrectWebDesign RobotsRU,
1998 .
HTML- ( ) , ,
, <font> <center>,
(
HTML). ,
, , CSS-. ,
, HTML-
.
RadWebDesign? HTML5, HTML,
, . ? ,
CSS-,
, .
, CSS-.
RobotsRU
RadWebDesign,
, .

298

c css


, ( ), , sans-serif. ,
. , ,
, font-family,
sans-serif. .

.
erif
s-s
san

serif,

.

.

299

, ( ),
, sans-serif.
, . ,
, , font-family,
sans-serif. .

h1, h2 {
font-family: sans-serif;
color:
gray;
}
h1 {
border-bottom: 1px solid black;
}
p {
font-family:
color:
}

sans-serif;
maroon;


lounge.css fontfamily .

,
?
?
, , -
<blockquote>,
?
sans-serif
?

300

c css


?
font-family p, , <p>. .


p,
font-family


.
p
,


.

, <p>,


,
,
, . <a> <em> <p>, .

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

.



p.

h1

img ,

,
.

html

body

h2

img

em

a, em
a


p.

301

body

, font ?
, font-family , <body>, , ?
<body> , ,
.

font

dy.

bo

ily
fam

html


font-family.

body

h1

,

.

img

h2

em

, !
font-family body,
.

?
lounge.css
<body>. font-family
, .
body {
font-family: sans-serif;
}

.




body.
serif.
sans font-family

h1, h2 {
font-family: sans-serif;
color:
gray;
}
h1 {
border-bottom: 1px solid black;
}
p {
font-family: sans-serif;
color:
maroon;
}

302

fontfamily h1, h2,


p.

c css

CSS-
, . , lounge.css, lounge.html
. - , .
, , , CSS- ,
sans-serif.

, ! ,
, , ?
, ,
sans-serif body .

,
sans-serif
body. , -
?
font-family
body
?

303


font-family body, . , , sans-serif ?
, , <em>
serif.
html

body

h1

h2

img

em

-family font
body,

,


,
dy
bo

-serif.
sans

e
m


serif?

CSS-
.

, , , <em>.
, <em>
font-family, body:
body {
font-family: sans-serif;
}
h1, h2 {
color:
}

gray;

h1 {
border-bottom: 1px solid black;
}
p {
color:

maroon;

}
em {
font-family: serif;
}

304



body,

font-family,


serif

em.

c css

CSS- <em> serif fontfamily lounge.html.


, -,
em,
serif.

, ,
,
( em).

: ,
<em>,

?

: CSS
. ,
<body> , <em>,
. ,
.

, (
) (
), . , ,
, , ?
, <body>
, ,

.
,
, .
, ,
.

: -
, ,
?

: . CSS, /* */. :
/*
*/

, ?

, .
CSS- , ,
:

: ,

, ,
?

/* ,

: , CSS- CSS Pocket Reference OReilly. ,



, ,
, , -

: .

p { color: blue; }

, ,
.

, ,
CSS !

*/

305

,
,
,

.
?

,
, ,
, .
, ?
,
p <p>. ?
- .
HTML CSS , , ,
. ,
,
. ,

, . ,
,
.
: class
HTML-;
CSS.



...
,
.

306

c css

greentea
elixir.html .
. , ,
<p> greentea. :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> Head First</title>
<link type="text/css" rel="stylesheet" href="../lounge.css"/>
</head>
, <body>
class
<h1> </h1>
, <h2> </h2>
, greentea.
<p class="greentea">
<img src="../images/green.jpg" alt=" "/>

: ,
.
</p>
<h2> </h2>
<p>
<img src="../images/lightblue.jpg" alt=" ">
,
,
.
</p>
<h2>- </h2>
<p>
<img src="../images/blue.jpg" alt="- ">
,
,
.
</p>
<h2> </h2>
<p>
<img src="../images/red.jpg" alt=" ">
C
.
</p>
</body>
</html>

, greentea,
.


307


CSS , :


,
.,
.

p.

,
.

p.greentea {
color: green;
}

,

,
greentea.

p.greentea

gre
entea.

, <p>, , . , , class <p>,


. . : lounge.css
p.greentea.
body {
font-family: sans-serif;
}
h1, h2 {
color: gray;
}
h1 {
border-bottom: 1px solid black;
}
p {
color: maroon;
}
p.greentea {
color: green;
}

308

c css

greentea
,
.

greentea .
,


. ,
-
.


: raspberry blueberry,
elixir.html,
,
. raspberry
blue, blueberry purple. CSS-,
greentea: raspberry,
blueberry.

,

. ,
. ,
,
, ,

.
,
.

309


greentea,
:
p.greentea {
color: green;
}


<blockquote>, :
blockquote.greentea, p.greentea {
color: green;
}

HTML- :
<blockquote class="greentea">

, blockquote, greentea.

p blockquote
greentea.

,

<h1>, <h2>, <h3>, <p>
<blockquote> greentea?

?

, .
,
greentea,
:
.greentea {
color: green;
}

, (.)
,

.

310

c css

!
. ...
-
.
.

?

,
.
. , <p>,
greentea,
raspberry blueberry. ,
:
<p class="greentea raspberry blueberry">

, ,
<h1>
products,
, specials,
,
?


class

. , ,
.
<h1>, ,
, . specials
,
,
, .
, , :
,
,
( <p>, )?
, ? , color. , : , ?
, CSS,
,
.


311



, , , ... .
, ? ,
CSS, .
- .

, ?
, font-family . ,
: CSS- .
font-family ,
.

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

?
,
, . ,
, .

?
, , , :
<p class="greentea raspberry blueberry">

, ,
color. . ? ,
. ?
, ,
, - :

p { color: black;}
.greentea { color: green; }


p.
greentea.
.

p.greentea { color: green; }


p.raspberry { color: blue; }
p.blueberry { color: purple; }

312


greentea, .

. p.greentea .

c css

?
, greentea,
: p.greentea , . : greentea, raspberry
blueberry. , p.greentea, p.raspberry p.blueberry
p . ?
CSS-. ,
,
. , CSS- (
). p.blueberry.

elixir.html
, :
<p class="greentea raspberry blueberry">
.
?
HTML-:
<p class="raspberry blueberry greentea">
. ?
CSS- p.greentea .
.
?
, p.raspberry .
. ?
, , ,
:
<p class="greentea">
.
?

313

: css html

: CSS HTML.

CSS

HTML

? !
<style>
. 1 ,
.
;
, - .
? ; ,
.
... ,
,
.
, ,
.
, , ; CSS .
( ) , , .
,

HTML,
class.
, .
.
, ... <>?

314

c css

CSS

HTML

,
,
1990- .
. , ?
, . ?
? . , .
, .
?

-; ,
.
.
,
, .
... ,
, .
. , .
--! , ,
<style>? ,
, .
, ... ?!

315

?
, <body> ,
. .
, <body>. CSS-, .

body

h1

h2

h2

em

img

em

body {

n;
color: gree

}
p {
}

316

k;
color: blac

blockquote

em

CSS-. ,
,

.

c css

CSS-
, , ,
.
.

s.
style.cs

CSS-,
.


.
,

.

<style>
body {
background-color: white
h1, {
gray;
font-family: sans-serif;
}
h2, p {
color:
}
<em> {
font-style: italic;
}
</style>

317

css


...

CSS,
HTML?

, !
W3C-
, . CSS- :
http://jigsaw.w3.org/css-validator/

URL ,

. ,
, HTML.
URL- CSS-, ( )

( ) .

DOCTYPE CSS.
, !
(
,
).

318

c css

, CSS-
, CSS- Head First
, .
, W3C. CSS
, URL-
. CSS- ,
( , ,
CSS-, HTML-). ,
Check ().

,
, ,
.

.

! CSS-

CSS 2.1 (

CSS 3,

,

CSS-

).

,



-,

CSS-
,


-).
HTML

:
?
?

HTML, ,
CSS-.
!

: , ,
, .

, .

319

top

letter-s
pacing

background-color

color

.



,
.

,
,

.

,
.


color


.

ght
wei
t
fon
left

gn
text-ali

tyle
s
t
fon

border






.

,
. .

padding

style
list-



,
,
padding.



.

ge


ma

li
ne
-h
fontei
size
gh
t

-i
nd
u
ro
kg
c
ba

CSS
.

,
,


CSS.

320

,

.

c css
,


. ,


.

CSS ,
.

. ,
<body>,
.


HTML-.

, ,
.

, .

,
class.


, , .,
.

,
.

, ._.

, .


HTML <style>.

, . class .

CSS- , W3C, http://jigsaw.w3.org/


css-validator.

HTML-

.

<link> .

321

html

,
HTML 3?
.
:

head

body

title

html

body

head

meta

322

title

style

h1

h2

img

em

c css

p, h2 {
font-family: sans-serif;
}
html

body

h1

h2

img

em

p, em {
font-family: sans-serif;
}
html

body

h1

h2

img

em

323

: raspberry blueberry,

elixir.html,
,
.
raspberry blue, blueberry purple.

body {
font-family: sans-serif;
}
h1, h2 {
color: gray;
}
h1 {
border-bottom: 1px solid black;
}
p {
color: maroon;
}
p.greentea {
color: green;
}
p.raspberry {
color: blue;
}
p.blueberry {
color: purple;
}

324

c css

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title> Head First</title>
<link type="text/css" rel="stylesheet" href="../lounge.css"/>
</head>
<body>
<h1> </h1>
<h2> </h2>
<p class="greentea">
<img src="../images/green.jpg" alt=" ">

: ,
.
</p>
<h2> </h2>
<p class="raspberry">
<p>
<img src="../images/lightblue.jpg" alt=" ">
,
,
.
</p>
<h2>- </h2>
<p class="blueberry">
<p>
<img src="../images/blue.jpg" alt="- ">
,
,
.
</p>
<h2> </h2>
<p>
<img src="../images/red.jpg" alt=" ">
C
.
</p>
</body>
</html>

325

body {

, <body> ,
.
. ,
<body>. CSS-, . :

h1

color,
h2


!

body.

h1

}
p {


blockquo
te CSS
,

bo
dy.

,

blockquote

.

h2

h2

em

img

em

blockquote

em


a p,
body.

k;
color: blac

em
h2,
,
, body.
em,


,
em
body.

326

body

n;
color: gree


em,

p
dy.
bo

,


,

dy.
bo

p,
img
body.
.

c css

.
CSS-,
.


. ?

<style>

e
HTML! styl

CSS.
CSS

L,
M
HT

body {
background-color: white


.

}.

h1, {
.
gray;
font-family: sans-serif;
}


h2, p {
.

color:
}
<em> {
font-style: italic;
}
</style>

HTML.
em.

CSS /style
.

327

,

blueberry CSS-.

elixir.html
, :
<p class="greentea raspberry
blueberry">
.
?


HTML-:
<p class="raspberry blueberry
greentea">
.
?

CSS-
p.greentea .
.
?

, p.raspberry
.
.
?

, ,
, :
<p class="greentea">
.
?


,


class

.



,


CSSgreentea
.

,
CSS-

raspberry.

p
,





reentea.
p.g

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

Andale

Mono

Arial

CSS- ,
. CSS , ,
, ,
.
,
. font-family, .
, ,
, .

.

Arial Bla
ck
Comic Sa
ns
Courier
New
Georgia
Impact
Times New
Trebuchet

Roman

MS

Verdana

font-family.

. CSS , ,
.

, .
, ,
.
body {
font-family: Verdana, Geneva, Arial, sans-serif;
}


,

,

.

font-size.

- . CSS
, .
, , ,
,
.

h1 21px
body {
font-size: 14px;
}

330

body 14px

p 14px

h2 17px

color.

.
- (web-safe) ,
,
.
body {
color: silver;
}

font-weight.

,
, , , ?
?
. , font-weight.
body {
font-weight: bold;
}

text-decoration.

text-decoration, , .
body {
text-decoration: underline;
}

Aqua

Black

Blue

Fuchsia

Gray

Green

Lime

Maroon

Navy

Olive

Purple

Red

Silver

Teal

White

Yellow

lighter
normal
bold
bolder

none
underline
overline
line-through
blink


331

, ?
font-family
sans-serif. , ,
.
...

,
. : sans-serif,
serif, monospace, cursive fantasy. ,
.

sans-serif
Verdana

Arial Black

Trebuchet MS

serif

.

.

serif
Times
Times New Roman
Georgia

332

Arial

Geneva

sans-serif

.
,
serif.

Sans-serif

.
. ,
, .
,
, . , ,
,

monospace
Courier

Courier New
Andale Mono

monospace ,

. , i
,
m.

.

cursive
,
.


: , serif, ,
,
sans-serif, . ,
monospace, , .
cursive fantasy .

cursive

Comic Sans

Apple Chancery

fantasy
Last NinjA



fantasy.

Impact


333


,
. ,
, , . ,
. ,
, .

Bainbridg

monospace

fantasy

Cartoon
Palomino

Angel

cursive
sans-serif

Iceland

Messenger

Savanna

Crush
Nautica

Quarter

334

serif

CSS
, , .
?
font-family, sans-serif.
.


.

body {
font-family: Verdana, Geneva, Arial, sans-serif;
}
font-family

.
.


,

.


serif,

,

ace.
osp
sans-serif, cursive mon

,
.

font-family

, , font-family:
,
Verdana
,
, ,

(
body).

Verdana
,
Geneva.


body.

Geneva
,
Arial.

,

body.

,

,

sans-serif,

body {
font-family: Verdana, Geneva, Arial, sans-serif;
}

font-family . ,

, , ,
, ,
.
...


, . .

,

sans-serif.
,
,

335


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

,
,


if.
ser

,
,
.
,

.
,
.


,
,

.

336

font-family
font-family.
sans-serif. journal.css
chapter8/journal :
body {
font-family: Verdana, Geneva, Arial, sans-serif;
}
,
Verdana


.
Geneva
font-family


body.
sans-serif.
Mac.
,
Arial
,
.


body,
sans-serif.
.

.
journal.html, chapter8/journal.
<link>, journal.css,
.
,
journal.html
meta.
HTML5, DOCTYPE

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link type="text/css" rel="stylesheet" href="journal.css"/>
<title> </title>
</head>

<body>

.


.
journal.css.
.
</body>
</html>

, .

337


CSS-.

sans-serif.
...

-.
, ,

.

.

font-family
if
, sans-ser


...

... blockquote.
serif,
. font-family
, serif.

: , ,
Courier New?

: , , : fontfamily: "Courier New", Courier;

: , font-family
?

: . , , .

338

,
, ,
. .
,
,
: sans-serif serif, ,
.

: serif sans-serif ?
: Serif sans-serif .
serif sans-serif,
,

font-family, .
,

.

: , ? Serif sans-serif?

: .
,
sansserif. serif
serif sans-serif . ,
.

,
?
, . ,
.

: , Mac OS,
, .
? , ,
,
, , -
.
, , , ,
.
,
. , ,
font-family,
,
Windows, Mac (
, ,
Linux), ,
.
:


.

(1) ,

Verdana, ...

Andale Mono
Arial
Arial Black
Comic Sans
,

Windows,
Mac OS.

Courier New
Georgia
Impact
Times New Roman
Trebuchet MS
Verdana

Macintosh.

Geneva
Courier
Helvetica
Times

(3) ,
,
Arial
Windows, Mac,
...

font-family: Verdana, Geneva, Arial, sans-serif;

,
(2)
,
eva
Gen


,
,

Mac OS.
...

(4)
,


sans-serif.

339

,
,
,
,
,
Emblema One, ,
. , ,

,
?

,
, , ,
.

,
,
-.
CSS @font-face.

,
.
,

340

-
- ,
. -
, , ,
CSS.
, -:

, .

abcdefg
hijklmn
opqrstuv
wxyzABCD
EFGHIJKL


-.

crazyfont.woff

www.starbuzzcoffee.com


,
.woff,
web open

, ,
HTML CSS,
.

font format.

-,
HTML-, .
index.html.
abcdefg
hijklmn
opqrstuv
wxyzABCD
EFGHIJKL

crazyfont.woff

<html>
.
.
.
</html>

, .

www.starbuzzcoffee.com

index.html

341

-,
.
crazyfont.woff.


-,
, ,
.
,
crazyfont

abcdefg
hijklmn
opqrstuv
wxyzABCD
EFGHIJKL

crazyfont.woff

abcdefg
hijklmn
opqrstuv
wxyzABCD
EFGHIJKL

, .

www.starbuzzcoffee.com

crazyfont.woff

, ,
.

, !
! -
-
!

Hello
World!

abcdefg
hijklmn
opqrstuv
wxyzABCD
EFGHIJKL

crazyfont.woff

www.starbuzzcoffee.com

: WOFF, Web : , , - : -,
Open Font Format?

: WOFF
- , ,
.
,
. - ,
WOFF,
.
, -
.

342

-,
?

,

?

: , :



( , , , ).

, ,
,
, ,
Google .

(

), , , .

, -,

(
).

-
, ? , - CSS- @font-face.

:
, , ,
, ,
( ).
Emblema One, .

: , ,
-: CSS- @font-face . : ,
, ( ),
( ).
( ):
TrueType: .ttf

TrueType OpenType ;
pe).
OpenType TrueType ( , TrueTy

OpenType: .otf
Embedded OpenType: .eot
SVG: .svg

pe.
Embedded OpenType (EOT) OpenTy

oft)
(Micros


Internet Explorer.

Scalable Vector Graphics SVG


, SVG
.

Web Open Font Format TrueType -

Web Open Font Format: .woff -.


.

Web Open Font Format,


.
TrueType, (
Internet Explorer).

:
,
. -
, .
URL- . URL- ,
wickedlysmart.com:
http://wickedlysmart.com/hfhtmlcss/chapter8/journal/EmblemaOne-Regular.woff
http://wickedlysmart.com/hfhtmlcss/chapter8/journal/EmblemaOne-Regular.ttf


343

- jornal

: @font-face CSS
URL- .woff .ttf Emblema One,
@font-face journal.css.
@font-face , body:

@font-face.

,

, , @font-face

.
font-family


@font-face

ily.
font-fam
@font-face {
,

,
a One.
font-family: "Emblema One";
, Emblem

src: url("http://wickedlysmart.com/hfhtmlcss/chapter8/journal/EmblemaOne-Regular.woff"),
url("http://wickedlysmart.com/hfhtmlcss/chapter8/journal/EmblemaOne-Regular.ttf");
}

scr , . scr ,
. .woff .ttf, .

@font-face , URL- scr.


, URL- scr, ,
. , fontfamily, Emblema One. ,
.

: font-family CSS

: ,
!

@font-face, , , font-family.
<h1> Emblema One. ,
<h1>, :
h1 {
font-family: "Emblema One", sans-serif;
}

,


,
@font-face!
,
,
, -

sans-serif
.

: !
! . - , ,
344

journal.html, , <h1>
Emblema One. CSS-!

h1


One.
Emblema

TrueType
WOFF
Internet Explorer 8
.


Internet Explorer,
- Embedded OpenType.

: @font-face CSS , ?

: C @font-face CSS-,
, .
, @font-face
- ,
font-family. @
, CSS-.

: CSS-, ?

: . , ,
@import, CSS- ( <link> HTML-),
@media, CSS-,
,

, . @media
.

: , - ;
- ?

: . -, - ,
. ,
. ,

, ,

.

( . 347)

345


, , , ,
, .
? . ,
,
.

px

, 5.
, ,
.
font-size: 14px;

px

.
.
font-size


CSS

px.
.
14

body.

body {
font-size: 14px;
}

, ,
. ,
font-size: 150%;
, 150 %
. ?
, font-size ,

. ,
...

346



-,

.
,
.

hip

14

,

14 .


body ,

150%.

body {
font-size: 14px;
}
h1 {
font-size: 150%;
}

em

, em. em . , :

font-size: 1.2em;

,


1,2.

, <h2>. <h2>
1,2 , 1,2
, 14px, 17px.
body {
font-size: 14px;
}
h1 {
font-size: 150%;
}
h2 {
font-size: 1.2em;
}


h1
.

h1 21px


em!



16,8,

17.

body 14px


h2

1.2em.

p 14px

h2 17px

:
@font-face?

,
!

: . @font-face : , , ,
, ,
,
@font-face ,
.
,
,
-;
,
-
.

-. ?

: ! FontSquirrel (http://www. fontsquirrel.com/)


, .
.
Google Web Fonts (http://www.
google.com/webfonts) Google CSS
;
Google,
CSS.



347
.

: .
xx-small, x-small, small, medium, large,
x-large xx-large,
.

,
,
. 20 %
, small 12
. ,

.

body {
font-size: small;
}



body
12
.

xx-small

x-small

small

medium

large

x-large

xx-large

, ?
, .
? ,
, .
1

( small medium) body.


, .


body, , em ( , ,
, ).

, ? body, -,
body. , ? body small,
medium,
, body. ,
.
348

, . -, <body>.
, :

Internet
body { font-size: small; }
Explorer h1 { font-size: 150%; }
h2 { font-size: 120%; }

.
, :
,
Internet Explorer

h1

150 %
.
h2

,

body small 120 %

.

body.

.
,


h1 150% body p small h2 120% body
, ,
,

p font-size ,

.
body.
,

<body>
, , .

( em
, :
)
,
IE

h1 150% body

body large

p large

120 %
h2
.
dy
bo



ge.
lar
120 %

h2 120% body

body , . ,
body. ,
, . ,
, . .


349


-
- .
journal.css, chapter8/journal.
, , . ,
CSS-.
@font-face {
font-family: "Emblema One";
src: url("http://wickedlysmart.com/hfhtmlcss/chapter8/journal/EmblemaOneRegular.woff"),
url("http://wickedlysmart.com/hfhtmlcss/chapter8/journal/EmblemaOneRegular.ttf");
}
body {
font-family: Verdana, Geneva, Arial, sans-serif;
font-size: small;
,
}
small body.
h1 {
.
font-family: "Emblema One", sans-serif;
font-size: 220%;


}


body.
h2 {
h1
font-size: 130%;
,

170
%
}
.


h2

,
h1: 130 %

body
.


,
<h1> <h2> em, ?

: <h1> 2.2em, <h2> 1.3em.

350



,
,
. ...

.
)


.
!
h1

. ,
h2,



.


,
16px,

.
small
(,
,
12px)
.
h2

,


h1.

351

: ,
<body>, -

. ?

: <body>,

.
?
,
body,
.

: ,
?
.

.
, ,


.

: em %? ,
.

: ,
.

.
,
, em,
CSS-.
,
.

: , . :
,
.
,

. ,
,

.

, ,
?

: , , -

: ,
.
,
( Internet Explorer)
-

352

body
em %?
font-size body 90%,
? 90 % ?

: , .
body ,
90 %, 90 %
, , , ,
16 .
, ,
, % em.

:, : ,
, , . .
,
?

: .

: , ,

: ,
. ,
-:
,
. .

.

, <h1>
200 % ,
body, <h2>
150 %, <h3> 120 %, <h4> 100 %, <h5>
90 % <h6> 60 %. ,
<h4>
,
body, <h5> <h6> .

,
, .
CSS-,
.

.

body ,
16 .

: : ,
,
.

: , -


font-weight ,
. ,
,
.
, font-weight
bold:

Starbuzz

font-weight:
normal;

font-weight: bold;

.
,
,
:

Starbuzz

font-weight: normal;

font-weight
: bolder lighter.

. ,
.

font-weight:
bold;


font-weight 100 900 ( 100),
.


CSS-,
bold, ,
normal. CSS- .
.

353

normal.
, CSS- , , font-weight <h1> <h2> normal:
@font-face {

@font-face
...

.
}
body {
font-family: Verdana, Geneva, Arial, sans-serif;
font-size: small;
}
h1, {
font-family: "Emblema One", sans-serif;
font-size: 220%;
}
h2 {
font-size: 130%;

font-weight: normal;
}
t
font-weigh

h2.
normal


.
h2

.
-

,

,

130 %


.

354


, ?

. , :

CSS
, font-style:
font-style: italic;

, . ,

, .
:

,
italic
italics.
,

,

.

, font-style, :
font-style: oblique;

, , . ,

,
. ,

.


,

.


,

,

,
,
,
.
,



( ,

).


355

fontstyle,
. Burma
Shave, <blockquote>? ,
.
<blockquote> fontstyle italic:
blockquote {
font-style: italic;
}

CSS- journal.css,
. , Burma Shave .

: <blockquote>
<p>, <blockquote>.
?

: , ,
<p> <blockquote>. <p>, <blockquote>,
.

:
<blockquote> <em>?
<blockquote> ?

: , <em>
, .
<blockquote>, ,
<blockquote> . - ,
<em>
,
<blockquote>. , <em> ,
,
.

356


Burma Shave .
,
.

.
. ,

? ,
!

, , ,
,
, .
, , .
,
,
. ,
,
, ,

,
CSS.

357

?
,
, : , ,
. ?
.

100 %

100 %

,
, .

0 100
, . , 100 % ,
100 % 100 % ,
. ,

.

100 %
, , . ,
, ,
.

60 %
60 %

60 %

358

, ,
60 % , ? , ? ,
,
, .


,
0 % .

, , 80 % 40 % , . , .
, ,
.

80 %
40 % ,
.

, 0 % ,
? ,
,
.

80 %

0 %

40 %

0 %

0 %

0 %

359


?

,
?

, ,
, CSS
150 .
,

.
,
, 16 .
HTML, ,
#fc1257. , , ,
, , -
, .

360

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


CSS
. 16 150 , . ,
body.
CSS :

body {
background-color: silver;
}

body.

background-color.

,
.

, , . ,
,
silver, Silver SILVER, .
16 , CSS. ,
,
.



16

150

.

Aqua

Black

Blue

Fuchsia

Gray

Green

Lime

Maroon

Navy

Olive

Purple

Red

Silver

Teal

White

Yellow

361

rgb-

,
,

80 %

0 %

, ,
. ,
, . ,
80 % , 40 % 0 % . :

body {
background-color: rgb(80%, 40%, 0%);
}
RGB
red, green blue.

40 %


, ,
% .

,
0 255. , 80 % , 40 % 0 % 204 , 102
0 .

?
80 % 255 204,
40 % 255 102

,
:

0 % 255 0.

body {
background-color: rgb(204, 102, 0);
}

RGB.

: RGB-?
?

: ,
0 255.
,
.

255
, . ,
, ,

362

, ,

% .


0 255 ( , ,
).

: , -
RGB
CSS. ,
, #00fc9.

: RGB-

,


,
.

: , rgb(100, 50, 200),


, ?

: . ,
rgb(100, 50, 200),

-
.


. :
,
. , , . :

#.

#cc6600

,
f c
?
!

, , , .
, :
0 255 ( ?). ,
,
99, ?
, ,
255
( A F). .
, , ,
.

363



, ,
( 0 9), ( 0 F).
.
A
B
5
10
6
9
C
11
4

3
12
D

2
13
0 9.

E
7 8
14
9, 1
F
.
15
0

, , B, , 11. BB, E1 FF? , , .

, ,
. .

,
.

# CC 66 00

CC
364

66

00

, ,
0 255. :

CC


,

16.

,
.

12
12 * 16 = 192
192 + 12 = 204

, 204


CC.

.
:

CC
204

66
102

00
0

66,
: (6 * 16) + 6 = 102.

00,

: (0 * 16) + 0 = 0.


, !

, , .
, , .
c .

365


80 %

. , , , 80 % , 40 %
0 % . CSS :
body {
background-color: rgb(80%, 40%, 0%);
}
body {
background-color: rgb(204, 102, 0);
}
body {
background-color: #cc6600;
}

0 %

40 %


,
.

,

0 255.



, Photoshop Elements. , -, RGB
, . Photoshop Elements
( ).



,


,

.
,

.
.

366



,

RGB,

.

-
.
-, . ,
,
,
CSS.
http://
en.wikipedia.org/wiki/Webcolors ( http://ru.wikipedia.org/
wiki/%D0%A6%D0%B2%D0%B5%D1%82
%D0%B0%D0%B2Web), .
HTML- ,
.
, ,
. ,
.

: , ,
,
.
?

, , ,
,
.

: , -

. ,
,
(, ),


.

: -,

. ,
?

, ,
,
,
, .

: , :


. ,
,

.

. .
,
.

-

#cb0. ?

: ,
. , #ccbb00
#cb0, #11eeaa #1ea.

, , : #ccbb10,
.


367



. , . ,
,
.
.
, ,
. .
:

body {
background-color: #b817e0;
}
:

right

368

left

right

...

, , .
. ,
. , ,
,
, . ,
, ,
.
CSS. journal.css.
@font-face {
font-family: "Emblema One";
src: url("http://wickedlysmart.com/hfhtmlcss/chapter8/journal/EmblemaOneRegular.woff"),
url("http://wickedlysmart.com/hfhtmlcss/chapter8/journal/EmblemaOneRegular.ttf");
}
body {
font-family: Verdana, Geneva, Arial, sans-serif;
font-size: small;
h1 h2 ,
}
color .

h1, h2 {
color: #cc6600;
text-decoration: underline;
}
h1 {


,
rgb(80%, 40%, 0%).
,

.

text-decoration
underline.

font-family: "Emblema One", sans-serif;


font-size: 220%;
}
h2 {
font-weight: normal;
font-size: 130%;
}

,
h1,
h2.
,
.

blockquote {
font-style: italic;
}

369




journal.css, color
h1, h2, - .

h1 h2
.
.

...
.
,
,

, ,
.

, .
,
-.


? -,
, .
,
.
#1 11111
#2 22222
#3 33333

370

#4 44444
#5 55555
#6 66666

#7 77777
#8 88888
#9 99999

#aaaaaa
#bbbbbb
#cccccc

#dddddd
#eeeeee

,
, , , ( ) . ,
text-decoration, :


em .

em {
text-decoration: line-through;
}

. , , ,
:
em {
text-decoration: underline overline;
}


em
,
.

- , ,
none:

em.

em {
text-decoration: none;
}

: , - :
<em> ,
, ,
?

: . ,
.
, ,
, . ,
,
,
.

: : color text-color?

, , , border-color.

: ,
. , , ?

: , , . HTML ,
<del>.
HTML-, .
<ins>, ,
. . CSS,
, . <del> <ins>
.


371


h1 h2. thin dotted
.

#8 88888
.

, ,
.
journal.css
h1, h2:
h1, h2 {
color: #cc6600;
border-bottom: thin dotted #8 88888;
text-decoration: underline;
}

. ,
!

.
, .


h1 h2 ,
.

?
.
.

372

CSS ,
, font-family, font-weight, fontsize font-style.

, , serif,
sans-serif, monospace, cursive fantasy.
serif sans-serif.
- , ,
-.
CSS- font-family . , , .
, serif sans-serif.
,
.

, , ,
, @font-face
CSS-.

,
em, (%) .

, ,

.

Em % ,
.

,
body.
, ,
.

,
CSS- font-weight.

font-style ,
.
.

- , .

100 % , 100 %
100 % , .

0 % , 0 % 0 % ,
.

CSS 16 , , , , ,
150 .

, , ,
.
0 255 .

, ,
,
0F.
, ,
.

,
text-decoration.
,
.

373

.
,
.

.
, . .

monospace

fantasy

Messenger

Crush

Bainbridge

cursive
sans-serif

Cartoon

Iceland
Angel
Nautica

serif

Savanna

Palomino

374

Quarter

.

. ,
.
, ,
. .
, ,
.
. :

body {
background-color: #b817e0;
}
:

(11 * 16) + 8 =
184

right

(1 * 16) + 7 =
23

left

(14 * 16) + 0 =
224

right

375

? -, ,
.
,
.

#1 11111
#2 22222
#3 33333
#4 44444
#5 55555
#6 66666
#7 77777
#8 88888
#9 99999
#aaaaaa
#bbbbbb
#cccccc
#dddddd
#eeeeee

:
)
(
(

).


,

,
,
.

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



Head First.
,
, .
,
, . ,


, ,
.


,
.

,
,
.

, ,
,
.

378


,
.

sans-serif.

,


. ,
serif, .

,

,
. ?

,

,

. , ,
, , ,
. ,
, ,
, .

.

379


,
. .
1

chapter9/lounge lounge.html .
. :
, , , .

HTML-,
CSS-. lounge.css, , , <head>
lounge.html <link>,
lounge.css.
<link type="text/css" rel="stylesheet" href="lounge.css"/>
, <link>
lounge.css.

lounge.css chapter9/lounge.
CSS- .


. CSS-
, : , - ,
( ).
, lounge.css .
.

body {

font-size:
small;
font-family: Verdana, Helvetica, Arial, sans-serif;
}
h1, h2 {
color: #007e7e;
}
h1 {
font-size: 150%;
}

sans-serif.
,
sans-serif.
h1 h2 ,
.

h2 {
font-size: 130%;
}

380

h1 h2.
, .


,
, . , ,
.

sans-serif ,
, .

sans-serif,
fontfamily body.
h2
sans-serif,
.
h3,
fontfamily body.

,
,

.
.


,

. , .
,
. ,
.
,
. body
line-height:
body {


.
,
( , ).

1.6em,
1,6 .

font-size:
small;
font-family: Verdana, Helvetica, Arial, sans-serif;
line-height: 1.6em;
}

381


, , , line-height . ,
, em
.
, line-height . ,
CSS-, .
, .

line-height

,
, 1.6em.

line-height , , body,

1.6em.

line-height, 200%, .5em 20px, ,


. , ? ?
, , line-height
1.6em.

382


. !
,
, , ,
,
. .
, , ,
. ,
, CSS.
. , .

CSS

.


,
()

,
.

,
, ,
.
: , ,

. ,

, ,
.
- ,
- .



.


( ).
,

(
).

:
, , , ,
. .
, em link, CSS .


383


CSS :
, (
), .
.


?

,
,


, , .
,
, ,
.
,

.


,
.
: , ,

. ,

, ,
.
- ,
- .


() .

?


. ,
,

.

.

: , ,

. ,

, ,
.
- ,
- .

CSS,
(, , ).

384

,

.

CSS,
,
.

?
: , ,

. ,

, ,
.
- ,
- .


( ).

,
.


, .

CSS,
(, , ).

?


.


.
,

.
,

.
.
, , (
).

: , ,

. ,

, ,
.
- ,
- .

385


: ,
, . ,

. ,
.

:
.

: , ,

. ,

, ,
.
- ,
- .

: , ,

. ,

, ,
.
- ,
- .

: , ,

. ,

, ,
.
- ,
- .

: , ,

. ,

, ,
.
- ,
- .

386

,
, .


,
.


.

.

: , ,

. ,

, ,
.
- ,
- .

: , ,

. ,

, ,
.
- ,
- .

: , ,

. ,

, ,
.
- ,
- .

: , ,

. ,

, ,
.
- ,
- .

:
,
,

,
,

.
,

.
,

,
,


.
-
,

- ,

-
.
- .


CSS


.

: , , . ,


, ,
. -
, - .

: , ,

. ,

, ,
.
- ,
- .

: , , . ,


, ,
. -
, - .

: , , . ,


, ,
. -
, - .

,
,

.
, ,

: , ,

. ,

, ,
.
- ,
- .

: , ,

. ,

, ,
.
- ,
- .

: , ,
. ,

, , .
- , -
.

:

, ,,



. ,,
-



-
, ,



. - , - -- .

,
.

387

: , - : , ,

,
-?

: -,

-
,
11,
.

, , ,
,
.

. ,
-
- .

: ? ,
...

: ,
. ,
, ,
, .
, ,
,
.

: , , ,
?

: ,
, ,
, ,
, . .

388

: .

: ,
?

: . ,
,

. ,
.
,
( )
.
, .

:
?

:
,
.
, , ,

,
,
.

, , ,

.
,

?


, .
,
? , . , .
, .
.


serif, sans-serif.



.

.

389


, ,
. (, ,
).

, ,
, ,
.

390


,
, , .
guarantee,
.
, ,
, .
. , .

lounge.html ,
. , <p>
guarantee:

".
class "guarantee

,
.
,
<p class="guarantee">
: , ,
. ,
, ,
.
- , - .
</p>

lounge.html lounge.css.
. CSS .


,
guarantee. .
.guarantee {
border-color:
border-width:
border-style:
background-color:
}

...
black;
1px;
solid;
#a7cece;

... 2 .
, .

,

,
.


391


, ,
. .
,

.

, ,
.

, .

: , ,
. ,

, ,
. - ,
- .

392

, ,
. ,
.

,
, , ,
, ,
.
.

: , ,
. ,

, ,
.
- ,
- .

,
,
,
.


. CSS
padding, ,
. , . 25 .
.guarantee {
border-color:
border-width:
border-style:
background-color:
padding:
}

black;
1px;
solid;
#a7cece;
25px;


25
(, ,
).

393


, ,
.
,
.


25 .

,

,
.
.


CSS .
,
. 30
. , :
.guarantee {
border-color:
border-width:
border-style:
background-color:
padding:
margin:
}

394

black;
1px;
solid;
#a7cece;
25px;
30px;

30
(, , ).


, ,
.
. ,
CSS- - .

30 .

,
, serif, . , ,
, . CSS-
1.9em, ,
#4 44444 Georgia, Times New Roman, Times, serif.
, .

395


. ? ,
.
.
chapter9/lounge/images, background.gif, .



.
,
,
.

<p>.
<img>, ? . - ,
. CSS - , background-image.
, :
.guarantee {
line-height:
font-style:
font-family:
color:
border-color:
border-width:
border-style:
background-color:
padding:
margin:
background-image:
}

, ,
.

1.9em;
italic;
Georgia, "Times New Roman", Times, serif;
#4 44444;
black;
1px;
solid;
#a7cece;
25px;
30px;
url(images/background.gif);

CSS-,
.

396

, ,

.
background-image
, <img>?

, background-image
.

<img>.
: ,
background-image, ,
.
<img>
, .
, , ,
.
,
, .

background-image.

397

background-image


: ,
. CSS,
, .


.


,
.

, , ,
.

CSS
background-image .
, , .
background-position background-repeat.

background-image: url(images/background.gif);

background-image
,
, URL- (http://...).

398

URL
.


. , ,
no-repeat background-repeat, , , , . ,
, , .
background-position, , .
.guarantee {
line-height:
font-style:
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;
#4 44444;
black;
1px;
solid;
#a7cece;
25px;
30px;
url(images/background.gif);
no-repeat;

top left;
.

, .

,
.

background-position
, , top, left, right, bottom
center.
.
background-position: top left;

CSS. .


, . background-repeat
, .
.
background-repeat,

,
.

background-repeat: repeat;
,
, .

repeat-

inherit

no-repeat

repeat-y

,
.

399


, . , ,
, . ,
, . ?
!
.
, .
.

.

,
.

?
, CSS ,
: top, right, bottom left.

, padding-left:
.guarantee {
line-height:
1.9em;
font-style:
italic;
font-family:
Georgia, "Times New Roman", Times, serif;
color:
#4 44444;
-left,
padding
border-color:
black;
.

border-width:
1px;

border-style:
solid;
,
background-color:
#a7cece;
25

padding:
25px;
,
padding-left:
80px;


margin:
30px;
.
background-image:
url(images/background.gif);
background-repeat:
no-repeat;
background-position: top left;
}
. , , padding
25 , , !

400

?
, , . , .
, , .

,
,
- , .

, .
, .



,


.

?
, :
, margin-right,
.

.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;
#4 44444;
,
black;
30 1px;
solid;
.
#a7cece;
25px;
80px;

30px;

250px;
.
url(images/background.gif); 250
no-repeat;
top left;
250

margin-right
.
250 .


401


,
. , ,
.


border-style .
.
border-style: groove;

solid
.

double

.

groove
( ).

outset , .

402

, border-style
.

solid,
.

double,

.

,

.

,
.

dotted

dashed -
, .
.

inset

,
.
ridge

: inset.

;
.

border-width
. ,

.

border-color .
:
, RGB- .

border-width: thin;

border-color: red;
border-color: rgb(100%, 0%, 0%);
border-color: #ff0000;

border-width: 5px;

thin, medium

thick. ,
.
1px
2px
3px
thin

4px

medium

5px

thick

6px

bordercolor, .

.


border-top-color

border-right-color

border-top-style

border-right-style

border-top-width

border-right-width

,
,
(, ,
):
border-top-color: black;
border-top-style: dashed;

border-bottom-color

border-left-color

border-bottom-style

border-left-style

border-bottom-width

border-left-width

border-top-width: thick;

.

.

403


.
,
.

border-radius: 15px;

.
,

px em.

border-top-left-radius: 3em;
border-top-right-radius: 3em;
border-bottom-right-radius: 3em;
border-bottom-left-radius: 3em;
em,
,
, em
.

border-top-left-radius: 15px;
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
border-bottom-left-radius: 15px;
border-radius,
.

404


.
. ? solid,
double, dotted, dashed, groove, ridge, inset outset.
? :
( ).
, dashed. lounge.css
border-style :
border-style: dashed;


solid dashed.

.
:
, , . ,
. , :
border-color
white.
border-color: white;

.
.

, thin, medium thick,


.

,
.

405

!
,

.

!

!
! HTML- - ,
15 CSS-.
,
.
. ,
. ,
CSS.

406

,
.
. CSS ,
. ,
.

30px
.
CSS-

40px

40px

2em

407

. , .
, HTML.

, .
?
Head First: , , ,
.

: , :
?

: . ,
, , ,
.

Head First: , -
,
, - . .

, . halloween,
christmas.
, , ,
, .
.

Head First: , ,
. ?

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

Head First: .
, ?
: ,
. ,
.
Head First: ,
Head First,
. ,
.
408

: -, . ,
, class id. .
Head First: id? ,
, 4.
: id .

.
Head First: id ?
. ,
!
: ; . , ,
,

. ,

,
, id.
,
.

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

,

id, class. ,
. , ,

.
; ,
, -

,
(class id).

id class


: , Head First!

id class

 , -

 ,

 <img> .

 <ol> , .

 <q>,
.

: , ,
id.

 <p>, -

409

id
id <a> , class,
, , id. , .
, id. footer
:
id


.

class,
footer.

<p id="footer">, ,
</p>


.

.
, id, class,
, .

: ? id
, , ? class.

. ,
,
.

: : , ,
. , -
. , ,
, .
, ,
- .
, id,

410

- ?

: , . : id
, ( ,
).

CSS
, , . : specials,
.
:

p.specials {
color: red;
}

, specials.

, specials:

.specials {
color: red;
}


specials.

.
, #
() (: , . ()). , footer:
#footer {
color: red;
}

footer.

, <p>
footer. :
p#footer {
color: red;
}

p,
footer.

, .

411


, , ,
.
.

: class id lounge.html.
class
id.
<p id="guarantee">
: , ,
. ,
, ,
.
- , - .
</p>

: .guarantee lounge.css.

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

412

1.9em;
italic;
Georgia, "Times New Roman", Times, serif;
#4 44444;
white;
1px;
dashed;
#a7cece;
25px;
80px;
30px;
250px;
url(images/background.gif);
no-repeat;
top left;

: .

,
, .
,
, ?

: #guarantee,
p#guarantee?

,
id?

: , : . -
. ,
, ,
( #guarantee ).
,
: , ,
.
, p#someid
blockquote#someid, ,
.

: class,
, ,

, .

,
.

: ?
: , .
,
, . ,
number1 main_content,
header content . , !

413


, .
. ,
- , ?
- HTML-.
, ?
. .
, Head First
, ,
. . ( ,
).
, , ,
, ,

. ,

.
.
:



,

,


,

: ,
. .


.

,

.


(
)

414


, ,
?
, , :

TML

H
.

.



.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> Head First</title>
<link type="text/css" href="corporate.css" rel="stylesheet" />
<link type="text/css" href="beverage-division.css" rel="stylesheet"/>
<link type="text/css" href="lounge-seattle.css" rel="stylesheet"/>
</head>
<body>
.

.
.
.


</body>


</html>

.

.

: , : -- :
?

: , : ,
. ,
font-family
<body>
,
,
,
HTML- .


, ,
,
, , .

, ?

: -
7.
.
,
CSS,
, ,
.

415



,
: , ,
( ,
, ,
). , media,
<link>, ,
. :.


,
,

media , .
<link href="lounge-mobile.css" rel="stylesheet" media="screen and (max-device-width: 480px)">

- (
, , , 3D-
)

,

480 .

, , :
<link href="lounge-print.css" rel="stylesheet" media="print">

lounge-print.css ,


print, ,

.

,
, mindevice-width, max-device-width (
), orientation ( ) . ,
<link> HTML-,
, .
416

CSS
CSS-
: <link>,
CSS-. :
edia
@m


,
,
.

@media screen and (min-device-width: 481px) {


#guarantee {
,
margin-right: 250px;
,
}

480
}
@media screen and (max-device-width: 480px) {
#guarantee {
margin-right: 30px;
,
}
480
}
@media print {
body {
font-family: Times, "Times New Roman", serif; .
}
}
p.specials {
color: red;
}

,
@media.

, : @media CSS-, . ,
, CSS- , @media,
- . ,
, .

,
,


.

Internet
Explorer 8 .

417

, .
?

:
480 640


,
1024 768
.

:
1280 960 .


: 2560 1600 ,
.

<link rel="stylesheet" href="lounge-smartphone.css"


media="
">
<link rel="stylesheet" href="lounge-tablet-portrait.css"
media="
">
<link rel="stylesheet" href="lounge-tablet-landscape.css"
media="
">
<link rel="stylesheet" href="lounge-pc.css"
media="

">

<link rel="stylesheet" href="lounge-tv.css"


media="

">

418

: . ,
?

: ,
HTML-.
, ,
.

: max-device-width
mindevice-width?

: , , max-width min-width (
device-width, ), max-height
min-height, orientation, color, aspect-ratio .
-

CSS3 (http://www.w3.org/TR/css3-mediaqueries/),
Head First Mobile Web ( -
).

: CSS-
<link> @media?

: . ,
,
@media, CSS
. <link>
, CSS
. CSS-
,
<link> .

chapter9/lounge lounge-print.css. lounge.


html, chapter9/lounge,
print. ,
media="screen" <link>, lounge.css. ,
, .
, Print ().
, !

<link type="text/css" href="lounge-print.css"


rel="stylesheet" media="print"/>
,
lounge.html.
. CSS
. .

.
, .

419

CSS

max-device-width min-device-width
( ). , ? ,
max-width min-width,
( ).
, : chapter9/lounge loungemobile.css. lounge.html <link>
<head> :
<link type="text/css" rel="stylesheet" href="lounge.css"
media="screen and (min-width: 481px)">
<link type="text/css" href="lounge-mobile.css" rel="stylesheet"
media="screen and (max-width: 480px)">
<link type="text/css" href="lounge-print.css" rel="stylesheet" media="print">
lounge.html . ,
. .
( 480 ). ? ? , , -
. ?

, !
Internet Explorer, 9 .

420

CSS .

line-height,
.

, , .

background-image,
.

, .

background-position background-repeat,
,
() .

,
.

class ,

.

id,
.
,
.

,
.

,
id # ; #id.

thin,
medium thick.

, .

, : solid, dashed, dotted


ridge.

HTML-
.

- , ,
HTML- .

<link>
@media CSS,
,
.

CSS ,
(, , , )
.
border-radius .

421

, ,
. (, , ).

422

, ,
serif,
. , , ,
. CSS- 1.9em,
, #4 44444 Georgia,
Times New Roman, Times, serif. . ?

.
.

.guarantee {
line-height:
font-style:
font-family:
color:
border-color:
border-width:
border-style:
background-color:
padding:
margin:
}

1.9em;
italic;
Georgia, "Times New Roman", Times, serif;
#4 44444;
black;
1px;
solid;
#a7cece;
,
25px;

30px;
, .

serif.

423

, .
?

:
480 640


,
1024 768
.

:
1280 960 .


: 2560 1600 ,
.

<link rel="stylesheet" href="lounge-smartphone.css"


media=" screen and (max-device-width: 480px)
">
<link rel="stylesheet" href="lounge-tablet-portrait.css"
media="screen and (max-device-width: 1024px) and (orientation:portrait)">
<link rel="stylesheet" href="lounge-tablet-landscape.css"
media="screen and (max-device-width: 1024px) and (orientation:landscape)">
<link rel="stylesheet" href="lounge-pc.css"
media=" screen and (max-device-width: 1280px)

">

<link rel="stylesheet" href="lounge-tv.css"


media=" screen and (max-device-width: 2650px)

">

. ?
. ,
?

424

,
.
. CSS ,
. ,
.
.
CSS-

30px

border-top-left-radius: 30px;
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
border-bottom-left-radius: 30px;

40px

border-top-left-radius: 40px;
border-top-right-radius: 40px;
border-bottom-right-radius: 40px;
border-bottom-left-radius: 40px;

40px

border-top-left-radius: 0px;
border-top-right-radius: 40px;
border-bottom-right-radius: 40px;
border-bottom-left-radius: 40px;

2em

border-top-left-radius: 0em;
border-top-right-radius: 2em;
border-bottom-right-radius: 0em;
border-bottom-left-radius: 2em;

425

max-device-width min-device-width
( ). , ? ,
max-width min-width,
( ).
, : chapter9/lounge loungemobile.css. lounge.html <link>
<head> :
<link type="text/css" rel="stylesheet" href="lounge.css"
media="screen and (min-width: 481px)">
<link type="text/css" href="lounge-mobile.css" rel="stylesheet"
media="screen and (max-width: 480px)">
<link type="text/css" href="lounge-print.css" rel="stylesheet" media="print">
lounge.html . ,
.
.
( 480 ).
? ? ,
, - .
?

480 , . 250
30 ( ); ,
.
,
CSS,
.
. , ,
?

, ! Internet Explorer,
9 .

10

div span

-
- :
,
. : ,

.

.
HTML-, <div> <span>.
, . <div> <span>
, ,
, . ,
CSS- , ,
.
, .

, ,
,

.
,
?


.


.


, . ,
:
,
, ,
,
.

428

10

div span

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

lounge.html chapter10/lounge:



,

.

.
h2
<h2> </h2>
p
.
..
<p>
<img src="images/yellow.gif" alt=" "/>
</p>

<h3>> </h3>

<p>
h3...
. ,
,
.
... ,
.
.
</p>
<p>
<img src="images/chai.gif" alt=" "/>
</p>
<h3> </h3>
<p>
.
, ,
.
</p>

<p>
<img src="images/black.gif" alt=" "/>
</p>
<h3>> </h3>
<p>
?
,
. .
</p>
<p>

<a href="beverages/elixir.html"
title=" Head First"></a>.
</p>

,



.

429

div

, ,
.

,

.

: , ,
.
: , , . ,
,
. , .
: , ,
?
: . , .
: .
: , . HTML-,
, <h2>, <h3>
<p>. ,
.

: , . ,
, .
.
: , , .
<p> <blockquote>?
: ,
. , - ,
- . HTML CSS
, <div>. ,
, .
: <div> ? , -
.
: , ,
<div> .
: , , !
: . , , , ,
<div>...

430

10

div span


z.
tor
tS
Pe

,

-, :
PetStorz.com. ,
,
<div>.

h1
h2
p

:
,
.

h2
p
p

,
, .
?
?

p
img


,
. ?
. , PetStorz.
com ,
, . .

PetStorz

, .
:

,

.

h1

h2

h2


: .
.

p
p
img

431

div

<div>

, ,
,
HTML- .
<div> , .
,

.


div.

h1
div
h2

div
h2

.

p
p
img


<div>

<div>, , . , , ?

id.
<div> . , <div>, , cats,
<div>
dogs.


cats div, ,
.

gs.
do

h1
div id=cats
h2
p

div id=dogs
h2
p

p
p
img

432

10

div span

Starbuzz

PetStorz. , 1?

h1

h1

div id=cats
h2

h2
p

h2

2?

div id=dogs
h2

p
p

p
p

p
img

p
img


, - PetStorz ,
<div>. ,
, <div>.

:
v.
di

div
id.


div
.

h1
div id=cats

,
div,

.

, div,
, div (, , . .).

#cats {

background-image: url(leopard.jpg); background-image.
}

#dogs {
background-image: url(mutt.jpg);
,
}

.

h2
p

div id=dogs
h2
p
p
p
img

433

div


,

<div>. -, , ,
,
.
-,
,
.
,
.
, PetStorz

<div>.

div
, ,
.

div id=header
h1
div id=cats
h2
p

div id=dogs
h2

p
div id=footer
p
img

div
. ,
p
?

div id=header

h1

.

. , PetStorz
: . ,
. , <div>
cats dogs <div> pets.

div id=pets

HTML-
, pets, .
:
cats dogs .

434

10

div id=cats
h2
p

div id=dogs
h2
p

p
div id=footer
p
img

div span

: , <div>
, , ?

: , . <div> .
,
, (, ,
cat).
<div>
, ,
.

: , . .,

<div>?

: , . ,
. ,
, , .
,
, , -

, , , .

, .
<div>,
,
.

: , <div>
,
?

: ,
.
, . ,
, <div> . ,
.
,
, <div> (
),
<div> albums.
, ,
, ,
.

, ,
.

: <div>,
, . ?

: . ,
, ?
, <p> <body>,
<html>.
, .
<div> :
.
PetStorz <div>,

(
). <div>,

,
.
,
<div> , .
, ,
.

<div>,
.
,
.
<div>
.


435

div


, <div>, . :
, ,
, . , lounge.html
chapter10/lounge, , , <div>.
,
,
elixirs.
<div id="elixirs">


<h2> </h2>
HTML-.

<p>

<img src="images/yellow.gif" alt=" "/>


tml,
lounge.h
</p>
<h3> </h3>
.
<p>
. , ,

. .
</p>

<p>
<img src="images/chai.gif" alt=" "/>
</p>
<h3> </h3>
<p>
. ,
,
.
</p>
<p>
<img src="images/black.gif" alt=" "/>
</p>
<h3> </h3>
<p>
?
,
. .
</p>
<p>


<a href="beverages/elixir.html"
title=" Head First"></a>.
</p>
.
</div>

436

10

div span

<div>
, ? ,
,
, .
... ! : div
,

.

, div ,
.
, ,
( ),
div.

:
, ,
.
<div>,
, ,
. , lounge.html
<div>, , ?

437

div


, <div>,
: .
, , , , ? , <div>,
,
. .
CSS- , <div> .
lounge.css chapter10/lounge
:
#elixirs {
border-width: thin;
border-style: solid;
border-color: #007e7e;
}

.
CSS
div

elixirs



.


, lounge.html.
,
div elixirs.

div,

.


.

,
,
div. ,
, ,
,
div.

438

10

div span



.
. , <div>

,
.


,
, . -
, ,
. ,
.
.

,
.


, , ( ,
).

body,
sans-serif, .
, div
body.


.


439


,
. .

 -, <div> elixirs, .

 , ,
.
, .

 ,
. - CSS.

, .


, , , , 1/4
. , 800
, - 200 . ,
, .
width:
#elixirs {
border-width: thin;
border-style: solid;
border-color: #007e7e;
width: 200px;
}

width .
200 .

div elixirs.
200 ,
, ,
div, .

. lounge.css
.
440

10

div span


CSS-
lounge.html. , ,
. <div>
200 . -
, .
div

elixirs

0 .
20
,



!
.

200

,


. ,

div
. ,

.
.

, ,
? , . ,
. , ,
<div> elixirs 200 .

441

,
width ?

?
,
?

width
.
, ,
, .
,
, , .

width)

: , ,

. ,

, ,
.
- ,
- .

442

10

div span

,

?

. ,
, .
.
, width CSS,
300 .
20 , 10 , 1 . ?
, , .
, .
(1) 300 .

300

300

(2) ,
.

10
1
20

10

20
1

: , ,

. ,

, ,
.
- ,
- .

10 + 1 + 20

20 + 1 + 10

31

31

(3) , 62 .
, 300
( ), 300 + 62 = 362
.

31 + 31 = 62


443

: ,

: : . ,
, .
-, ,
, . ,
( , )
.
.

. 300
, ,
300 .

: ?

:
. , ,
(
<body>, <div> . .).

?
: ,
,
.
,
200 , , <div>
.
, , ,
,

, ,
.
,
.

, .
?

444

10

30

: , ,

. ,

, ,
.
- ,
- .

200

10
2
20

,
?

div span


. ?

 -, <div> elixirs, .

 , ,
. , .

 , .
- CSS.

: , ,
<div> elixirs
. ,
, CSS-.
div
elixirs,
div ,
.

#elixirs {
border-width:
border-style:
border-color:
width:

thin;
solid;
#007e7e;
200px;

padding-right:
padding-bottom:
padding-left:

20px;
20px;
20px;

margin-left:

20px;

text-align:

center;

v
di

,
0 .



:
.



,
,

h2 (
h2

,
,
).

.
,

,

.



...

background-image: url(images/cocktail.gif);
background-repeat: repeat-x;
}

text-align
,

. .

, ,
, . repeat-x background-repeat,
.

445

text-align



lounge.css . , : ,
<div>

.

.

...

text-align
?
?

,
.


...

...
.

. , text-align
. ,
<div>,
. ,
text-align
. :
text-align
. ,
(, <img>).
446

10

div span

,
,
<div>
,
<h2>, <h3> <p>. ,
,
<div>,

?

. <div> ,
. ,
text-align <div>.
<div>
(
, ), center
text-align
.
? -
<div> ,
.
, ,
,

.

447


, , ,
. ,
200 .
, , ,
thin. ,
1 ( ). ?
, ,
0 .

, .

<div>.

border-width:

thin;

width:

200px;

padding-right:
padding-left:

20px;
20px;

margin-left:

20px;

.
,

448

10

div span

...
. ?

 -, <div>

elixirs, .
 , ,
.
, .

 , -

.
- CSS.

, , ? ,
. ,
, <div>, .
.


;

.

: , .
<h2>
, <h2> CSS .
, . ,
<h3>,
.
: , .
: .
<h2> <h3>,
. .
: , . ... ,
.
: ,
. , <div> elixirs, ,
.
: .
: , , , . ,
.
: ?

: .
, , : <h2>,
<div> elixirs.
: .
: , .

449


,
.


html



HTML- -

body

.
h1

h2

h2

CSS ,
h1 h2 .
h1 h2,
div elixirs,
.

h1

h3

h3

h1, h2 {
color: #007e7e;
}

html

body

h2

, h2 h3
.
h2,
h2 . h3, ,
, , ,
. ,
, .

10

h3

,
h1 h2
lounge.css.

, h1
h2 .

450

div id=elixirs

div id=elixirs

h2

h3

h3

h3

h1, h2 {
color: #007e7e;
}

div span


CSS,
, .
, , ,
. , .

.

html

body


h2.

h2

h1

div id=elixirs

h2

div h2 {
color: black;
}

h3

h3

h3

h2,

div.

,
.

, - <div> lounge.html,
<h2> , . <div> elixirs, ,
, .
html


elixirs.
.

body

h1

h2

div id=elixirs

h2

#elixirs h2 {
color: black;
}

h2,
elixirs.

h3

h3

h3

,
. , ,
div h2 ,
h2,
div elixirs.

451


. , <h3>
<div>, . #d12c47 color. , ,
.
CSS-
.

html

body

h1

h2

div id=calendar

div id=elixirs

h2
h2

h3

h3

h3

h1

h2

h3

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

( , . .)?

: . : . ,
#elixirs h2 elixirs, <h2>

<div>
<blockquote> <div> (
) . . ,
<h2>, ,
, .

452

10

#elixirs > h2, <h2>,


elixirs.

: , -
, <h2>, <blockquote>,

elixirs?

, , :
#elixirs blockquote h2 {
color: blue;
}


<h2>,
<blockquote>, elixirs.

div span


, ,
<h2>, ,
<h3>.
#elixirs h2 {
color: black;
}
#elixirs h3 {
color: #d12c47;
}

,
h2 h3, div elixirs. h2
, h3 , .


! lounge.css,
lounge.html.


h2,
.

453


,
. ,
,
, , . ,
, ? line-height <div>, , .
,
line-height, :

iv,
d

.
e-height
iv,
lin
d

#elixirs {



line-height: 1em;
:


.
}


.
body
small,
,

, <div>, 1em
elixirs.
line-height. , 1 -

. small, 12 ( ,
). , <div>
elixirs font-size
<body>, small.
, , <div> elixirs, ,
<div>,
. , <h2> , 1
, 120 % small, <p> , 1 ,
small. ? line-height
: , em %,
. 1, , , <div> elixirs,
, ,
<div> elixirs.
: 1 lineheight <div> elixirs,
, .

#elixirs {
line-height: 1;
}

454

10

height
line
1

div

elixirs,

line-height
h2


div
elixirs,
small,
12 .


body small

div id=elixirs
small

h2 120 % small



body 1,6 small
p
(p
all
sm


div id=elixirs
font-size
div small,
12

elixirs),

h2 is 120 % of small

12 .
120 %
,
small,
14
.

,
h2
,
14 (120 %
small).

div span

,
. ,
, .
,
HTML- CSS- ,
<div> id.
, ,
, CSS
-,
(HTML) (CSS) . HTML- ,
CSS-.

,
...

...

.

, !
,

,
,
CSS-.

455


, , , CSS-, , padding-left, padding-right,
padding-bottom padding-top.
. background-image, background-color
background-repeat?
. , , , .
padding-top:
padding-right:
padding-bottom:
padding-left:

0px;
20px;
30px;
10px;

,
.

, . ,
, .

.

padding-top:
padding-right:
padding-bottom:
padding-left:

0px;
20px;
30px;
10px;

padding: 0px 20px 30px 10px;

:
margin-top:
margin-right:
margin-bottom:
margin-left:

0px;
20px;
margin: 0px 20px 30px 10px;
30px;
10px; ,

,
.


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

456

10

20px;
20px;
padding: 20px;
20px;
20px;
,
.

20

div span

...

( ).
margin-top:
margin-right:
margin-bottom:
margin-left:

0px;
20px;
0px;
20px;

.
margin: 0px 20px;

.

,
, .

, ?
.
border-width:
border-style:
border-color:

thin;
solid;
#007e7e;



.
,
-

border: thin solid #007e7e;

, ,
.

border: solid thin;


border: solid thin #007e7e;

border: #007e7e solid;

border: #007e7e solid thin;

border: solid;

...
,
:
background-color: white;
background-image: url(images/cocktail.gif);
background-repeat: repeat-x;

background: white url(images/cocktail.gif) repeat-x;

457



. ,
: font-family, font-style, font-weight, font-size,
font-variant line-height. , ,
:
,
.

,
...

, .
,
.

font: font-style font-variant font-weight font-size/line-height font-family


.
,

font-size.

line-height
.

/
font-size

.

, . body :
font-size: small;
font-family: Verdana, Helvetica, Arial, sans-serif;
line-height: 1.6em;
:

,
,
.
font: font-style font-variant font-weight font-size/line-height font-family

:
font: small/1.6em Verdana, Helvetica, Arial, sans-serif;

, , ?
.

458

10

div span

: ?
: , . - ,

HTML

,
, . ?

: , .
, , ,
.
, -



,

,


,
, ,
.


:


.

. , CSS , , .
, ,
. ,
, ,
.

, -

ul ol

margin: 0px 20px


30px 10px;

,
, . CSS Pocket
Reference, . ,
.

. ,

, . <div>,
.
, :
,
,
.
font-size: 50%;
text-align: center;
.
line-height: normal;
margin-top: 30px;
, normal ( ,
).


, line-height, .
.
- , lounge.css. ,
? , .

459

,

.

?

.


- .

, -
?

460

10

div span

,
<em> <strong>
-
.

.

: , ,
<blockquote> , .
,
- .

. , -
<em> <strong>?
.

: , . ,
,
, . ,
.

: ?
: ,
, Music for Airports, Brian Eno.
, -
.
: , . , .
: , -
:
<div class="cd">Music for Airports</div>
<div class="artist">Brian Eno</div>.

,
.
: , , . ,
<div>, .
<span>. ,
.
: . ?
: <span>
. ...


461

span

<span>
<span>
, <div>
. , ,
, <span> - , CSS-
. , .
1
2

-
<span>.
<span> cd,
artist.
cd
, artist .

: <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>Music for Airports, Brian Eno</li>
</ul>

<span> :


s
clas
span
cd.


-.

span,

span artist.

<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. Bukem</li>
<li>Le Roi Est Mort, Vive Le Roi!, Enigma</li>
<li>Music for Airports, Brian Eno</li>
</ul>

462

10

div span

: <span>
, . <div>,
<span> , .
. lounge.ss:

: cd artist.

-
.

.cd {
font-style: italic;
}
.artist {
font-weight: bold;
}

font-weight bold,
.

<span>
, . :


.

.

463

span


. <span>
.
.

<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. Bukem</li>
<li>Le Roi Est Mort, Vive Le Roi!, Enigma</li>
<li>Music for Airports, Brian Eno</li>
</ul>

: : width
<span>
, <em> <strong>?

<span>? , ?

: , :
,
.
, , <em>;

, <strong>.
,
,
<span>,
,
.

464

10

, <span>, <em>
<strong>, , (
). , .
, .

, , .
,
,

,
.

. width, padding
margin, ,
.
5: , width <img>, width CSS,

, . ,
. :

, ,
, ( ).

div span

, : ,
,
.
,
,
.

<a>.
,
?

465

<a>
, ,
?
.
.
.

.

.

, . .

,

.

.

,
, .
, title.

, <a>
. ,
, . ,
. , <a>
, . .

466

10

div span

-
?
:
, (
). , . ,
? ,
. , , ,
. ...
, , ,
, , ,
, , . ? ! ,
,
, .

a
,


: (),

. ,

,
,


!)
a:link

a:link {


color: green;
}
.
a:visited {
color: red;
}
a:hover {
color: yellow;
}

,
.

,
.

lounge.css,
lounge.html. ,
. ,
, ().

: , <a>
? :
a {

color: red; }

: , , ,
,
,
, , .

: ?
: : .
,
. ?

, .
. :focus
,
,
( ), ,
. ,
.

: ? ,

?

: , . ,
, . , : link, visited, hover, focus,
active.
, ,
.

: , . ?
: CSS, . , ,
.
, ...


467

, .

Head First: , . Head First: , ?
, . : , <a>
, . . ,
? , , 1980- .
:visited.
: , , Sussudio. ? , :hover. , .
?
Head First: . . :hover.
, ?
, ? Head First: , .
,
: ?
-, ,
: , ,
.
,
Head First: ? ?
, : , ?
CSS-. Head First: , ,
, ?
. , : , : ,
. .
, :active :hover,
Head First: , . , , ?
. : , HTML- , :first-child
:visited, :link , <blockquote>.
:hover. , .

Head First: . <blockquote>
: :last-child. .
a:link, a:visited a:hover , . . , ,
HTML-.

468

10

Head First: , , ,
- .
,
Sussudio?! , , .

div span


, .
. , , , :link :rst-child, ,
, . , , , ,
. ,
, , ,
. ,
.
.
lounge.css ,
. .

.
a,


elixirs.

#elixirs a:link {
color: #007e7e;
}
#elixirs a:visited {
color: #3 33333;
}
#elixirs a:hover {
background: #f88396;
color: #0d5353;
}


.
,...
... -.


.


, .

,
,
.
!

lounge.css a:link, a:visited


a:hover ,
. .

469


, ,
. : , ,
, .

, .

, .


,
. ,
, . ,

- . . ?
, , ,
. .
lounge.css.

____________ {
____________ {

470

10

__________: #007e7e;
__________: #3 33333;

}
}

div span

?
( , 471- ),
, .
, , CSS.
, .
,
. , , , . ,
, . .
-,
,
.

, , .

!important.





HTML-.
, -
.

( !)

, ,
,

,
-
.
,
, , .

( )

,
,
.
( ) ,
, , ,
.

471

, ,

.
.
.

.
,
?


. ,
, , .
,

,
.
, .
,
. , ,
,
, ,
, 99 % -
( ).

472

10

div span

. , <h1>,
font-size. .

.

: ,
-, , , . , , !

.

font-size,
, , , <h1>.
CSS-
, -
!important.
<h1> font-size.

, , .

, , :
, , . , ,
, , , .

.

, 8. ,
, . , blockquote h1 , h1,
<h1>, <blockquote>.
, ,
.

, ,
.


( ). , , , .
! ,
font-size. , .


473

?
,
, :

000
,
:


?

.

-
? .
-
?
.
h1 h1.blue

,
-

000

, h1 , :

.


1.

001

h1.blue
,
: h1.blue

, :
1.

,
0.
.

011

, ,
: , . , h1.blue 11, ,
h1, 1.


,
:

h1.greentea

ol li p

em

p img

.green

span.cd

a:link

474

10

#elixirs h1

#sidebar

div span

: : :
?

:
: 100 () 010 (),
, , , 001 (),
. .

h1, h2?
?

!important?

. ,
?

: : . , !important , , :
h1 {
font-size: 200%
!important;
}

,
.
,
, .
,
, (,
, , ).

: h1,
001, h2
001.


! . ,
color <h1>:
<h1 class="blueberry">- </h1>


.

.

, ,
, h1.

h1 {
color: black;
}

h1 {
color: #efefef;
}

body h1 {
color: #cccccc;
}

h1.blueberry {
color: blue;
}


(,
CSS)
.


.

(
).

,
.


475

, ,
, h1
color.

body h1 {
color: #cccccc;
}
h1 {
color: black;
}
h1 {
color: #efefef;
}



:
, , .

h1.blueberry {
color: blue;
}

h1 {
color: #efefef;
}

h1.blueberry {
color: blue;
}

body h1 {
color: #cccccc;
}



: , ,
.

h1 {
color: black;
}


.
, .

h1 {
color: #efefef;
}
h1.blueberry {
color: blue;
}
body h1 {
color: #cccccc;
}
h1 {
color: black;
}

001
011
002
001

h1.blueberry {
color: blue;
}


blueberry - h1 {
color: #efefef;

}
,
body h1 {
color: #cccccc;

}
.
h1 {
color: black;
}

011
001
002
001

, : , , .
, body h1
h1, .

476

10

div span


,
.
,
. blueberry, 11, .

011, , .

...

h1.blueberry {
color: blue;
}

h1 {
color: #efefef;
}
body h1 {
color: #cccccc;
}

h1 {
color: black;
}

,
,
, h1.blueberry
. , <h1>
blue color.

: , CSS- : , , , , HTML

?

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

,
, ?

. ,
:
, , .
. ,
, ,
.

:
?

: - .
. ,
, ,
, -

.

,
.

:
, .
,
,
,

. , , ,
.


477

, ,


,
?

, .
7.
, .
, : , border .
(color, font-family, line-height
. .), -, , .
.

. , ,


?

, .
,
.

,

?

,

, .
, , .
.
478

10

div span

! ,
!


. ,
, . , .
1

lounge.html <div>
elixirs.

<div> elixirs ,
.

. ?

lounge.css.

#elixirs.


:
oat: right;

? , ?

479

div span

<div> ,
.


,
.

<div>, , .

<div>,

. ,
.

, <div>,
<div> ,
. ,
, border
<div>, .

width
.


, , , .

,
, .

Text-align , ,
.
.

480

,
, . ,
div h2 { ... }

10

<h2>,
<div> ( , . .).


. , paddingtop, padding-right, padding-bottom


padding-left
padding.

padding, margin, border,


background font.

<span> <div>:
.

<span>
( <span>
), .

<a> . <a>
unvisited, visited hover.

, . , <a>, :link
( ), :visited (
) :hover (
).


,
<a>.

: :hover, :active, :focus, :rstchild last-child.

div span

, .
? .

:
, , . ,


, ,
.
- ,
- .

30 + 2 + 5 + 200 + 10 + 2 + 20 = 269

, , ,

. , 200 . , , ,
,
thin. ,

1 ( ). ?
?
, ,

0 .
, .

<div>. .

20 + 20 + 200 + 1 + 1 + 0 + 20 = 262

. ,
<h3> <div>,
. #d12c47
color. ,
, . .

#elixirs h3 {
color: #d12c47;
}

. h3,

elixirs.
.

html

body

h1

h2

div id=calendar

div id=elixirs

h2
h2

h3

h3

h3

h1

h2

h3

481

. ,

, . <div>,
.
, :
.
: FINE PRINT.

font-size: 50%;
text-align: center;

line-height: normal;
margin-top: 30px;

, normal.

,

.


v.
di

footer.

<div id="footer">
<p>
&copy; 2012, Head First<br />
, ,
.
</p>
</div>

CSS-
.

#footer {
font-size: 50%;
text-align: center;
line-height: normal;
margin-top: 30px;
}

482

10

p
small, ,
,
. !

div span

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

483

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

a:link
____________
{

color
__________:
#007e7e;

____________
{
a:visited

__________:
#3 33333;
color

484

,
. .

h1.greentea

011

ol li p

003

em

001

p img

002

.green

010

span.cd

011

a:link

011

101

#sidebar

100

#elixirs h1

11



,
div span
.

HTML- .
. ? ,
<div> <span> , .
.
, ,
.

485


?

, ,
. .
, ?
<div> elixirs
,

elixirs:
oat: right;
, !
, .

.
? ? ,

? , . , .


.
,
,
.

486

11

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

<html>
<head>...</head>
<body>
<h1>...</h1>
<h2>...</h2>
<p>...</p>
<h2>...</h2>
<p>...</p>
<p>...</p>
<p>...</p>
</body>
</html>

,

.

HTML,
.

h1
h2
p

h2
p

p
,

.

487


.

lounge.html.


lounge.html
.

.

,

body.
float
CSS-, ,
. ,
.


,

.
h1

h2

p
p p
p p
p
p

div
div

ul

488

11



wHTML-.

, , ,
.
. ?
: , .
.


p,

.



,
.

<p>
<em> </em>,

<a href="beverages/elixir.html"
title=" Head
First"></a>.
</p>

p
text

text

em

,

. ,

.
,
,
.


width?
, .
.


, ,

. ,
-
, .
,
?
, ,
.

p
text

em

text

text

p
text
em

text

text
text

489


, ,
,
. , , span em,
. .


,

,
.

,
.



,

.

h1

h2
text

h1
h2

text

text
text

text

text

h2
p

text
text



,

,


.

text
span

span

em

em

text
text

h2
p

text

span

span

em

em

text
text

text

text

text
img

img

img

img

p
img

img

img

img


, .
.



,
.

490

11

,
,

. , - - , .


...
, , .
, . , 10 , 20 ,
30 .

,


.

,
.


...
.
, .
.



,

.

The Head First Lounge is, no doubt, the


biggest trendsetter in Webville. Stop in
to sample the eclectic offering of elixirs,
teas, and coffees, or, stay a bit longer
and enjoy the multicultural culinary
menu that combines a harmony of taste,
texture, and color with the best in fresh
and healthy ingredients.

During your stay at the lounge, youll


enjoy a smooth mixture of ambient
and mystic sounds, filling the lounge
and adding an extra dimension to your
dining experience. The decor surrounds
you with the relaxing sentiments of
sights from eras past. And, dont forget,
the lounge offers free wireless access to
the Internet, so bring your laptop.



.
,

10 ,
20 .

20 .

The Head First Lounge is, no doubt, the


biggest trendsetter in Webville. Stop in
to sample the eclectic offering of elixirs,
teas, and coffees, or, stay a bit longer
and enjoy the multicultural culinary
menu that combines a harmony of taste,
texture, and color with the best in fresh
and healthy ingredients.

During your stay at the lounge, youll


enjoy a smooth mixture of ambient
and mystic sounds, filling the lounge
and adding an extra dimension to your
dining experience. The decor surrounds
you with the relaxing sentiments of sights
from eras past. And, dont forget, the
lounge offers free wireless access to the
Internet, so bring your laptop.

491

: ,

.
, .

, ,
.

, .
,
.

: . , :

, ?


,
0 .
, , 10 ,
10 .

?
?

: , .

,
, ?
, ,
, .
. ,
, ,

.

(0 ),
20 ,
20 ?

:
?

: , , ,

. -


( , ), ,
.
,
, , , .
,
.

: -


.
,
CSS-?
,
oat: right;

oat,
.
, , ,
, ,
. , ,
, oat.
, , oat ,
( ). , , .
, - , ...
492

11


,

.

text

h1
h2



.
amazing floating paragraph,

amazing.

text

p id=amazing
text
h2
p

text
span

span

em

em

text
text
text

p
img

img

img

img

text

h1

h2

.
200 .

p id=amazing
text

text

text
text

#amazing {
width: 200px;
}

h2
p

,
200



. ,

,

text
span

span

em

em

text
text
text

p
img

img

img

img

493


text

h1

oat.
left right. right:

h2

text

p id=amazing

#amazing {
width: 200px;
oat: right;
}

text
text
text

, amazing, ,
.
(2)
,
,
.

,
.

(1)
,
.

(3)

,


,
.

h2
h2

text

span

11

text

text

em
span

text

text
text
text
text

p
img

494

p id=amazing

text
text

em

(4)
,

,

.

,


.
,

text

h1

img

img

img



,
. , .

div
elixirs oat
right. ,
div

,
.

div
,

. div
elixirs
,

,
.


div
elixirs,
.

, div
elixirs

.
,

,
.
,
,

,
.
,
.

495

: starbuzz

<div> , .
? , <div>
elixirs .

.
,


Starbuzz?
,
Starbuzz
.

, .
Starbuzz . ,
,
, ,
Starbuzz
.
-
. .
. ,
, , ,
.

496

11

Starbuzz
,
, ,
. CSS-,
.

Starbuzz
GIF.

:
,
,
- ,
Bean Machine,
.

div,


.

,

. ,
div
.

Bean Machine.

Starbuzz,
.
,

.
.
,
.

,

:
.

497


Starbuzz.
<div>, . <div>
<span>, , 5. ,
, , CSS-.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Starbuzz </title>
<link type="text/css" rel="stylesheet" href="starbuzz.css"/>
</head>
<body>


HTML.

<div id="header">
<img src="images/header.gif" alt="
Starbuzz"/>
</div>


div

<div id="main">
<h1> , </h1>
<p>
Starbuzz ,
. , ,
,
, .
, .
Starbuzz, .
</p>
<p>
<em></em>? ,
<a href="http://buzz.wickedlysmart.com"
title=" "> </a>.
, ,
.
</p>
<h1> </h1>
<p>
, , . , ,
. Starbuzz ,
, : Starbuzz .
</p>
<p>
,
Starbuzz . ,
Starbuzz Head First -
Starbuzz,
.
</p>
<h1> STARBUZZ</h1>
<p>
Starbuzz , :

498

11

<a href="beverages.html#house" title=" "> </a>,


<a href="beverages.html#mocha" title=" "> </a>,
<a href="beverages.html#cappuccino" title=""></a>

<a href="beverages.html#chai" title=""></a>.
</p>
<p>
,
. ,
<a href="form.html" title="The Bean Machine">
Bean Machine</a>, Starbuzz .
</p>
</div>
<div id="sidebar">
<p class="beanheading">
<img src="images/bag.gif" alt=" Bean Machine"/>
<br/>
-
div Bean
<a href="form.html">BEAN MACHINE</a>
<br/>
Machine.
<span class="slogan">

<br/>
sidebar.
<br/>
<br/>
?
</span>
</p>
<p>
?
Bean Machine. ?
Bean Machine, , , (
), .
</p>
</div>
<div id="footer">
&copy; 2012, Starbuzz
<br/>
, ,
.
</div>

</body>
</html>

,
div
.

499

starbuzz


CSS-,
Starbuzz-. CSS-. , CSS .
body {
background-color:
font-family:
font-size:
margin:

#b5a789;
Georgia, "Times New Roman", Times, serif;
small;
0px;

}
#header {
background-color: #675c47;
margin:
10px;
height:
108px;
}



body:
, ,

0 .


.

#main {
background:
font-size:
padding:
margin:

#efe5d0 url(images/background.gif) top left;


105%;
15px;
0px 10px 10px 10px;

}
#sidebar {
background:
font-size:
padding:
margin:
}

#efe5d0 url(images/background.gif) bottom right;


105%;
15px;
0px 10px 10px 10px;

#footer {
background-color:
color:
text-align:
padding:
margin:
font-size:
}

#675c47;
#efe5d0;
center;
15px;
10px;
90%;

h1 {
font-size: 120%;
color:
#954b4b;
}
.slogan { color: #954b4b;}
.beanheading {
text-align: center;
line-height: 1.8em;
}

500

11



.

,
,


main sidebar
.



.

slogan,
div
sidebar.
beanheading,
.

a:link {
color:
text-decoration:
border-bottom:
}
a:visited {
color:
text-decoration:
border-bottom:
}

CSS-
Starbuzz a:link
a:visited .
#b76666;
none;
thin dotted #b76666;

, ,
text-decoration none.

#675c47;
none;
thin dotted #675c47;

border-bottom

a.

...


,

.

,

.

Starbuzz
: Starbuzz , Bean Machine, , , .
, ?
.
1

id,
, . .

, HTML-
,
.
Starbuzz.

. ,
, .

, .
, Starbuzz
.


,
.

501


,
HTML- ,
.
. , HTML-
, <div> sidebar <div>
header. HTML-
index.html chapter11/starbuzz.
, .


, 280
sidebar. ,
oat chapter11/starbuzz.css.

,
div sidebar.

#sidebar {
background:
right;
font-size:
padding:
margin:
width:
oat:
}

#efe5d0 url(images/background.gif) bottom


105%;
15px;
0px 10px 10px 10px;
280px;
.
280
right;


sidebar . ,

. ,
sidebar
.
HTML,
sidebar,
.

502

11

.

,
sidebar
?
,


.

,
.
. <div>
,
.

.
, .
, .

, ,

.

.
,
. ,

, .
, , . ,
, , .


503

oat

Starbuzz
, starbuzz.css
chapter11/starbuzz
, Starbuzz. ,
.

, ,
,

,
.
,



,

.

,


.
,
.

,
. ,
, , .

504

11


, , , ,
,
. , ,
. ,
, .
,

, , . , ,
,
, .

,
,

,

.

,

,

,
?

, .

.

,

.
, (
,
).

,
.

505


,
. ? , ,
. ,
. .

#sidebar {
background:
font-size:
padding:
margin:
width:
oat:
}

#efe5d0 url(images/background.gif) bottom right;


105%;
15px;
0px 10px 10px 10px;
280px;
right;

,
.


330 . 10
,
( ).
330 #main starbuzz.css,
:
#main {
background:
font-size:
padding:
margin:
margin:

#efe5d0 url(images/background.gif) top left;


105%;
15px;
10px;
0px 330px 10px 10px;

330 ,
.

506

11

, starbuzz.css
index.html.
. , .
,
, , <div>
.
<div>
( ),
,
.
. , <div>
main
,
, .
div
main,
.

,

, , , .
,

.
?
,
, .
,
.

.
,
.


,
,
.
. , ?


507

.
,
,
?

?

?

,

.
,
,
,
.
, , .
. ,
,
.
, .

,
.


,
.

508

11



CSS-, clear. , ...

div id=header

.
,
main

div
div ,

footer
sidebar.
div

div id=main

div id=sidebar
text

div id=footer

, . , div
main footer , .
, , , ,
, .

CSS- clear , ,
,
. ...
#footer {
background-color: #675c47;
color:
#efe5d0;
text-align:
center;
padding:
15px;
margin:
10px;
font-size:
90%;
clear:
right;
}

,
, ,
.
,
,

. , ,
.

div id=header

div id=main


,


.

div id=sidebar
text

div id=footer

509

, ! starbuzz.
css clear index.html.
,
. !


.
,
.

,
, . , ,
,
,
,
(
) ( ).
float ,

CSS-.
, CSS
,

.
, ,

, .

: ,
?

: , CSS , .
, , ,
- ,
,

.

510

11

,
CSS, ,

.

: ?

: , .
,
,

. ,

,
.
,
.

,
. ,

,
,
, .
,

,
, .

:
?

: , , .
.

, , , .
,
, , , .

, .

: ,
,
?

: , .
, , , ,
.
,
clear
,
, ,
(
)
.


, ,
,



.

. ,
<div>.
,
, .
(
, , . .),
, ,
. ,
.
, :
.


511

css

, , CSS!
, , , CSS?
index.html <link>
<head>, .

( , ). , !
.
( , CSS).

Starbuzz
CSS. ,
.
,
Bean Machine

, , .

, , ...
Starbuzz
,
. .

512

11

: .
, . ,
. - ,
. , CSS, index.html <div> sidebar <div> main.
CSS- sidebar:
#sidebar {
background: #efe5d0 url(images/background.gif) bottom right;
font-size:
105%;

padding:
15px;
,
margin:
0px 10px 10px 470px;

width:
280px;

.
oat:
right;
470 .

}
,

div
,
.

,
.

div sidebar

width oat.
420 .

: .
<div> main. :
#main {
background: #efe5d0 url(images/background.gif) top left;
font-size:
105%;
330
padding:
15px;
10
margin:
0px 10px 10px 10px;
width:
420px;
oat:
left;
,
}

, div
main . .
420 .

: .
,
clear right left.
#footer {
background-color:
color:
text-align:
padding:
margin:
font-size:
clear:
}

#675c47;
#efe5d0;
center;
15px;
10px;
90%;
left;

clear
right left.

.

513


,
, . , ,
.
starbuzz.css index.html.
, ,
,
.


, div .
,
; ,
.
,
.

div sidebar ,
.
,
, ,
, .

, ,

(- <div>). : ,
<div> main HTML?
?

514

11


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

HTML
HTML- <div> allcontent. , <div> . ,
<div> <div> header,
<div> footer.
div allcontent
<body>
, body.
<div id="allcontent">
<div id="header">
... HTML ...
</div>

</div>
div
er.
foot
</body>

div


800 allcontent
CSS

.
<div>,
:

<div>

allcontent

, 800 . CSS-,
.
800
:
#allcontent {
width:
padding-top:
padding-bottom:
background-color:
}

800px;
5px;
5px;
#675c47;


div,
. ,
.

div allcontent
800 , . , div , .

515


, ! starbuzz.css index.html.
, .
.

iv
d



800

allcontent


.
div

t,
n
te

n
allco
800

,
.
.
0
80


,

.


, ,
.

,


? , !
- , ,
. , , .
. : .
, .
, , .

#allcontent {
div
width: 800px;
allcontent, auto.
padding-top:
5px;
padding-bottom: 5px;
background-color: #675c47;
margin-left: auto;
margin-right: auto;
}
auto ,
, . auto
, ,
, .

516

11


margin starbuzz.css .
. , ?

, ,

,
,
.
?

CSS ,
.
,
. , ,
.
.
CSS, . .
,
,
.
HTML CSS, .
chapter11/absolute.
, , , .
<div>: , , .
, HTML- <div> sidebar
, , .


517


, .
CSS-, <div>
sidebar . . ,
, .

position,
,
.

#sidebar {
position: absolute;

top:
100px;

right: 200px;
top right.
width: 280px;
}


div.

CSS
, CSS-. ,
.
,
top right ( bottom
left).
100 200 .
, <div>,
, .


,


,
top, left,

div id=header

div id=sidebar
div id=main

right bottom.

,
,
,

200
.


100

div id=footer

.

.
, .

518

11


. , <div>
annoyingad. :

#annoyingad {

position: absolute;

100

top:
150px;

,
iv
d
.


left: 100px;
150

width: 400px;
}
div id=header
100 div id=sidebar
150
div id=main
d=main
div id=annoyingad
. ,
400 .

, <div> annoyingad
. , , .
,

.
.

?
, :
.

,
, ?
, ?
z-index,
(
z-index).

div

main footer
header,
.

div id=footer

, div annoyingad div sidebar.

div sidebar
annoyingad
, annoyingad z-index, sidebar,
.

div id=h

eader

div id=s

idebar

nnoying
div idm=aian
div id=m

div id=f

ad

ooter

519


position ?

: - : position, static
absolute?

: static. : : static, : ,
,
, .
,
float.
,
, ,
.
absolute position.

.

: <div>?

absolute, fixed relative.


static absolute.
, (
),
.
.
, ,
, - .


.
.

: : : , .
, ,
.

: ,
?

: , , . ,
<img>.

<em>, <span> ., .

520

11

,
?

: .
,
, , .
, .
width
, .

.
,
. ,
, 800 ,
10 %, 80
.
400 ,

10 % 400 ,
40 .
,
. ,
, , .
- .

: , z-index,
?

: , z-index
,
CSS.
-
.
,
(
z-index).


Starbuzz , ,
. . .
1

<div> sidebar
.
, , .

,
,
.

, , .

CSS Starbuzz-
HTML- , <div> sidebar ,
( ). CSS,
. starbuzz.css
.
#sidebar {
background:
font-size:
padding:
margin:
position:
top:
right:
width:
}


,
,



e.
ut
ol
ter11/abs
chap
absolute, , , index.html starbuzz.
css starbuzz
, .

#efe5d0 url(images/background.gif) bottom right;


105%;
, ,
15px;
0px 10px 10px 10px;
128 absolute;
.
0
128px;
,

0px;
,
280px;
, : 280 .

128, ...

0


,


.

521

<div>
main
. ,
. , <div> main 330 .
#main {
background:
font-size:
padding:
margin:
}

#efe5d0 url(images/background.gif) top left;


105%;
15px;
0px 330px 10px 10px;

, , .
, , ,
.

div main
,


, .

, ,

.
,


,

.

522

11

,
, div main . , .
div
sidebar.

128
. ,
10 ,
, .

10
div id=header

div id=main

div id=sidebar
text

div id=footer

108 .
,
CSS.

10


128
,


.

, ,
.
,
clear.


, CSS, index.html . .

,
,

, , .


, .
,
.


,

128

.
,
10 ,


.

.
, .
, clear
,
.


,

.

523

, , ,
,

HTML
CSS,
?

,


CSS.
? CSS

,
( , ,
), CSS-,
HTML CSS.
:
?, ,
,
( ,
,
). , ,
CSS.

524

11

,

.

CSS
,
. .
CSS HTML-.


4 ,
3 ,
, 12


,
<div>

, , ,
. :
.

<div>

<p>

<img>

<div>

<p>

<img>

<div>


3 ,
2 ,
, 6 .

<p>

<img>

,

.


,
.
, <div>.


525

CSS


CSS, , Starbuzz, main sidebar, . ,
,

CSS HTML
, CSS-, , - HTML-. ?
, ,
, .
<div> ,
<div> . ,
<div> . , HTML- , CSS-,
.

526

11

HTML-
,
CSS HTML:

<div>,
,
.

<div id=main>


<div>, .
Starbuzz
.

, .
,
: <div>
main <div> sidebar.

<div
id=sidebar>


: HTML,
Starbuzz.

HTML,

Starbuzz.

527

: HTML,
Starbuzz.

!

<div>
tableContainer ,

<div>
tableRow.


HTML

,

<div> main sidebar,

.
,

, , ,
.

...
<div>

<div id="tableContainer">
tableContainer,
<div id="tableRow">
sidebar.
<div> main

<div id="main">
<div>
...
tableRow, </div>
<div id="sidebar">
<div> main sidebar,
...
<div> tableContainer.
</div>
,
</div>
<div>!
</div>
...
.
,
<div>.

528

11

CSS
, , HTML-
CSS, , CSS
.

<div> tableContainer.
. <div>
tableContainer :
div#tableContainer {
display: table;
}

<div> tableRow.
, <div>.
, <div>.
<div>- :
div#tableRow {
display: table-row;
}

tableContainer
<div>, .

eRow
div tabl

.
,
, .
(

, div.tableRow),
.

, <div>
main sidebar , . <div> :
<div> main

sidebar ,
.

#main {
display: table-cell;
background: #efe5d0 url(images/background.gif) top left;
font-size: 105%;
padding: 15px;
margin: 0px 10px 10px 10px;
}
#sidebar {
display: table-cell;
background: #efe5d0 url(images/background.gif) bottom right;
font-size: 105%;
padding: 15px;
margin: 0px 10px 10px 10px;
}

529

css

Starbuzz
Starbuzz,
, .
HTML- CSS- Starbuzz, , chapter11/tabledisplay, HTML
CSS-. index.html <div>
<div> main, <div>
sidebar: tableContainer, tableRow.
starbuzz.css, CSS-:

#tableContainer {
display: table;
border-spacing: 10px;
}
#tableRow {
display: table-row;
}

display: table <div> tableContainer


, .

HTML-.

border-spacing
10 . borderspacing margin
. border-spacing
).
, <div> (.

<div> tableRow
( ) .

#main {

<div>
main <div> display: table-cell;
sidebar
background: #efe5d0 url(images/background.gif) top left;
font-size: 105%;
. <div>
main padding: 15px;
<div>


margin: 0px 10px 10px 10px;
<div>
main sidebar.
tableRow (
vertical-align: top;
HTML}
), <div> #sidebar {
sidebar
.

display: table-cell;

background: #efe5d0 url(images/background.gif) bottom right;


font-size: 105%;
padding: 15px;
margin: 0px 10px 10px 10px;
vertical-align: top;
}

530

11

vertical-align,

( ).


! () .
, . ,
,
.

!
:

,

?
10 <div> header 10
<div> footer.
<div> main sidebar
0 ,
header 10 ,
10 .
, ,
, ,
10
,
10
10 .
<div>
main sidebar, 10 borderspacing <div> tableContainer.

10 ,
.
, borderspacing margin, ! 20
,
20
. , .


10
, 10

.
, border-spacing
margin,
,

20
,
10
.

531


,
,
, 0 .
margin: 10px
, margin,
, 10
, , . :
#header {
background-color: #675c47;
margin: 10px;
margin: 10px 10px 0px 10px;
height: 108px;
}

10


,
, 0 .

#footer {
background-color: #675c47;
color: #efe5d0;
text-align: center;
padding: 15px;
margin: 10px;
margin: 0px 10px 10px 10px;
font-size: 90%;
}

,
,
,
10 .




! 10 ,
,

.
display: table
,
, ,

Starbuzz.
532

11


Starbuzz
- Starbuzz. ,
,
20% . , HTML
,
CSS, , ,
.
.

HTML

<div id="drinks">
<h1></h1>
<p> , $1.49</p>
<p> , $2.35</p>
<p>, $1.89</p>
<p>, $1.85</p>
<h1> </h1>
<p>
,
Head First.
</p>
<p> , $2.99</p>
<p> , $2.99</p>
<p>- , $2.99</p>
<p> , $2.99</p>
<p> , $2.99</p>
<p> , $2.99</p>
</div>


,
Starbuzz
,
,
.


CSS
!

#drinks {
_________________________;
background-color: #efe5d0;
width: 20%;
padding: 15px;
vertical-align: top;
}

,
<div> drinks
.

533

display:table

: , HTML-
,
CSS- display:
table HTML?

: ,
HTML,
. , HTML-,
CSS- display: table

,
. HTML- ,

. ,
CSS- display: table
, HTML . HTML-
13.

: ,
?

: ,
HTML-,
. HTML- -

534

11

Starbuzz, ,
(
) . ,
<div>,
<div>
tableRow, <div> tableContainer
. , <div>
.

:
CSS vertical-align: top?

,
.

: , ?

: . , ,
,
,
, , ,
, ,
.

: : vertical-align:
top ,
. ,

Starbuzz
,
.
,
,
. ,
,
!

,
width.

, , ,
, , width
20%.

( ,

100%!).

, .

CSS-
, ,
HTML CSS. HTML,
() ; (
) <div> ( ),
CSS. : HTML
, CSS , .
, , ,
. .


oat ,
, <div> elixirs
. oat , ,
<div> elixirs, . oat
,

.
oat <div> sidebar Starbuzz, clear
,
.
,
<div>, ,
,
, . ,

oat, , .


,
<div> , , auto.
(
- , ,
, ).
. ,
,
(
).

oat
; Starbuzz
,
,

.

,

.

535

CSS- ()

, ,
.

, , ,
, . , ,
, ,
,
( , !).
Starbuzz ,
,
.


,
Starbuzz.
<div> HTML-,
, , , - ,
.
, ,
; .
, <div>
( , , ,
,
). <div>:
, , <div>,
.

, Starbuzz

. !
, , ,
( ).
,
, !

536

11

, ( !)

,
CSS,
,

. , , ,
,
.

, .
, Starbuzz
,
. CSS
,
,
,
, .
.
,
Starbuzz, , ,
, , , .
, ,
,
,
Starbuzz, .
800 .
800 ,
. , ,
800 , ,
.
?

537


Starbuzz, ,
, , . , , .
800 ,
.

0 ,
80


,
.

,
, ,
<div id=header>, ( ,
, Starbuzz )?


GIF- (
,

).

538

11


.
.


float
, CSS
, . , ,
oat. oat Starbuzz
, CSS. ,
, oat,
; . ,
.
headerLogo.gif


; headerLogo.gif headerSlogan.gif
chapter11/starbuzz/images.
headerSlogan.gif

HTML
.


.
.

HTML,
, 800 ,
, 1. , CSS.
<div id="header">
<img src="images/header.gif" alt="Starbuzz Coffee header image">
<img id="headerLogo"
src="images/headerLogo.gif" alt="Starbuzz Coffee logo image">
<img id="headerSlogan"
src="images/headerSlogan.gif"
alt="Providing all the caffeine you need to power your life.">
</div>

CSS
,
. Starbuzz,
.

,


.

CSS.

539

CSS , , , , . CSS
. ,
oat; , , .
, , .

______________________ {
float: ________;
}


CSS starbuzz.css
Starbuzz.

, ,
, ,
. !


,
.

float

, , ,
.
. , ,
headerSlogan.
. -
. ? :
. CSS , , .
. , : <img> <div>
header, <div>. ,
, . ,
, .
, , .
, !
540

11

:
clear: right <div>
tableContainer ?

: ,
,
108 , ,
,
.
, -

: , ?

:

,
?

: - : , . CSS
. ,
, <div> elixirs
; ,

<div>? , .


. ,
,
.
,
.

, ! Starbuzz

. .

?
. !


, ,

. ,
?
,
,
.
? ,
oat? ?


541


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

, , ,
. ,
.
. <div> ( , ,
). <div>:
<div>

.
<div id="award">
<img src="images/award.gif"
alt=" ">
</div>


,
,
800 (
), <div> .
, top left : 30
365 .
#award {
position: absolute;
top:
30px;
left:
365px;
}

<div>
award,

30


365 .

CSS- starbuzz.css, -. ,
, . , ,
.

542

11

: , , : , z-index
float, ,
.
float?

: ; , . ,
, . , , , ,

; , , float.
,
, float.

: <div>
,
.
, ?

, CSS,
, .
z-index ,
,
, .
1, z-index,
,
,
, ,
z-index.

: ,
z-index?

: , : - : , ,
, z-index
( ).
:
#div1 {
position:
top:
left:
z-index:
}
#div2 {
position:
top:
left:
z-index:
}

absolute;
30px;
30px;
0;

absolute;
30px;
30px;
1;


div2 div1.

z-index
.

: z-index
, , 1?

, !
( ,

).

: z-index ?
: , , CSS ,
.
!

543

,
,

?
,
.
,
.

,
: .
?
. ,
,
. : ,
,
.
?
, , ,
.

.

544

11


, .
, ,
, .
: , ,
, ,
, .
, <div> coupon.
<div>
300 100
.

coupon.

#coupon {
position: xed;
top:

300px;

left:

100px;

300


div



,


.
, W3C

100
div id=coupon

}
300
100 .

, .

,
:
.
.
. , . , ;
, .
, ,
,
, . ,
Starbuzz.


545



. <div>,
:
div coupon.

,
chapter11/starbuzz/images.

<div id="coupon">
<a href="freecoffee.html" title=" , ">
<img src="images/ticket.gif" alt=" Starbuzz" />
</a>
</div>

a,

, .

, ! <div> index.html
. , HTML
, ,
, .
CSS- .

#coupon {
position: xed;
top: 350px;
left: 0px;
}
#coupon , img {
border: none;
}


coupon

350
.

0 .
,

,
.
,

. ,


none border
.

,

.

, CSS ,
. div coupon , , . CSS-, , .

546

11


starbuzz.
css, . , , , ,
.
, freecoffee.html.
, ,
, .
,
.
. ,
,
.
, .

left
,
, .
90 ,

90
.

-90

350

#coupon {
position: xed;
top: 350px;
left: -90px;
}

div id=coupon


,
,
.

547



,
left, . ? , CSS.
, !


,
?
,
. ,
.

,
Bean Machine!

548

11

!
!


!
-, . ,
. CSS- (. )
. .

,
S.
CS
div id=header

div id=navigation

{
margin-top: 140px;
margin-left: 20px;
width:
500px;

div id=main
img id=photo

position:
top:
left:
width:

{
absolute;
20px;
550px;
200px;

{
float: left;
}

position:
top:
left:
width:
height:

{
absolute;
20px;
20px;
500px;
100px;

549

: , , , .
, , ,
?

: . , .
,
, ( ),
.
, top, left, bottom right,
, .
,
:
, <div>
drinks ,
position relative.
, ;
20 <div>
drinks, top: 20px, 90
left: 90px ( ,
).

: , :
, , ?

,
.

. , , ,
?
<div>
<div>, <div> ( ), <div> ,
<div>.
, CSS.

: , , ?

: ! , 283 ,
283px,
. - ; . ,
.

: , , ,
, ,
?
CSS?

: . , :
- , , .
,
.
. ,
(
<html>, - );

, ;

-, -

550

11

CSS- , ,
CSS3
, -, .
,
CSS-.
, CSS,
JavaScript, .
CSS , .

, .

position
: static, absolute, xed relative.


, .

.

.
.

, . ,

,
.


, . .


, .

top, right, bottom left


, .


,
.


.

.

, z-index.
z-index,
( ).

clear ,
( )
.

clear ,
, ,
.


. .

,
, ,
.

left, right, top bottom


,
.

CSS ,
.

CSS , .
<div>.


,
,
.

auto
width.


, .

,
.
,
, ,
.

,
.
.
, ,
.

551

.

lounge.html.

.
lounge.html
.

.
,
body.

float CSS-,
, .
.

div

h1
p
div


lounge.html

h2
p
h3
p
p
h3
p
p
h3
p
p

h2
p

ul

div


, <ul>,
<div> elixirs footer.


, , ,
<div>
elixirs .

<div> ,
. ?

,
.

div
,
,
HTML-
( )
.

10 + 10 = 330


15 + 15 + 280 + 0 + 0 +
,
. ? , ,
. ,
. .
#sidebar {
background: #efe5d0 url(images/background.gif) bottom right;
font-size: 105%;
padding:
15px;
margin:
0px 10px 10px 10px;
width:
280px;
oat:
right;
}

553

Starbuzz
- Starbuzz. ,
, 20% .
, HTML
, CSS, ,
,
. .

HTML <div>
tableRow,
<div>

main,


,

(

).

<div id="tableContainer">
<div id="tableRow">
<div id="drinks">
<h1></h1>

<p> , $1.49</p>
,
<p> , $2.35</p>
Starbu
zz
<p>, $1.89</p>
,
<p>, $1.85</p>
,

<h1> </h1>

.
<p>
,
Head First.
</p>
<p> , $2.99</p>
<p> , $2.99</p>
<p>- , $2.99</p>
<p> , $2.99</p>
<p> , $2.99</p>
<p> , $2.99</p>
</div>
<div id="main">

...
CSS
!

<div> drinks

,
display table-cell.

#drinks {
display:
table-cell
_____________;
background-color: #efe5d0;
width: 20%;
padding: 15px;
vertical-align: top;
}

554

11


!
-, .
,
.
CSS- (. ) . .
?

div id=header

,

S.
CS

#main
_______________
margin-top:
margin-left:
width:

{
140px;
20px;
500px;

#navigation
_______________
{
position: absolute;
top:
20px;
left:
550px;
width:
200px;

div id=navigation

}
div id=main
img id=photo

#photo
_______________
{
oat: left;

#header
_______________
{
position: absolute;
top:
20px;
left:
20px;
width:
500px;
height:
100px;
}

CSS , , , ,
. CSS
. , oat;
, , .
.
#header img#headerSlogan {
______________________
right
float: ________;

#headerSlogan

,
.

555

CSS,
, Starbuzz, main
sidebar, . ,
, .

<div id=main>

<div id=sidebar>


1 , 2 ,
, 2 .

<div>,

Starbuzz,
.

, ,
,

.
,

Starbuzz!

12 html5-

HTML
,
HTML5
,
,
HTML4.01

, HTML5.
, , , , , .
: , , HTML,
, HTML5.
HTML-, HTML5, , .
, , ,
, .
(, <video>),
. , !
557

html-

HTML-
,
, <div> ?
, <div id="footer"> ,
, <div>, ? , ?
HTML5- , <div>, HTML-,
. , ( ) id="navigation" ,
, <div> . ,
id="goobledygoop".
, <div>, ,
, , ,
. ,
HTML5 <div> , , .

<div>,
. , -, , <div>. ,
<div> HTML-. ,
<div id="footer"> <footer>.
, HTML. ,
, , ,
. ( ), :

558

12

html5-

, , HTML5-,
, ?
( , ,
); ,
:

<article>

<nav>


.
,
.
.

<header>


.
<footer>

<time>

,
,
.

.

<aside>

<section>

<video>


,
, .

-,
.

559

Starbuzz
Starbuzz , , -
? , , ,
HTML5:

Starbuzz <div>
header .


>,
er
d
ea
h
<
?

,
, <div> main.



,
,
.

<div>

drinks

.

<div>
sidebar
.

,
;
<aside>
?




Starbuzz.

<div> footer
.
, <footer>.

560

12

:
,
.

html5-

HTML5-, ,
Starbuzz, . ,
.

<div id=header>

<div id=drinks>

<div id=main>

<div id=sidebar>

<div id=footer>


,

.

561

HTML5-, ,
Starbuzz, .
, .
<header>
<div> header; !

<header>

<section id=drinks>

<section id=main>

;

<section>.

<footer>

<div> footer <footer>.

562

12

<aside>
;

<aside>,


.

html5-

HTML- Starbuzz
HTML- Starbuzz, <header>, <footer>
<aside>. <section>,
<div> drinks main . Starbuzz-
index.html :

<header>.
<div> header <header>. :
<div id="header">
<div> <header>.
<header>
<img id="headerLogo"
src="images/headerLogo.gif" alt=" Starbuzz">
<img id="headerSlogan"
src="images/headerSlogan.gif" alt="
...">
</header>
</div>

<footer>.
<div> footer,
<footer>:
<div id="footer">
<footer>
&copy; 2012, Starbuzz
<br>
,
, .
</footer>
</div>

<div> sidebar <aside>:


<div id="sidebar">
<aside>
<p class="beanheading">
<img src="images/bag.gif" alt=" Bean Machine">
...
</p>
,
<p>

; ,
...

,
</p>
<div> <aside>.
</aside>
</div>


563


HTML- Starbuzz
- ,
, HTML- - , ? ,
Starbuzz .

-- ,

.

?

HTML5.

Starbuzz
.

; .
, HTML, CSS.
: <div> , CSS, .
CSS,
<div>.
.

564

12

html5-


HTML
5-,

.
,

,

HTML5



(,
Internet Explorer
8 ,
Safari 3
. .).
,
-
, ,

,

,


.

,
Android iPhone,
HT
ML5-,


,


!

http://caniu
se.com/#search=new%2
0elements


,
.

565

CSS,
CSS, . ,
CSS- . :
body {
background-color: #b5a789;
font-family:
Georgia, "Times New Roman", Times, serif;
font-size:
small;
margin:
0px;
#
}
<header>.
#header {
<div> header
header {
<header>
background-color: #675c47;
margin: 10px 10px 0px 10px;
height:
108px;
}
#header img#headerSlogan {
header img#headerSlogan {
float: right;
,
}
CSS.
...

sidebar

#sidebar {
<aside>.
aside {
display:
table-cell;
background:
#efe5d0 url(images/background.gif) bottom right;
font-size:
105%;
padding:
15px;
vertical-align:
top;
}
#footer {
, footer {


background-color: #675c47;
color:
#efe5d0; <footer>.
text-align:
center;
padding:
15px;
margin: 0px 10px 10px 10px;
font-size:
90%;
}
...

, , ;
, ,
. ,
, ,
HTML5-.
566

12

html5-

HTML5-,
?

: HTML5 HTML4.01.

HTML5

HTML4.01

, , HTML4.01. , ,
.

? ,
- HTML4.01.

, . , ,
,
- .

? ? -
, .

<p>? ? .
.

<div>
<div> . .
,
<div>. ,
, ,
, ,
?
?

, , ,
, , <div>.

567

html

HTML5

HTML4.01

, <div>,
, , <article>,
, ,
-
, .

? .

, ,
,
?
, , , .
. , , <aside>,

. , ,

, , <aside>, ,
. <div>,
,
HTML- .
, <aside>.
-
<aside>. ,
<aside>.
, , HTML-: <header>, <footer>, <section>, <article>,
<time>
> . .

568

12

, ? ? ?

- ...

, , HTML5
, ,
<aside>.
, <footer>

html5-

HTML
<section>.

<div> header,
footer sidebar <header>, <footer> <aside>.
<div>
drinks main <section>, CSS.
<div>
,
.

<div id="tableContainer">
<div id="tableRow">
<div id="drinks">
...
</div>
<div id="main">
...
</div>
<aside>
...
</aside>
</div> <!-- tableRow -->
</div> <!-- tableContainer -->


HTML- CSS-,
<section>.

CSS #drinks #m
ain.
#drinks {
display:
table-cell;
background-color: #efe5d0;
width:
20%;
padding:
15px;
vertical-align: top;
}
#main {
display:
table-cell;
background:
#efe5d0
url(images/background.gif) top left;
font-size:
105%;
padding:
15px;
vertical-align: top;
}





?
,
?

569

HTML
<section>.

<div> header, footer sidebar <header>,


<footer> <aside>. <div> drinks main <section>, CSS.
<div>
,
. :

<div id="tableContainer">
,
,
<div id="tableRow">
<div>

<section id="drinks">
on>
<secti
...
drinks main.
</section>
<section id="main">
,
...
</section>

<aside>
<section>,
...
.
</aside>
</div> <!-- tableRow -->
</div> <!-- tableContainer -->

CSS
.
section#drinks {

CSS
display:
table-cell;
!


background-color: #efe5d0;
,

width:
20%;


padding:
15px;
.

vertical-align: top;

}
section#main {
display:
background:
font-size:
padding:
vertical-align:
}

570

12


,
,

<section
>.
table-cell;

#efe5d0 url(images/background.gif) top left;


105%;
15px;
top;

!
,
,
,
HTML5 ?

html5-

, .
-
HTML5- ?
,
,
, .

, ,
HTML5-
. , ,
, Starbuzz.
<section> drinks <aside>
,

. :
,
.


(header)


-.

571

, , , ,
.
, , . , - .
:

-.

,
,
-,
.

<header>
<footer>
<article>
<nav>
<time>

<aside>
<section>
<div>
<h1>
<p>

<header>
<__________>
<section
id=drinks>

<______________>
<___________>
<___________>
<___________>
<___________>
<___________>
<___________>

<___________>
<___________>
<___________>

<footer>

572

12

<aside>

html5-

, , , ,
.
, , . , - .
:

-.
,
,

-,


<nav>
.

<section> blog
<section>, <section>


-
<article>,
- (
<article>


<article>).

<header>
<footer>
<article>
<nav>
<time>

<aside>
<section>
<div>
<h1>
<p>

<header>
<nav>

<section
id=drinks>

<section id= blog>

<aside>

<article>
<h1>
<p>
<article>
<h1>
<p>

<article>
<h1>
<p>

<footer>

573

article

- Starbuzz
, <section> -
( ) <article> -. ,
. blog.html , index.html
<section> main <section> blog. blog.html , ; :
<section>


,
<article>
index.html.
main
<h1>Starbuzz meets social media</h1>


<p>

, Starbuzz, . ,
-.

<section id="blog">

</p>
<p>
? ;
,
</p>
<p>
.
, ,
Starbuzz.
</p>
</article>
<article>
<h1>Starbuzz </h1>
<p>

-

<article>.

...
</p>
</article>
<article>
<h1> </h1>
<p>
...
</p>
</article>
</section>

574

-
blog.html,
wickedlysmart.com.

12

<article> <h1> <p>


. !
,
<div>, ?

html5-

CSS -
, , , index.html blog.html
CSS- starbuzz.css. blog.html:
CSS-
<!DOCTYPE html>
, <html>
.
<head>
<meta charset="utf-8">
<title>Starbuzz Coffee - Blog</title>
<link rel="stylesheet" type="text/css" href="starbuzz.css">
</head>
...

CSS, <section> blog, . , ,


, <section> main ,
, <section>
blog <section> main
:


> <section
.

:
.

section#main, section#blog {
display:
table-cell;
background:
#efe5d0 url(images/background.gif) top left;
font-size:
105%;

<section> padding:
15px;
main <sec
tion
>
vertical-align: top;
blog
,
}
,

CSS
-.

! , <section>
blog, CSS, <article> .

575

-
- ( <section> <article>),


, , <section>, <article> <aside>,
,
, <div>,
!

.


<section> <article>?

, . ,
; ,
<article> <section>.
: <section> , <article>
, - .
Starbuzz
, . -
<article>, (
, -
).
, <section> ,
<article>.
,
, <div>.
576

12

html5-



,
? HTML5
, <span>
<p> .
,
, <time>.

<time>
<time>.
datetime, <time>
, ,
.

,
datetime


/.
-

datetime

/ ,

,
.
,

, 18 2012

<time datetime="2012-02-18">2/18/2012</time>

-

,
.
,

2012-02

2012
2012-02-18 09:00

,
24- .

2012-02-18 18:00
05:00

2012-02-18 05:00Z
( (UTC Universal Time
Coordinated) = (GMT Creenwich mean time).

Z
,
.

577

<time> blog.html
blog.html,
, :
<article>

<h1>Starbuzz </h1>
<time>.
<time datetime="2012-03-12">3/12/2012</time>
...
</article>
<time>

<article>
- (
<h1>Starbuzz </h1>
,
,
<time datetime="2012-03-10">3/10/2012</time>
).
...

10
</article>

.
<article>
2012 ,
<h1> </h1>
<time datetime="2012-02-18">2/18/2012</time>
datetime ...
<time>
</article>
- / .


,
,
-
.

-
.

578

12

html5-

,

.
,
,
.
<article>?

, . -, , - ,
-
- . ,
-
, , , ,
.
,
<header>
; ,

. ,
<header> <article>, <section>
<aside>.
, ,
<header> <article>
Starbuzz.

, <footer>
<section>, <article> <aside>.

Starbuzz, .

579

header

<header>
<header> .
<article> <header>,
.
<article> <section> blog <header>.
...
<header>,
<section id="blog">
<h1> <time>.
<article>
<header>
<h1>Starbuzz </h1>
<time datetime="2012-03-12">3/12/2012</time>
</header>
<p>...</p>
</article>
<article>
<header>
<h1>Starbuzz </h1>
<time datetime="2012-03-10">3/10/2012</time>
</header>
<p>...</p>
, <hea
der>
</article>
<article>
<section>
blog.
<article>
<header>
<h1> </h1>
<time datetime="2012-02-18">2/18/2012</time>
</header>
<p>...</p>
</article>
</section>
...

. ,
<author> . , ?

580

12

html5-


<header> <section>
blog
Starbuzz .

,
,

?


, <header>,
; ,

, ,
? , ?
.
CSS
:


r>,
de
ea
<h

,


.

581

header


?
, , <header>.
?
starbuzz.css
<header>:
header {
background-color: #675c47;
margin:
10px 10px 0px 10px;
height:
108px;
}

height <header>
,
,
. margin .

, <header>
.
<header> <section> <article> ,
Starbuzz <header>, , ,
,
. <header>
blog.html top:



,

- .

top
<header> .

<body>
<header class="top">
<img id="headerLogo"
src="images/headerLogo.gif" alt=" Starbuzz
">
<img id="headerSlogan"
src="images/headerSlogan.gif" alt=" Starbuzz
">
</header>
...

top <header>
index.html.

582

12

html5-

top index.html blog.html,


CSS
<header>:
.top

.
CSS

r>
ade
header.top {
<he

background-color: #675c47;
margin:
10px 10px 0px 10px;
height:
108px;
}
:
header.top img#headerSlogan {

float:
right;
,
}
CSS, headerSlogan
. .



blog.html, index.html
starbuzz.css, -.
, <header>
<header> ,
. , .

583

: , ,
, !
, ?

: ,
. ,

-

-.
,
-. , ,
.

: <section>
<article>? .

: ,
, ,
. <section>
, <article>,

, <div>. ,
, , <div>.

, ,
<section>.
,
, <article>,

:
<section> <article> <header>?

: <section> <article>
<header> , , (, <h1>). C
: <article>
-
, , , .
, -

<section> ,
-
.

: <header>
, , ? ,

?

: <header>
,

. <header>
,
,
.
<header> (
, ).

<div>
<div> -
Head First: , <div>, ,
. ?

<div>: , - ,
.

<div>: , , ,
!
<section>, <nav>, <aside>

Head First: !

, . , , , ,
.

Head First: , -
Starbuzz,
tableContainer tableRow.

<div>: !

<div>: ,
,
, .

Head First: ,

, ?

Head First: , HTML-, - . -


,
, ,
,
.

<div>: , . ,
-
; , ,
.

584

12

Head First: , ; - ? <div>?

html5-


, ,
,
,
.
?
?
?

! ,
.
,

, <a>. ,
.
:

<a
<a
<a
<a
<a

href="index.html"></a>
href="blog.html"></a>
href=""></a>
href=""></a>
href=""></a>

,
, !
ul, .
, ,
:

. ,
, .
<ul>
<li><a href="index.html"></a></li>
<li class="selected"><a href="blog.html"></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
,
</ul>
, .


585


HTML.
blog.html:
<body>
<header class="top">
<img id="headerLogo"
src="images/headerLogo.gif" alt=" Starbuzz
">
<img id="headerSlogan"
src="images/headerSlogan.gif" alt="
...">
</header>
<ul>
<li><a href="index.html"></a></li>
<li class="selected"><a href="blog.html"></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>

,
...
CSS

</body>


zz.css.
bu
star

CSS

HTML, , - .
, , CSS:
ul {
background-color: #efe5d0;
margin: 10px 10px 0px 10px;
list-style-type: none;
padding: 5px 0px 5px 0px;
}
ul li {
display: inline;
padding: 5px 10px 5px 10px;
}
ul li a:link, ul li a:visited {
color: #954b4b;
border-bottom: none;
font-weight: bold;
}
ul li.selected {
background-color: #c8b99c;
}

586

12

, .
, 0,
border-spacing
10px.

,
.
display
block inline,
;
.

, -, ,
<a> ( CSS) , ,
, , ( ).

, <li>
selected, , , , , .

html5-

GPS?

.
CSS
CSS-,
.
, .
,
-, .
?
, HTML, HTML5-
. , ,
,
, <nav> HTML. (, , , -)
,

<nav>
, <nav>, :

<nav>, :
,
<nav>.
<nav>
<ul>
<li><a href="index.html"></a></li>
<li class="selected"><a href="blog.html"></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</nav>

587




,

CSS.

.
, CSS , . ,
Starbuzz ,
? : ,
, ,
, .
;

, ,
,
<nav>.

, , CSS,
, -
.

588

12

html5-

CSS
, , <nav> HTML,
. , HTML (
<ul> - ) -
. ,
<nav>, .
<nav>

nav {
background-color: #efe5d0;
, <nav>
.
margin: 10px 10px 0px 10px;
}
,
<ul> nav ul {
margin 0px
,
margin: 0px;
<nav>
( margin <ul>
list-style-type: none;

,
padding: 5px 0px 5px 0px;
,

}
0).
nav ul li {
, display: inline;
nav, padding: 5px 10px 5px 10px;
<ul> <nav>.
}
,
nav ul li a:link, nav ul li a:visited {
Starbuzz
color: #954b4b;

<ul> ,
border-bottom: none; nav !
font-weight: bold;

}

nav ul li.selected {
!
background-color: #c8b99c;
}

-! -
!
CSS
. , ?
, <ul>, , CSS . ,
.


589

, ,
HTML5-,
:
Tweet Sip.
: ,
Twitter. ,
, !
?

- Starbuzz


Starbuzz
,

, Tweet
Sip ,
, ,


, .

590

12

html5-


Starbuzz.
,
,

Flash-?

: ,
Flash, , HTML5
<video>,
.

: -, Flash

:
,

,
, Flash? ,
Starbuzz; ,
Flash.

:
. ?

: <video> <img>;

scr ,
, <video>.

: . .
: .
, ,
.
: ?
: , , .
: ?
: ,
. . <video>
, .
: ; , !

591

video

-
-, , HTML,
<article>. HTML <section>,
<article>:
<section> <article>
blog
<header>
<h1>Starbuzz Tweet Sip</h1>
<time datetime="2012-05-03">5/3/2012</time>
</header>
<p>
, , Starbuzz
Tweet Sip Starbuzz,
, !
.
</p>
</article>

,
-.

<video>
<video> <img>. ,
video, tweetsip.mp4. , video
, blog.html. ,
</p> </article>:

eo> <vid


, ,

scr URL- .

<video controls autoplay width="512" height="288" src="video/tweetsip.mp4">


</video>
,


592

12

html5-

, ,
! , , , , ,
.

,
,
,

.

,
ay.
autopl
,


,

.

,

,

, ,

.
.


controls
<video>.

, ? ( );
<video>.


593

.
,

, .
?

, , , .

, <video> API- Video
HTML5,
. ,
Safari, H.264,
Chrome WebM, . .




, ,
H.264, Safari, Mobile Safari, Internet
Explorer 9 .
, video,

: .mp4, .ogv
.webm ( , , ).


Safari .mp4 (
.

H.264).
,
Google Chrome

.webm,

src :
,
.
src="video/tweetsip.webm"

Firefox Opera,

src :

src="video/tweetsip.ogv"

Internet Explorer 8

, ... -,

12!


Internet Explorer 8 ?
!
,
.

,
.

594

12

Internet Explorer 8,
, .

html5-

,
ay
opl
aut

ls
tro
con


, , -

,
, ,

.

<video> :

ls
,
contro


.
ls

,
, contro

.

.

y

autopla


<video controls
.

video?

autoplay
width="512" height="288"
src="video/tweetsip.mp4"
poster="images/poster.png"
id="video">
</video>
,
,
.

.
.

, ,
,
.


Webville: autoplay
autoplay
, YouTube Vimeo (
WebvilleTV, ), ,
<video>.
,
, .

595

video

<video>

<video>:

controls

controls

.

, .

Safari.

src ,
sr

aut opl ay


,

.


, , ,

poster
. autoplay,
,
.
, ;

.
,
,
, ,
poster.

loop
loop,
,

12

preload

autoplay

596

src src

src src
<img>
URL-,
<video>,
-.

video/tweets
ip.mp4 (
,
,
video).

preload

. ,
, , , ,
autoplay, . ,
preload none (
,
),
metadata ( , ),
auto, .

width, height
width height
(
). poster
,

.
,
(, 4:3 16:9),

-
Letter Box Pillar Box .
,
(
).

- Pillar Box

- Letter Box

html5-


,
,
.
Flash

.

,
HTML- -.
, .
.
,
,
-, - ( ,
). ,
, ,

, HTML5,
,
, .
, , ,
,

.
, ,
Head
First HTML5 Programming
(
HTML5). ;
JavaScript !


597


, ,
<video> ,
, ,
.
? - .
:
,
(
WebM

) , .

VP8
,
.
, , H.264, VP8,

Vorbis
, Theora.
, ,
MP4

Ogg
- ( ),
,
, . ,
H.264

Theora
.
,
,
, ,
, , .
,

,
, .

,
AAC

,
,

,
-
; ,

()

,
Vorbis


(, WebM, MP4,
Ogg)
-
(, VP8, Vorbis).

HTML5
. ,
, .
598

12

html5-


, , .
, , , Apple iPad, ,
, .
, :

MP4 H.264
AAC
H.264 MPEG-LA.
H.264;
.
MP4/H.264 Safari
Internet Explorer 9 .

Chrome.

Ogg Theora
Vorbis
Theora
.
,
Theora, Ogg-,
.ogv.
Ogg/Theora
Firefox, Chrome Opera.

WebM VP8
Vorbis
WebM Google

,
VP8.
WebM/VP8
Firefox, Chrome Opera.

WebM .webm.

H.264
,

Theora.
.

VP8 ,
Google,

599

H.264
WebM
Ogg
Theora

600

12

Explorer
Internet
8
Explorer
Internet

Opera

ebKit
Mobile W

Firefox

Chrome

Safari

).
roid (
d
n
A

S
iO

Explorer
Internet

9

VID



I/HTML5_

/
DIA.

O).

N.WIKIPE
E

E
D

/
I

/
V

:
=

P
H

T
C

T
R

SEA
: H
.
,
SE.COM/#

HTTP:
.

!

html5-


, , , ?

. , <source>
( src) <video>,
, ,
, . :

<source>,

src,


.
<video controls autoplay width="512" height="288"

,
src <video>

src="video/tweetsip.mp4">
<source src="video/tweetsip.mp4">
<source src="video/tweetsip.webm">
<source src="video/tweetsip.ogv">
<p>, <video></p>
</video>

,
,

.
,

<video>.

<source>

,
.
. )

,
, .
: MP4, WebM, Ogg Flash Video.

, .
- : H.264, VP8, Theora, AAC Vorbis.

, .

,
,
.

601

2: , ,

, ,
,
.
. ,
.


!

-, ,
; - , ,
. ,
MIME () :
, src,
,

( , ).

codecs ,


.

<source src="video/tweetsip.ogv" type='video/ogg; codecs="theora, vorbis"'>


type
, , ,

.

MIME
.
.

codecs.
,
type

<source>
, .
602

12

html5-


<source>, , :
<video controls autoplay width="512" height="288" >
<source src="video/tweetsip.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<source src="video/tweetsip.webm" type='video/webm; codecs="vp8, vorbis"'>
<source src="video/tweetsip.ogv" type='video/ogg; codecs="theora, vorbis"'>
<p>, <video></p>
</video>
codecs MP4
codecs,
MIME.
,
.

,

, H.264



(,
,
).
.
,

, , , , ,
, . type <source>
http://wiki.whatwg.org/wiki/Video_type_parameters.

: ,
?

?

: ,

,
,

.
HTML5

HTML5. HTML5 ,
, ,
.
, ,


.
.

:
? ,
API-
.

: , - :
?

: iMovie Adobe Premiere


Elements,

.
, Final Cut Pro Adobe
Premiere,
.

Content Delivery Network
(CDN), , CDN-
.

,
,
.

(, ),
<video>. ,
,
,
(
, ).


603

ash-

, Flash
Video - ,

,

HTML5-.

.

, ,
( HTML5 Flash
- ), .
,
Flash- ,
HTML5- ,
, HTML5-. ,
,
(
, , ),
.
Flash-, HTML5-,

Flash-.
<video poster="video.jpg" controls>
<source src="video.mp4">
<source src="video.webm">
<source src="video.ogv">
<object>...</object>
</video>

Flash-
<object>. <video>,
<source>. <video>, <object>, ,
Flash-.

604

12

html5-

, !
-,
. ,
Tweet Sip ,
, , , ,
. ,

, , ,
!
, !

,
,



?
:

.
HTML5,

-

JavaScript.


(




1400
), ,

,
Head
Fi rs t H TM L5 P
ro gr am m in
ng
g

- HTML5)
(

,,
,


Head
First),




.

605



,

.

? ,
90%? .

rk>
<aud

io>

>

<header>

<meter


? .

>





? ,




0 212,

90

? !

<time>

).

, 2
, 21

<

me

>
<article

ti

>

<footer>

<aside>

<ma

<section

<progress>



-, .

<vid

<nav>

12



, .

,
.
pt

ri
Sc
va
Ja

<can

vas>

r
gu
<

e>

,
,
HTML5-,
. , HTML !
.

606

eo>

html5-

HTML5
HTML.

<section>, <article>, <aside>,


<nav>, <header> <footer>
, ,
<div>.

<section> .

<article> -, .

<aside> ,

, .

<div> -
, .

,

HTML5-,
.

HTML5-,
,

-,
,
,
.

<video> HTML-
-.

<nav> .

<header> , ,
, .

,
. : H.264, VP8 Theora.

- ,
.
: MP4, Ogg WebM.

-, ,

.

<footer> , , ,

.
<time> HTML5. .

607

, , HTML5-,
, ?
( ,
, );
, :

<article>

<nav>


.
,
.
.

<header>


.
<footer>

<time>

,
,
.

.

<aside>

<section>

<video>

608

12


,
, .

-,
.

html5-

H.264

Explorer
Internet
8
Explorer
Internet

Opera

ebKit
Mobile W

Firefox

Chrome

Safari

).
id (
ro
d
n
A

iOS

Explorer
Internet

9

EO


TML5_VID


G/WIKI/H

/
O

E

.

WIKIP
)

.
O

N
E

E
D

/
I

/
V

:
=

P
H

EARC
: HTT
.
,
E.COM/#S

HTTP:/
.

!

iOS
oid
dr
n
A

WebM
Ogg
Theora

609

13

...
. , ,
( ,
), , HTML. ?
:
, HTML-.
- :
HTML-.
, HTML-. , !
611

612

13

, ,

.
,
,
.
?

-,

15

75

1204

29 686

4/5

-,

25

74

5312

50

3/5

10

91

4226

41 173

4/5

23

102

4780

265

3/5

-,

93

4242

7289

5/5

18

104

860

480

3/5

HTML
, HTML
. , , ,
CSS <div> ( CSS), () . ,
HTML. , HTML <table>,
. ,
, .

75

1204

29 686

4/5

25

74

5312

50

3/5

10

91

4226

41 173

4/5

23

102

4780

265

3/5

--,
-

93

4242

7289

5/5

18

104

860

480

3/5

-,

15

-,

,

.


.
.

HTML-, ,
, , ,
?

613

html-

, HTML
, ,
HTML-.
table.html chapter13/journal/. :
<!DOCTYPE html>
CSS-, <html>

<head>
. .
<meta charset="utf-8">
<style type="text/css">
table,
td, th {border: 1px solid black;}
,
</style>
.
<title> </title>
</head>

<body>
,
<table>
tr.
<tr>

th
<th></th>
.

<th></th>
<th></th>
, <th></th>

<th></th>
. ,
<th> </th>

</tr>
,
tr
<tr>

<td>-, </td>
.

<td>15 </td>

.
<td>75</td>
, <td>1204 </td>
.
<td>29 686</td>
,
<td>4/5</td>

-.
</tr>
<tr>
td

<td>-, </td>
,
<td>25 </td>
.
<td>74</td>
<td>5312 </td>
<td>50</td>
td
<td>3/5</td>
.
</tr>
</table>
</body>
.
</html>
td
.

614

13


, HTML-.
: , . ,
, .

HTML-.

,

.
td
.

,
,

.

th
. ,


.

HTML- ,
( HTML- table.html,
). ,
<table>, <tr>, <th> <td>. , ,
. .

615


, : <table>, <tr>, <th> <td>.
, ,
.
table ,

. ,
.

th
.
.
/tr
.

<th></th>
<table>
<tr>

</tr>

<tr>

-,

15

75

1204

29 686

4/5

</tr>

<tr>

-,

25

74

5312

50

3/5

</tr>

<tr>

10

91

4226

41 173

4/5

</tr>

<tr>

23

102

4780

265

3/5

</tr>

<tr>

--,
-

93 4242

7289

5/5

</tr>

<tr>

18

104 860

480

3/5

</tr>

tr

.

<td>9 </td>

tr.

616

13

</table>
td
.
.

/table

:
?

: HTML ,
. , , <td> ,

.

: ,

CSS,
,
HTML- ( Starbuzz 11).
,

: CSS HTML.

: -


HTML.

?
?

: :


: . - ,

.

CSS, .

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

,

. :


, (
);

,
.
,

.
CSS!

,
CSS.

, ?

:
, <td></
td>. ,
,
, .

: ,
,
, ?

: .
,

.
<th>,
.

: : HTML,
CSS.
.
.
,

, .

CSS HTML?

: .

HTML, , ,
CSS
.


;
CSS.


617



HTML-
.


,

. ,

.

<table><tr><th></th>
<th></th></tr><tr>
<td>Enigma</td><td>Le Roi Est Mort,
Vive Le Roi!</td></tr> <tr><td>LTJ
Bukem</td>
<td>Progression Sessions 6</td>
</tr><tr>
<td>Timo Maas</td>
.
HTML-

<td>Pictures</td></tr></table>

! -

HTML-.

618

13


,
.
<table>
<caption>
,

</caption>
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th> </th>
</tr>
<tr>
<td>-, </td>
<td>15 </td>
<td>75</td>
<td>1204 </td>
<td>29 686</td>
<td>4/5</td>
</tr>
<tr>
<td>-, </td>
<td>25 </td>
<td>74</td>
<td>5312 </td>
<td>50</td>
<td>3/5</td>
</tr>
.


.
.

.
</table>


.

.

,
,

CSS. ,

.



HTML- CSS,

,
.

619

...
.
.



,
.

620

13



.
,


,
.

-
.
,
.

,

,
. ,
, , .
, , ,
.
, journal.html chapter13/journal,
20 . , , , .
<h2>20 , 2012</h2>
<p>
<img src="images/segway2.jpg" alt=" -"/>
</p>
<p>
, 1200
:
</p>
<ol>
.
<li>-, </li>
,
<li>-, </li>
<li>, </li>
.
<li> , </li>
<li>--, -</li>
<li>, </li>
</ol>
<table>
<caption>, </caption>
<tr>
<th></th>
<th></th>
<th></th>
.
<th></th>
<th></th>

<th> </th>
.
</tr>
.
.
.
</table>

621


, , journal.css.
@font-face {
font-family: "Emblema One";
src: url("http://wickedlysmart.com/hfhtmlcss/chapter8/journal/EmblemaOne-Regular.woff"),
url("http://wickedlysmart.com/hfhtmlcss/chapter8/journal/EmblemaOne-Regular.ttf");
}
body {
font-family:
Verdana, Geneva, Arial, sans-serif;
font-size:
small;
}
,
h1, h2 {
color:
#cc6600;
- .
border-bottom:
thin dotted #888888;
8.
}

h1 {
.
font-family:
"Emblema One", sans-serif;
font-size:
220%;
}
h2 {
font-size:
130%;
font-weight:
normal;
}
blockquote {
font-style:
italic;
}
.

table {
.
margin-left: 20px;
margin-right: 20px;
.
border: thin solid black;
caption-side: bottom;
}
td, th {
border: thin dotted gray;
padding: 5px;
}
caption {
font-style: italic;
padding-top: 8px;
}

622

13

,
.
.
,
.

.

.


. , , .
journal.html .

, .

.


erif
sans-s
.

,
.



. ,
,

.

,
,
.

caption-side,


623

,

...
.
?


,
, ,
.

, , -
. :
.

.
border-spacing


CSS
Starbuzz.


border-spacing.

, border-spacing,
. ,
. ,
.

624

13



. ,
, .
, ,
? .

: , : , : ,

, ,
?

: . .

,
.

.


? ,
.

border-spacing .

: , .

Internet Explorer? ,
borderspacing. ,
?

border-spacing: 10px 30px;


10 , 30 .

625


.
CSS- border-collapse, ,
. , ( ), .
.
border-collapse,
. journal.css:
table {
margin-left: 20px;
margin-right: 20px;
border: thin solid black;
caption-side: bottom;
border-collapse: collapse;
}

border-collapse
collapse.

; .


.
, .
,
.

626

13


HTML CSS, ,
.
,
. , ,
.
? ?
: , , ,
, . text-align . ,
<td>.
. , , ,
, , .

627

?
, , . ,
. ,
background-color , ( ,
, HTML CSS,
!). :
th {
background-color: #cc6600;
}

journal.css
. .

,
?
. ,
.

,
, ,
. .
CSS? .
, cellcolor:
.cellcolor {
background-color: #fcba7a;
}

class
cellcolor ,
. , <tr> -,
class="cellcolor".

. cellcolor journal.css,
HTML- class="cellcolor"
<tr> , .
, .

628

13

CSS
, ?
nth-child. , (,
a:hover, Head First , ).
nth-child
-,
. , :
<p>, <section>. <p>
<section>.
<section>
<p>


<p>

<p>

<p>

, <p> ( <p> 2 4),


, <p>, . :
p:nth-child(even) {

<p> 2 4
background-color: red;
}

p:nth-child(odd) {
<p> 1 3 .
background-color: green;
}
nth-child , ,
, , .
, n,
. ,
<p> :
n=0, 2n=0
<p>
<section>
( <p>), 2n+1=1,
.
<p>
p:nth-child(2n) {
<p>.
background-color: red;
<p>
}
<p> n=1, 2n=2,
p:nth-child(2n+1) { .
<p>
<p>,
background-color: green;
2n+1=3,
<p>
}
<p>.


629

nth-child


nth-child?
CSS, nth-child
- .

:
.cellcolor

tr:___________________ {
background-color: #fcba7a;
}
,
.cellcolor
:
/* .cellcolor {
background-color: #fcba7a;
} */
,
.cellcolor,
.
tr
<th> ( -).
, (Internet
Explorer 9 !), . ,
?
.cellcolor , .

1, 3, 5 7
-.
<th>

,
<th> -.

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

630

13

-,

15

75

1204

29 686

4/5

-,

25

74

5312

50

3/5

10

91

4226

41 173

4/5

23

102

4780

265

3/5

7289

5/5

7289

4/5

480

3/5

-,
-

93

27

98

18

104

4242

4242

860


-,
27 --.
,
(
). , , ,
(, ).



-.

-,

15

75 1204

-,

25

74

10

23

-,
-

27

18

29 686

4/5

5312

50

3/5

91

4226

41173

4/5

102

4780

265

3/5

93 4242

7289

98
104 860

HTML? ,
,
, .
HTML-, ,
( ). , .

5/5
4/5

480

3/5

631

,
?
-- . ,
, , ,
, .

-,

15

75

1204

29 686

4/5

-,

25

74

5312

50

3/5

10

91

4226

41173

4/5

23

102

4780

265

3/5

--, 9
-
27

93

4242

7289

5/5

860

480

18

98
104

4/5
3/5

HTML? , .
rowspan, , ,
,
. .

<tr>
<td
<td
<td
<td
<td
<td
</tr>
<tr>
<td
<td

<td
</tr>

632


-.

,
,
rowspan="2">--, -</td>
(,
class="center">9 </td>
),
class="center">93</td>

rowspan="2" class="right">4242 </td>
rowspan. ,
rowspan="2" class="right">7289</td>


class="center">5/5</td>
,

.

class="center">27 </td>
rowspan.
class="center">98</td>


,
class="center">4/5</td>

(,
.
).

13

, ,

<td>.
,
. , .
<tr>
<td
<td
<td
<td
<td
<td
</tr>
<tr>

rowspan="2">--, -</td>
class="center">9 </td>
class="center">93</td>
rowspan="2" class="right">4242 </td>
rowspan="2" class="right">7289</td>
class="center">5/5</td>

<td class="center">27 </td>


<td class="center">98</td>

<td class="center">4/5</td>
</tr>

98

633


journal.html . .
,
: HTML-,
, ,
<td> .


,
!

, ,
?

, . colspan <td>
. rowspan
, colspan
( , ).

<td>
colspan, rowspan?

, .
<td> . ,
<td>, .

634

13

, ,
, ?

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

?
,
!
!

?
,
27 . , , ,
? ,
. ?
, . ...
?

-,

15

75 1204

-,

25

74

10

23

-,
-

9
27

18

29 686

4/5

5312

50

3/5

91

4226

41173

4/5

102

4780

265

3/5

93 4242

7289

5/5

98
104 860

480

5/5

4/5

3/5

?

.

635

... ,

.

. HTML .
<td> <table>.
? ,
( ), , , ,
,
: 4/5. ...

<tr>
<td rowspan="2">--, -</td>
<td class="center">9 </td>
<td class="center">93</td>
<td rowspan="2" class="right">4242 </td>
<td rowspan="2" class="right">7289</td>
<td class="center">5/5</td>
</tr>
<tr>
<td class="center">27 </td>
<td class="center">98</td>
<td>
4/5

<table>
<tr>
...
<th></th>
<td>5/5</td>
</tr>
<tr>
... .
<th></th>

<td>4/5</td>
:
</tr>
, .
</table>
,
</td>
</tr>
.

636

13


, ! .
,
, .
.

,
.

:


.


,
.


637



, .
(
) .
? ,
.



, .

{
background-color: white;

638

13

,
.

CSS

<th> , .
CSS-, table table
th,
:
table table th {
background-color: white;
}

journal.css .

:

, nestedtable
. :
.nestedtable {
background-color: white;
}

: -

CSS, , ,

. , ,
, - HTML.

?

<th>.

.

th

.


,
.

,

,
.

?

639


, , , ,
. 2 :

.
.
.
<h2>2 , 2012</h2>


HTML-,
2 .

<p>
<img src="images/segway1.jpg"
alt="The rst day of the trip" />
</p>
<p>
!
,

.
,
:
</p>
<ul>
<li> </li>
<li>iPod</li>
<li> </li>
<li> </li>
</ul>
<p>
.
: <q>

</q>
</p>
</body>
</html>

640

13


journal.html.

?


, , CSS (, , ),
, . ( 12), , , , ,
.
list-style-type . .
li.
ul,
li.
disc ,

li {
list-style-type: disc;
}

li {
list-style-type: circle;
}

circle liststyle-type
.

li {
list-style-type: square;
}

square
.

li {
list-style-type: none;
}

none
.

641

?
,
? , CSS list-styleimage,
. .

list-style-image,
URL.

li {
list-style-image: url(images/backpack.gif);
padding-top: 5px;
margin-left: 20px;
}

,
,

...
.

CSS-, .

.
,

642

13

backpack.gif . ,
, ?

: - : : ,
? ,
?

:
. , , . CSS


,
(, a, b, c). list-style-type.

CSS (
, ).


? ,
,
,
?

:
list-style-position.
inside,

. outside,

.

? , .

: ,
:
inside line-style-position,

, .
outside,


.

.

, ,

?
,
.
-... ,
-.
!

643

HTML- .

HTML:
<table>, <tr>, <th> <td>,
.

<table>
.


<tr>.

, <td>.

<th> , .


<tr>...</tr> HTML-,
<td>...</td>
.

644

, summary
<table> <caption>.
(
,
).

,
, ,
CSS.

border-collapse
CSS- ,
.

.

13


, CSS-
text-align vertical-align.


background-color.
,
.

CSS
nth-child,
.

- ,
<td> .
<td>...</td>
, .

, , rowspan colspan <td>.

, <table>

.

, -.

CSS,
11.

CSS,
. , list-style-type list-style-image.

list-style-type .

list-style-image .


HTML- .

,

<table>, <tr>, <th>
<td>. ,

,

.
.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
td, th {border: 1px solid black;}
</style>
<title> </title>
</head>
<body>
<table>
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th> </th>
</tr>
<tr>
<td>-, </td>
<td>15 </td>
<td>75</td>
<td>1204 </td>
<td>29 686</td>
<td>4/5</td>
</tr>
<tr>
<td>-, </td>
<td>25 </td>
<td>74</td>
<td>5312 </td>
<td>50</td>
<td>3/5</td>
</tr>
<tr>
<td>, </td>
<td>10 </td>
<td>91</td>
<td>4226 </td>
<td>41 173</td>
<td>4/5</td>
</tr>
<tr>
<td> , </td>
<td>23 </td>
<td>102</td>
<td>4780 </td>
<td>265</td>
<td>3/5</td>
</tr>
<tr>
<td>--, -</td>
<td>9 </td>
<td>93</td>

.

.


645

646

13

<td>4242 </td>
<td>7289</td>
<td>5/5</td>
</tr>
<tr>
<td>, </td>
<td>18 </td>
<td>104</td>
<td>860 </td>
<td>480</td>
<td>3/5</td>
</tr>
</table>
</body>
</html>

<table>
<tr>
<th></th>
<th></th>
</tr>
<tr>
<td>Enigma</td>
<td>Le Roi Est Mort, Vive Le Roi!</td>
</tr>
<tr>
<td>LTJ Bukem</td>
<td>Progression Sessions 6</td>
</tr>
<tr>
<td>Timo Maas</td>
<td>Pictures</td>
</tr>
</table>


HTML-
.


,
. .

HTML,
.

647


. ,
,
.
, ,
?
0 border-spacing,
.

border-spacing,


,
0.

.

table {
margin-left: 20px;
margin-right: 20px;
border: thin solid black;
caption-side: bottom;
border-spacing: 0px;
}

, ,

.
.

,
?

648

13

, ,

.

?
?

.center {
text-align: center;
}
.right {
text-align: right;
}

,

.

<table >
<caption>, </caption>
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th> </th>
</tr>
<tr>
<td>-, </td>
<td class="center">15 </td>
<td class="center">75</td>
<td class="right">1204 </td>
<td class="right">29 686</td>
<td class="center">4/5</td>

</tr>

<tr>
td
<td>-, </td>
!

<td class="center">25 </td>
<td class="center">74</td>
<td class="right">5312 </td>
<td class="right">50</td>
<td class="center">3/5</td>
</tr>
.
.
.
</table>

,
-, , ,
class="cellcolor"
<tr> :
<tr class="cellcolor">
<td>-, </td>
...
</tr>

649

, ,
<td>
. .

<tr>
<td
<td
<td
<td
<td
<td
</tr>
<tr>

rowspan="2">--, -</td>
class="center">9 </td>
class="center">93</td>
rowspan="2" class="right">4242 </td>
rowspan="2" class="right">7289</td>
class="center">5/5</td>

<td class="center">27 </td>


<td class="center">98</td>

<td class="center">4/5</td>
</tr>

-,
-

9
27

93 4242
98

7289

5/5
4/5


, -,
, , nth-child(odd)
<tr> :

tr:nth-child(odd) {
background-color:
#fcba7a;
}
650

13


.
, .
(
) .
? ,
.

.
:

(1)

.

(2)
.
(3)
.
(1)

(2)

(3)

table table th {

background-color: white;
}

651

14

HTML-


,
.
,

.

- : - . , ?
HTML.
( -),
, ,
-.
HTML-,
-. ,
.

653


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

,
HTML-



-.

rstname=buck
lastname=bonz
item=java
number=2


HTML-,
,
-.

<html>
<head>
<title>
Your Order has
Processed
</title>
<head>
<body>
<p>Thanks for your
it will be shipping
soon!
</p>
</body>
</head>

654

14


HTML-.

,
,

html-



HTML- . , ,
. , .


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


.
-.


.
.



, Submit ().
,
.


,

.
HTML-, .
HTML-, .

655

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

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<title> </title>
</head>

<body>
<form action="http://wickedlysmart.com/hfhtmlcss/contest.php"

form...

method="POST">
A

<p> ( ),
: <br/>

: <input type="text" name="rstname" value=""/> <br/>

: <input type="text" name="lastname" value=""/> <br/>

<input type="submit"/>
</p>

...
.

</form>
</body>
</html>

656

14

html-


! <form>. , <form>, , .
: , ,
. . ,
HTML- ,
, <form>.

.



. HTML

input.

A
B
C
D

Submit
() (
Submit
Query ( )).

chapter14/contest. ,
,
.

657

form

method ,

<form> , .
, , , ,
,
( ).
: POST.


...

action

,
. ,
URL



,

-...

-
,

POST.

.
.

<form>

<form action="http://wickedlysmart.com/hfhtmlcss/contest.php" method="POST">


, ,
.

</form>

, wickedlysmart.com,

,
.
POST.

contest.php. hfhtmlcss.

.
!

contest.php
hfhtmlcss

658

14

wickedlysmart.com

html-

,
HTML-,
.

?
?

. ,
, .
, ,
, ( ).
, ...
,
, .
,
. , PHP, Ruby on Rails, Perl,
Python, Node.js, Java ( ).
,
( ,
). , ,
.

.
,
, .
URL-
action <form>.

659


, ,
. ,
. .
<input>, .

<input> text
<input> text .

.


HTML-,

type.

type,


,


text.

input text
type

.


, .
,
.

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



input

,
.

<input> submit
<input> submit
, .
,
.

<input type="submit"/>

660

14



)
Submit (
y
er
Submit Qu
),
(

,
).

Submit ()
submit
type input.

html-

<input> radio
<input> radio , . :
, .

radio

,
...
input radio

...


:

input,

type.

<input type="radio" name="hotornot" value=""/>


<input type="radio" name="hotornot" value=""/>

<input> heckbox
<input> checkbox , , .
,
.
,

input
checkbox
type
.




.

.

<input type="checkbox" name="spice" value="" />


<input type="checkbox" name="spice" value="" />
<input type="checkbox" name="spice" value="" />

661

( II)
, <input>.
, <select> <textarea> .
, ?
90 % ( 99 % ,
).

textarea
<textarea>
.
, ,
.

rows

cols

textarea
,


.

name,

cols

(
,

).

<textarea name="comments" rows="10" cols="48"></textarea>


rows

,



(

,


).


textarea CSS.

662

14

,

,
.

html-

select
<select> -
. . <select>
select
<option>, ,
.
(
).
selec
t



,

select

name.

,

<select name="characters">
<option value=""> </option>
<option value=""> </option>
<option value=""> </option>
<option value="">-</option>
<option value=""> </option>
</select>

option
,
<option> <select>.
<option> .


,

.

<select name="characters">
<option value=""> </option>
<option value=""> </option>
<option value=""> </option>
<option value="">-</option>
<option value=""> </option>
</select>


option
.


value.

663

, -!
, ,
. HTML5
.
:

-, HTML5


<input>!
!

<input> number
<input> number ,

.
,
,
.
,
number



.
,



,

.

<input type="number" min="0" max="20">

max
min,
, .

<input> range
<input> range <input> number, - <input> range number
, step, .
, .

<input type="range" min="0" max="20" step="5">

<input> color
<input> color
.

,

,
.

664

14



<input>
color,

.

<input type="color">

html-

<input> date
<input> date ,
, .
.

<input type="date">

<input> color,
<input> date,
.

<input> email
<input> email
,
,
, .

<input type="email">

<input> url
<input> email tel, <input> url
,
.

<input> tel
<input> tel
, ,
<input> email,

.

<input type="tel">

t>
<inpu
<input>.

text

.
,


/, @ .

<input type="url">


,

,
<inpu
t>.



<input>.

<input>,


,
HTML5, ,


-,

,
.


665

bean machine
Starbuzz .
:


Bean Machine.
?

Star

Star

zz
bu

z
buz



(
).


(

).


:
:
:
:


,
.

:
:
:

666

14

html-


.

.
.

<input type="number" ...>


<in
put type="number" ...>

..>/>
"" ...
tt"
exxt
"tte
./>
e=="
yppe
tt tty
puut
...>
iinnp
"
<<i
xt
te
="
pe
ty
nput type="text" ...>
<i
<input
<input type="color" ...>

x" ".../>
<input
>
...>
kbox"
h kb
"
"checkbox"
type="chec
t
ttype="checkbo
i
<input
<input type="checkbox" ...>

<input type="tel" ...>

..>
<input type="date" ...>

:
:
:

>
" ...>
io"
"radi
pe="
nput tytype="r
<i<input
adio" ...>
<input type="radi
type
type= radio
o" ...>
>

<textarea> .....<tex
tarea>
<textarea> .<textar
ea/>

:
:

lect> ...<select>
<se<select>
...<select>
<select
<sel
t> ...<select/>

<option> ...<option>
<opt
ion>> ...<
optiion/>
on>
...<opt
/>
<option
p ion> ...<option
<opt
<input type="range" ...>
<input type="range" ...>
<input t
ype="sub
mit" .
.../
..> >
<input type="submit

:
:
:
:
:

667

Bean Machine
, chapter14/starbuzz
form.html. . ,
, HTML.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Starbuzz Bean Machine</title>
</head>
<body>
<h1>Starbuzz Bean Machine</h1>
<h2> ,
</h2>

</body>
</html>



.

,

arbuzz.
St

HTML

.

.

<form>
<form>. ,
, URL , .
. :
http://starbuzzcoffee.com/processorder.php
URL-

starbuzzcoffee...

668

14

hp
... processorder.p

.

,
.
,

html-

<form>
URL , ,
action <form> (
HTML- ):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Starbuzz Bean Machine</title>
</head>
<body>
<h1>Starbuzz Bean Machine</h1>
<h2> ,
</h2>
<form action="http://starbuzzcoffee.com/processorder.php" method="POST">
form.

</form>
</body>
</html>

action
URL .


form.

,


ST.
PO

, <form> . . ,
: , . ,
, . ,
, .
Starbuzz :


input .
type
.

<input
<input
<input
<input
<input


text,

.



type="text" name="name">

type="text" name="address">

type="text" name="city">
:
, , ,
type="text" name="state">
,
type="text" name="zip">
.

<input type="tel" name="phone">


tel,

.

name ,
. ,
. ,
...


669

name
name :
-,
. , .

input
name.
HTML-,
. ,
, text tel:
<input type="text" name="name">
<input type="text" name="address">

name

name (

).
input
.

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


<input type="text" name="state">
<input type="text" name="zip">
<input type="tel" name="phone">

, .

, ,
.
, , , , , .

, name. .

.

name =
address =
city = -
state =

,
,

.

670

14

zip = 90050
phone = 310-555-1212

processorder.php

www.starbuzzcoffee.com

,

.

,

.

html-

: <input> : <input> tel, email url O: .


text <textarea>?

O: <input>
text ,
,
, <textarea> .

:
?


, , , <input>
text.
, <input> , , tel,
, .
,
.

<option> , <select>.
,
<select>. ,
<option> name,
<select>
. ,
, .

O: , - : , : , value .
value
<input> text, , .

:
,
<input> text
<textarea>?

O: , <input>
<textarea>. -
, .
,
<input>,
maxlength
,
. , maxlength=100 100 .
<textarea> HTML
,
.

: <input> ,
tel, email url, ,
<input> text.
?

O: .
,
. ,
90050 <input> text zip,
zip = 90050,
.

: ,
?
?

? <input>
radio .

O: .
.
:
, . , , ,
. ,
color ()
, .
, ,
.

O: . : , : ,

, , , .
, - , -
, ,

. ,
.

: <option> name?
.

O: . ,

.
,
checkbox. ,
spice ()
, ,
. spice = &&.

671

input

<input> HTML
<input> . ,
, form.html.


p.



form.html.

<form action="http://starbuzzcoffee.com/processorder.php" method="POST">


<p>Ship to: <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>
: <input type="text" name="zip"> <br>
: <input type="tel" name="phone"> <br>
</p>
<p>
<input type="submit" value=" ">

input:

text

</p>
</form>

,

, .

, input , ,
input ,
br.
p.

, ,
. ,
input submit .
, , .

,
form.html !

672

14

L HTM
.
!

html-


, . , ,
action.
starbuzzcoffee.com.

,
,
? starbuzzcoffee.
com
.
!
,
URL
, (
action <form>).


. ,

,

.

<input>
, ,
, , . ,
<select>. , , .
, .
, . ,
<select>.

673

select

<select>
<form action="http://starbuzzcoffee.com/processorder.php" method="post">

select.
<p>
.
:
<select name="beans">
<option value=""> </option>
<option value=""></option>
<option value=""></option>
<option value=""></option>
</select>
option
</p>
.
<p>
: <br>
: <input type="text" name="name" value=""><br>
: <input type="text" name="address" value=""><br>
: <input type="text" name="city" value=""><br>
: <input type="text" name="state" value=""><br>
: <input type="text" name="zip" value=""><br>
: <input type="tel" name="phone" value=""><br>
</p>
<p>
<input type="submit" value=" ">
</p>
</form>

HTML
<option>.
<option>

.

<option value=""></option>

,
select option.

674

14


beans = .

html-

<select>
, <select>. , ,
. , .

,
select.
,
.



,
,
.


select.

,
,
.

arbuzz Bean
, St
,
Machine



,

,
.

675

name <select> thembeans. . , ?

, ,
name beans.



, : . .
: . HTML
: <input> radio .
: ,
:
.
, . , :

<p>: <br>
<input type="radio" name="beantype" value=""> <br>
<input type="radio" name="beantype" value="">
</p>

input

radio.

676

14

,
,

.

.

(,
).

html-



HTML-, , <select>. , , .

,

,
,
.

! Starbuzz ,

. ,

, .

, , ?
, . ,

,
. ,

,
.

677

80 %
. ,
, ,

?

checked checked input radio,


. checked <input>
radio .
.
(, ; checked
,
).

<input>
, , ,
, .
<input>, <input> text, , <input>,
number date .
,
, :
,

number
,
(

!).
10

: <input type="number" name="bags" min="1" max="10">


, , date,
, .

: <input type="date" name="date">


, - , , 10 - ,
1, , ( ) ( ).
<input>, number, ,
, ,
.
678

14

html-

<input>, number date


<input> form.html, <input>
name="beantype" :, .
<form action="http://starbuzzcoffee.com/processorder.php" method="post">
<p>
:
<select name="beans">
<option value=" "> </option>
<option value=""></option>
<option value=""></option>
<option value=""></option>
</select>
</p>
<p>
Type:<br>
<input type="radio" name="beantype" value=""> <br>
<input type="radio" name="beantype" value="">
</p>
<p>
: <input type="number" name="bags" min="1" max="10">
</p>
<p>
: <input type="date" name="date">
</p>
<p>
: <br>
: <input type="text" name="name" value=""><br>
: <input type="text" name="address" value=""><br>
: <input type="text" name="city" value=""><br>
: <input type="text" name="state" value=""><br>
: <input type="text" name="zip" value=""><br>
: <input type="tel" name="phone" value=""><br>
</p>
<p>
<input type="submit" value=" ">
</p>
</form>


. ,


-,
,
.

!

679

<input> number date


.
,
<input> number

Starbuzz Bean

/,


(Chrome)
<input> text.

Machine. , 5 !


Star

zz
bu

Star

z
buz

.


.
,

.

:
:


:
,
.

,

.




:
:
:
:
:
:


.
textarea

680

14

html-


, : HTML- form.html.
<form action="http://starbuzzcoffee.com/processorder.php" method="post">
<p>
:
<select name="beans">
<option value=" "> </option>
<option value=""></option>
<option value=""></option>
<option value=""></option>
</select>
</p>
<p>
:<br>
<input type="radio" name="beantype" value=""> <br>
<input type="radio" name="beantype" value="" checked="checked">
</p>
<p> : <input type="number" name="bags" min="1" max="10"></p>
<p> : <input type="date" name="date"></p>
<p>

.
, : extras[ ]...

... .
:<br>
<input type="checkbox" name="extras[]" value=" ">
<br>
<input type="checkbox" name="extras[]" value="" checked="checked">

</p>

<p>

checked, ,
.
checked .

: <br>
: <input type="text" name="name" value=""><br>
: <input type="text" name="address" value=""><br>
: <input type="text" name="city" value=""><br>
: <input type="text" name="state" value=""><br>
: <input type="text" name="zip" value=""><br>
: <input type="tel" name="phone" value=""><br>
</p>

,


.

<p> :<br>
<textarea name="comments"></textarea>
</p>
.
<input type="submit" value=" ">
</p>
</form>

<p>

681


, .
, ?


,



.

,

.


. ,
,
.

,

( ,
,
. .), , .

682

14

html-

.
, ,

extras[]?
?
.

, extras[ ]

.
,
, ? :
HTML
. ,
.
? ,
(PHP), processorder.php,
, . ,
,
[] .
,
HTML, .

, -
,
PHP.

683


HTML-, ,
.

,
. , ,
.

<form action="http://www.chooseyourmini.com/choice.php" method="POST">


<p> : <br>
: <input type="text" name="name"><br>
: <input type="text" name="zip"><br>
</p>
<p> ? <br>
<select name="model">
<option value=""> </option>
<option value="S"> S</option>
<option value=""> </option>
</select>
</p>
<p> ? <br>
<input type="radio" name="color" value=" "> <br>
<input type="radio" name="color" value="-">-
</p>
<p> ? <br>
<input type="checkbox" name="caroptions[]" value="">
<br>
<input type="checkbox" name="caroptions[]" value=" ">

</p>
<p>
<input type="submit" value=" ">
</p>
</form>

684

14

html-

"
name = "
__________________
zip = ___________________
model = _________________
color = _________________
caroptions[] = __________

685

: get post

,
,
?
POST, ,
.

,
: POST GET.
POST GET
.
. POST
.
GET ,
, ,
URL-.
POST

.

rstname=buck
lastname=bonz
item=java
number=2

POST

http://wickedlysmart.com/hfhtmlcss/contest.php

URL
.

GET
URL-, .

GET

,


URL-. ,
.

http://wickedlysmart.com/hfhtmlcss/contest.php?rstname=buckaroo&lastname=banzai
686

14

html-

GET
, GET,
. form.html :


POST GET.

<form action="http://starbuzzcoffee.com/processorder.php" method="GET">


;
. - :

URL
.

http://www.starbuzzcoffee.com/processorder.php?beans=Kenya&beantype=gro
und&extras%5B%5D=catalog&name=Buckaroo+Banzai&address=Banzai+Instit
ute&city=Los+Angeles&state=CA&zip=90050&comments=Great+coffee

,
, URL-.


POST GET?

GET
(), , ,
- ?

. ? -
.
GET, -,
. ,

URL-. , .
POST, ,
,
.

, , .
, .

,
. ,
-,
, GET,
,
POST. ? ,
, . ,



. , ,

, .
,
,
. ,

GET,
,
. URL
,

, -
GET . ,
<textarea>,
POST,

. GET POST
, POST
.


687

, get post

GET POST
GET,
POST, ,
. ,
, . .

688

GET

POST .

GET

POST -.

GET

POST .

GET

POST .

GET

POST
.

GET

POST .

14

html-

,

Bean Machine!
.
,

.


,

HTML CSS?

689


, , , ,
CSS
Bean Machine.
,
, .
, .
, (:
, 2 14 ), .
HTML-, .


, . !
- .

690

14

html-

,
, !

,


.


,

<p>,

.
,

.

14

<div>,
( 11).

,
!

,
,
,
.
<form>!

691

html

HTML-

, ,
, HTML.
, !
. . ,
, . : styledform.html,
chapter14/starbuzz. ,
.

form.

<form action="http://starbuzzcoffee.com/processorder.php" method="post">


<div class="tableRow">
<d
iv>
<p>
tableRow
:

</p>

.
<p>
<select name="beans">
<option value=" "> </option>
<option value=""></option>
<option value=""></option>
<option value=""></option>
</select>
</p>
</div>

<div class="tableRow">


<p>:</p>
<p>.
<p>
<input type="radio" name="beantype" value=""> <br>
<input type="radio" name="beantype" value="" checked>
</p>
</div>
<div class="tableRow">
<p> : </p>
<p> <input type="number" name="bags" min="1" max="10"> </p>
</div>
<div class="tableRow label">
<p> : </p>

<p> <input type="date" name="date"> </p>

</div>
<div class="tableRow">

<p> :</p>
.
<p>
<input type="checkbox" name="extras[]" value=" ">
<br>
<input type="checkbox" name="extras[]" value="" checked>

</p>
.
</div>
.

692

14

html-

,
:, heading <p>,

<div class="tableRow">
,
<p class="heading"> : </p>

<p></p>
,
</div>

<div class="tableRow">

<p>.
<p>:</p>
<p><input type="text" name="name" value=""> </p>
</div>
:

<div class="tableRow">
<div>
<p>:</p>
tableRow
<p> <input type="text" name="address" value=""> </p>
</div>
,
<div class="tableRow">
<p>.
<p>: </p>
<p> <input type="text" name="city" value=""> </p>
</div>
<div class="tableRow">
<p>:</p>
<p> <input type="text" name="state" value=""> </p>
</div>
<div class="tableRow">
<p> :</p>
<p> <input type="text" name="zip" value=""> </p>
</div>
<div class="tableRow">
<p> : </p>
<p> <input type="tel" name="phone" value=""> </p>
</div>
<div class="tableRow">
<p> : </p>
<p>
<textarea name="comments" rows="10" cols="48"></textarea>
</p>


</div>

-

<div class="tableRow">
,
<p> .
<p></p>

<p> <input type="submit" value=" "> </p>
</div>
</form>

693

CSS

, , . Starbuzz,
starbuzz.css
styledform.css, Bean Machine.
CSS-.
: .
CSS- styledform.css, chapter14/starbuzz.
CSS


Starbuzz-,
body.
Starbuzz

body {
background: #efe5d0 url(images/background.gif) top left;
margin: 20px;

}

form {
display: table;
padding: 10px;
border: thin dotted #7e7e7e;
background-color: #e1ceb8;
}
form textarea {
width: 500px;
height: 200px;
}
div.tableRow {
display: table-row;
}
div.tableRow p {
display: table-cell;
vertical-align: top;
padding: 3px;
}
div.tableRow p:first-child {
text-align: right;
}
p.heading {
font-weight: bold;
}

694

14

,
,
.
,
,

,

height.
width

tableRow
<div>
.



<p>, <div>
tableRow, .
<p>, .
,
.
ild
rst-ch

<p>,

<div> tableRow. ,

<p>
,
.

<p> heading , .
:.

html-


<link> <head>
styledform.html. Starbuzz 12 starbuzz.css
styledform.css. , link : starbuzz.css, styledform.css. ,
.
Starbuzz Bean Machine.
,
!




HTML CSS,


Starbuzz
,
Bean Machine




.



Starbuzz.




,


.

,

.

,
!

695

Bean
Machine

, CSS <label> . - . -

<label> - accessform.html
, accessform.css, CSS -
.

<label>,
id .

<input type="radio" name="hotornot" value="" id="hot">


<label for="hot"></label>
<input type="radio" name="hotornot" value="" id="not">
<label for="not"></label>

<label> for
.

.
, . <label> , Bean Machine. , <input> number
:
<label for="bags"> :</label>
<input type="number" id="bags" name="bags" min="1" max="10">

bags
<input>.

name id
.
, bags

<input> radio checkbox, ,


,
. , beantype Bean Machine,
, , :

beantype, , .

<input type="radio" id="whole_beantype" name="beantype" value="">


<label for="whole_beantype"> </label><br>
<input type="radio" id="ground_beantype" name="beantype" value="" checked>
<label for="ground_beantype"> </label>

696

14

,

for
;
.
id, ,

html-

?
, ,
, , , .
,
.

<eldset> <legend>
,
. ,
<div> CSS, HTML <eldset>,
. <legend>
:

eldset
input.

legend
.

<eldset>
<legend>Condiments</legend>
<input type="checkbox" name="spice" value="">
<br>
<input type="checkbox" name="spice" value="">
<br>
<input type="checkbox" name="spice" value="">

</eldset>


eldset legend . ,
-.

<input> password
<input> password
<input> text, ,
. ,
,
, . :
- ,
.
.
<input type="password" name="secret">

<input> password
,
<input> text,
, ,
, .

697

,
<input> le
input,
.
, <input>,
le. <input>
, .
,
. : . ,
POST.
<input type="le" name="doc">


<input>
le

.

<input> le,
.

multiple
, . multiple multiple
<select>,
,
. ,
( ,
).
, Ctrl (Windows)
Command (Mac) , .

<select name="characters" multiple="multiple">


<option value=""> </option>
<option value=""> </option>
<option value=""> </option>
<option value="">-</option>
<option value=""> </option>
</select>

698

14


multiple,



.

multiple,


.

html-

placeholder
placeholder
<input> ,
, , ,
. ,
,
,
placeholder.
, , , ,
, , placeholder,
, .



,
placeholder

!
placeholder
,

.

<input type="text" placeholder="Buckaroo Banzai">

required
required
; ,
. , , ,
, ,
.
, required , <video>,
. , , .
, , ,
. required
, ,
,
.

Chro
me.


required,


.

,
, ,


.
required ,
,
,
,
.

<input type="text" placeholder="Buckaroo Banzai" required>

styledform.html, placeholder <input>


text tel. ,
, .
, required ,
Starbuzz Bean Machine ( :). beans beantype
, required
? , checked beantype? required?
, placeholder required.

699

<form> ,
.

action URL- .

method : POST
GET.

POST
.

GET
URL-.

POST,
. , , ,
<textarea>
<input> le.

GET , ,
.

<input> -
type.

text .

submit Submit ().

radio .
, ,
.

checkbox .
, .

number ,
.

range , (
).

700

date , (
).

14

email, url tel ,


.

<textarea> .

<select> , <option>. <option> .

-
<textarea>,
-.

value <input> text


,

.

value Submit (), .

- ,


.

CSS,
. CSS
, , .

HTML
<eldset>.

<label> ,
,
.

placeholder,
,
.

required ,
,
.

.

html-

.
,
.

. .

<select> ...<select>
:
:

<input type="radio" ...>


o" ...>
<input type="radi

<option>


tion> ...<o
<op

<option> ...<option>

<option> ...<option>

n> ...<option>
<optio

:
:
<input type="number" ...>


..>
<input type="date" ...>
:
:

<input
type="checkbox" ...>


<input

kbox" ...>
type="chec


:
:
:

<input type="text" ...>


" ...>
<input type="text
i put type="text" ...>
<in

<input type="text" ...>


<in
p
put
typ
ype
e="text
t" ...>
:

<input type="tel" ...>

x" ...>
checkbox
type="checkbo
<input type=
<i
<input
input type=
radio"
radio
o" ...>
>
<textype="radi
tarea> ...<
<t
te
ex
xt
tt>
area>
...<selec
lect>
<se
<selec
t> ...<select>
<input t
ype="sub
mit" ...
/>
<input type="range"
...>

<textarea> ...<textarea>


<input type="submit" ...>

<input type="color" ...>

701

.
" "
name = __________________
zip = "90050"
___________________
model = _________________
" "
color = _________________
" "
caroptions[] = __________
""

GET POST
GET, POST,
,
. , , .
.

702

GET

POST

GET

POST

-.

GET

POST

GET

POST

GET

POST

GET

POST

14

html-

80 %
.
, ,
,


?

checked checked <input> radio,


.
checked <input> radio
. .



form.html.

<form action="http://starbuzzcoffee.com/processorder.php" method="POST">


...
<p>: <br>
<input type="radio" name="beantype" value=""> <br>
<input type="radio" name="beantype" value="" checked>
</p>
...
</form>
,

.

703

,
?

, , HTML ?
...

!

, .
.
...
.

-10 ,

,
.
, - . ,
, ,
, HTML
CSS ( , ), 0,00004. , .

.

705

1. CSS-
,
, , , .

, .
, <div> <span>. , rst-letter
, .
:rst-line .
,
<p>:

p:rst-letter {
font-size: 3em;
}
p:rst-line {
font-style: italic;
}



,
.


,
.


: , .
:
,
width.
img[width] { border: black thin solid; }
img[height="300"] { border: red thin solid; }
image[alt~="owers"] { border: #ccc thin solid; }

,
alt,
owers.

706



,

height

30
0.


, . , ,
<h1> . :
+ ( )
,
.
,

h1+p {
font-style: italic;
}

,
h1.


, . ,
:
,
blueberry.

.blueberry p { color: purple; }

,
. .
(1)
1 , , , :
,
, div
greentea
blockquote.

div#greentea > blockquote

(2)
2 , :
div#greentea > blockquote p

p ,

blockquote. p
blockquote,
div
greentea.

(3)
3 :


!
,
.

div#greentea > blockquote p:rst-line { font-style: italic; }


rst-line,

707

2. CSS-
( , , Microsoft, Mozilla,
, WebKit, . .) ,
CSS-, , . CSS-, :

-.


-.

-moz-transform
; moz, Mozilla.

, :

. , , ,
, , , , .
, CSS-:

div {
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
}

,
.

Safari Chrome
Mozilla
Opera
Internet
Explorer


, .
, transform, 3
CSS- .

708

3. CSS-
CSS, 2D 3D- . ,
( ).
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS- </title>
<style>
#box {
position: absolute;
top: 100px;
left: 100px;

position absolute (
,
, ?).

height: 200px;

<div>

background-color: red;

width: 200px;

Internet
Explorer
9
.

<div>
box

}
#box:hover {
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);

-ms-transform: rotate(45deg);

-

</style>
.
</head>
}

,
<div>
, <div>
!


<div>

45 .

<body>
<div id="box"></div>
</body>

<div>,
.

</html>

. <div>
box, , , 45 . ,
,
,
? , .

<div>,

,
!

709

css-

transition <div>
box, 2 . :
#box {
position: absolute;
transition :

top: 100px;
transform ,

left: 100px;

orm
transf


width: 200px;
.

transform
height: 200px;
background-color: red;
transform transition: transform 2s;
,
-webkit-transition: -webkit-transform 2s;
.
-moz-transition: -moz-transform 2s;

-o-transition: -o-transform 2s;
<div>
}
box, transform

#box:hover {
,
transform: rotate(45deg);
45 .
-webkit-transform: rotate(45deg);
, -moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
45 -ms-transform: rotate(45deg);
2 .
}

transition , transform,
, 2 .
, transition
,
, .
CSS-, width opacity.

710

Internet Explorer
( 9) transition,
10. , Internet Explorer.

4.
HTML- :
. .
JavaScript.
, ,
.

HTML ,
<script>,
JavaScript

<script>

, ,
window.onload = init; HTML.
.
function init() {
var submitButton = document.getElementById("submitButton");
submitButton.onclick = validBid;
}

function validBid() {
JavaScript,
if (document.getElementById("bid").value > 0) {

document.getElementById("theForm").submit();
, ,
} else {

0 .

return false;
0,
;
, .

}
}
</script>

, HTML, ,
.
0, .
<form id="theForm" method="post" action="contest.php">
<input type="number" id="bid" value="0"><br>
<input type="button" id="submitButton" value=" !"><br>
</form>
JavaScript,
,
,

,

bid.

?
, ,
, JavaScript
( , , ).
, JavaScript .


711


, .

html-5

5. API- HTML5 -
,
HTML5, API (Application
Programming Interface), JavaScript.
API- -
.

,
API- HTML5 JavaScript

2D-

,
- .

,
,
, ,

, ,
,

.

API- Web Workers


, JavaScript-

.
, !

-


.


.

Google Maps

.

712


,
HTML JavaScript.

, ,

.
JavaScript
.


Script,
va
Ja

-,
- .

JavaScript
.


.

?

Head First HTML5
Programming (
HTML5).

713

6. -
-,
-10 , . -,
, 10
, -:
1.

, -, , ,
Google Web Fonts (http://www.google.com/webfonts), Fonts.com (http://www.fonts.com/
web-fonts) Extensis (http://www.extensis.com/).

2.

-, .
, ,
.

3.

, ,
, .

4.

(Internet Explorer 9 ) Web Open


Font Format (WOFF), , , -. Internet Explorer 8 ,
(.eot), , -
(
@font-face). - Internet Explorer 8
, .

5.

.
, , -
- .

6.

- ,
, .

7.

-
, , .
.

8.

@font-face

, .
.

9.

, ,

-.

10. ,
, -
.

714

7. -
, HTML CSS, ,
, Dreamweaver, Expression Web Coda.

HTML CSS-. ,
; : HTML ,
, ,
. ,
, HTML- .


HTML- CSS- .

, , . ,
FTP.

.


, , , HTML- CSS- ,
( ) .


HTML CSS,
, .

,
, , .

,


Dreamweaver (Adobe).

Hype (Tumult).

Coda (Panic).




Microsoft Expression Web.


Flux (The Escapers).

Amaya ( , (W3C)).

Eclipse ( Eclipse Foundation)




715

xhtml?

8. XHTML5
XHTML , XHTML .
, XHTML, XHTML 2 , , HTML5-, XHTML-, .
? ,
XML- XML- SVG ( ,
, ), HTML.
XHTML-, (
, , , ,
XML, ).

, !
<!doctype html>

XML; ,
.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> !</title>
<meta charset="UTF-8" />
</head>
<body>



; ,

/>

XML
.
.

<p> XHTML!</p>
<svg xmlns="http://www.w3.org/2000/svg">
<rect stroke="black" fill="blue" x="45px" y="45px"
width="200px" height="100px" stroke-width="2" />
</svg>
</body>
</html>

XML
!
.

,
XHTML-:


XHTML .

MIME-
application/xhtml+xml; ,
( ).


SVG

.
, ,
XML-,

XML, HTML.

XHTML <html>
( ).
, XML ,
, ,
. , XML,


716


,
,
.

9.
, ,
. , -, , , ,
, ,
- . , 14
Starbuzz Bean Machine, .

. ,
.


-,
,
.

, .


. ,
, , .
- :
, Prius Hummer,
(, , , . .).
- . PHP, Python, Perl, Node.js, Ruby
on Rails Java Server Pages (JSP) . , PHP,
-. , , ,
. - ,
JSP Python. Microsoft, , ,
VB.net ASP.net . JavaScript, Node.js .

717

10. <audio>
HTML5
,
<audio>. ,
<video>:
<audio src="song.mp3" id="boombox" controls>
, <audio>.
</audio>

, -
(

, ).
, , ,
. : MP3, WAV Ogg Vorbis. ,
( Chrome ,
).
, <audio>
API- JavaScript . JavaScript,
-,
. HTML5
( )
(, Adobe Flash).

718

? ,
<audio>
, <video>
(,
).


.
,
. Adobe InDesign CS Adobe Photoshop CS.
: Uncle Stinky, Mister Frisky ( , ), Ann Satellite, Baskerville, Comic Sans ( ?), Myriad Pro, Skippy
Sharp, Savoye LET, Jokerman LET, Courier New Woodrow.
, , :
, ; , ; , ; ,
. , ,
Brew Dr. Kombucha, ,
Foster the People, B-52s, Duran Duran, , , , Pink
Floyd, Genesis, Simple Minds, Ratt, Skid Row, Men without Hats, Men at Work, Berlin,
, , Beyman Brothers, 1980- ,
, , .

?

, ,
,

!



wickedlysmart.com