in One Hour a Day
Web Publishing with
HTML and CSS
Sams Teach Yourself
Laura Lemay Rafe Colburn
800 East 96th Street, Indianapolis, Indiana 46240
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
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
Contents 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
Introduction 1
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
LESSON 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
Using Cascading Style Sheets. . . .61
Including Styles in Tags . . . .62
Programs 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
Q&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
Character 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
Margins 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
Changing Page Colors in HTML. . . .236
Contents ix
Image Backgrounds. . . .238
Specifying Backgrounds for Elements . . . .241
Using Images As Bullets . . . .242
What Is an Imagemap?. . . .243
ImageMaps and Text-Only Browsers. . . .244
Getting an Image . . . .244
Determining Your Coordinates . . . .245
The <map> and <area> Tags . . . .248
The usemap Attribute . . . .249
Image Etiquette. . . .254
Summary. . . .255
Workshop . . . .256
Q&A. . . .256
Quiz. . . .257
Quiz Answers . . . .258
Exercises . . . .258
LESSON 10: Building Tables 259 Creating Tables. . . .260
Table Parts. . . .260
The <table> Element. . . .261
The Table Summary. . . .261
Rows and Cells . . . .262
Empty Cells . . . .264
Captions. . . .265
Sizing Tables, Borders, and Cells. . . .269
Setting Table Widths. . . .269
Changing Table Borders . . . .270
Cell Padding . . . .273
Cell Spacing . . . .274
Column Widths . . . .275
Setting Breaks in Text. . . .278
Table and Cell Color. . . .280
Aligning Your Table Content. . . .282
Table Alignment. . . .282
Cell Alignment . . . .283
Caption Alignment. . . .286
Spanning Multiple Rows or Columns. . . .287
More Advanced Table Enhancements. . . .296
Grouping and Aligning Columns. . . .296
Grouping and Aligning Rows. . . .300
Other Table Elements and Attributes. . . .303
How Tables Are Used . . . .303
Summary. . . .304
Workshop . . . .309
Q&A. . . .309
Quiz. . . .309
Quiz Answers . . . .310
Exercises . . . .310
LESSON 11: Designing Forms 311 Understanding Form and Function. . . .312
Using the <form> Tag . . . .317
Using the <label> Tag . . . .320
Creating Form Controls with the <input> Tag. . . .321
Creating Text Controls . . . .322
Creating Password Controls. . . .323
Creating Submit Buttons. . . .324
Creating Reset Buttons . . . .325
Creating Check Box Controls. . . .325
Creating Radio Buttons. . . .326
Using Images as Submit Buttons. . . .327
Creating Generic Buttons. . . .328
Hidden Form Fields . . . .329
The File Upload Control . . . .329
Using Other Form Controls. . . .330
Using the button Element. . . .330
Creating Large Text-Entry Fields with textarea . . . .331
Creating Menus with select and option. . . .332
Grouping Controls with fieldset and legend. . . .340
Changing the Default Form Navigation . . . .341
Using Access Keys. . . .342
Creating disabled and readonly Controls. . . .342
Contents xi
Applying Cascading Style Sheet Properties to Form Elements. . . .343
Planning Your Forms. . . .349
Summary. . . .350
Workshop . . . .351
Q&A. . . .351
Quiz. . . .352
Quiz Answers . . . .352
Exercises . . . .353
LESSON 12: Integrating Multimedia: Sound, Video, and More 355 Embedding Video the Simple Way. . . .356
Advantages and Disadvantages of Hosting Videos on YouTube. . . .357
Uploading Videos to YouTube . . . .358
Customizing the Video Player. . . .359
Other Services. . . .360
Hosting Your Own Video. . . .361
Video and Container Formats . . . .362
Converting Video to H.264. . . .363
Converting Video to Ogg Theora. . . .366
Embedding Video Using <video>. . . .366
The <video> Tag . . . .367
Using the <source> Element. . . .369
Embedding Flash Using the <object> Tag. . . .370
Alternative Content for the <object> Tag . . . .374
The <embed> Tag. . . .375
Embedding Flash Movies Using SWFObject. . . .376
Flash Video Players . . . .378
JW Player. . . .378
Using Flowplayer. . . .380
Using the <object> Tag with the <video> Tag . . . .382
Embedding Audio in Your Pages. . . .383
The <audio> Tag . . . .383
Flash Audio Players . . . .384
Summary. . . .385
Workshop . . . .386
Q&A. . . .386
Quiz. . . .387
Quiz Answers . . . .387
Exercises . . . .388
LESSON 13: Advanced CSS: Page Layout in CSS 389 Laying Out the Page . . . .390
The Problems with Layout Tables. . . .390
Writing HTML with Structure . . . .391
Writing a Layout Style Sheet. . . .394
The Floated Columns Layout Technique. . . .401
The Role of CSS in Web Design . . . .403
Style Sheet Organization. . . .404
Sitewide Style Sheets . . . .407
Summary. . . .408
Workshop . . . .408
Q&A. . . .408
Quiz. . . .409
Quiz Answers . . . .409
Exercises . . . .410
PART IV: Using JavaScript and Ajax LESSON 14: Introducing JavaScript 411 Why Would You Want to Use JavaScript? . . . .412
Ease of Use. . . .412
Increasing Server Efficiency. . . .413
Integration with the Browser. . . .413
The <script> Tag. . . .414
The Structure of a JavaScript Script. . . .414
The src Attribute . . . .415
The JavaScript Language . . . .415
Operators and Expressions. . . .417
Variables. . . .418
Control Structures . . . .421
Functions . . . .424
Data Types . . . .426
Arrays . . . .427
Objects. . . .427
Contents xiii
The JavaScript Environment. . . .428
Events. . . .429
Summary. . . .432
Workshop . . . .433
Q&A. . . .433
Quiz. . . .433
Quiz Answers . . . .434
Exercises . . . .434
LESSON 15:Using JavaScript in Your Pages 435 Validating Forms with JavaScript. . . .436
Hiding and Showing Elements. . . .443
Adding New Content to a Page . . . .452
Summary. . . .456
Workshop . . . .456
Q&A. . . .456
Quiz. . . .457
Quiz Answers . . . .457
Exercises . . . .457
LESSON 16: Using JavaScript Libraries 459 What Are JavaScript Libraries?. . . .460
Reviewing the Popular JavaScript Libraries. . . .460
jQuery . . . .461
Dojo . . . .461
Yahoo! UI. . . .461
Prototype . . . .461
Other Libraries. . . .462
Getting Started with jQuery. . . .462
Your First jQuery Script. . . .463
Binding Events. . . .465
Modifying Styles on the Page. . . .466
Hiding and Showing Elements . . . .466
Retrieving and Changing Style Sheet Properties. . . .467
Modifying Content on the Page. . . .468
Manipulating Classes . . . .468
Manipulating Form Values. . . .471
Manipulating Attributes Directly. . . .473
Adding and Removing Content. . . .474
Special Effects . . . .478
AJAX and jQuery. . . .480
Using AJAX to Load External Data. . . .481
Summary. . . .485
Workshop . . . .485
Q&A. . . .485
Quiz. . . .486
Quiz Answers . . . .486
Exercises . . . .487
LESSON 17: Working with Frames and Linked Windows 489 What Are Frames?. . . .490
Working with Linked Windows. . . .491
The <base> Tag. . . .496
Working with Frames. . . .498
The <frameset> Tag . . . .499
The <frame> Tag. . . .502
The <noframes> Tag. . . .503
Changing Frame Borders . . . .504
Creating Complex Framesets. . . .507
Magic target Names . . . .520
Inline Frames. . . .521
Opening Linked Windows with JavaScript. . . .523
Summary. . . .526
Workshop . . . .529
Q&A. . . .529
Quiz. . . .529
Quiz Answers . . . .530
Exercises . . . .530
PART V: Designing Effective Web Pages LESSON 18: Writing Good Web Pages: Do’s and Don’ts 531 Standards Compliance and Web Browsers. . . .532
Progressive Enhancement. . . .532
Contents xv
Choosing a Document Type. . . .534
HTML5 . . . .535
Validating Your Pages. . . .535
HTML Tidy. . . .538
Writing for Online Publication. . . .538
Write Clearly and Be Brief. . . .539
Organize Your Pages for Quick Scanning . . . .539
Make Each Page Stand on Its Own . . . .541
Be Careful with Emphasis . . . .541
Don’t Use Browser-Specific Terminology. . . .542
Spell Check and Proofread Your Pages. . . .543
Design and Page Layout. . . .543
Use Headings as Headings. . . .543
Group Related Information Visually. . . .544
Use a Consistent Layout . . . .545
Using Links. . . .546
Use Link Menus with Descriptive Text. . . .546
Use Links in Text. . . .547
Avoid the “Here” Syndrome. . . .549
To Link or Not to Link . . . .550
Using Images. . . .552
Don’t Overuse Images. . . .552
Keep Images Small. . . .553
Watch Out for Assumptions About Your Visitors’ Hardware. . . .555
Be Careful with Backgrounds and Link Colors . . . .555
Making the Most of CSS and JavaScript. . . .556
Put Your CSS and JavaScript in External Files. . . .556
Location Matters . . . .557
Shrink Your CSS and JavaScript. . . .557
Other Good Habits and Hints. . . .558
Link Back to Home . . . .558
Don’t Split Topics Across Pages. . . .558
Don’t Create Too Many or Too Few Pages . . . .558
Sign Your Pages. . . .561
Summary. . . .562
Workshop . . . .564
Q&A. . . .564
Quiz. . . .565
Quiz Answers . . . .565
Exercises . . . .566
LESSON 19: Designing for the Real World 567 What Is the Real World, Anyway?. . . .568
Considering User Experience Level . . . .569
Add a Search Engine. . . .569
Use Concise, Sensible URLs . . . .570
Navigation Provides Context . . . .572
Are Your Users Tourists or Regulars?. . . .573
Determining User Preference. . . .573
Migrating to HTML5. . . .575
Benefits of HTML5 . . . .575
What’s Not in HTML5 . . . .577
Using HTML5. . . .577
HTML5 and XML . . . .578
XHTML 1.0 and HTML 4.01. . . .579
What Is Accessibility?. . . .579
Common Myths Regarding Accessibility . . . .579
Section 508. . . .580
Alternative Browsers. . . .581
Writing Accessible HTML . . . .582
Tables . . . .582
Links. . . .583
Images. . . .584
Designing for Accessibility. . . .586
Use Color. . . .586
Fonts. . . .586
Take Advantage of All HTML Tags. . . .587
Frames and Linked Windows. . . .587
Forms. . . .587
Validating Your Sites for Accessibility . . . .588
Summary. . . .590
Workshop . . . .590
Contents xvii
Q&A. . . .590
Quiz. . . .591
Quiz Answers . . . .592
Exercises . . . .592
PART VI: Part VI: Going Live on the Web LESSON 20: Putting Your Site Online 593 What Does a Web Server Do?. . . .594
Other Things Web Servers Do . . . .594
How to Find Web Hosting. . . .595
Using a Web Server Provided by Your School or Work. . . .595
Using a Commercial Web Host. . . .596
Setting Up Your Own Server . . . .597
Free Hosting . . . .597
Organizing Your HTML Files for Publishing. . . .598
Questions to Ask Your Webmaster. . . .598
Keeping Your Files Organized with Directories . . . .599
Having a Default Index File and Correct Filenames . . . .599
Publishing Your Files. . . .600
Moving Files Between Systems. . . .600
Troubleshooting. . . .603
I Can’t Access the Server. . . .603
I Can’t Access Files . . . .603
I Can’t Access Images. . . .604
My Links Don’t Work. . . .604
My Files Are Being Displayed Incorrectly . . . .605
Registering and Advertising Your Web Pages. . . .605
Getting Links from Other Sites. . . .606
Promoting Your Site Through Social Media . . . .606
Creating a Facebook Page for Your Site. . . .607
Site Indexes and Search Engines . . . .609
Google. . . .609
Yahoo!. . . .610
Microsoft Bing. . . .610
Ask.com. . . .610
Search Engine Optimization. . . .611
Paying for Search Placement. . . .612
Business Cards, Letterhead, Brochures, and Advertisements. . . .612
Finding Out Who’s Viewing Your Web Pages. . . .612
Log Files . . . .613
Google Analytics. . . .614
Installing Google Analytics . . . .614
Summary. . . .616
Workshop . . . .616
Q&A. . . .617
Quiz. . . .617
Quiz Answers . . . .617
Exercises . . . .618
LESSON 21: Taking Advantage of the Server 619 How PHP Works. . . .620
Getting PHP to Run on Your Computer. . . .621
The PHP Language. . . .622
Comments. . . .622
Variables. . . .623
Arrays . . . .624
Strings. . . .626
Conditional Statements. . . .628
PHP Conditional Operators . . . .629
Loops. . . .630
foreach Loops. . . .630
for Loops . . . .631
while and do...while Loops. . . .632
Controlling Loop Execution. . . .632
Built-in Functions. . . .633
User-Defined Functions. . . .634
Returning Values. . . .635
Processing Forms . . . .636
Handling Parameters with Multiple Values . . . .637
Presenting the Form . . . .642
Using PHP Includes. . . .647
Choosing Which Include Function to Use. . . .649
Expanding Your Knowledge of PHP. . . .650
Contents xix
Database Connectivity. . . .651
Regular Expressions. . . .651
Sending Mail. . . .652
Object-Oriented PHP . . . .652
Cookies and Sessions . . . .652
File Uploads . . . .652
Other Application Platforms. . . .652
Microsoft ASP.NET . . . .653
Java EE . . . .653
Ruby on Rails . . . .653
Summary. . . .653
Workshop . . . .654
Q&A. . . .654
Quiz. . . .654
Quiz Answers . . . .655
Exercises . . . .655
LESSON 22: Content Management Systems and Publishing Platforms 657 The Rise of Content Management . . . .658
Content Management in the Cloud. . . .658
Is a Content Management System Right for You?. . . .659
Types of Content Management Systems. . . .660
Blogging Tools . . . .660
Community Publishing Applications . . . .661
Wikis. . . .661
Image Galleries . . . .662
General-Purpose Content Management Systems. . . .663
Working with Packaged Software. . . .664
Relational Databases. . . .664
Deploying Applications. . . .666
TypePad: A Hosted Blogging Application. . . .667
WordPress. . . .669
MediaWiki. . . .674
Downloading and Installing MediaWiki. . . .675
Using MediaWiki. . . .676
Drupal. . . .677 Using Drupal. . . .678 Incorporating Dynamic Content from Other Sites into Your Pages. . . .682 Using Photos from Flickr. . . .682 Embedding Twitter Content. . . .684 Integrating with Facebook. . . .685 Other Applications . . . .687 Spam . . . .687 Summary. . . .687 Workshop . . . .688 Q&A. . . .688 Quiz. . . .689 Quiz Answers . . . .689 Exercises . . . .689
PART VI: Appendix
APPENDIX A: Sources for Further Information 691
Analytics. . . .693 Browsers. . . .693 Collections of HTML and Web Development Information . . . .694 Imagemaps. . . .695 HTML Editors and Converters. . . .695 HTML Validators, Link Checkers, and Simple Spiders. . . .695 JavaScript . . . .696 Log File Parsers . . . .696 HTML Style Guides . . . .697 Servers and Server Administration. . . .697 Sound and Video. . . .697 Specifications for HTML, HTTP, and URLs. . . .698 Server-Side Scripting. . . .698 Web Publishing Tools . . . .699 Other Web-Related Topics . . . .699 Tools and Information for Images. . . .699 Web Hosting Providers. . . .700
INDEX 701
Contents xxi
Rafe Colburn is an author and web developer with more than 15 years experience building websites. His other books include Special Edition Using SQL and Sams Teach Yourself CGI in 24 Hours. You can read his blog at http://rc3.org or find him on Twitter as@rafeco.
Laura Lemay is one of the world’s most popular authors on web development topics.
She is the author of Sams Teach Yourself Web Publishing with HTML, Sams Teach Yourself Java in 21 Days, and Sams Teach Yourself Perl in 21 Days.
Dedication
For Patricia.
Acknowledgments
I’d like to acknowledge the hard work of all the people at Sams Publishing who clean up my messes and get these books out on the shelves. Special thanks go to Mark Taber, Songlin Qiu, Seth Kerney, and technical editor Julie Meloni. I’d also like to thank my wife for suffering through yet another one of these projects.
—Rafe Colburn
As the reader of this book, you are our most important critic and commentator. We value your opinion and want to know what we’re doing right, what we could do better, what areas you’d like to see us publish in, and any other words of wisdom you’re willing to pass our way.
You can email or write me directly to let me know what you did or didn’t like about this book—as well as what we can do to make our books stronger.
Please note that I cannot help you with technical problems related to the topic of this book, and that due to the high volume of mail I receive, I might not be able to reply to every message.
When you write, please be sure to include this book’s title and author as well as your name and phone or email address. I will carefully review your comments and share them with the author and editors who worked on the book.
Email: feedback@samspublishing.com Mail: Mark Taber
Associate Publisher Sams Publishing 800 East 96th Street
Indianapolis, IN 46240 USA
Reader Services
Visit our website and register this book at www.informit.com/register for convenient access to any updates, downloads, or errata that might be available for this book.
Introduction
Over the past decade, the Web has become completely integrated into the fabric of soci- ety. Most businesses have websites, and it’s rare to see a commercial on television that doesn’t display a URL. The simple fact that most people now know what a URL is speaks volumes. People who didn’t know what the Internet was several years ago are now reconnecting with their high school friends on Facebook.
Perhaps the greatest thing about the Web is that you don’t have to be a big company to publish things on it. The only things you need to create your own website are a computer with access to the Internet and the willingness to learn. Obviously, the reason you’re reading this is that you have an interest in web publishing. Perhaps you need to learn about it for work, or you’re looking for a new means of self-expression, or you want to post baby pictures on the Web so that your relatives all over the country can stay up-to- date. The question is, how do you get started?
There’s more than enough information on the Web about how to publish websites like a seasoned professional. There are tutorials, reference sites, tons of examples, and free tools to make it easier to publish on the Web. However, the advantage of reading this book instead is that all the information you need to build websites is organized in one place and presented in an orderly fashion. It has everything you need to master HTML, publish sites to a server on the Web, create graphics for use on the Web, and keep your sites running smoothly.
But wait, there’s more. Other books on how to create web pages just teach you the basic technical details, such as how to produce a boldface word. In this book, you’ll also learn why you should be producing a particular effect and when you should use it. In addition, this book provides hints, suggestions, and examples of how to structure your overall website, not just the words on each page. This book won’t just teach you how to create a website—it’ll teach you how to create a good website.
Right now, the Web is transitioning from HTML 4/XHTML 1, the standards on which browsers have been based since the late nineties, to HTML5, a new standard that, at the time of publishing, has not been finalized. Browsers have already started adding support for HTML5, and after Internet Explorer 9 is released, all the major browsers will offer substantial support for it. In this book, examples are written in valid HTML5 using tags that also work in all current browsers wherever possible. Exceptions and caveats are noted whenever I use tags that are not valid in HTML5 or were not part of HTML 4.
Who Should Read This Book
Is this book for you? That depends:
n If you’ve seen what’s out on the Web and you want to contribute your own content, this book is for you.
n If you work for a company that wants to create a website and you’re not sure where to start, this book is for you.
n If you’re an information developer, such as a technical writer, and you want to learn how the Web can help you present your information online, this book is for you.
n If you’re just curious about how the Web works, some parts of this book are for you, although you might be able to find what you need on the Web itself.
n If you’ve created web pages before with text, images, and links, and you’ve played with a table or two and set up a few simple forms, you may be able to skim the first half of the book. The second half should still offer you a lot of helpful information.
If you’ve never seen the Web before but you’ve heard that it’s really nifty, this book isn’t for you. You’ll need a more general book about the Web before you can produce web- sites yourself.
What This Book Contains
The lessons are arranged in a logical order, taking you from the simplest tasks to more advanced techniques:
n Part I: Getting Started
In Part I, you’ll get a general overview of the World Wide Web and what you can do with it, and then you’ll come up with a plan for your web presentation. You’ll also write your first (very basic) web page.
n Part II: Creating Web Pages
In Part II, you’ll learn how to write simple documents in the HTML language and link them together using hypertext links. You’ll also learn how to format your web pages and how to use images on your pages.
n Part III: Doing More with HTML and CSS
In Part III, you’ll learn how to create tables and forms and place them on your pages. You’ll also learn how to use cascading style sheets to describe how your pages are formatted instead of tags that are focused strictly on formatting.
n Part IV: Using JavaScript and AJAX
In Part IV, we’ll look at how you can extend the functionality of your web pages by adding JavaScript to them. First, we provide an overview of JavaScript, and then we provide some specific JavaScript examples you can use on your own pages. Finally, we describe how you can dynamically modify the look and feel of your pages using Dynamic HTML.
n Part V: Designing Effective Web Pages
Part V gives you some hints for creating a well-constructed website, and you’ll explore some sample websites to get an idea of what sort of work you can do.
You’ll learn how to design pages that will reach the types of real-world users you want to reach, and you’ll learn how to create an accessible site that is usable by people with disabilities.
n Part VI: Going Live on the Web
In Part VI, you’ll learn how to put your site up on the Web, including how to advertise the work you’ve done. You’ll also learn how to use some of the features of your web server to make your life easier.
What You Need Before You Start
There are lots of books about how to use the Web. This book isn’t one of them. We’re assuming that if you’re reading this book, you already have a working connection to the Internet, you have a web browser such as Microsoft Internet Explorer, Mozilla Firefox, Apple’s Safari, or Google’s Chrome, and you’re familiar with the basics of how the Web and the Internet work. You should also have at least a passing acquaintance with some other elements of the Internet, such as email and FTP, because we refer to them in gen- eral terms in this book.
In other words, you need to have used the Web to provide content for the Web. If you meet this one simple qualification, read on!
Introduction 3
To really take advantage of all the concepts and examples in this book, you should consider using the most recent version of Microsoft Internet Explorer (version 8.0 or later), Mozilla Firefox (version 3.0 or later), Safari (version 4 or later), or Google Chrome.
Conventions Used in This Book
This book uses special typefaces and other graphical elements to highlight different types of information.
Special Elements
Three types of “boxed” elements present pertinent information that relates to the topic being discussed: Note, Tip, and Caution as follows:
NOTE
Notes highlight special details about the current topic.
NOTE
It’s a good idea to read the tips because they present shortcuts or trouble-saving ideas for performing specific tasks.
TIP
CAUTION
▼
Don’t skip the cautions. They help you avoid making bad decisions or performing actions that can cause you trouble.
Task
Tasks demonstrate how you can put the information in a lesson into practice by giv- ing you a real working example.
▲
HTML Input and Output Examples
Throughout the book, we present exercises and examples of HTML input and output.
Input
▼An input icon identifies HTML code that you can type in yourself.
Output
▼An output icon indicates the results of the HTML input in a web browser such as Microsoft Internet Explorer.
Special Fonts
Several items are presented in a monospace font, which can be plain or italic. Here’s what each one means:
plain mono—Applied to commands, filenames, file extensions, directory names, Internet addresses, URLs, and HTML input. For example, HTML tags such as
<TABLE>and<P>appear in this font.
mono italic—Applied to placeholders. A placeholder is a generic item that replaces something specific as part of a command or computer output. For
instance, the term represented by filenamewould be the real name of the file, such asmyfile.txt.
Workshop
In the “Workshop” section, you can reinforce your knowledge of the concepts in the les- son by answering quiz questions or working on exercises. The Q&A provides additional information that didn’t fit in neatly elsewhere in the lesson.
Introduction 5
LESSON 1
Navigating the World Wide Web
A journey of a thousand miles begins with a single step, and here you are in Lesson 1 of a journey that will show you how to write, design, and publish pages on the World Wide Web. But before beginning the actual journey, you should start simple, with the basics. You’ll learn the following:
n How the World Wide Web really works
n What web browsers do, and a couple of popular ones from which to choose
n What a web server is, and why you need one
n Some information about uniform resource locators (URLs) These days, the Web is pervasive, and maybe most if not all of today’s information will seem like old news. If so, feel free to skim this lesson and skip ahead to Lesson 2, “Preparing to Publish on the Web,” where you’ll find an overview of points to think about when you design and organize your own Web documents.
How the World Wide Web Works
Chances are that you’ve used the Web, perhaps even a lot. However, you might not have done a lot of thinking about how it works under the covers. In this first section, I
describe the Web at a more theoretical level so that you can understand how it works as a platform.
I have a friend who likes to describe things using many meaningful words strung together in a chain so that it takes several minutes to sort out what he’s just said.
If I were he, I’d describe the World Wide Web as a global, interactive, dynamic, cross- platform, distributed, graphical hypertext information system that runs over the Internet.
Whew! Unless you understand all these words and how they fit together, this description isn’t going to make much sense. (My friend often doesn’t make much sense, either.) So, let’s look at all these words and see what they mean in the context of how you use the Web as a publishing medium.
The Web Is a Hypertext Information System
The idea behind hypertext is that instead of reading text in a rigid, linear structure (such as a book), you can skip easily from one point to another. You can get more information, go back, jump to other topics, and navigate through the text based on what interests you at the time.
Hypertext enables you to read and navigate text and visual information in a nonlinear way, based on what you want to know next.
When you hear the term hypertext, think links. (In fact, some people still refer to links as hyperlinks.) Whenever you visit a web page, you’re almost certain to see links through- out the page. Some of the links might point to locations within that same page, others to pages on the same site, and still others might point to pages on other sites. Hypertext was an old concept when the Web was invented—it was found in applications such as HyperCard and various help systems. However, the World Wide Web redefined how large a hypertext system could be. Even large websites were hypertext systems of a scale not before seen, and when you take into account that it’s no more difficult to link to a document on a server in Australia from a server in the United States than it is to link to a document stored in the same directory, the scope of the Web becomes truly staggering.
How the World Wide Web Works 9
1
Nearly all large corporations and medium-sized businesses and organizations are using web technology to manage projects, order materials, and distribute company information in a paperless envi- ronment. By locating their documents on a private, secure web server called an intranet, they take advantage of the technologies the World Wide Web has to offer while keeping the information contained within the company.
The Web Is Graphical and Easy to Navigate
In the early days, using the Internet involved simple text-only applications. You had to navigate the Internet’s various services using command-line programs (think DOS) and arcane tools. Although plenty of information was available on the Net, it wasn’t neces- sarily pretty to look at or easy to find.
Then along came the first graphical web browser: Mosaic. It paved the way for the Web to display both text and graphics in full color on the same page. The ability to create complex, attractive pages rivaling those founds in books, magazines, and newspapers propelled the popularity of the Web. These days, the Web offers such a wide degree of capabilities that people are writing web applications that replace desktop applications.
A browser is used to view and navigate web pages and other information on the World Wide Web. Currently, the most popular browsers are Microsoft Internet Explorer, Mozilla Firefox, Apple Safari, and Google Chrome. In addition, more and more people are using mobile devices to access the Web, most of which have their own browsers.
NOTE
Hypertext or Hypermedia?
If the Web incorporates so much more than text, why do I keep calling the Web a hypertext system? Well, if you’re going to be absolutely technically correct about it, the Web is not a hypertext system—it’s a hypermedia system. But, on the other hand, you might argue that the Web began as a text-only system, and much of the content is still text-heavy, with extra bits of media added in as emphasis. I prefer the term hypertext, and it’s my book, so I use it. You know what I mean.
