html参考大全

McGraw-Hill
HTML
Thomas A. Powell

http://www.tup.tsinghua.edu.cn

01-2001-3285

HTML HTML XHTML
HTML HTML HTML
XML
HTML
Web
JavaScript HTML
HTML
HTML: The Complete Reference, Third Edition

Copyright 2001 by The McGraw-Hill Companies.
Simplified Chinese translation edition jointly published by McGraw-Hill EducationAsiaCo.,
Tsinghua University Press, and Beijing KeHai Training Center Technology Ltd.
McGraw-Hill
McGraw-Hill
HTML
Thomas A. Powell
100084

7871092 1/16
58.125
2002 3 1
00014000
ISBN 7-302-05290-5/TP3110
96.00
1414
2002 3 1

Thomas A. Powell Internet UCLA PICnet
CERFnet CERFnet Internet
1994 Internet PINTwww.pint.com
California San Diego
Powell
The Complete Reference, Web Site Engineering, HTML Programmers
Reference Network World, IT World, NetGuide, Internet Week Interactive Age
UCSDUniversity of California San DiegoPowell

Web UCSD Powell
UCLA UCSD
XHTML University of
California, San Diego
PINT (www.pint.com )
PINT HTML Dan Whitworth
Fritz Schneider
HTML
PINT Rob McFarlaneAnh
Tran Jason Zimmerman PINT Maria Defante
Eric RaetherJimmy TamDavid SnowMeredith HodgeCathleen RyanCory DuckerReuben
PoonKim SmithPatrick FischerPeter LarsonVergil PascualMatt PlotnerMichele Bedard
Nigel Paxton Kate
GranthamDaisy Bhonsle
Osborne Megg Bonar

Timothy MadridCindy Wathen Pamela Woolf
Sylvia Diana
Thomas A. Powell
tpowell@pint.com
2000 11
1
1 HTML XHTML ..............1
1.1
HTML ............................................ 1
1.1.1
HTML.............. 5
1.2
................................................ 6
1.3
<html>............................................. 9
1.4
<head> ............................................ 9
1.4.1
<title> ...................................... 9
1.4.2
head .......... 11
2.3
...........................................24
2.3.1
...........25
2.3.2
...................................26
2.4
Audience................................26
2.4.1
User Profiling.........27
2.5
.......................................................27
2.6
...............................................28
2.7
.......................................30
2.7.1
.......................................30
................................... 12
2.7.2
...........................31
HTML .......................................... 12
2.7.3
...............................33
2.7.4
HTML...................................34
2.7.5
HTML ...................37
1.5
<body> .......................................... 11
1.6
1.7
1.7.1 XHTML:................ 16
1.7.2
HTML HTML ......... 17
1.8
HTML XHTML ..... 19
2.8
Beta ..................................41
1.9
...................................................... 21
2.9
.......................................................41
2.9.1
...........................43
2 Web .........................22
2.10
.................................43
2.1
Web ................. 22
2.11
.............................43
2.2
Web ............................. 23
2.12
.....................................................44
HTML
3 ..................................45
3.1.6
.......................................47
HTML .................................. 45
3.2
.......................................................47
3.1.1
id ........................................... 45
3.3
...........................................49
3.1.2
class ...................................... 46
3.4
<div><center> ...................52
3.1.3
style ...................................... 46
3.1.4
title ........................................ 46
3.5
...................................................53
3.1.5
............................... 47
3.6
.......................................55
3.1
3.4.1
Spans .............................................53
3.7
...................................................... 56
4.3.2
...................................92
3.7.1
....................................... 57
3.7.2
....................................... 59
4.4.1
name ...........................94
3.7.3
....................................... 61
4.4.2
Title .............................95
3.7.4
................... 62
4.4.3
...........................................96
3.8
.......................................... 63
4.4.4
tabindex ................................97
3.9
....................................... 64
...............................................93
4.4.5
target .....................................97
<address> ...................................... 64
4.4.6
...........................98
................................. 65
4.4.7
...............................98
3.9.1
3.10
4.4
3.10.1
............. 65
4.5
...............................................99
3.10.2
..................................... 67
4.6
.........................................100
3.11
............................. 69
4.6.1
.............101
3.12
............................................ 70
4.6.2
.................102
3.13
.................................................... 72
4.6.3
.....................105
3.14
.................................................... 73
4 ..............................74
4.1
.............................................. 74
4.2
URL ......................................... 76
4.7
<link> ..............109
4.7.1
.........................109
4.7.2
WebTV <link> ............ 110
4.7.3
<link> ........................ 111
4.8
............................................. 112
4.2.1
....................................... 77
4.8.1
URL .................... 112
4.2.2
URL ...................................... 83
4.8.2
URNURC URI.................... 113
4.2.3
URL.................................. 89
4.8.3
URL .......................... 114
4.3
HTML ......................... 90
4.3.1
4.9
..................................................... 115
Anchor....................... 90
5 HTML ........................116
5.2.3
:hspace vspace ......127
............................................ 116
5.2.4
<br> .........................128
5.1.1
GIF ..................................... 117
5.2.5
.................................130
5.1.2
JPEG ................................... 120
5.2.6
.....................131
5.1
5.1.3 PNG .................................... 120
5.3
.................................132
............................. 121
5.4
.........................................133
5.1.4
HTML ................................ 121
5.4.1
.................134
5.2.1
alt ....... 122
5.4.2
.....................134
5.2.2
............................. 124
5.4.3
5.2
<object>...................................135
5.5
..................................... 135
3
7.2 Microsoft ...................................183
5.5.1
..................................... 135
7.3
.........183
5.5.2
......................... 136
7.4
.....................................................187
5.5.3
......................... 136
5.6
.................................................... 138
6
..............................................139
8 .......................................188
8.1
.....................................................188
8.1.1
.....................................189
8.1.2
.........................189
6.1
............................................ 139
8.1.3
<noframes>......................191
6.2
Web HTML ................... 140
8.1.4
.....................................192
6.2.1
HTML ............ 140
6.2.2
Non-Breaking Spaces
8.2.1
floating frame.......198
..................................................... 141
8.2.2
.....................................200
6.2.3
<center>............................... 143
8.2.3
.........................200
6.2.4
Alignment ............ 143
6.2.5
<nobr><wbr> .................. 143
6.2.6
..................................... 144
6.2.7
................. 145
6.2.8
<spacer> .............................. 146
9.1.1
.............................202
<multicol> ........................... 147
9.1.2
.............203
.................................................... 149
9.1.3
.........................203
6.3.1
................. 154
9.1.4
MP3 .............................................204
6.3.2
................................. 154
9.1.5
.............................204
6.3.3
Netscape ................ 155
9.1.6
RealAudio....................................205
6.3.4
Microsoft ................ 156
9.1.7
WindowsMedia ..................208
6.2.9
6.3
8.2
8.3
.............................................195
.....................................................201
9 HTML .....................202
9.1
9.2
.....................................................202
.....................................................209
6.4
HTML .................................... 157
6.5
<body> ................ 158
9.2.1
.............................210
6.6
............................................ 160
9.2.2
QuickTime ...................................212
9.2.3
.............................215
6.6.1
Internet Explorer ......... 162
6.7
..................................... 162
6.8
.................................................... 163
7 .....................164
7.1
............................................ 164
9.3
.....................................................216
9.3.1
<marquee> .......216
9.3.2
GIF .....................................218
9.3.3
Flash ............................................218
9.4 PDF ............................................220
7.1.1
................................. 164
7.1.2
rowspan colspan ........... 166
7.1.3
............. 169
7.1.4
............................. 180
10.1
.......................................223
7.1.5
HTML 4 .................... 181
10.2
...............................225
9.5
.....................................................221
10 .................................223
10.2.1
....................... 225
10.2.2
....... 226
10.2.3
........................... 229
10.10.1
1color.......................................254
CSS HTML ......................... 229
10.10.2
background-color.....................254
<div> <span>...... 230
10.10.3
background-image ...................254
................................... 230
10.10.4
background-repeat ...................254
10.4.1 id ....................................... 231
10.10.5
background-attachment............255
10.4.2
class .................................. 232
10.10.6
background-position ................255
10.4.3
........................... 232
10.10.7
background ..............................256
10.4.4
................................... 234
10.4.5
....................................... 234
10.11.1
margin ............................258
10.5
........................... 236
10.11.2
border .............................260
10.6
CSS1 ........................................ 238
10.11.3
padding ..........................263
CSS ........................... 239
10.11.4
width height .......265
Font ......................................... 240
10.11.5
float clear ...........265
10.3
10.3.1
10.4
10.6.1
10.7
10.9.4 list-style .....................................252

10.10
10.11
Color Background ......253
Box .........................................257
10.7.1
font-family................................. 240
10.12
Display ...................................267
10.7.2
font-size..................................... 241
10.13
.............................267
10.7.3
font-style ................................... 241
10.13.1
.............................268
10.7.4
font-weight ................................ 242
10.13.2
z-index.....................................271
10.7.5
font-variant................................ 242
10.7.6
font ............................................ 242
10.14.1
CSS2 ...............274
Text .......................................... 244
10.14.2
CSS2 .......275
10.8.1 text-transform ............................ 244
10.14.3
CSS2 text font
10.8
10.14
CSS2 ..............................274
10.8.2 text-decoration........................... 245
................................................276
word-spacing ............................. 245
10.14.4
CSS2 ...............276
10.8.4 letter-spacing ............................. 245
10.14.5
display .................277
10.8.5
10.8.3
vertical-align.............................. 246
10.14.6
.................................277
10.8.6 text-align ................................... 246
10.14.7
CSS .............279
10.8.7 text-indent ................................. 246
10.14.8
.....................279
10.8.8 line-height ................................. 246
10.14.9
CSS2 ......282
10.8.9
10.9
white-space................................ 247
List ........................................... 251
10.15
CSS3 ...................285
10.16 Microsoft
10.9.1 list-style-type............................. 251
.........................................................286
10.9.2 list-style-image .......................... 251
10.17
.................................287
10.9.3 list-style-position....................... 252
10.18
.................................................288
11.1
................................... 289
11.2
........................................... 290
11.3
<form> ...................................... 290
11.3.1
action ................................ 291
11.3.2
method .............................. 292
11.3.3
enctype .............................. 293
11.3.4 name ................................. 294
11.4
....................... 295
....................................... 295
11.4.1
................................... 295
11.4.2
................................... 299
11.4.3
<optgroup> ................................ 300
11.4.4
................................... 301
11.4.5
....................................... 302
11.4.6
................................... 303
11.4.7
............... 304
11.4.8
<input> .......... 306
11.5
HTML
11 HTML
............................................289
11.3.5
................................... 309
11.5.1
<button> .................................... 309
11.5.2
<label>....................................... 310
11.5.3
<fieldset>................................... 310
11.5.4
............... 312
11.5.5
HTML 4.0
.................................................. 313
12 ........324
12.1
/
..........................................................324
12.2
...................................326
12.3
(CGI) .........................327
12.3.1
CGI ..................................329
12.3.2 CGI
...................................................330
12.3.3 CGI
...................................................334
12.3.4
CGI ..........................336
12.3.5
CGI ..........337
12.4
NSAPI, ISAPI
...........................................................337
12.5
.......................338
12.5.1
12.6
SSI .............339
ColdFusion ........................................342
12.6.1
CFML ...............................343
12.6.2
CFML ...............................349
12.7
(ASP).....................350
12.7.1
12.8
ASP ..........................350
...................................................354
13 JavaScript DHTML
............................................355
11.5.6
................................... 313
13.1
...............................355
11.5.7
................... 315
13.2
JavaScript ..........................................356
11.5.8
CSS............................... 316
13.3 VBScript............................................357
11.6
WebTV
.......................................................... 319
13.4.1
<script>..............................359
11.7
Internet Explorer
13.4.2
<noscript>..................................361
........................................................... 320
13.4.3
...............................362
11.8
....................................... 321
11.9
................................................... 323
13.4
13.5
HTML ..............358
HTML...........................362
13.5.1 javascript:URL ..........................365
13.5.2
JavaScript ......................... 366
13.6
JavaScript ......................... 366
13.7
JavaScript ............. 368
13.7.1
................................... 370
13.8
HTML .................. 371
13.9
HTML DOM .. 374
13.10
............. 376
13.11
......................................... 379
13.11.1
..................... 379
13.11.2
......................... 380
13.11.3
......................... 380
13.11.4
................................. 382
13.11.5
................................. 384
13.12
................................................ 385
14 ActiveX
Java ...............................386
14.1
...........386
14.2
...................................................386
14.2.1
14.3
ActiveX ....................................393
14.3.1
14.4
<embed>............................388
...................394
Java ...............................398
14.4.1
<applet>.............................400
14.4.2
Java ...402
14.4.3
Java .......404
14.5
.......404
14.6
...................................................405
15 ..............................407
16.1.2
<meta> http-equiv...............430
15.1
........................... 407
16.1.3
...................................430
15.2
................................... 408
16.1.4
...............................431
15.3
................................... 409
16.1.5
PICS .........431
15.3.1
................................... 410
16.2
...............................434
15.3.2
................................... 410
16.3
...........................435
............................... 411
16.3.1
.......................436
15.4.1
....................... 412
16.3.2
...............................436
15.4.2
....................... 414
16.3.3
Robots.txt ..................................437
16.3.4
<meta> ...........438
15.4
15.5
Web ...................... 417
15.5.1
HTTP......................................... 417
15.5.2 MIME........................................ 425
16.4
.......................438
16.4.1
<meta> ...438
15.6
................... 428
16.4.2
.......................439
15.7
.................................................. 428
16.4.3
.......................440
16.4.4
...........................441
16.4.5
...............................441
16 ..............................429
16.1
.............................................. 429
16.1.1 name ................................ 429
16.5
...........................................442
16.5.1
...............................442
16.6
.......................................... 443
16.7
.......................................... 444
16.8
HTMLSGML XML
17.9
17.2 XML ......................................... 448
17.3
................................... 451
XML......................................... 454
17.3.1
XSL XML HTML

.................................................. 455
17.3.2
CSS XML ....... 459
17.7
SMIL................................................. 467
17.8
XML ............................ 470
7
A HTML .....................481
A.1
XHTML ................................ 481
A.1.1
XHTML ................. 481
A.1.2
XHTML.................. 483
A.2
.................................... 484
A.2.1
class............................................ 484
A.2.2
id ................................................ 484
A.2.3
style ............................................ 485
A.2.4
title ............................................. 485
A.3
........................................... 485
A.3.1
lang .................................... 485
A.3.2
dir ...................................... 485
...........................................472
18.2
...................................474
18.3
...............................475
18.4
Web-Wide ........................476
18.4.1
.......................476
18.4.2
Accessibility
18.4.3
17.5 XHTML XML HTML...... 460

WML ................. 464
18.1
Usability.............477
17.4 XML ......................... 460
17.6
...................................................471
18 ..........................472
........................................................... 447
17.2.1
...................................................446
17 XML HTML ...............447

17.1
...........................477
18.5 XML .....................................478
18.6
HTML ..................................479
18.7
...................................................480
A.4
........................................... 486
A.4.1
A.5
................................... 488
HTML ............................... 493
A.5.1
.................... 494
A.5.2
<!DOCTYPE>
................................................... 495
A.5.3
<a>Anchor ................. 496
A.5.4
<abbr>Abbreviation
................................................... 500
A.5.5
<acronym>Acronym
................................................... 501
A.5.6
<address> ................... 503
12
A.5.7
<applet>Java
A.5.30
.................................................... 505
A.5.8
<area>Image Map Area
List 548
A.5.31
................... 509
A.5.9
<audioscope>
<b>Bold................ 513
A.5.11
<base>Base URL URL
A.5.12
A.5.32
A.5.33
................................................. 515
A.5.34
<div>Division ...... 557
<basefont>Base Font
A.5.35
<dl>Definition List
<bdo>Bidirectional Override
................................................. 559
A.5.36
.......... 562
A.5.37
<em>Emphasis ..... 564
.............................. 519
A.5.38
<embed>Embedded Object
<big>Big Font .. 520
A.5.16
<blackface>Blackface Font
............................. 566
A.5.39
.................................. 522
A.5.18
A.5.19
A.5.20
<fieldset>Form Field Set

................................. 569
<blink>Blinking TextDisplay
A.5.40
<fn>Footnote........ 571
...................... 523
A.5.41
<font>Font Definition
..................................... 572
<blockquote>Block Quote
.......................... 524
A.5.42
<form>Form......... 575
<body>Document Body
A.5.43
<frame>.................... 578
.................................................. 526
A.5.44
<frameset>........ 580
<bq>Block Quote
A.5.45
<h1><h6>
..................................... 584
.................................................. 529
A.5.21
<br>Line Break .... 530
A.5.22
<button> ........... 532
A.5.23
<caption>
A.5.46
<center>Center Alignment
<head>Document Head
................................................. 586
A.5.47
.................................................. 534
A.5.24
<dt>Term in a Definition List
<bgsound>Background Sound
A.5.15
A.5.17
<dir>Directory List
................................................. 554
.............................. 518
A.5.14
<dfn>Defining Instance of a
Term .............. 552
................................................. 516
A.5.13
<del>Deleted Text
.................................. 550
.................................................... 512
A.5.10
<dd>Definition in a Definition
<hr>Horizontal Rule
................................................. 587
A.5.48
.............................. 537
<HTML>HTML Document
HTML ......................... 590
A.5.25
<cite>Citation....... 539
A.5.49
<i>Italic................ 591
A.5.26
<code>.............. 541
A.5.50
<iframe>Floating Frame
A.5.27
<col>Column............ 542
A.5.28
<colgroup>Column Group
A.5.51
<ilayer>Inflow Layer ....... 595
.................................................. 545
A.5.52
<img>Image ......... 597
<comment>Comment Information:
A.5.53
<input>Input Form Control
A.5.29
.............................. 547
...................................... 593
...................... 602
A.5.54
<ins>Inserted Text
11
A.5.74
................................. 650
.................................................. 607
A.5.55
<isindex>Index Prompt
A.5.75
...................................... 609
A.5.56
A.5.57
<optgroup>Option Grouping
<option>Option in Selection List
..................... 652
<kbd>Keyboard Input
A.5.76
<p>Paragraph ....... 654
...................................... 611
A.5.77
<param>Object Parameter
A.5.78
<plaintext>Plain Text
..................................... 656
<label>Form Control Label

...................... 613
A.5.58
<layer> ......................... 616
A.5.59
<legend>Field Legend...... 618
A.5.60
<li>List Item ..... 620
A.5.61
<link>
A.5.80
<q>Quote.......... 662
.............................. 623
A.5.81
<rt>Ruby Text
A.5.62
................................................. 658
A.5.79
<pre>Preformatted Text
..................... 660
<listing>Code Listing
................................................. 664
.................................................. 626
A.5.82
<ruby>...................................... 666
A.5.63
<map>Client-Side Image Map
A.5.83
<s>Strikethrough
A.5.64
<marquee>Marquee Display
A.5.84
<samp>Sample Text
...................... 628
............................... 668
...................... 629
A.5.65
............................................... 670
<menu>Menu List
A.5.85
<script> .................... 672
................................................. 633
A.5.86
<select>Selection List
A.5.66
<meta>.................. 635
A.5.67
<multicol>Multiple Column
................................... 675
A.5.87
Text................... 637
A.5.68
<nobr>No Breaks
............................................... 678
A.5.88
................................................. 638
A.5.69
<noembed>No Embedded Media
A.5.89
<span>Text Span .............. 681
Support
A.5.90
<strike>Strikeout text
............................... 684
<noframes>No Frame Support
A.5.91
Content
................................................. 640
A.5.71
<spacer>Extra Space
............................................... 680
................................................. 639
A.5.70
<small>Small Text
............................................... 685
A.5.92
A.5.93
................................................. 642
A.5.72
<object>Embedded Object
A.5.73
<ol>Ordered List
<sub>Subscript
............................................... 689
A.5.94
<sup>Superscript
A.5.95
<table>...................... 693
..................................... 643
................................................. 647
<style>Style Information
................................... 688
<noscript>No Script Support

