Изучаем HTML, XHTML и CSS (2-е издание) PDF

., .
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 . 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.
ISBN 978-5-496-00653-8 , 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)
obson)
(Eric Freem (Elisabeth R
Head First -
: , , .
,
, , , -
-, -, -
-. .
- -
- ;
: Disney - The Ada Project,
Online & Disney.com Walt Disney Company. ,
WickedlySmart , , ,
. , .
, WickedlySmart -
-, -,
, (David Gelernter), , , . ,
. OReilly
Media, -
, ,
, , .
. OReilly Media -
Walt Disney Company,
; -
.
,
(Steve , -
Roach), iPhone , , -
Immersion Station. , ,
.
,
. , beth@
wickedlysmart.com, http://
. elisabethrobson.com.
eric@
wickedlysmart.com, http://ericfreeman.com.
()
23
1 . HTML 35
2 .
75
3 -. 107
4 Webville. 149
5 . 187
6 HTML. 241
7 . CSS 275
8 . 329
9 . 377
10 -. div span 427
11 .
485
12 HTML. HTML5- 557
13 .
611
14 . HTML- 653
. -10 , 705
()

HTML CSS. -
, , .
: , , ,
, . ,
.
, HTML CSS?
? 24
: 27
28
, 29
30
( ) 32
( ) 33
( ) 34
( ) 34
HTML
1
, , , -
: HyperText Markup Language (
), HTML. ,
. HTML,
, . -
, HTML , !
36
- 37
37
(HTML-) 38
39
Starbuzz 43
, , - Starbuzz 45
,
-, . HTML- (Mac) 46
HTML- (Windows) 48
Starbuzz 51
!
52
- 53
54
58
59
<style> 63
Starbuzz 64
HTML- loung
e.

ht
<html>

<head>
<title>
ml.
My Playlist
</title>

<head>
<body>
<html> <h1>Kickn Tunes
<head>
<title>
</h1>
My Playlist <p>BT - Satellite:
</title> nice downbeat tune.
<head>
<body> </p>
<h1>Kickn Tunes <p>
</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>
...
, !
2
- ? ? , . 1
HTML, , , ,
, --
. , -
.
<a> ,
. , , -
.
76
78
80
81
83
90
92
98
9

3 -
, -.
, : , , , , -
, , ,
-. -:
, ,
- . , , ,
,
, .
12 109
110
111
- 112
114
h1
115
<q> 116
p ... 116
--- 120
h2 <blockquote> 121
<q> <blockquote> 124
img
... 130
HTML- 132
134
, 139
p
h2
h2
img
10

4 Webville
- ,
. -,
. ,
. - .
- , ,
.
, h, t, t, p, :, /, /, w, w, w. , ,
Webville.
Starbuzz
( ) 150
151
, ... 152
152
154
155
FTP,
156
... 159
HTTP- 161
162
, 165
168
169
... 170
- 173
title 174
175
id
<a> 176
177
181
target 182
11

5
. gif, jpg png
, , .
, - -
. , ?
. , -? .
, , <img>?
,
. ,
.
188
191
<img>: 195
197
198
: myPod 199
index.html myPod 200
! 202
204
206
, .
, 210

HTML- myPod 212

... 212
. myPod 214
myPod 215
, 216
217
myPod 219
220
221
, -? 222
myPod 226
? 227

? 228

, PNG- 229
, -? 230
.
230
231
232
- myPod 232
12

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

HTML5 249
HTML 250
251
DOCTYPE 252
W3C- 255
Head First 256
, ... 257

258

-

HTML Webville
L-
HTM

W
ebvi
lle
lle
<meta> 261
HTML-,
266
13

CSS
7
, CSS.
HTML, -. , ,
. ,
, . -
CSS, HTML-. ?
, ; , Webville .
, CSS,
, .
276
, -
Webville 278
CSS HTML 279
CSS HTML 281
282
283
284
285
:
<h1> 286
287
290

293
lounge.css 294
lounge.html CSS- 295

elixir.html directions.html 296
297
301
, font ? 302
CSS- 303
304
greentea 307
308
greentea 309
310
312
html , CSS- 319
head body
meta title style h1 p p h2 p
img a em a
14

8
CSS . CSS
, , .
, , -
, .
,
. - -
. , ,
, ,
. ,
, .
330
, ? 332
CSS 335
font-family 335
336
font-family 337
338
,
? 339
- 341
- 343
: ! 344
345
346
- 350
351
353
normal. 354
355
356
? 358
? ... 361

364
A
B 366
5 10 366
4 6 9 11 C
3 ...
12 D 369
2 13
7 8 E 370
1 14 , 371
F
0 15 372
15

9
-,
.
HTML.
, . ,
CSS.
,
. , , ,
. ,
.
378
380
380
382
383
384
386
389
391
392
, 393
393
394
394
395
396
398
399
400
? 400
? 401
402
405
id 410
CSS 411
412
414
415

416
CSS 417
16

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

, 431

436
<div> 437
438
438
439

440

-
440
,

-
. , 441

445

.

446
.

... 449
451
453
453
454
, 455

. 456
-
- <span> 462

,
-
<span> 463
,

<a> 466
.

- ? 467
469
470
? 471
? 474

?

,

. .

17

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

? 486
, 487
? 489
493
495
Starbuzz 497
498
500
Starbuzz 501
505
506
, 507
h1 text 509
h2 text , , ... 512
515
h2 text p id=amazing
text
text ? , ! 516
p
span em text 517
em span 518
text
CSS Starbuzz- 521
p text
<div> main 522
text 523
text CSS 525
text CSS HTML 526
HTML- 527
p
CSS 529
img img img img
Starbuzz 530
? 531
532
CSS- 535
538

float 539
542
545
546
left 547
18

HTML5-
12 HTML
, HTML5. ,
, , , ,
, .
: , , HTML, ,
HTML5. HTML-, -
HTML5, ,
. ,
, ,
.
(, <video>), . ,
!
HTML- 558
Starbuzz 560
HTML- Starbuzz 563
, 565
CSS, 566
- Starbuzz 574
CSS - 575
577
<time> blog.html 578
<header> 580
? 582
586
CSS 586
GPS? 587
<nav> 587
CSS 589
-! - ! 589
- 592
<video> 592
, , 593
video? 595
<video> 596
598
599
601
2: , , 602

602
19

13
...
. , ,
-
( ,
), , HTML. ?
:
, HTML-.
- :
HTML-.
,
HTML-. , !
HTML 613
615
616
619
... 620
,
621
622
626
? 628
,
--? 630
631
, 632
? 635
CSS 639
640
641
? 642
20
HTML-
14
- : - -
. , ?
HTML.
( -),
, ,
-.
HTML-, -.
- ,
.
654
655
HTML 656
657
<form> 658
660
, -! 664
Bean Machine 668
<form> 668
<form> 669
name 670
<input> HTML 672
<input> 673
<select> 674
676
677
<input> 678
<input>, number date 679
680
681
GET 687
HTML-
692
CSS 694
696
? 697
, 698
21

-10 ,

,
.
,
- . ,

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

.
1. CSS- 706
2. CSS- 708
3. CSS- 709
4. 711
5. API- HTML5 - 712
6. - 714
7. - 715
8. XHTML5 716
9. 717
10. <audio> 718

,

HTML!
:

HTML?

,

?

1 -
?
,
2
-, -
? ,
.
3
, ?
, .
1 ?
( ,
, ,
, .)
2 -,
?
3 - ? -
? ,
HTML
?
[
:
-
,
.]
24

,
?
?
- ?

. :
,
.
- . ,
.
.
, .
, , , -
, ? , -
,
. , - -
.
.
.
, , ? -
, 695 ,
. ?
, .
. . -

.

! !
, .
. . . -
, ,
,
.
.
.
,
. ,
- .
. . ,
.
: , ,
,
, ,
.
25

,

,

, -?
.
, . ,

,
, -
, .
,

.

HTML-

, .

.
.

, , .

,
,
<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>
...
,
,
Web Server , !

.
.

.

,

40 % ,

, .

-

. .
.
.
?

:
-
.
,

, .
,

, , .

,
.

.
-
,
,

, ,

.
.
-

:

.
.
, , -

, . ,
, , .

.
,
-
. ,

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

?.. ,
-, , .
,

,
26

:
- , - ,
, , . , .

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

, -
, . 1024 . html
, . b
body
d
, , h1 p p h2 p
, , , , -.
img a em a
, -
.
, .
, -
.
, .
- , , , .
, .
,
, , - ,
. , .
100 , ,
- . , ,
.
,
,
, . ,
,
.
,
,
.
,
.
, ,
, .
, ,
, ,
. , ,
, . ,
.
,
, ,
.
, , . .,
. , .
80/20. ,
-, .
. , .
28

,
, .
.
;

- , ,
. - .

.
1 . 6 , .
, . .
. -
. , . -
. , - - - ,
. . -
, - - . -
, . , ,
- ,
.
2 .
. 7 .
,
,
.
. ,
. . -
,
,
, ,
-
.
.
, -
, ,
, -
3 .
.
! . 8 !
,
. , .
4
, . .
. , -
( , , ,
) .
, .
. 9 -!
- -
, . -
-
. -
5 . . ( ),
- . , -
. ( , ,
, ) . ,
. 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 ( ) HTML CSS!!
(Shelley Powers) ( 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 1
html
-
- , .
? -, , , -
, . - ,
.

-
-
HTML-

,

,

.

...
- loung
HTML e.h
<html>
<head>
t
<title>
My Playlist

ml
</title>

<head>
<body>
<head>
</h1>
.
<title>

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

, -
-
.
.

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

...

<html>

<head>
-
<title>
Head First Lounge
</title>
<head>
<body>
.
<h1>Welcome to Head
</h1>
<img src="drinks.gi

<p>Join us any even

</p>
<html>
<head>
<title>
<p>
My Playlist
</title> ...
<head>
<body>
<head>
<title>
</h1>
<head>
<body> </p>
<h1>Kickn Tunes <p>
</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. .
,
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>
D ,
, , ,
<em> -</em>. E

( ).
</p>
F
>
<h2></h2>
<p>
Webville.
G
!
</p>
,
</body> HTML.
</html> -
, HTML. -
.
HTML- ,
. -
, ,
.
38 1
html

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

A
E
D
39

: , HTML , HTML- -
, - , , ,
? . . -
Javascript-
: . , HTML : : -
HyperText Markup Language ( - <h1> <h2>? API (Application Programming Interface),
), - Head
, : : <h1> First HTML5 Programming (
. <h6>. , - HTML5).
, HTML , -
. . : , -
<h3> . . ,
: , - , -
HTML? : <html>? , 1970-
, HTML-? .
: HTML , Microsoft Word?
: , - : <html> ,
, HTML-. :
. . , , - .
,
, . , -
. . . , -
-
- : HTML-? , , ,
CSS, , Dreamweaver, .
, - : HTML- .
. CSS . . - ,
, Dreamweaver .
: HTML- Head First . -
.html .htm : - -
, , ( , HTML-?
. ? ),
. : : , -
: - . ,
, - . ,
HTML. : HTML5.
- ? , , :
, HTML- HTML?

.
, : HTML, HTML5 ,
? . ,
HTML-, HTML. HTML5 ,
. HTML- , HTML-, -
, , .
40 1
html

HTML, ...
HTML- Head First. .

, ?
- .
...
, HTML-.
<html>
- ( ).
<head>
</head>
<body>
<p>
,
, , ,
<em> -</em>.

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

, HTML-.
<html>
-.
<head>
.
.
</head>
.
<body>
, .
<img src="drinks.gif"> drinks.gif.
<p> .
, , ,
.
<em> -</em>.
( ).
</p> .
, .
<h2></h2>
<p> .
Webville.
</p> .
</body> .
</html> , HTML-.
42 1
html
Starbuzz
Starbuzz
. ,
, , , .
, , -
-
, Starbuzz Chai,
Starbuzz...
HTML.
-,

Starbuzz. ?

arbuzz
St

( ).
A. . C. -
Starbuzz
.
B. D. .
.
43
starbuzz
!
,
.

bu
zz ,
! -

Star
),
( ,
Star
.

buz

z

9
, $1,4

- , ,

.

, $2,35

, .

$1,89
,

.

,
, $1,85

.
,
. -
?
, ?
? ?
(-
) , , -
, .
1.
* A, B D ,
-
,
, , - .
44 1
html
- Starbuzz
, , -
-.
HTML ?
, ,
.
1 HTML-,
.
2 , -
Starbuzz .
3 index.html.
4 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 1
html

TextEdit.
TextEdit -
Rich Text ( ), -
,

.
.

TextEdit, - Rich Text
(
),
.
.
TextEdit Preferences
().

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. Windows.
, . ,
.
HTML- Windows 7
Notepad (). Windows,
. ,
Windows 7, .

, HTML.

indows.
, HTML- - W
Notepad ().

Start () Notepad ().
Notepad () .
Start (), -
All ProgramsAccessories ( ).
Notepad ().
48 1
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

: - : , ,
? . : Internet Explorer,
Dreamweaver Expression Web Firefox, Chrome, Opera, Safari. ?
-?
: : ,
: , . , -
-, ? HTML CSS ( ,
, , . , ).
.
HTML CSS, , : -
. , --
. ,
, - ,
, , .
. , , . HTML CSS
,
,
.

.
HTML CSS, .
, , ,
Internet Explorer, Chrome, Firefox,

Opera Safari

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

, , !
(
HTML-, ),
( - : .
), - ?
(, , ,
) .
HTML- CSS- : HTML ,
, , , ,
Coda, TextMate, CoffeeCup . ,
Aptana Studio. .
( , ). .
50 1
html
Starbuzz
, , -
, -
, ,
.
.
HTML- ,
. , -
Starbuzz.
Mac
Windows
51
html

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

, Windows
.
1 starbuzz
,
Starbuzz.
New
Folder ( ).

Mac Mac, Windows UTF-8
, Encoding ;
() UTF-8.
.
2
starbuzz index.html
File name ( )
Save ().
.
52 1
html
-
-? -
File () Open File ( ) ( Open (),
Windows 7 Internet Explorer) index.html.
Open ().
Mac

,

).
Open (
Windows Windows Internet Explore

r

.

.
Browse (),
-
,
.
53
html
Windows
! ,
-
. ,
,
-
.
-
-. -
HTML.
-
. ? ,
, -
,
, ,

. .
, -

.
Mac

HTML-

.
.
54 1
html

,
Starbuzz.
( )
, , -
, . -
, . ,
.
.
<h1> Starbuzz </h1>

, $1,49
,
, .
<h2> , $2,35 </h2>

<p> ,
. </p>
.
, $1,89
.
, $1,85
, ,
.
<p> /p>
>> </h2>>
1 <p> <</p>
>> </h1 1 <h2> </h </p>
<hh11 </h <h2> </h2>
/h2> <p>
< > </h1>
/h1>
<h1 <h2>

,
,

,

, ,

,
.
.

.
.
. .

55
html-
!
-
HTML-.
, -
,
HTML. , ,
, .
, ,
.
-
h1
h1 / .

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

<h2>, $1,89</h2>
.

<p>

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

-
.

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

)
-,
/h tm l. (
htm l -

.
,

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

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

-
, ,

. .
57

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

Open File ,

( )
. head.

.

,

,

.

58 1
html

, -
, ,

-

.
,

,
, ;
Starbuzz

. /h1
1.
h
,

, -

.
,

/.

<h1> Starbuzz </h1> h1

/ .

.

,

h1.
.
.

.

-
-

,
.

,

, rbuzz
Sta .

,
.
:
= + +
+
59

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

: . , : , - , -
, . - .
, - -
, , , : +
HTML- . , + + ,
.
, -
, ,
.
, <h2>, ,
,
</h2>. <html>?
,
: - - .
, -
: , HTML-
/? HTML , . , HTML-
, -
: -
.
, , - . HTML- -
.
. , : , <img src="drinks. ,
, , gif"> ? , - -
? ? .
- , ,
. .
, ?
<p id="houseblend">,

, .</p>
60 1
html
, ,

-.

.

...

Starbuzz

.

.

1 HTML-
mission.html.
2 ,
,
mission.html ,
index.html.
3 , -
mission.html
.
4 ,
...
61
css -
, , -
.

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

CSS, Starbuzz CSS
-
( Cascad
ing Style Shee
( ts
). ).

,

,
CSS

-
.
62 1
html
<style>
,

------ ( le
sty .
) <style>. - HTML-
Starbuzz .
, ,
<html> style
<head> /style...
<title> Starbuzz</title>
<style type="text/css"> ... style
() ,
type ,
</style> .
</head>
CSS,
text/css.
<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>
<style type="text/css">
body {
background-color: #d2b48c;
margin-left: 20%;
margin-right: 20%;
border: 2px dotted black;
padding: 10px 10px 10px 10px; CSS

font-family: sans-serif; ,

}
ML.
</style> HT
</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>
64 1
html

. ,
index.html . - Starbuzz -
.
-
.

.

).
(
! .
.
65
css
CSS-, -
, .
, .
background-color: #d2b48c; ,
.
margin-left: 20%; , -
margin-right: 20%; ,
.
: 20 %
.
padding: 10px 10px 10px 10px; -
.
font-family: sans-serif;
.

: CSS HTML , - : body CSS?
-. ? . , ?
, ,
, ? . : body CSS ,
{ }
: , HTML : , #d2b48c HTML- <body>. , -
CSS , - . -- sans-serif, ,
, ?
. , -.
- :
- CSS. - -
, , CSS,
CSS - #d2b48c. . ,
HTML , - . -
, . , , , ,
, - , #d2b48c .
. , .
66 1
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 1
html
HTML CSS
? -

. ,

,
.
.
, , ,

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

69
html css

,
-,
.
!
.
,
,

.
HTML CSS , -
-. ,
/.
- --
, HTML CSS. -
- <html> <head>
, HTML CSS. <body> .
HTML HyperText Markup -
Language ( ). <head>.
--
, <body>,
. .
CSS Cascading Style Sheets. (
, , ) -
HTML. , ,
HTML, HTML- .
, . - HTML- - CSS-
, CSS -
. <style>. <style>
: <head>.
, . CSS
, <img>, - HTML.
.
.
: type.
70 1
html

(), , .

-
.

bu
zz
,

Star

! (
-
Star

),

.
buz

,.
z

zz
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>
, . </p>

<h2>

, $1,89 </h2>
<p>

. </p>
.
<h2>
, $1,85 </h2>
<p>
, ,
. </p>
</h1>>
>> 1
<hh11 </h
< </h1>
/h1>
<h1>
72 1
html
<html>
<head>
</head>
<body>
<h1> Starbuzz</h1>
<p>
.</p>

Starbuzz <p> .</p>

</body>

.
. </html>

HTML-.
HTML,

.
73

<html>
<head>
<style type=text/css>
CSS - body {
. margin-left: 20%;
margin-right: 20%;
padding: 10px 10px 10px 10px;
}
</style>
</head>
<body>
<h1> Starbuzz</h1>
<p>
.</p>
<p> .</p>
</body>
</html>

Sta rbu zz.

CSS, - , .
, .
background-color: #d2b48c; , .
margin-left: 20%; , ,
margin-right: 20%; .
border: 2px dotted black; : 20 %
.
padding: 10px 10px 10px 10px; - .
font-family: sans-serif; .
74 1
2

, ,
. .

!
- ? ? , . 1 -
HTML, , , ,
, -.
, -
.
<a> , .
, , - .
head rst

Head First? , ,
? ,
- , .

.

.

-

:
-
,
.

HTML-
.

directions.html
76 2

.

,

,
.

...

Head First , -
.

1 ,

directions.html elixir.html.

,
http://wickedlysmart.com/
elixir.html hfhtmlcss.
2 -
lounge.html -
HTML-
directions.html elixir.html.
3 -
.
, ,
.
77

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

.
,

<html>
.
.

lounge
.
</html>
,
lounge.html

chapter2
,
.
<html>
.
.
.
</html>
.
elixir.html
lounge
,
<html>
.
.
.
.
</html>

directions.html
ti ht
.
green.jpg
blue.jpg
, drinks.gif

lightblue.jpg
red.jpg
.
Head First . ,
? ?
78 2

2 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.
3 lounge.html
, lounge.html
. .
1 ,
.
2 -
lounge.html.
3 ,
.
79

,

,
,
. ,
,
HTML.

1 HTML-.
, ,
<a>. :
<a></a> <a></a>

a
a

.
, ,
.
.

2 , ,

- HTML-, ,
,
:

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

m l.
elixir.ht
href
. ,

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

1 -,
, , <a>,
,
.
,

a,

,
-

.

<a>
.
<a>
-.
href .
81

2 , ,
href, ,
.

, ...

... .

,
href ,

dir ect ion s.html... elixir.html...

...

.
...
directions.html.
82 2

-
. -
,

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

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

:
, ,
, .
,
HTML-,
,
.

( <a href=top10.html> </a>
).
.
83

:
HTML?
: , -
.
, , .
,
, .
, .
, - ( -
Head First HTML5 Programming
( HTML5) HTML5
,
.
: , , ?
href
-...
: ,
HTML. ,
,
... , HTML ,
.
.
: , -
? ?
: .
, ,
.
, -
. , -
,
HTML & XHTML: The Definitive Guide (OReilly).
84 2

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

<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>?
: <p> -
: , <img> <a>, <a>, . ,
, . , (
, ) <a>,
. <p> <h1> , .
,
, , .
87

Head
First .

.
online-
.

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

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

lounge.html
lounge
. -

<html>
.
.
.
.
</html>
elixir.html
lounge
<html>
.
.
.
</html>
directions.html

. ,
,
.
green.jpg
blue.jpg
. ,
- , drinks.gif
.
lightblue.jpg
- ... red.jpg
88 2

- .
,
,
.

lo u nge.
lounge.html lounge
.
<html>
lounge .
.
.
</html>
lounge.html
green.jpg
g
<html> <html>
about
.
.
beverages .
. images blue.jpg
. .
</html> </html>
drinks.giff
directions.html elixir.html
, red.jpg lightblue.jpg

.
,

.
,
. .

,

. .

: - , ,
, . ,
html .
HTML-? :
, : ?
: . about beverages?
- : , -
, - : . -
, - ,
. -
, , .
- . ,
, , - .
89

,
. , .
1 lounge
about, beverages
images.
2 directions.html about.
3 elixir.html beverages.
4
images.
5 , lounge.html
. .

, -

...

.

.

, ,
( )
:

,
.

,
.
90 2

, ,
,
,
lounge.html.
,

.
.

.
href,

.
,
.

.
,
,
-
,
href.
91

,
?
,
. Google,

- !
: ,
, ?
-
, . -

, , .
, ,

. .

( ).
1 lounge.html elixir.html
lounge.html.
<a> :
elixir.html,


nge.html.
, lou
2
, lounge.html
lounge elixir.html beverages,
lounge.

...
<html>
lounge .
.
.
</html>
lounge.html
green.jpg
g
<html> <html>
about
.
.
beverages .
. images blue.jpg
. .
</html> </html>
drinks.giff
directions.html elixirs.html
red.jpg lightblue.jpg
... .
92 2

3
. lounge.html
elixir.html, beverages.

beverages.
<html>
lounge .
.
.
</html>
lounge.html
g
green.jpg
<html> <html>
about
.
.
beverages .
. images blue.jpg
. .
</html> </html>
drinks.gif
elixir.html
.
4 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>
lounge .
.
.
</html>
lounge.html
green.jpg
g
<html> <html>
about
.
.
beverages .
. images blue.jpg
. .
</html> </html>
drinks.giff
<a href=" "></a>
94 2

:

1 directions.html lounge.html

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

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

.
2

...
- -
.
.
<html>
lounge .
.
.
directions.html, </html>
lounge.html
about.
lounge.html, green.jpg
g
<html> <html>
about
.
.
beverages .
. images blue.jpg
. .
</html> </html>
drinks.giff
about.
red.jpg llightblue.jpg
...
3

. lounge.html.
directions.
html lounge. <html>
lounge .
html, - .
.
</html>

lounge.html
, lounge,

green.jpg
g
lounge.html. <html>
beverages
<html>
about
.
.
.
. images blue.jpg
. .
</html> </html>
drinks.giff

lounge
95
href
4 href
. , ,
, . .

.

/. .
?
,
...

.

.. / lounge.html
...
<a href="../lounge.html"> </a>
,
,
lounge.html
, , ,
( ).
?
96 2

: ? : , : ?
, ? - ,
,
: .. ?
? ,
. , .., :
: , . ( - . , , .
) , - 10 ,
- ../... , - ,
. , . 10 .
/. , : ,
, , ....! , , ,
( ) . !
, :
, - , , - .
. ? -
. 255 , -
: ../.. .
: , , fruit.html, - . ,
, ..? , .
../../fruit.html. , ,
: , , , - : -
, , ../.., -- -
, - , \;
... : . /?
, . -
, : - : ; -
. , - / ( ). \
directions.html, - ? ( ). -
about, lounge.html, - (-
lounge, : , , Windows \ /),
about. . , -
.
.. , lounge. , . ,
. . , /, -
HTML.

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

. , - , ,
, , . , ,
<img> ( , - .
). , - !
src <img> ,
, href. .
<img> lounge.html:
,
, .
,
href a.
lounge.html drinks.gif
, lounge.html
, , images.

... (1)
: images.
lo unge, <html>
ges, lounge .
ima
.

.
</html>
.

lounge.html
green.jpg
g
<html> <html>
about
.
.
beverages .
. images blue.jpg
. .
</html> </html>
drinks.giff
(2) red.jpg lightblue.jpg
drinks.gif.
...
.
, (1) (2) , images/drinks.gif, :
<img src="images/drinks.gif">
98 2

elixir.html red.jpg

: red.jpg, green.jpg, blue.jpg . .
red.jpg, -
, -
.
:
beverages, (2)
,
images.
images.
<html>
lounge .
.
.
</html>
lounge.html
green.jpg
g
<html> <html> ...
about
.
beverages .
images blue.jpg
.
. .
. .
</html> </html>
drinks.giff
,
(1) ,
loun ge. ...
,
. (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.
2 elixir.html -
src , -
../images/.
3
lounge.html .
-
.
P. S. - , -
chapter2/completelounge.
.
!

.
.
.
.
100 2

- .., -
, ,
<a>. (
href <a> , ,
. ).
<a> ..
. , .
-.
. , / ( ).
.
,

-
.
-.

, -
, --
, -
href. .
,
. ,

, - ,

.
-,
, -
. ,
. .
101

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

<html>

.

,
.

.
</html>
.
music
top100.html
<html>
.
.
.
</html>
genres images
logo.gif
genres.html
<html>
.
.
.
</html>
darkside.gif oyd.gif
pinkoyd.html
rock cdcovers artists
<html>
.
.
.
</html>
xandy.gif chris.gif
coldplay.html
102 2

.
... ... !
00.html
top1

<html>
genres/genres.html <html>
music,

. .

. .
. .
l,
genres.htm
<html> <html>
top100.html genres.html

enres.
g

<html>
.
.
.
<html>
top100.html logo.gif

<html>
.
.
.
<html>
logo.gif
genres.html

<html> <html>
. .
. .
. .
<html> <html>
top100.html pinkoyd.html

<html>
.
.
.
<html>
coldplay.html chris.gif
103

elixir.html,
lounge.html. .
<html>
<head>
</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
.
a

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

? hot.html <a href="hot.html"> ?</a>
cv.html a href=cv.html/a
candy.html
candy.html <a href=" "> </a>
mini-cooper.html a href=mini-cooper.html /a

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

</a>

lounge.html directions.html.
, <a>
(. ).
about <html>
. -
lounge .
.
. <a> lounge.html?
</html>
lounge.html
green.jpg
g
<html> <html>
about
.
.
beverages .
. images blue.jpg
. .
</html> </html>
drinks.gif
directions.html <a href=" about/directions.html "></a>
105

00.html
top1 usic,
m

,

res.html,
gen
<html>
. images/logo.gif

.
.
enres.
<html>
logo.gif g
top100.html
l
genres.htm
,

genres, ,
logo.gif,
<html> ../images/logo.gif

.
.
.
ic,
<html>
mus

genres.html
logo.gif
images.

.html
top100 r es,

gen

<html>
rock
<html> genres/rock/pinkoyd.html . l.
yd.htm
.
pinko
.
. .
. <html>
<html>
top100.html pinkoyd.html

.

coldplay.html,

,

rock,
../../images/artists/chris.gif

<html>
.
.
.
<html> music,
images
coldplay.html chris.gif

chris.gif.

, !
106
3 c

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

,
.

.

-,
.
12
, 20 Burm
a
14
-

:
,

Shave

- . -

.
!

, 12
, 2012 , 20
2 20

!
200 -

-

1
-
, ,

,
. : - ,

, - ,

: , ,
,
, iPo
d,
, - -
, , .

- , -
,

:
.
-
.
.

,
,

.

108 3
c
12

, .
.
-?
, .
1 -, ,
.
2 HTML (<h1>, <h2>, <h3>, <p> .),
( ) HTML-.
3 , HTML-.
4 : ,
.
.
! , .

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

:
, ,
. .;
-
,
?
109
c
-. , -
-
, , ,

, -
. ,

, , .
, .

.

.
!
- 20 , 2012
, ,
-
.
, ,
.
, 1200 -
: -
, , -,
.
, , , ,
, , , , --
() , -.
. 14 , 2012
Burma Shave
: -

, .
, : , - -
. , !
, 2 , 2012

-
,
-

-

.
,

! , -
-
, -
: . -

, :
. , iPod, -
- . . :

. .
,
110 3
c

, ,
-

HTML-...

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

.
h1
h1
h1
h2
p h2
p h2
p
h3
h3
img h3
img
img
h4
h4
a h4
a
a
h5
h5
h5
h6
h6
h6
111
-
-
.
.
HTML-,
.
, , -
- <html> h1
<head> <body>.
p
h2
img
, ,

p
,

HTML.
h2
h2
img
112 3
c

,
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.
<h2>2 , 2012</h2> segw
<p>
! ,
.
, :
, iPod, .
. -:
.
</p>
, :
</body>
</html> body html.

, .

journal.html chapter3/journal. images
, .
segway1.jpg segway2.jpg.
113

, 2012 a Shave
14

Burm

:

,

-
.

!

,

!

2
, 2012 , 2012
20
!

-
00
12 -
,

, ,
.

-
,

,
: ,
- -
, ,

,
, ,
, ,
: - ,

, iPod, .
--
-

.
. -

: -

.

-

, -

.

-

-
.

-

!
;

.
114 3
c

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

,
. -

, , ,
<q>

.

116 3
c
...

<q>,

? ?
.
.
,
,
<q>, , -
( ).
, , !
. -
, , ,
.

<q>, -
-
, .
.
, , ,

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

. -
<q>. ,
journal.html . .
<html>
<head>
<title> </title>
</head>
<body>
<h1> </h1>
<p>
!
</p>
<h2>20 , 2012</h2>
<p>
, 1200
: -, , -, ,
, , , , , ,
--, -.
</p>
<h2>14 , 2012</h2>
<p>
Burma Shave :
,
. ,
!
</p>
<h2>2 , 2012</h2>
<p>
! ,
.
, :
, iPod, .
. :
.
</p>
</body>
</html>
118 3
c
,

Webville ,
, - , -,
. , -

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

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

Burma Shave.
-
.

? , :
Burma
Shave :

,
,
Burma

. -
Shave,

...

,
!
-
<blockquote>.
<q>, -
, -
, - ,
<blockquote> <blockquote>
,
.
.
120 3
c
<blockquote>
<blockquote> - .
1 journal.html 14 . -
, :

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

,
,
.

.
</blockquote> ,

<p> p,

,
blockquote.
!
</p>
2 . journal.
html :
blockquote -
( p),

,
.
,
-

,

,
.

-

.
.

121

: , , - , - : .
<q> , , <q> <p>,
- . <q> <blockquote>.
, , - , -
<blockquote> , -, - .
, , . <blockquote> <q>
-? , ?
: , <blockquote>
: , . <blockquote>, - : ,
- , CSS.
, <q> , <q>? , , -
<q>
. , CSS.
: <blockquote> <em> -
. ?
: - .
? , -
Enter . : , ,
, - ,
: . - . <em> -
<blockquote>, , ,
. . ,
. . ,
, , -
, - -
: , ,
(- <blockquote>. , -
- . , <em> .
)? , <blockquote> -
-. . .
,
, CSS.
: . :
. - ? , -
, , <q> -
. <blockquote>?
122 3
c
-
?

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

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

<q> <blockquote>
, : <blockquote> <q> -
. <blockquote> , <q> ,
. ? ,
, ,
, .
: :
h1, h2, ..., h6, p blockquote q, a em .
.

,

h2
.

q,
p

p
-
q
, -
-

.
blockquote -
.
:
,
.
124 3
c

: , , ; -
Enter . ?
: . , -
, Enter. ,
HTML- , . , ,
, .
, ,
, ,

,
?
-?
,
HTML-. , -
.
.
-
:
-,
-
.
, -
( ),
.
,
HTML- -
CSS. -
,
,
HTML-.
125
br

Burma Shave.
,
,
,

,

,
,
.
?
, ,

,
?
?

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

<blockquote>

,
<br>

, <br> -
14 .
. <br> -

<br> .

<br>
</blockquote>
<p>
,
!
</p>
126 3
c
<br> .
, -
.

. -
,

Burma Shave!
127

1 ,
+ + .
<br> ? ,
!
. .
<br> , . -
? ,
-
. , -
-
,
-
, <br> .
, ,
, ,
, -
<br></br>,

?

<br> ; - , -
, . ,
<img>. -
.
, -
- , . .
-
( , -
HTML- . .). , , -
HTML, , -
. .
? ,
-
. . - .

.
<br> </br>
,

. -
,
-
<br> </br>
.

, ,
...
(). <br> .
128 3
c

: , <br> : - -
? ? , <img>
, ?
: . ,
, , : , . ,
( <p>, <h1> . .). <img>, .
, <br>.
: -
: <br> - ? , ,
? ,
: , , <a href="mypage.html">?
+ + - : . :
. ,
, <p>, <h1> <a>, ,
, . -
<br> <img>. . ,
; , .
<a href="mypage.html">, -
: . , <br> (
). <a href="mypage.html"></a>,
?
,
: , , <h1> ( <p>, <a>). !
- ,
:
: <br>, <br/>.
?
<h1> , </h1>
<br>,
: . , -
. , . <br/>, ,
, XHTML. , <br/>,
, - <br>, , -
. void XHTML ( XHTML
void element ( ) ), <br>
, : HTML-.
.
, HTML-,
.
, <br> <img>,
. ,
HTML-.
129

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

,
.
, ,
, ? -
. -
, :
, 1200
.
1. -, . ,
2. -, . ,
,
3. , . , .
4. , .
.
5. , .
6. --, -
.
130 3
c
, <p>

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

<p>
2.
.
</p>

.
HTML-, -
.
, .
,
, (

) -

,
. <p>
.

.

<p>? ( .)
A. HTML
. ,
, ,
.
B. <p>
, .
C. , ,
.
D.
, -
. -
.
: A, B, C D.
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 3
c

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

Burma Shave
:

</p>
! ul ol

= ul

<ol> ? = ol

<li>? = li
133

, HTML-,
, journal.html.
- :
,
.

ol,
,
.
,

, , li
!
, -

-
(
).

,

-
.

,

?
134 3
c
: , 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> , : HTML.
<ol> . , -
. -
: .
<ol> <ul>? , ,
.
: , <ol> <ul>
<li>. : , HTML
. - ?
: ?
? : : .
:
: . . ,
CSS -.
dt
: , ? <dl>
dd.
? <dt> Burma Shave</dt>

<dd> ,
19201930-
: , . <ol> <ul> .</dd>
<dt> 66</dt>
- <li>, <dd>
.</dd>
( ). </dl>

<ol> .
<li> </li> : Burma Shave?
<li>
<ul>
<li> </li>
: , XX
, .
<li>iPod</li>
, , 1925 ,
<li> </li>
<li> </li> (
</ul> ).
</li> , ,
<li> </li> . ,
</ol> li.
- 7000. ,
. , .
136 3
c
html
body
p
q

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

,

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

,
,
html -

.

,
.
html
:
head body.
body html,

html ,
html.
body html.
head body
title title p
head. p
q,body
p,
q html
body.
138 3
c
,

,
, ,
( ).

? :
<p> <em></em> Twitter</p>

p
HTML
-
, em
-
p.
em
, -
:
<p> <em></p> Twitter</em>
: p
em! ,
em
, , <em> -
p.
<p>.
p p
em
em
: em : em -
p. 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 3
c

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

HTML-
,
, .

<html>.
? ,

?
,
.
< > ,
HTML-
. HTML
,
.
, . , -

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

: , , - & ,
- . ,
. www. &,
unicode.org - .
. : , & -
-
:
: . . www.w3cschools.com, -
, &. ,
, , , > . ?
- >?
. ,
: -
- : , ! , & , ,
www.w3schools.com, - , , &#100 (
, . ).
. , - , ,
- , & , ,
, . - .

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

Ðετröìτ.
.
: http://www.w3schools.com/tags/ref_entities.asp
/ HTML- , .
143

<em>
<strong>
, ,
,

.
, ,

, .

<pre>
,
<address> , ,

a.
.
,
<a> ,
,

, ...
.

, <ul> <br>

.
. ?
,
,

<q>

?
<p> ul.
<img>
,
.
,
. ,
<ol>
ol.
- ,
code

.
. <li> ,

<c ,
:
od , e>
e> ot
... u

kq
<li> loc
<b
,
, .
,
HTML !

.
144 3
c
.

-
. , HTML-

. ,

?
, <br> .
-.
,
,
, .
HTML-.
- -
, - .
. ,
: , .
, , ,
.
.
, - ,
- .
. , ,
. HTML -
:
<p>, <blockquote>, <ol>, <ul> <li> <ol> <li>; -
.
<ul> <li>.
( ) ,
,

. .
<q> <em> . , -
- , <ol> <ul>
, . <li>.
<br>,
. HTML.
145

HTML-
, <q>. ?
...

<p>
! ,
,

. ,

q :
-

, iPod, .
- . : .

q - <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> li.
-
<p>
. .
: <q>
</q> -

</p> .
146 3
c
.
. -
h1

/

-

<html> .
/head

<head>

<title>-100</title>
<body> p q - :
<h1>-100 : /p Detroit!
<h2>Dark Side of the Moon</h2>
<h3>Pink Floyd</h3>
/q.
<p>
; <q>
.
</p></q>
<ul>
<li>Speak to Me / Breathe</li>
<li>On The Run</li> /em -
<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>
</p> Ðετrö
ìτ.
<h2>XandY</h3> p. .
<h3>Coldplay</h2>
<ol>
<li>Square One

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

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

<li>Twisted Logic
</ul> ol, .
</body>
</head> /head;
/html.
147

HTML- -
?
?. ,
,
. , -
. .
, ,
.
:
HTML-, -
, !
,
<a>
,

,

.
?
-
,
,

. h1 <a>

-
,
. a .
.
em
?
br
, ul ,
.
br .
, .
,

. li ,

<p>.
. ol

. img ,
img

.
q
.

- blockquote ,
.

5.
148 3
4
Webville

Webville!

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

, 1

Starbuzz ,

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

.
, ,

, .
. , .
.
1 .
2 (,
www.starbuzzcoffee.com).
3
-
( ).
4 , , ,
, .
,

, ,
- , -
. , .
-
HTML.
150 4
-

, - ,
, ( ,
. , HTML CSS), ,
. .
, - ,
. .
? , , :
-
Head First Hip Web Hosting, Inc., , , ?
. -
. - .
, : -
, , -
:
. - .
, -
.
: . ,
, - , , -
. ,
. .
- , :
, -
. , -
,
?

:
?

.
,

.
: -
- ,
,
99 % .
, -
HTML
:

, .
-

,
,
,
, -
(-, -
.

, )?
151
-

, ...
, -
. google.com, facebook.
com, amazon.com, disney.com , , ,
.
, ? ,
. :
www.starbuzzcoffee.com
,

, .o rg,
: .com
-
-

. .
u ; p .
.gov, .ed k, .co.j
: .co.u

.

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

. ( , ),

.

.
.
, , -
-
. -
, , , .
152 4
-

: www.starbuzzcoffee.com - , ,
, ? . ,
, , 100mainstreet.com. . ,
: . ,
www.starbuzzcoffee.com, , , :
, starbuzzcoffee. home.100mainstreet.com, toolshed.100mainstreet. ( -
com . com outhouse.100mainstreet.com. ,
, - , www.starbuzzcoffee.com ).
, starbuzzcoffee.com.
corporate.starbuzzcoffee.com employee. : -
starbuzzcoffee.com. , : - , , , - -
. ? , ?
? ?
: ,
Starbuzz, : www.dirtcheaphosting.com. : . -
www.starbuzzcoffee. , -
com? , www - : , ,
. , . , -
( ) (
: : - ).
: starbuzzcoffee.com , -
-
,

. ,

. , ,
.
,

.
, Head First
. ,
( , !).
153
-
! , -
,
- ( ,
, ).
? , . ,

: .
, ,
, .

-. Starbuzz
. , -
:

?
Starbuzz-
Starbuzz. (index.html)
<html>
. :

,
.
.
on.html).
</html>
issi
index.html
(m
starbuzz
<html>
.
.
.
</html>
-.

<html>
.
.
.
<html>
starbuzz
index.html
mission.html

<html>
.
.
.
<html>
mission.html
,

.

,
.
arbuzz-
St starbuzz
.

starbuzzcoffee.com ( ,

).
154 4
-

: , - - : . -
?
,
:
, - .
. , ,
- , : ,
, , ( - images? -
, . ). ?
: , : , - : , -
mydomain_ . ,
com. ? , . ,
.
: . - - images, , -
. ? .

-
Starbuzz : -

, ,
.
, .
-? ,
,
FTP, .
<html>
.
.
.
<html>
index.html
starbuzz
<html>
.
.
.
<html>
, FTP. mission.html
, .

.

<html>

.
.

,
.

<html>

index.html
starbuzz
<html>
. .
.
.
<html>
mission.html
155
-
FTP,
HTML CSS,
FTP . ,
, ( -
, ). ,
HTML CSS ( ).
, FTP-. , -
, , Dreamweaver
Expression Web. ,
, .
, FTP.

,
1 .
FTP.
-
ftp www.starbuzzcoffee.com
.
FTP-
sttar
arbu
b zz

.
,
,

zz
starbu

-

,
2 cd, ,
.
,

.
cd starbuzz

<html>
.
.
.
<html> -
starbuzz
index.html
starbuzz.
starbuzz
<html>
.
.
.
<html>
mission.html

index .html
3 ,

put.
.
l
.htm
ndex
put i
<html>
.
.
<html>
.
<html>
.
.
<html> .
.
starbuzz
index.html
starbuzz
<html>
.
.
</html> .
.
<html>
mission.html .
</html>
index.html
i d h l
index.html
156 4
-
4 ,
,
, mkdir.
,
mkdir images .
<html>
.
.
.
<html>
<html>
index.html .
starbuzz
<html>
.
.
.
<html>
mission.html
starbuzz .
.
</html>
index.html
-

images
im images, -

5 starbuzz .
get.
get index.html
<html>
.
.
.
<html>
<html>
starbuzz
index.html
.
starbuzz
<html>
.
.
.
<html>
.
mission.html
.
</html>
index.html
<html>
.
-
.
.
</html> www.starbuzzcoffee.com
index.html
images .

FTP-
,
.

FTP- ,

. .

File Edit Window Help Jam FTP-
%ftp www.starbuzzcoffee.com

Connected to www.starbuzzcoffee.com . , FTP- -
Name: headrst -
FTP- -
Password:****** ,
230 User headrst logged in. .
,

ftp> dir .

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

Directory successfully created index.html.
.
ftp> cd images get <_>: -
CWD command successful , -
ftp> bye .
bye.
157
-

: : , : -
SFTP, FTP. . - -?
? , -
, ,
, , : , -
: SFTP, Secure File Transfer Protocol , . -
( ), ,
FTP, ,
. .
SFTP , - ,
FTP- . .

, Dreamweaver -
: , Coda, - . ,
, .
, - , MS-DOS Linux, -
? . ,
.
FTP-
FTP- Mac

Windows.

FTP-
Mac OS X: ,

Fetch (http://fetchsof
tworks.com/) .
Mac. $ ,
FTP- ,

,
.panic.com/transmit/) $
Transmit (http://w ww

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

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

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

( , ).
, ,
.
( )
.
Starbuzz index.html mission.html
. -
...
, -
-.
Starbuzz-: index.html
mission.html,
(, ,
, ).
, ,
<html>
.
.
- .
</html>
. - index.html
, starbuzz
<html>
.
.
.
</html>
mission.html
- www.starbuzzcoffee.com
c http.
,
http.
http:// www.starbuzzcoffee.com / index.html

.

.
/.
159
c
URL
,
, , h, t, t, p, ,
, . -
? -, -, ,
URL-,
.
, -, (URL)
, -
. , URL:
,

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

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

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

URL
http:///www.ea
,
rlsautos.com ,
.
160 4

HTTP-
HTTP . , -
() .
HTML-,
,
-.
HTTP - . , .
HTTP-:
/index.html?
HTTP-:
, .
,
www.starbuzzcoffee.com URL
,
, , URL , .
, : --.
HTTP. ,
. , ?
HTTP-:
/hardtond.html?
HTTP-: #404,
.
,
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

,
/
<html>
<html>
.
.
.

.
new .
. used .
</html>
</html>
/ inventory.html inventory.html

.
inventory.html

inventory.
html.
/cars/new/inventory.html
162 4

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

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

163
url

, ,

-

http://www.starbuzzcoffee. FTP,

com, index.html.

?
?

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

,

1
http://www.
starbuzzcoffee.com/drinks/ .
2 HTTP-:
/drinks/?
3 :
.
5 HTTP-:
, ,
index.html ?
.
starbuzz
<html>
.
.
.
</html>
drinks index.html
4
drinks
,
,
index.html.

: , , : , - URL-
URL http://www.mysite.com, ,
index.html? index.html ?
, -
: . default.htm, - , index.php. : . . ,
, - , -,
. . , -
( , default.htm , , , default.
l. . htm?
- Microsoft.) index.php? URL, -
, .
165

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

<html>
. .
. A
.
</html>
index.html
earls_autos
<html>
.
.
.
B
</html>
directions.html
cars
<html> <html>
. .
.
.
C .
.
</html> </html>
index.html index.html
new used
<html> <html>
. .
.
.
.
.
D
</html> </html>
inventory.html inventory.html
E
images images
minicooper.gif thunderbird.gif
element.gif mustang.gif
166 4

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

index.html ( Starbuzz) chapter4/starbuzz
. , : -
mission.html .
, , index.html
. .
<html>
<head>
body {
margin-left: 20%;
margin-right: 20%;
}
</style>
</head> 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>
<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 4

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

URL-. . URL-
, www.
, , file:///chapter4/starbuzz/
caffeineanonymous.com. : - index.html, , -
, index.html /chapter4/starbuzz/.
, -
URL- .
.
, -
: URL- ,
- URL , , URL-
, ? , , HTTP.
? : URL- HTTP
, .
: , , -
, . : - ?
, URL-
, - : , -
: , - , FTP-. ,
HTML- , -
( ). -
. HTTP ,
, .
URL-
, : URL, :
, http://www.mydomain.com:8000/index.html.
URL-, - :8000?
.
, , : :8000 , -
- URL HTTP.
, , , , ,
href : ,
<a>. (, -
). -
, - , (
80), - -
, URL-, ,
. (, 8000).
. -
: 80.
? file:// ,
, -. 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 4

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

index.html Starbuzz title

mission.html
Starbuzz. ,
. .
, .
.
,

.
?

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

id
<a>
id; ,
id.
. id
. ,
id <a>.
1 ,
. ,
.
2 , , -
, id -
.
, . ,
Starbuzz. :
<h2>, $1.85</h2>
<p> , , index.html
.</p>

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

index.html.
176 4

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

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

, .
-
,
1 .

.
2 <a> Starbuzz-

index.html , .
3 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
, ,
, :
,
wickedlysmart.com/buzz,
index.html. -
URL-, #
-
Starbuzz- .
index.html. href.
<a href="http://wickedlysmart.com/buzz/index.html#Coffee"
title=" "> </a>
Starbuzz-
index.html.
.

.
178 4

: , : - : .
? , (
title href? id. , id),
- . -
: - href id (- -
( - (
). , !).
), - , ,
. . : id,
Jedi Mindtrick, id
: . ?
, <a>?
: : -
: title ? ,
, -
, ,
: . (, id (AZ az),
(, ,
, ) top,
, ,

title <h1> ). ,
. ,
, <a>. Jedi Mindtrick,

, - , ,
. ,
title - , Jedi-Mindtrick,
top , -
, Jedi_Mindtrick, JediMindtrick . .
<a href=#top> </a>.

. : : ,
?
: id /index.html URL-
?
,
?
: -
, View Source
: , . http://wickedlysmart.com/buzz#Coffee?
( ) -
, id - : , , -
<em>, . , .
, ,
, .
URL- ,
id-.
: -
http://wickedlysmart.com/ <a>
: , - buzz/#Coffee, , ?
id <a> ? , -
index.html. , : . <a> -
: ! , , (-
, index.html. ),
: , ( HTML5), -
chai - : - - -
, , <p> <blockquote>!
Coffee C. , , <a>
? ? .
179

, RadWebDesign

? -
href URL- -

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

... ,
- ,
.
,
,
? ,
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 _blank.
, coffee,
target - . ,
? target ,
,
. _blank ,
.
182 4

target
, .
target ?
Head First: , Target, , , .

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

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

.
, -
. Target: .
; -
Head First: , , ,
, !
, , Head First: , Target!
183

-
, - .
-. index.html default.htm
, - , .
amazon.com starbuzzcoffee.com, ,
. - -
, .

- - -,
. www.
(FTP) , URL- href -
a. -
- -
,
.
URL-.
, Fetch Mac WS_FTP
id
Windows, -
. -
FTP, -
# ,
.
.
URL -
-
, -,
title,
--
a.
.
target,
URL- ,
. -
.
,
HTTP - ,
- -
- . .
le://
.
, !
, ,
- .
? ,
5.
184 4

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

.
URL-

A
http://www.earlsautos.com/
B
http://www.earlsautos.com/directions.html
C
http://www.earlsautos.com/cars/new/
D http://www.earlsautos.com/cars/used/inventory.html
E http://www.earlsautos.com/cars/new/images/minicooper.gif
185

title mission.html
Starbuzz Coffee. ,
. .
; ?
<html>
<head>
body {
margin-left: 20%;
margin-right: 20%;
border: 1px dotted gray;
}
</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>
-
title <p> , ,
.</p>
mission.html. <p>
a.
<a href="mission.html"
title=" Starbuzz> </a>
<br>
<a href="http://wickedlysmart.com/buzz"
title=" "> </a>.
</p>
</body>
</html>
5
. gif, jpg png

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

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

: , .
</p>
<h2> </h2>
<p>
<img src="../images/lightblue.jpg">
,
L-
,
HTM
.

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

,
,
http://http://wickedlysmart.com/lounge/:
1 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>
</html> </head>
<body>
<h1>Another
Page</h1>
...
</html>
<html>
<head>
<title>Head First Lounge
Elixirs</title>
</head>

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

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

gre
, en
.j p <html>

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

,
. -

189

3 green.jpg,
: lightblue.jpg.
green.jpg.
,
lig
htb
lu e
.j
,

<html>

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

My Playlist <title>Another
<html> Page</title>
</title>
pg
<head> <head> </head>
<body> <body>
<title>Head
<h1>Kickn Tunes <h1>Another
First Lounge </h1> Page</h1>
.
Elixirs</title> <p>BT - Satellite: ...
nice downbeat tune. </html>
</head>
</p>
<body> <p>
<h1>Our Elixirs</ ...
h1>
...
</html>

,
. -
4 lightblue.jpg, ,
: blue.jpg.
.
,
bl
ue.
j pg
.
,

<html>

<head> <html>

<title> <head>
My Playlist <title>Another
<html> Page</title>
</title>
<head> <head> </head>
<body> <body>
<title>Head
<h1>Kickn Tunes <h1>Another Page</
First Lounge </h1> h1>
Elixirs</title> <p>BT - Satellite: ...

nice downbeat tune. </html>
</head>
</p>
<body> <p>
<h1>Our ...
Elixirs</h1>
...
</html>

,
.
-

lightblue.jpg

.
190 5

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

,
- PNG PNG, GIF -

,
. , -
, . , , , .
, - , ,
, .
16 . .
PNG -
, . PNG GIF -
: PNG-8 PNG-24 PNG-32 ,
, 256.
. .
GIF
- PNG , - .
. , -
. GIF -
- ,
, .
, - -
-. - .
,
.
,
. , JPEG--
.

, JPEG-- .
,
GIF-
-
.
191
gif, jpeg png

?
, :

Head First: . -, , GIF: -

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

GIF: ,
256 ? .
. , GIF
. GIF: , -
8-
JPEG: !
, .
, , , -
, , JPEG: , -
, - , GIF?
256 . , GIF.
Head First: PNG, ? GIF: , ? -
- , -
.
PNG: , , ,
. , PNG: ,
JPEG, , GIF.
GIF. . , .
Head First: ? GIF: ?
, .
PNG: ;
PNG: , , -
. !
GIF: ! . GIF: ?
Head First: , - - PNG: ,
? ,
.
JPEG: -
. , Head First: , JPEG?
, JPEG: , - ;
. .
. JPEG-. .
PNG: , , - PNG: , ,
, , .
, ? JPEG
Head First: ,
.
,
Head First: -, JPEG - , , , , GIF PNG,
. GIF PNG, ? ;
PNG: , , JPEG, ; PNG,
, , , ,
. !
: PNG-8, PNG-24 PNG-32. PNG, JPEG, GIF: , , !!!
192 5

: -
. ,
.
JPEG PNG GIF
193
<img>
,
,

,
<img> ! JPEG, GIF...

?
-
: <img>.
.
, ,
HTML- . ,
... <img>.
, -
( , ,
, ):
img .
, ,
-
img.
.
<img src="images/drinks.gif">
src - ,
, img
-.
.
, ? . , -
. , ,
<img>, -
, .
, <img>.
-
<img>,
.
194 5

<img>:
src ;
URL-. HTML-,
URL.
URL- , ,
(, , ,
).
, URL-:
<img src="http://www.starbuzzcoffee.com/images/corporate/ceo.jpg">
, URL, - URL ,
-
, -
. ,
src. ,
.
( ).
. .
, , ?
? ,
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
CSS, , ,
. JPEG.
, .
. - : GIF PNG?
? : - - .
, ? , URL-,
? - ? : PNG ,
.
-? : - , -
, -
: , , . ,
- . Copy Image ,
. , Address ( ) GIF. PNG -
<img> - Copy Image Link ( ,
. - ), -
()? URL- . . GIF PNG,
URL
: , Open Image in . -, PNG
, New Window ( , GIF,
HTML-, ).
- . (
. , URL . 256), PNG-
, <img> - .
. View Source ( ,
HTML-. ) HTML-. GIF, JPEG -
<img>, , , - (,
. , , ), PNG, ,
HTML- , URL, .
- ,
. . GIF, -
-
, .
196 5

, , ,
, .
, , ,
, ( ,
), , ... ?
, , .
, .
, ,
alt <img>. :
<img src="http://wickedlysmart.com/hfhtmlcss/trivia/pencil.png"
alt=" 35 .">
,
alt
- - --
. , alt ,
.
, alt, -
. ,
, alt.
, .
, .
1 HTML- .
2 <img> , alt

35 .
3 pencil.png broken.png.
,
.
4 .
5 ,
. ?

, )
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-, width height.
: , -
, . - . -
: ,
, ? .
. , - ? width height,
,
HTML- . , , -
- : , , - -.
, , , ,
, . , - CSS,
, ( .

, , , -
,
, - ).
198 5

: myPod iPhone
iPod !
.
myPod,
iPod
.
, ?
HTML, -
iPod.
- HTML-
, .
. ,
,
; chapter5 -
.
mypod. . iPod !
. 628

chapter5. --

HTML-

myPod.
x.htm l.
<html>
inde
.
mypod .
.
</html>
index.html

iPod:
photos
.
seattle.jpg

: -
ypod,
photos - m
.
.
199
- ipod
index.html myPod
index.html, , myPod
. HTML-, :
.
CSS-
<html>
. ,
<head> -

<title>myPod</title> ,
,
.
!
body { background-color: #eaf3da;}
</style> CSS
</head>
<body> HTML- ,
<h1> myPod</h1> -
<p> : h1, h2 p.
, iPod ,
. ? ,
, iPod: iPod Classic
iPod Nano, iPod Shufe iPod Video,
. iPod ,
myPod. , ?
</p>
<h2>, </h2>
<p>
iPod ! .
628 .
</p>
</body>
</html>
-
. ,
.
200 5

, HTML--
, myPod . ,
, <img>
, .
seattle. video.jpg,
, -
. ,
.
<html>
<head> .
<title>myPod</title>
</style>
</head>
<body>
.
<h1> myPod</h1>
<p>
, iPod ,
. ? ,
. iPod ,
myPod. , ?
</p>
<h2>, </h2>
<p>
iPod ! .
628 .
</p>
<p> img

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

!
-
, , ,
. , ,
! , ,

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

.jpg,
, s e attle
.

l.
.htm
index
,

... .

-
,

,
,

?
.
800
1200 .
202 5

: , . , 800
? .
: - : -
. , ?
,
. , : : 96 , -
,
, . -
. 72 (ppi pixels per inch),
, ,
: width CSS-. CSS- 1/96
height, ? (96 ). ,
3 3 -
: , : 96 () 3 () = 288 288 .
, .
: , ?
: , 800 .
? : 800 .
, , ,
: , ( ), ,
. , . ,
. - . , , ,
( - , . ,
, ), , 100 200 .
- 800 1280 . -
, ,
, ,
- ,

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

, -
, -
, -

, .
.
203

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

,

800 -
. , 600 -
,
600
800
.
400

1 .
2 ( 600 400 ).
3 seattle_ video_med.jpg.
204 5

, ,

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

, seattle_video.jpg ,
Save for Web ( ).
, Save for Web ( )
File ().
-
pg , Save for Web
ttle_video.j
sea
( ) File ().
Elements.
Photoshop
207

()
Save for Web ( ),
; , .

,
. .

JP
EG
. GIF,
JPEG - .

-
: 1200
800 .

,

,
.
GIF;
JPEG.
208 5

, -
. (1)
. , : 600
600 400.
400 . c - Constrain Proportions (
JPEG. ), ,
... , 600,

400.
((2)

,

Apply (),
A

,

,

.

,
, .
Apply (),
;
.
209
c
,
(JPEG).
Medium ().
.
-

(1) , .

, EG ,
JP
GIF;
.

(2)
Medium ().
(3) .

OK

.
,
, Apply
() ,

.
210 5

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

mypod/photos.
, seattle_
video.jpg
seattle_video_med.jpg. ?
- Save (),

,
.
.
seattle_video.jpg,
!

:

-
.
Save for Web ( )?
: -
: JPEG - - width height -
. , <img>, -
. ?
Save for . ,
Web ( ), , - : width
, - . height, .
, , . , - ?
JPEG ,

.
.
( ,

: 30 - -
(1 JPEG Quality ()? ). width height
-
, -
1024

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

HTML- myPod
, Photoshop Elements.
, , - myPod index.html,
: seattle_video_med.jpg.
index.html, , .
<html>
<head>
HTML-.

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

.
,
,

.
212 5

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

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

,

, -
(
).
. , .
1 .
2 150 100 -
thumbnail.
3 src
<img> index.html.
4
.

, -
. ,
, ,
. ,
, .
thumbnails mypod. -
, , .
<html>
.
mypod .
.
</html>
index.html
photos thumbnails

thumbnails
mypod.
216 5

, , .
seattle_video_med.jpg .
150 100 , , -
EG,
600 400 . JP
150, ).
-
Photoshop Elements (
ium
Save
for Web 1 00 ) . Med

( ). p ply (

A

OK.
, OK -
, thumbnail. : - ,
photos, . , -
photos.
thumbnails

( ,
?
HTML, -
.
).

150 100?
.
, :
( -
100 150)
150 100 .
. ,
-
,
150 100 .
217

HTML- ,
HTML- , <img>
thumbnails, photos.
, photos/seattle_video_med.jpg, . , ,
photos thumbnails <img>.
<html>
<head>
</style>
</head>
<body>
<h1> myPod</h1>
<p>
, iPod ,
. ? ,
. 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 5

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

.
,
,

?

;
.
, <img> .
, . -
<img> , ,
. , HTML-
<img> ,
, -
.
,
, , .
. -
,
, , -
, .
, <img> .
219

.
. .

-
,

, ...

-

...

-
...
...

.

-
,

myPod.
1
, .
2 index.html
.
,
-.
220 5

html mypod
.
<html>
.
mypod .
.
</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,
eo-m ed.jpg .
seattle-vid
img alt.
, ..
, html
photos, , ,
photos.
221
<img> <a>
html
, , -
seattle_downtown.jpg.
seattle_downtown.html html .
, , . -
,
.
, -?
, -
HTML- .
index.html
html. ? href

HTML-
-, <img>

<a>, :
seattle-downtow
n.html,
a

ht
ml.
img.
img
seattle-downtown.jpg, <a href="html/seattle_downtown.html">
<img src="thumbnails/seattle_downtown.jpg"
alt="iPod - , ">
index.html.
</a>
img
a. a.
<img> <a>,
,
.
, ,
href.
222 5

- index.html
. <img>
index.html <a>. , href
<a>
html. , , -
.
index.html. , ,
HTML-, .
<html>
<head>
</style>
</head>
<body>
<h1> myPod</h1>
<p>
, iPod ,
. ? ,
. 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>
</p> a.
</body>
</html> href !
<a> index.html. -
, , myPod!

: <a> , - ,
. , .
?
: JPEG-
: Internet Explorer - HTML-? ,
, , ,
( Safari ). .
--
, , , : , -
, CSS. : <a href=photos/seattle_downtown.jpg> ... </a>.
, , , ,
-, , . -
, - ,
. , - .
224 5

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

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

, Elements
-
.

GIF. ,

PNG.

-

56.
PNG-8 2
.

-
PNG,
-
Transparency
().

.

?

Matte ().
-
-
,
.

Transparency (), ,
PNG
.
227

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

- .
,
.

-

( ).
-

, ,

Transparency ()
. ,

?
,

,

.
,
,
, .
.
Photoshop
Elements
.
? .
228 5

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

,

PNG-8.
-

Matte ().
Transparency
().
Matte () Matte ()
. , -
-. .

- -
-, ,

-
.

Other
(),
-

.
229
-f
, -?
CSS- index.html? -
- .
:
<style type="text/css"> .
</style>
? ,
-? ,

.

Photoshop Elements Matte (-
) Other (),

Color Picker ( ).

-
.

,
eaf3da
... .
230 5

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

.

-

.

,
.

Color Picker (
), OK,

.

-
. , -
. myPod , ,
-.

,
,

-

mypod.html.
231

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

G.
PN

my po d.p ng

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

<html>
-
<head>
<title>myPod</title> myPod.
,
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 5

!
, myPod--
PNG . -

-
.
d
myPo
.

.
.

myPod!
233

: , :
-? -?
: . - : , :
. - , - ,
, , , -
. . ,
. , CSS.
, , .
: , ,
: ? ?
: myPod: : ,
. -
, PNG, .

, , , ,
, .

.
, -
-,
. ,
, .
,
: ?
: .
( )
, . Matte ()
-.
Photoshop Elements ,
,
.
PNG GIF
: ?

: , ,
. myPod .
.
234 5

<img>, JPEG, PNG GIF ,

-. .
<img> - JPEG -
, HTML. .
HTML- - GIF PNG
- -
. , .
-- JPEG
, , -
-
. , .
,
. GIF PNG -
.
<img> . - -, ,
, , -,
. .
src - GIF PNG , -
. ,
, - , , ,
src, JPEG.
, URL-.
PNG
alt <img> , GIF, -
. - , GIF,
, - 256 .
, -
, PNG ,
. : PNG-24 ( -
), PNG-16 ( )
- - PNG-8 ( 256 ),
800 . .
, ,
, , -, - Photoshop Elements
. PNG-
GIF- Matte
Photoshop Elements () Save for Web (
, - ).
,
. - -
-- -.
. -, -
<img>, <a>, -
- . href <a>.
-

.
235

?
: .
,
.
JPEG PNG GIF
-
; PNG GIF.
? PNG
.
;
JPEG PNG;
, -
PNG.
- ; PNG GIF.
,
,
PNG.
-
.
(JPEG),
(GIF), ,
,
(PNG).
236 5

( ).
. .
, , ?
? ,
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, , . -
? , - , ?
, - ,
, ,
, .
Chrome -
Internet Explorer -
,

alt.
,
alt.
Safari Mac
alt -
.
Mac Firefox
Mac Opera - alt.

alt.
238 5

,
,
.

PNG-24 32 K 13
-
,
JPEG 21 K 8
-

- JPEG 6 K 3
-

JPEG? JPEG 3 K 2
JPEG 2 K 1

GIF 22 K 9
? .
, .
, . ,
, .
, -
. , , -
.
. , , PNG GIF
( ).
239

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

HTML-
wn.html.
<html> seattledownto
<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> -
</body> html, .
</html>

mypod.
mypod
photos thumbnails html

, seattle.jpg
index.html.
<h2>, </h2>
<p>
iPod !
. 628 .
</p>
<p>
<img src="photos/seattle.jpg" alt=" iPod , ">
</p>
240 5
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 6

: , HTML-
, .
, , , ,
. , ,
, ,
.
CSS, HTML ,
.
: , , HTML ,
,
?
: .
: ,
3 , .
: , ?
? HTML-?
: , ,
HTML5, ,
HTML , HTML5,
, ,
. ,
CSS.
-, HTML- -
. ,
-. ,
?
243
html
HTML
HTML 1.0-2.0 HTML 3 HTML 4

. ... -
, . Netscape , ,
HTML, - Microsoft
. . , , ( W3C).
, ,
, , ? HTML-,
HTML. .
-
-
-. ?
,
, HTML- -

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

?
-: -
Netscape, Internet , ... -
Explorer. . ( HTML 4.01).
1989 1991 1995 1998
244 6
7

HTML5-.
, HTML
,

.
HTML 4.01
4 01 XHTML 1.0
10 HTML5
, . HTML 4.01 - -
1999 , , -
. ,
HTML - XML. ,
. HTML HTML5.
HTML, ,
4.01
, - -
-
XHTML 1.0. HTML 4.01,
4.0; -
,
. XHTML -
,
, -
,
HTML (-

- -.
,
), HTML 4.01
, ,
,
- -, HTML5 -
, (
XHTML. .
,

) - , HTML
-, -
-. XML -
,
,
HTML 4.01. -
,
-
-
HTML, XHTML.
HTML5. ,

,
-,
,
,
HTML5
( -
.
)
1999 2001 2009 2012 ????

? ,
?
, .
245

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

HTML . - Head First: ?
, HTML? -,
- , .
. : ,
Head First: ? , ,
. .
HTML5 ,
: , , HTML -
, - . , HTML5 -
, - -
? ,
.
, .
Head First: , -
Head First: ? ? ,
, , ? HTML-?
: , : ! , -
, , ,
. . -
, , -
, . .
: , ,
HTML-, , , ,
HTML-, .
HTML- ,
-. , Head First: ,
, HTML ?
.
: -
Head First: ? -
HTML DOCTYPE.
, .
,
: . , ,
HTML . HTML-. , -
, , - !
246 6

HTML

, -
HTML 4.01 XHTML 1.1.
DOCTYPE, HTML- ,
, HTML .
-
DOCTYPE.

.
,
, -
-
, ,
, .
- html -

,
,
(- HTML 4.01 HTML-
HTML 4.01 -

) -

-
- . .
.
,

.
.

<!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">
URL-,
XHTML -
. XHTML 1.1.
247

HTML5,
, , , .
HTML 4.01, :
,
-
-
, -
HTML 4.01

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

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

! .

: , :
? ? , ?
,
: , : , -
HTML-, - , ,
, , . HTML,
, . HTML- HTML, .
. , ,
. - (World Wide Web Consortium, -
. W3C),

.
250 6

, ,
.
DOCTYPE

HTML5.

, DOCTYPE HTML.

DOCTYPE.
loun ge.html.

<!doctype html> DOCTYPE, doctype.
.
<html>
<head>
</head>
<body>
<p>
,
<a href="beverages/elixir.html"></a>
, ,
<em> -</em>.

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

DOCTYPE
lounge.html chapter6/lounge
.
.
,

,

CT YP E,
, DO
,

ML5.
HT
DOCTYPE directions.html elixir.html. -

. lounge.html,
( ).
252 6

HTML5
, .
HTML5?
Head First: HTML5, Head First: .

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

,
HTML.
: , .

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

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

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

HTML.
-
(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,
(1) (2),
DOCTYPE HTML5.
.
... - ?
- ?
Check ( ), .
256 6

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

.
,
.
,
.
W3C
- .
! . ,
alt
- -
W3C img.
,
,
, -
.

,
.

257
html

, .
alt <img> HTML5. , !
lounge.html, , ,
.
<!doctype html>
<html>
<head>
</head>
<body>
<img src="drinks.gif" alt=""> alt.
<p> img.
,
, ,
<em> -</em>.

( ).
</p>
<h2></h2>
<p>
Webville.
, ,
!
</p>
</body>
</html>
, HTML5 alt?
258 6

...
! ; , .
. , . :
-
; -

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

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

,
,
,

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

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

<meta charset="utf-8">
.
.
utf-8
ML,
HT Unicode ( ). utf-8
.
meta , -.

: DOCTYPES, <meta>...
, -? ,
,
: DOCTYPE . ASCII, -
<meta> , -
. . Unicode
: 98 % , -, http://www.w3.org/International/O-charset.ru.php.
. c
HTML- DOCTYPE <meta> . : <meta>, -
, DOCTYPE <meta> HTML- : <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 1?
. , utf-8 (
UTF-8) Unicode. u : . , ,
utf-8 Unicode. Unicode , - , , <meta>.
261
meta
( ), <meta>
<meta> <head> (, <head>
). <meta> HTML-.
lounge.html:
meta.
<!doctype html>
head title.
<html>
<head>
head.
</head>
<body>
<img src="drinks.gif" alt="">
<p>
,
, ,
<em> -</em>.

( ).
</p>
<h2></h2>
<p>
Webville.
, ,
!
</p>
</body>
</html>
? ? -,
lounge.html, .
, .
.
262 6

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

HTML5.
!

-

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

HTML5.
-
,
-
. .
263

: , , . , -
HTML5. ? , , ,
- .
: Using experimental feature: HTML5 Conformance
Checker ( : , HTML5.
HTML5) ,
HTML-, HTML5, : - HTML,
( , HTML5?
- ), -
, : HTML, HTML5.
100%. , HTML5 - ( ),
, , -, HTML5
HTML . HTML, HTML5-.
HTML,
: ? , HTML5.
, . HTML5, , -
, ,
: HTML- HTML-,
, HTML. .
? -
, , : HTML5 HTML 4.01?
. -
, - : HTML5 . -,
, , HTML5 (-
DOCTYPE, ( , <video>), - ,
alt) HTML-. ( ).
-, HTML5 ,
: alt? - -
HTML. - -, -
: . -, (
- - (, ,
- ), -.
), alt ( ) -, ,
, , Head
. -, , First HTML5 Programming (
, HTML5) (OReilly).
, alt, , HTML5 ,
-. HTML. , ,
-
: , , HTML5, , -?
? , ? ,

: , , ,
HTML5, , .
264 6

. <meta> directions.html elixir.html.

. ? ,
, .

, .
. ,
HTML5 ( . 263),
DOCTYPE. , , ,
. -
.
.
<!doctype html> DOCTYPE!

<html>
<head>
</head>
<body>
<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 6

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 6

HTML

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

: bgcolor
</head>

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

<p>

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

<ul>
-
<li>: 15 C. , /li /p.
!
<li>: 16 C. ,
</ul>
. -
<p align=right> ,
! .
<center><font size="small">
Lou Diner, Webville 50 .
</font></center>
</body> -
</html> font
- size.
.

-
-
.
269
html

HTML-.
,
, .
,
,
.
,

,
( ,

<html> ).
<head>
,
</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 6

, HTML-
,
,
, .

CSS.
, ?
HTML 5 HTML. -
utf-8 HTML-,
(W3C) -
charset <meta> .
, .
, HTML. alt
<img>.
(DOCTYPE) -
, , HTML W3C -
. , -
.
HTML ,
, , ,
- . HTML ,
.
<meta> <head> -
-
-,
, -
.

charset <meta> , - , CSS
. .
271

.

HTML-
- .
,
utf-9 (
doctype . ,
!)
-
.
<html> utf-8. .
<head>
head -
</head>
<body> <title. /h1.
<img src="chamberofcommerce.gif"> alt.
<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 6

. ,
HTML5 ( -
241), DOCTYPE. , ,
, .
. -
.
<!doctype html> DOCTYPE!

<html>
<head>
</head>
<body>
<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 7
c css
277
css
, -
Webville
-?
: , $1000.
, $1000,
48 . ...
...
!
,
... bathroom {
tile: 1in white;
bedroom { drapes: pink;
drapes: blue; }
carpet: wool shag;
}
, Webville, -
CSS. ,
: CSS -
(, bedroom), -
(, drapes carpet)
(, white,
1 1in).
278 7
c css
CSS HTML
, , , CSS
, HTML. , ,
, .
<p> ? ; , ,
, ,
background-color. :
,
,
,
. , -

, CSS - ,
p.
. p.

,
p { .
background-color: red;
}

.

p
-
{ .
}.

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

,
p ... 1
.
... ,
279
css html

: <p> ? , ,
?
: CSS, ,
, CSS :
,
.
, .

: , ?
, <em>
. ,
: , -
<em> , -
, , ,

. - ,
. , , ?
CSS. -.
,
OReillys CSS Pocket Reference.
: , -
, HTML. ,
HTML,
?
: -
CSS.
: CSS
, HTML. CSS-,
HTML-.
, CSS
.
, .
280 7
c css
CSS HTML
CSS. ,

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

? , Head First. , HTML-

. , -
, - .
HTML ( ?).
,
.
<!doctype html>
<html>
<head>
style.
, :
<style>
CSS HTML-
,
</style> style head.
</head> CSS
<body> .
<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">

<style> color (, ,
font-color
text-color, ).
. p {
color: maroon;
}

-
,

</style>
.
p, </head>
- <body>
<h1>
Head First</h1> p

<p>
. <img src="images/drinks.gif" alt=""/>
</p>
HTML.
<p>
,
, ,
<em> -</em>.

( ).
</p>
<h2></h2>
<p>
Webville.
, ,
!
</p>
</body>
</html>
282 7
c css

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

,
: -
-
,

-
p.
.
,

.
...

, <p> -
, ?
?
283

?
.
. ,
,
?
, ...
, :

, -
h1
h1 {

color: gray; -serif
} sans

.
.
h2 {
color: gray;
}
,
p { h2
color: maroon; .
}
,
:

,

-

h1, h2 {
font-family: sans-serif; h1, h2.
color: gray; ,
}
p {
color: maroon;
}
CSS- lounge.
html . -
,
<h1>, <h2>.

:

.
sans-serif
284 7
c css

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

.
,
h1, h2 CSS, -
, :
,

h1, h2 {
color: gray;
h2 .
border-bottom: 1px solid black; h1
}
p {
color: maroon;
}
...
...

.
,
.
,
<h1>, <h2>?
-
? , ...
285

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


color: gray;
} .
h1 h2
h1 {

border-bottom: 1px solid black; ,

}
h1:
.
p {
color: maroon;
}

CSS- . ,

, -
.

,
.
286 7
c css

: , - : ?
?
? ,
, ?
: . -
: - ,
, . : . - .
- - - -
, , : ,
. , . -
, , ,
<h1> <h2>, , . , -
- . ,
, text-decoration,
, , underline.
. : ,
? .

, , :

.
,
h1 {
;
color: gray;
.
h1
}
, :
. h1 h2.
h1, h2 {
color: gray;
}
, CSS , ,
. , ,
CSS. , HTML-,
. , ,
HTML- , ?
, HTML , .
287

. html
, HTML- head body

3?
. -, title p
. HTML- (
), , . - q
, . .
html
title
img
h1
body p
a p p h2
meta
head a style
em
288 7
c css
HTML
<!doctype html>
<html> Head First.
<head>
<style>
h1, h2 {
color: gray;
}
h1 {
}
p {
color: maroon;
}
</style>
</head>
<body>
<p>
<img src="images/drinks.gif" alt=""/>
</p>
<p>
,
, ,
<em> -</em>.

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

,
,
, body,
. h1 -
head
: html -
.
h1 { head
body
}
h1 p p h2 p
img a em a
-
h1
, .
, h1, h2:
html
h1, h2 { body
}
h1 p p h2 p

img a em a

h1 h2.

p,
:
html
p { body
}
h1 p p h2 p
-
img a em a
p .
290 7
c css
- , :
p, h2 {
}
html
body
h1 p p h2 p
img a em a
p, em {
}
html
body
h1 p p h2 p
img a em a
291
css

RadWebDe-
sign 4, -
RobotsRU. CorrectWebDesign
RobotsRU ,
,
. , -
RadWebDesign HTML
CSS RobotsRU, ,
, ,
.
RobotsRU
, : CorrectWebDesign
RobotsRU
: , -
, -
, . -
,
CorrectWebDesign ,
, . -
! , , -
, RadWebDesign
.
, .
CorrectWebDesign
, ?
RadWebDesign , .

.
RadWebDesign
--
? -
?
292 7
c css
, ,

?

, lounge.html,
elixir.html directions.html?
, .
style ,
? . ,
-
. , .
1 lounge.html -
lounge.css.
2
lounge.html.
3 -
elixir.html directions.html.
4 .
293
css-
lounge.css
, lounge.css, -
Head First.

lounge.
lounge.css.
e
<html>
css loung
( ).
.
.
.
</html>
lounge.html
lounge -
h1, h2 {
}
fon
col CSS-
.
p {
lounge.css
green.jpg
g
<html> <html>
. .
about
.
.
</html> beverages .
.
</html> images blue.jpg
drinks.gif
lounge.css (
lounge.html) CSS-. ,
lounge.html.
, <style> </style>
, lounge.css CSS-
HTML.
h1, h2 {
color: gray;
} lounge.css
h1 { .
border-bottom: 1px solid black; :
} style!
p {
color: maroon;
}
294 7
c css
lounge.html CSS-
, -
. , HTML- <link>.
, HTML-:
HTML-,
<!doctype html>
<html>
<head>
<meta charset="utf-8"> .
<link type="text/css" rel="stylesheet" href="lounge.css" />
<style>
</style>

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

. HTML-
</p> .
</body>
</html>
HTML
<link>, :
text/css.
- -

, - -
link, CSS. HTML5

href (

-
(
-

), ,
.
-. URL-
).
<link type="text/css" rel="stylesheet" href="lounge.css"/>
rel HTML- link

, . .

, stylesheet.
.
295

elixir.html directions.html
elixir.html directions.html
, lounge.html. ,
, elixir.html beverages,
directions.html about, -
../lounge.css.
, , , <link> :
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="../lounge.css"/>
</head>
<body>
.
.
elixir.html.
.
</body> link.
</html>
<!DOCTYPE html>
<html>
<head>
<title> Head First Lo</title>
</head>
<body>
.
.
. directions.html.
link
</body> .
</html>
296 7
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 7
c css

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

san s-s erif .

.
-
serif,

. -

.
299

, ( ),
, sans-serif.
, . ,
, , font-family,
sans-serif. .
h1, h2 {
color: gray;
}
h1 {
}
p {
color: maroon; lounge.css font-
} family .
,
?
?
, , -
<blockquote>,
?
sans-serif
?
300 7
c css

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

p,
font-family

.
p
-
,

.
, <p>,
,
,
, . -
<a> <em> <p>, .
. , ,
, . ,
, CSS- -
... .
-
HTML-, , .

,

p,

. .
html

, a, em

body a
p.
-
h1 p p h2 p
img -
, p.
img a em a

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

dy.
bo

html
ily
fam
body
-
h1 p p h2 p font-family.

.
img a em a
,

. , !
font-family body,
.
?
lounge.css
<body>. font-family
, .
.

body {
-

} body. serif.
sans-
font-family
h1, h2 {
color: gray;
}
font-
h1 {
family h1, h2,
} p.
p {
color: maroon;
}
302 7
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.
-family -
font
html body,
,

,
body bo dy

-serif.
h1 p p h2 p sans
img a em a
,

e
m

serif?

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

p {
body,
color: maroon;
font-family, -
}

serif
em {
em.
font-family: serif;
}
304 7
c css
CSS- -
<em> serif font-
family lounge.html.
, -
-,
em,
serif.
-
-
, ,
,
( em).

: , , ( : -
<em>, ) ( , -
), - ,
? . , , ?
, , ?
: CSS , <body> : . CSS-
. , , , , -
<body> - /* */. :
, - . /*
<em>, , -
. - , . - */
, , -
. , , .
. CSS- -
: , CSS- - , ,
, ? : :
, -
: , ,
/* -
, -
CSS Pocket Reference - ?
OReilly. ,
: . p { color: blue; } */
, , , - , -
, - , ,
, - . CSS !
305

,
,
,

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

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

...
,
.
306 7
c css
greentea
elixir.html .
. , ,
<p> greentea. :
<!DOCTYPE html>
<html>
<head>
</head> , -
<body>
class
<h1> </h1>
<h2> </h2> , -
<p class="greentea"> , 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.greentea { -

color: green; ,
- } greentea.

p. p.greentea

gre
entea.
, <p>, , -
. , , class <p>,
. -
. : lounge.css
p.greentea.
body {
}
h1, h2 {
color: gray;
}
h1 {
}
p {
color: maroon;
}
p.greentea {
color: green;
}
308 7
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;
} blockquote, -
greentea.
HTML- -

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

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

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

, (.)
,

.
310 7
c css
!
. ...
-
.
.

?
,
.
-
. , <p>,
greentea,
-
raspberry blueberry. ,
-
: class

<p class="greentea raspberry blueberry">

.

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

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

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

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

. p.greentea -
p.blueberry { color: purple; } .
312 7
c css
?
, greentea,
: p.greentea , -
. : greentea, raspberry
blueberry. , p.greentea, p.raspberry p.blueberry
p . ?
CSS-. ,
,
. , CSS- (
). p.blueberry.
elixir.html
, :
.
?
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 7
c css
CSS HTML
,
,
1990- -
.
-
. , ?
, -
. ?
? -
. -
, .
, .
-; ,
.
.
,
-
, .
... ,
, .
. , -
.
--! , ,
<style>? ,
, -
.
, ... ?!
315

?
, <body> ,
. .
, <body>. -
CSS-, .
body
h1 p h2 p h2 blockquote
a em a img p p
em em a
CSS-. ,
body { n; ,
color: gree

}
-
p { .
k;
color: blac
}
316 7
c css
CSS-
, , -
, CSS-,
. - .

.
. .
,
s.

style.cs .
<style>
body {
background-color: white
h1, {
gray;
}
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 7
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

gn
text-ali
top
-

-

.
,
.

letter-s
color pacing

. .
background-color
color -
-

. .

- .
,
.
tyle
-s
border font
ght
t-wei
fon

-
-
-
left .
, ,
. .
, style
,
list- .

. padding ,
,
padding.

.
.
. ge
li ma

ne -i
-h
ei font- und
size ro
gh
t ckg
ba
CSS
.

,
,

CSS.
320 7
c css
,

. ,

.
CSS , . ,
. <body>,
-

.
HTML-.
-

, -
.
,
, - .
.
,
class.
.

, , .,
. .
, , -
. ._.
, - , -
. . -
class .
HTML <style>. CSS- -
HTML- , W3C, -
http://jigsaw.w3.org/
. css-validator.
<link> -
.
321

. . html
head body
,
HTML 3?
title p
.
:
q
html
head body
meta title style h1 p p h2 p
img a em a
322 7
c css
p, h2 {
}
html
body
h1 p p h2 p
img a em a
p, em {
}
html
body
h1 p p h2 p
img a em a
323

: raspberry blueberry,

elixir.html,
,
.
raspberry blue, blueberry purple.
body {
}
h1, h2 {
color: gray;
}
h1 {
}
p {
color: maroon;
}
p.greentea {
color: green;
}
p.raspberry {
color: blue;
}
p.blueberry {
color: purple;
}
324 7
c css
<!doctype html>
<html>
<head>
</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 { n;
color: gree
, <body> ,
- }
.
. - p { k;
color: blac
,
<body>. CSS-, - }
. :

blockquo
, te CSS
-
h1

color, bo
h2 - dy.
-
body p
,
blockquote

!
body.
.
h1 p h2 p h2 blockquote
a em a img p p
em -
em em a
h2,
,
, -
body. -
a - -

p, -
em, em,

p bo dy.

body. ,

, ,
em dy.
bo
body.
p,
img
body. -

.

326 7
c css
.
CSS-,
.

. ?
e
HTML! styl

CSS-
CSS.
M L,
HT
<style>

body {
.
background-color: white

}.
.
h1, {
gray; .
}

.

h2, p {
color:
}
<em> {
HTML.
font-style: italic;
} em.
</style> CSS /style

.
327

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

class

HTML-:
.

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

CSS- ,

p.greentea .
CSS-
. greentea
? . .
, p.raspberry
. -
,
. . CSS-
?

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

.
? -

-

reentea.
p.g
8
CSS .
CSS , , -
. , ,
,
.
, . -
. , -
, , ,
. ,
, .

Andale
Mono
Arial
Arial Bla
CSS- , ck
. CSS , , Comic Sa
ns
, , Courier
. New
, Georgia
. font-family, - Impact
.
Times New
Roman
, ,
Trebuchet
, . MS
Verdana
.
font-family.
. CSS -
, ,
. ,

, . -
, , ,
.
body { .
font-family: Verdana, Geneva, Arial, sans-serif;
}
font-size.
- -
. CSS
, . body 14px
, , ,
,
.
h1 21px p 14px h2 17px
body {
font-size: 14px;
}
330 8

color.
. Aqua Black Blue Fuchsia
- (web-safe) ,
Gray Green Lime Maroon
,
.
Navy Olive Purple Red
body {
Silver Teal White Yellow
color: silver;
}
font-weight.
, lighter
, , , ?
? normal
. , font-weight.
bold
body {
font-weight: bold;
} bolder
text-decoration.
none
text-decoration, -
, .
underline
body {
text-decoration: underline; overline
}
line-through
blink
331

, ?
font-family
sans-serif. -
, ,
.
...
,
. -
: sans-serif,
serif, monospace, cursive fantasy. - sans-serif
,
.
Verdana Arial Black
Trebuchet MS
serif
Arial
.

Geneva
.

serif .
sans-serif

.
,
serif.
Times
Sans-serif

Times New Roman .
-
Georgia . ,
, -
.
,
, -
. , ,
,

332 8

monospace
Courier monospace ,

Courier New . , i
,
Andale Mono m.

.
cursive
,
.

.

: , -
serif, ,
,
cursive
sans-serif, -
. ,
Comic Sans
monospace, , -
.
cursive fantasy -
.
Apple Chancery
fantasy

fantasy.

.
Last NinjA
Impact
333

,
. ,
, , -
. ,
. ,
, .
Bainbridg
e monospace
fantasy
Cartoon
Palomino
Angel cursive
sans-serif
Iceland
Messenger
Savanna serif
h
Crush
Nautica
Quarter
334 8

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

.
body {
}
font-family
,

. , serif,

. . osp ace.
sans-serif, cursive mon

,
.
font-family
, , font-family:
Geneva
, Verdana ,
, ,
Verdana
Arial.
, Geneva. ,

, ,
,

sans-serif,
( body.
body.
body).
.
body {
}

.

font-family - , . .
. , ,

sans-serif.
, , , ,
,
, ,

. ,

- .
...
335

, , , -

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

,
,

if.
ser
,
,
.
,

.
,
.

,
,

.
336 8

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

body, sans-serif.
.
.
journal.html, chapter8/journal.
<link>, journal.css,
.
,
journal.html
meta.
HTML5, DOCTYPE
<!doctype html>
<html>
<head>
<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.

, font-family, .
, , ,
: , - . .
, , .
Courier New? ,
: sans-serif serif, - : , -
: , - , ? Serif sans-serif?
, : font- .
family: "Courier New", Courier; : .
: serif sans-serif ? ,
: , font-family - sans-
: Serif sans-serif - serif. -
? . serif
- serif sans-serif -
: . , , - serif sans-serif, . ,
. , .
338 8

,
? Andale Mono
, - Arial
. ,
. Arial Black

: , Mac OS, Comic Sans
, - ,
. Courier New
,
? , - Georgia
,
, Windows, Impact
, , - Mac OS.
. Times New Roman
, , , ,
. Trebuchet MS
, Verdana
. , ,
font-family,
, Geneva
Windows, Mac (
, , Courier
Linux), ,
. Helvetica
Macintosh.
: Times
(3) ,
(1) ,
,

Arial
Verdana, ...
. Windows, Mac,
...
(4)
,
(2) ,
Gen eva ,

,
,

Mac OS. sans-serif.
...
339
-
,
,
,
,
,
Emblema One, ,
. , ,

,
?
,
-
, , ,
.

,
,
-.
-
CSS @font-face.

,
.
,
340 8

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

, -
.
abcdefg
hijklmn
-
opqrstuv
wxyzABCD

EFGHIJKL
,
crazyfont.woff
-

-. www.starbuzzcoffee.com

, -

, -
.woff,
, -
web open

font format.
HTML CSS,
.
1 -,
HTML-, .
index.html.
abcdefg
hijklmn
opqrstuv
wxyzABCD
EFGHIJKL
crazyfont.woff
.
<html> www.starbuzzcoffee.com
.
.
</html>
, . index.html
341
-
2 -,
.
crazyfont.woff.
-,
, , abcdefg
. hijklmn
opqrstuv
, wxyzABCD
EFGHIJKL
crazyfont
crazyfont.woff
abcdefg www.starbuzzcoffee.com
hijklmn
opqrstuv
wxyzABCD
EFGHIJKL
, . crazyfont.woff
3 , ,
.
, !
! - Hello
abcdefg
hijklmn
- opqrstuv
World! wxyzABCD
! EFGHIJKL
crazyfont.woff
: WOFF, Web : , , - : -,
Open Font Format? -, - ,

: WOFF ?

-- ?
, , - : , :

. (

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

- ,
WOFF, , ,
, -
- -
-,
. ,
-
, -
- , , (
. Google . ).
342 8

-
, ? -
, - CSS- @font-face.
:
, , ,
, ,
( ).
Emblema One, .
: , ,
-: CSS- @font-face -
. : ,
, ( ),
( ).
( ):
TrueType: .ttf TrueType OpenType ;

pe).
OpenType TrueType ( , TrueTy
pe.
OpenType: .otf Embedded OpenType (EOT) OpenTy
(Micros oft) -
Internet Explorer.
Embedded OpenType: .eot
Scalable Vector Graphics SVG
, SVG
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-family

-

@font-face. @font-face
ily.
font-fam
@font-face { ,

, a One.
, Emblem

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");
}
scr , -
. scr ,
. -
.woff .ttf, .
@font-face , URL- scr.

, URL- scr, ,
. , font-
family, Emblema One. ,
.
: ,
: font-family CSS !
@font-face, -
, , font-family.
<h1> Emblema One. ,
<h1>, :
,

h1 {
,
@font-face!
,
font-family: "Emblema One", sans-serif;
,
} , -

sans-serif
.
: !
! . - -
, ,
344 8

journal.html, -
, <h1>
Emblema One. -
CSS-!

h1

One.
Emblema
TrueType
! WOFF
Internet Explorer 8
.

Internet Explorer,
--
Embedded OpenType.

: @font-face CSS- , -
, ? . @media
.
: C @font-face CSS-,
, . : , - ;
, @font-face - -
- , ?
font-family. @
, CSS-. : . -, -
- , -
: CSS-, -
? . ,
. ,
: . -
, , , ,
@import, -
CSS- ( <link> HTML-), .
@media, CSS-, ( . 347)
,
345

,

, , -
, ,
, . -,
? . -
, .
, ,
. .
px , 5.
, ,
.

font-size: 14px; CSS

px.
px
.
14

.
.
font-size
14
body.
hip
body { ,
font-size: 14px;
} 14 .
% , ,
-
. ,
font-size: 150%;

body ,

150%.
, -
150 % body {
. ? font-size: 14px;
, font-size - }
, h1 {
- font-size: 150%;
}
. ,
...
346 8

em , -
em. em -
. , :
,
font-size: 1.2em; em!

1,2.
, -

<h2>. <h2>
1,2 -
, 1,2 16,8,
, 14px, 17px.
17.
body {
font-size: 14px;
body 14px h2

}
h1 { h1

font-size: 150%; . 1.2em.
}
h2 {
font-size: 1.2em;
} h1 21px p 14px h2 17px

: ,
@font-face? !
: . @font-face : , -
, , -. ?
, -
,
: ! FontSquirrel (http://www. fontsquirrel.com/)

,
, .
@font-face ,
-
.
.
, Google Web Fonts (http://www.
, google.com/webfonts) Google -
-; CSS
, ;
- Google,
.
CSS.
- -

. 347

: -
.
xx-small, x-small, small, medium, large,
x-large xx-large,
.
,
xx-small
,
. 20 % x-small
, small 12 small
. ,
medium
.
large
body {
}
font-size: small;
x-large

12

body xx-large
.
, ?
, .
? ,
, .
1 ( small medium) -
body.
, .
2
body, , em ( , ,
, ).
, ? -
body, -,
body. , -
? body small,
medium,
, body. ,
.
348 8

, . -, -
<body>.
, :
Internet
body { font-size: small; }
h1 { font-size: 150%; }
! Explorer -
-
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

-
.
.

120 %
body large h2 dy .
bo
lar ge.
. 120 %

h1 150% body p large h2 120% body
body , -
. ,
body. ,
, . ,
, . -
.
349

-
- .
journal.css, chapter8/journal.
, -
, . ,
CSS-.
@font-face {
src: url("http://wickedlysmart.com/hfhtmlcss/chapter8/journal/EmblemaOne-
Regular.woff"),
url("http://wickedlysmart.com/hfhtmlcss/chapter8/journal/EmblemaOne-
Regular.ttf");
}
body {
font-size: small; ,
} small body.
h1 { .
font-size: 220%;

}

h2 { body.
h1
font-size: 130%; ,
170 %
} .

h2

,
h1: 130 %

body
.

,
<h1> <h2> em, ?
: <h1> 2.2em, <h2> 1.3em.
350 8

.
!
, h1
,

. ...
. ,
h2,

( .

.
)
.

,
16px,

.
small
(,
,
12px)
.
h2

,

h1.
351

: , . : , -
<body>, - , - body
, em %?
. ? font-size body 90%,
? 90 % ?
: - .
<body>, : , .
: em %? , body ,
. . 90 %, 90 %
? , -
, - : , , , ,
. 16 .
body, , -
. . ,
: - ,
, em,
, % em.
,
?
CSS-. :, -
, : ,
.
. , , -
: , . : . .
,
,
, , ?
.
?
- : .
,

: , , - : -
. ,
. ,
-
,
body , . ,
. 16 . -:
, -
: : -
, ? . .
,
.
: , , .
, <h1>
: , - 200 % , ,
body, <h2> -
. 150 %, <h3> 120 %, <h4> 100 %, <h5> , -
, 90 % <h6> 60 %. , .
(- <h4> CSS-,
Internet Explorer) , -
- body, <h5> <h6> . .
352 8

Starbuzz

font-weight ,
. , font-weight:
,
normal;
.
, font-weight
bold:
font-weight: bold;
.
, -

,
:
Starbuzz
font-weight: normal;
font-weight:
font-weight bold;
: bolder lighter.

. -
,
.

font-weight 100 900 ( 100),
-
.

CSS-,
bold, ,
normal. CSS- .
.
353

normal.
, CSS- , -
, font-weight <h1> <h2> normal:
@font-face {
... @font-face

} .
body {
font-size: small;
}
h1, {
font-size: 220%;
}
h2 {
font-size: 130%;
}
t
font-weigh

h2.
normal

.
h2

.
-
,
,

130 %

.
354 8

, ?

. , :

.
,

CSS
, font-style:
.

,
font-style: italic; italic
italics.
-
, - ,

. - ,
,
,

, -
.
. ,
:
,

,
,
.
, -
.
font-style, :
,
font-style: oblique;

, -
-

, . ,

, ( ,
. ,

. ).
355

font-
style,
. Burma
Shave, <blockquote>? -
,
.
<blockquote> font-
style italic:
blockquote {
font-style: italic;
}
CSS- journal.css,
. -
, Burma Shave .

: <blockquote>
<p>, <blockquote>.
?
: , -
,
<p> <blockquote>. <p>, <blockquote>,
.
:
<blockquote> <em>?
<blockquote> ?
: , <em>
, .
<blockquote>, ,
Burma Shave .
<blockquote> . - ,
,
<em>
.
,
<blockquote>. , <em> ,
,
.
356 8

.
. ,

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

,
-
CSS.
357
-
?
,
, : , ,
. ?
.
-
,
, .

0 100
100 % 100 % , . -
, 100 % ,
100 % 100 % ,
. ,

.
100 %
, , -
. ,
, ,
.
60 % , ,
60 % 60 % , -
? , -
? ,
,
, -
.
60 %
358 8

-
,
0 % .
, , 80 % -
40 % , -
. , .
, - 80 % 0 %
,
.
80 %
40 % ,
40 %
.
, 0 % ,
? ,
, 0 % 0 %
.
0 %
359

?

,
?
, ,
-
, CSS -

150 .
-
,
-
-

.
,
-
, 16 .
-
HTML, -
,
#fc1257. , -
, ,
, -
, -
-
, .
360 8

?
...

CSS . 16

, - ,

, 150
-
.
, , - .
, ,
. , -
.
:
, , - Aqua Black
. .
Blue Fuchsia

CSS
. 16 150 - Gray Green
, . ,
body.
CSS :
Lime Maroon
body {
background-color: silver; Navy Olive
}
Purple Red

,
body.
background-color. .
Silver Teal
, , -
. ,
, White Yellow
silver, Silver SILVER, .
16 , CSS. ,
,
.
361
rgb-
,
, 80 % 0 %
, ,
. ,
, . ,
80 % , 40 % 0 % . :
40 %
body {
background-color: rgb(80%, 40%, 0%);
}

RGB -
, ,

% .
red, green blue.
,
0 255. , 80 % , 40 % - ?
0 % 204 , 102 80 % 255 204,
0 .
40 % 255 102
,
: 0 % 255 0.
body {
background-color: rgb(204, 102, 0);
}
RGB. , ,

% .

: - -
RGB-? ,
? 0 255 ( , , .
).
: , : , -
0 255. : , - rgb(100, 50, 200),
, RGB , ?
. CSS. ,
, #00fc9. : . ,
255 rgb(100, 50, 200),
, - : RGB-
. , -
, , , .
362 8

. :
,
. , , -
. :
,

- ,

#. #cc6600 .

,
f c
?
!
, , -
, -
.
, -
:
0 255 ( ?). ,
,
99, ?
, ,
255
( A F). .
, -
, , -

.
363

, ,
( 0 9), ( 0 F).
.
A
B
5 10
4 6 9 11 C -
3 12
D
2
13
7 8 E 0 9.
1 14 9, -
F .
0 15
, , B, , -
11. BB, E1 FF? -
, , .

.
, ,
. .

,
.
# CC 66 00

CC 66 00
364 8

.
, ,
0 255. :

CC .
-
12

,

16.
12 * 16 = 192
-
, 204
, -

. -
192 + 12 = 204
CC.

.
.
:
66,
-
CC 66 00 : (6 * 16) + 6 = 102.
00,
204 102 0
: (0 * 16) + 0 = 0.

, !
, , .
, , .
c .
365
-

80 % 0 %
. , -
, , 80 % , 40 %
0 % . CSS : 40 %
body {
background-color: rgb(80%, 40%, 0%);
} ,
.
body {
,
background-color: rgb(204, 102, 0);
,

}
0 255.

body {
background-color: #cc6600;
}
.

, Photoshop Elements. , -
-, RGB
, . Photoshop Elements
( ).

,

,

,
.
-

, -
RGB-
-
,

-
. -
.

.
366 8

-
-
.
-, -
. -
,
,
,
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 left right
368 8

...

, , -
.
. ,
. -
, ,
,
, . ,
, ,
.
CSS. journal.css.
@font-face {
src: url("http://wickedlysmart.com/hfhtmlcss/chapter8/journal/EmblemaOne-
Regular.woff"),
url("http://wickedlysmart.com/hfhtmlcss/chapter8/journal/EmblemaOne-
Regular.ttf");
}
body {
font-size: small;
h1 h2 ,
}
color .
h1, h2 {
color: #cc6600; ,
text-decoration: underline; rgb(80%, 40%, 0%).
} ,

.

h1 { text-decoration
underline.
font-size: 220%;
}
,
h2 { h1,
font-weight: normal; h2.
font-size: 130%; ,
} .
blockquote {
font-style: italic;
}
369

journal.css, color
h1, h2, - -
.
h1 h2
. -

.
...
.
,
,
,

-
,

, ,
.
, -
.
,
-.

? -,
, .
,
.
#1 11111 #4 44444 #7 77777 #aaaaaa #dddddd

#2 22222 #5 55555 #8 88888 #bbbbbb #eeeeee
#3 33333 #6 66666 #9 99999 #cccccc
370 8

,
, -
, , ( ) -
. ,
text-decoration, :

em { -
text-decoration: line-through; em .
}
. , -
, ,
:

em { em
text-decoration: underline overline; ,
} .
- , ,
none:
em { -
text-decoration: none;
} em.

: , - :
<em> , , , -
, , , border-color.
?
: ,
: . , . -
. , , ?
, ,
, . , : , , . HTML ,
, <del>.
, HTML-, .
. <ins>, ,
. -
: : color - . CSS,
text-color? , . <del> <ins>
.
371

- -
, , h1 h2. thin dotted
. .
journal.css

h1, h2:
#8 88888
h1, h2 { .
color: #cc6600;
-
border-bottom: thin dotted #8 88888;
. ,
text-decoration: underline;
} !
-
.
, -
.

h1 h2 ,
.
-
,

,
?
.
.

372 8

CSS - ,
, body.
, font-family, font-weight, font- -
size font-style. , ,
.

. ,
CSS- font-weight.
, , serif,
sans-serif, monospace, cursive fantasy. font-style ,
serif sans-serif. .
.
--
, - - , -
, .
-.
100 % , 100 %
CSS- font-family - 100 % , .
. , - 0 % , 0 % 0 % ,
, . .
- CSS 16 , -
, serif sans-serif.
, , , ,
-
150 .
,
. , -
, ,
, , , . -
-
, @font-face 0 255 .
CSS-.

,

em, (%) .

- .
, ,
, ,
,
. 0F.
Em % - , ,
, .
.
,
text-decoration.
- ,
. .
373

.
,
.

.
, . .
monospace
fantasy
Messenger
Crush
Bainbridge
cursive
sans-serif
Iceland Cartoon
Angel
Nautica serif
Savanna
h
Quarter
Palomino
374 8

.

. ,
.
, -
,
. .
, ,
.
. :
body {
background-color: #b817e0;
}
(11 * 16) + 8 = (1 * 16) + 7 = (14 * 16) + 0 =

184 23 224
right left 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
9

,

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

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

, -
,
.

,
.
,
,
.
, -
,
,
.
378 9

-
,
.

sans-serif.
,

. ,
serif, -
.
-

, -

.

,
-
. ?

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

.
.
379

,
. .
1 chapter9/lounge lounge.html .
. :
, , , .
2 HTML-,
CSS-. -
lounge.css, , , <head>
lounge.html <link>,
lounge.css.
<link type="text/css" rel="stylesheet" href="lounge.css"/>
, <link>
lounge.css.
3 lounge.css chapter9/lounge.
CSS- .

. CSS-
, : , -
- ,
( ).
, lounge.css .
.

body {
font-size: small;
font-family: Verdana, Helvetica, Arial, sans-serif;
} -
h1, h2 { sans-serif.
color: #007e7e; ,
} sans-serif.
h1 {
font-size: 150%; h1 h2 ,
} .
h2 {
font-size: 130%; -
}
h1 h2.
, .
380 9

,
, -
. , ,
.

sans-serif ,
, -
.
-
sans-serif,
font-
family body.
h2
sans-serif,
.
-
h3,
font- , -

family body. ,

.
.
,

,

. -
, . -

,
.
. ,
,
.
( -
- , ).
,
. body
line-height:
1.6em,
body { 1,6 .
font-size: small;
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 9

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

-
,
- ()
CSS
.
,

.
,
, ,
.
: -
, ,

. ,
-

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

(
-
).
:
, , , ,
. .
, em link, -
CSS .
383

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

.
: -
? , ,

. ,
, -

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

.
.

() .
?
: -
, ,

. ,
. , -
,
, -
,
. .
- ,
- .
.
CSS,
-
(, , ).
384 9

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

,
, -
. ,
.
- ,
- .
.

, .
CSS, -

(, , ).
?
: -
, ,

. . ,
-

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

.
.
, -
, (

).
385

: ,
, . -
,

. ,
.
: -
, ,

. ,
-

:
, -
,
.
- ,
.
- .

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

: -
, ,
: -
, , . ,

. ,
-
, -

, -
,

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

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

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

: -
, ,

- : -

:

,
,

,
,

-

-
.
. ,

.
,

- .
,

-

, -

,

,
,

-

-

-

, ,

.
.
- ,
- .
-

-
,
- ,
-
.

.
- .
386 9

CSS -

-

-
: -
.
, , -
-
. ,

-
- -
, , - : -

. -
, -- , ,

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

: -
.
, , -
-
. ,

-

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

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

, ,

. ,
-

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

,

-

-
, , -

.
, ,
. -
, --
.
.

, ,,

. ,,
: , - --

,
. ,

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

. --
.

, --
---
.
387

: , - : , -
,
.
,
-? : .
-
: -, ,
, - 11,
, , .
,
- : -
. ,
?
. ,
- : . -
- - , , , ,
. ,
.
: - . - ,
? , ,
... . ?
,
: - ( )
, .
- , .
. ,
, , : -
, .
, , ?
,
. : -

: , - ,
, , .
? , , ,

: , ,
, , -
, , ,
, . . .
388 9

, .
,
? , -
. , .
, .
-
-
. serif, sans-serif.

- .
:

.

-
.
389
,

, ,
. (, ,
).
, ,
, ,
.
390 9

,
, , .
guarantee,
.
, ,
, .
. , .
1 lounge.html ,
. , <p>
guarantee:
".
class "guarantee

,
.
,
<p class="guarantee">
: , ,
. -
,
, ,
.
- , - .
</p>
2 lounge.html lounge.css.
. CSS-
.

,
guarantee. .
.guarantee { ...
border-color: black;
border-width: 1px; ... 2 .
border-style: solid; , .
background-color: #a7cece;
}
,

,
.
391

, ,
-
. .
,

.

, ,
. .
, -
.

.
: , ,
. ,

, ,
. - ,
- .
, ,
. . ,
.
392 9

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

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

. CSS
padding, ,
. , . -
25 .
.guarantee {
border-width: 1px;
border-style: solid;

padding: 25px;
} 25
(, ,
).
393

, ,
.
,
. ,

,
- .
.
25 .

CSS .
,
. 30
. , :
.guarantee {
border-width: 1px;
padding: 25px;
margin: 30px; 30
(, -
}
, ).
394 9

, ,
.
. ,
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: 1.9em;
font-style: italic;
font-family: Georgia, "Times New Roman", Times, serif;
color: #4 44444;
border-width: 1px;
padding: 25px;
margin: 30px;
background-image: url(images/background.gif);
}
CSS-,
.
396 9

, ,

.
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
, - .
URL- (http://...).
398 9

. , ,
no-repeat background-repeat, , -
, , . ,
, , .
background-position, , .
.guarantee {
line-height: 1.9em;
font-style: italic;
color: #4 44444;
border-width: 1px;
padding: 25px;
margin: 30px;
background-repeat: no-repeat;
background-position: top left;
.
}
, - ,
. .
background-position
, , top, left, right, bottom
center.
.
background-position: top left; -

CSS. -
.

, . background-repeat
, .
.
background-repeat,
,
background-repeat: repeat; .
, no-repeat -

-

repeat- .
, .
repeat-y .
. ,
inherit
.
399

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

.
,
-
.
?
, CSS ,
: top, right, bottom left.

, padding-left:
.guarantee {
line-height: 1.9em;
font-style: italic;
color: #4 44444; -left,
border-color: black; padding
.
border-width: 1px;
border-style: solid; ,
background-color: #a7cece; -
25
padding: 25px;
,
padding-left: 80px;
margin: 30px;
.
}
. , -
, padding
25 , , !
400 9

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

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

, - - -
.
, - . .

. .
?
, :
, margin-right,
. , -
?
,
,
.

.guarantee {
line-height: 1.9em;
font-style: italic;
color: #4 44444;
border-color: black; ,
border-width: 1px; 30 -
border-style: solid; .
padding: 25px; -
padding-left: 80px;
margin: 30px;

margin-right: 250px;
.
background-image: url(images/background.gif); 250
background-position: top left; 250 -
}
margin-right
.
250 .
401

,
. , -
,
.

border-style .
.
border-style: groove; , -
border-style
.
dotted
solid,

solid - - - -
. ,

. .
.
dashed -
double
-
-
. , -
. double, .

. inset
groove -

- , -
: inset.
,
-
( - . .
).
ridge

outset - , -
-
, - ;
. .
.
.
402 9

border-width border-color -
. , .
:
. , RGB- -
.
border-width: thin;
border-color: red;
border-width: 5px;
border-color: rgb(100%, 0%, 0%);
border-color: #ff0000;
-
thin, medium

thick. ,
. 1px border-
color, -
2px
-
3px .
thin 4px
medium 5px -
thick 6px .

,
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-top-width: thick;
border-bottom-color border-left-color
border-bottom-style border-left-style
-
border-bottom-width border-left-width .

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

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

,
.
. CSS ,
. ,
.
30px
.
CSS-
40px
40px
2em
407

. , .
, HTML.

, .
?
Head First: , , - : , -
, :
. ?
: - Head First: , -
. , ,
, , - , --
, . .
.
: , . ,
Head First: - ,
,
? , .
: . , , -
, : .
, . - Head First: , ,
- . ?
halloween,
: -, . ,
christmas.
, -
-
class id. .
, -
, , Head First: id? ,
, - , 4.
. : id .
.
Head First: - .
. Head First: -
, ? id ?
: , . ,
. , !
. : ; -
Head First: , . , ,
Head First, ,
. ,
. . ,
408 9

, .
, id. . , -
, , -
. ,
Head First: , . - .
, ,
: ? HTML-.
, . Head First: , . ,
: - , . , -
,
. , , id, class. ,
; , .
, - : , Head First!

,
(class id).
id class id class
, - <p>, -
. .
, <ol> , -
. .
<img> . <q>,
.
id.
: , ,
409

id
id <a> , class,
, , id. -
, .
, id. footer
:
id class, -

-

. footer.
<p id="footer">, ,
</p>
-
.
.
.
, id, class,
, -
.

: ? id . ,
, , - ,
? class. .
: : -
, , - ?
. , -
. , , : , . : id
, . , -
, , ( ,
- . ).
, id,
410 9

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: 1.9em;
font-style: italic;
color: #4 44444;
border-color: white;
border-width: 1px;
border-style: dashed;
padding: 25px;
padding-left: 80px;
margin: 30px;
}
412 9

: .
,
, .
,
, ?

: #guarantee, ,
p#guarantee? id?
: , : . -
. , , .
, ,
( #guarantee ). ,
.
-
,
: , ,
: ?
. : , -
, p#someid .
blockquote#someid, , ,
. , . ,
number1 main_content,
: class, header content . , -
, , !
413

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

. ,
,
.
. ,
:
.

,
.

: ,
,
. .

.

(
)
414 9

, , -

?
, , :
TML
H .

.

<!DOCTYPE html>
<html> .
<head>
<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 , , 7. -
<body> ,
, , - .
, , . ,
, CSS,
HTML- . , ,
.
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 9

CSS
CSS-
: <link>,
CSS-. :

edia
@m .
,
,
@media screen and (min-device-width: 481px) { .
#guarantee {
,
,
}
} 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
:

:

1280 960 . : 2560 1600 ,
,
.
1024 768
.
<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 9

: . , CSS3 (http://www.w3.org/TR/css3-mediaqueries/),
? Head First Mobile Web ( -
).
: ,
HTML-. : CSS-
, , <link> @media?
.
: . ,
: max-device-width ,
mindevice-width? @media, CSS
. <link>
: , , max-width min-width ( , CSS
device-width, ), max-height . CSS-
min-height, orientation, color, aspect-ratio . ,
- <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 lounge-
mobile.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 9

- line-height,
CSS . .
, - background-image,
, . -
.
-
. background-po-
sition background-repeat, -
, -
- ,
. () .
class ,
.
.
,
- id,
- .
. ,
.
,

.
.
-
-
. ,
id # ; #-
. id.
- -
thin, , -
medium thick. .
HTML-
-
.
, : solid, dashed, dotted
ridge. - -
, -
CSS - ,
, HTML- .
(, , , )
<link>
.
@media CSS,
border-radius - ,
. .
421

, ,
. (, , -
).
422 9

, ,
serif,
. , , ,
. CSS- 1.9em,
, #4 44444 Georgia,
Times New Roman, Times, serif. . ?
-
.
.
.guarantee {
line-height: 1.9em;
font-style: italic;
color: #4 44444;
border-width: 1px;
background-color: #a7cece; ,
padding: 25px;
margin: 30px;
, -
}
.
.
serif.
423

, .
?
:
480 640
:

:

1280 960 . : 2560 1600 ,
,
.
1024 768
.
<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"
<link rel="stylesheet" href="lounge-tv.css"
,

-

,

.

. ?
. ,
?
424 9

,
.
. CSS ,
. ,
.
.
CSS-
30px
border-top-left-radius: 30px;
40px border-top-left-radius: 40px;
40px border-top-left-radius: 0px;
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 lounge-
mobile.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> <block-
quote>?
: ,
. -
, - ,
- . HTML CSS
, <div>. ,
, .
: <div> ? , -
.
: , ,
<div> .
: , , !
: . , , -
, ,
<div>...
430 10
div span

, Pe tS tor z.

-, :
PetStorz.com. , h1
, -
h2

<div>. p
-
: h2
,
. p
, p
, -
p
. img
?
?
?

, h1
. ?
-
. , PetStorz. h2
com ,
, -
p
. .
-

PetStorz
h2
, .
:
,
p
.
p
: .
- p
. img
431
div
<div>
div. h1
, , div
, h2
HTML- -
. . p
-
<div> , -
. div
,
h2
.
. p
p
img
-

<div> h1
cats -
div, - div id=cats
<div>, , -
, - h2
. -

-
, , ? . p

id. div id=dogs
gs.
<div> - do
. , - h2
<div>, -
, cats, p
<div>
dogs.
p
p
img
432 10
div span

1 2
-
Starbuzz h1
h1
div id=cats
Pet- h2 h2
Storz. -
, - p p
1?
h2 div id=dogs
h2
2? p
p
p
p
p
img p
img

div h1
.
, - - div id=cats
PetStorz , - ,
h2
div,
<div>. ,
- p
.
, <div>.
, div, div id=dogs
:
v. , -
di h2
div (-
div
, , . .).
id. p
-
#cats { p
background-image: url(leopard.jpg); background-image.
} - p
img
-
#dogs {
background-image: url(mutt.jpg);
} ,
-

.

433
div

, - div id=header
div h1
- - div id=cats
<div>. -, , - , - h2
, ,
,
- p
.
.
-,
, div id=dogs
. h2
,
. p
, PetStorz .
p
<div>.
div id=footer
p
img
div
. ,
p
?
div id=header
h1
. div id=pets
div id=cats
. , PetStorz h2
: . -
p
, -

. , - div id=dogs
<div> h2
cats dogs <div> -

p
pets.
HTML-
p
, -
pets, - div id=footer
. p
: img
cats dogs .
434 10
div span

: , <div> , , , . : -
, - <div>,
, - , . -
? <div>, , . -
, ?
: , . - .
<div> . : . ,
, : , <div> , ?
, - , , <p> <body>,
- ? <html>.
(, , , .
cat). : , - <div> -
<div> :
- . .
, , , - PetStorz <div>,
. . ,
, - (
: - <div> . , ). -
, . ., - <div>,
.
<div>? , ,
, <div> ( .
: , . - ), ,
, <div> albums. <div> , -
. - , - .
, , , -
, - , , ,
, . . .
,
, - , ,
, - .
<div>,
.
,
.
<div>
.
435
div

, <div>, . :
, ,
, . , lounge.html
chapter10/lounge, , , -
<div>.
, -

elixirs. ,
<div id="elixirs">

<h2> </h2>
-
<p> HTML-.
<img src="images/yellow.gif" alt=" "/>
</p> lounge.h tml,
<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
:
.
CSS-

div
#elixirs {
border-width: thin;
elixirs

border-color: #007e7e;
.

}

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

. ,
-

, -
,
.
- ,
(2) ,
- .
.
20
10
300
10
20
1
1
(3) , 62 .
20 + 1 + 10 10 + 1 + 20 , 300
( ), -
31 31 300 + 62 = 362
.
31 + 31 = 62
443

: , , ?
? ?
: -
: : - , -
. , . -
- 300 ,
, . , , .
-- 300 . ,
, , 200 , , <div>
- : - .
, . , ? , , ,
(- ,
, ) :
. . - , -
. , - ,
, .
( ,
<body>, <div> . .). .
, -
. : -
, ,
?
. ,
-

, -
,
.
- ,
- .
2
20
2
10
5
30
200
444 10
div span

. ?
-, <div> -
.
elixirs, .
, ,
. -
, .
, -
.
- CSS.
: , ,
<div> elixirs
. ,
, CSS-.

v
- di
,
div 0 .

elixirs, -
:
div , .
,
.

-
,
, -
#elixirs {
h2 ( h2
,
border-width: thin;
border-style: solid; , -
).
border-color: #007e7e; .
,
width: 200px;

,
padding-right: 20px; .

padding-bottom: 20px;
padding-left: 20px; ...

margin-left: 20px;
text-align
text-align: center; ,

background-image: url(images/cocktail.gif); . -
background-repeat: repeat-x; .
}
, ,
, . -
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: 20px;

. -

padding-left: 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

body
HTML- -
.
h1 h2 div id=elixirs
h2 h3 h3 h3
CSS ,
h1 h2 .
h1 h2,
h1, h2 {
div elixirs, color: #007e7e;
. }
,
h1 h2
lounge.css.

, h1 html
h2 -
. body
h2
h1 div id=elixirs
, - h2 h3 h3 h3
h2 h3
.
h2, h1, h2 {
h2 - color: #007e7e;
. h3, - }
,
, , ,
. ,
, .
?
450 10
div span

CSS,
, .
, , ,
. , .

. html
body

h2. h1
h2
div id=elixirs
.
h2 h3 h3 h3
div h2 {
color: black;
} .
,
.
h2,

div.
, --
<div> lounge.html,
<h2> , . -
<div> elixirs, ,
, .
html

body
elixirs.
h2
. h1 div id=elixirs
h2 h3 h3 h3
#elixirs h2 {
color: black; ,
} . , ,
div -

h2 ,
h2, -
h2,
elixirs. div elixirs.
451

. , <h3>
<div>, . #d12c47 -
color. , ,
.
CSS-
.
html
body
h2 div id=calendar
h1 div id=elixirs
h2
h2 h3 h3 h3 h1 h2 h3

: : , - : . -
, , . - ( - , , :
-, ? , . .)?
#elixirs blockquote h2 {
: . : . , }
color: blue;
#elixirs h2 - #elixirs > h2, <h2>,

elixirs, <h2> -
elixirs. <h2>,
<div> <blockquote>, -
<blockquote> <div> ( : , - -
) . . , , <h2>, - elixirs.
<h2>, - <blockquote>,
,
, . elixirs?
452 10
div span

, ,
<h2>, ,
<h3>.
#elixirs h2 {
color: black; ,
} h2 h3, -
div -
#elixirs h3 {
elixirs. h2
color: #d12c47;
} , h3 , -
.

! -
lounge.css,
lounge.html.
-
-

h2,
.
453

,
. ,
,
, , . ,
, ? line-height -
<div>, , .
,
line-height, : iv,
d
e-height .
lin d iv,
,
#elixirs {

line-height: 1em; :
.
} -
.
body
small,
, -

, <div>, 1em
elixirs.
line-height. , 1 -
. - body small
small, 12 ( , -
). , <div> line-height
elixirs font-size h2 div id=elixirs
<body>, small. small

, , <div> - div h2 120 % small
elixirs, , -
<div>, elixirs,
. , -
small,
<h2> , 1
12 .
, 120 % small, <p> -
, 1 ,
small. ? line-height p body 1,6 small
sm all (p
: -
, em %,
. 1, , - font-size - div id=elixirs

, <div> elixirs, div - small,
, , 12
elixirs),
<div> elixirs.
: 1 line- -
height <div> elixirs, h2 is 120 % of small
, . 12 .
120 %
, small,
height . 14
line-
1

#elixirs { -
,
div
line-height: 1; -
h2
elixirs, ,
} -

14 (120 %
.
454 10 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: 0px; -
padding-right: 20px; ,
padding-bottom: 30px; .
padding-left: 10px;
, . ,
, .
-

.
.
padding-top: 0px;
padding-right: 20px; padding: 0px 20px 30px 10px;

padding-left: 10px;

:
margin-top: 0px;
margin-right: 20px; margin: 0px 20px 30px 10px;
margin-bottom: 30px;
margin-left: 10px; ,

-

-
,
.

,
, :

padding-top: 20px;

.
padding-right: 20px; padding: 20px;
padding-bottom: 20px; 20
padding-left: 20px;
,
.
456 10
div span
...

( ).
.
margin-top: 0px;
margin: 0px 20px;
margin-right: 20px;
margin-bottom: 0px;
margin-left: 20px;
.

,

, .
, ?
.

border-width: thin;
border: thin solid #007e7e;
border-style: solid; .
border-color: #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
line-height
. - - -
.
,
,
-
font-size. /
-
font-size
-

. .
, . body :
font-size: small;
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
: ?
ul ol

: , . - ,

-

. , CSS- -

,
, , .
,

, ,
,
, ,
. , .

, , :

. .
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 -
<span>.
2 <span> cd,
artist.
3 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> : span,
-

clas s span artist.
span
-.
cd.
<ul>
<li><span class="cd">Buddha Bar</span>, <span class="artist">Claude Challe</span></li>
</ul>
462 10
div span
: <span>
, . <div>,
<span> , .
. lounge.ss:

: cd artist.
-
.
.cd {
font-style: italic;
}
font-weight bold,
.artist {
.
font-weight: bold;
}
<span>
, . :
.

.
-

.
463
span

. <span>
.
.
<ul>
<li><span class="cd">Buddha Bar</span>, <span class="artist">Claude Challe</span></li>
</ul>

: : width ,
<span> <span>? , - .
, <em> <strong>? ?
. width, padding
: , : margin, ,
, , <span>, <em> .
. <strong>, - 5: -
, - , - , width -
, <em>; ( <img>, width CSS,
). -
, <strong>. , . , -
- - . -
, , . ,
, . :
<span>, , , -
, . , ,
- - , -
. , ( ).
,
464 10
div span
, : ,
,
.
,
,
.
<a>.
,
?
465

<a>
, ,
?
.
.
.
,

.
-

.
, -
-
. -
.

-
-
,

. - ,
, .
-
- , title.
.
, <a>
. ,
, . ,
. , <a>
, . .
466 10
div span

-
?
:
: , <a>
? :
, (
a { color: red; }
). , -
. ,
? ,
: , , ,
,
. , , - ,
, , -
. ... , .
, , ,
, , , : ?
, , -
. ? ! , : : .
, ,
, . . ?

a
, -
, .
: (),
. , -
, , ,
(

. :focus
!)
a:link ,
- ,
a:link { ( ), ,

color: green; . ,
} . .
-
a:visited {
color: red; ,
: -
? ,
} .

a:hover { - ?
color: yellow; ,
} -
: , . ,
. , . , -
: link, visited, hover, focus,
active.
, ,
.
lounge.css,
lounge.html. -
: , . ?
,
. , : 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 - Head First: , , ,
, - - .
. . - ,
, , Sussudio?! , , -
HTML-. .
468 10
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.
____________ { __________: #007e7e; }

____________ { __________: #3 33333; }
470 10
div span
?
( , 471- ),
, .
, , CSS.
, .
,
. , , -
, -
. ,
, . .
-, , -
, - , -
.
.
!important.
-

HTML-.
, -
( !) -
.

, -
,
,

,

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

, ,

.
.
.

.
,
?

. , -

, , -
.
,

,
.
-
, .
-
,
. -
, ,
,
, ,
-
, 99 % -
( ).
472 10
div span
-
. , <h1>,
font-size. .

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

.
,
font-size,
-
, , , <h1>.
CSS-
, -
<h1> font-size. !important.

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

.
, 8. ,
, . , -
blockquote h1 , h1,
<h1>, <blockquote>.
, ,
.

, ,
.

( ). , -
, , .
! ,
font-size. , .
473

?
,
, :
000
,
:
-
? .
- -
? ?
.
. h1 h1.blue

000 ,
, h1 , : -

1.
. 001
h1.blue -
: h1.blue ,
, :
1.

- 011 ,
0.
.
, ,
: , -
. , h1.blue 11, ,
h1, 1.

,
:
h1.greentea ol li p em
p img .green span.cd
a:link #elixirs h1 #sidebar
474 10
div span

: : :
? !important? . ,
?
:
: 100 () 010 (), : : . -
, , , 001 (), , !important - ,
. . , , : .
,
h1, h2? h1 {
font-size: 200% , .
? !important; ,
}
, (,
: . , , ).
: h1,
001, h2
001.

! . ,
color <h1>:
<h1 class="blueberry">- </h1> h1 {

color: black;
, -
}
.
,
-
. , -
h1.

h1 {
-
(
color: #efefef;
} body h1 { ).
color: #cccccc;
h1.blueberry { }
color: blue;
}

(-
,
CSS)
.

,
.
.
475

body h1 {
color: #cccccc;
. }
, , h1 {
color: black;
, -
}
h1
color. h1 {
color: #efefef;
}

h1.blueberry {
color: blue;
}
:
, , .
h1 {
color: #efefef;
}

h1.blueberry {

color: blue;
}
: -

, ,
body h1 {
color: #cccccc;
} .
h1 {
color: black;
}

.
, .
h1 { h1.blueberry {
}
color: #efefef; 001 }
color: blue; 011

h1.blueberry {
}
color: blue; 011 blueberry - h1 {

}
color: #efefef; 001
,
body h1 { - body h1 {
}
color: #cccccc;
002 }
color: #cccccc;
002
.
h1 { h1 {
}
color: black;
001 }
color: black;
001
, -
: , , .
, body h1
h1, .
476 10
div span

,
.
h1.blueberry {
, color: blue;

- }
. - h1 {
blueberry, - color: #efefef;
}
11, .
body h1 {
011, - 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.
2 <div> -
elixirs ,
.
3 . -
?
4 lounge.css.
5 #elixirs.
6
:
oat: right;
7 .
? , ?
479
div span
<div> , <h2>,
- <div> ( -
. , . .).
-
, . , padding-
. top, padding-right, padding-bottom
<div>, - padding-left -
, -
. padding.
<div>, -
padding, margin, border,
. , background font.
.
<span> -
-
<div>: -
, -

<div>,
<div> , .
. - <span>
, ( <span>
, border ), -
<div>, . .
width <a> -
.
. <a>
unvisited, visited hover.
, , -
, -
, .
-
, . , -
, - <a>, :link
.
( ), :visited (
Text-align - ) :hover (
, , ).
-
.
. ,
<a>.
,
, - -
. , : :hover, :active, :focus, :rst-
div h2 { ... } child last-child.
480 10
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
#elixirs h3 { color. ,
color: #d12c47; , . .
}
. h3,
-

elixirs.
html .
body
h2 div id=calendar
h1 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.
,

.
-
-

footer.
di v.
<div id="footer">
<p>
© 2012, Head First<br />
, ,
.
</p>
p
</div>
small, ,
-
,
CSS-
. !
.
#footer {
font-size: 50%;
text-align: center;
line-height: normal;
margin-top: 30px;
}
482 10
div span

<span> -
. :
<ul>
<li><span class="cd">Buddha Bar</span>,
<span class="artist">Claude Challe</span></li>
<li><span class="cd">When It Falls</span>,
<span class="artist">Zero 7</span></li>
<li><span class="cd">Earth 7</span>,
<span class="artist">L.T.J. Bukem</span></li>
<li><span class="cd">Le Roi Est Mort, Vive Le Roi!</span>,
<span class="artist">Enigma</span></li>
<li><span class="cd">Music for Airports</span>,
<span class="artist">Brian Eno</span></li>
</ul>
483

,
. , -
, . ,
- .
. ?
, , , .
:
a:link
____________ { color
__________: #007e7e; }
a:visited
____________ { color
__________: #3 33333; }

,
. .
h1.greentea 011 ol li p 003 em 001

p img 002 .green 010 span.cd 011
a:link 011 #elixirs h1 101 #sidebar 100
484
11

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

?

, -
,
. -
.
, -
?
<div> elixirs
-
,

elixirs:
oat: right;
, -
!
, -
-
.

.
? -
-
? ,

? , . -
, -
.

.
,
,
.
486 11

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

,
<html> h1
<head>...</head>
<body> ,
h2
<h1>...</h1>
<h2>...</h2> . p
<p>...</p>
<h2>...</h2>
<p>...</p>
h2
<p>...</p>
<p>...</p>
p
</body> .
</html>
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>
- <em> </em>,
: , .
. <a href="beverages/elixir.html"
title=" Head
First"></a>.
</p>

p,

.

, text em text a
.
,

. ,

.
,
,
.

p

width? text em text
, .
. text a

, ,

. ,
- p
, . text
em text
,
text
?
text a
, ,
.
489

,
, ,
, .

. -
, -
, span em,
. .
,

,
.
,
.

h1 text

, text
.

h2 text
h1 text p text
h2 text text
p text h2 text
h2 text
, p
span em span
p
span em span em em
,

p text p
text
text . text
text
text
p 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 The Head First Lounge is, no doubt, the
to sample the eclectic offering of elixirs, biggest trendsetter in Webville. Stop in
teas, and coffees, or, stay a bit longer
and enjoy the multicultural culinary to sample the eclectic offering of elixirs,

teas, and coffees, or, stay a bit longer
menu that combines a harmony of taste, and enjoy the multicultural culinary
texture, and color with the best in fresh
and healthy ingredients. . menu that combines a harmony of taste,
texture, and color with the best in fresh
and healthy ingredients.
,

10 ,
, During your stay at the lounge, youll
enjoy a smooth mixture of ambient
20 .
During your stay at the lounge, youll
enjoy a smooth mixture of ambient and mystic sounds, filling the lounge
and mystic sounds, filling the lounge

and adding an extra dimension to your
and adding an extra dimension to your
dining experience. The decor surrounds
dining experience. The decor surrounds
you with the relaxing sentiments of sights
. you with the relaxing sentiments of from eras past. And, dont forget, the
sights from eras past. And, dont forget, lounge offers free wireless access to the
the lounge offers free wireless access to
the Internet, so bring your laptop. 20 . Internet, so bring your laptop.
491

: , . , .
(0 ), , - -
- . ,
20 , .
- , ,
20 ? . : -
, -
: . , : ?
?
, ? :
0 . ,
, , 10 , - : , . , ?
, -
10 . ( , - ,
), , , .
: . -
? , . ,
, - -
: , , , , , . , ,
,
. - . .

.
,
CSS-?
,
oat: right;
oat,
.
, , ,
, ,
. , ,
, oat.
, , oat -
,
( ). -
, , .
, - , ...
492 11

,

h1 text
.
h2 text
p id=amazing
text
h2 text
.
amazing floating paragraph, p
span em span em

amazing. p
text
text
text
p
img img img img
h1 text
h2 text

- p id=amazing
. text
200 . text
text
#amazing {
width: 200px; h2 text
}
p
span em span em
,
200 p
text

text

. , text

,

, p

img img img img
493

h1 text
oat.
left right. - h2 text
right:
p id=amazing
#amazing {
text
width: 200px;
oat: right; text
}
text
, -
amazing, -
,
.
(2)
,
(1)
,
,
.
.

,
.
(3)

, ,
h1 text

h2 text
, h2 .
text p id=amazing ,
. text
text

p
span em text
em span
text .
(4) p text
,
text

, text

text

. ,
p
img img img img

.
494 11

div
elixirs oat
right. ,
div

, ,
. - .
, .
div
,

. div
elixirs
,

,
.

div
elixirs,
.
, div
elixirs

.
,

,
.
,
,

,
.
,
.
495
: starbuzz
<div> -
, .
? , <div>
elixirs .
.
,

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

Starbuzz
.
-
. .
. ,
, , ,
.
496 11

Starbuzz
,
, ,
. -
Starbuzz .
CSS-,
. GIF.
:
,
,
- ,
Bean Machine,
.

div,

.
,

. ,
div
.
Bean Machine.

Starbuzz,
.
,

.
,
.

,
:
.
.
497

Starbuzz.
<div>, . <div>
<span>, , 5. ,
, , CSS-.

<!DOCTYPE html> HTML.
<html>
<head>
<title>Starbuzz </title> div
<link type="text/css" rel="stylesheet" href="starbuzz.css"/>
</head>
<body>

<div id="header">
<img src="images/header.gif" alt="
Starbuzz"/> .
</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/>
-
<a href="form.html">BEAN MACHINE</a> div Bean
<br/> Machine.
<span class="slogan">
<br/>

<br/> sidebar.
<br/> ?
</span>
</p>
<p>
?
Bean Machine. ?
Bean Machine, , , (
), .
</p>
</div>
<div id="footer">
© 2012, Starbuzz
<br/>
, ,
.
</div>
</body>
,
</html>
div
.
499
starbuzz

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

body {
background-color: #b5a789;

font-family: Georgia, "Times New Roman", Times, serif; body:
font-size: small; , ,
margin: 0px;
}
0 .
#header {
background-color: #675c47;
margin: 10px;
height: 108px;
}
.
#main {
background: #efe5d0 url(images/background.gif) top left;
font-size: 105%;
padding: 15px;

margin: 0px 10px 10px 10px;
}
.
#sidebar {
background: #efe5d0 url(images/background.gif) bottom right;
font-size: 105%; ,
padding: 15px;
,
}

#footer {
background-color: #675c47; main sidebar
color: #efe5d0; .
text-align: center;
padding: 15px;
margin: 10px;
font-size: 90%;

}
h1 { .
font-size: 120%;
color: #954b4b;

}
slogan,
.slogan { color: #954b4b;} div
.beanheading { sidebar.
text-align: center; beanheading,
line-height: 1.8em;
} .
500 11

CSS-
Starbuzz a:link
a:link { a:visited .
color: #b76666;
text-decoration: none; , -
border-bottom: thin dotted #b76666;
,
}
a:visited { text-decoration none.
color: #675c47;
text-decoration: none;
border-bottom: thin dotted #675c47;
}
...

,
border-bottom

a. .

,

.
Starbuzz
: Starbuzz -
, Bean Machine, , -
, .
, ?
.
1 id,
, -
. .
2 , HTML-
,
.
Starbuzz.
3 .
4 . ,
, .

, .
,
, Starbuzz
. .
501

,
HTML- ,
.
. , HTML-
, <div> -
sidebar <div>
header. HTML-
index.html chapter11/starbuzz.
, .

, 280
sidebar. ,
oat chapter11/starbuzz.css.

,
div sidebar.
#sidebar {
background: #efe5d0 url(images/background.gif) bottom
right;
font-size: 105%;
padding: 15px;
width: 280px; .
oat: right; 280
}

sidebar . ,

,
. ,
sidebar
HTML, .
sidebar,
.
502 11

.

,
sidebar
?
,

.
,
.
. -
<div> -

,
.

.
, -
.
, -
.

, ,

-
.

.
,
. ,

, .
, -
, -
. ,
, -
, .
503
oat
Starbuzz
, starbuzz.css
chapter11/starbuzz
, Starbuzz. ,
.

, ,
,
,
.
,

,

.
,

.
,
.
,
. ,
, , .
504 11

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

,

,
?

, .
-
.

,

.
, (
,
).
,
.
505

,
. ? , ,
. ,
. .
#sidebar {
font-size: 105%;
padding: 15px;
width: 280px;
oat: right;
}

,
.

330 . 10
,
( ).
330 #main starbuzz.css,
:
#main {
font-size: 105%;
padding: 15px;
margin: 10px;
}
330 ,
.
506 11

, starbuzz.css
index.html.
. -
, .
,
, -
, <div>
.
<div>
(-
),
,
.
. , <div>
main
,
, .
div
main,
.
,

, , -
, .
,

.
?
,
, -
-
.
, -

.

-
,
,
.
.
,
. , ?
.
507

.
,
,
?

?

?
,

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

,
.

,
.
508 11

CSS-, - div id=header
clear. , ...
. div id=main
,
div id=sidebar
main
div text
div -
,

footer
sidebar.
div div id=footer
, -
. , -
div
main footer , .
, , -
, ,
, .
CSS- clear , ,
,
. ...
#footer {

color: #efe5d0; .

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

: , CSS - . ,
, . .
, , , : -
- , - ? ,
.
, : , .
, ,
. , . ,
510 11

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

. ,
, -
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 {
font-size: 105%;

padding: 15px;
,
width: 280px;
oat: right; .
} 470 .
div ,
, . ,
div sidebar .
width oat.
420 .
: .
<div> main. :
#main {
font-size: 105%;
330
padding: 15px;
10
width: 420px;
oat: left;
} ,
, div
main . .
420 .
: .
,
clear right left.
#footer {
color: #efe5d0;
text-align: center;
padding: 15px; clear
margin: 10px; right left.
font-size: 90%;
clear: 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>
<div id="allcontent"> , body.
<div id="header">
... HTML ...
</div>

