www.it-ebooks.info www.it-ebooks.info Creating a Website The book that should have been in the box ® www.it-ebooks.info www.it-ebooks.info Creating a Website Matthew MacDonald Beijing | Cambridge | Farnham | Köln | Sebastopol | Tokyo The book that should have been in the box ® 3rd Edition www.it-ebooks.info Creating a Website: The Missing Manual, Third Edition by Matthew MacDonald Copyright © 2011 O’Reilly Media, Inc. All rights reserved. Printed in the United States. Published by O’Reilly Media, Inc., 1005 Gravenstein Highway North, Sebastopol, CA 95472. O’Reilly Media books may be purchased for educational, business, or sales promotional use. Online editions are also available for most titles: http://my.safaribooksonline.com. For more information, contact our corporate/institutional sales department: 800-998-9938 or corporate@oreilly.com. Printing History: April 2011: Third Edition. Nutshell Handbook, the Nutshell Handbook logo, the O’Reilly logo, and “The book that should have been in the box” are registered trademarks of O’Reilly Media, Inc. Creating a Website: The Missing Manual, the Missing Manual logo, Pogue Press, and the Pogue Press logo are trademarks of O’Reilly Media, Inc. Many of the designations used by manufacturers and sellers to distinguish their products are claimed as trademarks. Where those designations appear in this book, and O’Reilly Media, Inc., was aware of a trademark claim, the designations have been printed in caps or initial caps. While every precaution has been taken in the preparation of this book, the publisher and author assume no responsibility for errors or omissions, or for damages resulting from the use of the information contained herein. ISBN: 978-1-449-30172-9 [LSI] www.it-ebooks.info v Table of Contents The Missing Credits . . . . . . . . . . . . . . . . . . . . . . . . . . . xiii Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 Chapter 1: Preparing for the Web . . . . . . . . . . . . . . . . . . . . 7 Introducing the World Wide Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7 Web Browsers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8 Web Servers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12 Planning a Website . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13 Types of Sites . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13 The Lifespan of Your Site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15 Practice Good Design . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16 The Ingredients of a Website . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17 Chapter 2: Creating Your First Page . . . . . . . . . . . . . . . . . . 19 Introducing HTML: The Language of the Web . . . . . . . . . . . . . . . . . . . . . . . . 19 Cracking Open an HTML File . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20 Seeing the HTML of a Live Web Page . . . . . . . . . . . . . . . . . . . . . . . . . . 22 Creating an HTML File . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22 HTML, XHTML, and HTML5 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24 HTML Tags . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26 What’s in a Tag . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26 Understanding Elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27 Nesting Elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29 The HTML Document . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30 The Document Type Definition . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30 The Basic Skeleton . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32 Adding Content . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34 Structuring Text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35 Where Are All the Pictures? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39 The 10 Most Important Elements (and a Few More) . . . . . . . . . . . . . . . . . . 41 Checking Your Pages for Errors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45 www.it-ebooks.info vi    Chapter 3: Putting Your Page on the Web . . . . . . . . . . . . . . 49 How Web Hosting Works . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49 Understanding the URL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50 How Browsers Analyze a URL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52 Domain Names . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54 Choosing the Right Domain Name . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54 Searching for a Name . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56 Registering Your Name . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57 Free Domain Names . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61 Getting Web Space . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62 Assessing Your Needs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63 Choosing Your Host . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66 Free Web Hosts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71 Transferring Files . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72 FTP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72 Browser-Based Uploading . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75 Chapter 4: Power Tools . . . . . . . . . . . . . . . . . . . . . . . . . 77 Choosing Your Tools . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 78 Types of Web Page Editors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79 Finding a Free Web Page Editor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 80 Professional HTML Editors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 84 Working with Your HTML Editor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 85 Starting Out . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 86 Multiple Views . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 86 Creating a Web Page in Code View . . . . . . . . . . . . . . . . . . . . . . . . . . . 88 Creating a Web Page in WYSIWYG View . . . . . . . . . . . . . . . . . . . . . . . . . 89 Managing a Website . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 91 Defining a Site in Expression Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . 92 Uploading a Site in Expression Web . . . . . . . . . . . . . . . . . . . . . . . . . . . 94 Defining a Site in Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97 Uploading a Site in Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . 99 Chapter 5: Text Elements . . . . . . . . . . . . . . . . . . . . . . . . 103 Understanding Text and the Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 103 Logical Structure vs. Physical Formatting . . . . . . . . . . . . . . . . . . . . . . . 104 CSS (Cascading Style Sheets) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 105 HTML Elements for Basic Text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 107 Paragraphs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 109 Line Breaks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 110 Headings . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 112 Horizontal Lines . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 113 Preformatted Text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 114 Quotes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 115 Divisions and Spans . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 117 www.it-ebooks.info vii    HTML Elements for Lists . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 119 Ordered Lists . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 119 Unordered Lists . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 121 Definition Lists . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 121 Nesting Lists . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 122 HTML Elements for Tables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 124 A Basic Table . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 124 Cell Spans . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 126 Inline Formatting . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 128 Text Formatting: Italics and Bold . . . . . . . . . . . . . . . . . . . . . . . . . . . . 128 A Few More Formatting Elements . . . . . . . . . . . . . . . . . . . . . . . . . . . 129 Special Characters . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 130 Non-English Languages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 132 Chapter 6: Style Sheets . . . . . . . . . . . . . . . . . . . . . . . . . 135 Style Sheet Basics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 136 The Three Types of Styles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 136 The Anatomy of a Rule . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 138 Attaching a Style Sheet to a Page . . . . . . . . . . . . . . . . . . . . . . . . . . . 139 Using an Internal Style Sheet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 142 Using Inline Styles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 143 The Cascade . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 144 Inheritance . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 145 More Powerful Selectors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 147 Class Selectors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 147 id Selectors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 148 Colors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 149 Specifying a Color . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 150 Finding the Right Color . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 151 Text Alignment and Spacing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 152 Alignment . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 154 Spacing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 155 White Space . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 156 Basic Fonts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 157 Specifying a Font . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 159 Finding the Right Font . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 160 Font Sizes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 161 Embedded Fonts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 165 Web Formats for Fonts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 166 Using a Font Kit . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 167 Using Your Own Fonts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 170 Borders . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 171 Basic Borders . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 172 Making Better Borders . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 172 Using Borders with Tables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 173 www.it-ebooks.info viii    Tutorial: Building a Style Sheet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 175 Creating a Well-Structured Style Sheet . . . . . . . . . . . . . . . . . . . . . . . . . 175 Saving Work with the <div> Element . . . . . . . . . . . . . . . . . . . . . . . . . 179 Saving Work with Contextual Selectors . . . . . . . . . . . . . . . . . . . . . . . . 180 Chapter 7: Adding Graphics . . . . . . . . . . . . . . . . . . . . . . 183 Understanding Images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 183 The <img> Element . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 184 Alternate Text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 184 Picture Size . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 186 File Formats for Graphics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 188 Putting Pictures on Colored Backgrounds . . . . . . . . . . . . . . . . . . . . . . . 191 Images and Styles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 194 Inline Images in Text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 194 Borders . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 195 Wrapping Text Around an Image . . . . . . . . . . . . . . . . . . . . . . . . . . . . 196 Adding Captions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 199 Background Images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 201 Techniques with Graphics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 204 Graphical Text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 204 Backgrounds for Other Elements . . . . . . . . . . . . . . . . . . . . . . . . . . . 207 Graphical Bullets in a List . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 208 Finding Free Art . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 209 Chapter 8: Linking Pages . . . . . . . . . . . . . . . . . . . . . . . . 213 Understanding the Anchor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 213 Internal and External Links . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 214 Relative Links and Folders . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 217 Changing Link Colors and Underlining . . . . . . . . . . . . . . . . . . . . . . . . 222 Mailto Links . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 224 Image Links and Image Maps . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 226 Adding Bookmarks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 229 When Good Links Go Bad . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 231 Site Management . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 232 Link Checkers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 233 Using Redirects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 236 Chapter 9: Page Layout . . . . . . . . . . . . . . . . . . . . . . . . . 239 The Challenge of Screen Space . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 239 Style-Based Layout . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 243 Structuring Pages with the <div> Element . . . . . . . . . . . . . . . . . . . . . . . 243 Floating Boxes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 244 Fixed Boxes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 245 Creating a Layout with Multiple Columns . . . . . . . . . . . . . . . . . . . . . . . . . 246 Building a Fixed-Width Layout . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 247 Creating a Resizable Layout . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 250 Maximum Width: The Safety Net . . . . . . . . . . . . . . . . . . . . . . . . . . . 252 www.it-ebooks.info [...]... with him in Excel 2010: The Missing Manual Data geeks can follow him into the dizzying world of databases with Access 2010: The Missing Manual And human beings of all description can discover just how strange they really are in Your Brain: The Missing Manual and Your Body: The Missing Manual About the Creative Team Peter McKie (editor) had the pleasure of working on the previous edition of this book He... creating a website: the missing manual www.it-ebooks.info Introduction About the Online Resources As the owner of a Missing Manual, you’ve got more than just a book to read Online, you’ll find example files as well as tips, articles, and maybe even a video or two You can also communicate with the Missing Manual team and tell us what you love (or hate) about the book Head over to www.missingmanuals.com,... and add audio and video (Chapter 17)? All these features take you beyond basic web design and put you on the road to becoming a genuine web expert 18 creating a website: the missing manual www.it-ebooks.info chapter 2 Creating Your First Page W  eb pages are the basic unit of a website, and every website is a collection of one or more pages The ideal web page contains enough information to fill the. .. PayPal and Yahoo provide services that can help you build shopping cart–style sites 14 creating a website: the missing manual www.it-ebooks.info Planning a Website and accept credit card payments You can also host Google ads or hawk products from Amazon’s website to rake in some cash You’ll learn about these great tricks in Chapter 14 Once you pinpoint your website s raison d’être, you should have a. .. download a Windows incarnation Safari is still far more popular on Macs, however Go on Safari at www.apple.com/safari • Opera is a slimmed-down, easy-to-install browser that’s been around for well over a decade, serving as an antidote to the bloated size and pointless frills of Internet Explorer For years, Opera was held back by an unfortunate detail—if you wanted an ad-free version, you needed to pay... same company you use for Internet access; they may even include server space as part of your Internet connection package But the most straightforward approach is to use a dedicated web hosting company Either way, you’re going to copy your newly built the websites to some far-off computer that will make sure a worldwide audience can enjoy your talents 12 creating a website: the missing manual www.it-ebooks.info... 379 Chapter 14: Making Money with Your Site 383 Money-Making the Web Way Google AdSense Signing Up for AdSense The AdSense Interface Creating an Ad Placing Ads in Your Web Pages Google-Powered Searches Amazon Associates Signing Up As an Associate Generating Associate Links PayPal Merchant Tools Signing Up with PayPal Accepting Payments... building a website about your favorite music, art, books, food, political movement, or American Idol contestants than you are in talking about your own life, a topical website is for you Before you set out to create a site, consider whether other people with a similar interest will want to visit it, and take a look at existing sites on the topic The best topical websites attract others with the same interest... its age, the Internet is older than you might think The computer visionaries who created it began developing the idea in the early 1960s In 1969, the first transmission over the Internet took place, between a computer at the University of California at Los Angeles and one at the Stanford Research Institute As far as pioneering moments go, it wasn’t much to brag about the computer crashed when it reached... Instead, think of it as version 1, and start planning a few changes for the next version Bit by bit, and stage by stage, you can add everything you want your site to have • Select the parts you can modify regularly, and leave the rest alone There’s no way you can review and revise an entire website every week Instead, your best strategy is to identify sections you want to change regularly On a personal . registered trademarks of O’Reilly Media, Inc. Creating a Website: The Missing Manual, the Missing Manual logo, Pogue Press, and the Pogue Press logo are trademarks of O’Reilly Media, Inc. Many of the. The Missing Manual. Data geeks can follow him into the dizzying world of databases with Access 2010: The Missing Manual. And human beings of all description can discover just how strange they. strange they really are in Your Brain: The Missing Manual and Your Body: The Missing Manual. About the Creative Team Peter McKie (editor) had the pleasure of working on the previous edition of