Content
<strong>Strong Emphasis
............................................... 691
12
A.5.96
<tbody>Table Body
............................................... 698
A.5.97
<td>Table Data
A.5.98
A.5.100
A.5.101
A.5.103
A.5.104
A.5.105
A.5.106
A.5.107
A.5.108
B.2
............................................ 742
................................................... 742
a:active ....................................... 742
................................... 701
B.2.2
a:link........................................... 743
<textarea>Multiline Text Input
B.2.3
a:visited ...................................... 743
B.3
............................................... 743
<tfoot>Table Footer
B.3.1
first-letter.................................... 743
............................................... 710
B.3.2
first-line...................................... 744
<th>Table Header
B.4
................................................... 744
................................... 713
B.4.1 /* */.................................. 744
<thead>Table Header
B.4.2
............................... 717
A.5.102
B.1.8
B.2.1
................ 706
A.5.99
B.5
!important................................... 744
................................................... 745
<title>Document Title
B.5.1
font-family.................................. 745
................................... 720
B.5.2
font-size...................................... 747
<tr>Table Row
B.5.3
font-style .................................... 750
............................................... 721
B.5.4
font-weight ................................. 752
<tt>Teletype Text
B.5.5
font-variant................................. 753
............................................... 724
B.5.6 text-transform............................. 754
<u>Underline
B.5.7 text-decoration............................ 755
............................................... 726
B.5.8
<ul>Unordered List
B.6
font ............................................. 757
Text .................................................... 757
............................................... 728
B.6.1
<var>Variable
B.6.2 letter-spacing .............................. 758
............................................... 731
B.6.3 line-height .................................. 758
<wbr>Word Break
B.6.4 text-align .................................... 759
............................................... 732
B.6.5
A.5.109
<xml> ..................................... 733
A.5.110
<xmp>Example
............................................... 735
B ............................738
word-spacing .............................. 757
vertical-align .............................. 760
B.6.6 text-indent .................................. 762

B.7
....................................... 762
B.7.1
color ........................................... 763
B.7.2 background-color ....................... 763

B.7.3 background-image ...................... 764
........................................ 738
B.7.4 background-repeat...................... 764
B.1.1
................................ 738
B.7.5 background-attachment .............. 766
B.1.2
................................ 739
B.7.6 background-position................... 766
B.1.3
................................ 739
B.7.7 background................................. 769
B.1.4
................................ 739
B.1.5
Selector ................... 740
B.8.1
B.1.6
............................................ 741
B.8.2 borders........................................ 776
B.1.7
............................................ 742
B.8.3 padding....................................... 783
B.1
B.8
........................................... 774
margin ........................................ 774
B.8.4
width........................................... 784
11
B.12.11
line-break................................ 806
B.8.5 height .......................................... 785
B.12.12 overflow-x .............................. 806
B.8.6
float............................................. 785
B.12.13 overflow-y .............................. 806
B.8.7
clear ............................................ 786
B.12.14
ruby-align ............................... 807
.................................................... 787
B.12.15
ruby-overhang ........................ 807
B.9.1 display ........................................ 788
B.12.16
ruby-position .......................... 807
B.9.2
B.9
white-space ................................. 789
B.12.17
scrollbar-3d-light-color........... 807
B.9.3 list-style-type .............................. 790
B.12.18
scrollbar-arrow-color .............. 808
B.9.4 list-style-image ........................... 792
B.12.19
scrollbar-base-color ................ 808
B.9.5 list-style-position ........................ 793
B.12.20
scrollbar-dark-shadow-color... 808
B.9.6 list-style ...................................... 793
B.12.21
scrollbar-face-color................. 808
CSS2 ....................................... 793
B.12.22
scrollbar-highlight-color ......... 808
B.10.1
CSS2 ............................ 794
B.12.23
scrollbar-shadow-color ........... 808
B.10.2
CSS2 ............................ 795
B.12.24 text-autospace......................... 809
B.10.3
CSS2 ............ 795
B.12.25 text-justify .............................. 809
B.10.4
.................................. 795
B.12.26 text-kashida-space .................. 809
B.10.5
CSS2 ........................ 796
B.12.27 text-underline-position............ 809
B.10.6
CSS2 ........................ 796
B.12.28
word-break.............................. 809
B.10.7
CSS2 ................ 796
B.12.29
word-wrap .............................. 810
CSS2 ............................ 797
B.12.30
writing-mode .......................... 810
B.12.31
zoom....................................... 810
B.10
B.11
B.11.1
position ..................................... 797
B.11.2
width ......................................... 800
B.11.3
height ........................................ 800
B.13.1
% .............................................. 810
B.11.4
clip ............................................ 800
B.13.2
cm............................................. 811
B.11.5
overflow.................................... 800
B.13.3
em............................................. 811
B.11.6
z-index ...................................... 801
B.13.4
ex (x-height) ............................. 811
B.11.7
visibility .................................... 802
B.13.5
in............................................... 811
B.11.8
CSS2 ...................... 803
B.13.6
mm............................................ 812
B.12 Microsoft CSS ................ 804
B.13.7
pc.............................................. 812
B.13
.......................... 810
B.12.1
background-position-x.............. 804
B.13.8
pt............................................... 812
B.12.2
background-position-y.............. 804
B.13.9
px.............................................. 812
B.12.3
behavior .................................... 804
B.12.4
filter .......................................... 804
B.14.1
B.12.5
ime-mode.................................. 805
B.14.2 6 ... 813
B.12.6
layout-grid ................................ 805
B.14.3 3 ... 813
B.12.7
layout-grid-char ........................ 805
B.14.4
RGB ............................. 813
B.12.8
layout-grid-line ......................... 805
B.14.5
RGB
B.12.9
layout-grid-mode ...................... 805
B.12.10 layout-grid-type ...................... 806
B.14
.................................. 813
.......... 813
................................................. 814
12
C ................................815
C.1
HTML ............ 815
C.2
HTML 4.0 .......................... 847
Microsoft .............................. 859

D.6
Unix ................... 860
E ............................... 861
C.2.1
A ........................ 848
C.2.2
B ........................ 848
C.2.3
............................ 848
C.2.4
............................ 849
C.2.5
.................................... 850
C.2.6
........................ 853
F.1
.................................... 869
C.2.7
............................................ 854
F.2
........................................ 870
C.2.8
................................ 854
F.3
........................................ 870
C.2.9
.................................... 856
F.4
.................................... 871
C.2.10
.................................. 856
F.5
.................................... 871
C.2.11
.................................. 856
F.6
............................................ 872
D .......................................857
F.7
SGML .................................... 872
F.8
............................................ 873
F.9
............................................ 873
D.1
Microsoft
............................................................ 857
D.2
Apple Macintosh System 7

.................................................... 858
D.3
Apple Macintosh System 8.0

.................................................... 859
D.4
Apple Macintosh System 8.5

.................................................... 859
D.5
Macintosh Internet Explorer
E.1
.................................... 861
E.2
............ 863
F DTDDocument Type
Definition ........................... 869
F.10
.................................................. 874
F.11
.............................. 874
F.12
HTML 4.01 Transitional DTD .......... 875
F.13
HTML 4.0 Strict DTD ...................... 896
F.14
HTML 4.0 Frameset DTD ................ 913
1
1
HTML XHTML
HTMLHypertext Markup Language WWW
Microsoft Word WordPerfect
HTML Web
Web
1.1
HTML
HTML Web
<b></b>
<b>This is important text</b>
HTML HTML
1-1
HTML
Web
HTML
HTML Web
<b></b>
/
HTML
HTML
HTML
<br>
1-1
HTML Web
HTML
noshade hr
<hr noshade>
<img src="logo.gif" alt="Demo Company" height="100" width="100">
img HTML
HTML
HTML
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>First HTML Example</title>
</head>
<body>
<h1>Welcome to the World of HTML</h1>
<hr>
1 HTML XHTML
<p>HTML <b>really</b> isnt so hard!</p>

<p>You can put in lots of text if you want to. In fact, you
could keep on typing and make up more sentences and continue
on and on.</p>
</body>
</html>
HTML
<!DOCTYPE> HTML
<html></html><head></head><body></body>
<title></title> Web
<h1></h1>
<hr>
<p></p>
firstexample.htmfirstexample.html
.htm .html
HTML
1-2
1-2
HTML
File Open Open Page Open

File 1-3
1-3
HTML Web
ReloadRefresh
ReloadRefresh
Shift
HTML
Web
HTML
2
HTML <b>
HTML Web
Microsoft Word
Web
Web
Web Design: The Complete Reference
ISBN 007212297-8
HTML
1 HTML XHTML
1.1.1 HTML
HTML
HTML
W3C
The World
Wide Web Consortium HTML Web
W3C
HTML HTML W3C HTML
SGMLStandard Generalized Markup Language
SGML DTDdocument type definition
HTML

HTML 4.01 DTD HTML

<html>
<head>
<title>Document Title Goes Here</title>
...Head information describing the document and providing
supplementary information goes here....
</head>
<body>
...Document content and markup go here....
</body>
</html>
<!DOCTYPE> HTML
<html>Head Body
<head></head> Head
title<body></body> body
HTML <frameset><body><frameset>
<frame><frame>
HTML <html>, <head> <body>

HTML <frameset>
<noframes>
DTD
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">

<html>
<head>
<title>Document Title Goes Here</title>
...Head information describing the frameset and providing
supplementary information goes here...
</head>
<frameset>
numerous <frame> elements here
<noframes>
<body>
...Alternative content for non-frame aware browsers...
</body>
</noframes>
</frameset>
</html>
8 <!DOCTYPE>
<html><head><body>
1.2
HTML SGML HTML SGML

<!DOCTYPE> DTD
HTML DTD
<!DOCTYPE> HTML DTD
2
HTML DTD HTML
<!DOCTYPE> HTML 4.0
HTML 4.01
HTML XHTML
<!DOCTYPE>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
HTML 1-1
1 HTML XHTML
1-1
HTML DOCTYPE
HTML
<!DOCTYPE>
2.0
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
3.2
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
4.0 Transitional
4.0 Frameset
4.0 Strict
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
4.01 Transitional
4.01 Frameset
4.01 Strict
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
XHTML 1.0 Transitional
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
XHTML 1.0 Strict
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN">
XHTML 1.0 Frameset
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN">

XHTML HTML Web HTML
HTML 1-2
HTML
1-2
HTML
HTML
2.0
Mosaic HTML HTML

HTML
3.0
HTML 2.0
3.2
W3C 1997 HTML Netscape 3

HTML HTML
<font>
4.0 Transitional
4.0 W3C 1997 12 HTML 3.2

CSS
4.0 Strict
HTML 4.0 HTML <font>

CSS
4.0 Frameset
frameset
HTML
HTML
4.01 Transitional/Strict/
4.0
Frameset
XHTML 1.0 Transitional
HTML XML HTML XHTML 1.0

HTML 4.0
XML
XHTML 1.0 Strict
XML HTML 4.0

CSS
HTML
HTML
HTML
1-3 HTML
1-3
Netscape 2.x
JavaJavaScriptFrame Plug-in
2.0 Netscape
3.2
Netscape 3.x
<spacer><multicol>
3.2 Netscape
Netscape 4.x
Netscape 6.x
CSS HTML
3.2 4.0 CSS1
<layer>
Netscape
4.0 CSS1 CSS2

DOM
Internet Explorer 3.0
JscriptActiveX
3.2 Microsoft
VBScript HTML
CSS1
<marquee><bgsound>
Internet Explorer 4.0
JavaScript
4.0
Microsoft CSS1
Internet Explorer 5.0/5.5
XML DOM
4.0 Microsoft
CSS1 DOM
WebTV
3.2 WebTV
Netscape Microsoft
<!DOCTYPE> HTML
W3C
HTML
1 HTML XHTML
XHTML
1.3
<html>
<html> HTML <head><body>

<frameset><body> HTML
<html>
1.4
<head>
HTML head
HTML head <head>
<head></head> HTML
Web
<head>
1.4.1 <title>
head <title>
HTML
<head><head></head> HTML
<title> HTML
©
HTML <title>
<title>
<title><b>Home Page</b></title>
<title>The Demo Company Story © 2000</title>
10
Web
<title>
John Smith Demo CompanyInc
Widget X-103 DatasheetDemo Company: Products:

Trainer Robot
Netscape Internet Explorer

2030 a
anthe

1-4
Netscape Navigator <title>
1 HTML XHTML
11
HTML 4.01 <title><title>

head <title>
1.4.2 head
HTML 4.01 DTD <title><head><base>
<isindex><link><meta><object><script><style>
head
<base> URL URL
URL 4
<isindex>
HTML 4.0 <isindex>

A
<link>
4 10
<meta>/name/value<meta>
<meta> http HTTP
request header 16
<meta>
<object> Web
Java ActiveX
Web 14 <object>
<script> Web
ECMAScript JavaScript<script>
HTMLDHTMLDynamic HTML
14
<style>
10 <style>
1.5
<body>
HTML head body <body>

</body> HTML 4.01 <body>
12
XHTML <body>
<body>
6
HTML body
1.6
body
<p><h1>
<b><strong>
<img><object>
<marquee> 3
body
HTML >
escaped
&code; code
<
< < 3
C
1.7
HTML
HTML
XHTML HTML
HTML
HTML
HTML
<B>Go
<B>Go
<b>Go
<b>Go
boldly</B>
boldly</b>
boldly</B>
boldly</b>
1 HTML XHTML
13
HTML
XHTML
HTML
HTML
XHTML

HTML HTML
<img SRC =
" test.gif "><img src = " test.gif "><img> SRC
URL <img src =
" test.gif "><img src =" TEST.GIF "> UNIX
test.gif TEST.GIF NT
HTML
HTML
Tab
<b>T e s t o f s p a c e s</b><br>
<b>T e s
t o f
s p a c e s </b><br>
<b>T
e s
t o f s p
a c e s</b><BR>
Tab
HTML <pre>
<textarea>
14
HTML HTML
HTML 2
HTML <img>
<a>
<a href="http://www.democompany.com">
<img src="democompany.gif" width="221" height="64"
border="0" alt="Demo Company">
</a>
<img></a>
HTML
HTML

&nbsp
Look, Im spaced!
Web
HTML
HTML Content Model
<ul>
<p>Its simple to break the content model!</p>
</ul>
HTML <ul>
<li><p>
<input><form> <option> <select>
HTML
1 HTML XHTML
15
HTML
HTML 2
<p>This isnt closed

<p>This is</p>
<hr><br>
<p><p><p>
<p>
HTML
<p> </p><p> </p><p> </p>
HTML <br>
HTML
HTML HTML
<b><i>is in error as tags cross</b></i>
HTML
<b><i>is not since tags nest</i></b>.
XHTML
HTML
<img src=bozo.gif height=10 width=10>
src
JavaScript src src
bozo 2.gifXHTML
<img src="bozo.gif" height="10" width="10">
JavaScript
HTML
16
<bogus>
<bogus>this text will display on screen</bogus>
<pid="myPara" obviouslybad="TRUE">will also render fine.</p>
obviouslybad
HTML
HTML
XHTML Web
1.7.1 XHTML:
HTML XHTML W3C 2000 1 XHTML XML
HTML HTML
XHTML
<!DOCTYPE html PUBLIC "-//W3C//

DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd">
<html><head><body> <frameset>
<body><body><noframes>
<title> <head>
<p align=left>
<i><b>is ok</b></i>, <i><b> is not </i></b>
<p><p></p>
<hr />

HTML
XHTML HTML
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"DTD/xhtml1-strict.dtd">
1 HTML XHTML
17
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"

lang="en">
<head>
<title>Title here</title>
</head>
<body>
Content here
</body>
</html>
XHTML
XHTML
XHTML Web
XHTML HTML
Web
XHTML
Web 99%
HTML HTML Web DOS