</div> div
foot er.
</body> div

800 -
CSS allcontent

.
<div>, :
<div> -

allcontent -

, 800 . CSS-,
.
: 800
#allcontent {
width: 800px;
padding-top: 5px;
padding-bottom: 5px; div,
background-color: #675c47; . ,
} .
div allcontent
800 , . , -
div , .
515

, ! -
starbuzz.css index.html.
, -
.
.

d iv -

800

allcontent
,

-
.

div -

te n t, -
allco n 800

, .
. 0
80

, , .

,
. ,

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

, , .

#allcontent {
div
width: 800px;
padding-top: 5px; allcontent, auto.
margin-left: auto;
margin-right: auto;
}
auto ,
, . auto
, ,
, .
516 11

margin starbuzz.css .
. , ?
, ,

,
,
.
?
CSS ,
.
, -

. , ,
.
.
CSS, -
. .
,
,
.
HTML CSS, .
chapter11/absolute.
, , , .
<div>: , -
, .
, HTML- <div> sidebar
, , .
517

, - -
. position,
CSS-, - ,
<div> .
sidebar -
. -
. ,
#sidebar {
, . position: absolute;
top: 100px;
right: 200px;
CSS width: 280px; top right.
, CSS-. - }
,
.
, div.
top right ( bottom
left).
100 -
200 .
, <div>,
, . -
200
.

