Building a Website for Dummies

[Virtual Presenter] Learn to: • Plan and design a great-looking Web site • Work with HTML, CSS, and navigation plans • Collect and create content that gets attention • Take your site online and attract visitors who come back David A. Crowder Author of Google Earth For Dummies Building a Web Site 4th Edition Making Everything Easier!™ Open the book and find: • Site planning tips • How to create a basic page in Dreamweaver • Inexpensive ways to get your site online • What you need to know about graphics • How to put forms on your site and process responses • Helpful tips for a successful business site • Ten great places to get advice • Some super e-commerce tools David A. Crowder is a professor in the School of Languages at the University of Antioquia in Colombia. He has authored or coauthored more than 25 books, including Google Earth For Dummies and previous editions of Building a Web Site For Dummies. $24.99 US / $29.99 CN / £17.99 UK ISBN 978-0-470-56093-8 Internet/Web Page Design Go to Dummies.com® for videos, step-by-step examples, how-to articles, or to shop! Web building demystified! Here’s what you need to know to create a great site Back by popular demand and fully updated — here’s the fun, easy, straightforward way to build a cool Web site, even if you’ve never done it before! Learn Web lingo, master HTML tags and WYSIWYG editors, make your pages look cool with graphics, add a blog, and attract an audience. You’ll even be able to get an e-commerce site open for business! • Brush up on basics — see how basic HTML works and compare different types of editors • Get that look — arrange your text for easy reading with tables, frames, and framesets, and keep everything up to date with cascading style sheets • What’s in a name — choose and register a domain name and select the best host for your site • Worth a thousand words — learn where to get free graphics and how to edit and include them in your pages • Dress it up — explore tricks for adding image-based buttons, audio, and video to your site • Mean business — discover how to set up a site for your online business, connect with search sites, and link your site to others • Get paid — obtain a merchant account, register with PayPal, and learn to protect yourself from credit card fraud Building a Web Site Crowder spine=.72” www.it-ebooks.info.

[Audio] Mobile Apps There's a Dummies App for This and That With more than 200 million books in print and over 1,600 unique titles, Dummies is a global leader in how-to information. Now you can get the same great Dummies information in an App. With topics such as Wine, Spanish, Digital Photography, Certification, and more, you'll have instant access to the topics you need to know in a format you can trust. To get information on all our Dummies apps, visit the following: www.Dummies.com/go/mobile from your computer. www.Dummies.com/go/iphone/apps from your phone. 2nd Edition spine=.72" Start with FREE Cheat Sheets Cheat Sheets include • Checklists • Charts • Common Instructions • And Other Good Stuff! Get Smart at Dummies.com Dummies.com makes your life easier with 1,000s of answers on everything from removing wallpaper to using the latest version of Windows. Check out our • Videos • Illustrated Articles • Step-by-Step Instructions Plus, each month you can win valuable prizes by entering our Dummies.com sweepstakes. * Want a weekly dose of Dummies? Sign up for Newsletters on • Digital Photography • Microsoft Windows & Office • Personal Finance & Investing • Health & Wellness • Computing, iPods & Cell Phones • eBay • Internet • Food, Home & Garden Find out "HOW" at Dummies.com *Sweepstakes not currently available in all countries; visit Dummies.com for official rules. Get More and Do More at Dummies.com® To access the Cheat Sheet created specifically for this book, go to www.dummies.com/cheatsheet/buildingawebsite www.it-ebooks.info.

[Audio] Building a Web Site FOR DUMmIES ‰ 4TH EDITION 01_560938-ffirs.indd i 01_560938-ffirs.indd i 5/14/10 8:44 PM 5/14/10 8:44 PM www.it-ebooks.info.

[Audio] 01_560938-ffirs.indd ii 01_560938-ffirs.indd ii 5/14/10 8:44 PM 5/14/10 8:44 PM www.it-ebooks.info.

[Audio] by David A. Crowder Building a Web Site FOR DUMmIES ‰ 4TH EDITION 01_560938-ffirs.indd iii 01_560938-ffirs.indd iii 5/14/10 8:44 PM 5/14/10 8:44 PM www.it-ebooks.info.

[Audio] Building a Web Site For Dummies®, 4th Edition Published by Wiley Publishing, Inc. 111 River Street Hoboken, NJ 07030-5774 www.wiley.com Copyright © 2010 by Wiley Publishing, Inc., Indianapolis, Indiana Published by Wiley Publishing, Inc., Indianapolis, Indiana Published simultaneously in Canada No part of this publication may be reproduced, stored in a retrieval system or transmitted in any form or by any means, electronic, mechanical, photocopying, recording, scanning or otherwise, except as permitted under Sections 107 or 108 of the 1976 United States Copyright Act, without either the prior written permission of the Publisher, or authorization through payment of the appropriate per-copy fee to the Copyright Clearance Center, 222 Rosewood Drive, Danvers, MA 01923, (978) 750-8400, fax (978) 646-8600. Requests to the Publisher for permission should be addressed to the Permissions Department, John Wiley & Sons, Inc., 111 River Street, Hoboken, NJ 07030, (201) 748-6011, fax (201) 748-6008, or online at http:// www.wiley.com/go/permissions. Trademarks: Wiley, the Wiley Publishing logo, For Dummies, the Dummies Man logo, A Reference for the Rest of Us!, The Dummies Way, Dummies Daily, The Fun and Easy Way, Dummies.com, Making Everything Easier, and related trade dress are trademarks or registered trademarks of John Wiley & Sons, Inc. and/ or its affi liates in the United States and other countries, and may not be used without written permission. All other trademarks are the property of their respective owners. Wiley Publishing, Inc., is not associated with any product or vendor mentioned in this book. LIMIT OF LIABILITY/DISCLAIMER OF WARRANTY: THE PUBLISHER AND THE AUTHOR MAKE NO REPRESENTATIONS OR WARRANTIES WITH RESPECT TO THE ACCURACY OR COMPLETENESS OF THE CONTENTS OF THIS WORK AND SPECIFICALLY DISCLAIM ALL WARRANTIES, INCLUDING WITHOUT LIMITATION WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE. NO WARRANTY MAY BE CREATED OR EXTENDED BY SALES OR PROMOTIONAL MATERIALS. THE ADVICE AND STRATEGIES CONTAINED HEREIN MAY NOT BE SUITABLE FOR EVERY SITUATION. THIS WORK IS SOLD WITH THE UNDERSTANDING THAT THE PUBLISHER IS NOT ENGAGED IN RENDERING LEGAL, ACCOUNTING, OR OTHER PROFESSIONAL SERVICES. IF PROFESSIONAL ASSISTANCE IS REQUIRED, THE SERVICES OF A COMPETENT PROFESSIONAL PERSON SHOULD BE SOUGHT. NEITHER THE PUBLISHER NOR THE AUTHOR SHALL BE LIABLE FOR DAMAGES ARISING HEREFROM. THE FACT THAT AN ORGANIZATION OR WEBSITE IS REFERRED TO IN THIS WORK AS A CITATION AND/OR A POTENTIAL SOURCE OF FURTHER INFORMATION DOES NOT MEAN THAT THE AUTHOR OR THE PUBLISHER ENDORSES THE INFORMATION THE ORGANIZATION OR WEBSITE MAY PROVIDE OR RECOMMENDATIONS IT MAY MAKE. FURTHER, READERS SHOULD BE AWARE THAT INTERNET WEBSITES LISTED IN THIS WORK MAY HAVE CHANGED OR DISAPPEARED BETWEEN WHEN THIS WORK WAS WRITTEN AND WHEN IT IS READ. For general information on our other products and services, please contact our Customer Care Department within the U.S. at 877-762-2974, outside the U.S. at 317-572-3993, or fax 317-572-4002. For technical support, please visit www.wiley.com/techsupport. Wiley also publishes its books in a variety of electronic formats. Some content that appears in print may not be available in electronic books. Library of Congress Control Number: 2010926852 ISBN: 978-0-470-56093-8 Manufactured in the United States of America 10 9 8 7 6 5 4 3 2.

