ptg www.it-ebooks.info ptg 800 East 96th Street, Indianapolis, Indiana, 46240 USA Julie Meloni Michael Morrison 24 in Hours SamsTeach Yourself HTML and CSS Eighth Edition www.it-ebooks.info ptg Sams Teach Yourself HTML and CSS in 24 Hours, Eighth Edition Copyright © 2010 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 author assume no responsi- bility for errors or omissions. Nor is any liability assumed for damages resulting from the use of the information contained herein. International Standard Book Number: 0-672-33097-0 Library of Congress Cataloging-in-Publication Data Meloni, Julie C. Sams teach yourself HTML and CSS 24 hours / Julie Meloni, Michael Morrison. 8th ed. p. cm. Rev. ed. of: Sams teach yourself HTML and CSS in 24 hours / Dick Oliver, 7th ed., 2006. ISBN 978-0-672-33097-1 (pbk.) 1. HTML (Document markup language) 2. XHTML (Document markup language) 3. Cascading style sheets. I. Morrison, Michael, 1970- II. Oliver, Dick. Sams teach yourself HTML and CSS in 24 hours. III. Title. QA76.76.H94O4526 2010 006.7'4 dc22 2009046100 Printed in the United States of America First Printing: December 2009 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 information. 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 author 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 Sams Publishing offers excellent discounts on this book when ordered in quantity for bulk purchases 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@pearson.com Acquisitions Editor Mark Taber Development Editor Michael Thurston Managing Editor Patrick Kanouse Project Editor Jennifer Gallant Indexer Ken Johnson Proofreader Dan Knott Technical Editor William Wolff Publishing Coordinator Vanessa Evans Composition Mark Shirar Book Designer Gary Adair www.it-ebooks.info ptg Contents PART I: Getting Started on the Web HOUR 1: Understanding How the Web Works A Brief History of HTML and the World Wide Web 1 Creating Web Content 2 Understanding Web Content Delivery 3 Selecting a Web Hosting Provider 6 Testing with Multiple Web Browsers 8 HOUR 2: Publishing Web Content Creating the Sample File for this Hour 13 Using FTP to Transfer Files 14 Understanding Where to Place Files on the Web Server 18 Distributing Content without a Web Server 22 Testing Web Content 24 HOUR 3: Understanding HTML and XHTML Connections Getting Started with a Simple Web Page 28 HTML Tags Every XHTML Web Page Must Have 32 Organizing a Page with Paragraphs and Line Breaks 34 Organizing Your Content with Headings 36 Validating Your Web Content 39 The Scoop on HTML, XML, XHTML, and HTML 5 41 HOUR 4: Understanding Cascading Style Sheets How CSS Works 48 A Basic Style Sheet 49 A CSS Style Primer 54 Using Style Classes 58 Using Style IDs 61 Internal Style Sheets and Inline Styles 62 PART II: Building Blocks of Practical Web Design HOUR 5: Working with Text Blocks and Lists Aligning Text on a Page 68 The Three Types of HTML Lists 71 Placing Lists Within Lists 73 HOUR 6: Working with Fonts Boldface, Italics, and Special Text Formatting 82 Tweaking the Font 85 Working with Special Characters 89 HOUR 7: Using Tables to Display Information Creating a Simple Table 96 Controlling Table Sizes 99 Alignment and Spanning Within Tables 102 Page Layout with Tables 105 HOUR 8: Using External and Internal Links Using Web Addresses 111 Linking Within a Page Using Anchors 114 Linking Between Your Own Web Content 117 Linking to External Web Content 120 Linking to an Email Address 120 Opening a Link in a New Browser Window 122 Using CSS to Style Hyperlinks 123 HOUR 9: Working with Colors Best Practices for Choosing Colors 131 Understanding Web Colors 133 Using Hexadecimal Values for Colors 135 Using CSS to Set Background, Text, and Border Colors 136 HOUR 10: Creating Images for Use on the Web Choosing Graphics Software 143 The Least You Need to Know About Graphics 144 Preparing Photographic Images 145 Creating Banners and Buttons 151 Reducing the Number of Colors in an Image 153 Working with Transparent Images 154 Creating Tiled Backgrounds 154 Creating Animated Web Graphics 156 HOUR 11: Using Images in Your Web Site Placing Images on a Web Page 162 Describing Images with Text 163 Specifying Image Height and Width 165 Aligning Images 165 Turning Images into Links 169 Using Background Images 172 Using Imagemaps 173 HOUR 12: Using Multimedia in Your Web Site Linking to Multimedia Files 184 Embedding Multimedia Files 187 Additional Tips for Using Multimedia 190 HOUR 13: Working with Frames What Are Frames? 197 Building a Frameset 199 Linking Between Frames and Windows 202 Using Inline Frames 204 www.it-ebooks.info ptg iv PART III: Advanced Web Page Design with CSS HOUR 14: Working with Margins, Padding, Alignment, and Floating Using Margins 212 Padding Elements 219 Keeping Everything Aligned 223 Understanding the Float Property 224 HOUR 15: Understanding the CSS Box Model and Positioning The CSS Box Model 231 The Whole Scoop on Positioning 235 Controlling the Way Things Stack Up 239 Managing the Flow of Text 242 HOUR 16: Using CSS to Do More with Lists HTML List Refresher 245 How the CSS Box Model Affects Lists 246 Placing List Item Indicators 249 Creating Image Maps with List Items and CSS 251 HOUR 17: Using CSS to Design Navigation How Navigation Lists Differ from Regular Lists 259 Creating Vertical Navigation with CSS 260 Creating Horizontal Navigation with CSS 270 HOUR 18: Using Mouse Actions to Modify Text Display Creating a Tool Tip with CSS 277 Displaying Additional Rollover Text with CSS 281 Accessing Events 283 Using onclick to Change <div> Appearance 284 HOUR 19: Creating Fixed or Liquid Layouts Understanding Fixed Layouts 294 Understanding Liquid Layouts 295 Creating a Fixed/Liquid Hybrid Layout 298 PART IV: Advanced Web Site Functionality and Management HOUR 20: Creating Print-Friendly Web Pages What Makes a Page Print-Friendly? 312 Applying a Media-Specific Style Sheet 315 Designing a Style Sheet for Print Pages 317 Viewing a Web Page in Print Preview 320 HOUR 21: Understanding Dynamic Web Sites Understanding the Different Types of Scripting 325 Including JavaScript in HTML 326 Displaying Random Content 328 Understanding the Document Object Model 332 Changing Images Based on User Interaction 333 HOUR 22: Working with Web-Based Forms How HTML Forms Work 339 Creating a Form 340 Accepting Text Input 344 Naming Each Piece of Form Data 345 Including Hidden Data in Forms 345 Exploring Form Input Controls 346 Submitting Form Data 349 HOUR 23: Organizing and Managing a Web Site When One Page Is Enough 356 Organizing a Simple Site 357 Organizing a Larger Site 360 Writing Maintainable HTML Code 364 HOUR 24: Helping People Find Your Web Pages Publicizing Your Web Site 371 Listing Your Pages with the Major Search Sites 373 Providing Hints for Search Engines 374 Additional Tips for Search Engine Optimization 379 www.it-ebooks.info ptg v PART V: Appendixes APPENDIX A: HTML and CSS Resources on the Internet General HTML, XHTML, and CSS Information 385 Web Browsers 386 Web Page Design 386 Software 386 Colors and Graphics 387 Multimedia 388 Advanced Developer Resources 388 Web Site Hosting 389 Web Site Services 389 APPENDIX B: HTML and CSS Quick Reference HTML Structure 392 HTML Text Phrases and Paragraphs 395 XHTML Text Formatting Elements 398 XHTML Lists 399 XHTML Links 400 XHTML Tables 402 XHTML Embedded Content 407 XHTML Style 410 XHTML Forms 410 XHTML Scripts 413 XHTML Common Attributes 414 CSS Dimension Style Properties 415 CSS Text and Font Style Properties 416 CSS Background Style Properties 419 CSS Border Style Properties 420 CSS Margin Style Properties 423 CSS Padding Style Properties 424 CSS Layout and Display Style Properties 424 CSS List and Marker Style Properties 427 CSS Table Style Properties 428 www.it-ebooks.info ptg vi About the Authors Julie C. Meloni is both the technical director for i2i Interactive, a multimedia company located in Los Altos, CA, and a scholar working in the field of Digital Humanities. She has written several books and articles on Web-based programming languages and database topics, including the best- selling Sams Teach Yourself PHP, MySQL, and Apache All in One. Michael Morrison is a writer, developer, toy inventor, and author of a variety of computer technolo- gy books and interactive web-based courses. In addition to his primary profession as a writer and freelance nerd for hire, Michael is the creative lead at Stalefish Labs, an entertainment company he co-founded with his wife, Masheed. We Want to Hear from You! As the reader of this book, you are our most important critic and commentator. We value your opin- ion 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: webdev@samspublishing.com Mail: Mark Taber Associate Publisher Sams Publishing 800 East 96 th Street Indianapolis, IN 46240 USA Reader Services Visit our web site and register this book at informit.com/register for convenient access to any updates, downloads, troubleshooting hints, or errata that might be available for this book. www.it-ebooks.info ptg vii Introduction In 2009, it is estimated that more than 1.5 billion people have access to the Internet, including 220 million in the U.S. alone. Throw in 338 million Chinese users, 55 million German users, 48 million British users, 38 million Russian users, and 67 million Brazilians, and you can see the meaning of the word “world” in the term World Wide Web. Many of these Internet users are also creating content for the Web—you can be one of them! Although accurate measurements of the total number of web pages are difficult to come by, Google’s most recent data indicates they hit the 1 trillion mark of indexed pages in the middle of 2008. In the next 24 hours, hundreds of millions of new pages will appear in accessible areas of the Internet. At least as many pages will be placed on private intranets, where they will be viewed by businesspeople connected via their local networks. Every one of those pages—like the more than 1 trillion pages already online—will use Hypertext Markup Language (HTML). As you complete the 24 one-hour lessons in this book, your web pages will be among those that appear on the Internet. These lessons will also help you develop one of the most valuable skills in the world today: mastery of HTML. Can you really learn to create top-quality web pages yourself, without any specialized software, in less time than it takes to schedule and wait for an appointment with a highly paid HTML wizard? Can this relatively short, easy-to-read book really enable you to teach yourself state-of-the-art web page publishing? Yes. In fact, within the first two lessons in this book, someone with no previous HTML experience at all can have a web page ready to place on the web. How can you learn the language of the Web so fast? By example. This book organizes HTML into simple steps and then shows you exactly how to tackle each step. Every HTML code example is listed directly before a picture of the web page it produces. You see how it’s done, you read a clear, concise explanation of how it works, and then you immediately do the same thing with your own page. Ten minutes later, you’re on to the next step. After 24 hours of work, you’re marveling at your own impressive pages on the Internet. Beyond HTML This book covers more than just HTML because HTML isn’t the only thing you need to know to cre- ate web content today. The goal of this book is to give you all the skills you need to create a mod- ern, standards-compliant web site in just 24 short, easy lessons. This book covers the following key skills and technologies: . XHTML (eXstensible Hypertext Markup Language) is the current standard for web page cre- ation. Every example in this book is fully XHTML-compatible. Where applicable, HTML 5 is also covered. www.it-ebooks.info ptg viii . All the examples in the book have been tested for compatibility with the latest version of every major web browser. That includes Apple Safari, Google Chrome, Microsoft Internet Explorer, Mozilla Firefox, and Opera. You’ll learn from the start to be compatible with the past, yet ready for the future. . There is extensive coverage of Cascading Style Sheets (CSS), which allows you to carefully control the layout, fonts, colors, and formatting of every aspect of your web pages, including both text and images. When it comes to creating eye-popping web pages, CSS goes far beyond what traditional HTML pages could do by themselves. For example, did you know that CSS allows you to specifically tailor the information on a page just for printing, in addition to normal web viewing? . Hours 10 through 12 introduce you to multimedia applications and their use, including where to find industry-standard software you can download and try free. . The technical stuff is not enough, so this book also includes the advice you need when set- ting up a web site to achieve your goals. Key details—designing an effective page layout, posting your page to the Internet with FTP software, organizing and managing multiple pages, and getting your pages to appear high on the query lists at all the major Internet search sites—are all covered in enough depth to get you beyond the snags that often frustrate beginners. Attention to many of these essentials are what made the first seven editions of this book best- sellers, and this updated edition—the first for this title since 2005—is no different. All of the examples have been updated and a significant portion of the content has been revised to match new examples and new technologies. Visual Examples Every example in this book is illustrated in two parts: . The text you type to make an HTML page is shown first, with all HTML and CSS code high- lighted. . The resulting web page is shown as it will appear to users who view it with the world’s most popular web browsers. You’ll often be able to adapt the example to your own pages without reading any of the accompany- ing text at all. All the examples in this book are standards-compliant and work with Apple Safari, Google Chrome, Microsoft Internet Explorer, Mozilla Firefox, and Opera. While all of the screenshots are taken in Firefox, rest assured that all of the code has been tested in all other browsers. www.it-ebooks.info ptg ix You will also find the use of colors within code examples and when elements of code appear in the explanatory text. These colors highlight the different bits and pieces of code both to enhance your familiarity with them and to call attention to their use. . HTML tags are displayed in dark blue. . HTML comments are displayed in brown. . CSS elements are displayed in green. . HTML attribute names are displayed in light blue. . HTML attribute values are displayed in magenta. Be aware that the colors of certain terms change depending on their context. For instance, when CSS elements are used within the style attribute of an HTML tag, they will be color-coded as HTML attribute values (magenta) rather than CSS elements (green). Special Elements As you complete each hour, margin notes help you immediately apply what you just learned to your own web pages. Q&A, Quiz, and Exercises Every hour ends with a short question-and-answer session that addresses the kind of “dumb ques- tions” everyone wishes they dared to ask. A brief but complete quiz lets you test yourself to be sure you understand everything presented in the hour. Finally, one or two optional exercises give you a chance to practice your new skills before you move on. TIP Tips and tricks to save you precious time are set aside in “Tip” boxes so that you can spot them quickly. WARNING When there’s something you need to watch out for, you’ll be warned about it in “Warning” boxes. NOTE “Note” boxes provide addition- al information about the topics being discussed. www.it-ebooks.info [...]...This page intentionally left blank www.it-ebooks.info HOUR 1 Understanding How the Web Works Before learning the intricacies of HTML and CSS, it is important that you gain a solid understanding of the technologies that help transform these plain-text files to the rich multimedia displays you see on your computer or handheld device when browsing the World Wide Web A file containing HTML and CSS is useless... other words, while we might think all we are doing is opening a web browser, typing in a web address, and instantaneously seeing the content we requested, technology in the background is working hard on our behalf Figure 1.1 shows the basic interaction between a browser and a server www.it-ebooks.info 3 4 HOUR 1: Understanding How the Web Works FIGURE 1.1 A browser request and a server response However,... online documentation for common issues Server space—does the hosting package include enough server space to hold all the multimedia files (images, audio, video) you plan to include in your web site (if any)? Bandwidth—does the hosting package include enough bandwidth so that all the people visiting your site and downloading files can do so without you having to pay extra? Domain name purchase and. .. they can get away with charging people A good rule of thumb is that if you are paying more than $75 per year for a basic hosting package and domain name, you are probably paying too much www.it-ebooks.info Selecting a Web Hosting Provider 7 Here are three reliable web hosting providers whose basic packages contain plenty of server space and bandwidth (as well as domain names and extra benefits) at a relatively... certain circumstances—as opposed to being hand-coded, in which you are completely in control of the resulting markup In this book, you are taught fundamental coding from the ground up, which typically results in clean, easy-to-read source code Visual web design tools have a knack for making code difficult to read, and also for producing code that is convoluted and non-standards compliant www.it-ebooks.info... subdirectory using Classic FTP, click the Remote menu and then click New Folder Different FTP clients will have different interface options to achieve the same goal Understanding Where to Place Files on the Web Server An important aspect of maintaining web content is determining how you will organize that content—not only for the user to find, but also for you to maintain on your server Putting files in directories... creating an HTML file and uploading it via FTP to your own dedicated web server, but I would be remiss if I did not note that blogging is, in fact, a form of web publishing www.it-ebooks.info NOTE Distributing a web browser isn’t required when creating and distributing a local site, although it’s a nice touch You can reasonably assume that users have their own web browsers and will open the index .html. .. lessons in this book by viewing files locally on your own computer, or are you going to use a web hosting provider? Note that most web hosting providers will have you up and running the same day you purchase your hosting plan www.it-ebooks.info 11 This page intentionally left blank www.it-ebooks.info HOUR 2 Publishing Web Content In the previous hour, you learned about the process of requesting web... for Mac, Windows, and Linux Microsoft Internet Explorer (http://www.microsoft.com/ie) for Windows Opera (http://www.opera.com/) for Mac, Windows, and Linux/UNIX Summary This hour introduced you to the concept of using HTML to mark-up text files in order to produce web content You also learned that there is more to web content than just the “page”—web content also includes image, audio, and video... root and put the sample .html file in that directory, then the file would be accessed at this URL: http://www.yourdomain.com/newdirectory/sample .html www.it-ebooks.info 20 HOUR 2: Publishing Web Content If you put the sample .html file in the directory you originally saw upon connecting to your server—that is, you did not change directories and place the file in the document root—then the sample.html . ptg www.it-ebooks.info ptg 800 East 96th Street, Indianapolis, Indiana, 4 6240 USA Julie Meloni Michael Morrison 24 in Hours SamsTeach Yourself HTML and CSS Eighth Edition www.it-ebooks.info ptg Sams Teach Yourself. Padding, Alignment, and Floating Using Margins 212 Padding Elements 219 Keeping Everything Aligned 223 Understanding the Float Property 224 HOUR 15: Understanding the CSS Box Model and Positioning The CSS Box. 105 HOUR 8: Using External and Internal Links Using Web Addresses 111 Linking Within a Page Using Anchors 114 Linking Between Your Own Web Content 117 Linking to External Web Content 120 Linking to