,
div id=header
div id=sidebar

, div id=main 100
top, left,
right bottom.
.
div id=footer
-
,
,
,
.

.
, .
518 11

. , <div>
annoyingad. :

#annoyingad {

position: absolute; 100
top: 150px; d iv ,
.

left: 100px; 150

width: 400px;
} div id=header
100 -
150 div id=sidebar
div id=main
d=main
. , div id=annoyingad
400 .
, <div> -
annoyingad
. , - div id=footer
, -
-
.
,

-
. , div -
annoyingad -
-
div sidebar.
.
? div sidebar
, - annoyingad
: , annoyingad -
. z-index, sidebar,
.
,
, ?
, ?
- eader
div id=h
idebar
z-index, - div id=s
nnoying ad
div idm=aian
div id=m
(
z-index).
-
div
div id=f
ooter
main footer
header, .

519

: : - : -
position - position, static -
? absolute? ?
: static. : : static, : , -
absolute, fixed relative. .
- static absolute. , -
, -
, . , - . ,
, ( , -
float. ), 800 ,
, . 10 %, -
, - - 80
, . - .
. 400 ,
absolute position. , ,
- , - - 10 % 400 ,
. 40 .
. ,
. -
: - . ,
<div>? . , -
, -
: : - .
: , . - - .
, - ,
, ? : , -
. z-index,
: - -
: , . ?
? , -
: , z-index
: , , . , , - ,
<img>. , . CSS.
, . -
<em>, <span> ., . width .
, - -
. ,
(
z-index).
520 11