[Audio] About the Author David A. Crowder has authored or coauthored nearly 30 books on subjects ranging from computers to historical mysteries, including popular bestsellers such as Sherlock Holmes For Dummies, Building a Web Site For Dummies and CliffsNotes Getting on the Internet. He was selling hypertext systems back in the days when you had to explain to people what the word meant. He's been involved in the online community since its inception and is the recipient of several awards for his work, including NetGuide Magazine's Gold Site Award. He is the son of a teacher and a college president, and his dedication to spreading knowledge, especially about the computer revolution, goes beyond his writing. He also founded three Internet mailing lists (discussion groups), JavaScript Talk, Java Talk, and Delphi Talk, all of which were sold to ZiffDavis. One of his most treasured memories is the message he received from an old-timer on one of those lists who said that he had never seen such a free and open exchange of information since the days when computers were built by hobbyists in home workshops. When he isn't writing, he spends his time with his wife Angela, wandering through villages in the Andes or frolicking in the Caribbean surf. 01_560938-ffirs.indd v 01_560938-ffirs.indd v 5/14/10 8:44 PM 5/14/10 8:44 PM www.it-ebooks.info.

[Audio] 01_560938-ffirs.indd vi 01_560938-ffirs.indd vi 5/14/10 8:44 PM 5/14/10 8:44 PM www.it-ebooks.info.

[Audio] Dedication For Angela. Eres mi sol, nena, eres mi luna. Author's Acknowledgments Thanks are due to Steven Hayes, Christopher Morris, Barry Childs-Helton, and James Russell, my fi ne editors, who were there for me every step of the way. Sometimes the relationship between writers and editors is smooth as silk, and sometimes it's tempestuous, but it always results in a better book through the give-and-take of the writing/editing process — and I'm grateful for the critiques and contributions of all the members of the Wiley team. All helped to make this the best book we could put together for you. And they're just the tip of the iceberg: About a zillion people work their tails off anonymously and behind the scenes at Wiley to bring you the fi nest books they can possibly produce. My hat is off to all of them, from the top editors to the humblest laborer on the loading dock. Last, but by no means least, I'd like to say how much I appreciate all the hard work done by my literary agent, Robert G. Diforio, without whose help I would be lost in the intricacies of the publishing world. 01_560938-ffirs.indd vii 01_560938-ffirs.indd vii 5/14/10 8:44 PM 5/14/10 8:44 PM www.it-ebooks.info.

[Audio] Publisher's Acknowledgments We're proud of this book; please send us your comments through our online registration form located at http://dummies.custhelp.com. For other comments, please contact our Customer Care Department within the U.S. at 877-762-2974, outside the U.S. at 317-572-3993, or fax 317572-4002. Some of the people who helped bring this book to market include the following: Acquisitions, Editorial, and Media Development Senior Project Editor: Christopher Morris (Previous Edition: Jean Rogers) Executive Editor: Steven Hayes Senior Copy Editor: Barry Childs-Helton Technical Editor: James Russell Editorial Manager: Kevin Kirschner Media Development Project Manager: Laura Moss-Hollister Media Development Assistant Project Manager: Jenny Swisher Media Development Associate Producers: Angela Denny, Josh Frank, Marilyn Hummel, Shawn Patrick Editorial Assistant: Amanda Graham Sr. Editorial Assistant: Cherie Case Cartoons: Rich Tennant (www.the5thwave.com) Composition Services Project Coordinator: Katherine Crocker Layout and Graphics: Claudia Bell, Ashley Chamberlain, Christin Swinford Proofreaders: Laura Bowman, Lindsay Littrell Indexer: Steve Rath Special Help: Anne Sullivan Publishing and Editorial for Technology Dummies Richard Swadley, Vice President and Executive Group Publisher Andy Cummings, Vice President and Publisher Mary Bednarek, Executive Acquisitions Director Mary C. Corder, Editorial Director Publishing for Consumer Dummies Diane Graves Steele, Vice President and Publisher Composition Services Debbie Stailey, Director of Composition Services 01_560938-ffirs.indd viii 01_560938-ffirs.indd viii 5/14/10 8:44 PM 5/14/10 8:44 PM www.it-ebooks.info.

[Audio] Contents at a Glance Introduction ................................................................ 1 Part I: Building Your First Web Site .............................. 7 Chapter 1: Planning for Good Site Design .......................................................................9 Chapter 2: Creating a Web Page with Basic HTML Tags .............................................17 Chapter 3: Arranging Your Text with Tables and Other Advanced Tags .................31 Chapter 4: Working with WYSIWYG ..............................................................................47 Chapter 5: Letting the World In: Choosing a Host and Domain Name ......................59 Part II: Building Better Web Pages ............................. 71 Chapter 6: Using Cascading Style Sheets ......................................................................73 Chapter 7: Adding Images ...............................................................................................95 Chapter 8: Adding Forms ..............................................................................................117 Part III: Adding Frills and Fancy Stuff ...................... 145 Chapter 9: Exploring JavaScript and DHTML .............................................................147 Chapter 10: Adding Image-Based Buttons and Image Maps .....................................169 Chapter 11: Web Sights and Sounds ............................................................................183 Chapter 12: Adding a Blog ............................................................................................199 Part IV: Making Money ............................................ 211 Chapter 13: Attracting an Audience: Publicizing Your Site ......................................213 Chapter 14: Designing for Internet Commerce ...........................................................231 Chapter 15: Checking Out Online Payment Methods ................................................253 Part V: The Part of Tens ........................................... 273 Chapter 16: Ten Great Web Sites to Get Advice ........................................................275 Chapter 17: Ten Fabulous Tools for E-Commerce .....................................................285 Chapter 18: Ten More Great Add-Ins ...........................................................................297 Glossary .................................................................. 307 Index ...................................................................... 325 02_560938-ftoc.indd ix 02_560938-ftoc.indd ix 5/14/10 8:45 PM 5/14/10 8:45 PM www.it-ebooks.info.

[Audio] 02_560938-ftoc.indd x 02_560938-ftoc.indd x 5/14/10 8:45 PM 5/14/10 8:45 PM www.it-ebooks.info.

[Audio] Table of Contents Introduction ................................................................. 1 About This Book ..............................................................................................1 How to Use This Book .....................................................................................1 Foolish Assumptions .......................................................................................2 Conventions Used in This Book .....................................................................2 How This Book Is Organized ..........................................................................3 Part I: Building Your First Web Site .....................................................3 Part II: Building Better Web Pages .......................................................3 Part III: Adding Frills and Fancy Stuff ..................................................3 Part IV: Making Money ..........................................................................4 Part V: The Part of Tens ........................................................................4 Icons Used in This Book .................................................................................4 Where to Go from Here ...................................................................................5 Part I: Building Your First Web Site ............................... 7 Chapter 1: Planning for Good Site Design . . . . . . . . . . . . . . . . . . . . . . . . .9 Drafting a Plan ..................................................................................................9 What do you want to accomplish? ....................................................10 Who do you want to reach? ................................................................10 Keeping your site fresh .......................................................................11 User-generated content .......................................................................12 Designing the Look of Your Site ...................................................................12 Appealing to your audience................................................................12 Avoiding clutter ...................................................................................13 Achieving Usability ..............................................................................14 The Big Rules for Planning Your Site ..........................................................15 Online Sources for Web Design ...................................................................16 Chapter 2: Creating a Web Page with Basic HTML Tags . . . . . . . . . . .17 Tagging Along with HTML ............................................................................17 Getting Wordy ................................................................................................19 Paragraphs ............................................................................................19 Headings................................................................................................20 Fonts ......................................................................................................22 Lines ......................................................................................................23 Using Color .....................................................................................................25 Creating Links ................................................................................................26 02_560938-ftoc.indd xi 02_560938-ftoc.indd xi 5/14/10 8:45 PM 5/14/10 8:45 PM www.it-ebooks.info.

