How to Do Everything with HTML

529 Pages·2001·10.448 MB·English

by  James H. Pence

Y

L
F

M

A

E

T

Y

L
F
M

A

E

T Team-Fly®

Team-Fly®
HTML
James H. Pence
Osborne/McGraw-Hill
New York Chicago San Francisco Lisbon
London Madrid Mexico City Milan New Delhi
San Juan Seoul Singapore Sydney Toronto
Copyright ©2001 by The McGraw-Hill Companies, Inc. All rights reserved. Manufactured in the United States of America. Except as
permitted under the United States Copyright Act of 1976, no part of this publication may be reproduced or distributed in any form or
by any means, or stored in a database or retrieval system, without the prior written permission of the publisher.
0-07-219209-7
The material in this eBook also appears in the print version of this title: 0-07-213273-6.
All trademarks are trademarks of their respective owners. Rather than put a trademark symbol after every occurrence of a trade-
marked name, we use names in an editorial fashion only, and to the benefit of the trademark owner, with no intention of infringe-
ment of the trademark. Where such designations appear in this book, they have been printed with initial caps.
McGraw-Hill eBooks are available at special quantity discounts to use as premiums and sales promotions, or for use in corporate
training programs. For more information, please contact George Hoare, Special Sales, at [email protected] or (212)
904-4069.
TERMSOFUSE
This is a copyrighted work and The McGraw-Hill Companies, Inc. (“McGraw-Hill”) and its licensors reserve all rights in and to the
work. Use of this work is subject to these terms. Except as permitted under the Copyright Act of 1976 and the right to store and
retrieve one copy of the work, you may not decompile, disassemble, reverse engineer, reproduce, modify, create derivative works
based upon, transmit, distribute, disseminate, sell, publish or sublicense the work or any part of it without McGraw-Hill’s prior con-
sent. You may use the work for your own noncommercial and personal use; any other use of the work is strictly prohibited. Your
right to use the work may be terminated if you fail to comply with these terms.
THE WORK IS PROVIDED “AS IS”. McGRAW-HILLAND ITS LICENSORS MAKE NO GUARANTEES OR WARRANTIES
AS TO THE ACCURACY, ADEQUACYOR COMPLETENESS OF OR RESULTS TO BE OBTAINED FROM USING THE
WORK, INCLUDING ANY INFORMATION THAT CAN BE ACCESSED THROUGH THE WORK VIAHYPERLINK OR
OTHERWISE, AND EXPRESSLYDISCLAIM ANYWARRANTY, EXPRESS OR IMPLIED, INCLUDING BUTNOTLIMITED
TO IMPLIED WARRANTIES OF MERCHANTABILITYOR FITNESS FOR APARTICULAR PURPOSE. McGraw-Hill and its
licensors do not warrant or guarantee that the functions contained in the work will meet your requirements or that its operation will
be uninterrupted or error free. Neither McGraw-Hill nor its licensors shall be liable to you or anyone else for any inaccuracy, error
or omission, regardless of cause, in the work or for any damages resulting therefrom. McGraw-Hill has no responsibility for the con-
tent of any information accessed through the work. Under no circumstances shall McGraw-Hill and/or its licensors be liable for any
indirect, incidental, special, punitive, consequential or similar damages that result from the use of or inability to use the work, even
if any of them has been advised of the possibility of such damages. This limitation of liability shall apply to any claim or cause what-
soever whether such claim or cause arises in contract, tort or otherwise.
DOI: 10.1036/0072192097
Dedication
This book is lovingly dedicated to
My Lord and Savior, Jesus Christ. He gave everything for me, that I might
have everything in Him (2 Corinthians 5:21).
My wife, and the love of my life, Laurel. You believed in me, even when
I refused to believe in myself.
Robert Key. I write to support my outreach into the Texas prison system,
and humanly speaking, you are why I am doing that. Thank you for inviting
me in, brother.
Copyright 2001 The McGraw-Hill Companies, Inc. Click Here for Terms of Use.
About the Author
James H. Pence, and his wife Laurel live near Dallas, Texas, where he directs
Tuppence Creative Ministries, an outreach that promotes excellence in the arts
forthegloryofGod.Jamesturnedtowritingasahelpfulmeansofexpressionafter
the death of his infant daughter, Michelle. Nearly 10 years later, “A Road not
Chosen,” James’s narrative account of his and Laurel’s experience was published
in Dallas Theological Seminary’sKindred Spiritmagazine.
A full-time freelance writer with a broad diversity of writing experience,
James strives for excellence in all his work. He has contributed op-ed pieces to
theDallas Morning Newsand has been published inWritermagazine and the
2001 edition ofThe Writer’s Handbook.Also a fiction writer, James’s first novel,
a suspense-thriller titledFriendly Revenge,was released in October 1999 (Hard
Shell Word Factory). A second novel,The Osmosis Project, is currently under
consideration by a major publisher. He also is beginning work on a second book
for Osborne/McGraw-Hill,CSS: A Beginner’s Guide.
JamestrainedincreativewritingandjournalismatDallasTheologicalSeminary,
whereheiscurrentlycompletingworkonamaster’sdegree.Heisanaccomplished
speaker and teacher, having served as an ordained minister for more than 20 years.
James is also a gospel chalk artist and vocalist. He uses these talents in reaching
out to inmates in the Texas prison system.
James offers 1-, 3-, and 5-day Web authoring seminars:E-Z HTML Workshop:
Web Authoring for Non-Techies. For booking information for these seminars
or his creative writing seminar, visit his Web sites: www.tuppence.org and
www.jamespence.com, or e-mail him at: [email protected].
Copyright 2001 The McGraw-Hill Companies, Inc. Click Here for Terms of Use.
Contents
Acknowledgments . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xv
Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xvii
PART I HTML Basics—Everything You Need to Build a Web Site
CHAPTER 1 Get Your Feet Wet with HTML . . . . . . . . . . . . . . . . . . . . . . . . 3
Understand HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
Markup 101: Four Key Concepts . . . . . . . . . . . . . . . . . . . . 5
Create and Display a Web Page . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
Create a Web Page in Notepad . . . . . . . . . . . . . . . . . . . . . . 8
View Your Page in a Web Browser . . . . . . . . . . . . . . . . . . 11
Convert Text to HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
Import Text into an HTML Page . . . . . . . . . . . . . . . . . . . . 12
Convert a Page of Text to HTML . . . . . . . . . . . . . . . . . . . . 14
Add Comments to Your HTML Document . . . . . . . . . . . . . . . . . . 15
Learn Good Web Design . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
WebDesignPrinciple:PlanYourSiteBeforeYouBuildIt . . 17
Practice, Practice, Practice . . . . . . . . . . . . . . . . . . . . . . . . . 18
CHAPTER 2 Work with Text and Lists . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
Designate Headings with <h#> </h#> . . . . . . . . . . . . . . . . . . . . . . 20
Control Text with Character Elements . . . . . . . . . . . . . . . . . . . . . 23
Display Italicized Text . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
Display Bold Text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
Display Big and Small Text . . . . . . . . . . . . . . . . . . . . . . . . 25
Create Superscripts and Subscripts . . . . . . . . . . . . . . . . . . . 25
Display Monospaced Text . . . . . . . . . . . . . . . . . . . . . . . . . . 26
Display Strikethroughs . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27
Display Underlined Text . . . . . . . . . . . . . . . . . . . . . . . . . . . 27
Retain Text Formatting with <pre> . . . . . . . . . . . . . . . . . . 28
Organize Your Material with Lists . . . . . . . . . . . . . . . . . . . . . . . . 29
Create a Bulleted List . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
Create a Multi-Level List . . . . . . . . . . . . . . . . . . . . . . . . . . 31
v
Copyright 2001 The McGraw-Hill Companies, Inc. Click Here for Terms of Use.
vi
HowtoDoEverythingwithHTML
Create Ordered Lists . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32
Create an Outline with <ol> . . . . . . . . . . . . . . . . . . . . . . . . 35
Create Definition Lists with <dl> . . . . . . . . . . . . . . . . . . . . 36
Learn Good Web Design . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37
Design Principle: Don’t Overload Your Pages with Text . 37
Practice, Practice, Practice . . . . . . . . . . . . . . . . . . . . . . . . . 38
Find the Code Online . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39
CHAPTER 3 Position and Modify Your Text . . . . . . . . . . . . . . . . . . . . . . . 41
Understand Structure and Presentation . . . . . . . . . . . . . . . . . . . . . 42
HTML Originally Defined Structure . . . . . . . . . . . . . . . . . 42
HTML Extended to Address Presentation Issues . . . . . . . . 43
Use HTML for Structure; CSS for Presentation . . . . . . . . . 43
Control Text Flow . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44
CreateLineBreakswith<br/>andParagraphswith<p> . . . 44
Insert Ruler Lines with <hr /> . . . . . . . . . . . . . . . . . . . . . . . 44
Indent Text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47
Position and Align Text . . . . . . . . . . . . . . . . . . . . . . . . . . . 50
Choose and Modify Fonts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52
Control Fonts with the <font> Element . . . . . . . . . . . . . . . 52
Use CSS for Better Control . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58
Get Precise Control with the style Attribute . . . . . . . . . . . . 58
Learn Good Web Design . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61
Web Design Principle: Don’t Go Font Crazy . . . . . . . . . . . 61
Practice, Practice, Practice . . . . . . . . . . . . . . . . . . . . . . . . . 62
Find the Code Online . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62
CHAPTER 4 Introduce Color Sensibly to Your Pages . . . . . . . . . . . . . . . . 63
Understand and Experiment with Color . . . . . . . . . . . . . . . . . . . . 64
Specify Colors by Name . . . . . . . . . . . . . . . . . . . . . . . . . . . 65
Specify Colors by Code . . . . . . . . . . . . . . . . . . . . . . . . . . . 66
Set Colors with bgcolor, text, <font>, and <basefont> . . . . . . . . . 70
Define Page Colors Globally . . . . . . . . . . . . . . . . . . . . . . . 71
Choose Local Colors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73
Set Colors with CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75
Set Page Colors with the Color Property . . . . . . . . . . . . . . 76
Learn Good Web Design . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82
Web Design Principle: Use Gentle Colors in
Pleasing Combinations . . . . . . . . . . . . . . . . . . . . . . . . . . 82
Practice, Practice, Practice . . . . . . . . . . . . . . . . . . . . . . . . . 82
Find the Code Online . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 84
vii
Contents
CHAPTER 5 All About Links . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 85
Understand Hypertext and Links . . . . . . . . . . . . . . . . . . . . . . . . . . 86
Understand URLs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 87
Link to Another Web Site with the Anchor
Element, <a> </a> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 88
Help People Navigate Your Site with Internal Links . . . . . . . . . . 90
Link to Pages on Your Own Site . . . . . . . . . . . . . . . . . . . . 90
Link to Precise Spots on a Page with Named Anchors . . . . 93
Open Links in a New Window . . . . . . . . . . . . . . . . . . . . . . 96
Use Special Types of Links . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97
Use mailto: to Create E-mail Links . . . . . . . . . . . . . . . . . . 97
Use ftp:// to Link to Download Sites . . . . . . . . . . . . . . . . . 97
Link to Usenet Newsgroups with news: . . . . . . . . . . . . . . . 98
Dress Up Your Links . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 99
Give Link Details with the title=" " Attribute . . . . . . . . . . . 100
Modify Link Appearance with Text Elements . . . . . . . . . . 100
Modify Link Appearance with CSS . . . . . . . . . . . . . . . . . . 101
Learn Good Web Design . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 102
Web Design Principle: Make Navigation Visitor Friendly . 102
Practice, Practice, Practice . . . . . . . . . . . . . . . . . . . . . . . . . 103
CHAPTER 6 Add Images to Improve Your Presentation . . . . . . . . . . . . . . 105
Understand Web Graphics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 106
Learn the Differences in Graphics Formats . . . . . . . . . . . . 106
Learn Key Terms . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 108
Locate Graphics for Use on Your Site . . . . . . . . . . . . . . . . . . . . . . 110
Capture Images from the Web . . . . . . . . . . . . . . . . . . . . . . 110
Find Royalty-Free Clip Art . . . . . . . . . . . . . . . . . . . . . . . . . 111
Create Your Own Graphics . . . . . . . . . . . . . . . . . . . . . . . . . 112
Insert and Modify Graphics on Your Page . . . . . . . . . . . . . . . . . . 117
Insert a Graphic Image . . . . . . . . . . . . . . . . . . . . . . . . . . . . 118
Control Graphic Size with Height and Width . . . . . . . . . . . 119
Wrap Text and Align Images . . . . . . . . . . . . . . . . . . . . . . . 120
Specify White Space Around Your Image . . . . . . . . . . . . . 122
Add a Border . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 122
Practical Uses for Images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 123
Create Image Links . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 123
Insert a Background Image . . . . . . . . . . . . . . . . . . . . . . . . . 124
Create a Watermark Effect . . . . . . . . . . . . . . . . . . . . . . . . . 124
Cut Down the Page Loading Time . . . . . . . . . . . . . . . . . . . . . . . . 125
Use the lowsrc Attribute with a Quick-Loading Image . . . 125
Use Interlacing with Images . . . . . . . . . . . . . . . . . . . . . . . . 125
viii
HowtoDoEverythingwithHTML
Use an Inline Thumbnail Image . . . . . . . . . . . . . . . . . . . . . 126
Slice Larger Images into Smaller Pieces . . . . . . . . . . . . . . 127
Use Cascading Style Sheets with Graphics . . . . . . . . . . . . . . . . . . 128
Manage Background Images with CSS . . . . . . . . . . . . . . . 128
Insert Image Bullets with CSS . . . . . . . . . . . . . . . . . . . . . . 130
Place a Decorative Border Around an Image . . . . . . . . . . . 131
Learn Good Web Design . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 132
WebDesignPrinciple:UseImagesLikeSalt—Sparingly . . 132
Practice, Practice, Practice . . . . . . . . . . . . . . . . . . . . . . . . . 134
Find the Code Online . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 134
CHAPTER 7 Plan, Publish, and Promote Your Site . . . . . . . . . . . . . . . . . . 137
Plan Your Site Effectively . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 138
Identify Your Site’s Purpose . . . . . . . . . . . . . . . . . . . . . . . . 139
Identify Your Target Audience . . . . . . . . . . . . . . . . . . . . . . 139
Storyboard Your Site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 140
Gather Your Content . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 142
Develop Your Web Site . . . . . . . . . . . . . . . . . . . . . . . . . . . 143
Publish Your Site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 146
Find a Host . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 147
Register a Domain Name . . . . . . . . . . . . . . . . . . . . . . . . . . 148
Upload Your Site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 150
Promote Your Site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 152
Design Your Pages with Strategic Keywords . . . . . . . . . . . 152
Submit Your Site to Search Engines . . . . . . . . . . . . . . . . . . 154
Promote Your Site in Other Ways . . . . . . . . . . . . . . . . . . . 155
PART II Add Style to Your Site
CHAPTER 8 Use Tables for Layout Control . . . . . . . . . . . . . . . . . . . . . . . . 159
Understand Tables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 160
Create a Simple Table . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 161
Modify a Table’s Appearance . . . . . . . . . . . . . . . . . . . . . . . . . . . . 162
Add Headings and Captions . . . . . . . . . . . . . . . . . . . . . . . . 162
Display a Border . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 163
Position Your Content . . . . . . . . . . . . . . . . . . . . . . . . . . . . 164
Add Background Colors . . . . . . . . . . . . . . . . . . . . . . . . . . . 166
Adjust Space In and Between Cells . . . . . . . . . . . . . . . . . . 169
Make Cells Span Multiple Columns and Rows . . . . . . . . . 172
Adjust Height and Width . . . . . . . . . . . . . . . . . . . . . . . . . . 173
Position Tables on a Page . . . . . . . . . . . . . . . . . . . . . . . . . . 175
Modify Borders and Cell Divisions . . . . . . . . . . . . . . . . . . 178
Add Images and Links . . . . . . . . . . . . . . . . . . . . . . . . . . . . 180
Understand Weakly-Supported Table Features . . . . . . . . . 183
ix
Contents
Learn Good Web Design . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 185
Web Design Principle: Plan Each Table Strategically . . . . 185
Practice, Practice, Practice . . . . . . . . . . . . . . . . . . . . . . . . . 186
Find the Code Online . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 187
CHAPTER 9 Use Frames for Efficient Navigation . . . . . . . . . . . . . . . . . . . . 189
Understand Frames . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 190
Frames Allow for Multiple Page Display . . . . . . . . . . . . . . 191
Understand Frame Elements and Attributes . . . . . . . . . . . . 193
Create a Simple Frames Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . 195
Build Your Display Documents . . . . . . . . . . . . . . . . . . . . . 195
Construct a Frameset . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 196
Modify Your Frames . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 200
Use Attributes with the <frameset> Element . . . . . . . . . . . 200
Use Attributes with the <frame /> Element . . . . . . . . . . . . 202
Address Non-Compatible Browsers with <noframes> . . . . 204
Create an Inline Frame . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 205
Use Frames for Site Navigation . . . . . . . . . . . . . . . . . . . . . . . . . . . 207
Learn Good Web Design . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 210
Web Design Principle: With Frames, More Is Less . . . . . . 210
Practice, Practice, Practice . . . . . . . . . . . . . . . . . . . . . . . . . 211
Find the Code Online . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 211
CHAPTER 10 Enhance Your Site with CSS . . . . . . . . . . . . . . . . . . . . . . . . . . 213
Understand CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 214
HTML and the Problem of Style . . . . . . . . . . . . . . . . . . . . 215
Understand the Idea of Style Sheets . . . . . . . . . . . . . . . . . . 215
Understand CSS Terminology . . . . . . . . . . . . . . . . . . . . . . 216
Learn Style Sheet Types . . . . . . . . . . . . . . . . . . . . . . . . . . . 217
Understand the Cascade . . . . . . . . . . . . . . . . . . . . . . . . . . . 219
Create and Use Style Sheets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 220
Apply an Inline Style Sheet . . . . . . . . . . . . . . . . . . . . . . . . 221
Add an Embedded Style Sheet . . . . . . . . . . . . . . . . . . . . . . 222
Create and Link to an External Style Sheet . . . . . . . . . . . . 224
Understand and Use CSS Properties . . . . . . . . . . . . . . . . . . . . . . . 227
Use Font Properties for Controlling Font Display . . . . . . . 228
Apply Text Properties for Spacing and Alignment . . . . . . . 230
Use Color and Background Properties . . . . . . . . . . . . . . . . 232
Control Margins, Padding, and Borders with
Box Properties . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 234
Learn Good Web Design . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 238
Web Design Principle: Don’t Be Afraid of CSS . . . . . . . . 238
Practice, Practice, Practice . . . . . . . . . . . . . . . . . . . . . . . . . 239
Find the Code Online . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 241