Starbuzz -
, ,
. -
. .
1 <div> sidebar
.
, , .
2 ,
,
.
3 , -
, .

, ,
CSS Starbuzz-

ol ut e.
ter11/abs
HTML- , <div> - chap
sidebar ,
( ). - -
CSS, absolute, , , -
. starbuzz.css index.html starbuzz.
. css starbuzz
, .
#sidebar {
font-size: 105%;
padding: 15px; , ,
-
128 -
position: absolute; .
0
-
top: 128px; ,

right: 0px; ,
width: 280px; , : 280 .
}

0

128, -
,
...
-

.

521

<div>
main
. ,
. , <div> -
main 330 .
#main {
font-size: 105%;
padding: 15px;
} ,
, div -
main . -
, -
, , -
.
.
div
, , ,
sidebar.
-
.
128
. ,
div - 10 ,
main , .
-

,
-

10 108 -

.
, - div id=header ,
.
CSS.

, , div id=main
div id=sidebar

text 10
-
.
,

-
-
128
div id=footer ,
, -

.
-
. , ,
.
,
clear.
522 11

, CSS, index.html . -
.

, ,
, -

, - 128
, -
. .
, -

-
10 ,

, -

-
.
. -

- -
, .
.
.
, -
.
, clear
,
.

,
-