[Audio] Building a Web Site For Dummies, 4th Edition xii Picturing It: Using Images .............................................................................26 Images ...................................................................................................27 Background images .............................................................................28 Putting It All Together ...................................................................................29 Online Sources for Web Page Building .......................................................30 Chapter 3: Arranging Your Text with Tables and Other Advanced Tags . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .31 Creating Tables ..............................................................................................31 Defi ning rows and columns ................................................................32 Setting table dimensions .....................................................................32 Defi ning cell sizes .................................................................................33 Padding and spacing cells ..................................................................35 Spanning rows and columns...............................................................38 Playing with alignments ......................................................................40 Using Frames and Framesets .......................................................................42 Building pages with frames and framesets .......................................42 Adding borders and margins to frames ............................................44 Online Sources for Tables and Frames .......................................................46 Chapter 4: Working with WYSIWYG . . . . . . . . . . . . . . . . . . . . . . . . . . . .47 Creating the Basic Page in CoffeeCup .........................................................48 Setting the page properties ................................................................48 Working with text and links ................................................................50 Adding images ......................................................................................53 Switching views ....................................................................................54 Working with Website Projects ...................................................................55 Online Sources for WYSIWYG ......................................................................57 Chapter 5: Letting the World In: Choosing a Host and Domain Name . . .59 Going Live: Choosing a Host ........................................................................60 ISPs ........................................................................................................60 Virtual servers ......................................................................................60 Dedicated servers ................................................................................61 Finding your match ..............................................................................62 Keeping It Cheap: Free Web-Site Providers ................................................63 Getting Your Own Domain Name .................................................................64 Picking a name .....................................................................................66 Finding a registrar ................................................................................67 Online Sources for Web Hosting and Domain Registration .....................68 02_560938-ftoc.indd xii 02_560938-ftoc.indd xii 5/14/10 8:45 PM 5/14/10 8:45 PM www.it-ebooks.info.

[Audio] xiii Table of Contents Part II: Building Better Web Pages .............................. 71 Chapter 6: Using Cascading Style Sheets . . . . . . . . . . . . . . . . . . . . . . . .73 Merging CSS and HTML .................................................................................74 Selectors, Classes, and IDs ...........................................................................76 Using classes ........................................................................................77 Using IDs ...............................................................................................78 Redefi ning Elements ......................................................................................78 Contextual Selectors .....................................................................................80 Going Beyond the Basics ..............................................................................81 CSS colors .............................................................................................81 Borders ..................................................................................................82 CSS and WYSIWYG .........................................................................................83 Layers ..............................................................................................................89 Absolute positioning ...........................................................................90 Relative positioning .............................................................................91 Online Sources for CSS ..................................................................................92 Chapter 7: Adding Images. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .95 Getting Graphics — for Free! ........................................................................95 Heeding copyrights and credits .........................................................95 Creating your own images ..................................................................96 Differentiating among graphics fi le formats .....................................97 Putting Your Graphics on a Diet with GIFWorks .......................................98 Creating a Logo with CoolText.com ..........................................................101 Editing Images ..............................................................................................105 Resizing ...............................................................................................106 Cropping .............................................................................................107 Rotating and fl ipping .........................................................................107 Adjusting color ...................................................................................109 Using special effects fi lters ...............................................................111 Basic Design with Images ...........................................................................112 Placing images for maximum effectiveness ....................................112 Sizing images in HTML ......................................................................114 Online Sources for Quality Graphics .........................................................114 Chapter 8: Adding Forms . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .117 Getting Input ................................................................................................118 Typing in text boxes ..........................................................................120 Using text areas ..................................................................................122 02_560938-ftoc.indd xiii 02_560938-ftoc.indd xiii 5/14/10 8:45 PM 5/14/10 8:45 PM www.it-ebooks.info.

[Audio] Building a Web Site For Dummies, 4th Edition xiv Choosing radio buttons or check boxes .........................................123 Setting up SELECT and OPTION .......................................................126 Submitting the form ...........................................................................127 Processing the Form ...................................................................................129 Why your ISP often won't help .........................................................129 Finding a CGI provider ......................................................................130 Using remotely hosted CGI scripts ..................................................131 Adding CGI Scripts .......................................................................................132 Basic techniques ................................................................................132 Solving problems ...............................................................................133 Trying Out Form and Poll Makers .............................................................134 Response-O-Matic ..............................................................................135 FormSite.com......................................................................................140 Online Sources for CGI and Forms ............................................................144 Part III: Adding Frills and Fancy Stuff ....................... 145 Chapter 9: Exploring JavaScript and DHTML . . . . . . . . . . . . . . . . . . . .147 Principles of Programming .........................................................................147 Constants and variables....................................................................148 Doing the math ...................................................................................150 Branches .............................................................................................151 Loops ...................................................................................................151 Creating JavaScript Functions ...................................................................152 Incorporating JavaScripts ..........................................................................153 Basic techniques ................................................................................153 Dealing with problems ......................................................................155 The Document Object Model (DOM) ........................................................156 Making Choices with JavaScript Events ...................................................156 Mouseovers and clicks ......................................................................158 Keyboard input ..................................................................................158 Adding Interactive Menus ..........................................................................159 Making drop-down lists .....................................................................159 Making a menu with CoffeeCup ........................................................160 Online Sources for JavaScript and DHTML ..............................................166 Chapter 10: Adding Image-Based Buttons and Image Maps . . . . . . .169 Creating Buttons ..........................................................................................170 Creating Image Maps ...................................................................................177 Online Sources for Buttons and Image Maps ...........................................182 Chapter 11: Web Sights and Sounds. . . . . . . . . . . . . . . . . . . . . . . . . . . .183 Getting Music and Video .............................................................................184 Finding music houses ........................................................................184 Finding public-domain music and video .........................................186 Picking a File Format ...................................................................................187 02_560938-ftoc.indd xiv 02_560938-ftoc.indd xiv 5/14/10 8:45 PM 5/14/10 8:45 PM www.it-ebooks.info.

[Audio] xv Table of Contents Compressing Files .......................................................................................189 Adding Audio and Video Files to Your Site ..............................................193 Adding a Flash music player ............................................................194 Importing YouTube video .................................................................196 Online Sources for Web Audio and Video ................................................197 Chapter 12: Adding a Blog . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .199 Adding Blogger to Your Site .......................................................................199 Bloggin' with WordPress ............................................................................205 Adding a post in WordPress .............................................................207 Altering the General Settings ............................................................208 Online Sources for Blogs ............................................................................209 Part IV: Making Money ............................................. 211 Chapter 13: Attracting an Audience: Publicizing Your Site . . . . . . . .213 Working Keywords into Your Pages .........................................................215 Adding meta tags ...............................................................................216 Incorporating keywords in the content ..........................................217 Avoiding keyword trickery ...............................................................218 Analyzing keywords that other sites are using ..............................219 Keyword advertising .........................................................................221 Submitting to the Search Sites ...................................................................222 Doing it yourself .................................................................................223 Using submission services ...............................................................224 Keeping out of the search sites ........................................................225 Checking Your Search Site Position ..........................................................227 Investigating Reciprocal Linking ...............................................................227 Finding sites to link to .......................................................................228 Joining Web rings ...............................................................................229 Joining a banner exchange ...............................................................230 Online Sources for Getting the Word Out about Your Site ....................230 Chapter 14: Designing for Internet Commerce . . . . . . . . . . . . . . . . . . .231 Learning the Real Secret to Internet Success ..........................................232 Developing the right attitude ...........................................................232 Focusing on your business ...............................................................233 Getting supplies fl owing ....................................................................234 Designing for E-Commerce .........................................................................237 Adding a Search Function ...........................................................................238 Using Google Site Search ..................................................................238 Getting a free search engine with FreeFind ....................................244 Dropping in Perl CGI scripts such as Simple Search .....................248 Adding a FAQ ................................................................................................252 Online Sources for Internet Commerce ....................................................252 02_560938-ftoc.indd xv 02_560938-ftoc.indd xv 5/14/10 8:45 PM 5/14/10 8:45 PM www.it-ebooks.info.

