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

., .

HTML, XHTML CSS


2-

Head First OReilly


.

.
.
.
.
.

32.988.02-018
004.438.5
., .
88 HTML, XHTML CSS. 2- . .: , 2014. 720 .: . ( Head First OReilly).
ISBN 978-5-496-00653-8
HTML, ?
HTML, XHTML CSS. HTML, -, ?
, , ? . ,
-. , ,
, HTML, CSS XHTML, -,
. HTML5, --
, .
12+ ( 29 2010 . 436-.)

ISBN 978-0596159900 . 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>
<html> <h1>Kickn Tunes
<head>
</h1>

.
<title>
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> <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>
<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. .
,
 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>
<title> Head First</title>
</head>
<body>
<h1> Head First</h1>
<img src="drinks.gif">
<p>
,
, , ,
<em> -</em>.

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

 41



, HTML-.
<html>
-.
<head>
.
<title> Head First</title>
.
</head>
.
<body>
, .
<h1> Head First</h1>

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

<title> Starbuzz</title>

</head>

<body>

<h1> Starbuzz</h1>

<p>

.</p>

Starbuzz <p> .</p>

</body>

.

. </html>

HTML-.

HTML,

.

 73

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



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 href="elixir.html"></a>

,



a,



,
-

.

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

<a>
.
<a>
-.
href .

 81

2 , ,
href, ,
.



, ...

... .




,
href ,

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

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

.

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

...
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>
<title> Head First</title>
</head>
<body>
<h1> </h1>

<h2> </h2>
<p>
<img src="green.jpg">


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

HTML-
.
</body>
</html>

, directions.html.

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



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

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
directions.html elixir.html

red.jpg lightblue.jpg

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
directions.html elixir.html

red.jpg lightblue.jpg

<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
directions.html elixir.html
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
directions.html elixir.html

red.jpg lightblue.jpg

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:

<img src="drinks.gif">
,
, .
,
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
directions.html elixir.html