.
523

, , ,
,

HTML
CSS,
?
,

-
CSS. -
? CSS .

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

-
-
.
524 11

CSS
,
. -
.
CSS HTML-.

4 ,
3 ,
, 12

-
,
<div>
, -
, ,
. :
.

3 ,
2 ,
<div> <p>
, 6 .
<img>

<div> <p>
<img>

,
<div> <p>
-
<img>

.

-
-
,
.
-
, <div>.
525
CSS

CSS, -
, Starbuzz, main sidebar, -
. ,
,
CSS HTML
, CSS-, -
, - HTML-. ?
, ,
, .
<div> ,
<div> . ,
<div> . , HTML- , CSS-,
.
526 11

HTML-
,
CSS HTML:
1 <div>,
-
,
.
2 -

<div id=main> <div <div>, -
id=sidebar> -
.
Starbuzz
.

3 -
-
, -
.
,
-
: <div>
main <div> -
sidebar.

: HTML,
Starbuzz.
HTML,
-

-
Starbuzz.
527

: HTML,
Starbuzz.
!

<div>
tableContainer ,

<div>
-
-
tableRow.
,

-
<div> -
main sidebar,
-

.
-
,

, , -
,
.
HTML
,

... <div>
-
<div id="tableContainer"> tableContainer,
sidebar.
<div> main
<div id="tableRow">
<div id="main">
... <div>
</div> tableRow, -
<div id="sidebar"> <div> main sidebar,
... <div> tableContainer.
</div>
</div> ,
</div> <div>!
... .
,
<div>.
528 11