[Audio] Building a Web Site For Dummies, 4th Edition xvi Chapter 15: Checking Out Online Payment Methods. . . . . . . . . . . . . .253 Checking Out Online Payment Methods ...................................................253 PayPal ..................................................................................................254 Google Checkout ................................................................................255 Cash alternatives ...............................................................................256 Phones, faxes, and snail mail............................................................257 Getting a Merchant Account ......................................................................258 Choosing which acquirers to sign up with .....................................258 Deciding which cards to take ...........................................................259 Signing up............................................................................................260 Watching out for fees ........................................................................261 Protecting against credit card fraud ...............................................263 Building on a Business Platform ................................................................264 Converting Currencies ................................................................................266 Adding the converter to your Web page ........................................266 Customizing the converter ...............................................................267 Online Sources for Merchant Services ......................................................271 Part V: The Part of Tens ............................................ 273 Chapter 16: Ten Great Web Sites to Get Advice. . . . . . . . . . . . . . . . . .275 Bizy Moms ....................................................................................................275 Cozahost Newsletter ...................................................................................276 Geek/Talk Forums for Webmasters ...........................................................277 grammarNOW! ..............................................................................................278 LivePerson ....................................................................................................279 LawGuru.com ...............................................................................................280 webmaster-talk.com ....................................................................................281 The Small Business Advisor .......................................................................282 Web Developer's Journal ............................................................................283 Website Tips .................................................................................................283 Chapter 17: Ten Fabulous Tools for E-Commerce. . . . . . . . . . . . . . . . .285 CafePress.com ..............................................................................................285 DMA Privacy Policy Generator ..................................................................286 ECommerce Guide .......................................................................................288 HumanClick ..................................................................................................288 MapQuest .....................................................................................................288 osCommerce ................................................................................................290 S&H greenpoints ..........................................................................................292 SYSTRAN Translation Software .................................................................292 TRUSTe .........................................................................................................294 WorldPay ......................................................................................................294 02_560938-ftoc.indd xvi 02_560938-ftoc.indd xvi 5/14/10 8:45 PM 5/14/10 8:45 PM www.it-ebooks.info.

[Audio] xvii Table of Contents Chapter 18: Ten More Great Add-Ins . . . . . . . . . . . . . . . . . . . . . . . . . . .297 @watch ..........................................................................................................297 Crossword Compiler ...................................................................................297 Everyone.net ................................................................................................299 GeoPhrase ....................................................................................................299 VFM Leonardo ..............................................................................................301 localendar .....................................................................................................301 Merriam-Webster Online ............................................................................301 SuperStats .....................................................................................................303 Google Friend Connect ...............................................................................304 theFinancials.com ........................................................................................305 Glossary .................................................................. 307 Index ...................................................................... 325 02_560938-ftoc.indd xvii 02_560938-ftoc.indd xvii 5/14/10 8:45 PM 5/14/10 8:45 PM www.it-ebooks.info.

[Audio] Building a Web Site For Dummies, 4th Edition xviii 02_560938-ftoc.indd xviii 02_560938-ftoc.indd xviii 5/14/10 8:45 PM 5/14/10 8:45 PM www.it-ebooks.info.

[Audio] Introduction M aybe you already have your own Web site and you're not quite satisfied with it. Or perhaps you're still in the planning stages and want to know what you can do to make your site as good as it can be. You've been to Web sites that have all the bells and whistles, and you wouldn't be human if you weren't just a wee bit envious. Well, now you can have it all too. In Building a Web Site For Dummies, 4th Edition, I show you some of the best stuff around, and I tell you just how to go about putting it on your site. About This Book This isn't just another Web design book. It's special. Really. I set out to write the one book I'd want by my side if I were looking to set up a really fancy Web site and not break the bank doing it. I tracked down and tested zillions of Web-site enhancements and selected the top of the line to share with you. And I'm honestly proud of the results. I've authored or coauthored more than 20 books on computers and the Internet, and this one is my hands-down favorite. It's full of things you're sure to love. It's packed with fun stuff, but it's got plenty of serious stuff, too, like how to get past the hype and really make money through your Web site. You'll wonder how in the world you ever got along without having these features on your Web site. How to Use This Book Keep this book next to your computer and never lend it to anybody. It's far too precious for that. Make your friends buy their own copies. If you need to make space on your bookshelf, throw away anything else you own to make room for it. When you travel, take it with you. Hold it in your arms at night and tell it how much you love it. Each chapter is a stand-alone entity. (Don't you just love that word?) You don't have to read the whole thing, and it's a rare person who will read the book from cover to cover right off the bat. Go ahead — hit the table of contents or the index 03_560938-intro.indd 1 03_560938-intro.indd 1 5/14/10 8:45 PM 5/14/10 8:45 PM www.it-ebooks.info.

[Audio] 2 Building a Web Site For Dummies, 4th Edition and jump to the parts you're most interested in. But don't forget to explore the rest of the book after you're done with the parts that excite you most. You won't regret spending the time — you'll find wonders in every chapter. Foolish Assumptions I assume that you have a favorite Web-page creation program — whether it's Dreamweaver, plain old Notepad, or the UNIX-based text editor vi — and you know how to use it. So when I say to copy and paste text or save your file, you know what you need to do. Just in case you don't have a good Web-authoring program, I include sources for some good HTML editors in this book. Conventions Used in This Book It's all organized; I promise. Even though it's rather plebeian compared with finding free content for your site, lots of people worked very hard to make sure that this book follows some straightforward rules and typographical conventions. Code listings, of which there are plenty, look like this: ... ... ... HTML elements in this book are in uppercase, and their attributes are in lowercase, as in this example: If the value of an attribute is in normal type, you enter it exactly as shown. If it's in italics, it's only a placeholder value, and you need to replace it with a real value. In the following example, you replace myownimage with the name of the image file you intend to use: 03_560938-intro.indd 2 03_560938-intro.indd 2 5/14/10 8:45 PM 5/14/10 8:45 PM www.it-ebooks.info.

[Audio] 3 Introduction Whenever you see the URL for one of the top sites I've tracked down, it appears in a special typeface within the paragraph, like this: www.dummies. com. Or it may appear on a separate line, like this: www.dummies.com How This Book Is Organized This book is divided into six parts. I organized it that way, with a little help from the folks you see in the Acknowledgments. You did read the Acknowledgments, didn't you? Don't tell me that you're the kind of person who reads the Introduction but doesn't read the Acknowledgments. Please tell me that you didn't miss the Dedication, too? Each part has chapters in it. And each chapter has headings and subheadings. All the sections under these headings and subheadings have text that enlightens the heart and soul. Here, take a look. Part I: Building Your First Web Site Part I spills the secrets of how to plan a successful site from the ground up. It tosses in a quick refresher course in basic HTML, then goes into more depth with some of the more advanced approaches such as tables and frames. Toss in a look at WYSIWYG site creation and some advice on getting your material on the Net, and you're ready to transform a bunch of Web pages into a coherent Web site. Part II: Building Better Web Pages Part II introduces you to Cascading Style Sheets, and different ways to add images and forms to your site. Part III: Adding Frills and Fancy Stuff Part III gives you a ton of ways to make your site work, look, and sound great. This part demystifies JavaScript and DHTML (Dynamic HTML), then it covers the different ways that you add new features like blogs to your Web site and shows you where to get great multimedia. 03_560938-intro.indd 3 03_560938-intro.indd 3 5/14/10 8:45 PM 5/14/10 8:45 PM www.it-ebooks.info.

[Audio] 4 Building a Web Site For Dummies, 4th Edition Part IV: Making Money Part IV takes a look at making money from your site. It explodes the myths about Internet income and shows you how to really make a profit, how to get a credit card merchant account, and how to work both ends of the affiliates game. Part V: The Part of Tens Part V is The Part of Tens. Well, it just wouldn't be a For Dummies book without The Part of Tens at the end, right? This part comprises three chapters, so you've got 30 extra bits here that tell you all sorts of wonderful things, like where to go for Web-site design advice and ways to add value to your site. Finally, at the end of the book is a glossary of all the tech terms that might otherwise leave you baffled. Icons Used in This Book The icons in the margins of this book point out items of special interest. Keep an eye out for them — they're important. Psst! Listen, pal, I wouldn't tell just anybody about this, but here's a way to make things a bit easier or get a little bit more out of it. Time to tiptoe on eggshells. Make one false step, and things can get pretty messy. You don't really need to know this stuff, but I just like to show off sometimes. Humor me. Well, of course, it's all memorable material. But these bits are ones you'll especially want to keep in mind. 03_560938-intro.indd 4 03_560938-intro.indd 4 5/14/10 8:45 PM 5/14/10 8:45 PM www.it-ebooks.info.

[Audio] 5 Introduction Where to Go from Here Well, keep turning pages, of course. And use the material to make your own Web site the hottest thing there ever was. One of the hardest parts about getting this book together was categorizing the material in it. Many times, a Web site add-in could've been slotted into a different chapter than the one it ended up in because it had multiple features or attributes. So when you're visiting any of the sites that I mention in this book, be sure to take a good look around. A site that has a great chat room might also have a fine affiliates program. One that offers a good series of Java applets could have some solid tutorials on Web design. A site that has good information on dedicated servers may have the best e-commerce solution for you. I encourage you to browse up a storm. Additionally, you can go to this book's companion Web site, at www.dummies. com/go/buildingawebsite4efd, where you can find links to many of the sites discussed in the book. 03_560938-intro.indd 5 03_560938-intro.indd 5 5/14/10 8:45 PM 5/14/10 8:45 PM www.it-ebooks.info.

[Audio] 6 Building a Web Site For Dummies, 4th Edition 03_560938-intro.indd 6 03_560938-intro.indd 6 5/14/10 8:45 PM 5/14/10 8:45 PM www.it-ebooks.info.

[Audio] Part I Building Your First Web Site 04_560938-pp01.indd 7 04_560938-pp01.indd 7 5/14/10 8:46 PM 5/14/10 8:46 PM www.it-ebooks.info.

[Audio] In this part . . . I start off by covering all the things you need to know to put together a Web site. Chapter 1 shows you the differences between a random bunch of Web pages and a coherent Web site, while Chapter 2 is a quick refresher course in basic HTML. Chapter 3 goes into some more advanced areas like tables. Chapter 4 shows you how to use a WYSIWYG editor to visually design your pages. Finally, Chapter 5 gives you everything you need to know about different Web-hosting options. 04_560938-pp01.indd 8 04_560938-pp01.indd 8 5/14/10 8:46 PM 5/14/10 8:46 PM www.it-ebooks.info.

[Audio] Chapter 1 Planning for Good Site Design In This Chapter ▶ Determining your site's purpose ▶ Analyzing the audience ▶ Appealing to visitors ▶ Keeping your site lean P eople argue about what the number-one factor in quality Web site design is, and they probably always will. Some say great graphics are the key. Others say worthwhile information is everything. Still others think that ease of use is the most important factor. I'm not so sure that there's such a thing as a linear ranking for these kinds of things. After all, a goodlooking site that doesn't work well is useless. A site with a combination of good content and lousy graphics is nothing to crow about either. This book shows you how to do it all and how it all fits together to make a Web site that's actually worth visiting. If you want to get the basics of Web page structure down pat, check out Chapters 2 and 3 on HTML; for the lowdown on graphic design, make sure you spend some time with Chapter 7. In this chapter, I walk you through the fundamental things you should consider as you create your Web site. And at the end of the chapter, I give you four basic rules for creating Web sites that work. Take 'em with a grain of salt — remember, you're the ultimate judge. Drafting a Plan Are you publicizing a political candidate? Trumpeting your favorite cause? Looking for a job? Selling shoe polish? Notice the verbs in each example. They're the key factors in determining your site's purpose, as opposed to its topic. 05_560938-ch01.indd 9 05_560938-ch01.indd 9 5/14/10 8:46 PM 5/14/10 8:46 PM www.it-ebooks.info.

[Audio] 10 Part I: Building Your First Web Site What do you want to accomplish? Just having a topic isn't enough — you need a purpose, too. The topic is merely what the site is about; the purpose is what the site does. Say, for example, that you want to create a site about penguins. Okay, that's a nice starting point. You like penguins — they're cute, unusual, and pretty interesting; many people share your interest in them. But why do you want to create a Web site about them? Do you have something to say? Do you have information to give, an opinion to share, or a particular point of view that you want to put across? You don't need to have a PhD in aquatic ornithology to create such a site. Maybe you just like funny-looking birds that swim. But you still need a purpose, or the site just won't work out in the long run. Perhaps you spent ages plowing through the search engines, and you've gathered together the world's greatest collection of penguin links. But why did you go to all that trouble? What's your purpose? If the purpose for creating a penguin site is for your own personal enjoyment, you really don't need to do much with the site. In fact, you can just create a Web page on your own hard drive or even settle for leaving the links in your Web browser's bookmarks. If you do want your page on the World Wide Web, however, you need to take into account the needs of your potential visitors, as well as your own needs for creating such a site. Suppose you're putting your penguin page on the Web for the purpose of sharing everything you know about these birds with the world. How does that purpose change your approach to site design? You need to include more on the Web site than a bare list of links, for one thing. Everything you do with the site must help people understand its purpose. If you're setting up your own domain name, for example, you want to pick one that clearly describes your site's content — such as www.penguinfacts.com. (Grab it quick — it still wasn't taken at press time.) The purpose of your site trickles down through each step you take in creating it. You want the title of each page in the site to specify how it supports the site's purpose. The textual content of each page needs to lead naturally into some specific aspect of the topic that furthers your goal. Each graphical image must be just the right one to drive home or emphasize a critical point. Who do you want to reach? Who are the people you expect to visit your site? What geographical or cultural groups do you want the site to appeal to? Without at least a general idea of your potential audience, you can't have much of an idea about what type of site to create. 05_560938-ch01.indd 10 05_560938-ch01.indd 10 5/14/10 8:46 PM 5/14/10 8:46 PM www.it-ebooks.info.

