in One Hour a Day Web Publishing with Sams Teach Yourself Laura Lemay Rafe Colburn... Sams Teach Yourself Web Publishing with HTML and CSS in One Hour a Day Copyright © 2011 by Sams Publ
Trang 1ptg
Trang 2in One Hour a Day
Web Publishing with
Sams Teach Yourself
Laura Lemay Rafe Colburn
Trang 3Sams Teach Yourself Web Publishing with HTML
and CSS in One Hour a Day
Copyright © 2011 by Sams Publishing
All rights reserved No part of this book shall be reproduced, stored in a retrieval system,
or transmitted by any means, electronic, mechanical, photocopying, recording, or
other-wise, without written permission from the publisher No patent liability is assumed with
respect to the use of the information contained herein Although every precaution has been
taken in the preparation of this book, the publisher and authors assume no responsibility for
errors or omissions Nor is any liability assumed for damages resulting from the use of the
information contained herein.
ISBN-13: 978-0-672-33096-4
ISBN-10: 0-672-33096-2
Library of Congress Catalog-in-Publication data is on file.
First Printing: August 2010
Trademarks
All terms mentioned in this book that are known to be trademarks or service marks have
been appropriately capitalized Sams Publishing cannot attest to the accuracy of this
infor-mation Use of a term in this book should not be regarded as affecting the validity of any
trademark or service mark.
Warning and Disclaimer
Every effort has been made to make this book as complete and as accurate as possible, but
no warranty or fitness is implied The information provided is on an “as is” basis The
authors and the publisher shall have neither liability nor responsibility to any person or
entity with respect to any loss or damages arising from the information contained in this
book or from the use of the CD or programs accompanying it.
Bulk Sales
Pearson offers excellent discounts on this book when ordered in quantity for bulk
pur-chases or special sales For more information, please contact
U.S Corporate and Government Sales
1-800-382-3419
corpsales@pearsontechgroup.com
For sales outside of the U.S., please contact
International Sales
international@pearsoned.com
Mark Taber
Development Editor
Songlin Qiu
Managing Editor
Sandra Schroeder
Project Editor
Seth Kerney
Copy Editor
Keith Cline
Indexer
Brad Herriman
Proofreader
Apostrophe Editing Services, Inc.
Technical Editor
Julie Meloni
Publishing Coordinator
Vanessa Evans
Multimedia Developer
Dan Scherf
Book Designer
Gary Adair
Page Layout
Studio Galou, LLC
Trang 4Contents at a Glance
PART I: Getting Started
1 Navigating the World Wide Web 7
2 Preparing to Publish on the Web 25
3 Introducing HTML and XHTML 49
PART II: Creating Web Pages
4 Learning the Basics of HTML 67
5 Organizing Information with Lists 81
6 Adding Links to Your Web Pages 99
7 Formatting Text with HTML and CSS 131
PART III: Doing More with HTML and CSS
8 Using CSS to Style a Site 173
9 Adding Images, Color, and Backgrounds 211
10 Building Tables 259
11 Designing Forms 311
12 Integrating Multimedia: Sound, Video, and More 355
13 Advanced CSS: Page Layout in CSS 389
PART IV: Using JavaScript and Ajax
14 Introducing JavaScript 411
15 Using JavaScript in Your Pages 435
16 Using JavaScript Libraries 459
17 Working with Frames and Linked Windows 489
PART V: Designing Effective Web Pages
18 Writing Good Web Pages: Do's and Don'ts 531
19 Designing for the Real World 567
PART VI: Going Live on the Web
20 Putting Your Site Online 593
21 Taking Advantage of the Server 619
22 Content Management Systems and Publishing Platforms 657
PART VII: Appendix
A Sources for Further Information 691
Trang 5Table of Contents
Who Should Read This Book .2
What This Book Contains 2
What You Need Before You Start 3
Conventions Used in This Book 4
Special Elements .4
HTML Input and Output Examples .5
Special Fonts 5
Workshop .5
PART I: Getting Started LESSON 1: Navigating the World Wide Web 7 How the World Wide Web Works 8
The Web Is a Hypertext Information System .8
The Web Is Graphical and Easy to Navigate .9
The Web Is Cross-Platform 10
The Web Is Distributed .10
The Web Is Dynamic 11
The Web Is Interactive 13
Web Browsers 15
What the Browser Does .15
An Overview of Some Popular Browsers 16
Using the Browser to Access Other Services .18
Web Servers .19
Uniform Resource Locators 20
Summary .21
Workshop 21
Q&A .21
Quiz 22
Quiz Answers .22
Exercises 23
Trang 6LESSON 2: Preparing to Publish on the Web 25
Anatomy of a Website .26
What Do You Want to Do on the Web? .28
Setting Your Goals 30
Breaking Up Your Content into Main Topics 31
Ideas for Organization and Navigation 32
Hierarchies .33
Linear 35
Linear with Alternatives 36
Combination of Linear and Hierarchical .38
Web .39
Storyboarding Your Website .42
What’s Storyboarding and Why Do I Need It? .42
Hints for Storyboarding .43
Web Hosting 44
Using a Content-Management Application .44
Setting Up Your Own Web Hosting .45
Summary .46
Workshop 47
Q&A .47
Quiz 48
Quiz Answers .48
Exercises 48
LESSON 3: Introducing HTML and XHTML 49 What HTML Is (And What It Isn’t) .50
HTML Describes the Structure of a Page .50
HTML Does Not Describe Page Layout .51
Why It Works This Way 52
How Markup Works .53
A Brief History of HTML Tags 53
The Current Standard: XHTML 1.1 .54
The Future Standard: HTML5 .55
What HTML Files Look Like .55
Text Formatting and HTML .60
Trang 7Programs to Help You Write HTML .62
Summary .64
Workshop 64
Q&A .64
Quiz 65
Quiz Answers .65
Exercises 65
PART II: Creating Web Pages LESSON 4: Learning the Basics of HTML 67 Structuring Your HTML .68
The <html> Tag .68
The <head> Tag .69
The <body> Tag 69
The Title .70
Headings .72
Paragraphs .75
Comments .75
Summary .78
Workshop 78
Q&A .78
Quiz 79
Quiz Answers .79
Exercises 80
LESSON 5: Organizing Information with Lists 81 Lists: An Overview .82
Numbered Lists 83
Customizing Ordered Lists 84
Unordered Lists .87
Customizing Unordered Lists .88
Glossary Lists 90
Nesting Lists .92
Other Uses for Lists 94
Summary .95
Workshop 96
vi Sams Teach Yourself Web Publishing with HTML and CSS in One Hour a Day
Trang 8Q&A .96
Quiz 97
Quiz Answers .97
Exercises 98
LESSON 6: Adding Links to Your Web Pages 99 Creating Links 100
The Link Tag: <a> .100
Linking Local Pages Using Relative and Absolute Pathnames .105
Absolute Pathnames .106
Using Relative or Absolute Pathnames? .107
Links to Other Documents on the Web 108
Linking to Specific Places Within Documents .113
Creating Links and Anchors .113
Linking to Anchors in the Same Document .120
Anatomy of a URL .120
Parts of URLs .121
Special Characters in URLs .122
Additional Attributes for the <a> Tag .123
Kinds of URLs .123
HTTP .123
Anonymous FTP 124
Non-Anonymous FTP .125
Mailto 125
File 126
Summary .127
Workshop 128
Q&A .128
Quiz .130
Quiz Answers 130
Exercises 130
LESSON 7: Formatting Text with HTML and CSS 131 Character-Level Elements .132
Logical Styles .132
Physical Styles .135
Contents vii
Trang 9Character Formatting Using CSS .137
The Text Decoration Property .137
Font Properties .138
Preformatted Text .139
Horizontal Rules .142
Attributes of the <hr> Tag 143
Line Break .145
Addresses 147
Quotations .147
Special Characters .149
Character Entities for Special Characters 150
Specifying Character Encoding .151
Character Entities for Reserved Characters 152
Text Alignment .153
Aligning Individual Elements .153
Aligning Blocks of Elements 153
Fonts and Font Sizes 155
Summary .167
Workshop 171
Q&A .171
Quiz .172
Quiz Answers 172
Exercises 172
PART III: Doing More with HTML and CSS LESSON 8: Using CSS to Style a Site 173 Including Style Sheets in a Page .174
Creating Page-Level Styles .174
Creating Sitewide Style Sheets .175
Selectors .176
Contextual Selectors .176
Classes and IDs .177
What Cascading Means .179
Units of Measure .180
The Box Model .182
Borders .183 viii Sams Teach Yourself Web Publishing with HTML and CSS in One Hour a Day
Trang 10Margins and Padding 185
Controlling Size and Element Display 189
Float 192
CSS Positioning 196
Relative Positioning 197
Absolute Positioning .199
Controlling Stacking .202
The <body> Tag .205
Links 206
Summary .207
Workshop 207
Q&A .207
Quiz .208
Quiz Answers 208
Exercises 209
LESSON 9: Adding Images, Color, and Backgrounds 211 Images on the Web 212
Image Formats 213
GIF .213
JPEG .213
PNG 214
Inline Images in HTML: The <img> Tag .214
Adding Alternative Text to Images 215
Images and Text 219
Text and Image Alignment .220
Wrapping Text Next to Images .223
Adjusting the Space Around Images 226
Images and Links 228
Other Neat Tricks with Images 232
Image Dimensions and Scaling .232
More About Image Borders .233
Using Color .234
Specifying Colors .234
Changing Colors Using CSS .236
Contents ix