CSS
, , HTML-
CSS, , CSS
.
1 <div> tableContainer.
. <div>
tableContainer :
tableContainer
div#tableContainer {
<div>, -
display: table;
} -
.
2 <div> tableRow.
, <div>.
, <div>.
<div>- :
eRow
div#tableRow { div tabl

.
display: table-row; -
,
} , -
.
(-

, div.tableRow),
.

3 , <div>
main sidebar , . -
<div> :
<div> main

#main { sidebar ,
.
display: table-cell;
font-size: 105%;
padding: 15px;
}
#sidebar {
font-size: 105%;
padding: 15px;
}
529
css
Starbuzz
Starbuzz,
, . -
HTML- CSS- Starbuzz, , - -
chapter11/tabledisplay, HTML
CSS-. index.html <div>
<div> main, <div>
, -
sidebar: tableContainer, tableRow.

starbuzz.css, CSS-:

display: table - HTML-.
#tableContainer { <div> tableContainer
, .
display: table;
border-spacing
10 . border-
border-spacing: 10px;
} spacing margin -

. border-spacing
#tableRow { ).
, <div> (.
display: table-row;
<div> tableRow
} ( ) .
#main { <div>
display: table-cell; main <div> -
sidebar
-
font-size: 105%; . <div> -
padding: 15px; <div> main -

margin: 0px 10px 10px 10px; <div>
main sidebar.
vertical-align: top; tableRow (
HTML-
}
), <div> -
#sidebar { sidebar
display: table-cell; .

font-size: 105%;
padding: 15px; vertical-align,
margin: 0px 10px 10px 10px; -

vertical-align: top;
( ).
}
530 11

! (-
) .

, . -
, - !
-
, -
.

!
:

, -

.
?
10 <div> -
header 10
<div> footer. -

<div> main sidebar
0 ,
header 10 ,
10 .
, ,
, ,
10
,
10 -

10 .
<div>
main sidebar, -
10 border-
spacing <div> tableContainer.

10 ,
. 10
, -
10
, border-
.
spacing margin, ! - , -
border-spacing
20 margin,
,
,
20
20 ,
10
. , . .
531

,
,
, 0 .
margin: 10px
, margin,
, 10
, , . :
#header {
background-color: #675c47; 10
margin: 10px;
height: 108px; ,
}
, 0 .
#footer {
color: #efe5d0; ,
padding: 15px; ,
margin: 10px; 10 .
font-size: 90%;
}

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

CSS
!

#drinks { ,
_________________________; <div> -
background-color: #efe5d0; drinks
width: 20%;
.
padding: 15px;
}
533
display:table

: , HTML- Starbuzz, , ,
, ( .
CSS- display: ) -
table HTML- . ,
? <div>, : , -
<div> ?
tableRow, <div> -
: , tableContainer -
HTML, : . , ,
- . - ,
. , HTML-, , <div> ,
CSS- display: table . , -
, ,
,
. HTML- - : , ,
.
, CSS -
vertical-align: top?
. ,
CSS- display: table
: -
- : vertical-align: ?
, HTML- top ,
-
. HTML-
-
. -
: ,
width.
13. ,

Starbuzz , , ,
: , - , - , , width
20%.
? .
, ( ,
,
: - - 100%!).
, . ,
HTML-, , , -
. HTML- - ! .
534 11

CSS-
, ,
HTML CSS. HTML,
() ; (
) <div> ( ),
CSS. : HTML
, CSS , .
, , ,
. .

oat ,
, <div> elixirs
. -
oat -
, ,
<div> elixirs, -
. oat
,

.
oat <div> -
sidebar Starbuzz, clear
,
.
, oat
<div>, , ; Starbuzz
,
,
, -
,
. -

,
.

oat, , -
.

-
,
-
<div> -
, , -
auto.
( -
- , , ,
, ). -
. -
,
-
,
( .
).
535

CSS- ()

, - -
,
. -

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

,
Starbuzz.
<div> HTML-,
, , -
, - ,
.
, ,
; .
, <div>
( , , ,
,
). -
<div>:
, , -
<div>,
.

, Starbuzz

. !
, -
, ,
( ).
- -
, , -
, ! ( !)
536 11