XHTML Web XHTML
HTML Tidy (http://www.w3.org/People/Raggett/tidy/) XHTML-aware
1.7.2 HTML HTML

HTML HTML
HTMLphysical HTML HTML
HTMLlogical HTML HTML
10
HTML
WYSIWYG Microsoft Word Word

HTML
<b></b>
<b>This is important.</b>
HTML HTML
Microsoft FrontPage
HTML HTML
<table> HTML
HTML
HTML
18
HTML
HTML
HTML
HTML <strong>
<strong>This is important.</strong>
<strong> This is important
<h1> <h6><p>
Web
<bold>
<strong><strong>
Web
<date>
10 HTML
HTML HTML HTML
HTML
<cite>
<h1> Internet
Web Web
HTML bug
XHTML XHTML
<table><frame>
HTML
HTML HTML 4XHTML CSS
1 HTML XHTML
19
Web
1.8
HTML XHTML
HTML HTML
1HTML
HTML PostScript
HTML HTML
CSSCascading Style Sheet
HTML HTML
HTML
2HTML
HTML HTML
JavaScript
HTMLDHTML Web
DHTML
HTML
DHTML HTML HTML

HTML DHTML
HTML HTML
13
HTML
3HTML
HTML
HTML
XML HTML HTML XML
HTML
HTML W3C
HTML http://www.w3.org/MarkUp
/Activity.html
20
4HTML
W3C HTML
W3C HTML
Web
5 HTML
HTML Web
Web HTML
Web
6XHTML Web
HTML
Web XHTML
XHTML Web
HTML
HTML
HTMLHTML
Web
7HTML
Web
HTML
HTML
8HTML Web
HTML Web Web
HTML Web
HTML HTML
Web
1 HTML XHTML
1.9
21
HTML Web HTML

<b></b>
HTML
HTML Web
HTML XHTML HTML
CSS
HTML
HTML Web XHTML Web
HTML
HTML Web
HTML
HTML Web
HTML
Web
HTML
HTML HTML Web
XML
HTML HTML
PostScript
HTML
Web
HTML Web
HTML Web
Web Web
HTML
HTML Web
HTML Web Design: The Complete Reference
ISBN 007212297-8 HTML
2.1
Web
Web 20 60
brochureware
Web
Web
HTML
2 Web
23
Web
Web
2.2
Web
Process Model
Web
Web
2-1
24
2-1
Web Web
Web
,
Web
2.3
Web
Web
2 Web
25
Goal
Statement

25%
10000

3 2 25%10000
300
2.3.1
Web
26
2.3.2
wish
list
35
2.4 Audience
Internet
2 Web
27
2.4.1 User Profiling
User Profile 3 3
Bob BeginnerIrene Intermediate Paul Poweruser
Internet
Visit Scenarios
Bob Beginner
2.5
Web
visualdelivery
28
Web 3
2.6
2-1
2.1
Butler Robot
Microsoft Word
Jennifer Tuggle
John P. Lawyer
GIF
Pascal Wirth
Microsoft Word
Butler 7
Robot Personality
Demo Cray-9000
HTML
JavaScriptCGIColdFusionJava
2 Web
29
2-2
2-2

Web

man-hour
Web
30
2.7
Web prototype Web
Web
Web
2.7.1
2-3
2-3
2 Web
31
Web
2.7.2
Web
HTML
2-4
2-4
Demo Company
GIF JPEG Web
32
HTML
2-5 Demo Company GIF
2-5
Demo Company
2-6
2-6
Demo Company
2 Web
33
(form field
labels) 2-7
1
3
Thank you
Tracking
2-7
2.7.3
Alpha
HTML CSS
Cascading Style Sheet
2-5
Macromedia Fireworks(www.macromedia.com/software/fireworks)
2-8

34
2-8
Web HTML
2.7.4 HTML
Web Web
HTMLHTML
Web HTML
HTML HTML
WYSIWYG 2-2
2 Web
2-2
35
HTML
HTML
bug
HTML CSS
HTML CSS
Microsoft
Word HTML
HTML
HomeSite
HTML
CSS
HTML
CSS
FrontPage
HTML
Dreamweaver
HTML CSS
CSS
HTML
translator HTML tagging editor
HTML 2-3
HTML Web
Dreamweaver HomeSite
2-3
HTML
URL
Dreamweaver
Windows
http://www.macromedia.com/
Macintosh
CSS
DHTML
HomeSite
Windows
http://www.allaire.com/homesite
HTML
Cold
Fusion Studio
36
URL
GoLive
Macintosh
http://www.adobe.com/products/golive/
Macintosh
Windows
Golive
FrontPage
Windows
http://www.microsoft.com/frontpage
Microsoft
HTML
FrontPage Dreamweaver 2-9
2-9
WYSIWYG HTML
HTML HTML
HTML
(WYSIWYMGWhat You See Is What You Might Get) HTML

2-10
2 Web
37
100%
HTML
2-10
100%
HTML
WYSIWYG
HTML
HTML
Web
HTML HTML XHTML CSS
HTML
HTML
2.7.5 HTML
HTML
1
XHTML
HTML
HTML
XHTML
HTML <p align=right>

XHTML <p
align="right">
38
HTML
HTML HTML
DTD
HTML
HTML
HTML HTML
HTML HTML
Web <http://
validator.w3.org>CSE Validator (www.htmlvalidator.com)
HTML HTML
<html>
<head>
<title>Messed <b>Up!</b></title>
</head>
<body bgproperties="fixed">
<h1 align="center">Broken HTML
<hr>
<ul>
<p>Is this <b><i>correct</b></i>?<br>
<a href=HTTP://WWW.DEMOCOMPANY.COM>
Visit DemoCompany</a>
<pre>
Should we do <b>this?</b>
How about entities © ?
</pre>
</ul>
</body>
<html>
2-11
2 Web
2-11
39
HTML
HTML HTML
JavaScript
CSS
<link rel="stylesheet" href="styles/pagestyle1.css">
10 JavaScript
<script src="scripts/validate.js" type="javascript"></script>
JavaScript HTML 13
.htm .html
.htm
index.htm
index.html
/about/products
/images/styles
JavaScript /scripts
homeheader.gif r1c1.gif
40
 HTML
HTML HTML
<head>
<html>
<head>
<title>Demo Company Announces Butler 1.0</title>
<!-Document Name: Butler Robot Press Release
Description: The press release announcing the newest Robot
Butler in the Demo Company family.
Author: Thomas A. Powell (tpowell@democompany.com)
Creation Date: 9/15/00
Last Updated: 9/25/00
Comments: Used SuperDuperEdit 7.0 to build the page.
-->
</head>
<body>
...
</body>
</html>
HTML
10 HTML
HTML HTML
HTML
HTML HTML 2-12
HTML
2 Web
41
HTML
2-12
HTML
Alpha
2.8
Beta
Beta
2.9
Web
bugWeb
bug
42
Web
Web
navigation
AOL AOL
15
2 Web
43
2.9.1
Beta
bug
2.10
Web
2.11
Web
Microsoft FrontPage
Web
44
Web
2.12
Web
HTML
2
3
HTML

HTML 4.0 HTML 4.0 transitional specification

HTML
HTML
3.1
HTML
HTML
4 HTML
HTML HTML 4.0
idclassstyle title HTML
3.1.1 id
id <p> id
<p id="FirstParagraph">
This is the first paragraph of text.
</p>
FirstParagraph
<style type="text/css">
<!-#FirstParagraph {color: red;}
-->
</style>
<head> FirstParagraph
id bug
id 10 13
2 HTML
46
3.1.2 class
class class id class
<p id="FirstParagraph" class="important">

</p>
FirstParagraph important
class
<style>
<!-.important {background-color: yellow;}
-->
</style>
class important classid

10
3.1.3 style
style
<p style="font-size: 18pt">
</p>
18
style CSS
id class
CSS 10
3.1.4 title
title
<p title="Introductory paragraph">
</p>
title
tool tip
47
3.1.5
HTML 4.0
HTML dir
ltr rtl
<p dir="rtl">
This is a right to left paragraph.
</p>
ASCII
lang
<p lang="fr">
Cest Francais.
</p>
<p lang="en">
This is English.
</p>
HTML
3.1.6
HTML 4.0 HTML
Web HTML
onclick
<p onclick="alert(Ouch!)">
Press this paragraph
</p>
13 A
Web
HTML
3.2
heading 6 <h1><h2>
2 HTML
48
<h3><h4><h5><h6><h1><h6>
/ HTML
<h1> <h3>
/

<html>
<head>
<title>Heading Example</title>
</head>
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
</body>
</html>
3-1
3-1
align
49
align

<html>
<head>
<title>Heading Alignment Example</title>
</head>
<body>
<h1 align="left">Aligned Left</h1>
<h1 align="center">Aligned Center</h1>
<h1 align="right">Aligned Right</h1>
</body>
</html>
HTML 4.01 XHTML align
HTML HTML
<h1> UNIX Navigator

Windows Internet Explorer <h1>
3.3
HTML Tab
<p></p>
<p> align
HTML 4.01 align justify
3-2
2 HTML
50
3-2
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional //EN">

<html>
<head>
<title>Paragraph Example</title>
</head>
<body>
<p>This is the first paragraph in the example about the P tag.
There really isnt much to say here.</p>
<p align="center">This is the second paragraph. Again, more of the
same. This time the paragraph is aligned in the center. This might
not be such a good idea as it makes the text hard to read.</p>
<p align="right">Here the paragraph is aligned to the right. Right
aligned text is also troublesome to read. The rest of the text of
this paragraph is of little importance.</p>
<p align="justify">Under HTML 4.0 compliant browsers, you are able
to justify text. As you may notice, the way browsers tend to justify
text is sometimes imprecise. Furthermore, not all browsers support
this attribute value.</p>
</body>
</html>
<p> HTML <p>

<p>
51
<br><br>
XHTML <br />

<br> 1 17 XHTML
<br>
clear<br>
5 <br>
<p><br>
3-3
3-3

<html>
<head>
<title>Break and Paragraph Example</title>
</head>
<body>
<p>This is the first paragraph.<br>
Not much to say here, either. You can use
breaks within a paragraph<br><br>
like so.
</p>
<p><p><p>
<p>This is the second paragraph. Notice that the three P
tags are treated as empty paragraphs and ignored.</p>
<p>If you use breaks</p>
<br><br><br><br>
<p>youll get the desired result.</p>
</body>
</html>
2 HTML
52
3.4
<div><center>
<div> HTML <div>

HTML <div>
align <div>
<div> 10
<div><center>
HTML 2.0 Netscape
<center>HTML 3.2
<center></center>
<center> HTML 3.2 4.0
<center> HTML
HTML 4.01 DTD <center> <div align="center">
<center>
center
<div><img> align
<center><div> 3-4
3-4
<div><center>
53

<html>
<head>
<title>Center and Division Example</title>
</head>
<body>
<center>
<h1>This heading is centered</h1>
<p>This paragraph is also centered.</p>
</center>
<br><br>
<div align="right">
<h1>Division Heading</h1>
<p>Many paragraphs and other block elements
can be affected by a DIV at once</p>
<p>Notice all the paragraphs are right aligned</p>
</div>
</body>
</html>
3.4.1 Spans
<div>
<div><div>
<span>
<p>In this sentence <span class="important">some of the text is

important!</span></p>
<span> HTML
class
<div><span>
HTML 10
3.5
<blockquote>
<blockquote> </blockquote>
<blockquote> cite Web
2 HTML
54
<blockquote>
<q><q>
<q> HTML
4.0/4.01 <blockquote><q> cite
<blockquote><q> 3-5
3-5

<html>
<head>
<title>Quotation Example</title>
</head>
<body>
<h1 align="center">Demo Company Quotes</h1>
<p>See the comments the press has about DemoCompanys
futuristic products.</p>
<q>My friends friend said, <q cite="sounds fishy">My mothers
uncles cousin thinks that the Demo Company robot is the
greatest invention ever!</q></q>
<br>--George P. Somolovich, Ordinary Citizen
<blockquote cite="http://www.democompany.com">
Demo Companys products are by far the best fictitious products
ever produced! Gadget lovers and haters alike will marvel at the
sheer uselessness of Demo Company gadgets. Its a true shame that
their products are limited only to HTML examples!
</blockquote>
--Matthew J. Foley, Useless Products Magazine
<p>With kudos like this, you need to make sure to buy your
Demo Company products today!</p>
</body>
</html>
55
3.6
Tab HTML
Web
Tab
<pre></pre>
<pre>
Courier
<pre><pre>
3-6
3-6

<html>
2 HTML
56
<head>
<title>PRE Example</title>
</head>
<body>
<pre>
This is P
R E F
O
R
T
E
X
T
SPACES
are ok!
So are
RETURNS!
</pre>
<br><br>
<p>
This is NOT P
T
E
X
T
SPACES
and
RETURNS are lost.
</p>
</body>
</html>
<pre>
3.7
HTML <ol><ul>
<dl><menu><dir>
57
3.7.1
<ol></ol>
<li>
XHTML</li>
1
<ol>
<li>Item 1</li>
<li>Item 2</li>
. . .
<li>Item n</li>
</ol>
<li>
<li> HTML
<li>
<ol> 3 compactstart type
compact
compact
<ol> type a
AiI
1 1 <ol> type
<li> type
<li> type aAiI 1<li>
type
<li>
<ol> start
XXXI start
j <ol type="a" start="10"> j
10 <li> value

3-7
2 HTML
58
3-7

<html>
<head>
<title>Ordered List Example</title>
</head>
<body>
<p>Ordered lists can be very simple.</p>
<ol>
<li>Item 1
<li>Item 2
<li>Item 3
</ol>
<p>Ordered lists can have a variety of types.</p>
<ol>
<li
<li
<li
<li
<li
</ol>
type="a">Lowercase letters
type="A">Uppercase letters
type="i">Lowercase Roman numerals
type="I">Uppercase Roman numerals
type="1">Arabic numerals
<p>Ordered lists can start at different values

and with different types.</p>
<ol start="10" type="a">
59
<li>This should be j
<li value="3">This should be c
<ol>
<li>Lists can nest
<ol>
<li>Nesting depth is unlimited
</ol>
</ol>
</ol>
</body>
</html>
3.7.2
<ul></ul>
type type <ul>

<li><li> type
type type
circledisc square WebTV

3-8
2 HTML
60
3-8

<html>
<head>
<title>Unordered List Example</title>
</head>
<body>
<ul>
<li>Unordered lists
<ul>
<li>can be nested.
<ul>
<li>Bullet changes on nesting.
</ul>
</ul>
</ul>
<p>Bullets can be controlled with the TYPE attribute.
Type can be set for the list as a whole or item by item.</p>
<ul type="square">
<li>First item bullet shape set by UL
<li type="disc">Disc item
<li type="circle">Circle item
<li type="square">Square item
</ul>
</body>
</html>
61
3.7.3
<dl></dl><dt><dt>
definition term
<dd><dt> <dd>
XHTML
<dl> 3-9
3-9

<html>
<head>
<title>Definition List Example</title>
</head>
<body>
<h1 align="center">Definitions</h1>
<dl>
<dt>Gadget</dt>
<dd>A useless device used in many HTML examples.</dd>
<dt>Gizmo</dt>
<dd>Another useless device used in a few HTML examples.</dd>
</dl>
</body>
</html>
<dir><menu>
HTML
<menu><dir>
HTML
HTML 4.0
2 HTML
62
3.7.4
HTML
<ul> HTML <ul><dl>

<ul>
3-10
3-10

<html>
<head>
<title>List Indent Example</title>
</head>
<body>
<dl><dd><p>This paragraph is indented. Watch out for
the left edge. Get too close and youll hurt yourself!</p>
</dl>
<br><br>
<ul><ul>
<p>This paragraph is even further indented. Most HTML authors
and authoring tools tend to use this style to indent because
it takes fewer tags.</p>
</ul></ul>
</body>
</html>
63
3.8
<hr> HTML 2.0

HTML 3.2
HTML 4.0 XHTML
<hr>
<hr>
<hr>size
width align noshade
HTML 3.2 4.0
color
A
3-11
3-11
2 HTML
64

<html>
<head>
<title>Horizontal Rule Example</title>
</head>
<body>
<p>HR size of 10</p>
<hr size="10">
<p>HR width of 50% and no shading</p>
<hr width="50%" noshade>
<p>HR with width of 200 pixels, size of 3 pixels, and no shade</p>
<hr width="200" size="3" noshade>
<p>HR with width of 100, aligned right</p>
<hr align="right" width="100">
<p>HR with width of 100, aligned left</p>
<hr align="left" width="100">
<p>HR with width of 100, aligned center</p>
<hr align="center" width="100">
</body>
</html>
3.9
HTML <table><form>
Navigator Internet Explorer <frame><layer>
7 11
<address>
3.9.1 <address>
<address>
<address>
Demo Company, Inc.<br>
1122 Fake Street<br>
San Diego, CA 92109<br>
619.555.2086<br>
info@democompany.com<br>
</address>
65
<address>
HTML <address>
<ul>
<p>
3.10
HTML
<b> <i><strong>
<em>
3.10.1
HTML
3-1
3-1
<i> ... </i>
<b> ... </b>
<tt> ... </tt>
<u> ... </u>
<strike> ... </strike>
<s> ... </s>
<sub> ... </sub>
<sup> ... </sup>
<big> ... </big>
<small> ... </small>

<html>
<head>
<title>Physical Text Elements </title>
</head>
2 HTML
66
<body>
<h1 align="center">Physical Text Elements </h1>

<hr>
This
This
This
This
This
This
This
This
This
This
This
This
is
is
is
is
is
is
is
is
is
is
is
is
<b>Bold</b>
<i>Italic</i>
<tt>Monospaced</tt>
<u>Underlined</u>
<strike>Strike-through</strike>
also <s>Strike-through</s>
<big>Big</big>
even <big><big>Bigger</big></big>
<small>Small</small>
even <small><small>Smaller</small></small>
<sup>Superscript</sup>
<sub>Subscript</sub>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</body>
</html>
3-12
3-12
<u><big><small>
<u> HTML 2.0

Web
67
<big><small>
<big><small><big>
<small><big>
<small>HTML 1 7
<big>
3<big> 5<small>
<font> 6 HTML
<big><font size="+1"><small> <font size="1">
3.10.2
HTML
<strong><b>
HTML <strong>
strong Web HTML
<strong>
HTML
HTML
3-2
3-2
< acronym> ... </acronym>
<abbr> </abbr>
<cite> ... </cite>
<code> ... </code>
<dfn> ... </dfn>
<em> ... <em>
<kbd> ... </kbd>
2 HTML
68
<samp> ... </samp>
<strong> ... </strong>
<var> ... </var>
3-13
3-13
Navigator Internet Explorer

<html>
<head>
<title>Logical Text Elements</title>
</head>
<body>
<h1 align="center">Logical Text Elements</h1>
<hr>
<acronym>WWW</acronym> is an acronym
<br>
<abbr>WWW</abbr> is an abbreviation
<br>
This is <em>Emphasis</em>
<br>
This is <strong>Strong</strong>
<br>
This is <cite>Citation</cite>
<br>
This is <code>Code</code>
<br>
This is <dfn>Definition</dfn>
<br>
This is <kbd>Keyboard</kbd>
<br>
This is <samp>Sample</samp>
<br>
This is <var>Variable</var>
<br>
</body>
</html>
69
<dfn> Netscape Roman

Internet Explorer 4
<em>

3.11
HTML 4.01 <ins>

<del>
<p>There are <del>6</del><ins>5</ins> robot models</p>
title
datetime
<ins><del> 3-14
<center>
3-14
2 HTML
70

<html>
<head>
<title>Insert and Delete</title>
</head>
<body>
<del><h1>Old Heading</h1></del>
<ins><h2>New Heading</h2></ins>
<p>This paragraph needs some changes.
<ins datetime="1999-01-05T09:15:30-05:00"
title="New info inserted by TAP.">
This is a new sentence.</ins>
Here is some more text.</p>
</body>
</html>
3.12
HTML
HTML <>
HTML
escape
&code;
code 3-3
3-3
"
"
"
&
&
&
and
<
<
<
>
>
>

N/A

©
©
®
®

HTML 3-15
3-15

<html>
<head>
<title>Character Entities Example</title>
</head>
<body>
<h1 align="center">Demo Company Inc.s Tagging Products</h1>
<hr>
<p>Character entities like © allow users to insert
special characters like ©.
<p>One entity that is both useful and abused is the
non-breaking space.</p>
<br><br>
Inserting spaces is easy with  <br>
Look: S P
A C E
S.<br>
<hr>
71
2 HTML
72
<address>
Contents of this page © 1999 Demo Company, Inc.<br>
The <b>Wonder Tag</b> <P> is a registered
trademark of Demo Company, Inc.
</address>
</body>
</html>
HTML ISO Latin-1

HTML
HTML C
3.13
HTML HTML HTML


<!-Document Name: Sample HTML Document

Author: Thomas A. Powell
Creation Date: 1/5/00
(c) 2000 Demo Company, Inc.
-->
--
<head>
HTML HTML
<style><script> 10 13
73
<style>
<head>
H1
{font-size: 48pt; color: red;}
</style>
<style>
HTML
<!-H1
{font-size: 48pt; color: red;}
-->
</style>
<style>
XHTML HTML
A
3.14
HTML
HTML
HTML
HTML
H
hypertext
HTML
HTML
World Wide
Web
URLUniform Resource Locator
4.1
HTML <a>
anchor
HTML
<a>hrefhref URL
URL http://www.democompany.com
<a><a
href="url">Visit our site</a>
Visit our sitehref
<a>
<html>
<head>
<title>Simple Link Example</title>
</head>
<body>
<h1 align="center">Lots of links</h1>
<hr>
<ul>
<li>Visit <a href="http://www.yahoo.com">Yahoo!</a></li>
<li>Just a <a href="http://www.democompany.com">Demo Company
</a></li>
<li>Go to the <a href="http://www.w3.org">W3C</a></li>
</ul>
</body>
</html>
Web
75
4-1
Demo Company
Demo Company URL
4-1
HTML
<a> URL
URL
76
2 HTML
URL
specs.htmextras
access.htm
<html>
<head>
<title>Simple Link Example 2</title>
</head>
<body>
<h1 align="center">Green Gadgets</h1>
<hr>
<p>Here you will find
information about the mysterious green
gadget--the wonder tool of the millennium.</p>
<ul>
<li><a href="specs.htm">specifications</a></li>
<li><a href="extras/access.htm">accessories</a></li>
</ul>
<p align="center">
<a href="../index.htm">Back to Demo Company Home</a>
</p>
</body>
</html>
URL HTML URL

URL URL
HTML
URL URL
4.2
URL
URL Internet
URL http://www.democompany.com/
URLInternet
FTP HTML URL
URL
URL
77
4.2.1
Internet
1. Internet intranet
IP
2.
URL
HTTP
URL
protocol://site address/directory/filename
URL
Internet
TCP/IP
Internet
FQDN fully qualified domain name
www.microsoft.com www microsoft.com
Web
sun.com sun Sun

Microsystems Sun sun com
com gov org edu net

mil
2 3
2 HTML
78
4-1
4-1
2000
com
apple.com
net
cerf.net
org
greenpeace.org
edu
ucla.edu
gov
whitehouse.gov
mil
nosc.mil
us
K 12
co.san-diego.ca.us
FQDN
machine name. domain name . domain type . country code
ca
mx jp
www.sony.co.jp Web Sony co co

comac Web
www.ox.ac.uk ac academic edu education
Sony
int
eu.int
comnet
79
Web
http://rs.internic.net/
http://www.iana.org/
http://www.gtld-mou.org/

IP
UNIX Web
/ DOS \ 4-2
4-2
4-2 special
products products
/products/special/ special products
2 HTML
80
./../ special
../ products
Macintosh test:1.htm
test/1.htm Macintosh PC UNIX
HTML .htm .html JPEG .jpg
MIME 15
Web
Internet
Web HTTP Web

HTTP Web

81

HTTP TCP/IP
File
FTP
Gopher
Gopher
mailto
SMTP
SMTP Internet
SMTP
(NNTP)
USENET
News
USENET
telnet
telnet
URL
LDAPIRCInternet
phonefax TV
URL
URL
URL mailto
FTP telnet
username:password@server-address URL
username@server-address

URL
HTTP 80
URL
site-address:8080
2 HTML
82
HTML
URL #
test.htm contents
test.htm#contents<a name=
"contents"></a> 4.4.1 name
URL US-ASCII
URL
ASCII
first quarter
earnings 1999.doc
Web
URL first%20quarter%20earnings%201999.doc
%2020 ASCII URL
/
%2F%3F%25
$ - _ . + ! * URL
HTML
4-2 URL

URL URL
4
4-2
83
Space
%20
%2F
%3F
%3A
%3B
&
%26
%40
%3D
%23
%25
>
%3E
<
%3C
%7B
%7D
%5B
%5D
"
%22
%27
%60
^^
%5E
%7E
%5C
%7C
4.2.2 URL
URL
protocol_name:resource_description
HTTP
HTTP URL
http://server/ (/)
http://www.democompany.com/
HTTP URL
Web http://www.democompany.com http://
www.democompany.com/
index.htm default.htm
84
2 HTML
index.html default.html
HTTP URL URL
HTTP URL HTML
http://server/file
http://www.democompany.com/hello.htm
http://server/directory/
http://www.democompany.com/products/
HTTP URL
http://server/directory/file
http://www.democompany.com/products/greeting.htm
UNIX
http://server/~user/
http://www.bigisp.com/~jsmith/
~ UNIX
URL HTML
4.4.1 name
#
85
http://server/directory/file#marker
http://www.democompany.com/profile.htm#introduction
HTML HTTP URL
http://www.democompany.com/images/logo.gif GIF
HTML HTTP
HTML URL
HTTP URL
CGICommon Gateway Interface
CGI 12
HTML
URL
URL
ASCII %20
http://server/directory/file?parameters
http://www.democompany.com/products/search.cgi?cost=400.00&name=Super%
20Part
URL
HTML
12~14
HTTP 80
http://server:port/directory/file
http://www.democompany.com:8080/products/greetings.htm
URL Web 8080
URL
HTTP
SSLSecure Sockets Layer https
443 HTTP
s HTTP URL
https://server:port/directory/file
https://www.welllsfargo.com
HTTP URL URL
URL
2 HTML
86
file
localhost
file://drive or network path/directory/file

file:///dev/web/testpage.html
Macintosh URL
file:///Macintosh %20HD/Desktop%20Folder/Bookmarks.html
URL pc1 C
file://\\pc1\C\Netlog.txt
URL Internet Explorer 4
Web
Web Web
FTP
FTP
HTTP
FTPFTP URL HTTP

ftp://server:port/directory/file
ftp://ftp.democompany.com:9978/info/somefile.exe
FTP URL ftp://
ftp.democompany.com
ftp://server/directory path/file
ftp://ftp.democompany.com/info/somefile.exe
87
FTP FTP
FTP
FTP
anonymousftp
FTP FTP URL
FTP URL
ftp://user:password@server/directory/file
ftp://jsmith:harmony@ftp.democompany.com/products/list
URL HTML
HTML
URL
ftp://user@server/directory/file
ftp://jsmith@ftp.democompany.com/products/sales
FTP FTP URL
a ASCII
i /
URL d
ftp://server/directory/file;type=code
ftp://ftp.democompany.com/products;type=d
FTP URL
URL 21
mailto
mailto Internet
mailto:user@server
mailto:president@whitehouse.gov
2 HTML
88
Internet
mailto URL
URL
mailto URL

telnet
telnet
telnet URL
telnet://server
telnet://host.democompany.com
telnet
telnet FTP
telnet URL FTP URL
HTML
telnet://user:password@server
telnet://jsmith:harmony@host.democompany.com
telnet://jsmith@host.democompany.com
telnet URL
telnet://server:port
telnet://host.democompany.com:94
telnet 23
URL telnet URL
Gopher, NNTP, news

URL wais
wais
89
finger VEMMI
URL
URL http://www.w3.org/pub/WWW/Addressing/schemes
http://www.ics.uci.edu/pub/ietf/uri/
4.2.3 URL
URL URL URL
URL URL URL

URL <base>
URL
www.democompany.com URL
staff.html
http://www.democompany.com/staff.html
staff.html http://
www.democompany.com/
4-3
4-3
URL
URL
http://www.democompany.com/index.htm
http://www.democompany.com/staff.htm
staff.htm
http://www.democompany.com/index.htm
products/gadget1.htm
http://www.democompany.com/products/
gadget1.htm
index.htm
products/gadget1.htm
../index.htm
URL
URL
URL
URL../../../images/logo.gif
<base>
HTML
<base>
2 HTML
90
URL<base> href
URL URL <base>
<base href="http://www.democompany.com/">
http://www.democompany.com/ URL <base>
XHTML <base href="http://www.democompany.com/"/>
<base>
URL
HTML <base>
A
4.3
HTML
URL
URLURIURC URN
4.3.1 Anchor
URL Internet
HTML
<a>
URL
<a> href URL
HTTP URL HTML URL
<a>
<a></a>
Linked
content href URL
<a href="URL">Linked content</a>

Web
HTTP
<a href="http://www.whitehouse.gov/">Visit the President</a>
91
HTTP URL
<a href="http://www.democompany.com/about/">About Demo Company</a>
URL
<a href="http://www.democompany.com/products/domes.htm">D.C.
Domes</a>
URL
<a href="http://www.democompany.com/products/domes.htm#top">Go to
top</a>
<a href="products/robots.htm">Robots</a>
URL
<a href="../../index.htm">Back to home</a>
URL
<a href="ftp://ftp.democompany.com">Access FTP archive</a>
HTTP URL
<a href="mailto:info@democompany.com">More information?</a>

HTML URL
<html>
<head>
<title>Link Example 3</title>
</head>
<body>
<h1 align="center">Green Gadgets</h1>
<hr>
<p>Here you will find information about the mysterious green
gadget--the wonder tool of the millennium.</p>
<ul>
<li><a href="specs.htm">Specifications</a></li>
<li><a href="extras/access.htm">Accessories</a></li>
<li><a href="http://www.democompany.com">Distributors</a></li>
<li><a href="ftp://ftp.democompany.com/pdfs/order.pdf">
Download order form</a></li>
</ul>
2 HTML
92
<div align="center">
<a href="../index.htm">Back to Demo Company Home </a>
</div>
<hr>
<address>
Questions?
<a href="mailto:info@democompany.com">info@democompany.com</a>
</address>
</body>
</html>
4-3
4-3
4.3.2
0
HTML <body> linkalink
vlink link vlink
alink
HTML HTML
93

<html>
<head>
<title>Link Style Changes</title>
<!-A
{text-decoration: none;}
A:hover {color: red; text-decoration: underline;}
-->
</style>
</head>
<body link="blue" alink="red" vlink="red">
<a href="http://www.yahoo.com">Test Link to Yahoo!</a>
</body>
</html>
HTML
HTML
HTML
4.4
href <a> 4-4
A <a>
4-4
href
URL
name
id
2 HTML
94
target
title
accesskey
tabindex
tab tab
rel
rev

4.4.1 name
<a>
HTML <a>
name href name
HTML <a name="marker">This is a

marker</a>This is a marker#marker
<a>
<a name="top"><a name="top"></a>

<a>
<a name="yahoolink" href="http://www.yahoo.com/">Yahoo!</A>
<a>
95
<a name="top"></a>
<a href="#top">Top of the document</a>
#
HTML URL
#
<a href="http://www.democompany.com/products/robots.htm#specs">
Robot Specs</a>
robots.htm specs

<html>
<head>
<title>Name Attribute Example</title>
</head>
<body>
<a name="top"></a>
Go to the <a href="#bottom">bottom</a> of this document.<br>
Link right to a
<a href="../examples/chapter4/testfile.htm#marker1">marker</a>
in another document.
<p>To make this work we need to simulate the document being very long
by
using many breaks.</p>
<br><br><br><br><br><br><br><br><br>
<strong id="middle">the middle</strong>
<hr>
<a name="bottom" href="#top">return to top</a>
<a href="#middle">go to middle</a>
</body>
</html>

4.4.2 Title
3 title
title
Internet
2 HTML
96
Explorer
title
<a href="staff/index.htm" title="Resumes and information about our
staff">Staff</a>
title URL 4-4

Internet Explorer 4
4-4
Internet Explorer title
title
<title>
title title
4.4.3
HTML 4 <a> accesskey
11 accesskey
ALT
<a href="http://www.yahoo.com/" accesskey="Y">Yahoo!</a>
Yahoo! ALT+Y
HTML Internet Explorer 4
97
Netscape Communicator 4
Netscape
HTML 4-5
4-5
File
Edit
Communicator
View
Go
Favorites
Netscape Communicator
Internet Explorer
4.4.4 tabindex
<a> tabindex tab
tabindex tab
tabindex <a
href="about.htm" tabindex="1"> tab
tabindex

4.4.5 target
target 8 HTML 4
target <a>
target
2 HTML
98
<a href="http://www.yahoo.com/" target="display_frame">
URL display_frame
target
target _blank_self_parent
_top<a>
A 8
4.4.6
<a>
rel href
<a href="words.htm" rel="glossary">
rev rel
rel nextrev
prev
<a href="page2.htm" rel="next" rev="prev">Page 2</a>
rel rev
<a><link>
rel rev
rel rev
4.4.7
JavaScript HTML 4 , <a>
onclick, onmouseover, onmouseout
onclick
onmouseover
onmouseout
Netscape
F1 HTML
13
4.5
99
<a>
HTML
<img><img> 5
<html>
<head>
<title>Anchors and Images</title>
</head>
<body>
<b>Button with a border</b><br>
<a href="about.htm">
<img src="about.gif" alt="About Button" height="55" width="55">
</a>
<br><br>
<b>Same button without a border</b><br>
<a href="about.htm">
<img src="about.gif" alt="About Button" border="0" height="55"
width="55">
</a>
</body>
</html>
border "0"
<img></a>
4-5
<img></a>
4-5
100
2 HTML
Web
4.6
URL
1.
2. Web URL
Imagemap
3. URL
4. URL
URL
x y
URL HTML

URL
101
4.6.1
<a>
<img><a> href URL
<img> ismap

4-6
<img> border
0
4-6
<html>
<head>
<title>Server-side Image Map Example</title>
2 HTML
102
</head>
<body>
<h1 align="center">Server-side Imagemap Test</h1>
<a href="http://www.htmlref.com/examples/chapter4/shapes.map">
<img src="shapes.gif" ismap border="0" width="400" height=
"200"></a>
</div>
</body>
</html>
4-6
URL
HTML
4.6.2
<img> usemap <map>
<img><img src=
"controlbar.gif" usemap="#controlmap">
<a><img> border
0
<map>
<map>
HTML
<map> name usemap

<img><map></map>
<map></map>
<area><map>
HTML <area>XHTML <area>
4-6
4-6
<area>
shape
rect, circle poly
coords
x, y
href
URL
id
103
target
nohref
N/A
alt
title
tabindex
tab
onclick
onmouseover
onmouseout
<area>hrefshape coordshref URL

URLshape coords
shape rect
shape circle
coords x y shape poly
shape="default"

4-7 area
4-7
left-x, top-y, right-x, bottom-y
<area shape="rect"
coords="0,0,100,50"
href="about.htm">
center-x, center-y, radius
<area shape="circle"
coords="25,25,10"
href="products.htm">
x1, y1, x2, y2, x3, y3,
<area shape="poly"
coords="255,122,306,53,334,62,255,122"
href="contact.htm">

(0,0) x y
<area shape="rect"
coords="0,0,50%,50%">
2 HTML
104
HTML HTML
Allaire Homesite (http://www.allaire.com) Macromedia Dreamweaver
(http://www.macromedia.com) 4-7
4-7
Mapedit (http://www.boutell.com/mapedit) Windows UNIXMapMaker (http://

www.kickinit.net/mapmaker/) Macintosh

4-8
4-8

<html>
<head>
<title>Client-side Image Map Example</title>
</head>
105
<body>
<h1 align="center">Client-side Imagemap Test</h1>
<img src="shapes.gif" usemap="#shapes" border="0" width="400"
height="200">
</div>

<map name="shapes">
<area shape="rect" coords="6,50,140,143" href="rectangle.htm"
alt="rectangle">
<area shape="circle" coords="195,100,50" href="circle.htm"
alt="circle">
<area shape="poly" coords="255,122,306,53,334,62,338,0,388,77,
374,116,323,171,255,122" href="polygon.htm" alt="polygon">
<area shape="default" href="defaultreg.htm">
</map>
</body>
</html>
ismap
usemap
<a href="shapes.map">
<img src="shapes.gif" usemap="#shapes" border="0" ismap width="400"
height="200"></a>
4.6.3
<area>
<img> border
target
<a><area>
target target
target
<area shape="rect" coords="0,0,50%,50%"

href="http://www.yahoo.com"
target="display_frame">
href URL"display_frame"
target
target _blank_self_parent _top
2 HTML
106
<area>
A 8
nohref
nohref

nohref nohref

<html>
<head>
<title>Nohref Example</title>
</head>
<body>
<img src="donut.gif" width="300" height="300" border="0"
alt="donut widget" usemap="#donut">
<map name="donut">
<area shape="circle" coords="150,150,81" nohref>
<area shape="circle" coords="150,150,146" href="donut.htm">
<area shape="default" nohref>
</map>
</body>
</html>
""
"" ""
Netscape
Internet Explorer
nohref
<map>
<area>nohref
nohref <area>
<area> URL
alt title
alt
title
alt alt title
alt
107
alt
4-9
4-9
HTML
4-10
ismap
2 HTML
108
4-10
HTML
tabindex
HTML 4 <area>
tabindex tab
tabindex tabindex
tab
<area shape="rect" coords="0,0,50%,50%"
href="http://www.yahoo.com/"
tabindex="1">
tabindex HTML
JavaScript VBScript
<area>onclick, onmouseover onmouseout
<area>
4.7
109
<link>
title
HTML <link>
<link>
<link><link>
<link>
<link> HTML
href rel<a> href href URL rel
rel <link>
<link href="url" rel="relationship"> HTML 4 <link>
rev title title <link>
rel rev
4.7.1
<a> rel <link> rel
rel
HTML 4 4-8
4-8
rel
alternate
<link href="frenchintro.htm"
lang
appendix
rel="alternate" lang="fr">
<link href="intro.htm"
rel="appendix">
bookmark
title
<link href="index.htm"
rel="bookmark"
title="homepage">
chapter
<link href="ch01.htm"
rel="chapter">
2 HTML
110
contents
<link href="toc.htm"
index
rel="contents">
<link href="docindex.htm"
rel="index">
glossary
copyright
<link href="glossary.htm"
rel="glossary">
<link href="copyright.htm"
rel="copyright">
<link href="page2.htm"
next
WebTV
rel="next">
prev
<link href="page1.htm"
section
<link href="sect07.htm"
rel="previous">
start
rel="section">
<link href="begin.htm"
rel="start">
stylesheet
<link href="style.css"
rel="stylesheet">
subsection
<link href="sect07a.htm"
rel="subsection">
help
<link href="help.htm"
rel="help">
HTML 4 HTML
prev next rel
rev
4.7.2 WebTV <link>
<link> WebTV WebTV <link>
rel next href
WebTV
<link> <link rel="next"
href="second.htm"> second.htm
111

4.7.3 <link>
<link> typemedia target
Internet Explorer Netscape<link>
HTML
<link rel="stylesheet" href="corpstyle.css"> corpstyle.css
rel stylesheet
alternate stylesheet
title
title
basestyle.css 640480 1024768
<link rel="alternate stylesheet" title="640by480"

href="small-1.css">
<link rel="alternate stylesheet" title="640by480"
href="small-2.css">
<link rel="alternate stylesheet" title="1024by768" href="big.css">
<link rel="stylesheet" href="basestyle.css">
Web
title
<link> type
type
type
<link rel="stylesheet" href="corpstyle.css" type="text/css">
type MIME
<link> media
<link rel="stylesheet" media="print" href="corp-print.css">

<link rel="stylesheet" media="screen" href="corp-screen.css">
media printprojectionscreenbrailleaural
tv all all
2 HTML
112
Internet
4.8
Star Trek
Internet
URL
4.8.1 URL
URL URL
URL
URL
URL
URL
404 Not Found
URL
http://pint.com/about
URL http://www.democompany.com/prod1
http:// http://
URL
URL DNS
HTML 4 W3C
Internet
W3C DNS
URL
Internet
113
4.8.2 URNURC URI

Internet
ISBN
URL HTML 4
URL
URL
URN
URNURC URI
URNUniform Resource Name
DNS
URN URL IP
URN
URN www.democompany.com
IP 192.102.249.3
DNS URL
URN URL URN
URL DNS
URN urnbooktitle ,
urn:isbn0-12-518408-5
URC
URCUniform Resource Characteristic
Uniform Resource Citation
/
URC <meta> PICS URC
2 HTML
114
URLURN URC Demo

Company Corporate Summary URN urn://corpid:55127

Demo Company Corporate Summary URC
http://www.democompany.com/about/corp.htm
http://www.democompany.co.jp/about/corp.htm.
URI
URIUniform Resource Identifier

URL PURLs
(www.purl.org) Handles (www.handle.net) URN URC
URN
URC
URL URI
URL
4.8.3 URL
URL Internet URL
Internet
WebTV
URL
URL tv://channelchannel
nbc or nbc7-39
URL
nbc URL
phone://phone-number
phone://+1-555-270-2086
fax://phone-number
115
URL
clip
URL URL URL
mozart.audio 2:05
URL
URL W3 www.w3.org/Addressing/
4.9
URL
Internet URL
URL
URL<a>
HTML
<link>
<a> rel rev <link>
16
<meta>
HTML
URNURC URL
URI URN
HTML
3
5
HTML
HTML
HTML Web GIF

JPEG
HTML <img>
Web
5.1
HTML
Web GIF (Graphics Interchange Format
.gif) JPEGJoint Photographic Experts Group.jpg .jpeg
PNG(Portable Network Graphics.png) Web

5-1
GIF JPEG

5-1
Web
GIFGraphics Interchange Format
.gif
JPEGJoint Photographic Experts Group
.jpg .jpeg
XBMX Bitmaps
.xbm
XPMX Pixelmaps
.xpm
PNGPortable Network Graphics
.png
Web GIF
5 HTML
117
JPEG
5-2 GIF JPEG
5-2 Web
GIF
8-bit256
24-bit
JPEG
5.1.1 GIF
GIF Run-Length Encoding

GIF Flat-style
GIF GIF
GIF 8 256
(Dithering)
Web GIF Netscape Microsoft

browser-safe 216 Macintosh Windows
8 GIF
118
GIF Transparency
GIF halo
effectanti-aliasing
GIF interlacing
5-1
5 HTML
119
(Previsualization)
GIF
GIF
5-1
GIF
Netscape 2 GIF89a GIF89a

GIF
GIF
GIF
GIF
5-2
5-2
GIF
120
8 GIF
GIF Web
GIF JPEG
GIF
gjg
5.1.2 JPEG
JPEG.jpg
.jpeg JPEG Joint Photographic Experts Group
JPEG
JPEG 24 GIF
JPEG
5-3 JPEG
JPEG
JPEG GIF
JPEG
Web GIFJPEG
progressive JPEG Progressive JPEG
GIF Progressive JPEG
Netscape
2.x progressive JPEG
5-3
GIF JPEG
5.1.3 PNG
Portable Network GraphicsPNG GIF89a
5 HTML
121
Gamma 8-bit
PNG PNG GIF
Internet Explorer 4 PNG

Netscape Communicator
Web
Browser Sensing PNG
5.1.4
GIFJPEG PNG Flash
.swf Scalable Vector GraphicsSVG
Fractal Wavelet
Web HTML
5.2
HTML
<img><img> src
URL 4 URL URL,
URLimage URL logo.gif
GIF
<img src="logo.gif">
<img src="http://www.democompany.com/images/logo.gif">
URL
images
robot.gif GIF
Macintosh
GIF HTML <img>
122

<html>
<head>
<title>Image Example</title>
</head>
<body>
<h2 align="center">Image Example</h2>
<img src="images/robot.gif" width="234" height="150" border="0">
</body>
</html>
5-4
5-4
<img>
HTML 2 src <img>ismapalign

altNetscape Microsoft
HTML 4
5.2.1 alt
alt
5-5 alt
title alt
title
alt title
5 HTML
5-5
123
alt 1024
Netscape 4
Netscape Microsoft
text-only 5-6
Netscape Lynx
5-6
124
text-only
pwWebSpeakwww.issound.com
1 2

Web
alt
alt accessibility
Demo
Demo
Demo
Demo
alt=" "
alt
alt
5.2.2
HTML 2 align
3 topbottom middle
align
align HTML 2
5-7
<html>
<head>
5 HTML
125
<title>Basic Image Alignment</title>

</head>
<body>
<p><img src="images/aligntest1.gif" align="top" border="1">
This text should be aligned to the top of the image.</p>
<p><img src="images/aligntest1.gif" align="middle" border="1">
This text should be aligned to the middle of the image.</p>
<p><img src="images/aligntest1.gif" align="bottom" border="1">
This text should be aligned to the bottom of the image.</p>
</body>
</html>
5-7
HTML
5-8
5-8
126
Netscape align left right

image <img src="logo.gif" align="left">
<img src="logo.gif" align="right">
HTML
align 5-9
<html>
<head>
<title>Improved Text Flow</title>
</head>
<body>
<img src="images/redsquare.gif" align="left">
The top image has its align attribute set to "left," so the text flows
around it to the right. The top image has its align attribute set
to "left," so the text flows around it to the right. The top image
has its align attribute set to "left," so the text flows around it
to the right.
<br clear="left"><br><br>
<img src="images/redsquare.gif" align="right">
The bottom image has its align attribute set to "right," so the text
flows around it to the left. The bottom image has its align attribute
set to "right," so the text flows around it to the left. The bottom
image has its align attribute set to "right," so the text flows
around it to the left.
</body>
</html>
5-9
5 HTML
127
<br>
align
<img>align center
middle center
<p align="center">,<div align="center">
<center>
Netscape Microsoft align texttopbaselineabsmiddle
absbottom
Style sheets 10
align texttop
baseline
baselineadsmiddle adsbottom
yg
adsbottom baseline g
5.2.3 :hspace vspace
Netscape hspace vspace HTML 3.2
hspace vspace
pixel
hspace
vspace ()
5-10
<html>
<head>
<title>HSPACE and VSPACE Example</title>
</head>
<body>
<p>The image below has its <tt><b><HSPACE></b></tt> and
<tt><b><VSPACE></b></tt> attributes set to 50 pixels, so the
text will flow around it at a distance of 50 pixels. The rest of this
text is dummy text. If it said anything interesting you would certainly
be the first to know.
<img src="images/redsquare.gif" align="left" hspace="50"
vspace="50">
This is dummy text. If it said anything interesting you would certainly
128
be the first to know. Theres really no point in reading the rest

of it. This is dummy text. If it said anything interesting you would
certainly be the first to know. Theres really no point in reading
the rest of it. This is dummy text. If it said anything interesting
you would certainly be the first to know. Theres really no point
in reading the rest of it. This is dummy text. If it said anything
interesting you would certainly be the first to know. Theres really
no point in reading the rest of it. This is dummy text. If it said
anything interesting you would certainly be the first to know. Theres
really no point in reading the rest of it. This is dummy text. If
it said anything interesting you would certainly be the first to know.
Theres really no point in reading the rest of it.
</p>
</body>
</html>
5-10
hspace vspace
10
vspace hspace Web

6 invisible pixel gif
5.2.4 <br>
5-11
5 HTML
5-11
129
clear <br>
HTML clear
clear leftrightall noneleft
right
all
clear none
<br> clear
5-12
<html>
<head>
<title>Break and Clear Example</title>
</head>
<body>
<img src="images/building.jpg" width="234" height="150" border="2"
alt="Outside of the DemoCompany corporate headquarters"
align="left" hspace="20" vspace="10">
<b>Photo:</b> Demo Company, Inc Corporate Headquarters<br><br>
<b>Description:</b> This building is a fine example of the <i>Miami
Vice</i> influence on mid-80s southern California architecture.
<br><br>
The next paragraph should appear under the photo, not next to it,
thanks to the <tt><br clear="left";</tt>.
130
<br clear="left">
<i>Photo copyright © 1999 by Demo Company, Inc.</i>
</body>
</html>
5-12
<br clear>
5.2.5
HTML 3.2 <img> height weight
1~100
test.gif 10
150<img src="test.gif" height="10" weight="150">height weight
<img>

height weight
height weight
height weight
<img
5 HTML
131
src="greenpixel.gif" height="100" weight="100">( 100 )
height weight 100%
height weight
height weight
1
5.2.6
Netscape <img> lowsrc
HTML 4 lowsrc URL
src lowsrc
<img src="hi-res-photo.gif" lowsrc="bw-photo.gif" height="100"

width="100"alt="Outside of building photograph">
lowsrc
lowsrc height weight
lowsrc lowsrc
Netscape
lowsrc
lowsrc src
( T1)lowsrc
src
GIF GIF src lowsrc
<embed><object> Flash
9
132
<img> A <img>
5.3
4 <a>
<a href="http://www.democompany.com"><img src="logo.gif"></a>
URL
5-13 URL
5-13
border 0 :
<a href="http://www.democompany.com"><img src="logo.gif"
border="0"></a>
5-14
5 HTML
5-14
133
JavaScript
13 JavaScript
border
border
border <img src="portrait.gif"
border="5">
5.4
4 image map
URLserver
sideclient side
URL HTML
URL
URL
text-only
134
5.4.1
<a><img>
<a> href URL
<img> ismap
<img> border 0
4
HTML
5.4.2
<img> usemap
<map><img><img src=
"controlbar.gif" usemap="controlmap"><img> border
0<map> HTML body
<map> HTML
<map>nameidentifier
<img> usemap <map>
</map><map></map>"shapes"
shapes <area><map> 4
Macromedia Dreamweaver
Allaire HomeSite
MapEdit www.boutell.com/mapedit
usemap ismap
<a href="shapes.map">
<img src="shapes.gif" usemap="#shapes" border="0" ismap width="400"
height="200"></a>
<area>
<img> border 4 A
5 HTML
135
5.4.3 <object>
classid name HTML head

HTML
style
<img> 10
onmouseover
13
Java
<img> HTML 4 <object>
<object data="images/logo.gif">Picture of the Demo Company

building</object>
<img>alternative rendering<object>data
URL
<object>
<object>
A
5.5
HTML
Web
DesignThe Complete Reference
http://www.webdesignref.com
5.5.1
Adobe PhotoshopAdobe Illustrator Macromedia

Fireworks
Web Web
136
Eyewirewww.eyewire.com
5.5.2
fair use
fair use
fair-use

fair use
(creative)(factual)
fair use

Paramount Pictures
Paramount
5.5.3

GIF JPEG
5 HTML
137

GIF
30 32 5-bit
8-bit Macromedia Fireworks Adobe Photoshop

GIF
Progressive JPEG
HTML
altheight weight alt
height weight
Amazon Yahoo!
138
5.6
<img> altheight
width lowsrcaccessibilityusability
HTML
<img>
align
<object><img>
HTML
HTML
<ul>
HTML
CSSCascading
Style Sheets HTML CSS
HTML
6.1
Web
20
4
Web
140
6.2
Web HTML
HTML
HTML
align <spacer>
<multicol> HTML
CSS
HTML
6.2.1 HTML
HTML
<ul>

<html>
<head>
<title>Unordered List Layout</title>
</head>
<body>
<ul>
This is indented text
</ul>
<ul><ul>
This text is indented more.
</ul></ul>
<ul><ul><ul><ul><ul><ul><ul><ul><ul><ul><ul><ul><ul><ul><ul><ul>
This is indented heavily, but may not produce the effect you expect.
</ul></ul></ul></ul></ul></ul></ul></ul>
</ul></ul></ul></ul></ul></ul></ul></ul>
</body>
</html>
6-1 http://www.htmlref.com/examples/chapter06/
ulindentation.htm
HTML <blockquote>
WYSIWYGindent
HTML
6-1
141
<ul>
HTML <pre> 3
<pre>Tab <pre>
Courier
6.2.2 Non-Breaking Spaces
tab <pre>
&nbsp&#160
&nbsp&nbsp
&nbsp

Now we are ten spaces from the left!
&nbsp
&nbsp
&nbsp
<p> </p>
142
<br><br>
&nbsp
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<ul>
<li>Item 1<br><br></li>
</ul>
&nbsp
<ul>
<li>Item 1<sub> </sub></li>
<li>Item 2<sub> </sub ></li>
<li>Item 3<sub> </sub ></li>
</ul>
HTML
143
6.2.3 <center>
Netscape <center>
<center>
HTML
<center>Welcome to Demo Company!</center>
<center><center>
HTML 4 <center><div
align="center">align
6.2.4 Alignment
HTML 3.2 HTML 4.0 <center> align
<div> align leftcenter right HTML 4.0
justify align ltr
left to right rtlright to left
justify
IE Netscape
<p>,<table><h1><h2><h3><h4><h5><h6> align
align
5 <img> align

6.2.5 <nobr><wbr>
Microsoft
Netscape <nobr><wbr>
<nobr>
<nobr>
<nobr>This is a very important long line of text, so it should not

be allowed to break across two lines.</nobr>
<nobr>
144
WebTV
80%<nobr> WebTV
WebTV
<nobr><wbr><nobr>
<wbr> HTML <wbr>
<br><nobr>
<wbr><wbr>
<wbr>
<nobr>This is a very important long line of text that should not
break across two lines. If the line must be split, it should
happen here <wbr> and nowhere else.</nobr>
<wbr><nobr>
6.2.6
5 HTML 2.0 <img> align topbottom
middle align
align
HTML
Netscape align left right
image <img src="logo.gif" align="left">
<img src="logo.gif"
align="right">,
HTML Netscape Microsoft

align texttopbaselineabsmiddle absbottom
5 A
clear <br>
HTML clear
clear leftrightall none
clear none<br>
<br clear="left">
<br clear="right">
<br clear="all">
145
align <br>
<img>
hspacevspace align
6.2.7
QuarkXPress
QuarkXPress
HTML alignhspace
vspace
width
10
<p><img src="pixel.gif" width="10" align="left">This is the start
of the paragraph.</p>
HTML 10
10
hspace vspace
CSS
<img> height width align
<img src="pixel.gif" height="100" width="50" align="left">
pixel.gif stop
6-2
Netscape <spacer>
146
6-2
6.2.8 <spacer>
Netscape 3.0 <spacer>
<spacer>
<spacer>
type horizontalvertical
block
75
This is the start of the sentence <spacer align="left"

type="horizontal" size="75"> and this is the end.
<spacer><spacer>
24 <spacer>
This is line one.

<spacer align="left" type="vertical" size="24">
This is line two
<spacer> type
horizontal
vertical block <spacer>
HTML 150 100
... text...
<spacer type="block" height="150" width="100" align="left">
... text...
align bottom
147
<spacer><br clear="left">
<spacer> Netscape
alt
<spacer>
6.2.9 <multicol>
<spacer> Navigator 3.0 <multicol> Netscape
<spacer>
Netscape Internet Explorer
Netscape
<spacer><spacer>
HTML
<multicol> cols
<gutter>
10 <multicol><width>
width
cols
<multicol>
<multicol
cols="number of columns"
gutter="gutter width in pixels or percentage"
width="column width in pixels or percentage">
Text to put in column form
</multicol>
<multicol> http://www.htmlref.com/examples
/chapter06/multicol.htm 6-3
Internet Explorer IE <multicol>
<html>
<head>
<title>MULTICOL Example</title>
</head>
148
<body>
<multicol cols="2" gutter="50" width="80%">
This only works in Netscape, so dont try this at home!
The rain in Spain falls mainly on the plain. Now is the time
for all good men to come to the aid of the country. Theres
no business like show business. The rain in Spain falls
mainly on the plain. Now is the time for all good men to
come to the aid of the country. Theres no business like
show business. The rain in Spain falls mainly on the plain.
Now is the time for all good men to come to the aid of the
country. Theres no business like show business. The rain
in Spain falls mainly on the plain. Now is the time for all
good men to come to the aid of the country. Theres no business
like show business. The rain in Spain falls mainly on the plain.
The rain in Spain falls mainly on the plain.
</multicol>
</body>
</html>
6-3
<multicol> Netscape Navigator Internet Explorer
<multicol>
6-4
<wbr><multicol>
cols 6 6-5
<wbr>
6-4
6-5
149
<multicol>
<multicol>
<multicol> Netscape
<blink><marquee><bgsound><multicol>
HTML
7 10 HTML
6.3
HTML 2.0
150
proportional fontfixed-width font

Netscape Internet Explorer Times Times New
Roman Courier Courier
<tt><pre>
HTML 2.0
12 10
Netscape Navigator 1.1 Netscape <font>

size Navigator 2.0 color
Microsoft face size
color HTML 3.2 HTML 4.0
HTML
HTML 4.0 <font>

color red
#ff0000RGB E
<font color="red">This is important</font>
This is important<font>
<font> size 7
1 7 1 7
<font size="7">This is big</font> 3
<basefont>
<font size="+1">
+
size +1 +61 6<font
size="+10"> 7
Microsoft <font> face

HTML 4.0 face
Britannic Bold
<font face="Britannic Bold">This is important</font>
151
HTML
face
Arial Helvetica Sans

Serif
<font face="Arial, Helvetica, Sans-serif">This should be in a
different font</font>
face MacintoshWindows UNIX
6-1 MacintoshWindows UNIX

6-1
Windows
Macintosh
UNIX*
Arial
Chicago
Charter
Comic Sans MS
Courier
Clean
Courier New
Geneva
Courier
Impact
Helvetica
Fixed
Times New Roman
Monaco
Helvetica
Symbol
New York
Lucida
Verdana
Palatino
Sans Serif
Wingding
Symbol
Serif
Times
Symbol
Times
Utopia
* UNIX X Windows
<font face="Arial,Helvetica,sans-serif">A sans-serif font</font>

<br>
<font face="Verdana, Arial, Helvetica, sans-serif">
A sans-serif font 2</font>
<br>
<font face="Times New Roman, Times, serif">A serif font</font>
<br>
<font face="Georgia, Times New Roman, Times, serif">A serif font
2</font>
<br>
<font face="Courier New,Courier,monospace">A mono spaced
font</font>
152
6-6 Windows Macintosh
6-6
Microsoft Office
AlgerianBook Antiqua
Bookman Old StyleBritannic BoldDesdemonaGaramond
Century GothicHaettenschweiller
Internet Explorer 4.0 Microsoft WebDings
WebDings
6-7
6-7
Microsoft WebDings
W3C
Microsoft
&audio
WebDings GIF
<font> 6-8
6-8
<font>

<html>
<head>
<title>Font Element Demo</title>
</head>
<body>
<h2 align="center">Font Sizing</h2>
<font size="1">Font size 1</font><br>
This is <font size="+2">+2 from the base size.</font>
Now it is <font size="-1">-1 from base size.</font>
<h2 align="center">Font Color</h2>
<font color="red">Red Text</font><br>
<font color="#ffcc66">Hex #ffcc66 color</font>
<h2 align="center">Font Face</h2>
<font face="Arial">Set font to common fonts like Arial</font><br>
<font face="Viner Hand ITC">Take a chance on an unusual
153
154
font</font><br>
Even set text to dingbat characters
<font face="Webdings">f3khilqm </font><br>
<h2 align="center">Common Font Face Combinations</h2>
<font face="Arial,Helvetica,sans-serif">
Arial,Helvetica,sans-serif</font><br>
<font face="Verdana, Arial, Helvetica, sans-serif">
Verdana, Arial, Helvetica, sans-serif</font><br>
<font face="Times New Roman,Times,serif">
Times New Roman,Times,serif</font><br>
<font face="Georgia, Times New Roman, Times, serif">
Georgia, Times New Roman, Times, serif</font><br>
<font face="Courier New, Courier, monospace">
Courier New, Courier, monospace</font><br>
<h2 align="center">Combination</h2>
You can <font size="+2" color="red" face="Arial">set all font
attributes at once!</font>
</body>
</html>
6.3.1
<head><basefont><basefont>
colorface size <font> color RGB
RGB hexadecimal equivalent valueface
size 1 7
<basefont>+
Arial Helvetica 6 <head><basefont

color="red" face="Arial, Helvetica" size="6"> A <basefont>

"" "
" ""
6.3.2
Microsoft Windows
WindowsMacintosh UNIX
155
Microsoft OpenTypewww.microsoft.com/
typography
Netscape Dynamic Fonts BitStream

TrueDocwww.truedoc.com
Netscape 4.0 Internet Explorer 4.0
6.3.3 Netscape
Netscape <font> face
10
PFRPortable Font Resource Netscape <link>

rel fontdef src
URL<link> head
<html>
<head>
<title>Netscape Font Demo</title>
<link rel="fontdef" src="http://www.htmlref.com/examples/
chapter06/fonts/customfonts.pfr">
</head>
<body>
<font face="newfont">
Content rendered in the font "newfont" which is part of the pfr
file.
</font>
</body>
</html>
Netscape 4.0 <font>

point-size point point size weight
100 900 100 weight 100
900 <b>
weight 900
156
.pfr GIF
6.3.4 Microsoft
Microsoft
<font> 10
www.microsoft.com/typography Microsoft Microsofts

Web Embedding Fonts Tool
.eot CSS

<html>
<head>
<title>Microsoft Font Test</title>
<!
@font-face {
font-family: Ransom;
font-style: normal;
font-weight: normal;
src:
url(http://www.htmlref.com/examples/chapter06/fonts/ransom.eot);
}
-->
</style>
</head>
<body>
<font face="ransom" size="6">Example Ransom Note Font</font>
</body>
</html>
6-9
Netscape
@font-faceMicrosoft
W3C Internet Explorer
WEFT Microsoft Typography
157
www.microsoft.com/typography
6-9

" "

6.4
HTML
HTML 4.0
HTML 4.0 16
HEX RGB 6-2
<font color="yellow"></font>
6-2
E
Netscape Microsoft
Internet Explorer
<body bgcolor="html color names are troublesome">
6-2
HTML 4.0
Black (#000000)
Green (#008000)
Silver (#C0C0C0)
Lime (#00FF00)
Gray (#808080)
Olive (#808000)
White (#FFFFFF)
Yellow (#FFFF00)
Maroon (#800000)
Navy (#000080)
Red (#FF0000)
Blue (#0000FF)
158
Purple (#800080)
Teal (#008080)
Fuchsia (#FF00FF)
Aqua (#00FFFF)
chilidog brownstale beer yellow

Netscape dodgerblue
RGB RGB
0~255
00~FF 0,255,0 00,FF,00
FF,00,00 00,00,FF 00,00,00
FF,FF,FF
HTML # RRGGBB RGB
color #FFFF00 yellow
E HTML
http://www.htmlref.com/Reference/AppE/colorchart.htm
6.5
<body>
<body> body
<body>bgcolor
Mosaic Macintosh
<body>
RGB
bgcolor bgcolor
<body bgcolor="#FFFFFF"><body bgcolor="white">
<body> text
<body bgcolor="white" text="green">
<font> color
<body>
<body> linkalink vlink
link HTML
159
alink
alink link
vlink vlink
vlink

<html>
<head>
<title>Colors</title>
</head>
<body bgcolor="#FFFFFF" text="#008000" link="#FF0000"
vlink="#FF00FF" alink="#FF0000">
... Content to color ...
</body>
</html>
(linkalinkvlink)
Gamma
160
6.6
<body> background
background GIF JPEG URL
<body background="images/tile.gif">
URLbackground
background 200300
6-10
6-10
Photoshop
6-11
6-11
161
5 1600 GIF
GIF 200
1600
6-12
6-12
GIF
6-13
6-13
( GIF)
162
10
HTML
6.6.1 Internet Explorer

Internet Explorer <body>
bgproperties
Internet Explorer 3.0 IE <body>
bgproperties="fixed"
6.7
<body>Internet Explorer 4 Netscape 4

Internet Explorer <body>
leftmargin topmarginleftmargin="25"
25 topmargin="15"
15
Netscape marginheight marginweight
HTML <body>
<body topmargin="0" leftmargin="0" marginheight="0" marginwidth
="0">
<head><style>

</style>
163
{margin: 0px; }
CSS
HTML 4 XHTML
6.8
HTML
HTML
HTML
GIF
<spacer>
HTML
HTML
HTML
<table> Web
10
7.1
HTML
HTML
Web
HTML
HTML
HTML
7.1.1
HTML 4 HTML
<table>...</table><tr>...</tr>
<th> </th><td> </td>
border 1
7-1
<html>
<head>
<title>Simple Table Example</title>
</head>
<body>
<table border="1">
<caption>Basic Fruit Comparison Chart</caption>
<tr>
<th>Fruit</th>
<th>Color</th>
165
</tr>
<tr>
<td>Apple</td>
<td>Red</td>
</tr>
<tr>
<td>Avocado</td>
<td>Green</td>
</tr>
<tr>
<td>Watermelon</td>
<td>Pink</td>
</tr>
</table>
</body>
</html>
7-1
<tr></tr><tr>
<td></td><th>
</th><table> cols
Internet Explorer 4
<table border="1" cols="2">
<th>
<td><td><th>
<caption></caption>
caption
HTML <tr><th><td>
HTML HTML
166
Netscape
XHTML
7.1.2 rowspan colspan
rowspan colspan
7-2
<html>
<head>
<title>Rowspan and Colspan Example</title>
</head>
<body>
<table border="1">
<caption>ROWSPAN Example</caption>
<tr>
<td rowspan="2"> Element 1</td>
<td> Element 2</td>
</tr>
<tr>
<td> Element 3</td>
</tr>
</table>
<br><br>
<table border="1">
<caption>COLSPAN Example</caption>
<tr>
<td colspan="3"> Element 1</td>
</tr>
<tr>
<td> Element 2</td>
<td> Element 3</td>
<td> Element 4</td>
</tr>
</table>
</body>
</html>
7-2
167
<td><th> rowspan colspan

3 <td rowspan="3">
2 <th colspan="2"> colspan rowspan
<table border="1" cellspacing="0" width="120">

<tr>
<td>1</td>
<td>2</td>
<td rowspan="2">3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</table>
<table border="1" cellspacing="0" width="120">

<tr>
<td>1</td>
<td>2</td>
<td rowspan="2">3</td>
</tr>
168
<tr>
<td>4</td>
<td>5</td>
</tr>
</table>
<table> <td><th>
<caption>
<!doctype html public "-//w3c//dtd html 4.0 transitional//en">

<html>
<head>
<title>Complex Table Example</title>
</head>
<body>
<p>Notice how the text of a paragraph
<table align="left" border="1" width="300">
<caption align="bottom">The Super Widget</caption>
<tr>
<td rowspan="2"><img src="widget.gif" alt="super widget"
width="100" height="120"></td>
<th bgcolor="lightgreen">Specifications</th>
</tr>
<tr>
<td>
<ul>
<li>Diameter: 10 cm
<li>Composition: Kryptonite
<li>Color: Green
</ul>
</td>
</tr>
</table>
can flow around a table just as it would any other
embedded object form. Notice how the text of a paragraph
embedded object form. Notice how the text of a paragraph
embedded object form.</p>
</body>
</html>
169
<table>
7.1.3
HTML
10 Web
width <table> width

80%
<td><th>
width
400 50 100

<html>
<head>
<title>Table Layout</title>
</head>
<body>
<table border="0">
<tr>
<td width="50"> </td>
<td width="400">
<h1 align="center">Layout is here!</h1>
<hr>
<p>This is a very simple layout that would
have been nearly impossible to do without tables.</p>
</td>
</tr>
</table>
</body>
</html>
border 0<table>
border

100
<html>
170
<head>
<title>Table Layout with Background</title>
</head>
<body background="yellowtile.gif">
<table width="550">
<tr>
<td width="100">
<a href="about.htm">About</a><br><br>
<a href="products.htm">Products</a><br><br>
<a href="staff.htm">Staff</a><br><br>
<a href="contact.htm">Contact</a><br><br>
</td>
<td width="450">
<h1 align="center">Welcome to Demo Company, Inc.</h1>
<hr>
<p>This text is positioned over a white background;
the navigation links are over a colored background.
This layout combines a table with a background images.
</p>
</td>
</tr>
</table>
</body>
</html>
7-3 <body>
bgcolor bgcolor Netscape
Navigator 3 Internet Explorer
10
7-3
HTML
171
sticky HTML
HTML
<table align="left" bgcolor="#ffffcc" cellpadding="20" hspace="15"
vspace="15">
<tr>
<td>This is an important point!</td>
</tr>
</table>
<table> bgcolor
RGB cellpadding
sticky width
bgcolor bgcolor
<table><tr><th><td>
<table border="1" cellspacing="0" cellpadding="8" bgcolor="green">
<tr>
<th bgcolor="lightblue">a</th>
</tr>
<tr bgcolor="orange">
<td>b</td>
<td>b</td>
<td>b</td>
</tr>
<tr>
<td bgcolor="red">c</td>
<td bgcolor="white">c</td>
<td bgcolor="blue">c</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
th
tdtr
<td> bgcolor
172
<table>
7-4
7-4
<table> cellspacing
0 Internet Explorer Opera
cellspacing
0
<thead><tfoot> HTML 4.0
bgcolor IE 4
Internet Explorer 4 table

bordercolor Internet Explorer 4
<table bordercolor="#ff0000" border="1">
<tr><td>. . . content . . .</td></tr>
</table>
Netscape 4
Internet Explorer
Netscape 5
Internet Explorer 4 bordercolor tr
thtd
Internet Explorer 4 bordercolordark

bordercolorlight
173
<table bordercolorlight="#ff0000" bordercolordark="#0000ff"

border="4">
<tr><td>...content...</td></tr>
</table>
Internet Explorer 4
Netscape
Microsoft
<table cellspacing="0" cellpadding="0" border="0" width="200">
<tr>
<td bgcolor="#000000">

<tr>
<td bgcolor="#FFFFFF" width="100">Cell 1</td>
</tr>
<tr>
</tr>
</table>

</td></tr></table>
bgcolor black
bgcolor white cellspacing 1
Netscape Netscape 3
background Microsoft
<table width="220" border="1" cellpadding="0" cellspacing="0"

background="smalltabletile.gif">
.... other table elements...
</table>
174
Internet Explorer
Netscape
<tr> Internet Explorer

Netscape
background
<table width="220" border="1" cellpadding="0" cellspacing="0">
<tr>
<td width="110" background="bigtabletile.gif"> <td>
<td width="110" background="smalltabletile.gif"> </td>
</tr>
</table>
height width
<table width="220" border="0" cellpadding="0" cellspacing="0">

<tr>
<td background="bigtabletile.gif" height="100" width="100"
align="center"><b>hello!</b></td>
<td width="120" background="smalltabletile.gif"> </td>
</tr>
</table>
Internet Explorer 5 Netscape 4

Netscape 3
175
colspan
<td><table> cellpadding
10 7-5
<html>
<head>
<title>2-Column Document Layout with Table</title>
</head>
<body>
<tr>
<td colspan="2" align="center">
<font face="arial black, helvetica, sans-serif" size="+2">
FEZ: IMPERIAL JEWEL OF MOROCCO</font></td>
</tr>
<tr>
<td width="50%" valign="middle">
<font face="arial, helvetica, sans-serif" size="+1">
<b>Beyond the Bou Jeloud Gate....</b></font></td>
<td width="50%" align="center">
<img src="boujeloud002.jpg" width="240" height="185" border="0">
</td>
</tr>
<tr>
<td colspan="2" align="center">
<font face="Arial, Helvetica, Sans-serif">
<b><i>Luckily, a major UNESCO restoration project is
now underway...</i></b></font></td>
</tr>
<tr>
<td width="50%" valign="top">Part of the problem....</td>
<td width="50%" valign="top">Major landmarks....</td>
</tr>
</table>
</body>
</html>
176
7-5

<html>
<head>
<title>Demo Company - Early Home Page Concept</title>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0" width="570">
<tr>
<td>
<img src="roof.gif" border="0" height="45" width="124">
</td>
<td colspan="4">
<img src="logo.gif" border="0" height="45" width="446">
</td>
</tr>
<tr>
<td valign="top" rowspan="7" width="124">
<img src="building.gif" border="0" height="248" width="124">
</td>
<td rowspan="7" valign="top" width="185">
<img src="headline.gif" border="0" height="45" width="185">
And now, thanks to our merger with Massive Industries, we are now
the worlds largest manufacturer of Gadgets and other
useless products.
<br><br>
To learn more about our products or our growing monopoly,
click on any of the links to the right.</td>
<td rowspan="3" width="68" valign="top">
<img src="curve.gif" border="0" height="108" width="68">
</td>
<td colspan="2" width="193" valign="top">
<img src="blank.gif" border="0" height="35" width="193">
</td>
</tr>
<tr>
<img src="widgets.gif" border="0" height="35" width="193">
</td>
</tr>
<tr>
<img src="gadgets.gif" border="0" height="38" width="193">
</td>
</tr>
<tr>
<td colspan="2" rowspan="4" width="136" valign="top">
<img src="gear.gif" border="0" height="140" width="136">
</td>
<td valign="top" width="125">
<img src="sales.gif" border="0" height="29" width="125">
</td>
</tr>
<tr>
<img src="about.gif" border="0" height="36" width="125">
</td>
</tr>
<tr>
<img src="history.gif" border="0" height="35" width="125">
</td>
</tr>
<tr>
<img src="map.gif" border="0" height="40" width="125">
</td>
</tr>
<tr>
177
178
<td colspan="2" width="309"> </td>

<img src="lowcurve.gif" border="0" height="31" width="125">
</td>
</tr>
</table>
</body>
</html>
cellpadding cellspacing 0
height width
7-6
7-6
GIF JPEG
JPEG GIF
Macromedia Fireworks Photoshop

.psd
GIF / JPEG HTML
www.macromedia.com/software/fireworks/
colspan rowspan
179
Fireworks
colspan
<br>
180
HTML


... table elements ...



... table elements ...

7.1.4
<table> bordercellpadding cellspacing

0border
cellpadding cellspacing cellpadding
cellspacing

XHTML
<th><td>
colspan rowspan
background <td>
<table><tr>
Microsoft bordercolorbordercolordark bordercolorlight
IE intranet
rowspan colspan
7.1.5
181
HTML 4
5 <table><caption><tr><th><td>
HTML 4
<col><colgroup><thead><tfoot><tbody> HTML 4 HTML
<table>
<caption> . . . </caption>
<thead><tfoot>
<tbody>
<tr>
<th><td>
<colgroup><col>
</table>
HTML 4
<thead><tfoot>
Microsoft
HTML 4
<html>
<head>
<title>HTML 4.0 Tables</title>
</head>
<body>
<table border="1" frame="box" rules="groups">
<caption>Fun with Food</caption>
<colgroup>
<col>
</colgroup>
<colgroup>
<col align="center">
<col align="char" char=".">
</colgroup>
<thead>
<tr>
<th bgcolor="yellow">Fruit</th>
<th bgcolor="yellow">Color</th>
<th bgcolor="yellow">Cost per pound</th>
</tr>
</thead>
<tbody>
<tr>
182
<td>Grapes</td>
<td>Purple</td>
<td>$1.45</td>
</tr>
<tr>
<td>Cherries</td>
<td>Red</td>
<td>$1.99</td>
</tr>
<tr>
<td>Kiwi</td>
<td>Brown</td>
<td>$11.50</td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="3">This has been another fine table example.</th>
</tr>
</tfoot>
</table>
</body>
</html>
<table> frame rules frame

box
abovebelowhsidesvsideslhsrhsvoid
border A
frame rules rules
rules groups
rules nonegroupsrowscols all
<thead><tbody><thead>
<tr>
<th><td>
<thead> <tfoot>
<tbody>
<thead><tfoot><tbody>
<tbody>
<thead><tfoot><tbody> body
col align char align
char
<col align="char" char=".">
183
HTML Allaire HomeSite

ColdFusion Studio DreamWeaver
HTML 4 MicrosoftNetscape WebTV
7.2
Microsoft
Microsoft background
bordercolorbordercolordarkbordercolorlight
accesskeytabindex hidefocus accesskey tabindex Internet
Explorer 4 5
hidefocus Internet Explorer 5.5
accesskey tabindex Tab
hidefocus tabindex
A
Microsoft datapagesize datasrc
Internet Explorer 4
7.3
184
CGI
HTML HTML
Microsoft HTML
HTML
HTML
<object> HTML
15 <object><object>
ActiveX HTML
HTML
HTML <td> <th>
HTML
alphabet.txt
Letter, Thing
A, Apple
B, Boy
C, Cat
D, Dog
E, Elephant
F, Fox
G, Girl
H, Hat
HTML

<html>
<head>
185
<title>Data Binding Example</title>

</head>
<body>
<object id="alphabet"
classid="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83">
<param name="DataURL" value="alphabet.txt">
<param name="UseHeader" value="True">
</object>
<table datasrc="#alphabet" border="1">
<thead>
<tr bgcolor="yellow">
<th>Letter</th>
<th>Reminder</th>
</tr></thead>
<tbody>
<tr align="center">
<td><span datafld="Letter"></span> </td>
<td><span datafld="Thing"></span></td>
</tr>
</tbody>
</table>
</body>
</html>
HTML alphabet.txt
Internet Explorer 4
7-7
7-7
Internet Explorer 4
TDCTabular Data Control Microsoft
186
ActiveX
Microsoft ADOActiveX Data Objects control

ActiveX TDC
DataURL TDC
TDC Web
TDC UseHeader TDC
<table> datasrc
<object>
#<object> id
datasrc
datafld
"Column1""Column2"
<td> datafld <td>
datafld <span>
<div><object><img>
<img datafld="Picture"> datafld
mypict.gif
Microsoft datapagesize
<table>
<table datasrc="#alphabet" border="1" datapagesize="3">
alphabet.txt AB C
<thead><tfoot>
<tbody>
Microsoft Web Workshop

http://msdn.microsoft.com/workshop/
http://www.microsoft.com/
data/ado/rds/
7.4
187
HTML
10
8
frame layer
HTML Web
frame
8.1
8-1
8-1
189
URL
Web
frame-phobic Web HTML 4
8.1.1
Web Web
URL
8.1.2

8-2
20% links.htm
80% display.htm
basicframes.htm
basicframes.htm HTML
<frameset> <body> <frameset>
rows cols
<frameset cols="20%, 80%"><frameset rows="10%, 80%,
10%"> 10%80% 10%
<frameset> <frame><frameset>
<frame><frame src="URL of framed document"
name="unique frame name">
190
8-2
Internet Explorer
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 frameset//EN">

<html>
<head>
<title>Frame Example 1</title>
</head>
<frameset cols="20%, 80%">
<frame src="links.htm" name="links">
<frame src="display.htm" name="display">
<noframes>
<body>
<p>This document uses frames.
Please follow this link to a
<a href="noframes.htm">no frames</a>
version.</p>
</body>
</noframes>
</frameset>
</html>
links.htm 20%
display.htm 80%<frame>
<frameset>
<frame>src
URL links.htm display.htm
links.htm
<html>
191
<head>
<title>Links</title>
</head>
<body>
<h2>Links</h2>
<hr>
<a href="http://www.democompany.com" target="display">Demo
Company</a>
</body>
</html>
display.htm
<html>
<head>
<title>Display</title>
</head>
<body>
<h2>Display</h2>
<hr>
<p>Contents of second frame and link clicks will be displayed here.</p>
</body>
</html>
basicframes.htm
8-2 http://www.htmlref.com/examples/
chapter08/basicframes.htm
8.1.3 <noframes>
<noframes> HTML
Web <noframes> <frameset>
<noframes> <frameset>
XHTML<noframes>
<body> HTML HTML 4 <noframes>
<body>

<html>
<head>
<title>Simple Noframes Example</title>
</head>
<frameset cols="20%,80%">
<frame src="links.htm" name="controls">
<noframes>
<body>
<h2>No Frame Navigation</h2>
192
<hr>
<a href="http://www.yahoo.com">Yahoo</a>
<br>
<a href="http://www.microsoft.com">Microsoft</a>
<br>
<a href="http://www.netscape.com">Netscape</a>
</body>
</noframes>
</frameset>
</html>
Netscape 1.x
8-3
8-3
PDA
indexing spider <noframes>
<noframes>
<noframes>
8.1.4
control
display
1. <frame> name
193
2. <a> target <a href="http://www.yahoo.

com" target="display"> display href
target
window1
frame3
displayregionHTML
id name
id id
<frame> id name
target
8-1
8-1
target
_blank
_self
_parent
_top
target _top
target _top
target _top
target _blank
JavaScript 13
_parent _parent
target _self
HTML target
links.htm
<a> target http://www.htmlref.com/examples/chapter08/
frametargetting.htm linktargets.htm
194

<head>
<title>Link Targeting</title>
</head>
<body>
<h2 align="center">Test Links</h2>
<hr>
<ul>
<li><a href="http://www.yahoo.com" target="display">
Yahoo in frame named display</a>
<li><a href="http://www.hotbot.com" target="_blank">
HotBot in new window</a>
<li><a href="http://www.infoseek.com" target="_self">
Infoseek in this frame</a>
<li><a href="http://www.excite.com" target="_top">
Excite over whole window</a>
<li><a href="http://www.google.com" target="_parent">
Google over the parent window (should be whole window)</a>
<li><a href="http://www.democompany.com" target="mysterywindow">
Demo Company in a window that hasnt been named</a>
</ul>
</body>
</html>
mysterywindow
8-4
8-4
8.2
195
rows cols
<frameset cols="200,400"> 200
400 600
150
175
175
*<frameset cols="175,*">
3
<frameset rows="100, *, 50">
<frame src="header.htm" name="header">
<frame src="footer.htm" name="footer">
</frameset>
<frameset>
<frameset cols="200, *">

<frame src="links.htm" name="controls">
<frameset rows="100, *">
<frame src="header.htm" name="header">
</frameset>
</frameset>
3
8-5 http://www.htmlref.com/examples/chapter08/
nestedframes.htm
<frame>
<frameset>
8-6 http://www.htmlref.com/examples/
chapter08/fixedframes.htm
196
8-5
8-6

<html>
<head>
<title>Frame Example 3</title>
</head>
<frameset rows="100, *, 100">
<frame src="blue.htm" name="top">
<frameset cols="100,*,100">
<frame src="blue.htm" name="left">
<frame src="center.htm" name="center">
<frame src="blue.htm" name="right">
</frameset>
<frame src="blue.htm" name="bottom">
</frameset>
</html>
197
blue.htm center.htm
blue.htm
<html>
<head>
<title>Blue</title>
</head>
<body bgcolor="blue">

</body>
</html>
center.htm
<html>
<head>
<title>Center</title>
</head>
<body bgcolor="white">
<h2 align="center">Frame Fun!</h2>
</body>
</html>
HTML 4.01 frameborder

1 0
<frame src="links.htm" name="controls" frameborder="0">
Netscape 2<frameset> frameborder
Internet Explorer
<frameset> framespacing 0
scrolling Auto
yes no
noresize
<frame src="test.htm" name="frame1" border="0" noresize scrolling=

"no">
198
marginheight marginwidth<body>
Netscape
0
<frame src="blue.htm" name="right" marginwidth="0" marginheight=
"0">
idclassstyle title <frame><frameset>

Internet Explorer
A
8.2.1 floating frame
Microsoft
HTML 4
<iframe> HTML <body>

<frame> <frame> <frameset>
<frameset><body>
<iframe> srcheight widthsrc URL
height width
<img> align
Internet Explorer hspace vspace HTML 4.01
CSS 10
<frame><iframe><iframe>
</iframe> HTML

<html>
<head>
<title>Floating Frame Example</title>
</head>
<body>
<h1 align="center">Floating Frame Example</h1>
<iframe name="iframe1" src="fileone.htm" width="350" height="200"
align="left">
199
There would be a floating frame here if your browser supported it.

</iframe>
<p>This is a simple example of how floating frames are used. Notice
that in many ways the floating frame acts very similar to an inline
image. Floating frames act like embedded objects in many ways.</p>
</body>
</html>
8-7 Netscape 4.x

<iframe><iframe> Internet Explorer 5.5
Netscape 6 http://www.htmlref.com/examples/
chapter08/iframe.htm
<a> target
<a href="http://www.democompany.com" target="iframe1">Load in

iframe</a>
Netscape 2.x3.x 4.x Opera

<iframe>
<iframe> <img><object>
A <iframe>
8-7
<iframe>
200
8.2.2
Web
8.2.3
URL
Netscape 2
Back
Internet Explorer
Netscape
URL
URL URL URL
Internet Explorer 4
Microsoft
201
<noframes>
Web Design: The

Complete Reference
007212297-8 5
8.3
HTML Web
CSS <frame>
HTML
10
HTML
1993 Mosaic
9.1
Web MIDI
MP3 Real Player RealJukebox
MIDI MP3 - RealAudio

URL
9.1.1
KHzCD
44.1KHz 44100 8 bits
16 bits CD 705600 bits 44100
16=705600
CD bits Internet
T1
8KHz
64000 bits
9 HTML
203
9.1.2
/
CODEC
9.1.3
Internet WAV
waveform AUSparc-audio u-law
AU AIFF
MIDIMusical Instrument Digital Interface Microsoft
<bgsound> 9.1.5 Netscape
LiveAudio <embed> LiveAudio
Netscape
MIDI
MIDI
PC MIDI
MIDI 9-1
9-1
MP3MPEG level 3MP3
9-1
Internet
WAV
Waveform Wave Windows WAV

Mac
AU
Sparc-audio u-law Internet
AIFF
AIFF Mac
204
MIDI
MIDI MIDI
MIDI
PC
9.1.4 MP3
MP3 MPEGMoving Picture Experts Group
MP3 CD 10~12
MP3 .mp3
3Mb CD 30Mb
MP3 MP3
CD
CD MP3 CD
CD
MP3
MP3 MP3
9.1.5
MP3 <a>
<a href="thememusic.mp3">Demo Company Theme Music</a><br>

<a href="theme.midi">Theme Music 2</a><br>
<a href="robotsound.wav">Robots in Action</a><br>
<a href="robotsound.wav"><img src="speaker.gif" height="10" width=

"10" border="0">Robots in Action</a> [wav format / 10k]
9 HTML
205
Microsoft <bgsound>
Microsoft <bgsound>
Microsoft Internet Explorer 2 WAV MIDI <bgsound>
<bgsound> src URL

loop
loop infinite
Internet Explorer test.wav
<bgsound src="test.wav" loop="2">
<bgsound> XHTML
<bgsound src="test.wav" loop="2"/>
Internet Explorer
9.1.6 RealAudio
MP3 WAV Internet
Webcasting
streaming RealNetworks
www.realnetworks.com RealAudio
RealAudio
streaming
28.8Kbps
2K 2K
2K
Internet
Internet Internet
TCP/IP Internet
TCP
Transmission Control Protocol
206
RTSPReal Time Streaming Protocol
reservation
fee structure
Internet
28.8Kbps
drop-out
10 15
Internet
cable DSL Internet
RealNetworks
RealNetworks RealAudio
Netscape ActiveX
RealNetworks RealPlayer
8 RealAudio Internet
WAV RealAudio
RealNetworks RealAudio
RealAudio
serverless
Web RealAudio
per-stream
RealAudio RealAudio
Web
9 HTML
207
RealAudio RealAudio
RealAudio
Web RealAudio RealAudio
RealProducer

RealAudio <a>
RealProducer .rm
.ram
<a href="http://www.democompany.com/audio/robotdrone.ram">
Hear our happy robots drone!</a>
.ram .rm URL

http://www.democompany.com/audio/robotdrone.rm
RealPlayer RealPlayer
.rm 9-1 RealAudio Web
RealServer
packagemultiple stream
9-1
RealAudio RealPlayer
.ram
Synchronized Media Integration LanguageSMIL.smil
SMIL 17
RealAudio
RealAudio <object><embed><embed>
208
<embed src="http://www.democompany.com/audio/robotdrone.rpm"
nojava="true" height="100" width="250" autostart="false">
.rpm .ram RealPlayer

Web .ram .rpm .ram
.rm URL
RealPlayer Netscape 6
autostart
autostart="true" autostart="false"
<object>
<object id="robotdrone"
classid="clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA"
width="75" height="30">
<param name="src"
value="http://www.democompany.com/audio/robotdrone.rpm">
<param name="controls" value="PlayButton">
</object>
.rpm id
classid clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA
RealAudio <param> src
.rpm URL<param>
PlayButton IE 5.5
RealAudio RealPlayer
RealAudio
RealAudio RealNetworks
9.1.7 WindowsMedia
Microsoft
WindowsMediawww.windowsmedia.comWindowsMedia .asf
Advanced Streaming Format
Windows Media Encoder WAV
MP3 .asf RealMedia
9 HTML
209
.asx
<a href="robotdrone.asx">Hear our happy robots drone!</a>
.asx
<ASX version="3">
<Entry>
<ref href="robotdrone.asf" />
</Entry>
</ASX>
.asx WindowsMedia
WindowsMedia Player 7 Windows 98
Windows 2000 Windows 95 Windows NT
WindowsMedia
MacintoshWindowsMedia
WAV
MIDI
AU
AIFF
MP3
WindowsMedia Audio.wma
WindowsMedia CD 9.2
9.2
Internet 30
www.cnn.com
Internet
NTSCTV 640480 24 bit

30 27 Mb
CD 705600 bit
Internet TV
TV
210
CODEC
/
9-2
9-2
Internet
AVI
AVI Windows AVI
QuickTime
Apple QuickTime MOV QuickTime

Internet QuickTime
CODEC QuickTime MPEG
MPEG
MPEG MPEG
QuickTime
CODEC QuickTime
9.2.1
AVI <a>
<a href="movie.avi">Demo Company History</a><br>
<a href="movie.avi"><img src="tv.gif" height="10" width="10">

Robots in Action</a> [AVI format / 1200k]
Internet Explorer AVI

Internet Explorer <img> dynsrc
<img> dynsrc Internet Explorer 2 AVI
<object><embed>
dynsrc AVI ActiveMovie
<img>
dynsrc URL
9 HTML
211
dynsrc="URL of active content"
controls
controls
loop
1 infinite
loop="value"
<img> start dynsrc

start fileopen
mouseover fileopen
Start="fileopen | mouseover"
<img> dynsrc AVI

Internet Explorer 4 9-2
<html>
<head>
<title>DYNSRC Viewed Under Internet Explorer</title>
</head>
<body>
<font size="4">
This example shows use of the DYNSRC element, with the CONTROL
attribute, as viewed in an Internet Explorer browser.</font>
<img src="critter.gif" dynsrc="critter.avi" controls align="left"
vspace="20">
</body>
</html>
9-2
Internet Explorer dynsrc
212
Windows
Netscape 3 Internet Explorer AVI Macintosh
QuickTime QuickTime Internet Explorer Netscape
Windows AVI AVI
RealVideo
HTML
QuickTime
9.2.2 QuickTime
QuickTime 4 5 Apple
MIDI QuickTime Apple
PC QuickTime
CODEC CinepackIndeoMPEG CODEC
Cinepack QuickTime MPEG
QuickTime Adobe Premiere package
QuickTime

QuickTime <embed> HTML
<embed src="URL of QuickTime object"
align="top | bottom | center | baseline | left |
right | texttop | middle | absmiddle | absbottom"
autoplay="true | false"
cache="true | false"
controller="true | false"
height="pixels or percentage"
hidden
href="URL of page to load"
hspace="pixels"
loop="true | false | palindrome"
playeveryframe="true | false"
pluginspage="URL of page with plug-in information"
scale="tofit | aspect | number"
target="valid frame name"
volume="0 - 100"
vspace="pixels"
width="pixels or percentage">
src QuickTime URL

align <img>
autoplay true false
cache true false cache true
9 HTML
213
cache
false
controller true false
24
height
controller
true
height width
width height
height height
0 1 height
24
height
hidden
hidden off
autoplay true
href URL controller
false href
href
autoplay
hspace <img>
loop loop true
false loop palindrome
playeveryframe true false true
playeveryframe
true
pluginspage
URL Netscape Internet
Explorer http://
quicktime.apple.com QuickTime
scale scale tofitaspect
1.5 scale 1 aspect
height weight
tofit height weight
214
target target href

_blank
target 8
volume 0~100 QuickTime
volume 0 100
100volume
QuickTime
vspace
<img>
width
width scale
aspect height weight
width width
hidden 0 1
QuickTime 9-3
<html>
<title>QuickTime Support Under Netscape</title>
<body>
<font size="4">This example shows a frame from a promotional
clip for QuickTime, as viewed in a Netscape browser.</font>
<embed src="quicktime.mov" width="180" height="178"
autoplay="true" align="left" hspace="12" vspace="20">
</body>
</html>
9-3
Netscape QuickTime
9 HTML
215
Apple QuickTime http://www.apple.com/quicktime/

QuickTime
9.2.3
QuickTime RealVideo
WindowsMedia
RealVideo
RealVideo RealNetworks RealAudio RealVideo
RealPlayer RealProducer
AVIQuickTime MPEG.rm RealAudio RealVideo
RealAudio
.ram .rpm .rm
.ram .smil 9.1.6 RealAudio
SMIL 17 RealNetworks
RealVideo
WindowsMedia
Microsoft ActiveMovie
WindowsMediaWindowsMedia
WindowsMedia
AVI
MPEG
Video on DemandVOD
MP3
QuickTime .aiff.mov
WindowsMedia .wmv
Advanced Streaming Format.asf
Microsoft Advanced Streaming Format

.asx
9.1.7 WindowsMedia WindowsMedia
http://msdn.microsoft.com/workshop/imedia/windowsmedia/abc.asp
216
9.3

Web GIF Flash Shockwave
DHTML Java
Microsoft
<marquee>
9.3.1 <marquee>
<marquee>(multimedia-like)
<marquee> hspace
vspaceheightweight HTML Microsoft
<marquee><blink><marquee>HTML
<marquee>
Internet Explorer WebTV <marquee>
</marquee>
<marquee>
Welcome to Demo Company, Inc. -- the biggest fake company in the world!
</marquee>
Internet Explorer <marquee>

<marquee>
<marquee>
9-4
<html>
<head>
<title>Marquee Example</title>
</head>
<body>
<marquee bgcolor="yellow"
behavior="alternate"
direction="right"
loop="6"
scrollamount="1"
9 HTML
217
scrolldelay="40"
title="Silly tags arent just for Netscape anymore."
width="80%">
Welcome to Demo Company, the biggest fake company of them all!
</marquee>
</div>
</body>
</html>
9-4
<marquee> Internet Explorer
behavior
alternatescroll slidebehavior
scroll direction
behavior alternate
slide
direction downleftright up
loop behavior
slideloop
scrollamount
scrollamount
scrolldelay
scrolldelay 50 scrolldelay
<marquee>
alignhspacevspaceheight weight
218
A <marquee>
<marquee> GIF
9.3.2 GIF
GIF GIF
GIF89a GIF
GIF
GIF
GIF
<img src="animation.gif" width="100" height="100" border="0"

alt="DemoCompany">
GIF
5
9.3.3 Flash
Macromedia Flashwww.macromedia.com/flash
Flash PhotoshopIllustrator
Freehand GIF JPEG
Bezier
curves
2 100100
HTML GIF JPEG

SVGScalable
Vector Graphics Microsoft Internet
Explorer VMLVector Markup Language
Flash Flash
Flash .swf GIF GIF
Flash
9 HTML
219
.swf GIF
http://www.democompany.com/splashpage.cfm
pc CTRL Mac
SWF
Flash <embed>
<embed src="test.swf"
swLiveConnect="false"
width="320" height="240"
quality="autohigh" bgcolor="#ffffff"
type="application/x-shockwave-flash"
pluginspage="http://www.macromedia.com/shockwave/download/
index.cgi?P1_Prod_Version=ShockwaveFlash">
<noembed>
<img src="test.gif" height="250" width="320">
</noembed>
</embed>
<noembed> Flash
GIF
<object> ActiveX
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/
flash/swflash.cab#version=4,0,2,0" width="400" height="250">
<param name="movie" value="test.swf">
<param name="quality" value="high">
<img src="test.gif" width="320" height="240">
</object>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/
flash/swflash.cab#version=4,0,2,0" width="400" height="250">
<param name=movie value="test.swf">
<param name="quality" value="high">
<embed src="test.swf" quality="high"
pluginspage="http://www.macromedia.com/shockwave/download/
index.cgi?P1_Prod_Version=ShockwaveFlash"
type="application/x-shockwave-flash" width="400"
height="250">
<noembed>
<img src="test.gif" height="250" width="320">
220
</noembed>
</embed>
</object>
HTML Flash Flash

HTML Dreamweaver Macromedia Flash
9.4
PDF
Web
CSS
10
Quark
Microsoft Word
Web Word
Adobe Acrobat
Adobe Acrobat
Acrobat
Acrobat HTML
HTML 9-5
Acrobat Word
Acrobat Adobe Exchange Distiller
PDFPortable Document FormatPDF
CD-ROM Adobe
Acrobat Reader PDF Acrobat
Acrobat Reader Microsoft
Windows 3.x Windows 95Windows 98 Windows NTMacintoshLinuxSun
Microsystem Sun SPARC Solaris Sun SPARC SunOS HP-UXSilicon Graphic
IRIXIBM AIX OS/2 Digital VMS
Acrobat <a>
<a href="document.pdf">Demo Company Data sheet

(Acrobat PDF Format, 55Kb)</a>
9 HTML
9-5
221
Acrobat
PDF PDF PDF

PDF
Acrobat reader
Acrobat Acrobat
Adobe www.adobe.com
9.5
Internet
MP3RealAudioRealPlayer
WindowsMedia Player MP3
222
Internet CD QuickTime
RealPlayer Windows Media Player
Flash GIF
Flash
Flash HTML
CSSCascading Style Sheet HTML
10
HTML
HTML HTML
Web HTML
Web
HTML
Flash
CSS
Cascading Style Sheets
CSS Netscape Microsoft Internet
Explorer CSS1CSS 1
CSS1
CSS2 CSS
CSS2
W3C CSS3
10.1
CSS1 HTML HTML
selector
rule<h1>
28 point
h1 {font-size: 28pt;}
<h1> Impact
h1 {font-size: 28pt;
color: red;
font-family: Impact;}
224
HTML
head
style HTML
head
head <style>
<html>
<head>
<title>First CSS Example</title>
<style>
h1
{font-size: 28pt;
color: red;
</style>
</head>
<body>
<h1>New and Improved HTML with Style</h1>
</body>
</html>
CSS HTML
10-1
10-1
CSS CSS
10
10.2
225
HTML
HTML
head

10-1
10-1
HTML
10.2.1
HTML
CSS .css

CSS1 sitestyle.css
body
{font: 10pt;
font-family: Serif;
color: black;
background-color: white;}
h1
{font: 24pt;
font-family: Sans-Serif;
color: black;
text-align: center;}
{text-indent: 0.5in;
margin-left: 50px;
margin-right: 50px;}
a:link
{color: blue; text-decoration: none;}
a:visited {color: red; text-decoration: none;}
226
a:active {color:red; text-decoration: none;}

a:hover {color: red; text-decoration: underline;}
HTML head <link>

4 <link> rel

<html>
<head>
<title>Style Sheet Linking Example</title>
<link rel="stylesheet" href="sitestyle.css" type="text/css">
</head>
<body>
<h1>HTML with Style</h1>
<p>Cascading Style Sheets 1 as defined by the
<a href="http://www.w3.org">W3C</a> provides
powerful page layout facilities.</p>
...Other content affected by style sheet...
</body>
</html>
<link> rel stylesheet href

URL
sitestyle.css
URL http://www.htmlref.com/styles/remotestyle.css
<link> type MIME

text/css CSS
type <head><meta>
<meta http-equiv="Content-Style-Type" content="text/css">
CSS type
10.2.2
HTML
HTML
HTML HTML
10
227
head <style><style></style>
HTML
HTML 

<html>
<head>
<title>Document Wide Style Sheet Example</title>
<!-body
{font: 10pt;
font-family: Serif;
color: black;
h1
{font: 24pt;
color: black;
{text-indent: 0.5in;
margin-left: 50px;
margin-right: 50px;}
a:link
a:visited {color: red; text-decoration: none;}
a:active {color:red; text-decoration: none;}
a:hover
{color: red; text-decoration: underline;}
-->
</style>
</head>
<body>
...Other content affected by style sheet...
</body>
</html>
HTML head <style>
cascadeCSS C
<style>
228
@import
URL<style>

<html>
<head>
<title>Imported Style Sheet Example</title>
<!-@import url(corerules.css);
@import url(linkrules.css);
/* a rule specific to this document */
h1
{font: 24pt;
color: black;
-->
</style>
</head>
<body>
. . .Other content affected by style sheet. . .
</body>
</html>

corestyles.css <body><p>
linkstyles.css <a><h1>
@import
@import

Netscape 4.x<link>
10
229
10.2.3
HTML
<h1> 48 point
Arial<h1>
class style
style classidtitle HTML
HTML
<h1>
<h1 style="font-size: 48pt; font-family: Arial; color: green;">
CSS1 Inline</h1>
CSS
<h1><h1>
10.3
CSS HTML
HTML HTML
<strong>
<strong style="color: red">I am strong!</strong>
HTML
HTML

<html>
<head>
<title>HTML Presentation Override</title>
<!-b {font-style: italic; font-weight: normal;}
-->
</style>
</head>
<body>
<b>What am I?</b>
230
</body>
</html>
10.3.1 <div> <span>

HTML
<div><span> 3 <div><span>
<div>
<div style="background-color: yellow; font-weight: bold; color:

black;">
<p>Style sheets separate the structure of a document from its
presentation. Dividing layout and presentation has many
theoretical benefits and can provide for flexible documents
that display equally well on large graphically rich systems
and palmtop computers.</p>
<p>This is another paragraph describing the wonderful benefits of
style sheets</p>
</div>
<div>
<span> <span>
<p>Calling out <span style="background-color: yellow; font-weight:

bold;
color: black;">special sections of text</span> isnt hard with
span</p>
10.4
<p>
p {line-height: 150%;}
<div><span>
HTML
<body>
body {background-color: black;}
<h1><h2> <h3>
10
231
h1, h2, h3 {background: yellow; color: black}
h1
h2
h3
{font-size: 200%;}
{font-size: 150%;}
{font-size: 125%;}
10.4.1 id
<h1><h1>
class id 3 id
<h1 id="FirstHeading">Welcome to Demo Company, Inc.</h1>
<h1> FirstHeading 4
<a href="#FirstHeading">Go to Heading 1</a>
CSS
#FirstHeading {background-color: green;}
id FirstHeading
id <p>
SecondParagraph
<html>
<head>
<title>ID Rule Example</title>
<!-#SecondParagraph {background-color: green;}
-->
</style>
</head>
<body>
<p>This is the first paragraph.</p>
<p id="SecondParagraph">This is the second paragraph</p>
<p>This is the third paragraph. </p>
</body>
</html>
232
HTML 4 id <html><head><body>
HTML HTML
id id="secondparagraph"
?
class
10.4.2 class
class classclass
class
<html>
<head>
<title>Class Example</title>
<!-.veryimportant {background-color: yellow;}
-->
</style>
</head>
<body>
<h1 class="veryimportant">Example</h1>
<p class="veryimportant">This is the first paragraph.</p>
<p>This is the second paragraph</p>
<p class="veryimportant">This is the third paragraph.</p>
</body>
</html>
3 class veryimportant
veryimportant class
class
.main-item {font-size: 150%;}
class veryimportant <h1>
h1.veryimportant {background-color: orange;}
10.4.3
pseudo-classes CSS1
HTML
10
233
HTML <body> linkvlink alink

CSS1 a:linka:visited a:active
CSS2 a:hover
CSS2 CSS2 :focus

<html>
<head>
<title>Link Pseudo-Class Example</title>
<!-a:link
a:active {color: red; background-color: #ffffcc;}
a:visited {color: purple; text-decoration: none;}
a:hover
{color: red; text-decoration: underline;}
-->
</style>
</head>
<body>
<a href="http://www.htmlref.com">HTML: The Complete Reference</a>
</body>
</html>
CSS
pseudo-elementsCSS1
:first-letter :first-line <p>

<html>
<head>
<title>First Line and Letter</title>
<!-p:first-line
{background-color: yellow;}
p:first-letter {color: red; font-size: 150%;}
-->
</style>
</head>
<body>
<p>CSS selectors can be used to select elements in a variety
of interesting ways. This is some text to fill up the paragraph.
This is only text to fill up this paragraph. This should be
enough text to make this paragraph.</p>
234
<p>CSS selectors can be used to select elements in a variety

of interesting ways. This is some text to fill up the paragraph.
This is only text to fill up this paragraph. This should be
enough text to make this paragraph.</p>
</body>
</html>
10-2
CSS
10-2
10.4.4
class id
<p><strong>
contextual selection
p strong {background-color: yellow}
<p><strong><strong>
10.4.5
HTML <html><html>
<head><body><title><p>
10-3
10
235

<html>
<head>
<title>Test File</title>
</head>
<body>
<h1>Test</h1>
<p>This is a <b>Test</b></p>
</body>
</html>
10-3
<b> <p><p>
<body><body><html><p>
p {color: red;}
<b> color
border
p {border: solid;}
<b> border
border
CSS B CSS1
p
b
{color: red; font-size: 14pt;}

{color: yellow;}
236
<b> 14
color <b> color
CSS Ccascade
id <p>
class class <p>
style
!important
!important
p {color: red !important; font-size: 12pt;}
<p style="color: green; font-size: 24pt;">
!important
font-size !important
10.5
class id HTML CSS

CSS
CSS

<html>
<head>
<title>Simple CSS Example</title>
10
237
<!-body
{background-color: black;}
div.page {background-color: #FFD040;
color: black;
margin: 50px 10px 50px 10px;
padding: 10px 10px;
width: 90%;
height: 90%;}
h1
{font-size: 24pt;
font-family: Comic Sans Ms, Cursive;
.blackonwhite {color: black; background-color: white;}
.whiteonblack {color: white; background-color: black;}
p
{font-family: Arial, Sans-serif;
font-size: 16pt;
line-height: 200%;
text-align: justify;
text-indent: 20px;}
.style
{color: blue; font-family: Arial; font-style: oblique;}
.size
{font-size: x-large;}
#letterspace {letter-spacing: 15pt;}
-->
</style>
</head>
<body>
<div class="page">
<h1><span class="blackonwhite">CSS</span>
<span class="whiteonblack">Fun</span>
</h1>
<hr>
<p> With style sheets, you will be able to control the presentation
of Web pages with greater precision. Style sheets can be used to
set everything from <span class="style">font styles</span> and
<span class="size">sizes</span> to <span id="letterspace">letter
spacing</span> and line heights.
</p>
</div>
</body>
</html>
10-4 CSS Internet Explorer 5

Netscape 6
Netscape 4.x
Opera 4.x
238
10-4
CSS
10.6
CSS1
10.1
CSS1 50
W3C CSS1 www.w3.org/TR/REC-CSS1
CSS1 HTML
10
239
CSS
10.6.1 CSS
CSS1
CSS1 cmmm
(in)
4 id text-indent
#para1
#para2
#para3
#para4
{text-indent:
{text-indent:
{text-indent:
{text-indent:
1in;}
10mm;}
0.5cm;}
-0.75cm;}
CSS
pointpt pica 1
10 pc
72 1 1 pica
12 1 6 pica
P.big
.verysmall
#picameasure
{font-size: 64pt;}
{font-size: 6pt;}
{line-height: 2pc;}
point
Web 12 PC Macintosh
PC
(px)
.bypixel
{font-size: 40px;}
em-height emx-height ex
%
em
12ptem 12pt
2em 24pt
<div style="font-size: 12pt; text-indent: 1em;">Em example with
font-size at 12pt.</div>
<div style="font-size: 24pt; text-indent: 1em;">Same example with
font-size at 24pt.</div>
240
2 em 1 2
em
em x-height ex
x
x-height x-height
x-height ex x-height
p {line-height: 2.5ex;}
em
b {font-size: 80%;} /* 80% of the parent elements font */
point
pixel
10.7
Font
CSS1 Web
font color
background margin spacing
10.7.1 font-family
font-family font-family
Arial sans serif
Britannic Bold
10
241
CSS1 CSS1
Serif ( Times)
Sans-serif ( Helvetica)
Cursive ( Zapf-Chancery)
Fantasy ( Western)
Monospace ( Courier)
<font> font-family
font-family CSS1
<body>
body
{font-family: customSans, Arial, Helvetica, sans-serif;}
font-family CSS1
10.7.2 font-size
font-size
xx-smallx-smallsmallmediumlargex-large
xx-large larger smaller 48pt2cm .25in
150%
point
p
font-size: 18pt;}
strong {font-size: larger;}
.double {font-size: 200%;}
font-size point
10 point
point
10.7.3 font-style
font-style normalitalic oblique italic
oblique
italic oblique normal
Roman
h1
.firstuse
em
{font-style: oblique;}
{font-style: italic;}
{font-style: normal;}
242
10.7.4 font-weight
font-weight 100900 100
normalboldbolder lighter
extra-lightlightdemi-lightmediumdemi-boldbold
extra-bold 100~900
.important
h1
P.special
{font-weight: bolder;}
{font-weight: 900;}
{font-weight: extra-bold;}
bold 700
normal 400
bold normal font-weight
10.7.5 font-variant
font-variant
small-caps normal small-caps
normal Internet Explorer 5 Netscape
6
em
{font-variant: small-caps;}
10.7.6 font
font font
line-height
line-height font-size
font: font-style font-variant font-weight font-size/line-height

font-family
p {font:italic small-caps 600 18pt/24pt "Arial, Helvetica";}
{font: italic 18pt/24pt;}

<html>
<head>
<title>CSS1 Font Properties Example</title>
<!-body
{font-size: 14pt;}
10
.serif
.sans-serif
.cursive
.fantasy
.comic
.xx-small
.x-small
.small
.medium
.large
.x-large
.xx-large
.smaller
.larger
.points
.percentage
.italic
.oblique
.weight
.smallcaps
-->
</style>
</head>
<body>
{font-family: serif;}
{font-family: sans-serif;}
{font-family: cursive;}
{font-family: fantasy;}
{font-family: Comic Sans MS;}
{font-size: xx-small;}
{font-size: x-small;}
{font-size: small;}
{font-size: medium;}
{font-size: large;}
{font-size: x-large;}
{font-size: xx-large;}
{font-size: smaller;}
{font-size: larger;}
{font-size: 18pt;}
{font-size: 200%;}
{font-style: italic;}
{font-style: oblique;}
{font-weight: 900;}
{font-variant: small-caps;}
<h2>Font Family</h2>
This text is in <span class="serif">Serif.</span><br>
This text is in <span class="sans-serif">Sans-Serif.</span><br>
This text is in <span class="cursive">Cursive.</span><br>
This text is in <span class="fantasy">Fantasy.</span><br>
Actual fonts can be specified like <span class="comic">
Comic Sans MS</span><br>
<h2>Font Sizing</h2>
This is <span class="xx-small">xx-small text.</span><br>
This is <span class="x-small">x-small text.</span><br>
This is <span class="small">small text.</span><br>
This is <span class="medium">medium text.</span><br>
This is <span class="large">large text.</span><br>
This is <span class="x-large">x-large text.</span><br>
This is <span class="xx-large">xx-large text.</span><br>
This is <span class="smaller">smaller text</span> than the rest.
<br>
This is <span class="larger">larger text</span> than the rest.<br>
This is <span class="points">exactly 18 point text.</span><br>
This is <span class="percentage">200% larger text.</span><br>
<h2>Font Style, Weight, and Variant</h2>
This text is <span class="italic">italic.</span><br>
This text is <span class="oblique">oblique.</span><br>
243
244
This text is <span class="weight">bold.</span><br>

This text is in <span class="smallcaps">smallcaps.</span><br>
</body>
</html>
10-5
10-5
font Internet Explorer 5
10.8
Text
Text Text
CSS
text-transform
10.8.1 text-transform
text-transform capitalize
10
245
uppercaselowercase none none capitalize

text-transform
p
.upper
.lower
{text-transform: capitalize;}
{text-transform: uppercase;}
{text-transform: lower;}
10.8.2 text-decoration
text-decoration line-through
overlineunderline none overline
overline Netscape blink
.struck
span.special
h1
a
#author
{text-decoration: line-through;}
{text-decoration: blink;}
{text-decoration: overline;}
{text-decoration: underline;}
text-decoration <a> a:link, a:active, a:visited

a:hover
a
a:hover {text-decoration: underline;}
10.8.3 word-spacing
word-spacing normal
in
cm
mmpointptpicapc
emem
px
body
p
{word-spacing: 10pt;}
{font-size: 18pt; word-spacing: 1em;}
10.8.4 letter-spacing
letter-spacing normal
word-spacing
em
p
body
.wide
#Fun
{letter-spacing: 0.2em;}
{letter-spacing: 2px;}
{letter-spacing: 10pt;}
{letter-spacing: 2cm;}
246
10.8.5 vertical-align
vertical-align
baselinesubsupertoptext-topmiddlebottomtext-bottom
<img> align
vertical-align baseline
p
.superscript
.subscript
{vertical-align: text-top;}
{vertical-align: super; font-size: smaller;}
{vertical-align: sub; font-size: 75%;}
vertical-align
.superscript

10.8.6 text-align
text-align <p>
leftrightcenter justify left<p>
HTML align justify
p
div
.goright
{text-align: justify;}
{text-align: center;}
{text-align: right;}
10.8.7 text-indent
text-indent <p>
.5cm15px 12pt 10%
0 text-indent
p
{text-indent: 2em;}
p.heavy {text-indent: 150px;}
{text-indent: -10px; background-color: yellow;}
:first-letter
10.8.8 line-height
line-height
10
247
1.4 14pt
200%
p.double
{line-height: 2;}
p.double2
{line-height: 200%;}
line-height
p
p.carson
{font-size: 12pt; line-height: 18pt;}

{font-size: 24pt; line-height: 6pt;}
line-height font-size
10.8.9 white-space
white-space Tab
normal HTML
pre <pre> HTML
nowrap
white-space <pre>
p.pre {white-space:pre;}
HTML
<html>
<head>
<title>CSS Text Attributes Example</title>
<!
/* letter and word spacing */
.letterspaced {letter-spacing: 10pt;}
.wordspaced
{word-spacing: 20px;}
/* vertical alignment examples */
.sub
{vertical-align: sub;}
.super
{vertical-align: super;}
/* text alignment properties */
.right
{text-align: right;}
.left
{text-align: left;}
.justify
{text-align: justify;}
.center
{text-align: center;}
/* indentation and line-height examples */
248
p.indent
{text-indent: 20px;
line-height: 200%;}
p.negindent
{text-indent: -10px;
background-color: yellow;}
#bigchar
{background-color: red;
color: white;
font-size: 28pt;
p.carson
{font-size: 12pt;
font-family: Courier;
letter-spacing: 4pt;
line-height: 5pt;}
/* text transformation properties */

.uppercase
.lowercase
.capitalize
{text-transform: uppercase;}
{text-transform: lowercase;}
{text-transform: capitalize;}
/* text-decoration properties */
.underline
{text-decoration: underline;}
.blink
{text-decoration: blink;}
.line-through {text-decoration: line-through;}
.overline
{text-decoration: overline;}
/* white space control */
.normal
{white-space: normal;}
.pre
{white-space: pre;}
.nowrap
{white-space: nowrap;}
-->
</style>
</head>
<body>
<h2>Letter Spacing and Vertical Alignment</h2>
<p>This is a paragraph of text.
<span class="letterspaced">Spacing letters is possible</span>
and so <span class="wordspaced">should word spacing.
Alas, it not always supported!</span></p>
<p>Vertical alignment can be used to make
<span class="sub">Subscript</span> and
<span class="super">Superscript</span> text, but the
real use of the property is for aligning text next to images.</p>
<h2>Alignment</h2>
<p class="left">Align a paragraph to the left as normal.</p>
<p class="right">Align paragraphs to the right as we did in
HTML</p>
<p class="justify">You can even set the justification of text so
10
249
that it is aligned on both the left and the right side. You need
to be careful with this so that you dont get rivers of white space
running through your paragraphs.</p>
<p class="center">Text can of course also be centered.</span>
<h2>Indentation and Line Height</h2>
<p class="indent">With style sheets it is possible to set
indentation as well as line height. Now double spacing is a
reality. This is just dummy text to show the effects of the
indentation and spacing. This is just dummy text to show the
effects of the indentation and spacing.</p>
<p class="negindent"><span id="bigchar">T</span>his is another
paragraph which has negative indenting. Notice how you can pull
a character outside the paragraph for interesting effects. This
is just dummy text to show the effect of the indent. This is
just dummy text to show the effect of the indent.</p>
<h2>Surf Gun</h2>
<p class="carson">Dont get carried away with your newfound
powers. You may be tempted to show how cool you can be using
text on top of other text. While this may be good for certain
situations, it may also confuse the viewer.</p>
<h2>Text Transformation</h2>
The next bit of text is transformed <span class="uppercase">to all
uppercase.</span><br> The next bit of text is transformed
<span class="lowercase">to all lowercase.</span><br>
<span class="capitalize">This text is all capitalized. It doesnt
do what you think, does it?</span><br>
<h2>Text Decoration</h2>
This text
<br><br>
This text
<br><br>
This text
<br><br>
This text
<br><br>
should <span class="blink">blink under Netscape.</span>

should be <span class="underline">underlined.</span>
should be <span class="line-through">struck.</span>
should be <span class="overline">overline.</span>
<h2>White Space Control</h2>

<p class="normal">This text controls space normally like
HTML condenses
all spaces and
returns to a single character</p>
<p class="pre">This paragraph
preserves any S P E C I
spacing</p>
<p class="nowrap">This paragraph does not wrap at all and

keeps going and going and going and going to the right
until I stop typing.</p>
250
</body>
</html>
10-6
10-6
Netscape 6
10
10.9
251
List
3 HTML
HTML
CSS1
list-style-type
list-style-image
list-style-position list-style
10.9.1 list-style-type
CSS1 list-style-type
decimallower-romanupper-romanlower-alphaupper-alpha
nonedisccirclesquare none none
HTML type
<ol type="i">
ol
{list-style-type: upper-roman;}
<ul type="square">
ul
{list-style-type: square;}
ol
ol ol
ol ol ol
{list-style-type: upper-roman;}
{list-style-type: lower-roman;}
{list-style-type: lower-alpha;}
list-style-type <li>
id
10.9.2 list-style-image
list-style-type HTML list-style-image
HTML URL
none
UL
{list-style-image: url("flag.gif")}
url
URL URL

252
10.9.3 list-style-position
CSS
list-style-position
inside outside
outside
ul.compact {list-style-position: inside;}
10.9.4 list-style
marginpadding list-style
bullet.gif
ul.special {list-style: inside url("bullet.gif");}
list 10-7
<html>
<head>
<title>List Properties Example</title>
<!-ul {list-style-image: url("flag.gif");}
.inside {list-style-type: upper-roman;
background-color: yellow;
list-style-position: inside;}
.outside {background-color: yellow;
list-style-position: inside;}
-->
</style>
</head>
<body>
<ul>
<li>Item a</li>
<li>Item b</li>
</ul>
<ol class="outside">
<li>Item a</li>
<li>Item b</li>
</ol>
<ol class="inside">
<li>Item a</li>
10
253
<li>Item b</li>
</ol>
</body>
</html>
10-7
Internet Explorer 5 list
CSS2 10.14.4 CSS2

CSS2 list
10.10
Color Background
CSS1
HTML
CSS1 3
16 Windows VGA
AquaBlackBlueFuchsiaGrayGreenLimeMaroon
NavyOlivePurpleRedSilverTealWhite Yellow HTML
6 #RRGGBB
<font><body>3 #RGB
CSS1 #F00 3
254
RGB RGB rgbR,G,B RG B

0255Adobe Photoshop
rgbR,G,B
10.10.1 color
CSS color
body
h1
.fun
#test
{color:
{color:
{color:
{color:
green;}
#FF0088;}
#0f0;}
rgb(0,255,0);}
10.10.2 background-color
background-color none
transparent background-color
color background-color
marginbackground-color
color
p
body
.fun
#test
{background-color: yellow;}
{background-color: #0000FF;}
{background-color: #F00;}
{background-color: rgb(0,0,0);}
10.10.3 background-image
background-image
background-image
background-color
background-image URL
<body> background GIF
JPEG background-color
b
{background-image: url(donut-tile.gif);
body
{background-image: url(funtile.gif);}
.brick {background-image: url(brick.gif);}
#prison {background-image: url(bars.gif);}
<b><body>
10.10.4 background-repeat
background-repeat canvas
repeat
10
255
repeat-x repeat-y
no-repeat
p
{background-image: url(donut-tile.gif);
background-repeat: repeat-x;}
.tileup {background-image: url(tile.gif);
background-repeat: repeat-y;}
body
{background-image: url(tile.gif);
background-repeat: no-repeat;}
2
background-attachment
10.10.5 background-attachment
background-attachment
scroll fixed
<body> bgproperties Microsoft
body {background-image:url(logo.gif);background-attachment:
fixed;}
10.10.6 background-position
background-position

leftcenter
right topcenter bottom
center
10
p {background-image:url(picture.gif);background-position: 10px
10px;}
<body>
256
p
{background-image:url(picture.gif);background-position: 20%
40%;}
50%
top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right
0%
50%
100%
0%
50%
100%
0%
50%
100%
0%
0%
0%
50%
50%
50%
100%
100%
100%
body
{background-image: url(picture.gif);
background-position: center center;}
center
center
10.10.7 background
background
font
p
{background: white url(picture.gif) repeat-y center;}
body
{background: url(tile.jpg) top center fixed;}
.bricks {background: repeat-y top top url(bricks.gif);}
CSS
<html>
<head>
<title>CSS Background Attributes Example</title>
<!-body {background-color: green;}
p
{background: yellow url(flag.gif) repeat-y fixed 100px;}
.red {background-color: red;}
-->
</style>
</head>
10
257
<body>
<p>This is a paragraph of text. The left side will probably be hard
to read because it is on top of an image that repeats along the
y-axis. Notice that the area not covered by the background image is
filled with the background color. <span class="red">Backgrounds
anywhere!
</span>
This is more text just to illustrate the idea. This is even more text.
This is more text just to illustrate the idea. This is even more
text.</p>
</body>
</html>
HTML
<table> 10-8
10-8
background
10.11
Box
<p>
box
margin box
border border
padding
height, width positioning box
258
box <img> borderheight width

box HTML
10.11.1 margin
4 margin 4 margin 5
margin 4
margin-topmargin-rightmargin-bottom margin-left
15pt 2em
20%
auto
Body
{margin-top: 20px; margin-bottom: 20px;

margin-left: 30px; margin-right: 50px;}
p
{margin-bottom: 20mm;}
div.fun {margin-left: 1.5cm; margin-right: 1.5cm;}
margin
{margin-left: -2cm; background-color: green;}
margin
14
{margin: 1.5cm;}
4 1.5 cm
{margin: 10px 5px 15px 5px;}
10 5
15 5 2 3
{margin: 10px 5px;}
10 5
10 5
margin

<html>
<head>
10
<title>CSS Margin Example</title>
<!-#one
{background-color: yellow;
margin: 1cm 1cm;}
#two
{background-color: orange;
margin-top: 1cm;
margin-bottom: 1cm;
margin-right: .5cm;
margin-left: -10px;}
#bigchar {background-color: red;

color: white;
font-size: 28pt;
-->
</style>
</head>
<body>
<p id="one">This is a paragraph of text which has
margins set for all sides to 1 cm. This is just dummy
text to show the effects of the margins. This is just
dummy text to show the effects of the margins.</p>
<p id="two"><span id="bigchar">T</span>his is another
paragraph which has negative margins on one side. Be
careful not to clip things with negative margins. This
is just dummy text to show the effect of the margins.
This is just dummy text to show the effect of the margin.</p>
</body>
</html>
Internet Explorer 5.5 10-9
10-9
Internet Explorer 5.5 margin
259
260
10.11.2 border
bordermargin
paddingborder
border
border-style
border-style none
border-style
dotted
dashed
solid
double
groove
ridge
inset
outset
border-style
h1
{border-style: solid;}
p.boxed {border-style: double;}
.button {border-style: outset;}
border-style
border-top-styleborder-bottom-styleborder-left-style border-right-style border-style
margin 4
p
p.one
p.two
{border-style: double none;}

{border-style: double none double none;}
{border-top-style: double; border-bottom-style: double;
border-left-style: none; border-right-style: none;}
border-width
4
border-top-widthborder-right-widthborder-bottom-width border-left-width border-style
border-width 4 14
10
261
2 3 margin
border-style thinmedium
thick 10
p
p.double
p.thickandthin
.fun
{border-style:
{border-style:
{border-style:
{border-style:
solid; border-width: 10px;}

double; border-width: thick;}
solid; border-width: thick thin;}
double none; border-width: thick;}
border-color
border-color
RGB border-color 4
1 4
2 3 border-width
border-style border-top-colorborder-right-colorborder-bottom-color
border-left-color
p
p.all
{border-style: solid; border-color: green;}

{border-style: solid; border-top-color: green;
border-right-color: #FF0000;
border-bottom-color: yellow;
border-left-color: blue;}
border
border 1
border-topborder-rightborder-bottom border-left 4
4
double-line 20
p {border-top: double 20px red;}
#RainbowBox {background-color: yellow;

border-top: solid 20px red;
border-right: double 10px blue;
border-bottom: solid 20px green;
border-left: dashed 10px orange;}
border
double-line 20
{border: double 20px red;}
262
border-top border-top-style
border

<html>
<head>
<title>CSS1 Border Example</title>
<!-#outer {background-color: orange;
border-style: solid;
border-width: 5px;
padding: 10px 10px;}
#one
border-style: double;
border-width: medium;}
#two
border-style: double solid;
border-color: red green purple blue;
border-width: thin medium thick .25cm;}
-->
</style>
</head>
<body>
<div id="outer">
<p id="one">This is a paragraph of text which has a
red double border around it. Notice how the text
creeps up on the edges. Padding values will help you
avoid this problem.</p>
<p id="two">This is another paragraph which has its
borders set in a very bizarre way!</p>
Notice that the paragraph blocks can be within a large
boxed block structure.
</div>
</body>
</html>
Internet Explorer 4 10-10
10
10-10
263
CSS border
10.11.3 padding
padding 4
padding padding-toppadding-rightpadding-bottom padding-left
bordermargin padding
padding padding
div {padding-top: 1cm;}

p {border-style: solid; padding-left: 20mm; padding-right: 50mm;}
padding 4 1 4
4
2 3
div
{border-style: solid; padding: 1cm;}
solid 1
p
{padding: 2mm 4mm;}
2 4

<html>
<head>
<title>CSS1 Padding Example</title>
<!--

html参考大全

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

html参考大全

Uploaded by

Copyright:

Available Formats

McGraw-Hill

HTML: The Complete Reference, Third Edition

UCSDUniversity of California San DiegoPowell

Osborne Megg Bonar

HTML HTML ......... 17

HTML XHTML ..... 19

WebTV <link> ............ 110

<link> ........................ 111

URL .................... 112

URNURC URI.................... 113

URL .......................... 114

:hspace vspace ......127

GIF ..................................... 117

JPEG ................................... 120

5.1.3 PNG .................................... 120

HTML ................................ 121

alt ....... 122

Web HTML ................... 140

HTML ............ 140

Alignment ............ 143

<nobr><wbr> .................. 143

<spacer> .............................. 146

<multicol> ........................... 147

Netscape ................ 155

Microsoft ................ 156

HTML .................................... 157

<body> ................ 158

Internet Explorer ......... 162

9.4 PDF ............................................220

rowspan colspan ........... 166

HTML 4 .................... 181

CSS HTML ......................... 229

<div> <span>...... 230

10.4.1 id ....................................... 231

class .................................. 232

CSS1 ........................................ 238

CSS ........................... 239

width height .......265

Font ......................................... 240

float clear ...........265

10.9.4 list-style .....................................252

Color Background ......253

font-style ................................... 241

font-weight ................................ 242

font ............................................ 242

Text .......................................... 244

10.8.1 text-transform ............................ 244

CSS2 text font

10.8.2 text-decoration........................... 245

word-spacing ............................. 245

10.8.4 letter-spacing ............................. 245

10.8.6 text-align ................................... 246

10.8.7 text-indent ................................. 246

10.8.8 line-height ................................. 246

List ........................................... 251

10.9.1 list-style-type............................. 251

10.9.2 list-style-image .......................... 251

10.9.3 list-style-position....................... 252

<form> ...................................... 290

action ................................ 291

method .............................. 292

enctype .............................. 293

11.3.4 name ................................. 294

<optgroup> ................................ 300