[Audio] 11 Chapter 1: Planning for Good Site Design If data is available about the audience for similar sites, you want to track it down. But where do you find it? Surprisingly, most of it's available from the people you're competing with. (Even if you're not running a commercial site, similar sites are your competitors.) Anyone who's been involved in any type of corporate intelligence work would be shocked at the way people on the World Wide Web casually throw around valuable information, instead of keeping it under lock and key. Many sites offer links to their visitor data. Even a quick perusal of the server logs (which automatically record information about visitors) can provide you with priceless insights into the sort of people who visit sites similar to the one you're creating. If the sites you want information on don't list links to their log data, send an e-mail message to the Webmaster asking how to access it. Most Webmasters aren't the slightest bit security-conscious about their customer data, and you may be surprised at how many of them are more than willing to spill the beans about their visitors. Keeping your site fresh If your material never changes, the odds are pretty good that most people won't come back to it very often, if ever. Unless your sole topic is a rock-solid reference subject, you can't get away with anything less than constant updating. Sure, the Oxford English Dictionary can come out with a new edition only every few generations. (The first edition came out in 1928 and the second one in 1989, with only two supplements in between.) But such cases are very rare. Even if you deal with a modern high-tech equivalent, such as a site on the Java programming language or the current HTML standard, you need to stay on your toes. If your core material is something that doesn't change often, you need to add some peripheral material that you can replace more frequently. Consider adding a Tip of the Day, fresh links, a Did You Know? column, or something along those lines so you can avoid offering only stale content to your return visitors. How often you need to update your site depends partially on your topic and partially on your site policy. With sites that deal with volatile topics such as breaking international news, you need to update on an hourly basis at a minimum. On the other hand, sites that analyze the news can stand a more leisurely pace — daily, weekly, or even monthly — because their scope is considerably wider. Even if your topic doesn't absolutely demand a certain update schedule, you should still establish a regular policy for how often you add fresh material to your site. Whatever schedule you establish, make sure you stick with it. 05_560938-ch01.indd 11 05_560938-ch01.indd 11 5/14/10 8:46 PM 5/14/10 8:46 PM www.it-ebooks.info.

[Audio] 12 Part I: Building Your First Web Site Remember the comfort factor and bear in mind that your site's visitors will be less comfortable if they don't know what to expect from you. Consistency on your side helps build trust on theirs. A Web site must change at least once a month to keep visitors interested in coming back to it. User-generated content When the World Wide Web first got started, it was pretty much a one-way street — Webmasters like you always made the decisions about what would appear and how it could be used. As the Web has evolved, however, it has taken on some important new characteristics. Today, some of the Web's most popular sites aren't so much controlled by their Webmasters as they are by their users. Places like YouTube and MySpace are hotbeds for the users' self-expression — and, indeed, that is their reason for existence. The new trend that has led to the phrase "Web 2.0" is usergenerated content, supplemented by social networking. Of course, the majority of Web sites are still generated almost totally by either individuals or small teams working together, but the public's hunger for its own chance to shine is seemingly insatiable — and it's something you might want to keep in mind as you design your own Web site. Wikipedia and the other wikis are collaborative efforts, and the old personal home page has largely given way to blogs — Web logs, or personalized diaries that can be syndicated and sent to others automatically. (See Chapter 12 for more information on blogs.) Designing the Look of Your Site All great art depends on having every necessary component in place and nothing — not one thing — that you don't need there. Great literature doesn't add extraneous characters or pad its plot lines. Great paintings don't have extra brush strokes or colors thrown in for no particular reason. When you're practicing the art of Web design, strive for that kind of purity. Appealing to your audience The audience — which is made up of the visitors you hope to attract to your site — determines the content. To set some basic limits, think of these visitors as being at a beginning, an intermediate, or an advanced level, and gauge your content accordingly. If you're aiming advanced content at a beginning audience or vice versa, you're looking at failure from the word go. 05_560938-ch01.indd 12 05_560938-ch01.indd 12 5/14/10 8:46 PM 5/14/10 8:46 PM www.it-ebooks.info.

[Audio] 13 Chapter 1: Planning for Good Site Design Not only does your audience determine your content, but its preferences influence your visual-design requirements as well. If your audience consists of high-school students whose interests revolve mainly around the latest musical sensations, you need a far different look from what you'd shoot for if it consists of retired naval officers who want to know about international events. For the young music lovers, for example, you need to strike a tone that's lighthearted and exciting, both in your words and graphics. Brighter colors and a more relaxed and informal tone for the text are the call here. For the old salts, though, you need to take a heavier approach, with darker, duller colors and a middling-formal approach to language. Whatever the group you're aiming for, ask yourself the following questions: ✓ How do they communicate with one another? Roller-hockey players don't communicate quite the same way as cartographers do. What are the level and style of language usage in the group? Do its members have a particular jargon, slang, or regional dialect? If so, can you use it comfortably and correctly? ✓ What kind and color of clothes do they wear? This kind of information tells you volumes about their preferences. People who are willing to wear suits and ties in midsummer don't think the same way as those who prefer casual clothing. The colors they wear also indicate the color ranges they're likely to feel comfortable with on your site. ✓ What's their worldview? For many people, the world consists of their apartment or house; the road between it and their workplace; their cubicle, office, or factory floor; and a couple of restaurants somewhere along that pathway. For others, the world consists only of Wall Street and the Asian financial markets. For some, the world is a series of airports, cell phones, and e-mail messages. Anything that exists outside your audience's worldview is invisible to them and probably doesn't belong on your Web site. Find out all that you can — from what kind of cars your visitors drive to the hours they wake and sleep. Any kind of information you can nail down about your visitors and their lives helps you to understand them — and that understanding can't help but improve your site's appeal. Avoiding clutter If you're one of those people who keeps a perfectly clean desk where your speakers line up exactly perpendicular to the edge of your monitor, whose laundry basket is more than occasionally empty, and who always knows where to find everything you own, I probably can't tell you much about organization. If you're like the rest of us, however, read on. 05_560938-ch01.indd 13 05_560938-ch01.indd 13 5/14/10 8:46 PM 5/14/10 8:46 PM www.it-ebooks.info.

[Audio] 14 Part I: Building Your First Web Site Far too many Webmasters seem to think that the best kind of Web page is one that has everything in the world crammed into it. It's like a novel that introduces 27 characters in the first two pages — the overkill ruins it, and your mind is left swimming. Perhaps you absolutely must put together a Web page containing a dozen frames, several JavaScript pop-ups, numerous Java applets running in the background, and a bunch of animated GIFs that move around the screen by using Cascading Style Sheets (CSS) positioning. If so, please, please, don't put in an image map, too. The line between losing and winning is very fine if you're considering using Web gadgetry. Without it, most sites seem a bit on the dull side, and Web designers exhibit a really strong keep-up-with-the-Joneses streak that usually results in a frenzy of site changes whenever some new technique becomes popular. Too much of a good thing — or too many good things in one place — can, however, become a real problem. The key is to remember your site's purpose as you're designing any page. If anything you're considering adding to the page doesn't serve that purpose, don't add it. If you discover some fun or glitzy gizmo that you simply must put on a page — and I show you plenty in this book to tempt you — first determine if you can make it fit in with what you already have on that page. If you absolutely can't fit it in, but you still want to add it, maybe you can take something else out to make room for it. This doesn't mean you can't have more than one unusual feature on a page — just make sure that you follow a path of moderation. Achieving Usability Usability is an important word for Web designers. It means just what it says — making a site usable. Without usability, nothing else you do matters. What good is it to have wonderful content if nobody can find it? What good is it to have beautiful graphics on a page that is inaccessible except by dumb luck? Fortunately, designing a usable Web site isn't difficult, and following a few simple rules can set you on your way. As with any set of rules, you may want to break these from time to time, but you do so at your own peril: ✓ Keep your navigation system consistent on all the pages in your Web site. If you have a link to your home page at the top of half your pages and you put that link at the bottom of the rest, you'll confuse your visitors. ✓ Put links to your home page and your search function on both the top and bottom of every page. Too many Web designers put them on only the top or the bottom, forcing users to scroll to find them. Don't make your visitors do extra work. 05_560938-ch01.indd 14 05_560938-ch01.indd 14 5/14/10 8:46 PM 5/14/10 8:46 PM www.it-ebooks.info.

[Audio] 15 Chapter 1: Planning for Good Site Design ✓ Never use blue, underlined text for anything but a link. In fact, try to avoid underlining at all. Use bold or italics for emphasis instead; otherwise you'll fool a lot of people into clicking underlined text to no effect. ✓ Don't use too many links in a navigation bar. Half a dozen is about the most you should add. Remember that a navigation bar is not a site map, but a guide to the major sections within your site. ✓ Use words! Using graphical icons may make your pages prettier, but you should design your navigation bar (or whatever alternative you use) to instantly communicate what it means to someone who has never been to your site before. In this case, a picture is not worth a thousand words. ✓ If your site is composed of hierarchical pages (and most of them are), consider using breadcrumb navigation. The term comes from the idea of leaving a trail of breadcrumbs as you walk so you can easily retrace your steps. When applied to a Web site, the metaphor refers to a listing at the top of the page showing the current page's relationship to the hierarchy; most often, these breadcrumbs are links that you can click to go directly back to any place along the trail. The Big Rules for Planning Your Site Here are some short rules to condense the information in this chapter down to a few rules that I think are pretty good guidelines, going by my own experience as both designer and visitor. Make these rules a part of your very being. Do them in calligraphy and hang them on your wall. Use a wood-burning kit to engrave them on your desk. Tattoo them backward on your forehead so you see them in the mirror every morning. ✓ Rule #1: The Web is for reaching out to people. ✓ Rule #2: Keep your Web pages lean and clean. ✓ Rule #3: Know who your visitors are and what they want. Remember that design and content are more a matter of art than science, which means that your own gut feelings count more than anything else. If someone tells you that your design decisions are wrong, and that person is someone whose input you respect, you certainly want to give that opinion some consideration. But if you're firmly convinced that you're right, never let anyone else's concepts override your own. This brings me to The Big Rule: ✓ Rule #4: It's your Web site. It's your vision. Do it your way. 05_560938-ch01.indd 15 05_560938-ch01.indd 15 5/14/10 8:46 PM 5/14/10 8:46 PM www.it-ebooks.info.

[Audio] 16 Part I: Building Your First Web Site Online Sources for Web Design Table 1-1 lists some places on the World Wide Web where you can find more information on the topics covered in this chapter. Table 1-1 Online Resources for Web Design Web Site Name Web Address Beginners Web Design Tutorial www.how-to-build-websites.com useit.com www.useit.com Web Pages That Suck www.webpagesthatsuck.com Web Style Guide www.webstyleguide.com/index. html?/contents.html 05_560938-ch01.indd 16 05_560938-ch01.indd 16 5/14/10 8:46 PM 5/14/10 8:46 PM www.it-ebooks.info.

[Audio] Chapter 2 Creating a Web Page with Basic HTML Tags In This Chapter ▶ Taking a look at tags ▶ Using HTML tags to format text ▶ Getting the lowdown on links ▶ Adding graphics to your Web site T his chapter's here just in case you need a refresher on basic Web page building before plunging ahead into all the wonderful stuff that's covered in the rest of the book. Here I touch on how you use HTML to create Web pages — and populate those pages with text and images. I show you how to format text, set the colors on your Web page, and set up links between pages with both text and images. Even if you already know all about these things, you may want to browse through the chapter and check out some of the Web sites listed in the tables. Tagging Along with HTML Web pages are built primarily by writing instructions in HyperText Markup Language (HTML). HTML is a simple language that tells a computer how to create a document; its main aim is to tell a Web browser, such as Firefox or Microsoft Internet Explorer, how a Web page should look on-screen. Happily, there's nothing really complex about HTML: The files you create are just plain old text files and you don't need anything more complex than Notepad or any other simple text editor to create them. What I cover in this chapter is the bare minimum that you need to know to create Web pages and link them to make a Web site. If you're interested in going deeper into HTML, check out HTML, XHTML & CSS For Dummies by Ed Tittel and Jeff Noble (Wiley Publishing). 06_560938-ch02.indd 17 06_560938-ch02.indd 17 5/14/10 8:47 PM 5/14/10 8:47 PM www.it-ebooks.info.

[Audio] 18 Part I: Building Your First Web Site You can find the HTML 4.01 specification at www.w3.org/TR/html401. HTML is composed of elements. A paragraph or an image, for example, is an element. Elements, in turn, are composed of tags, attributes, and — sometimes — content. Here's a little more information about each of those: ✓ Tags: A tag is a simple descriptive term that tells a Web browser what element it's dealing with. • Start tag: The beginning of each element is shown by the name of that element within angle braces; this is called a start tag. The start tag for a paragraph, for example, is ; for an image, it's . • End tag: The end of an element is shown by the end tag, which is just like the start tag except that the end tag has a slash before the element's name. The end tag for a paragraph, therefore, is . Some elements, such as IMG, don't have end tags. ✓ Attributes: An attribute is a modification of the basic element. You specify the width and height of an image, for example, by adding attributes to the tag, as in the following example: ✓ Content: Content is anything that goes between the start tag and the end tag, as in the following example: This is the content of this paragraph. The tags and attributes you need most often are covered in more depth in the rest of this chapter, but the basics I just covered help you to understand the choices you face among different Web page-building programs. A typical Web page features a basic structure of three elements: HTML, HEAD, and BODY. The HTML element contains both the HEAD and BODY elements, as the following example demonstrates: You can make a Web page without using the HTML, HEAD, and BODY tags, but I don't recommend it. It's technically possible, and even legitimate under the HTML standard. But leaving them out can't help anything, and putting them in helps you to keep the other elements in their proper places. 06_560938-ch02.indd 18 06_560938-ch02.indd 18 5/14/10 8:47 PM 5/14/10 8:47 PM www.it-ebooks.info.

[Audio] 19 Chapter 2: Creating a Web Page with Basic HTML Tags All the code for everything that's visible on the Web page goes into the BODY element. The HEAD element contains information such as the page's title, which goes between the and tags like this: This is the page title. The title doesn't appear on the actual Web page — it's displayed in the title bar at the top of the visitor's Web browser. Getting Wordy Words are the foremost method of communication on the World Wide Web, and it's a rare Web page indeed that hasn't got a passel of 'em scattered all over it. In the examples provided in the following sections, I show the basic code necessary for creating the particular elements (all made of words) that I talk about (using a few more words). Paragraphs Paragraph elements are what you normally use to place text on a Web page. You put the text between the and tags, as in the following example: This is where the textual content goes. Technically, the end tag for a P element is optional in HTML. You don't need to include it, although most Web-page creation programs add it automatically. Web browsers add a bit of space between paragraphs automatically. If you want some extra space, you can add it by using the line break, or BR, element, as the following example shows: This is the first paragraph. This paragraph has a space above it. Figure 2-1 shows the results of using the BR element. You can usually get away with using an empty P element — one with no content between the start and end tags — to create a blank line between paragraphs instead of using a BR element. Unfortunately, this technique doesn't work for all Web browsers. Because empty P elements aren't allowed under the HTML standard, browsers that strictly follow the standard ignore them and don't insert a blank line. 06_560938-ch02.indd 19 06_560938-ch02.indd 19 5/14/10 8:47 PM 5/14/10 8:47 PM www.it-ebooks.info.

[Audio] 20 Part I: Building Your First Web Site Figure 2-1: Paragraphs with line breaks add more white space to your Web page. The standard solution to this problem is to put some invisible content into the P element. Because Web browsers ignore plain white space, you can't just press your spacebar. Just put in a nonbreaking space with a special code  . Here's how you do it: This is the first paragraph.   This paragraph has a space above it. If you use a nonbreaking space, make sure that you include the semicolon at the end. If you don't, you end up with the characters &nbsp on-screen rather than a blank space. Headings Headings are also elements that contain text. Different headings create different sizes of text and make that text bold. HTML uses half a dozen heading elements, ranging from the humongous H1 size all the way down to the teenyweeny H6. (You can probably guess that H2, H3, H4, and H5 are between H1 and H6 in size, so I won't bother to explain that.) 06_560938-ch02.indd 20 06_560938-ch02.indd 20 5/14/10 8:47 PM 5/14/10 8:47 PM www.it-ebooks.info.