,
CSS,
,

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

, .
.
,
Starbuzz, , ,
, , , -
.
, -
,
,
,
Starbuzz, .
800 .
800 ,
. , ,
800 , ,
-
.
?
537

Starbuzz, ,
, , . , -
, .
0 ,
80
- -
800 ,
!

.
-
,
.
,
, ,
<div id=header>, ( -
,
, Starbuzz )?
-

GIF- ( .
, .

).
538 11

float
, CSS
, . , ,
oat. oat Starbuzz
, CSS. ,
, oat,
; . ,
.
headerLogo.gif
1
; headerLogo.gif headerSlogan.gif
chapter11/starbuzz/images. headerSlogan.gif

2 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>
3 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 -
? : , - ,
? ?
: ,
, : - : , . CSS
108 , - . ,
, , - . ,
, <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; <div>
-
top: 30px; award,
left: 365px; 30

}

365 .
CSS- starbuzz.css, -
-. ,
, . -
, ,
.
542 11

: , , : , z-index
float, , ?
.
float? : , CSS,
, -
: ; , - .
. , z-index ,
, -
-
. , -
,
, , ,
, .

1, z-index,
; , , -
float. ,
, ,
, float. , -
,
: <div> z-index.
,
. : ,
, ? z-index?
: , : - : , ,
, z-index z-index
(- .
).
: : z-index
, -
#div1 {
, 1?
position: absolute;
top: 30px;
left: 30px; : , !
z-index: 0;
( ,
}
#div2 {
position: absolute; ).
top: 30px;
left:
z-index:
30px;
1;
: z-index ?
}
: , , -
CSS ,
div2 - .
div1. !
543

,
,

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

.
544 11

, -
.
, ,
, .
: - ,
, ,
, ,
, . .
, <div> coupon. , W3C
<div>
300 100 .
.

div

300
coupon. .
#coupon { 100
div id=coupon
position: xed;
top: 300px;
left: 100px;
}
300
100 .

, .
.
,
:
.
.
. , . , -
;
, .
, ,
,
, . ,
Starbuzz.
545

. <div>,
:
,
div -
chapter11/starbuzz/images.
coupon.
<div id="coupon">
<a href="freecoffee.html" title=" , ">
<img src="images/ticket.gif" alt=" Starbuzz" />
</a>
</div>
a,

, .
, ! <div> index.html
. , HTML
, ,
, .
CSS- .
-

coupon

350 -

#coupon {
.

position: xed;
0 .
,
top: 350px;
left: 0px;
-

} ,
,
.
, -
#coupon , img {
. ,
border: none; -

none border
}
.

,
.

,
, CSS ,
. -
div coupon -
, , . -
CSS-, , .
546 11

starbuzz.
css, . -
, -
, , ,
-
.
, freecoffee.html.
, ,
, .
,
.
-
. ,
-
,
.
, .
left
,
, .
#coupon { 90 ,
position: xed; -
top: 350px;
left: -90px;
90
}
.

350
-90

div id=coupon

,
,
.
547
-

,
left, -
. ? , -
CSS.
, !

, ,

, .

,

,
?
,
. ,
.

,
Bean Machine!
!
!
548 11

-
!
-, . ,
. -
CSS- (. )
. .

,
S.
CS
div id=header div id=navigation
div id=main {
margin-top: 140px;
img id=photo p
margin-left: 20px;
width: 500px;
}
{
position: absolute;
top: 20px;
left: 550px;
width: 200px;
}
{
float: left;
}
{
position: absolute;
top: 20px;
left: 20px;
width: 500px;
height: 100px;
}
549

,
: , , - .
, .
, -
, , . , , , -
?
?
: . - <div>
, - <div>, <div> -
. ( ), <div> -
, ,
, - <div>.
( ),
. , -
, top, left, bottom right, CSS.
, .
,
:
: , , -
?
, <div>
drinks ,
position relative.
: ! , 283 ,
283px,
, ;
. - -
20 <div>
; . ,
drinks, top: 20px, 90
.
left: 90px ( ,
).
: , , ,
: , : , ,
, , ? ?
CSS?
: . , :
, - , , .
. CSS- , ,
. - CSS3
, , -
- -, .
( ,
<html>, - ); CSS-.
, CSS,
, ; JavaScript, .
CSS-
-, - , .
550 11

, - position
. : static, absolute, xed relative.
-
, . .
.
.
- , . -
, . , -
.
,
. , -
- -
.
, top, right, bottom left -
.
, -
. .
-
. , z-index.
z-index,
. ( ).
clear , -
( )
. -
. -
clear , .
, , -
. ,
auto -
width. , ,
.

, - -
. left, right, top bottom
,
- .
,
. CSS -
, ,
, , .
. CSS -
, , .
- <div>.
.
. ,
, , ,
. .
551

.
.
lounge.html. lounge.html
.

.
,
p body.

float CSS-,
div , .
.
h1
p
div
h2

p p

h3
lounge.html p
p
p
,
h3

p p
. p
h3
p
p
p
h2
ul
- , -
- , -
div , <ul>, ,
<div> - <div>
elixirs footer. elixirs .

<div> -
-
,
. ?

, -

.
div
,
,
HTML-
( )
.

15 + 15 + 280 + 0 + 0 + 10 + 10 = 330
,

. ? -
, ,
. -
,
. .
#sidebar {
font-size: 105%;
padding: 15px;
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>
<p>, $1.89</p> Starbu zz
<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
!

#drinks {
display: table-cell <div> -
_____________;
background-color: #efe5d0; drinks
width: 20%;
padding: 15px; ,
vertical-align: top; display table-cell.
}
554 11

,

S.
CS
!
#main
_______________ {
-, .
margin-top: 140px;
,
margin-left: 20px;
.
width: 500px;
CSS- (. ) -
}
. .
? #navigation
_______________ {
position: absolute;
top: 20px;
left: 550px;
div id=header div id=navigation width: 200px;
}
div id=main
img id=photo p
#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, . ,
, .

1 , 2 ,
<div id=main> <div id=sidebar> , 2 .
-
, -
,
-
,

.
,

-
.
Starbuzz!
<div>,

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:

>,

< h ea d er

?

Starbuzz -
,
<div>
, <div> -
header .
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> <aside>
-
;

<aside>,

.

-
;

-
<section>.
<footer>
<div> -
footer <footer>.
562 12
html5-
HTML- Starbuzz
HTML- Starbuzz, <header>, <footer>
<aside>. <section>,
<div> drinks main . Starbuzz-
index.html :
1 <header>.
<div> header <header>. :
<div id="header">
<div> <header>.
<header>
src="images/headerLogo.gif" alt=" Starbuzz">
src="images/headerSlogan.gif" alt="
...">
</header>
</div>
2 <footer>.
<div> footer,
<footer>:
<div id="footer">
<footer>
© 2012, Starbuzz
<br>
,
, .
</footer>
</div>
3 <div> sidebar <aside>:

<div id="sidebar">
<aside>
<p class="beanheading">
<img src="images/bag.gif" alt=" Bean Machine">
...
</p>
<p> ,
... ; ,
</p> ,
</aside> <div> <aside>.
</div>
563
-

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

.
?

HTML5.

Starbuzz
.
; .
, -
HTML, CSS.
: <div> -
, CSS, -
.
CSS,
<div>.
.
564 12
html5-

-
HTML

5-,
! .

,
,

HTML5

(,
Internet Explorer
Safari 3 8 ,
. .).
- ,
, ,
,

, -

.

Android iPhone, ,
HT
ML5-,

, -

!
http://caniu
se.com/#search=new%2
0elements

-
,
.
565

CSS,
CSS, . ,
CSS- . :
body {
background-color: #b5a789;
font-size: small;
margin: 0px; #
} <header>.
#header {
<div> header
header {
background-color: #675c47; <header>
height: 108px;
}
#header img#headerSlogan {
header img#headerSlogan {
float: right;
} ,
CSS.
...

#sidebar { sidebar
aside { <aside>.
font-size: 105%;
padding: 15px;
}
#footer { , - -
footer {

color: #efe5d0; <footer>.
text-align: center;
padding: 15px;
font-size: 90%;
}
...
2

!
, , ;
, ,
. ,
, ,
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>. , , HTML5
, ,
<aside>.
, , HTML--
: <header>, <footer>, <section>, <article>,
<time>> . . , <footer>

: ?

568 12 ,
-
html5-

<div> header,
footer sidebar <header>, <footer> <aside>.
<div>
drinks main <section>, CSS.
<div>
HTML ,
.
<section>.

<div id="tableContainer"> HTML- CSS-,
<div id="tableRow"> <section>.
<div id="drinks">
...
</div>
<div id="main">
...
</div>
<aside>
...
</aside>
</div> 
</div> 
CSS #drinks #m
ain.
#drinks {
background-color: #efe5d0;
width: 20%;
padding: 15px;
}
#main {
background: #efe5d0
url(images/background.gif) top left;
font-size: 105%;

padding: 15px;
-
, ?
}
?
569

<div> -
header, footer sidebar <header>,
<footer> <aside>. -
<div> drinks main -
<section>, CSS.
<div>
HTML ,
<section>. . :
<div id="tableContainer"> ,
,
<div id="tableRow"> <div>

<section id="drinks"> on>
<secti
...
drinks main.
</section>
<section id="main"> -
... ,
</section> -
<aside>
... <section>,
</aside> .
</div> 
</div> 
CSS
.
section#drinks {

display: table-cell; CSS -
!
background-color: #efe5d0; !
,
width: 20%; ,

padding: 15px; , -
.

} - ,

, -
,
section#main { HTML5-
<section
display: table-cell; >. ?
font-size: 105%;
padding: 15px;
}
570 12
html5-
, .
-
HTML5- ?
,
,
, .
, ,
HTML5-
. , -
,
, -
Starbuzz.
<section> -
drinks <aside>
,

. :
,
-
-
.

-
(header)

-

-.
571

, , , ,
.
, , . -
, - .
:
<header> <aside>
<footer> <section>
<article> <div>
<nav> <h1>
<time> <p>
-.

,
, <header>
-
-, -

<__________>
.
<section <______________> <aside>
id=drinks> <___________>
<___________>
<___________>
<___________>
<___________>
<___________>
<___________>
<___________>
<___________>
<footer>
572 12
html5-
, , , ,
.
, , . -
, - .
:
<header> <aside>
<footer> <section>
-.
- <article> <div>
,
<nav> <h1>
,
- <time> <p>

-,

-
. <header>
<nav>
<nav>
. <section <section id= blog> <aside>
id=drinks> <article>

<h1>
<section> -
blog <p>
<section>, -
<section> <article>
<h1>

.
<p>

- <article>
<article>, <h1>
- -
( <p>
<article>

-
<footer>

<article>).
573
article
- Starbuzz
, <section> -
( ) <article> -. ,
. blog.html , index.html
<section> main <section> blog. -
blog.html , ; :
<section>

<section id="blog">
,
<article> index.html.
main
<h1>Starbuzz meets social media</h1> -
<p>

, Starbuzz, . ,
-.
</p>
<p>
? ;
,
</p>
<p>
.
, ,
Starbuzz.
</p>
</article>
<article>
<h1>Starbuzz </h1>
<p> -
...
</p> <article>.
</article>
<article>
<h1> </h1>
<p> <article> -
... <h1> <p>
</p> . !
,
</article>
- <div>, ?
</section>
blog.html,
wickedlysmart.com.
574 12
html5-
CSS -
, , , index.html blog.html
CSS- starbuzz.css. blog.html:
CSS-
<!DOCTYPE html>
, -
<html>
.
<head>
<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 { .

font-size: 105%;

padding: 15px; <section> -
main <sec
vertical-align: top; tion >
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 .
. Z
2012-02-18 05:00Z ,
( (UTC Universal Time -
Coordinated) = (GMT Creenwich mean time). .
577
-
<time> blog.html
blog.html,
, :
<article>

<h1>Starbuzz </h1>
<time datetime="2012-03-12">3/12/2012</time> <time>.
...
</article> <time>

<article> - (-

,
<h1>Starbuzz </h1>
<time datetime="2012-03-10">3/10/2012</time> ,
).
...
10
</article>
.
<article> 2012 ,
<h1> </h1>
datetime -
...
</article> <time>
-
- / .

,
,
-
.

-
.
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">
<article> <h1> <time>.
<header>
<h1>Starbuzz </h1>
</header>
<p>...</p>
</article>
<article>
<header>
<h1>Starbuzz </h1>
</header>
<p>...</p> , <hea
der>
</article> <article>
<section>
<article> blog.
<header>
<h1> </h1>
</header>
<p>...</p>
</article>
</section>
...
. ,
<author> . , ?
580 12
html5-

<header> <section>
blog
Starbuzz .
,
,
-

? -
-

, <header>,
; ,

, ,
? , ?
.
CSS -

: -
,

<h ea de r>,
,

.

581
header

?
, -
, <header>.
?
starbuzz.css
<header>:
header {
height: 108px;
}
height <header>
,
-
-
,
-
. margin .

, <header>
-
.

<header> <section> <article> ,
Starbuzz <header>, - ,
, ,
, - .
. <header>
blog.html top:

top
<header> .
<body>
<header class="top">
src="images/headerLogo.gif" alt=" Starbuzz
">
src="images/headerSlogan.gif" alt=" Starbuzz
">
</header>
...
top <header>
index.html.
582 12
html5-
top index.html blog.html,

CSS
<header>:
.top

<he ade r> CSS .
header.top {
height: 108px;
}
:
header.top img#headerSlogan {
float: right;
,
}
CSS, headerSlogan
. .

blog.html, index.html
starbuzz.css, --
.
, -
<header>
<header> ,
. -
-
, .
583
: , - , <div>. , <section> -
, , - ,
, ! , <div>. -
, ? -
, - .
: - ,
, <section>. : <header>
. , , - , -
, -
- - ? ,
, <article>,
-. ?
, :
-. - <section> <article> <header>? : <header>
, , ,
. : -
<section> <article> . <header>
: <section> <header> , , - ,
<article>? . (, <h1>). C ,
: <article> -
: , - .
- , , , - -
, , - <header> (
. <section> . , -
, <article>, , - ).
<div>
<div> -
Head First: , <div>, , <div>: , - ,

. ? .
<div>: , , , Head First: !
!
<section>, <nav>, <aside> , . -
Head First: , - , , , ,
Starbuzz, .
tableContainer tableRow. <div>: !
<div>: , Head First: ,
,
, . , ?
Head First: , HTML-- <div>: , . ,
, - . - -
, ; , ,
, , .
, Head First: , ; -
. - ? <div>?
584 12
html5-

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

, <a>. ,
.
:
<a href="index.html"></a>
<a href="blog.html"></a>
<a href=""></a>
<a href=""></a>
<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>
</ul> ,
, .
585

HTML.
blog.html:
<body>
<header class="top">
src="images/headerLogo.gif" alt=" Starbuzz
">
src="images/headerSlogan.gif" alt="
...">
</header>
<ul>

,
</ul>
... CSS
</body>

zz.css.
CSS star bu
HTML, -
, - .
, , CSS:
ul { , .
background-color: #efe5d0; , 0,
margin: 10px 10px 0px 10px; border-spacing
list-style-type: none; 10px.
padding: 5px 0px 5px 0px; ,
} .
ul li { display
display: inline; block inline,
padding: 5px 10px 5px 10px; ;
} .
ul li a:link, ul li a:visited { , -
color: #954b4b; -, ,
<a> ( -
border-bottom: none;
CSS) , ,
font-weight: bold;
, -
} , ( ).
ul li.selected { , <li>
background-color: #c8b99c; selected, , -
} , , -
, .
586 12
html5-
GPS?

.
CSS
CSS-,
.
, .
-
,
-, .
?
, -
HTML, -
HTML5-
. , ,
,
, <nav> HTML-
. (, -
, , -
-)
,

<nav>
, <nav>, :

<nav>, :
,
<nav>.
<nav>
<ul>
</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; .
}
,
nav ul { <ul> -
margin 0px
margin: 0px; ,
<nav>
list-style-type: none; ( margin <ul>

padding: 5px 0px 5px 0px; ,
,

} 0).
nav ul li {
display: inline; , -
nav, -
<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>:
<article> <section> -
<header> blog
<h1>Starbuzz Tweet Sip</h1>
</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 ? -
.
! ,
, -

Internet Explorer 8,
.
, .
594 12
html5-

,
video? con tro ls aut opl ay

, , - -
,
, , .
<video> :
, -

contro ls - , -
.
- ls
, , contro
- ,

-

-
.

.
.
autopla y -

<video controls
.
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>
src src
<video>: src src
<img>
URL-,
<video>,
-.

controls video/tweets
ip.mp4 (
-
controls ,
-
. ,
video).
- src ,
sr
, .

, -
preload

. -

preload

- .

- . ,

, , -
,

, , ,
. autoplay, -

Safari. . -
,
preload none (
autoplay - ,
- ),
metadata ( -
aut opl ay
, ),

, auto, -

. .

, , ,

.
width, height
width height
poster (
). poster
,
- -
-
.
. autoplay, ,
, (, 4:3 16:9),
.
, ; -
Letter Box Pillar Box -
. .
, ,
, (
, , ).
poster.
- Pillar Box - Letter Box
loop
loop,
-
,

,

.
596 12
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 WebM VP8
Vorbis
H.264 MPEG-LA.
H.264; WebM Google
.
MP4/H.264 Safari ,
Internet Explorer 9 . VP8.
WebM/VP8
Chrome. Firefox, Chrome Opera.

WebM .webm.
Ogg Theora
Vorbis H.264
Theora. -
,
Theora

. -
, .
Theora, Ogg-,
.ogv.
Ogg/Theora
Firefox, Chrome Opera.
VP8 ,
Google,
-

599

:

-

:
(

-

,

VID E O ,
/W I K I/HTML5_
DIA. OR G /
/ / E N.WIKIPE V I D E O).
: H T T P : SEA RC H = -
// C A N I USE.COM/# , .
HTTP: .
!
,

,

).
Explorer
roid (
Explorer
n d
Explorer
iO S A
Internet
ebKit

7
8
Internet

9
Internet
Mobile W

Firefox
Opera
Chrome
Safari

H.264
WebM
Ogg
Theora
600 12
html5-

, , , ?

. , <source>
( src) <video>,
, ,
, . :

<source>,
,
-
src <video> src,

.
<video controls autoplay width="512" height="288"
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 () :
codecs -
, -
,
src,
-
,

( , ).

.
<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>
-
codecs MP4
</video>

- ,

codecs, , H.264

MIME.

- (,
,
, ).
.
. ,
, , , , ,
, . -
type <source>
http://wiki.whatwg.org/wiki/Video_type_parameters.
: , :
- . - ? ,
? API-
. .
?
: , - :
: , ? ,
, -
, : -
, - iMovie Adobe Premiere . -
Elements,

. . (, -
HTML5 , - ),
Final Cut Pro Adobe <video>. ,
HTML5. HTML5 - Premiere, ,
, . ,
, , -
. Content Delivery Network (
- (CDN), , CDN- , -
, , . ).
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 inng
g
(

--
HTML5)
(
,,
,

Head
First),

.
605

<progress> <section
>

-

.

? ,

90%? -
, -
. <header>
-

<footer>
, -

. -
.
-
<aside>

.
? -

. .
<meter
, >
eo>
!

? ,
<vid

rk>

<ma

0 212,

<aud 90

io> ? !
<nav> , -
- -
>
.
<article .
-, -
.

-

<time> / -
, -
, ).

