ptg Download from www.wowebook.com ptg in One Hour aDay Web Publishing with HTML and CSS Sams Teach Yourself Laura Lemay Rafe Colburn 800 East 96th Street, Indianapolis, Indiana 46240 Download from www.wowebook.com ptg Sams 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 Acquisitions Editor 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 Download from www.wowebook.com ptg 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 Download from www.wowebook.com ptg Table of Contents 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 Download from www.wowebook.com ptg 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 Download from www.wowebook.com ptg 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 vi Sams Teach Yourself Web Publishing with HTML and CSS in One Hour a Day Download from www.wowebook.com ptg 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 Download from www.wowebook.com ptg 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 viii Sams Teach Yourself Web Publishing with HTML and CSS in One Hour a Day Download from www.wowebook.com ptg 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 Download from www.wowebook.com . the information contained herein. ISBN -1 3 : 97 8-0 -6 7 2-3 309 6-4 ISBN -1 0 : 0-6 7 2-3 309 6-2 Library of Congress Catalog-in-Publication data is on file. First Printing: August 2 010 Trademarks All terms mentioned. <a> Tag 12 3 Kinds of URLs 12 3 HTTP 12 3 Anonymous FTP 12 4 Non-Anonymous FTP 12 5 Mailto 12 5 File 12 6 Summary 12 7 Workshop 12 8 Q&A 12 8 Quiz 13 0 Quiz Answers 13 0 Exercises 13 0 LESSON. and Font Sizes 15 5 Summary 16 7 Workshop 17 1 Q&A 17 1 Quiz 17 2 Quiz Answers 17 2 Exercises 17 2 PART III: Doing More with HTML and CSS LESSON 8: Using CSS to Style a Site 17 3 Including Style