[Audio] 21 Chapter 2: Creating a Web Page with Basic HTML Tags You use headings to differentiate one section of text from another. Smaller headings designate subsections under larger headings. Say, for example, that you're running a news Web site. You use H1 for the main headline and follow it with the text in P elements. Any subheads in the article use H2 headings, any subheads under those headings use H3, and so on, as the following example demonstrates: Clown Runs Amok In a surprising development today, Clown of the Year Toby O'Dell-Gonzalez went on a rampage through the Hideyoshi Circus, spraying at least 17 elephants with whipped cream. Echoes Earlier Incident Highly placed sources within the circus confirm that this is not the first time the famed performer has committed such an act. "Toby just kind of has a thing about dairy products," said one of the co-owners of the circus. Figure 2-2 shows how the preceding code listing looks on your Web page. Figure 2-2: Headings help organize the text on your Web page. 06_560938-ch02.indd 21 06_560938-ch02.indd 21 5/14/10 8:47 PM 5/14/10 8:47 PM www.it-ebooks.info.

[Audio] 22 Part I: Building Your First Web Site Fonts Font is a fancy term that describes the way a letter is shaped. This word is in a font that's different from the font this word is in. You can just go with the default fonts — those fonts that are set automatically in the Web browser — or you can specify which fonts you want. For casual Web-page development, the default fonts work just fine, but you may prefer to make your own choices to get just the right look. Two elements that you use most often for altering fonts are B and I. These elements set the enclosed lettering to bold or italic print, respectively, as in the following example: This is normal print. This is bold print. This is italicized print. You can also use the FONT element to set the face of the text, which is the basic appearance of the lettering (whether it's Arial, Times New Roman, and so on), as well as the size and color. (See the section "Using Color," later in this chapter, for more information on setting color.) The following example shows how to use the FONT element to set face, size, and color: This is blue-colored Helvetica in size 5. This is red-colored Times Roman in size 3. This is black-colored Courier in size 7. Figure 2-3 shows the results of the two preceding code examples. Although I used the FONT element on whole sentences in the code example, you can also apply it to smaller stretches of text — even to a single character. The reason for the face attribute's several choices is that many different computer systems are hooked up to the Internet, and Windows doesn't offer the same options that Macs or Unix systemsdo. If the font you specify isn't available, the visitor's Web browser makes its best guess about what font to substitute. By offering a series of font options for the browser to use, you improve the chances of a visitor seeing just what you intended. The preceding code example includes all you need to cover the three main types of font faces common on the World Wide Web. 06_560938-ch02.indd 22 06_560938-ch02.indd 22 5/14/10 8:47 PM 5/14/10 8:47 PM www.it-ebooks.info.

