SAMPLE FOR TABLE OF CONTENTS Foreword . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 An Introduction and History of CoffeeCup . . . . . . . . . . . . . . . . . . . . . . . . . . 3 Part 1: The Building Blocks of Great Websites . . . . . . . . . . . . . . . . . . . . . . . . 7 CHAPTER 1: My Website Is Better Than Yours! . . . . . . . . . . . . . . . . . . . . . . 9 Web Design and Web Hosting . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9 What Exactly Is a Web Page? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10 Website Design Software . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12 CHAPTER 2: Getting Started with HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . 13 The Origins of HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13 Fundamental Concepts of HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14 Basic HTML Document Structure . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19 The Tag . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19 Document Information Tags . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20 Tags for Presenting Simple Text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22 Tags for Creating Lists . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23 Tags for Displaying Images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24 Review and Practice . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34 Chapter 3: Formatting Your Web Pages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35 HTML and Colors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35 The Tag . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36 Changing Text Style . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37 Changing Font Appearance and Size . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38 Preserving White Space . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41 Changing Paragraph and Heading Alignment . . . . . . . . . . . . . . . . . . . . . . 42 Horizontal Rules . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42 Frames and Why Not to Use Them . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43 Review and Practice . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46 SAMPLE FOR TABLE OF CONTENTS Chapter 4: Magic with HTML Tables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47 Table Fundamentals . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47 The Basic Table Tags . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48 Adjustable vs. Fixed-Width Tables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48 Attributes of the Tag . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49 Working with Table Rows . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51 Merging Cells . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53 Embedding a Table in Another Table . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55 Review and Practice . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60 CHAPTER 5: Creating and Uploading Your Web Pages . . . . . . . . . . . . . . . . . 61 Website Editing Tools . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61 Best of Both Worlds . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63 Web Servers and Publishing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63 Understanding and Using FTP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 68 PART 2: Moving Beyond the Basics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69 CHAPTER 6: Creating and Using HTML Forms . . . . . . . . . . . . . . . . . . . . . . 71 Form Fundamentals . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71 The Tag . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72 Form Elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72 Specifying the Form Destination . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 77 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 80 CHAPTER 7: Formatting Web Pages with Style Sheets . . . . . . . . . . . . . . . . . 81 Style Sheet Fundamentals . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81 Style Sheet Structure . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82 What Does Cascading Mean? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82 Working with Selectors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 83 Defining CSS Styles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 85 Some Style Sheet Examples . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 94 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 99 CHAPTER 8: Introduction to Scripting and the Document Object Model . . 101 What Is Scripting? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 101 The Document Object Model . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 102 A Demonstration . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 103 ii SAMPLE FOR TABLE OF CONTENTS JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 108 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 124 CHAPTER 9: Real-World DHTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 125 Restricting Text Box Input . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 125 Writing Text and HTML to the Document . . . . . . . . . . . . . . . . . . . . . . . . . 126 Creating Rollovers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 129 Validating User Form Input . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 131 Formatting Numbers for Display . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 137 Including JavaScript from External Files . . . . . . . . . . . . . . . . . . . . . . . . . . 138 Displaying Random Images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 139 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 140 CHAPTER 10: Selling Online and Site Security . . . . . . . . . . . . . . . . . . . . . . . 141 Selling Online . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 141 Accepting Credit Card Payments . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 142 Website Security . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 145 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 146 PART 3: Deconstructing Web Pages Ñ Some Real Life Dos and DonÕts . . . . 147 CHAPTER 11: Deconstructing Web Pages, Part I . . . . . . . . . . . . . . . . . . . . . . 149 Deconstructing Ñ How To . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 149 Deconstructing CoffeeCup.com . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 151 Deconstructing eBay.com . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 157 Deconstructing Ford.com . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 161 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 168 CHAPTER 12: Deconstructing Web Pages, Part II . . . . . . . . . . . . . . . . . . . . . 169 Deconstructing Amazon.com . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 169 Deconstructing CNN.com . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 176 Deconstructing Webpagesthatsuck.com . . . . . . . . . . . . . . . . . . . . . . . . . . . 183 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 188 CHAPTER 13: Deconstructing Web Pages, Part III . . . . . . . . . . . . . . . . . . . . 189 Deconstructing useit.com . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 189 Deconstructing Download.com . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 191 Deconstructing google.com . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 198 SAMPLE FOR TABLE OF CONTENTS PART 4: Advice From a Professional Webmaster . . . . . . . . . . . . . . . . . . . . . . 201 CHAPTER 14: Website Usability Concerns . . . . . . . . . . . . . . . . . . . . . . . . . . 203 Navigational Structure . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 203 Site Maps . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 205 Browser Compatibility Issues . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 205 Screen Size Concerns . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 206 Download Times . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 207 Creating Accessible Web Pages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 208 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 208 CHAPTER 15: Optimizing Your Site for the Search Engines . . . . . . . . . . . . . 209 Search Engine Basics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 209 How Search Engines Work . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 209 Submitting Your Site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 210 Outside Links . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 211 Page Optimization Techniques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 212 Page Design Considerations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 216 Standards Compliance and Valid HTML . . . . . . . . . . . . . . . . . . . . . . . . . . 217 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 218 CHAPTER 16: Images for Your Website . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 219 Image Basics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 219 The Web Image File Formats . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 222 Image Display in Browsers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 223 Optimizing Image Size . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 224 Making the Most of the Tag . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 226 Creating Simple Animations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 227 Creating Image Maps . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 228 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 231 CHAPTER 17: Blogging, RSS, and Flash . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 233 Blogging . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 233 Really Simple Syndication (RSS) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 235 Flash . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 237 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 238 INDEX . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 239 iv