(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
directions.html elixir.html

red.jpg lightblue.jpg
,
(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>
<title> Head First</title>
</head>
<body>
<h1> </h1>

<h2> </h2>
<p>
<img src="green.jpg">


: , .
</p>
<h2> </h2>
<p>
<img src="lightblue.jpg">
,
,
.
</p>
<h2>- </h2>
<p>
<img src="blue.jpg">
,
,
.
</p>
<h2> </h2>
<p>
<img src="red.jpg">
C
.
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 elixir.html

red.jpg lightblue.jpg
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
<img src="images/segway1.jpg">
<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>
<img src="images/segway2.jpg">
<p>
, 1200
: -, , -, ,
, , , , , ,
--, -.
</p>

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

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

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

142 3
c




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




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



&#208;&epsilon;&tau;&#114;&ouml;&igrave;&tau;.
.

: 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> &#208;&epsilon;&tau;&#114;&ouml;
&igrave;&tau;.
<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 ( ,


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

www.starbuzzcoffee.com
 155
-
FTP,
HTML CSS,
FTP . ,
, ( -
, ). ,
HTML CSS ( ).
, FTP-. , -
, , Dreamweaver
Expression Web. ,
, .
, FTP.

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

.

,
,
www.starbuzzcoffee.com

zz
starbu

-

,
2 cd, ,
.
,

.
cd starbuzz

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

starbuzz.
starbuzz
<html>
.
.
.
<html>

mission.html

www.starbuzzcoffee.com



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

www.starbuzzcoffee.com

156 4
-
4 ,
,
, mkdir.
,
mkdir images .

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

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

mission.html
starbuzz .
.
</html>

index.html
-

www.starbuzzcoffee.com
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,
.

www.starbuzzcoffee.com
,
404, .

 161


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


.
/ Earls Autos.

earls_autos

,
cars

. /
cars

new




,
/
<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
www.starbuzzcoffee.com

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

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

<h2> , $2,35</h2>
<p>, .</p>

<h2>, $1,89</h2>
<p> .</p>
-
<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>
<title> Head First</title>
</head>
<body>
<h1> </h1>

<h2> </h2>
<p>
<img src="../images/green.jpg">


: , .
</p>
<h2> </h2>
<p>
<img src="../images/lightblue.jpg">
,
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> ,
,
.
<style type="text/css">
!
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 type="text/css">
body { background-color: #eaf3da;}
</style>
</head>
<body>
.
<h1> myPod</h1>
<p>
, iPod ,
. ? ,
, iPod: iPod Classic
iPod Nano, iPod Shufe iPod Video,
. iPod ,
myPod. , ?

</p>

<h2>, </h2>
<p>
iPod ! .
628 .
</p>

<p> img

</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>
<title>myPod</title>
<style type="text/css">
body { background-color: #eaf3da;}
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: iPod Classic
iPod Nano, iPod Shufe iPod Video,
. iPod ,
myPod. , ?
</p>

<h2>, </h2>

<p>
iPod ! .

628 . .
</p>

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

<p>
<img src="photos/britain.jpg" alt="iPod ">
<img src="photos/applestore.jpg" alt="iPod Apple">
</p>
</body>
</html>
214 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>
<title>myPod</title>
<style type="text/css">
body { background-color: #eaf3da;}
</style>
</head>
<body>
<h1> myPod</h1>
<p>
, iPod ,
. ? ,
, iPod: iPod Classic
iPod Nano, iPod Shufe iPod Video,
. iPod ,
myPod. , ?
</p>
, ,
<h2>, </h2> photos thumbnails.
<p>
iPod ! .
628 .
</p>

<p>
<img src="thumbnails/seattle_ video_med.jpg" alt=" iPod , ">
<img src="thumbnails/seattle_classic.jpg" alt="iPod Classic , ">
<img src="thumbnails/seattle_shufe.jpg" alt="iPod Shufe , ">
<img src="thumbnails/seattle_downtown.jpg" alt="iPod -
,">
</p>

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

218 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>
<title>myPod</title>
<style type="text/css">
body { background-color: #eaf3da;}
</style>
</head>
<body>

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

<h2>, </h2>
<p>
iPod ! .
628 .
</p>

<p>
<a href="html/seattle_video_med.html">
<img src="thumbnails/seattle_video_med.jpg" alt=" iPod Video , ">
</a>
<a href="html/seattle_classic.html">
<img src="thumbnails/seattle_classic.jpg" alt="iPod Classic , ">
</a>
<a href="html/seattle_shufe.html">
<img src="thumbnails/seattle_shufe.jpg" alt="iPod Shufe , ">
</a>

 223

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

<h2>, </h2>
<p>
.
, iPod.
!
</p>

<p>
<a href="html/britain.html">
<img src="thumbnails/britain.jpg" alt="iPod ">
</a>
<a href="html/applestore.html">
<img src="thumbnails/applestore.jpg" alt="iPod Apple store">
</a>
</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"> .
body { background-color: #eaf3da;}
</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.
<style type="text/css">
,
body { background-color: #eaf3da;} logo,
</style> alt,
</head>

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

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

232 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>
<title> Head First</title>
</head>
<body>
<h1> Head First</h1>
<img src="drinks.gif">
<p>
,
<a href="beverages/elixir.html"></a>
, ,
<em> -</em>.

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

 251

DOCTYPE
lounge.html chapter6/lounge
.

.
,


,

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>
<title> Head First</title>
</head>
<body>
<h1> Head First</h1>
<img src="drinks.gif" alt=""> alt.
<p> img.
,
<a href="elixir.html"></a>,
, ,
<em> -</em>.

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

, HTML5 alt?

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

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

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

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

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

</html>
ML,
. HT
CT YPE?
? DO

 265

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

266 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>
,
<meta charset="utf-9">
</head>
<body>
<img src="chamberofcommerce.gif">
<h1>: , Webville

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

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

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

.
?

 273
7 CSS



, ,
.
,
,

HTML-?

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

?
-
.


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

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

276 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 { , ,
background-color: red;
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>
<meta charset="utf-8">
<title> Head First</title>
style.
, :
<style>
CSS HTML-
,
</style> style head.

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

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

 281


, <style> HTML-, ,
, CSS. ,
, - .
, , ( , -
) . CSS- color:

<!DOCTYPE html>
<html lang="en">
<head>

, - <meta charset="utf-8">
<title> Head First</title>

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

-
,

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

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

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

282 7
c css


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


,
: -
-
,

-
p.
.

,

.
...



, <p> -
, ?
?

 283


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


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

color: gray; -serif
} sans

.
.
h2 {
font-family: sans-serif;
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 {
font-family: sans-serif;
color: gray;
h2 .
border-bottom: 1px solid black; h1
}

p {
color: maroon;
}

...

...


.
,
.

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

 285

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

font-family: sans-serif;

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>
<meta charset="utf-8">
<title> Head First</title>
<style>
h1, h2 {
font-family: sans-serif;
color: gray;
}

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

p {
color: maroon;
}
</style>

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

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

 289



,
,
, body,
. h1 -
head
: html -
.
h1 { head
body
font-family: sans-serif;
}
h1 p p h2 p

img a em a
-
h1
, .

, h1, h2:

html

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


img a em a

h1 h2.

p,
:
html

p { body
font-family: sans-serif;
}
h1 p p h2 p

-
img a em a
p .

290 7
c css

- , :

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

html

body

h1 p p h2 p

img a em a

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

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
directions.html elixir.html

red.jpg lightblue.jpg

lounge.css (
lounge.html) CSS-. ,
lounge.html.
, <style> </style>
, lounge.css CSS-
HTML.

h1, h2 {
font-family: sans-serif;
color: gray;
} 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"> .
<title> Head First</title>
<link type="text/css" rel="stylesheet" href="lounge.css" />
<style>
</style>

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

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

HTML
<link>, :
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>
<meta charset="utf-8">
<title> Head First</title>
<link type="text/css" rel="stylesheet" href="../lounge.css"/>
</head>
<body>
.
.
elixir.html.
.
</body> link.
</html>

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

296 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 {
font-family: sans-serif;
color: gray;
}

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

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

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

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

h1, h2 {
color: gray;
}

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



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>
<meta charset="utf-8">
<title> Head First</title>
<link type="text/css" rel="stylesheet" href="../lounge.css"/>
</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 {
font-family: sans-serif;
}

h1, h2 {
color: gray;
}

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

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

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

?
,
, . ,
, .

?
, , , :
<p class="greentea raspberry blueberry">
, ,
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
, :

<p class="greentea raspberry blueberry">

.
?

HTML-:

<p class="raspberry blueberry greentea">

. ?

CSS- p.greentea .

.
?

, p.raspberry .

. ?

, , ,
:

<p class="greentea">

.
?

 313
: css html

: CSS HTML.

CSS HTML

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

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

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

h2, p {
color:
}

<em> {
font-style: italic;
}

</style>

 317
css


...

CSS,
HTML?

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

URL ,

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

( ) .

DOCTYPE -
CSS.
, ! -

(
,
-
).

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

html

body

h1 p p h2 p

img a em a

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

html

body

h1 p p h2 p

img a em a

 323


: raspberry blueberry,

elixir.html,
,
.
raspberry blue, blueberry purple.
body {
font-family: sans-serif;
}

h1, h2 {
color: gray;
}

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

p {
color: maroon;
}

p.greentea {
color: green;
}

p.raspberry {
color: blue;
}

p.blueberry {
color: purple;
}

324 7
c css

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

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

 325

? body { 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; .
font-family: sans-serif;
}


.

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: Verdana, Geneva, Arial, sans-serif;
}
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: Verdana, Geneva, Arial, sans-serif;
}


.

font-family - , . .
. , ,


sans-serif.
, , , ,
,
, ,

. ,

- .
...

 335


, , , -

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


,
,



if.
ser

,
,
.
,


.
,
.


,
,

.

336 8

font-family
font-family.
sans-serif. journal.css
chapter8/journal :

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

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>
<meta charset="utf-8">
<link type="text/css" rel="stylesheet" href="journal.css"/>
<title> </title>
</head>


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

, .

 337


CSS-.

sans-serif.
...


-.
, ,

.


font-family
if
, sans-ser


...
,

... blockquote.

serif,
. -
font-family
, -
serif.



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

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

(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

www.starbuzzcoffee.com

: 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 {
font-family: "Emblema One";
src: url("http://wickedlysmart.com/hfhtmlcss/chapter8/journal/EmblemaOne-
Regular.woff"),
url("http://wickedlysmart.com/hfhtmlcss/chapter8/journal/EmblemaOne-
Regular.ttf");
}
body {
font-family: Verdana, Geneva, Arial, sans-serif;
font-size: small; ,
} small body.
h1 { .
font-family: "Emblema One", sans-serif;
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-family: Verdana, Geneva, Arial, sans-serif;
font-size: small;
}
h1, {
font-family: "Emblema One", sans-serif;
font-size: 220%;
}
h2 {
font-size: 130%;
font-weight: normal;
}

t
font-weigh

h2.
normal


.
h2

.
-
,
,


130 %


.

354 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 {
font-family: "Emblema One";
src: url("http://wickedlysmart.com/hfhtmlcss/chapter8/journal/EmblemaOne-
Regular.woff"),
url("http://wickedlysmart.com/hfhtmlcss/chapter8/journal/EmblemaOne-
Regular.ttf");
}
body {
font-family: Verdana, Geneva, Arial, sans-serif;
font-size: small;
h1 h2 ,
}
color .
h1, h2 {
color: #cc6600; ,
text-decoration: underline; rgb(80%, 40%, 0%).
} ,

.

h1 { text-decoration
underline.
font-family: "Emblema One", sans-serif;
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;
font-family: Verdana, Helvetica, Arial, sans-serif;
line-height: 1.6em;
}

 381


, , , line-height -
. ,
, em
.
, line-height . ,
CSS-, .
, .

line-height

,
, 1.6em.


-



.


line-height , -
, body,

1.6em.

line-height, -
200%, .5em 20px, ,
. , ? ?
, , line-height
1.6em.

382 9


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


-
,
- ()
CSS
.
,

.

,
, ,
.

: -
, ,

. ,
-

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

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

 383


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

.

: -
? , ,

. ,
, -

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

.
.


() .

?
: -
, ,

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

CSS,
-
(, , ).

384 9

, CSS,
,
. .

?
: -
, ,
( ).
. ,
-

,
, -
. ,
.
- ,
- .
.


, .

CSS, -

(, , ).

?
: -
, ,

. . ,
-

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

.

.
, -
, (

).

 385


: ,
, . -
,

. ,
.
: -
, ,



. ,
-

:
, -
,
.
- ,

.
- .


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

-

: -
, ,
: -
, , . ,

. ,
-
, -

, -
,



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

: -
: - , ,
, ,

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


.
, - ,
. - .
- ,

.
- .