[Audio] 23 Chapter 2: Creating a Web Page with Basic HTML Tags Figure 2-3: You use the FONT element to make your text appear in different fonts. Lines Okay, a horizontal line isn't really a word, but this part of the book is the least unlikely place I can think of to discuss this element. In HTML, these lines are technically known as horizontal rules, so the element that represents them is called HR. Horizontal rules separate one section of a page from another visually, underline an image, and do just about anything you normally do with lines. You can set the width of horizontal rules as either a percentage of the width of the screen or as an exact pixel value. The default width value of a horizontal line is 100 percent of the screen width, so if you don't specify the value of the width attribute, that's what you get. To specify a width of 50 percent, for example, use the following code: To specify a width of 400 pixels, you do it like this instead: 06_560938-ch02.indd 23 06_560938-ch02.indd 23 5/14/10 8:47 PM 5/14/10 8:47 PM www.it-ebooks.info.

[Audio] 24 Part I: Building Your First Web Site You use the size attribute to set the height, or thickness, of the line, as the following example shows: By default, the line is hollow, or shaded. (The hollow line is called shaded because back in the days when Web pages weren't so colorful and all you had to work with was black text on a medium-gray background, hollow horizontal lines appeared to sink into the page, creating a shaded, or 2-D, effect. Against most other background colors, the effect isn't apparent.) To make a line solid, you need to add the noshade attribute, as in the following example: The following code creates the Web page shown in Figure 2-4: Figure 2-4: Different width and size values change the appearance of horizontal rules. 06_560938-ch02.indd 24 06_560938-ch02.indd 24 5/14/10 8:47 PM 5/14/10 8:47 PM www.it-ebooks.info.