, 2
- .
( , 21 ,

< va Sc ri pt .
ti Ja
me
> <can e>
r
vas> gu
<
,
,
HTML5-,
. , -
HTML -
!
-
.
606 12
html5-
HTML5 <div> -
HTML. , . -

<section>, <article>, <aside>,

<nav>, <header> <footer>
,
, -

-
HTML5-,
,
.
<div>.
-
<section> -
HTML5-,
.
,
<article> - -
--
, - -,
. ,
<aside> - ,
, .
<video> HTML-
, . -.
<nav> - -
. ,
<header> - . -
, - : H.264, VP8 Theora.
, - ,
, - . -
.
<footer> - : MP4, Ogg WebM.
, - -
, - -, -
, ,

. .
<time> HTML5-
. -
.
607

, , HTML5-,
, ?
( ,
, );
, :
<article>
.
<nav> ,
.
.
<header>

.
<footer>
,
,
.
<time>

.
<aside>

,
<section> , .

-,
<video>
.
608 12
html5-

:

-

:
(

-

,
EO ,
TML5_VID
G/WIKI/H /
EN . WIKIP E DI A.OR
E O ).

P :/ / H =V ID -
: HTT U S E.COM/#S
EARC
, .
/C A N I
HTTP:/ . !
,

,

).
Explorer
id (
Explorer
n d ro
Explorer
iOS A
Internet
ebKit

7
8
Internet

9
Internet
Mobile W

Firefox
Opera
Chrome
Safari
iOS

H.264
oid
ndr
A
WebM
Ogg
Theora
609
13
...
. , ,
-
( ,
), , HTML. ?
:
, HTML-.
- :
HTML-.
, -
HTML-. , !
611
-
, ,

.
,
,
.
?
-

-
-, 1204
15 75 29 686 4/5

-, 5312
25 74 50 3/5

, 4226
10 91 41 173 4/5

, 4780
23 102 265 3/5

--
, 4242
9 93 7289 5/5
-

, 860
18 104 480 3/5

612 13

HTML
, HTML
. , , ,
CSS <div> ( CSS), (-
) . ,
HTML. , HTML <table>,
. ,
, .

.
.

-
-

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

--, 9 93 4242 7289 5/5
-
, 18 104 860 480 3/5

.
.

HTML-, ,
, , ,
?
613
html-
, HTML
, ,
HTML-.
table.html chapter13/journal/. :
<!DOCTYPE html> CSS-, -

<html>
<head> . .
td, th {border: 1px solid black;} table,
</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>.
, ,
.
th
table ,
.

.
. ,
.
/tr
<th></th> .
<table>

<tr> - - -
</tr>

<tr> -, 15 75 1204 29 686 4/5 </tr>

-, 25 74 5312 50 3/5
<tr>
</tr>
, 10 91 4226 41 173 4/5
<tr>
</tr>
<tr> , 23 102 4780 265 3/5 </tr>

<tr> --, 9 93 4242 7289 5/5 </tr>
-
<tr> , 18 104 860 480 3/5 </tr>
<td>9 </td>
tr </table>

.
td /table
.
. .
tr.
616 13

: CSS,

? ,
: HTML -
HTML- ( -
Starbuzz 11).
, ,
. , , -
<td> ,

: CSS HTML.
HTML-

: - .
.
?
: , ?
, ?
: . - ,
:
, <td></
td>. ,
.
CSS, .

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

: . CSS
, ,
. :
.
<th>,

, (

. );
,
: : , .
. ,
CSS! CSS.
: : - :
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> CSS. ,
<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> HTML- CSS,
</tr> -

.
. ,
.
. .
</table>
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 {
src: url("http://wickedlysmart.com/hfhtmlcss/chapter8/journal/EmblemaOne-Regular.woff"),
url("http://wickedlysmart.com/hfhtmlcss/chapter8/journal/EmblemaOne-Regular.ttf");
}
body {
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%;
}
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

border-spacing.

CSS
Starbuzz.
, border-spacing,
. -
,
. ,
.
624 13

. ,
, .
, ,
? -
.

: , : , : ,
border-spacing -
, - - .
, ? ,
- . :
? Internet Explorer? ,
: , . border-
: . . - spacing. ,
: ?
, 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;
border-collapse
border-collapse: 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) {

background-color: red; <p> 2 4
}
p:nth-child(odd) {
background-color: green; <p> 1 3 .
}
nth-child , ,
, , .
, n,
. ,
<p> :
n=0, 2n=0
<p> <section>
( <p>), 2n+1=1,
.
p:nth-child(2n) { <p>. <p>
<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:___________________ {
}
,
.cellcolor
:
/* .cellcolor {
} */
,
.cellcolor,
. 1, 3, 5 7
tr -.
<th> ( -). <th>
, (Internet
Explorer 9 !), . ,
? ,
.cellcolor , .
<th> -
-.

,
--?
, - ---
, -.
, .
, , , -
. ---
, .
? , .
630 13

-

-

-, 1204
15 75 29 686 4/5

-, 5312
25 74 50 3/5

, 4226
10 91 41 173 4/5

, 4780
23 102 265 3/5

4242
-- 9 93 7289 5/5
,
- 27 98 4242 7289 4/5

860
, 18 104 480 3/5

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

- -

-, 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 93 4242 7289 5/5
, 27 98 4/5
-
, 18 104 860 480 3/5
HTML? ,
,
, . .
HTML-, ,
( ). , .
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 93 4242 7289 5/5
- 27 98 4/5
-
, 18 104 860 480 3/5

.

.
HTML? , .
rowspan, , ,
,
. .
,
-. ,
<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> rowspan. ,
<td class="center">5/5</td>
</tr> ,
<tr> .

<td class="center">27 </td> rowspan.

,
<td class="center">4/5</td> (,
</tr>
. ).
632 13

?

, ,

<td>.
,
. , -
.
<tr>
<td rowspan="2" class="right">7289</td>
</tr>
<tr>

</tr>
98
633

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

,
!

: , , : , ,
? , ?
: , . colspan <td> : -
. rowspan , .
, colspan , , ,
( - , ,
, ). HTML.
,
: <td> HTML- .
colspan, rowspan?
: , .
<td> . ,
<td>, .
634 13

?
,
!
!
?
,
27 . , , ,
? ,
. ?
, . ...
?
-
-
--

-, 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 93 4242 7289 5/5
, 27 98 5/5
- 4/5
, 18 104 860 480 3/5

?

.

635

... ,

.
. HTML -
.
<td> <table>.
? , -

( ), , , -
,
,
: 4/5. ...
<tr>
</tr>
<tr>
<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

, .
(
) .
? ,
.

, .
{

,
}

!
.

,
.
638 13

CSS

<th> -
, .
CSS-, table table :
th,
: , nestedtable
-
table table th {
. -
} :
journal.css - .nestedtable {
. }
-
?

: -
CSS, , ,

. , ,
, -
- HTML.

?

<th>.

.

,

,
-
.
,
th
?

. ,
.

639

, , -
, ,
. 2 :
.

.
. HTML-,
<h2>2 , 2012</h2> 2 .
<p>
<img src="images/segway1.jpg"
alt="The rst day of the trip" />
</p>
journal.html.
<p>
!
?
,

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

</q>
</p>
</body>
</html>
640 13

, , CSS (, , ),
, . ( 12), , -
, , ,
.
list-style-type . -
.
li.
ul,
li.
disc ,
li {
list-style-type: disc;
} .
li {
list-style-type: circle;
}
circle list-
style-type
.
li {
list-style-type: square;
}
square
.
li {
list-style-type: none;
}
none
.
641

?
,
? , CSS list-style-
image,
. .

list-style-image,
URL.

li { backpack.gif -
list-style-image: url(images/backpack.gif); -
padding-top: 5px; . ,
margin-left: 20px; , ?
}
-

.
,
,
,

.
...
.

CSS-, .
,

.
,

.
642 13

: - : : ,
? , ? , -
? ? , .
,
,
: ? : ,
. , - :
- inside line-style-position,
, . CSS :
list-style-position. , -
inside, .
, outside,
(, a, b, c). - . outside,
list-style-type.
. -
CSS ( .
, ).
.
, ,

?
,
.
-... ,
-.
!
643

HTML- -
. , CSS-
text-align vertical-align.
HTML:
<table>, <tr>, <th> <td>,
. background-color.
,
<table>
-
.
.

CSS
<tr>.
nth-child, -
-
, - .
<td>.
- ,
<th> , - <td> .
. <td>...</td>
, -
<tr>...</tr> HTML-, .
<td>...</td> , -
. , -
- rowspan colspan -
- <td>.
, summary -
<table> <caption>. , <table>
-
( .
, -
). , -.

. CSS,
11.
,
, - CSS,
, . -
CSS. , -
list-style-type list-style-image.
border-collapse
CSS- , list-style-type -
. .
list-style-image -
. .
644 13

<!DOCTYPE html>
<html>
<head>
td, th {border: 1px solid black;}
</style>
HTML- - <title> </title>
. </head>
<body>
, <table>
- <tr>
<th></th>
<table>, <tr>, <th> <th></th>
<th></th>
<td>. ,
<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

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

.

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

. ,
,
.
, ,
?
0 border-spacing,
.

border-spacing,

,
0.
-

.
table {
margin-left: 20px;
margin-right: 20px;
border: thin solid black;
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="right">1204 </td>
<td class="right">29 686</td>
</tr>
<tr>
td
<td>-, </td> !
<td class="right">5312 </td>
<td class="right">50</td>
</tr>
.
.
.
</table>
,
-, , ,
class="cellcolor"
<tr> :
<tr class="cellcolor">
<td>-, </td>
...
</tr>
649

?

, ,
<td>
. .
<tr>
</tr>
<tr>

</tr>
-- 9 93 4242 7289 5/5

,
- 27 98 4/5

, -,
, , nth-child(odd)
<tr> :
tr:nth-child(odd) {
background-color:
#fcba7a;
}
650 13

, .
(
) .
? ,
.

.
:
(1)

.
(2)
.
(3)
.
(1) (2) (3)
table table th {

, }

-

.
651
14 HTML-

,
.
,

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

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

,
HTML-

. -.
.

rstname=buck
lastname=bonz
1 item=java
number=2

HTML-,
,
-.
2 <html>
<head>
<title>
Your Order has
Processed
</title>

<head>
<body>
<p>Thanks for your
it will be shipping
soon!
</p>
</body>
</head>
-

-
HTML-.
. , ,

.

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

method="POST">
form...
A <p> ( ),
: <br/>
B : <input type="text" name="rstname" value=""/> <br/>

C : <input type="text" name="lastname" value=""/> <br/>
D <input type="submit"/>
...
.
</p>
</form>
</body>
</html>

-
.

.
656 14
html-

! <form>. -
, <form>, -
, .
: , ,
. . ,
HTML- ,
, <form>.
A
- B
C
. HTML D

-
input.
Submit
() (
Submit
Query ( )).
chapter14/contest. ,
,
.
657
form
method -
<form> ,

<form> , - .
, , , , -
, -
( ). : POST.
...
action -
. , , ,
URL
, -
-...
, - -
. - . POST.

<form action="http://wickedlysmart.com/hfhtmlcss/contest.php" method="POST">
, ,
.
</form>
.
, wickedlysmart.com,

, .
. !
POST.

contest.php. hfhtmlcss.
contest.php
hfhtmlcss
wickedlysmart.com
658 14
html-
,
HTML-,
.

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

. -
, PHP, Ruby on Rails, Perl,
Python, Node.js, Java ( ).
,
(-
,
). , -
,
.

.
,
, .
URL-
-
action <form>.
659

, ,
. ,
. .
<input>, .
<input> text
<input> text -
.
-
- input text
type
.
.
type,

, , .

,
text. .
,
<input type="text" name="fullname"/>

input

,
HTML-, .

type.
-

<input> submit
)
<input> submit Submit (
Submit Qu ery
, -
),
. (

, -
(

. -
,
).

<input type="submit"/> Submit ()
submit
type input.
660 14
html-
<input> radio
<input> radio -
, -
. -

: radio

, -
. .

, ...
input radio
,
. .

...
<input type="radio" name="hotornot" value=""/>

<input type="radio" name="hotornot" value=""/>
:

input,

type.
<input> heckbox
<input> checkbox -
, -
, .
,
.

, .

input .
checkbox .
type
. .
<input type="checkbox" name="spice" value="" />

661

( II)
, <input>.
, <select> <textarea> .
, ?
90 % ( 99 % ,
).
textarea
<textarea> -

.
, -
,
. rows
cols
cols

,

textarea

,

name,
( ,

.
.
).

<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>
</select>
option
,
,

<option> -
<select>. .
<option> .

<select name="characters"> option
<option value=""> </option> .
<option value="">-</option>
<option value=""> </option> value.
</select>
663

-, HTML5

, -!
<input>!
, ,
!
. HTML5
.
:
<input> number
<input> number ,

.
, ,

,
. .
,
-
number

max
.
, min, -
<input type="number" min="0" max="20">
, .
<input> range
<input> range -
<input> number, - <input> range number
, step, -
. , -
.
<input type="range" min="0" max="20" step="5">
<input> color

<input> color -
.
<input>
, color,

, <input type="color">
-
.
.
664 14
html-
<input> date
<input> date ,
, .
-
.
<input> color,
<input type="date"> <input> date,
.
<input> email <input> tel

<input> email <input> tel
, , ,
, <input> email,
, -
. .
<input type="email"> <input type="tel">
t>
<inpu
<input> url text

<input>.
-

<input> email tel, - .
<input> url ,

, - , -

/, @ .
.
<input type="url">

-

-
<input>.
! <input>,

, -
HTML5, ,

,
-,

, ,
.
<inpu
t>.
665
bean machine
Starbuzz .
:

Bean Machine.
?

: (
zz
bu
).

Star
:

Star
buz

z
:
( -

).

:

:
. ,
:
-
: .
:
-
:
.
-
.
666 14
html-

-
.

.
-
.
<input type="number" ...>

..>/>
"" ...
puut
iinnp
"tte
e=="
yppe
tt tty
tt"
exxt ./>
...>
:
<<i ty pe =" te
nput type="text" ...>xt "
<i
<input
:

<input type="color" ...>

<input
i ttype="checkbo
" h kb
type="chec
t x" ".../>
kbox"
"checkbox" >
...>
<input :
<input type="checkbox" ...>
:
<input type="tel" ...>
..> :
<input type="date" ...>

io"
"radi
pe=" >
" ...>
nput tytype="r
<i<input adio" ...>
<input type="radi
type
type= radioo" ...>
>

<textarea> .....<tex :
<textarea> .<textar
tarea>
ea/>
:
lect> ...<select>
<se<select> :
<select
<sel ...<select>
t> ...<select/>
:
:
<option> ...<option>
<option>> ...<optiion/>
...<opt on>
/>
p ion> ...<option
<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>
<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- hp
... processorder.p

.
starbuzzcoffee...
,
.
,
668 14
html-
<form>
URL , ,
action <form> (
HTML- ):
<!DOCTYPE html>
<html>
<head>
<title>Starbuzz Bean Machine</title>
</head>
<body>
<h1>Starbuzz Bean Machine</h1>
<h2> ,
</h2>
<form action="http://starbuzzcoffee.com/processorder.php" method="POST">
form.
action
,
URL .
</form>
</body> PO ST.

</html> .

form.
, <form> . -
. ,
: , . ,
, . ,
, .
Starbuzz :

text,
.

input - <input type="text" name="name"> -
-
<input type="text" name="address">
.
type <input type="text" name="city"> :
- <input type="text" name="state"> , , ,
. ,
<input type="text" name="zip">
.
<input type="tel" name="phone">
name -
tel, ,
. ,

. ,
.
...
669

name
name :
-,
. , .
input
name.
HTML-,
,
. ,
name
, text tel:
name (

<input type="text" name="name">
).
<input type="text" name="address">
<input type="text" name="city"> input
.
<input type="text" name="state">
<input type="text" name="zip">
<input type="tel" name="phone">
, .
-
, ,
.
, , , , , -
.

, -
name. -
.

- name =
.
address =
city = -
state =
zip = 90050

phone = 310-555-1212 processorder.php

,
,

.
,
,
.
.
670 14
html-

: <input> : <input> tel, email url O: .
text <textarea>? <option> , -
, , - <select>.
O: <input> , <input> ,
text , text. <select>. ,
, , <input> - <option> name,
, <textarea> - , , tel, <select>
. - . , -
, .
: , -
? . , .
O: , - : , : , -
value . . -
value ? <input>
<input> text, - O: - radio .
, - -
. . O: .
, .
: . , :
, 90050 - , -
<input> text <input> text zip, . , , -
<textarea>? zip = 90050, ,
. . ,
O: - color ()
, - : - , .
<input> , , -
<textarea>. - ? ,
, - ? .
.
, O: . : , -
<input>, : , ?
maxlength
, , , , . O: . ,
. , maxlength=100 - , -
100 . - , - .
<textarea> HTML , , ,
, -
. - checkbox. ,
. , spice ()
: <input> , . , ,
tel, email url, , . -
<input> text. : <option> - spice = &-
? name? &.
.
671
input
<input> HTML
<input> . ,
, form.html.

, .

form.html.
p.


<p>Ship to: <br>
: <input type="text" name="name"> <br>
: <input type="text" name="address"> <br> input:

: <input type="text" name="city"> <br>

: <input type="text" name="state"> <br>

: <input type="text" name="zip"> <br> text
: <input type="tel" name="phone"> <br>
</p>

<p>

<input type="submit" value=" "> .
</p>
</form>
, input -
, ,
, input ,
br.
, . p.
, ,
. ,
input submit .
, , -
.
L-
, HTM
-
form.html ! .
!
672 14
html-
,
,
? starbuzzcoffee.
, - com
. - .
, , !
action.
starbuzzcoffee.com. ,
URL
, -
. -
(
action <form>).

. ,

. ,

.
<input>
, ,
, , -
. ,
<select>. , -
, .
, .
, -
. ,
<select>.
673
select
<select>
<form action="http://starbuzzcoffee.com/processorder.php" method="post">
<p> select.
: .
<select name="beans">
<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>

.
.

,
select - beans = .
option.
674 14
html-
<select>
, <select>. -
, ,
. , -
.
,
select.
,
.

,
,
.

arbuzz Bean
select. , 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" :, .

<p>
:
<option value=" "> </option>
</select>
</p>
<p>
Type:<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="city" value=""><br>
-,
-
: <input type="tel" name="phone" value=""><br> ,
</p> -
<p> .
</p> !
</form>
679
-
<input> number date

.
,
<input> number

/, Starbuzz Bean
Machine. , -
5 !
(Chrome)
<input> text.

.

zz
:
bu
.

Star
:
,
Star
buz
z
.
:

:
,
. :
:
,
:

:
.
:

:

textarea.

680 14
html-

, : HTML- form.html.
<p>
:
</select>
</p>
<p>
:<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>
checked, ,
. -
<p> checked . ,
: <br>

: <input type="text" name="city" value=""><br> .
: <input type="tel" name="phone" value=""><br>
</p>
<p> :<br>
<textarea name="comments"></textarea>
</p>
<p> .
</p>
</form>
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="S"> S</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>
.
</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

URL
http://wickedlysmart.com/hfhtmlcss/contest.php
.
GET
URL-, .
,

URL-. ,
GET -
-

.
http://wickedlysmart.com/hfhtmlcss/contest.php?rstname=buckaroo&lastname=banzai
686 14
html-
GET
, GET, POST GET.
. form.html :
<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
GET, ,
: . - ,
? - - , -
. POST. - -
GET, -, ? , GET . ,
. , , - <textarea>,
. , POST,
URL-. , -
. . GET POST
POST, , -
, . , - , POST
. , .
687
, get post
GET POST
GET,
POST, ,
. ,
, . .
GET POST .
GET POST -.
GET POST .
GET POST .
GET POST
.
GET POST .
688 14
html-
,

Bean Machine!
.
,

-
.

,

HTML CSS?
689
,

, , , ,
CSS
Bean Machine.
,
, .
, .
, (:
, 2 14 ), -
.
HTML-, .

, . !
- .
690 14
html-

,
, ! .

2

14

-
.

.

-
.
-

,

-

. .
,

-
,

<p>,
;

.
.
-
- -
.
<div>,
. ( 11).
,
,
- , - ,
,
. ! .
<form>!
691
html
HTML-

, ,
, HTML.

, ! form.

. . ,
, . -

: styledform.html,
-
chapter14/starbuzz. ,
. .
<div class="tableRow"> <d
<p> iv>
tableRow
:

</p>
<p> .
</select>
</p>
</div>

<div class="tableRow">
<p>:</p>
<p> <p>.
<input type="radio" name="beantype" value="" checked>
</p>
</div>
<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>
<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>
<p>:</p> <p>.
<p><input type="text" name="name" value=""> </p>
:

</div>
<p>:</p> <div>
<p> <input type="text" name="address" value=""> </p> tableRow
</div> ,
<div class="tableRow"> <p>.
<p>: </p>
<p> <input type="text" name="city" value=""> </p>
</div>
<p>:</p>
<p> <input type="text" name="state" value=""> </p>
</div>
<p> :</p>
<p> <input type="text" name="zip" value=""> </p>
</div>
<p> : </p>
<p> <input type="tel" name="phone" value=""> </p>
</div>
<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.
body { Starbuzz
margin: 20px;
}

form { -
display: table; ,
padding: 10px; ,
border: thin dotted #7e7e7e; .
background-color: #e1ceb8;
} , -

,
form textarea {
,
width: 500px;
height.
height: 200px; width

} tableRow
<div> .

div.tableRow {
display: table-row;
} <p>, <div>
tableRow, .
div.tableRow p { <p>, -
display: table-cell; .
vertical-align: top; ,
padding: 3px; .
ild
} rst-ch

<p>,

div.tableRow p:first-child { <div> tableRow. ,

text-align: right; <p>
} ,
.

p.heading {
font-weight: bold; <p> heading -
} , -
.
:.
694 14
html-
-

<link> <head>

styledform.html. - -
HTML CSS,
Starbuzz 12 starbuzz.css -
styledform.css. , -

link : starbuzz.css, - Starbuzz
,
styledform.css. , Bean Machine

.

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">
- name id
bags -
.
<input>. , 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>
-
,
-

for
;
.
696 id, ,
14
html-
?
, ,
, , , .
,
.
<eldset> <legend>
,
. ,
<div> CSS, HTML -
<eldset>,
. <legend>
:

eldset legend
input. .
eldset 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>
<input> password
<input> password
<input> text, ,
. ,
,
, . -
:
- ,
.
.
<input> password
<input type="password" name="secret"> ,
<input> text,
, ,
, .
697

,
<input> le
input,
.
, <input>,
le. <input>
, .
, - <input>
le

. : - .
. ,
POST.
<input type="le" name="doc"> <input> le,

.
multiple
, -
. -

multiple multiple
multiple,
<select>,
,
. ,
( ,
). .
, Ctrl (Windows)
Command (Mac) , .
<select name="characters" multiple="multiple">

<option value=""> </option> multiple,
<option value="">-</option> .
</select>
698 14
html-
placeholder
placeholder
<input> ,
, , -
,
-
. ,
,
, placeholder

,
!
placeholder.
, , -
, , placeholder
, - -
, placeholder, ,
, .
.
<input type="text" placeholder="Buckaroo Banzai">
required
required
; ,
-
. , , , Chro
me.
, -
-
,
. required,

.
, required -
,
, <video>, , ,

. , - ,

, . .
, , , 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> , email, url tel -

. ,
-
action URL- -
.
.
<textarea> -
method : POST
.
GET.
<select> , -
POST
<option>. -
.
<option> .
GET
-
URL-. <textarea>,
POST, -.
. , - value <input> text
, , ,
<textarea>
<input> le. .
GET , - value Submit (-
, ), .
.
- ,
<input> -
-
- .
type.
-
text - CSS,
. . CSS
submit Submit (). , , .
radio . HTML
, , <eldset>.
. <label> -
checkbox . ,
, - ,
.
.
placeholder,
number ,
-
.
,
range , - .
(
required ,
).
,
date , - .
(
). .
700 14
html-
.
, -

.

. .
<select> ...<select>
:
<op <option>
tion> ...<o
: <option> ...<option>
<option> ...<option>
<input type="radio" ...>
n> ...<option>
<optio

o" ...>
<input type="radi
:
:

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

.
:
<input type= checkbox

type="checkbo x" ...> <textarea> ...<textarea>
<i
<input
input type=
<textype="radi
radio"
radio
o" ...>
tarea> ...<
<t
te
ex
xt
>
tt>
area>
<se lect>
<selec ...<selec
t> ...<select>
<input t <input type="submit" ...>

ype="sub
mit" ...
<input type="range" />
...>
<input type="color" ...>
701

" "
name = __________________
zip = "90050"
___________________
" "
model = _________________
" "
color = _________________
""
caroptions[] = __________

GET POST
GET, POST,
,
. , , .
.
GET POST .
GET POST -.
GET POST .
GET POST .
GET POST
.
GET POST .
702 14
html-
80 %
.
, ,
,

?
checked checked -
<input> radio,
.
checked <input> radio
. .
form.html.
...
<p>: <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; }
,

height

30
, 0.
alt,
owers.
706

, -
. , ,
<h1> . :
+ ( )
,
.
,
h1+p {
font-style: italic;
} ,
h1.

, . ,
:
.blueberry p { color: purple; } ,

blueberry.
,
. .
(1)
1 , , , :
,
, div
div#greentea > blockquote
greentea
blockquote.
(2)
2 , :
p ,

div#greentea > blockquote 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); Safari Chrome
-moz-transform: rotate(45deg); Mozilla -
-o-transform: rotate(45deg); Opera -
-ms-transform: rotate(45deg);
Internet ,
}
Explorer
.

-
, .
, transform, 3
CSS- .
708

3. CSS-
CSS, 2D 3D--
. ,
( ).
<!doctype html>
<html>
<head>
<title>CSS- </title> <div>
<style> box
#box { position absolute (
position: absolute; ,
top: 100px; , -
left: 100px; ?).
width: 200px; <div>

height: 200px;
background-color: red; .
} -
#box:hover { ,
transform: rotate(45deg); <div>
Internet , <div>
-webkit-transform: rotate(45deg);
Explorer !
-moz-transform: rotate(45deg);
9
-o-transform: rotate(45deg);
. <div>
-ms-transform: rotate(45deg);

}
- 45 .
</style>
-
</head> .
<body>
<div id="box"></div> <div>,
</body> .
</html>
. -
<div>
box, , -

, 45 . ,

, -
<div>,
, -
,
? -
!
, .
709
css-
transition <div>
box, -
2 . :
#box {
-
position: absolute; transition :

top: 100px; transform ,
left: 100px; transf orm

width: 200px; transform .
height: 200px;
transform -
transition: transform 2s;
,
-webkit-transition: -webkit-transform 2s;
.
-moz-transition: -moz-transform 2s;
-o-transition: -o-transform 2s;
} <div> -
#box:hover { box, transform
transform: rotate(45deg); ,
-webkit-transform: rotate(45deg); 45 .
-moz-transform: rotate(45deg); , -
-o-transform: rotate(45deg); -
-ms-transform: rotate(45deg); 45 -
} 2 .
transition -
Internet Explorer
, transform,
( 9) -
, 2 .
, transition transition,
, 10. -
, - , -
. Internet Explorer.
CSS-, width opacity.
710

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 { , ,
return false; 0 .
} 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 - HTML JavaScript.

.
712

-
,

.
, ,

.
JavaScript
.

Java Script,

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

, ! XML; ,
.
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml">
-
<head>

<title> !</title> ; ,
/>
<meta charset="UTF-8" />
XML-
</head> .
.
<body>
<p> XHTML!</p>
<svg xmlns="http://www.w3.org/2000/svg">
<rect stroke="black" fill="blue" x="45px" y="45px" SVG
-
width="200px" height="100px" stroke-width="2" />

</svg>
XML .
</body>
! , ,
</html> . XML-,

, XML, HTML.
XHTML-:

XHTML .
, -
MIME-
application/xhtml+xml; , , -
( -

).
.
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>
<audio src="song.mp3" id="boombox" controls> -
, <audio>. , <video>
</audio>
(, -

, -
).
(

, ).
, , ,
. : MP3, WAV Ogg Vorbis. -
,
( Chrome -
,
).
, <audio>
API- JavaScript -
. JavaScript,
-,
-
. HTML5
( )
(, Adobe Flash).
718

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

!

Изучаем HTML, XHTML и CSS (2-е издание) PDF

Загружено:

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

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

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

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

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

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

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

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

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

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

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

Изучаем HTML, XHTML и CSS (2-е издание) PDF

Загружено:

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

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

., .

HTML, XHTML CSS

Head First OReilly

meta title style h1 p p h2 p

HTML- Head First. .

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

Windows Windows Internet Explore

<h1> Starbuzz </h1>

<h2> , $2,35 </h2>

<h1> Starbuzz </h1>

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

Head First: , Href. -

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

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

<a href=" "></a>

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

(2) red.jpg lightblue.jpg

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

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

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

? <dt> Burma Shave</dt>

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

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

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

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

index.html Starbuzz title

<a href="index.html#chai"> </a>

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

: _blank target <a>,

Head First: , Target, , , .

Head First: , ? Head First: .

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

. gif, jpg png

Elixirs</title> <p>BT - Satellite: ...

JPEG, PNG GIF?

JPEG PNG GIF

- PNG PNG, GIF -

Head First: . -, , GIF: -

JPEG PNG GIF

<img> ! JPEG, GIF...

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

photos thumbnails html

<img>, JPEG, PNG GIF ,

JPEG PNG GIF

photos thumbnails html

HTML 1.0-2.0 HTML 3 HTML 4

1989 1991 1995 1998

1999 2001 2009 2012 ????

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

DOCTYPE directions.html elixir.html. -

Head First: HTML5, Head First: .

: utf-8? : . <meta> HTML 4.01 .

. <meta> directions.html elixir.html.

<!doctype html> DOCTYPE!

. DOCTYPE <meta> directions.

<!doctype html> DOCTYPE!

border-bottom: 1px solid black;

, HTML- head body

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

rel HTML- link

p.raspberry { color: blue; }

<p class="greentea raspberry blueberry">

<p class="raspberry blueberry greentea">

__ { : #007e7e; }