[Audio] 25 Chapter 2: Creating a Web Page with Basic HTML Tags Many Web designers use graphics (such as GIF files) to create horizontal lines instead of relying on HTML. See the clip-art sources in the section "Picturing It: Using Images," later in this chapter, for some examples. Using Color Unless you're really into television reruns or artsy photography, you probably don't see much of anything in black and white these days. The world's a colorful place, and you may disappoint your visitors if you don't use color on your Web site. I touch on color in the earlier section "Fonts," but you can use color in many places. As time goes by, you will doubtlessly be able to color every element in HTML. If you use Cascading Style Sheets (CSS), you have much more control over color than you do with normal HTML. There's an introduction to CSS in Chapter 6 of this book, and you can find out even more in the book Creating Web Sites Bible, by Philip Crowder and yours truly (Wiley Publishing). If you read the "Fonts" section earlier in this chapter, you already know that you can set the color of a particular set of letters, but you can also set the base color for all the text — as well as for a page's background and its links. The links use three different colors: one for links a visitor hasn't clicked, one for links that he or she is clicking, and one for links already visited. You can accomplish all these color changes by setting the values for various attributes of the BODY element: ✓ text — Text color ✓ bgcolor — Background color ✓ link — Unvisited link color ✓ vlink — Visited link color ✓ alink — Color for a link that someone's clicking (the active link) Setting all these attributes at once looks like this: 06_560938-ch02.indd 25 06_560938-ch02.indd 25 5/14/10 8:47 PM 5/14/10 8:47 PM www.it-ebooks.info.

[Audio] 26 Part I: Building Your First Web Site Creating Links When it comes to the World Wide Web, links (which connect different files) are everything. Without them, the Web wouldn't exist. You create links with the A (anchor) element. That element's href (hypertext reference) attribute gives the Web address of the file you want to link to. This address is called a URL, which is short for uniform resource locator. Here's what a link looks like in HTML: content The part that reads content is where you put words or images that people can click to go to the linked file. This content appears by default as blue underlined letters (if it's a text link) or as a blue outlined image (if it's an image link). Picturing It: Using Images You can have a Web page with nothing but words on it, but most people think that's a bit dull. It's pretty rare to find a site that's not filled with images of one kind or another. When it comes to placing images on the World Wide Web, you need to use graphics files in one of three common formats: GIF, JPEG (also called JPG), or PNG. (Chapter 7 covers these file formats in more depth.) Where do you get images? You can create them from scratch, or you can download ready-to-use files from some of the Web sites listed in Table 2-1. If you use other people's images — as most Web designers do — be sure first that you read all the fine print on their Web sites. Unless it states otherwise, the original artist owns the copyright on an image — which means you can't use it without permission. Fortunately, the vast majority of artists on the Web are eager to give that permission in exchange for nothing more than a link from your Web site back to theirs. This arrangement gives them free publicity and gives you free, high-quality artwork. Everybody's happy. If the artist isn't willing to let you display copyrighted art in exchange for a link, you may have to pay to use the image. Sometimes, too, the image is free to use on noncommercial sites but costs money to use on commercial ones. To reemphasize the point, make sure that you read the fine print. Don't — I repeat, don't — just grab an image that's not free, use it, and figure that you can get away with it. It's possible, of course, to download any image you can see in a Web browser — but you're cheating the artist and running the risk of serious repercussions — which can include federal charges. Plenty of freely available art is out there. Stick with it, and you're a lot less likely to run into problems. 06_560938-ch02.indd 26 06_560938-ch02.indd 26 5/14/10 8:47 PM 5/14/10 8:47 PM www.it-ebooks.info.

[Audio] 27 Chapter 2: Creating a Web Page with Basic HTML Tags Table 2-1 Sources of Clip Art Web Site Name Web Address Animation Arthouse www.animation.arthouse.org Barry's Clipart Server www.clipart.com/en Clipart Connection www.clipartconnection.com CoolArchive Free Clip Art www.coolarchive.com Graphic Maps www.worldatlas.com/clipart.htm Images The most common item other than text on Web pages is the image, represented by the IMG element. The only absolutely required attribute for that element is the src attribute, which specifies the name and — if the file is located somewhere other than in the same directory as the HTML file that links to it — the location of the graphics file. Thus, you code the simplest image on a Web page (see Figure 2-5) like this: To specify a graphics file in another folder, you add the path to the folder, as in the following example: If the graphics file is on another Web server entirely, you add the full path to that URL, as follows: I mention in the section "Creating Links," earlier in this chapter, that you can use an image as a link just as you can use text for one. To do so, just put the IMG element right between the start and end tags for the A element, as the following example shows: IMG elements don't have an end tag. 06_560938-ch02.indd 27 06_560938-ch02.indd 27 5/14/10 8:47 PM 5/14/10 8:47 PM www.it-ebooks.info.

[Audio] 28 Part I: Building Your First Web Site Figure 2-5: This image of some bored people is in a JPEG file format. Background images A background image follows the same rules as a regular image, except that you create it by using the background attribute of the BODY element rather than an IMG element, as shown in the following example: Background images tile, which means they repeat themselves across the page until they reach the edge of the screen. Then they begin tiling again in the next available space below the first line of images, and so on, until they fill the entire page from side to side and top to bottom. Because of this characteristic, most people prefer to use small background images, such as the guitars shown in Figure 2-6. Choose background images with care. Make sure they don't interfere with the other elements on the Web page. You want the color muted, the lines indistinct, and the content supportive of the overall theme. 06_560938-ch02.indd 28 06_560938-ch02.indd 28 5/14/10 8:47 PM 5/14/10 8:47 PM www.it-ebooks.info.

[Audio] 29 Chapter 2: Creating a Web Page with Basic HTML Tags Figure 2-6: A page with a tiled background image. Putting It All Together Okay, so you've seen the kinds of elements you use on a Web page. Now it's time to actually build a page from them. Of course, you'll probably never use every possibility, as some combinations would create design conflicts (if you use both a background color and a background image, for example, you'll never see the background color because the background image would cover it), but this example shows you how the elements fit together on a typical Web page: This is the page title. Clown Runs Amok 06_560938-ch02.indd 29 06_560938-ch02.indd 29 5/14/10 8:47 PM 5/14/10 8:47 PM www.it-ebooks.info.

[Audio] 30 Part I: Building Your First Web Site In a surprising development today, Clown of the Year Toby O'Dell-Gonzalez went on a rampage through the Hideyoshi Circus, spraying at least 17 elephants with whipped cream. Echoes Earlier Incident Highly placed sources within the circus confirm that this is not the first time the famed performer has committed such an act. "Toby just kind of has a thing about dairy products," said one of the co-owners of the circus. Click here for more info Online Sources for Web Page Building Table 2-2 lists some places on the World Wide Web where you can find more information about the topics covered in this chapter. Table 2-2 Online Resources for Building Web Pages Web Site Name Web Address HTML 4.01 Specification www.w3.org/TR/html401/ HTML Goodies www.htmlgoodies.com HTML Writers Guild www.hwg.org Index DOT Html www.eskimo.com/~bloo/indexdot/ html/index.html Introduction to HTML www.wdvl.com/Authoring/HTML/ Intro/ 06_560938-ch02.indd 30 06_560938-ch02.indd 30 5/14/10 8:47 PM 5/14/10 8:47 PM www.it-ebooks.info.