Building a Web Site For Dummies

Citation preview

---

spine=.72”

Internet/Web Page Design

™

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

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

• 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

a g n i d l i u B e t i S b e W

Building a Web Site

Web building demystified! Here’s what you need to know to create a great site

g Easier! Making Everythin

Learn to: • Plan and design a great-looking Web site

Go to Dummies.com

®

• Work with HTML, CSS, and navigation plans

for videos, step-by-step examples, how-to articles, or to shop!

• Collect and create content that gets attention • Take your site online and attract visitors who come back

$24.99 US / $29.99 CN / £17.99 UK

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.

ISBN 978-0-470-56093-8

David A. Crowder Crowder

Author of Google Earth For Dummies

4th Edition

spine=.72”

Get More and Do More at Dummies.com®

2nd Edition

Start with FREE Cheat Sheets Cheat Sheets include • Checklists • Charts • Common Instructions • And Other Good Stuff!

To access the Cheat Sheet created specifically for this book, go to

s p p A e l Mobi

www.dummies.com/cheatsheet/buildingawebsite

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.

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.

Building a Web Site FOR

DUMmIES

‰

4TH

01_560938-ffirs.indd i

EDITION

5/14/10 8:44 PM

01_560938-ffirs.indd ii

5/14/10 8:44 PM

Building a Web Site FOR

DUMmIES

‰

4TH

EDITION

by David A. Crowder

01_560938-ffirs.indd iii

5/14/10 8:44 PM

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 affiliates 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 1

01_560938-ffirs.indd iv

5/14/10 8:44 PM

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

5/14/10 8:44 PM

01_560938-ffirs.indd vi

5/14/10 8:44 PM

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 fine 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 finest 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

5/14/10 8:44 PM

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

Composition Services

Senior Project Editor: Christopher Morris (Previous Edition: Jean Rogers)

Project Coordinator: Katherine Crocker Layout and Graphics: Claudia Bell, Ashley Chamberlain, Christin Swinford

Executive Editor: Steven Hayes

Proofreaders: Laura Bowman, Lindsay Littrell

Senior Copy Editor: Barry Childs-Helton

Indexer: Steve Rath

Technical Editor: James Russell

Special Help: Anne Sullivan

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)

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

5/14/10 8:44 PM

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

5/14/10 8:45 PM

02_560938-ftoc.indd x

5/14/10 8:45 PM

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

5/14/10 8:45 PM

xii

Building a Web Site For Dummies, 4th Edition 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 Defining rows and columns ................................................................ 32 Setting table dimensions ..................................................................... 32 Defining 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

5/14/10 8:45 PM

Table of Contents

xiii

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 Redefining 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 file 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 flipping ......................................................................... 107 Adjusting color ................................................................................... 109 Using special effects filters ............................................................... 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

5/14/10 8:45 PM

xiv

Building a Web Site For Dummies, 4th Edition 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

5/14/10 8:45 PM

Table of Contents

xv

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 flowing .................................................................... 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

5/14/10 8:45 PM

xvi

Building a Web Site For Dummies, 4th Edition 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

5/14/10 8:45 PM

Table of Contents

xvii

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

5/14/10 8:45 PM

xviii

Building a Web Site For Dummies, 4th Edition

02_560938-ftoc.indd xviii

5/14/10 8:45 PM

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

5/14/10 8:45 PM

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

5/14/10 8:45 PM

Introduction

3

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

5/14/10 8:45 PM

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

5/14/10 8:45 PM

Introduction

5

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

5/14/10 8:45 PM

6

Building a Web Site For Dummies, 4th Edition

03_560938-intro.indd 6

5/14/10 8:45 PM

Part I

Building Your First Web Site

04_560938-pp01.indd 7

5/14/10 8:46 PM

I

In this part . . .

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

5/14/10 8:46 PM

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

5/14/10 8:46 PM

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

5/14/10 8:46 PM

Chapter 1: Planning for Good Site Design

11

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

5/14/10 8:46 PM

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

5/14/10 8:46 PM

Chapter 1: Planning for Good Site Design

13

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

5/14/10 8:46 PM

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

5/14/10 8:46 PM

Chapter 1: Planning for Good Site Design

15

✓ 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

5/14/10 8:46 PM

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

05_560938-ch01.indd 16

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

5/14/10 8:46 PM

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

5/14/10 8:47 PM

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

5/14/10 8:47 PM

Chapter 2: Creating a Web Page with Basic HTML Tags

19

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

5/14/10 8:47 PM

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   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

5/14/10 8:47 PM

Chapter 2: Creating a Web Page with Basic HTML Tags

21

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

5/14/10 8:47 PM

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

5/14/10 8:47 PM

Chapter 2: Creating a Web Page with Basic HTML Tags

23

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

5/14/10 8:47 PM

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

5/14/10 8:47 PM

Chapter 2: Creating a Web Page with Basic HTML Tags

25

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

5/14/10 8:47 PM

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

5/14/10 8:47 PM

Chapter 2: Creating a Web Page with Basic HTML Tags

Table 2-1

27

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

5/14/10 8:47 PM

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

5/14/10 8:47 PM

Chapter 2: Creating a Web Page with Basic HTML Tags

29

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

5/14/10 8:47 PM

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

06_560938-ch02.indd 30

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/

5/14/10 8:47 PM

Chapter 3

Arranging Your Text with Tables and Other Advanced Tags In This Chapter ▶ Using rows and columns in your design ▶ Padding and spacing ▶ Spanning your table’s rows and columns ▶ Working with framesets and frames ▶ Setting borders and margins

A

Web page doesn’t have to be just a straightforward run of text and images from top to bottom. In this chapter, I show you some simple tricks you can use to add structure to your Web pages. What you see on the screen isn’t always what it looks like on the surface because savvy Web designers know that adding an internal skeleton adds strength to their efforts. The most common way to do that is to make your whole Web page into a table, a series of neatly aligned boxes into which you slot the components of your page. You can leave all the “bones” showing or, for a more elegant appearance, make them all invisible — that way, you get all the benefit of the underlying structure with none of the clutter usually associated with tables. Frames can also be used for similar effect. Each frame is an entirely separate Web page with its own source code, yet, when you use frames, all these Web pages are displayed simultaneously on the same screen as if they were all from a single source.

Creating Tables Over the course of your life you’ve seen tables used to structure information a zillion times. Usually they’re nothing more than a blocky listing of some sort of data. On the Web, though, tables can be a whole lot more.

07_560938-ch03.indd 31

5/14/10 8:47 PM

32

Part I: Building Your First Web Site

Defining rows and columns Web tables, like normal ones, appear to be composed of rows and columns. In Web design, however, you only deal with the rows (horizontal areas). As you might expect, you start things off with a TABLE element. This contains a series of TR (table row) elements which contain some TD (table data) elements, or cells. Here’s an example of the coding for a simple table:

Cell One	Cell Two	Cell Three
Cell Four	Cell Five	Cell Six
Cell Seven	Cell Eight	Cell Nine

Figure 3-1 shows how this looks in a Web browser. In this example, the width of the border, or the lines surrounding it, is set to a single pixel. If you set a value of “0” for the border, there won’t be any lines around the table. This can be an important factor in your design because it enables you to use the structure of a table for formatting purposes without allowing the lines to intrude. Generally speaking, tables look best with border values between 1 and 4.

Setting table dimensions You can set the size of a table by using the width and height attributes, specifying a measure either in pixels or as a percentage of the screen size. This example would set the size to 600 by 300 pixels:

07_560938-ch03.indd 32

5/14/10 8:47 PM

Chapter 3: Arranging Your Text with Tables and Other Advanced Tags

33

Figure 3-1: A simple table.

To specify that the table should take up all the available space on the screen, you’d use this code instead:

You also have the flexibility to mix the two approaches if your design requires you to do so. You could, for example, set a table so it would stretch across the entire screen from side to side, while restricting its height to 400 pixels, by using this code:

You don’t have to set both the width and the height. It’s perfectly okay to specify one but not the other.

Defining cell sizes Although the overall size of the table is an important consideration, of course, the greatest power for a Web designer comes from specifying the size of individual cells. There are, as you might imagine, some tradeoffs you have to consider because the cells are contained within the table — therefore their settings

07_560938-ch03.indd 33

5/14/10 8:47 PM

34

Part I: Building Your First Web Site can adversely affect the layout if handled incorrectly. The main thing to keep in mind is that setting height and width often affects more than one cell: ✓ If you set the height of one cell (TD), then every cell in that row (TR) will be set to that height. If you set heights for more than one cell in a row, the lower height values will be ignored and the greatest height will be applied to the entire row. With height, keep in mind that you’re dealing with rows, not with columns — so the cells above and below the one whose height you set will remain unaffected. ✓ If you’re setting width, all cells in the column will be set to the width you specify. Although there’s no such thing as a “column element,” this effect is intended to promote symmetry in the table. If you need varying cell widths in a single column, there’s a way around this; see the “Spanning rows and columns” section later in this chapter for details. Another potential “gotcha” when you’re tinkering with cell sizes is the use of percentages. There’s a big difference between setting cell size and setting table size: With a table, you’re dealing with a percentage of the browser’s screen size; with a cell, you’re specifying a percentage of the table’s size. Let’s say you have a table that has (as in the earlier example) a width of 600 pixels. When you specify a cell width that’s 10% of that, you’re setting that cell to be 60 pixels wide rather than 10% of the total screen width. If, on the other hand, you have a table set to be 80% of the screen width, then a cell set to 10% will be one tenth of that — 8% of the screen width. Okay, so much for theory; let’s get down to some actual coding. The following code sets the height of the first cell (TD element) to 100 pixels and the width of the fifth cell (the second one in the second row) to 200 pixels; the ninth one (the last one in the last row) has a width of 300 pixels:

Cell One	Cell Two	Cell Three
Cell Four	Cell Five	Cell Six
Cell Seven	Cell Eight	Cell Nine

Figure 3-2 shows this in action.

07_560938-ch03.indd 34

5/14/10 8:47 PM

Chapter 3: Arranging Your Text with Tables and Other Advanced Tags

35

Figure 3-2: Setting cell sizes.

Padding and spacing cells If you just go with default settings and don’t specify any space adjustments, then every cell will be right up against its neighboring cells and any content you put in your cells will be flush with the edges of the cell. Depending upon your particular design requirements, this can be either good or bad. You have control over these factors via the cellspacing and cellpadding attributes. Cell spacing refers to the amount of space between the cells themselves, whereas cell padding controls the space between the cell’s edges and the cell’s contents. Cell padding can be especially important when you’ve set the table’s border to “0” so that no lines show. The following example creates three tables with cell-spacing values of 5, 10, and 20, respectively:

07_560938-ch03.indd 35

5/14/10 8:47 PM

36

Part I: Building Your First Web Site

Cell One	Cell Two	Cell Three
Cell	Cell	Cell
Cell	Cell	Cell

Four Five Six

Seven Eight Nine

Cell One	Cell Two	Cell Three
Cell Four	Cell Five	Cell Six
Cell Seven	Cell Eight	Cell Nine

Cell One	Cell Two	Cell Three
Cell Four	Cell Five	Cell Six
Cell Seven	Cell Eight	Cell Nine

Figure 3-3 shows the results.

07_560938-ch03.indd 36

5/14/10 8:47 PM

Chapter 3: Arranging Your Text with Tables and Other Advanced Tags

37

Figure 3-3: Setting the spacing between cells.

Cell padding, as mentioned before, sets the distance between the content of a cell and the cell’s border. This can be a very important factor, especially when you’re dealing with text. Of course, other factors are involved as well; for details, see the “Playing with alignments” section later in this chapter. To set the amount of space — again, in pixels — between a cell’s content and its borders, you simply need to specify it via the cellpadding attribute. The following example creates three tables with cell padding settings of 5, 10, and 20, respectively:

Cell One	Cell Two	Cell Three
Cell Four	Cell Five	Cell Six
Cell Seven	Cell Eight	Cell Nine

07_560938-ch03.indd 37

5/14/10 8:47 PM

38

Part I: Building Your First Web Site

Cell One	Cell Two	Cell Three
Cell Four	Cell Five	Cell Six
Cell Seven	Cell Eight	Cell Nine

Cell One	Cell Two	Cell Three
Cell Four	Cell Five	Cell Six
Cell Seven	Cell Eight	Cell Nine

Figure 3-4 shows the results. The cellspacing and cellpadding attributes affect the entire table; they cannot be set for individual rows.

Spanning rows and columns Here’s where things get really interesting. Your Web tables don’t have to be just equal-size rectangles running up and down and right and left. With row and column spanning, you can alter the whole structure of a table to suit your needs.

07_560938-ch03.indd 38

5/14/10 8:47 PM

Chapter 3: Arranging Your Text with Tables and Other Advanced Tags

39

Figure 3-4: Varying cell padding.

The colspan and rowspan attributes are applied to individual cells (TD elements). In a data-presentation scenario, this technique is most commonly used for presenting category titles or headings, as shown in the following example:

07_560938-ch03.indd 39

5/14/10 8:47 PM

40

Part I: Building Your First Web Site

	Title One	Title Two
Subhead One	Subhead Two	Subhead Three	Subhead Four
Sidehead One Sidehead Two	Data One	Data Two	Data Three	Data Four
Data	Data	Data	Data

Five Six Seven Eight

Figure 3-5 shows how this looks. The

and
tags in the preceding example illustrate a very important point. Cells are kind of like miniature Web pages — they can contain anything you can add via standard HTML — which means you can toss in links, images, videos, or whatever suits your fancy.

Playing with alignments Aligning a table is a fairly simple matter; you simply set the TABLE element’s align attribute to left, center, or right. Using the align attribute with the TR and TD elements, however, affects the contents of those elements rather than the elements themselves.

Figure 3-5: Using column and row spanning.

07_560938-ch03.indd 40

5/14/10 8:47 PM

Chapter 3: Arranging Your Text with Tables and Other Advanced Tags

41

If you set a row (TR) to center alignment, then all the contents of all the cells in that row are centered. If you set it to right alignment, then all the contents align with the right margin of the cells, and so on. However, you can specify different alignment values for each cell, and these override and value for the row as a whole. The alignment of a row (TR) or cell (TD) depends upon two attributes: the align attribute for horizontal alignment (left, center, or right) and the valign attribute for vertical alignment (top, middle, or bottom). By default, if no alignment is set for a row, all of its contents are horizontally left-aligned and vertically center-aligned. The following example modifies the code from the previous example to specify different alignments:

	Title One	Title Two
Subhead One	Subhead Two	Subhead Three	Subhead Four
Sidehead One Sidehead Two	Data One	Data Two	Data Three	Data Four
Data Five	Data Six	Data Seven	Data Eight

Check out Figure 3-6 to see the resulting table.

07_560938-ch03.indd 41

5/14/10 8:47 PM

42

Part I: Building Your First Web Site

Figure 3-6: Setting alignments in a table.

Using Frames and Framesets The two basic kinds of Web page structures are regular and framed. Regular gets better mileage on highways, and framed looks nice on a wall. Wait, no, that’s something else. . . . Okay: A regular Web page is a stand-alone structure. Frames, on the other hand, enable you to place more than one Web page onscreen at a time. To the visitor, a framed site appears as one coherent whole, no different from a regular page. Frames give you more capabilities, such as simultaneously showing many Web pages in a typical browser — and a few extra headaches (such as making them work with search engines as well).

Building pages with frames and framesets As mentioned in Chapter 2, Web pages are built with elements. 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:

07_560938-ch03.indd 42

5/14/10 8:47 PM

Chapter 3: Arranging Your Text with Tables and Other Advanced Tags

43





Framed sites work a bit differently from the way regular sites work: You build them out of framesets, which set off different areas of the screen. Each area contained within a frameset is known as a frame, and each frame contains its own Web page. The following HTML code sets up the pair of frames that you see in Figure 3-7:





Figure 3-7: Framed Web pages enable you to bring content from multiple files onto one screen.

07_560938-ch03.indd 43

5/14/10 8:47 PM

44

Part I: Building Your First Web Site The “80,*” in the preceding code listing means you’re setting aside 80 pixels for the first frame, and the rest of the screen is available for the second frame. You can also specify a specific pixel amount for the second frame if you want. As with tables, you also have the option to specify a percentage of the screen for each frame rather than exact pixel sizes, as in the following example:

To create horizontal frames instead of vertical frames, you use the rows attribute instead of cols in the first frameset tag. Everything else works just the same way. The src attribute works sort of like that attribute does with images: It specifies the source of the file that will be displayed inside the frame. Here, though, you’re giving the location of an entire HTML file.

Adding borders and margins to frames As with tables, you can play with the borders and margins in your frames in order to achieve your design goals. By default, you have the kind of 3D borders between frames that appear in Figure 3-7. To change these, you use — you guessed it — the border attribute, as shown in this example that sets the width to 5 pixels:

Figures 3-8 and 3-9 show the effect of border settings of a single pixel and 10 pixels. Border colors (normally gray) can be specified using the bordercolor attribute. To modify the previous example so the borders are red, you’d do this:

You can set the amount of space between the edges of frames by specifying a value via the marginheight and marginwidth attributes of the FRAME element. Setting these values to “0” (zero) means that the contents of the frames are loaded with no space between them. If you wanted, on the other hand, to force an all-around margin of, say, 20 pixels, you’d do it like this:

07_560938-ch03.indd 44

5/14/10 8:47 PM

Chapter 3: Arranging Your Text with Tables and Other Advanced Tags

45

Figure 3-8: Narrow borders.

Figure 3-9: Wide borders.

07_560938-ch03.indd 45

5/14/10 8:47 PM

46

Part I: Building Your First Web Site

Online Sources for Tables and Frames Table 3-1 lists some places on the World Wide Web where you can find more information about the topics covered in this chapter.

Table 3-1

07_560938-ch03.indd 46

Online Resources for Tables and Frames

Web Site Name

Web Address

16 Frames

www.w3.org/TR/REC-html40/present/ frames.html

HTML Frame Tags

www.jqjacobs.net/web/frames/frame_tags. html

HTML Frames

www.w3schools.com/html/html_frames.asp

HTML Table Basics

www.pageresource.com/html/table1.htm

HTML Tables

www.w3schools.com/html/html_tables.asp

HTML Tables: A very short introduction . . .

www.cs.tut.fi/~jkorpela/html/tables. html

Tables

http://htmldog.com/guides/htmlbeginner/ tables/

Tables in HTML Documents

www.w3.org/TR/html4/struct/tables.html

The Layout of HTML Frames

www.tufat.com/html_tutorials/ HTMLFramesScreenLayout.php

5/14/10 8:47 PM

Chapter 4

Working with WYSIWYG In This Chapter ▶ Creating Web pages ▶ Adding text and images ▶ Working with links ▶ Switching views as needed ▶ Using projects to build Web pages

W

YSIWYG (What You See Is What You Get) programs are easy for novices to use in the early stages of Web site creation, but they can quickly prove less than satisfactory. The reason for both factors is the same: The program makes a bunch of choices for you. Although this feature may seem like a comfort at first, it can quickly become a limitation. If you go for a WYSIWYG program, make sure that it’s sophisticated enough that you can still use it as your skills advance. Most WYSIWYG programs have at least some degree of depth beneath their surface simplicity. The CoffeeCup HTML Editor (the topic of this chapter), for example, lets you set the attributes for every element, in case you don’t like the default choices. This gives you the best of both worlds, allowing you to create visually while working under the hood with the base code. That means you can enjoy both the quickness of WYSIWYG creation and the total control of text editing in the same page-creation session. CoffeeCup, shown in Figure 4-1, is the main choice of many professional Web designers, though it isn’t the only one. You can pick up a copy at www.coffee cup.com/html-editor (there’s a 28-day trial version and the full version goes for $49). Table 4-1 lists several WYSIWYG programs you can use to build Web pages, along with the Web addresses where you can find them (or information about them).

08_560938-ch04.indd 47

5/14/10 8:48 PM

48

Part I: Building Your First Web Site

Figure 4-1: CoffeeCup is a fullfeatured WYSIWYG environment for building Web pages.

Creating the Basic Page in CoffeeCup After you understand what’s going on under the hood of a Web page, as discussed in the previous chapters, it’s time to sit back and let CoffeeCup do a little magic for you. Don’t worry about doing anything fancy here; I cover site design in other chapters. For now, just play around with CoffeeCup and experience the joy of working with a truly excellent program (one of my personal favorites, seriously). In the next few sections, I walk you through using it to set page properties and work with text and links. Of course, you should feel free to experiment with different values, colors, and so on, as you familiarize yourself with the program.

Setting the page properties In Chapter 2, I explain how to set the page title and page background with the normal HTML approach. Here’s how to set page properties with CoffeeCup:

08_560938-ch04.indd 48

5/14/10 8:48 PM

Chapter 4: Working with WYSIWYG

49

1. First, you need a page to work with. Click the New Blank Page button in the opening screen (refer to Figure 4-1). The Quick Start dialog box appears. 2. Enter a title in the Page Title text box. This text will appear at the top of your visitors’ Web browser screens when they visit your page. 3. If you want to add a background image, click the Browse button (the little file folder with a green arrow) and then navigate to the image file and select it. 4. If you want to change the background color, click the arrow to the right of the Background color to open a drop-down palette, as shown in Figure 4-2. Choose a color from the palette by clicking it.

Figure 4-2: Set the colors for your page in the Quick Start dialog box.

The color change is shown in the display area (see Figure 4-3). If you have already set a background image, then the background color won’t matter because the image covers it. 5. Similarly, to change the colors of the text or links, click the arrow next to the appropriate color box and then choose a color from that palette.

08_560938-ch04.indd 49

5/14/10 8:48 PM

50

Part I: Building Your First Web Site

Figure 4-3: CoffeeCup shows the effects of different color settings as you choose them.

6. Generally speaking, you shouldn’t change the Advanced Settings such as Doctype unless your Web page has unusual requirements such as a need to use the Greek alphabet. However, you may want to enter your keywords in the Meta Keywords text box (see Chapter 13 for more on keywords). If you want to add keywords later on, choose Insert➪Meta Keywords from the menu. 7. Click the OK button to complete the process.

Working with text and links A purely graphical Web page is, of course, something of an anomaly. Generally speaking, most of any given page is made up of text. Any text that leads to another Web page is said to be linked to the new page. (See Chapter 2 for more info on text and links.)

Modifying text The Font button is the third one in the Code Editor’s menu bar. It has several options that you can choose from, each of which changes the formatting of your text (see Figure 4-4).

08_560938-ch04.indd 50

5/14/10 8:48 PM

Chapter 4: Working with WYSIWYG

51

Figure 4-4: The Font button presents various options.

When the Font button is clicked, these are the formatting options available: ✓ Font Wizard: To set the typeface (Arial, Courier, and so on), you need to click the Font Wizard option. In the resulting dialog box (see Figure 4-5), you can also specify the previously mentioned settings such as size. ✓ Font Sizes: Set the size of the font (1–7). ✓ Font Color: Select the text color. ✓ Font Effects: This option lets you choose options such as Bold and Italic. ✓ Header Sizes: Set the size of headers (H1–H6).

Adding links To add a link, follow these steps: 1. Select the text you want to make into a link. You can skip this step and enter the text in Step 3 if you haven’t typed it yet. 2. Click the Link button (the second one in the Code Editor’s menu bar) and select Link (or simply use the Ctrl+L key combination). In the resulting dialog box (shown in Figure 4-6), the selected text is displayed. 3. If no text was selected, you can enter it now in the Link Text box.

08_560938-ch04.indd 51

5/14/10 8:48 PM

52

Part I: Building Your First Web Site

Figure 4-5: The Font Wizard presents all options in one handy location.

Figure 4-6: The Insert Link dialog box offers several options.

4. Enter the URL of the page you want to link to. If you’ve linked to this file before, you can click the arrow to the right to select it from a drop-down list. You can also click the Browse button to navigate to the file. 5. If you don’t want the linked page to open in place of your page, then choose the appropriate target (such as New Browser Window). 6. Optionally, enter text for a popup tooltip in the Title text box. 7. Optionally, enter text for a status-bar message (Internet Explorer only). 8. Click the OK button to complete the process.

08_560938-ch04.indd 52

5/14/10 8:48 PM

Chapter 4: Working with WYSIWYG

53

Adding images Adding images in CoffeeCup is much easier than typing all the information in a text editor. Follow these steps to add images: 1. Click the Image button (the first one in the Code Editor’s menu bar) or use the Ctrl+M key combination. The Insert Image dialog box (shown in Figure 4-7) appears. 2. Navigate to the image. The URL of the image file appears in the Image box.

Figure 4-7: Choosing an image.

3. Enter some alternate text (for non-visual browsers) in the Alt text box. Alt text appears even if the image is unavailable. 4. Optionally, enter a title for the image in the Title text box. 5. You can specify the alignment of the image so that (for example) text will flow around it. 6. If desired, set the width (in pixels) of a border that will appear around the image.

08_560938-ch04.indd 53

5/14/10 8:48 PM

54

Part I: Building Your First Web Site 7. If you want to resize the image, type the new height and width in the appropriate text boxes. 8. If you want to make the image into a link, enter the URL or browse to locate the file. 9. Click the OK button to finalize the image insertion.

Switching views There are three ways to see the pages that you’re creating in CoffeeCup: in the Code Editor (the actual HTML, XHTML, or whatever language you’re using), in the Preview tab (the WYSIWYG view), or in a combination of the two. It’s an easy matter to switch among the views: In normal usage, simply click the Code Editor or Preview tabs. To see both the code and its effect without having to switch back and forth, press the F12 function key from within the Code Editor. To go back to the regular Code view, press it again. Figure 4-8 shows the Preview tab, and Figure 4-9 shows the Code and Preview option.

Figure 4-8: Preview tab.

08_560938-ch04.indd 54

5/14/10 8:48 PM

Chapter 4: Working with WYSIWYG

55

Figure 4-9: Mixed code and Preview.

Working with Website Projects Of course, unless your site is a minimal one, you don’t just tinker with a page here and a page there, but with the site as a whole. That’s where CoffeeCup’s Website Project feature shines. Here’s how to use it: 1. Click the New Website Project button in the Welcome dialog box (see Figure 4-10) when you first launch CoffeeCup. To get a new project going if you’re already working in CoffeeCup, select My Websites➪New Website Project from the menu.

Figure 4-10: The Welcome dialog box.

08_560938-ch04.indd 55

5/14/10 8:48 PM

56

Part I: Building Your First Web Site 2. In the Website Project Settings dialog box (shown in Figure 4-11), enter a name for the new project.

Figure 4-11: Entering project settings.

3. In the Website Project Location text box, click the Browse button to the right and navigate to the local folder you want to use as the root for your Web site. 4. If you have a Web server ready, check with your tech-support people to get the information you need to enter under the Server settings. You can go ahead and build your site without having a Web server. When you’re ready to go on the Web, just add this info. 5. Under File Upload, choose how you want CoffeeCup to handle dependent files (for example, included images) during uploads. If you don’t select the Check Dependencies before Uploading Files check box, then you can upload a page without regard to any dependent files. You also have the option to specify whether to always upload dependent files (the default setting), never upload dependent files, or to have CoffeeCup ask you what you want to do at upload time. 6. Click the OK button to finish. From now on, all pages you create in this project will go into the folder you selected, shown in the My Websites panel on the left side of the screen.

08_560938-ch04.indd 56

5/14/10 8:48 PM

Chapter 4: Working with WYSIWYG

57

Online Sources for WYSIWYG Table 4-1 lists some places on the World Wide Web where you can find more information about the topics covered in this chapter.

Table 4-1

08_560938-ch04.indd 57

WYSIWYG Programs

Program

Web Address

Microsoft Expression Web 3

http://www.microsoft.com/Expression/ products/overview.aspx?key=web

Adobe Dreamweaver

www.adobe.com/products/dreamweaver

HotDog PageWiz 1.04

http://download.cnet.com/HotDogPageWiz/3000-10247_4-10032809.html

Web Studio 5.0

www.webstudio.com

5/14/10 8:48 PM

58

Part I: Building Your First Web Site

08_560938-ch04.indd 58

5/14/10 8:48 PM

Chapter 5

Letting the World In: Choosing a Host and Domain Name In This Chapter ▶ Choosing a host ▶ Finding free Web site providers ▶ Picking and registering domain names

I

f you don’t already have a Web site or if you’re unhappy with your current Web space provider, you have several options. You can run your own Web server, of course. With any type of broadband connection and Linux, it’s even possible to put together a creditable setup in your own home. But that’s a lot of work — ask network administrators just how much leisure time they have. And many broadband providers have policies forbidding you from doing that sort of thing, anyway. If you want to focus on developing and maintaining your site, your best bet is to leave the day-to-day grunge work of keeping the server up and running to someone else.

Practically every Web-hosting provider offers all sorts of extended services in addition to plain Web space. These often include some form of e-commerce hosting, ranging from simply supplying the software to setting up a complete turnkey solution (“here’s your system — turn the key and you’re good to go”) for you.

09_560938-ch05.indd 59

5/14/10 8:49 PM

60

Part I: Building Your First Web Site

Going Live: Choosing a Host You have three basic options when it comes to Web hosting: ✓ ISPs ✓ Virtual servers ✓ Dedicated servers

ISPs The same people who provide you with Internet access can also be your Web space provider. Almost certainly, you have at least some room for Web pages as part of your basic service. If you’re not interested in a very extensive site or in one that has tons of glitzy features, the basic setup the ISP gives you will probably suffice. Even if you don’t have any kind of CGI access (see Chapter 8 for more on the Common Gateway Interface), you can probably still use remotely hosted services, like the ones described in this book, to enhance your site. Many domain name registrars (described in “Finding a registrar,” later in this chapter) also provide various amounts of Web site space as a part of their services.

Virtual servers Virtual servers are nothing more than directories on a hard drive. If that hard drive is on an existing Web server that supports virtual server capabilities, however, the Webmaster can make each one of those directories seem as though it’s a fully functional Web server. Other than being a really clever example of how you can use computer technology, does this have a practical application for you? It depends on your budget and your site’s traffic expectations. It’s certainly one of the cheapest ways to get your site up and running. You could pay for a couple of months’ worth of a typical virtual server by skipping one good dinner at a decent restaurant. Some virtual servers are so cheap that you could pay for them just by skipping dessert.

09_560938-ch05.indd 60

5/14/10 8:49 PM

Chapter 5: Letting the World In: Choosing a Host and Domain Name

61

On the other hand, you’re sharing one physical server with lots of other virtual servers. Any physical server’s performance degrades as it gets busier, with more and more people connecting to it and placing demands on it. But if you’re on a virtual server, that scenario has a slightly different meaning. People visiting a Web site on one of the other virtual servers hosted on the same physical server as yours are putting a drain on your resources, too, because those resources are shared. Basically, if someone else’s site gets too busy, yours can slow down till it looks like a turtle in molasses. And vice versa.

Dedicated servers Nearly every company that handles virtual servers also leases dedicated ones. A dedicated server is a step up from a virtual server: Although it costs a bit more, it’s your very own physical computer holding your Web site, with nobody else on it. Both virtual and dedicated servers offer more than just Web hosting. For example, they also handle e-mail. The focus here is only on the Web-hosting aspect because this book is about Web sites. Dedicated servers used to cost a small fortune, but a combination of generally lower computer prices and competitive pressures has dropped the expense of leasing one. At a rock-bottom price of around $50–$100 per month, dedicated servers are still maybe a bit pricey for a private individual, but for any serious commercial operation, they’re a great bargain. After all, that’s only $600–$1,200 a year, although hiring a single network administrator to work at your company can easily set you back 100 times that or even more. Why compare those two costs? Aren’t they apples and oranges? No, not at all. When you lease a dedicated server, the people you’re leasing it from take care of keeping it up and running, which is what a network administrator does. Like virtual servers, dedicated servers are located at the facility of a Web space provider, such as Verio (www.verio.com — see Figure 5-1), and you don’t have to worry about regularly backing up your data, restoring after a crash, upgrading things like Linux kernels, or any of the million things that keep technical staffs hopping.

09_560938-ch05.indd 61

5/14/10 8:49 PM

62

Part I: Building Your First Web Site

Figure 5-1: Verio offers a variety of specialized services.

Finding your match You can always run through the standard search engines and site guides looking for information on Web hosts. Some search engines, such as HostIndex (www.hostindex.com), however, are specifically designed to help you track down the right host for you (see Figure 5-2). The Web sites in Table 5-1 will help you do some comparison shopping.

Table 5-1

09_560938-ch05.indd 62

Web-Hosting Indexes

Web-Site Name

Web Address

budgetweb.com

http://blog.budgetweb.com/

CNET Reviews

http://reviews.cnet.com/web-hosting/

Findahost.com

www.findahost.com

HostReview.com

www.hostreview.com

WebHostingTalk.com

www.webhostingtalk.com

5/14/10 8:49 PM

Chapter 5: Letting the World In: Choosing a Host and Domain Name

63

Figure 5-2: HostIndex is a search engine dedicated to helping you find the right host for your Web site.

Keeping It Cheap: Free Web-Site Providers More than 23 zillion Web-space providers have an unbeatable price, which you probably guessed already from the title of this section. If you set up a personal or limited-interest site (such as a condo association’s newsletter), free Web-space providers may be the way to go. You can get lots more space than your local ISP provides. It’s not unusual to get 50 or more megabytes (MB) of Web storage space without having to pay a dime for it. If you plan on running any sort of professional site, though, the free Web space providers aren’t really the ticket for you. You need your own domain name — .com, .org, or whatever — in order to be taken seriously. (See the section “Getting Your Own Domain Name,” later in this chapter.) Also, free Web hosts make their money by slapping ads onto your site, and you can’t usually put up your own ads in competition with them.

09_560938-ch05.indd 63

5/14/10 8:49 PM

64

Part I: Building Your First Web Site Having to post a free Web host’s ad on your site means you may not be able to use any add-ins such as opinion polls and chat rooms that feature their own banner ads. Table 5-2 lists some free Web hosts.

Table 5-2

Free Web Hosts

Web-Site Name

Web Address

50Megs.com

www.50megs.com

Angelfire

www.angelfire.lycos.com

Bravenet

www.bravenet.com

Crosswinds

www.crosswinds.net

TopCities

www.topcities.com

Tripod

www.tripod.lycos.com

Getting Your Own Domain Name Domain names, such as dummies.com, are the addresses of sites on the World Wide Web. Picking and registering your own domain name are two of the most critical phases in your site planning; I show you how to do both in this section. When you tell your Web browser to go to www.dummies.com, it’s obvious where you’re going to end up — at the For Dummies Web site. Your computer doesn’t know that, though. It can’t actually go to a named site; instead, it asks a domain name server (DNS) to translate that name into a more computer-friendly set of numbers known as an IP address. It’s like getting into a cab and telling the driver to go to the Acme Building. He asks you where it is, and you tell him it’s at 1123 Main Street. Domain extensions — the final letters at the end of an Internet address — are known as the top-level domain, or TLD. They’re called “top-level” because you read Internet addresses from right to left, and the part after the last dot is the highest step in a hierarchy that eventually leads down from the Internet as a whole, step by dotted step, to the particular computer you’re going to. Here are the current domain extensions: ✓ .aero

Air transportation companies

✓ .asia

Pacific Rim companies

✓ .biz

09_560938-ch05.indd 64

Business firms

5/14/10 8:49 PM

Chapter 5: Letting the World In: Choosing a Host and Domain Name ✓ .cat

Catalan language sites

✓ .com

Commercial operations

✓ .coop

Cooperatives

✓ .edu

Educational institutions

✓ .gov

U.S. government and agencies

✓ .info ✓ .int

All uses Internationally recognized organizations

✓ .jobs ✓ .mil

65

Human resources U.S. military

✓ .mobi

Mobile services

✓ .museum ✓ .name

Museums Private individuals’ sites

✓ .net

Internet service providers (ISPs)

✓ .org

Nonprofit organizations

✓ .pro

Professions

✓ .tel

For contact data

✓ .travel

For the travel industry

One problem with all these newer domains is that the general public identifies old standards with reliability, and some folks may tend to see the lesserknown alternatives as misprints or typographical errors. (“Dot what? Don’t you mean dot com?”) The term dotcom has, in fact, come into colloquial usage as meaning an Internet-based company. The funny thing about all these TLDs is that there’s no requirement (in many cases) for people to use any of them in the manner in which they were intended. Plenty of nonprofit organizations have .com addresses, and quite a few .nets have nothing at all to do with ISPs. Go figure. Some of the new TLDs, such as .museum, have stringent requirements; if you’re not a museum, you can’t get a .museum address. The domain extensions that I mention in the preceding bulleted lists are called generic TLDs, but another kind of TLD exists as well — the country-level TLD. These TLDs specify the country in which the Web site is based. That’s not necessarily where the Web server that holds the site is located, thanks to the global nature of the Internet. Registering the same name in many countries can be useful if you’re an international organization with multiple languages to support. That way, you can have a Spanish-language page at mysite.es, a Japanese-language page at mysite.jp, and so on.

09_560938-ch05.indd 65

5/14/10 8:49 PM

66

Part I: Building Your First Web Site If you’re into alphabet soup, you can toss around such terms as gTLD and CLTLD for the generic and country-level extensions, respectively, or even iTLD for international ones. Why there’s a small g and i but an uppercase CL before the TLD parts is one of the Internet’s great mysteries.

Picking a name In the early days, it was easy to create a domain name because there weren’t many of them in use yet. These days, if you want to pick a three- or four-letter abbreviation or a single word for your domain name, you’re very likely to be out of luck. Everything short is already taken. The solution? Forget the acronyms and short names. Use phrases instead. The basic idea is to go for anything long enough that it’s unlikely to have been used yet, but short enough to remember. To find out whether a name is available, you either just enter a name at a commercial domain-name registrar (such as GoDaddy) that offers availability checks or use a WhoIs utility. One of the most familiar ones on the Web is the Network Solutions page at www.networksolutions.com/whois/index.jsp You might also try the nice set of tools at www.whois.net (see Figure 5-3) or use a stand-alone tool like WhoIs ULTRA, which you can get your hands on at www.analogx.com/contents/download/network/whois.htm Take your time and poke around the AnalogX site. You can get some other wonderful utilities there, too. What do you do if you come up with a great domain name, but it’s already taken — and you’ve just gotta have it? Well, it depends. If you’re a company that already has a trademark, the domain name may well already “belong” to you as a matter of course, even if you haven’t registered it yet. Well, at any rate, it probably can’t be used legally by anyone else. If you’ve been trademarked and doing business as, say, Joe’s Acme Fabuloso Garbanzo Beans and Unicyle Maintenance Company, and that name’s your registered trademark, anyone else running a site named www. JoesAcmeFabulosoGarbanzoBeansAndUnicycleMaintenanceCompany. com is probably easy game for your lawyers.

09_560938-ch05.indd 66

5/14/10 8:49 PM

Chapter 5: Letting the World In: Choosing a Host and Domain Name

67

Figure 5-3: WhoIs.net helps you check for domainname availability.

You can often buy a domain name from the person or organization that’s currently using it. It can’t hurt to ask, anyway. Just don’t ask Apple for www. apple.com or you’ll hear all of the Bay Area laughing at you. Another factor you need to consider when picking a domain name — besides the likelihood that some organization is actually using the name and has already registered it — is that some companies exist to do nothing but think up good names and register them. These companies, sometimes called “domain squatters,” seem to have no intention of ever running real Web sites that use those names, but only — well, it’s hard to think of it as anything but holding the names hostage. The only purpose they have is to own the name and sell it to you. And if you think you’ll get it away from them for pocket change, think again. It’ll cost hundreds of dollars at least — and the upper end? Limitless for a good name.

Finding a registrar After you pick a name, you need to register it so nobody else can use it. This task is usually handled for you by your Web space provider — who’s used to

09_560938-ch05.indd 67

5/14/10 8:49 PM

68

Part I: Building Your First Web Site the job, probably has a bulk account with a major registrar, and fills out zillions of these applications every year. The best-known registrar of domain names in America is Network Solutions (www.networksolutions.com). It registers your domain name for $35 a year if you sign up for one year or for as little as $9.99 a year for a hundred-year commitment (although that offer might appeal only to the most extremely optimistic, and you can find better deals with a much shorter commitment). It used to be that you had to pay for the first two years at once, but in early 2000 this changed so you can pay for only one year if you prefer. Many sites that offer assistance in registering your domain name still say you have to cough up two years’ money. For a long time, Network Solutions was the only registrar on the block, but this is no longer the case. Today many other registrars compete with it. Prices vary quite a bit, so it’s a good idea to shop around. The popular GoDaddy.com, for instance, has prices in the pocket-change range (like $1.99). The organization that accredits domain name registrars is the Internet Corporation for Assigned Names and Numbers (ICANN). It maintains lists of the outfits that are authorized to register your domain name. To register a domain name by using one of the generic TLDs, go to www.icann.org/registrars/accredited-list.html and pick one of the registrars in your region. To register one of the country-level TLDs, go to www.iana.org/cctld/ cctld-whois.htm and click the name of the country; you find the URL of the country-level registrar at the bottom of the resulting page. If you decide you don’t like your current registrar, you can change. Any of the others will happily take your business away from its competitors.

Online Sources for Web Hosting and Domain Registration Table 5-3 lists some places on the World Wide Web where you can find more information on the topics covered in this chapter.

09_560938-ch05.indd 68

5/14/10 8:49 PM

Chapter 5: Letting the World In: Choosing a Host and Domain Name

Table 5-3

09_560938-ch05.indd 69

69

Online Resources for Web Hosting and Domain Registration

Web Site Name

Web Address

Better-Whois.com

www.betterwhois.com

checkdomain.com

www.checkdomain.com

Freedomlist

www.freedomlist.com

FreeWebspace.net

www.freewebspace.net

IANA (Internet Assigned Numbers Authority)

www.iana.org/domain-names.htm

ICANN

www.icann.org

Netcraft

www.netcraft.com

ServerWatch

www.serverwatch.com/stypes/index. php/d2Vi

5/14/10 8:49 PM

70

Part I: Building Your First Web Site

09_560938-ch05.indd 70

5/14/10 8:49 PM

Part II

Building Better Web Pages

10_560938-pp02.indd 71

5/14/10 8:49 PM

I

In this part . . .

go beyond the planning stage and get into the nitty-gritty of making your Web site work. Chapter 6 introduces the powerful tool of Cascading Style Sheets (CSS). Chapter 7 tells you where to snag some cool graphics and what to do with them once you’ve got ’em. Chapter 8 shows you how to get input from the folks who come to your site through forms.

10_560938-pp02.indd 72

5/14/10 8:49 PM

Chapter 6

Using Cascading Style Sheets In This Chapter ▶ Adding CSS to your Web pages ▶ Using selectors, classes, and IDs ▶ Setting new properties for HTML elements ▶ Positioning elements

H

TML was designed to specify the appearance of a Web page, but the initial implementation left a lot to be desired. In the name of standardization (admittedly, a laudable goal at the time), a great deal of creative control was left behind. An (major heading) element, for example, would always look the same, no matter what the designer wanted to show with it. It would always be the same size, the same color, the same font, and so forth. With the advent of Cascading Style Sheets (CSS), however, all that changed. Suddenly Webmasters could make anything on a Web page behave any way they wanted it to. This led, naturally, to a greater degree of creative control — and more than a little bit of confusion. In this chapter, I cover the basics of CSS and show you how you can use it to make your own Web pages dance to the tune of your dreams. There is so much you can do with CSS that’s beyond the scope of this book, I highly recommend that (after you read this chapter, of course) you rush out to the bookstore and get a copy of CSS Web Design For Dummies by Richard Mansfield (Wiley Publishing). That said, let’s take a look at CSS and the kinds of things you can accomplish with it.

11_560938-ch06.indd 73

5/14/10 8:50 PM

74

Part II: Building Better Web Pages

Merging CSS and HTML There are three ways to add CSS to your Web pages — inline styles, a style declaration, or a separate .css file: ✓ Inline styles: With this method, the effect is totally localized. That is to say, the style you create with this method applies only to the element that contains it — and to nothing else on the Web page (or on any other Web pages in your site). An inline style is the simplest kind of CSS, but lacks flexibility. It uses the style attribute to add CSS. An inline style that sets the color only for the H1 element in which it is declared looks like this: This is a major heading in blue. ✓ Style declaration: This permits you to use the full range of CSS, applying it throughout a single Web page, but it’s of limited utility when dealing with a large number of pages on a significant Web site because its effect is limited to the page on which it is declared, which means you have to make a separate declaration on each Web page in your site. Such a declaration must occur within the HEAD element of the HTML document. A style declaration takes a form that looks like this:

After such a declaration, the text in all H1 elements on this Web page will be blue in color. ✓ Separate .css file: This file is linked to the .html files on your Web site. With this approach, all the creative elements (color, font size, and the like) are specified in a different file (.css) from the ones that define the content of the Web pages on your site (.html). This has a tremendous advantage over either of the other two approaches: One .css file can control the appearance of multiple Web pages. Say, for example, that you have a Web site with 87 pages. You can readily imagine the amount of effort involved if you have to go into each and every one of those Web pages and manually alter all the CSS properties you’d entered into each of them. Now imagine that there’s just one .css file that you have to change to effect a new style on every single Web page in your site. You get the picture, right?

11_560938-ch06.indd 74

5/14/10 8:50 PM

Chapter 6: Using Cascading Style Sheets

75

A .css file isn’t anything fancy. It’s just a plain text file, like a regular .html file. You can create one in anything from Windows Notepad to the fanciest Web page editor. Just make sure you give it an extension of .css (if your program doesn’t already do that for you), and you’ll be fine. All you have to do is put a link to the .css file in each of your Web pages; after that, any change in the linked file is reflected automatically in all your Web pages. Here’s how it’s done: 1. Create the .css file with the variables relating to font size and color or whatever other features you want to specify. 2. Create the .html files that define the content of your site. 3. In the HEAD element of each Web page on your site, add the following lines of code:

Of course, you replace the file part with the name of your actual .css file. 4. Upload both the .css and .html files to your Web server. There. You’re done. After that, if you want to change the appearance of every page on your site, just alter the .css file and upload the new version. Yep, simple as that. No kidding. You can add several different .css files to one .html file by simply listing them all. Say you have three different style files that apply to your site. The following code would add them all:



Perhaps the hardest thing to keep in mind when dealing with a separate .css file is also the simplest: You don’t use the

✓ Declared style in a separate .css file: H1 { color:blue }

There’s actually a fourth level of CSS, but Webmasters have no control over it. A visitor to your site can specify in his Web browser that his own personal style sheet be used instead of any that is stipulated on the site.

Selectors, Classes, and IDs Cascading Style Sheets — hmm — the style sheets part of that seems pretty obvious. Well, with a little struggle, maybe. I honestly cannot tell you why the inventors decided on sheets instead of files or some other more common term — that’s just one of life’s little mysteries. But the style part, at least, should be obvious: It’s a way of establishing the style (appearance) of your Web pages, giving you much more control than standard HTML does. The cascading part is, after a moment’s reflection on the way CSS works, also obvious: The style formatting flows from the top down, just the same as a waterfall or cascade does. (Perhaps its originators had a sheet of water in mind. . . .) The preceding section describes three methods of adding CSS to your Web pages. The top level in this case is a separate .css file, the next level down the cascade is a general style declaration, and at the bottom of the cascade you find your inline styles. Each of these is interpreted in that order. Whether or not you realize it, you already have a way of using selectors in CSS. A selector is simply the name of the element or elements that you’re altering. The H1 element that was used in the preceding examples, for instance, is a selector, because it selects which parts of your Web page are affected by your choices.

11_560938-ch06.indd 76

5/14/10 8:50 PM

Chapter 6: Using Cascading Style Sheets

77

Using classes What if you don’t want to change all instances of an element, but just want to change some instances of them? That’s where classes and IDs come in. You create a class in either a style declaration in the HEAD element of a Web page or in a separate .css file. The syntax is, by now, familiar:

If this is done in a separate .css file, you have to leave out the HTML parts (HEAD and STYLE). Thus the version of the preceding code in a separate .css file would simply look like this: .class1 {color:blue} .class2 {font-family:Arial, Helvetica, sans-serif} Pay particular attention to the curly brackets — {} — when you’re choosing styles. In either declared styles or a .css file, the selector comes first, followed by the opening curly bracket, then the name of the property whose characteristics you want to specify. Next comes a colon to separate the property from its value (in the preceding example, the property of .class1 is color and the value is blue). Finally, you close the declaration with the last curly bracket. Failure to include either bracket (or the colon) will confuse your visitors’ Web browsers to the point where they probably won’t show what you intended. The two lines of code just given declare that any element that is assigned class1 will be blue, and any element assigned class2 will be in the Arial font. (The other terms in that font family are the most likely similar fonts in descending order. Any modern operating system, whether Windows, Unix, Apple, or whatever, will recognize at least one of them — and use it to display something close to what the Web site designer intended.) The .class definition is CSS. You recall that CSS and HTML aren’t the same thing, of course, and HTML has a slightly different way of actually assigning the declared classes. To use this technique in HTML, about all you have to do is to drop the dot at the beginning: This text will be blue. This text will be in the Arial font.

11_560938-ch06.indd 77

5/14/10 8:50 PM

78

Part II: Building Better Web Pages

Using IDs The id method is pretty similar to the class method, but with extreme limitations: Unlike a class definition that can be applied to several elements on a single page, the id method can only be used for a single element per page. No two elements on one page can have the same id. So — what good is an id? Say you have some element that is common to several Web pages but shows up in only one context in each page. (Headers and footers are good examples of this sort of situation.) In such a case, you might want to assign an id rather than a class, because there is no class, per se, involved (that is, there is no situation in which you’d want to alter multiple elements on the same page). Just in case you meet up with a situation like this one, you can handle it if you follow these steps: 1. In a .css file (external style sheet), specify the id’s name with a number sign (also called a hash mark), like this: #makethisred {color:red} The number sign and the following text specify the name of the id involved (in this case, makethisred, which should be self-explanatory, like all good id names), whereas the attributes specified between the curly brackets set the appearance of the item the id is assigned to. 2. Next, on each Web page where the item appears (only once, remember!), add the id name as an attribute in the appropriate place so the specified values will be applied to it, as in the following example:

This text will be colored red.

You use the number sign (#) only in the definition of the id in the .css file, not in the application of it in the separate HTML file.

Redefining Elements If you think you’re stuck with the official definitions of various elements in HTML, the good news is that you’re wrong. With CSS, you can redefine any element to have the properties you desire. Don’t care for the Arial or Times New Roman fonts? No problem. You can substitute anything else for them you like. Take the H1 (major heading) element, for example: Without CSS, it’s always going to have a size of 24 points, a black color, and a bold attribute. In plain HTML, the H1 element is also in Times New Roman font, even though many non-European publishers commonly use Arial for headings and Times New

11_560938-ch06.indd 78

5/14/10 8:50 PM

Chapter 6: Using Cascading Style Sheets

79

Roman for text. You’ll probably want to make such an obvious change, and CSS lets you do just exactly that. Here’s how you redefine it:

Henceforth, every H1 element will have that value. You can, of course, get even fancier if you wish, redefining things to suit yourself by using various attributes. If you want your H1 elements to use gray, italicized lettering as well as the Arial font, just add those attributes to the definition:

Whenever you’re adding multiple attributes, be sure to separate them all with semicolons, as in the preceding example. The following code shows the effect of altering just the H1 element in this manner while leaving the H2 element alone:



This is an H1 heading in Arial, colored gray, and italicized. This is an H2 heading, unaltered from the standard.

Figure 6-1 shows how this works.

11_560938-ch06.indd 79

5/14/10 8:50 PM

80

Part II: Building Better Web Pages

Figure 6-1: An altered H1 element with an unaltered H2 element.

Contextual Selectors A contextual selector, as you might guess from the apt description, is a selector that works only within a certain context. The context that’s referred to is the parent element of another element. Normally, when one element is contained within another — as when a heading contains some kind of emphasis on a particular word (such as bolding it) — the contained element inherits the properties of its parent element. Okay, that’s a long-winded way of saying that if you set your H1 elements to be blue and you add tags around one word in one H1 element, that bolded word will also be blue. But what if you want all the B elements that appear within an H1 element to turn green? You can do that, no problem. And, because you’re using contextual selection, no B elements that appear

11_560938-ch06.indd 80

5/14/10 8:50 PM

Chapter 6: Using Cascading Style Sheets

81

outside an H1 element (that is, outside the context) will be affected. Here’s how the code for such a style declaration actually looks:



Going Beyond the Basics You’re not even remotely limited to just altering the style of common textual elements, of course. With CSS, you can play with the settings of anything and everything on your Web pages. The following examples show just a few of the possibilities that are at your disposal via various CSS attributes.

CSS colors As previously shown, you can set the background color of any element via the CSS background-color attribute. In the preceding examples, the value of the color was set via the simplest method of specifying a textual color such as “red” or “black.” There were 16 common text values for colors defined in HTML 4.01: black, green, silver, lime, gray, olive, white, yellow, maroon, navy, red, blue, purple, teal, fuchsia, and aqua. Color names can be used in any color situation, not merely as background colors. As an example, you can set a font to be colored silver or a border to be lime. In addition to these official basic colors, however, several other color names are commonly recognized by the major Web browsers, and you can also utilize hexadecimal (base 16) or decimal (base 10 in shades of Red, Green, and Blue) numbers as color values to set a much wider variety of shades. You can

11_560938-ch06.indd 81

5/14/10 8:50 PM

82

Part II: Building Better Web Pages check out the color set known officially as “X11,” complete with examples, at www.w3.org/TR/css3-iccprof#x11-color. You should remember to put the number sign (#) in front of hexadecimal numbers; that’s what tells a Web browser that it’s dealing with a hex value. If you forget to do that, some browsers will forgive you, but others won’t.

Borders Chapter 3 discusses the use of borders when you’re using frames — but thanks to the versatility of CSS, you can also use borders with any element on your Web pages. To set the kind of border you want to surround a particular element, use the border attribute. You have several options here: none, dotted, dashed, solid, double, groove, ridge, inset, or outset. Obviously, the none value is pretty much useless, as very few elements have a border by default. Figure 6-2 shows the other options as specified in the following code example:



This This This This This This This This

11_560938-ch06.indd 82

has has has has has has has has

a dotted border.

a dashed border. a solid border. a double border. a grooved border. a ridged border. an inset border. an outset border.

5/14/10 8:50 PM

Chapter 6: Using Cascading Style Sheets

83

CSS and WYSIWYG When you’re using a sophisticated Web-development environment (such as CoffeeCup or Dreamweaver), you can ease your workload a great deal by simply letting the program take care of most of the drudgery for you. Every major WYSIWYG program has some sort of CSS feature that allows even a novice Webmaster to take control like an old pro (see Chapter 10 for using CSS to create button-based menus in CoffeeCup).

Figure 6-2: Various border designs in CSS.

To add styles to your Web page using CoffeeCup, follow these steps: 1. Starting from a new or existing Web page loaded in CoffeeCup, click the Style Sheet Items icon on the toolbar and select Style Sheet Wizard as shown in Figure 6-3. Doing so brings up the dialog box shown in Figure 6-4.

11_560938-ch06.indd 83

5/14/10 8:50 PM

84

Part II: Building Better Web Pages

Figure 6-3: Creating styles.

Figure 6-4: Naming a style.

2. Enter the name of the style in the text box, then click the OK button. You’re now looking at the Style Sheet Wizard, shown in Figure 6-5. 3. Select the font attributes you want to apply to this style, if any, by clicking the downward-pointing arrows on the right side. 4. Next, click the Color and Background tab. This opens the related options as shown in Figure 6-6.

11_560938-ch06.indd 84

5/14/10 8:50 PM

Chapter 6: Using Cascading Style Sheets

85

Figure 6-5: The Style Sheet Wizard.

Figure 6-6: Setting color and background options.

5. Click the downward-pointing arrows to the right to select text or background colors from a color chart (see Figure 6-7). If you don’t see what you want, click the More Colors button to open a color wheel. Click on the colors in that wheel to choose one.

11_560938-ch06.indd 85

5/14/10 8:50 PM

86

Part II: Building Better Web Pages

Figure 6-7: Choosing a color.

6. To add a background image to the style, click the Browse button, navigate to the desired graphics file, and select it. If you want to select characteristics of the background image, go ahead. You can decide whether it repeats or shows only one copy, whether it scrolls or remains fixed in position, and where it shows up on-screen (this works just like positioning layers — see the later section on positioning with layers). 7. Click the Alignment tab to access the choices shown in Figure 6-8. You can set the Indentation as a length in pixels or as a percentage. Whichever you select, you can specify the value by selecting from the scrolling values at the right. With Line Height, you have those two options — as well as one called Multiplier, which lets you specify a whole-number value (such as twice the usual height, for example). For Alignment, you can set either the vertical or horizontal value. For the vertical value, the Keyword option specifies the HTML attributes such as middle or top; you may also set the vertical alignment as a percentage. Horizontal alignment options are simply center, justify, left, or right. Word and letter spacing are simple pixel values.

11_560938-ch06.indd 86

5/14/10 8:50 PM

Chapter 6: Using Cascading Style Sheets

87

Figure 6-8: Setting alignment.

8. Click the Margins tab (see Figure 6-9). The Left and Right Margins have three options, as does Width: Auto (or the default, the same as setting nothing), Absolute (in pixels), and Percentage. Top and Bottom Margins and Height have Absolute and Percentage values.

Figure 6-9: Choosing margin values.

11_560938-ch06.indd 87

5/14/10 8:50 PM

88

Part II: Building Better Web Pages 9. Click the Padding tab (shown in Figure 6-10). Recall that all CSS values are applied to a rectangular area. Just as with table cells, you can set the contents so there’s some space (padding) between them and the edges. The only options are absolute (a certain number of pixels) or percentage.

Figure 6-10: Setting the padding values.

10. Click the Border tab (see Figure 6-11). The style’s borders (see the section on borders earlier in this chapter) can be set via these options. All four have the same choices: Fixed, Absolute, or Percentage. The options on the right will change, depending upon your choice. For Fixed, you get a drop-down list allowing you to choose values of none, thin, medium, or thick for the lines of the border. The other two work just like similar options already discussed. Colors are chosen the same way as text colors (see Step 5). 11. Click the OK button to finish the style.

11_560938-ch06.indd 88

5/14/10 8:50 PM

Chapter 6: Using Cascading Style Sheets

89

Figure 6-11: Specifying border settings.

Layers Layers? Okay, not layers, DIVs. This is an old argument going way back to the old browser wars between Microsoft’s Internet Explorer and Netscape Navigator (the program that was the ancestor of both IE and today’s Firefox browser). Microsoft, having much more money and clout, clearly won that war; few people today even remember what Netscape was, but the older, more aptly descriptive terminology has stuck, despite the fact that the official name for a layer today is a DIV (division of a Web page). The DIV goes in the BODY element of your Web page. A DIV is defined as a rectangle with a specified width, height, and upper-left corner position. These three factors are all that a Web browser needs to know to create the layer: Start at this location, and then extend a rectangle downward and to the right by this many pixels. That rectangle acts as a kind of miniature Web page within the larger Web page; it can contain anything that a normal Web page can. The concept of layers actually goes back further than that, to the days when an overhead projector was the hottest high-tech item on the market. If you’re old enough (or recently attended a low-tech school), you probably have memories of your teachers placing one transparency on top of another on an overhead projector, which resulted in the information on the second transparency showing up on the screen on top of the information on the first one. The first transparency was the lower layer; the second was the higher layer; and so forth.

11_560938-ch06.indd 89

5/14/10 8:50 PM

90

Part II: Building Better Web Pages Web pages can be thought of in the same way — as one layer of information superimposed upon another, lower layer. A third, higher layer can then be placed on it, and so forth, ad infinitum. Many Web site designers take advantage of this ability to provide distinct types of information on top of one another. This may be a series of maps showing (for example) Europe before, during, and after the Napoleonic Wars, with a user interface that allows Web-site visitors to view them in whatever sequence they desire. This is called an overlay in cartographic terminology, which you’ll often find in sophisticated mapping programs such as Google Earth. (Shameless plug time: Be sure to see this author’s Google Earth For Dummies [Wiley Publishing] if it’s not already a part of your collection.)

Absolute positioning Absolute positioning is placing a DIV element based on the upper-left corner of the Web page itself, rather than basing the position on anything contained within the Web page. Thus, a DIV that is absolutely positioned at, say, 50 pixels in and down from the upper-left corner will be only half as far from the left and top margins as one that’s absolutely positioned 100 pixels in and down. To set a DIV to an absolute position, you simply need to specify that this is what you want — and set how far from the left and top of the Web page you want the upper-left corner of your DIV to be. For example, for a rectangle that’s 100 pixels by 100 pixels in size, use the following code to set its absolute position to 50 pixels in and 50 pixels down:



To specify this — as well as one that is 100 pixels in and down, as in the example mentioned in the first paragraph — you’d change the code to read as follows:





11_560938-ch06.indd 90

5/14/10 8:50 PM

Chapter 6: Using Cascading Style Sheets

91

Note that both DIVs in this style declaration go within the BODY element. Also, for the purpose of better showing them in this example, each DIV has a different background color assigned to it — specified by (as you may have guessed) the background-color attribute. Figure 6-12 shows the two DIVs given absolute positions.

Figure 6-12: Setting an absolute position.

Relative positioning Relative positioning is simple to implement: You simply use the word relative instead of the word absolute in your HTML code. Otherwise it works the same as absolute positioning does except for one critical factor — its origin point. It’s based not on the upper-left corner of the Web page, but on the upper-left corner of the containing element. Doubtless you recall that everything on a Web page is contained within something else — the BODY element is contained within the HTML element, and so forth — thus, with relative positioning, you have to pay careful attention to this container relationship unless you really, really like dealing with unpredictable results on your Web pages.

11_560938-ch06.indd 91

5/14/10 8:50 PM

92

Part II: Building Better Web Pages If, for example, one DIV is contained within another one, then you have to calculate the second one’s positioning relative to its parent DIV element’s position, not to the Web page as a whole. Say the contained DIV is set to a relative position of 200 pixels in and 200 pixels down. If the parent DIV is set to 100,100, then the position of the child DIV is going to be 300,300 (the position of the upper-left corner of the parent DIV plus the position of the child DIV). To modify the earlier example to do that, you’d change the code to read something like this:



Notice that the second tag begins before the first layer is closed with its tag. Thus, the second one is enclosed within the first one. Because the second one’s relative positioning values are the same as the size of the first DIV, the upper-left corner of the second DIV is located exactly where the first one’s lower-right corner falls — instead of in the middle of it, as in the preceding example (see Figure 6-13).

Online Sources for CSS Table 6-1 lists some places on the World Wide Web where you can find more resources like the ones covered in this chapter.

Table 6-1

11_560938-ch06.indd 92

Online Resources for CSS

Web-Site Name

Web Address

CSS Beauty

www.cssbeauty.com

CSS Standard

www.w3.org/TR/CSS2

CSS Tutorial

www.w3schools.com/css

CSSplay

www.cssplay.co.uk

Dynamic Drive CSS Library

www.dynamicdrive.com/style

Guide to Cascading Style Sheets

http://htmlhelp.com/reference/css

5/14/10 8:50 PM

Chapter 6: Using Cascading Style Sheets

93

Figure 6-13: Using relative positioning.

11_560938-ch06.indd 93

5/14/10 8:50 PM

94

Part II: Building Better Web Pages

11_560938-ch06.indd 94

5/14/10 8:50 PM

Chapter 7

Adding Images In This Chapter ▶ Getting free graphics ▶ Optimizing graphics files ▶ Creating free logos ▶ Editing images ▶ Designing with images

Y

ou can have a perfectly functional Web site without images. But if you compare your site with one that’s just as functional but also uses graphics, yours will probably lose out in terms of attracting visitors. Most people will go to the other site and leave yours gathering electronic dust. In this chapter, I take you on a whirlwind tour of places where you can download images by the bushel, I suggest methods for modifying images in fabulous ways, and I share lots of other tips to improve your site’s appearance.

Getting Graphics — for Free! Most of us aren’t artists, and even if I know an artist or three, most of them spend their time mucking about with paintbrushes and canvases. Many aren’t really comfortable with electronic media. So how do average people who want nice graphics for their Web sites get them? The good news is that excellent graphics are all over the place. Graphics are an integral part of the World Wide Web, and the quality of those graphics has improved tremendously from the early days of the Internet.

Heeding copyrights and credits Every Web browser is a funnel for graphics. Any image that you can see in it, you can download and put on your site — technically speaking, anyway.

12_560938-ch07.indd 95

5/14/10 8:50 PM

96

Part II: Building Better Web Pages But you need to consider a few factors before you use graphics. Yes, you can grab every image file you find. But you can’t necessarily use them all without consequences. When an artist creates an image, that artist owns the copyright to that image. Just as the word says, that gives the artist — and the artist alone — the right to make copies, electronic or otherwise. The artist can give other people permission to make copies of the image — or even sell the copyright to someone — but unless he or she does so, the artist retains total control over the image. Never take legal advice from anyone who spells copyright as copywrite. One of the few ways in which someone can lose a copyright is by stating that he’s placing a work in the public domain, which means that he’s surrendering his copyright, and others can do anything that they want with the work. Many people don’t understand what public domain means, though — and you sometimes run across a statement on a Web site that says something incredible like, “I retain the copyright to all these images, but I’m placing them in the public domain, so feel free to use them.” If you find one of these contradictory disclaimers and you really want to use the images, your best course is to contact the artist for clarification. Typically, you find five different situations with fine print on an artist’s Web site, as the following list describes: ✓ The artist states that you can’t use the images. Just walk away — you can find plenty of others out there. ✓ The artist states that you can use the images without any conditions. Go ahead and download to your heart’s content. ✓ The artist states that you can use the images if you do certain things, such as include a link back to the page they’re on or include a copyright notice under the image. Do what the artist asks and use the images. ✓ The artist states that you can use the images freely if you run a noncommercial site but that commercial sites must pay. If you’re commercial and the work is good, pay up — it’s not going to break the bank. After all, you’re not buying a Renoir original here. ✓ The artist provides no information at all about usage. Either walk away or e-mail the artist to find out the policy.

Creating your own images The easiest way to avoid copyright problems is to make your own images. That way you own the copyright — unless you’re working under contract for someone such as a Web design firm, in which case that company

12_560938-ch07.indd 96

5/14/10 8:50 PM

Chapter 7: Adding Images

97

probably owns the copyright. It’s impossible for me to cover all you need to know about copyright in the limited space available here, but the subject is well covered in Creating Web Graphics For Dummies, by Bud Smith and Peter Frazier (Wiley Publishing). Of course, the digital camera revolution also gives you an unprecedented opportunity to create your own Web-ready graphics (check out Digital Photography For Dummies, 5th Edition, by Julie Adair King), and programs like Photoshop and Fireworks make it relatively easy for even those of us who aren’t very graphically talented to come up with professional-level graphics. Table 7-1 shows the URLs for several popular graphics programs.

Table 7-1

Online Resources for Graphics Programs

Program

Web Address

Adobe Fireworks

www.adobe.com/products/fireworks

Adobe Photoshop

www.adobe.com/products/photoshop

Corel Painter

www.corel.com/painter

Corel Paint Shop Pro

www.corel.com/paintshoppro

CorelDRAW

www.corel.com/coreldraw

Differentiating among graphics file formats Sometimes it seems there are about as many different graphics file formats as there are people in Manhattan on a Monday afternoon. Every company from Adobe to Kodak has its own way of showing electronic images. When it comes to the Web, though, you really need to consider only three formats — the three that work in all major (and most minor) Web browsers: ✓ GIF: The venerable old GIF (Graphics Interchange Format) file format still sees a lot of use on the Web. Because GIF limits you to 256 colors, it’s best to use for images that don’t have lots of colors or much in the way of subtle shifts between colors. GIF also has a unique capability — it can contain several images in a single file. These images appear sequentially as you view the GIF file, resulting in a cheap and easy form of animation. ✓ JPEG: The relatively newer JPEG (Joint Photographic Experts Group) format, also commonly known as JPG because people still have the habit of using DOS 8.3-type filenames, has radically different capabilities. JPEG

12_560938-ch07.indd 97

5/14/10 8:50 PM

98

Part II: Building Better Web Pages is a true color format, so you don’t need to worry about any color limitations. It also stores image information in a different way, resulting in a highly compressed file that’s usually much smaller than a GIF file of the same image. ✓ PNG: The latest puppy in the window is the PNG (Portable Network Graphics) format. (You pronounce it ping.) PNG does everything that the GIF format does, except create animated images, and does quite a few things much better — such as providing better transparency capabilities. (A more sophisticated format known as MNG — Multiple-image Network Graphics — that’s currently in the works includes the capability to create animated images.)

Putting Your Graphics on a Diet with GIFWorks Fat files are embarrassing. They slow down a page like nothing else, turning a fabulous site into a sluggish turkey. A really good graphics program can trim your overweight files, but such a program will also set you back a pretty penny, and you’ll have to work with it for a while if you want to get the most out of it. Instead of putting all that money and effort into solving the file-size problem, try some of the following Web sites that do the job for you — for free. GIFWorks is absolutely one of the best tools you’ll find on the Web. Period. You get the idea I like it? A lot? There’s a good reason: This is one truly fullfeatured program, and it’s something you may not be familiar with yet — but I think it’s the wave of the future on the Web. This program isn’t one you download and use on your computer. It stays put, and you use it right on the GIFWorks site. With GIFWorks, you can do everything to GIF files (but only GIF files), from reducing colors to adding special effects. So what does it cost? Nothing, nada, zip. And to top it all off, the same folks have a site that lets you get your hands on zillions of high-quality images (the Animation Factory, at www. animfactory.com). I’m not exaggerating when I say quality, either. This is some of the best stuff I’ve seen. Unlike GIFWorks, you have to pay for The Animation Factory, but their rates are within just about any budget — anywhere from $59.95 for a year’s download privileges to the highest rate of $199.95 for a year of the top pro-level service. You don’t have to pay any further fees for using the images. The Animation Factory is well worth the price, even if you don’t run a commercial Web site — and GIFWorks shows the same attention to quality but costs nothing at all.

12_560938-ch07.indd 98

5/14/10 8:50 PM

Chapter 7: Adding Images

99

Here’s how to upload your image to GIFWorks: 1. Go to www.gifworks.com/image_editor.html. 2. Choose File➪Open Image from the GIFWorks menu options, as shown in Figure 7-1. Come back to this page later and check out the File➪New 3D Text option. It’s a great way to create animated text banners. 3. On the next page, open a file from the Web by entering its URL and clicking the Fetch Image button. Or upload a file from your local drive by clicking the Browse button, selecting the file, and then clicking the Upload Image button. GIFWorks operates on a copy of the image you specify. It doesn’t change the original file in any way. After the image is uploaded to GIFWorks, it appears in the program, as shown in Figure 7-2. I’m using a dog from the collection at www.bestanimations.com for this example. The dog is animated, which is one of the great strengths of GIFWorks. Many programs can modify and optimize individual GIF images, but an animated GIF is composed of many different images — eight of them, in this case — and GIFWorks can modify all of them simultaneously, thus altering the animated image.

Figure 7-1: Opening a file in GIFWorks.

12_560938-ch07.indd 99

5/14/10 8:50 PM

100

Part II: Building Better Web Pages

Figure 7-2: An animated image in GIFWorks.

Before you begin to work with the image, click the Help menu and take a look at the FAQ. After your image is at GIFWorks, what you do with the image depends on your situation. Here are some options you can choose from: ✓ To reduce the file size quickly: Choose Optimize➪Reduce Colors from the menu bar. You get a whole page full of different versions of the original image, each with fewer colors than the preceding ones. You also get information about the file size, number of remaining colors, and percentage reduction. Scroll down the page, look at each image, and download the one that represents the best compromise between image quality and file size. ✓ To make a color transparent: Choose Edit➪Transparify from the menu options. In the pop-up window that appears, click the color you want to see through. To make a transparent GIF totally opaque, do the same thing, but start by choosing Edit➪Un-Transparify. ✓ To view information on file size, width, height, and so on: Choose View➪Image Info.

12_560938-ch07.indd 100

5/14/10 8:50 PM

Chapter 7: Adding Images

101

Okay, that’s all the practical stuff that most Webmasters need. Now for the fun part. After you’re done being responsible, head for the Effects menu and start playing. You can do so many things to your images that you may have a hard time choosing among them. Unless you’re dead set on just trying anything that comes to hand, choose Help➪Effects Gallery to look at some examples. Figure 7-3 shows what applying some of the effects did to the image shown in Figure 7-2. Enjoy.

Figure 7-3: Special effects can radically alter the look of an image.

Creating a Logo with CoolText.com If you want a free logo fast and you don’t mind doing it yourself, try CoolText. com at — you guessed it — www.cooltext.com. This Web site generates graphics, according to the options that you choose, while you wait. The process is simple and fun, and there’s no limit to the number of logos you can experiment with. Not only are its logos cool, but so are the site’s legal requirements: none, zip, nada. There’s no copyright issue to deal with, no ads stuck in the middle of things, and no fine print of any kind. As an act of gratitude for such a great

12_560938-ch07.indd 101

5/14/10 8:50 PM

102

Part II: Building Better Web Pages service, you may want to add a link back to this site from yours, but even that’s not required. Although CoolText.com doesn’t hold a copyright on the logos you create, you probably do. I’m not a lawyer (and I don’t even play one on TV), but it seems to me that the decisions you make during the course of designing the logos qualify them as artistic creations. Don’t take my word for it, though. If this point is important for your situation, check with an attorney who really knows copyright law — or e-mail the U.S. Copyright Office at [email protected]. To make a custom logo at CoolText.com, follow these steps: 1. Go to www.cooltext.com. 2. Scroll down and click any logo style under Choose a Logo Style, as shown in Figure 7-4. This takes you to the logo design page, shown in Figure 7-5.

Figure 7-4: CoolText. com’s logo page, showing the styles you can use to create your own custom logo — for free!

12_560938-ch07.indd 102

5/14/10 8:50 PM

Chapter 7: Adding Images

103

Figure 7-5: The logo design page, where you choose options for your logo.

Different logo styles offer different options. Depending on the style that you choose, these options may set colors, determine whether text is engraved or raised, and so forth. In this example, I’m using the Alien Glow design. 3. Type the text for your logo in the Logo Text text box. You usually type your site or company name here, although you can type anything that you want. If you need more than one line, you can put a new line symbol (\n) in the text, as in the following example: First Line\nSecond Line 4. Click the font name (in this example, Futura Poster), and then select a font category from the list that’s presented. Finally, select the name of a particular font. You’re returned automatically to the design page. 5. Enter a font size in the Text Size text box. 6. Click the Predefined Color picker (to the right of the color bar) for the Glow Color category and then select a glow color from the resulting color picker Web page. (See Figure 7-6.)

12_560938-ch07.indd 103

5/14/10 8:50 PM

104

Part II: Building Better Web Pages This Web page gives you a long list of named colors, with examples of each color. Just decide which color you like and click it to return to CoolText.com with that color selected. You can specify a glow color either by entering numerical values in the R, G, and B text boxes to indicate the RGB (red, green, and blue) components, or by entering its hexadecimal value to the right. 7. Repeat Step 6 for the other three color settings (Outer Text Color, Inner Text Color, and Background Color). 8. Click the current background image in the Background Image category (if one hasn’t been chosen, click None), and then click one of the textures on the resulting Web page. (See Figure 7-7.) You’re returned to CoolText.com with that texture selected. If you need more textures, click the links at the top of the textures page to view more pages. 9. If you want to specify a file format, click the Edit button for the File Format category and then select one of the file formats in the resulting list.

Figure 7-6: The list of named colors lets you choose by just clicking one.

12_560938-ch07.indd 104

5/14/10 8:50 PM

Chapter 7: Adding Images

105

Figure 7-7: Choosing a texture for your logo.

10. After you set all the options for your logo, click the Render Logo button. Now, all you have to do is sit back and wait until your logo shows up. If you like it, download it right away because it exists on CoolText.com’s server for only about an hour. If you don’t like it, back up and monkey with the settings until you get what you want. While you’re at CoolText.com, check out the button generator, too. You access it by clicking the Buttons link at the top of the page.

Editing Images There are plenty of times when you’ll need to tweak an image to get it “just so” for your site. All graphics programs give you some options for doing this sort of thing, and they all work pretty much the same way. In this section, I show you how to use a handy little graphics editor called IrfanView (www. irfanview.com) to spiff up your Web graphics quickly and easily.

12_560938-ch07.indd 105

5/14/10 8:50 PM

106

Part II: Building Better Web Pages

Resizing Although you can make an image appear smaller on a Web page than it really is (see the “Sizing images in HTML” section, later in this chapter), it’s usually best to set the size deliberately before the image ends up on your site. This is a simple process, although there are a couple of caveats. When you resize an image, your graphics program has to change the pixels — the color dots that make up the image. Obviously, a larger image will take more pixels and a smaller one will take fewer. This means either adding pixels (interpolation) or subtracting pixels (resampling). Although graphics interpolation has come a long way, any image-resizing process still has to make some compromises. Shrinking an image usually doesn’t damage the capability to view the picture, but it always has to mean some loss of detail. Enlarging an image can add areas of blockiness due to the additional pixels needed to fill the new space. The best resizing is a minor resizing. Open the image you want to resize in IrfanView, and then follow these steps: 1. Choose Image➪Resize/Resample from the menu. In the Resize/Resample Image dialog box, shown in Figure 7-8, there are three methods of setting the new image size: • To specify a particular physical size, in the Set New Size panel, select pixels, centimeters, or inches, and then enter the new width and height in the Width and Height text boxes. If the Preserve Aspect Ratio check box is selected, you have to enter only one of the values; the other will be automatically entered. • To use a percentage, select the Set New Size as Percentage of Original radio button, and then enter the appropriate numbers in the Width and Height text boxes. • To use common sizes, click the appropriate button or select a radio button in the Some Standard Dimensions panel. 2. Click the OK button. 3. Save the image. If you don’t save the image after you make your changes, you’ll lose it.

12_560938-ch07.indd 106

5/14/10 8:50 PM

Chapter 7: Adding Images

107

Figure 7-8: Setting the new image size.

Cropping What if you want part of a picture but not all of it? Get out the scissors — it’s croppin’ time. You can cut out any rectangular section you want — you’ll probably do this a lot, so you’ll be happy to hear how easy it is. Open the image you want to crop in IrfanView, and then follow these steps: 1. Place your mouse pointer at one corner of the area you want to crop and then click. 2. While holding down the left mouse button, drag the mouse pointer to the opposite corner of your area. As you do so, a guide box shows you the currently selected area. (See Figure 7-9.) 3. When you have the area you want selected, release the mouse button. 4. Choose Edit➪Crop Selection from the menu. Alternatively, you can press Ctrl+Y.

Rotating and flipping Just like a picture hanging on a wall, an image on your Web site can sometimes look better if it’s repositioned. A slight turn to the right, perhaps, or maybe even a complete inversion for a shocking effect. Graphically, I’m talking about rotation and flips.

12_560938-ch07.indd 107

5/14/10 8:50 PM

108

Part II: Building Better Web Pages

Figure 7-9: Cropping an image. Photo courtesy of NASA.

There are two kinds of rotation in IrfanView. Simple rotation is always by 90 degrees. Four of these rotations in a row return the image to its original state. Custom rotation allows you to specify an exact number of your choice instead. To do a simple rotation, just choose Image from the menu, and then click Rotate Right or Rotate Left. For a custom rotation, do this instead: 1. Choose Image➪Custom/Fine Rotation from the menu. The Rotate by Angle dialog box appears. 2. In the dialog box shown in Figure 7-10, enter the degree (up to two decimal points) of rotation. Use a minus sign (–) for leftward rotation.

12_560938-ch07.indd 108

5/14/10 8:50 PM

Chapter 7: Adding Images

109

3. The dialog box displays the original image on the left and the altered one on the right. If you aren’t satisfied with the results of your rotation, repeat Step 2 until the altered image suits your needs. 4. Click the OK button.

Figure 7-10: Doing a fine rotation. Photo courtesy of NASA.

Flipping an image is done in pretty much the same way as a simple rotation — choose Image➪Vertical Flip or Image➪Horizontal Flip from the menu — but it isn’t the same thing as rotating an image 180 degrees. Remember that a flip is a mirror image instead of a turned one.

Adjusting color Color adjustments include a range of possibilities. The most basic are color reduction (for example, making a 256-color image into a 16-color one) and grayscale conversion. The more complex include setting the proportions of red, green, and blue and monkeying with the contrast and brightness. Gamma correction is a highfalutin term for fixing an image that’s too light or dark. You’ll often find this situation when viewing an image on a PC that was done on a Mac. To do a simple color reduction with IrfanView, follow these steps: 1. Choose Image➪Decrease Color Depth from the menu. The Decrease Color Depth dialog box appears. 2. In the dialog box shown in Figure 7-11, select one of the radio buttons to select a standard color depth. If you select the Custom radio button, be sure to enter another number of colors into the Custom text box.

12_560938-ch07.indd 109

5/14/10 8:50 PM

110

Part II: Building Better Web Pages

Figure 7-11: Reducing colors is easy.

3. Click the OK button. Grayscale conversion is even easier. Just choose Image➪Convert to Grayscale from the menu. Although the most complex color adjustments are a bit more involved, IrfanView wraps them in an easy-to-use package with lots of options. Load up an image and give it a go: 1. Choose Image➪Enhance Colors from the menu. 2. In the Enhance Colors dialog box (see Figure 7-12), drag the sliders or type values into the text boxes. As you do so, the reference image on the right shows the changes you’re making; the original image isn’t affected by your experimentation, so feel free to play around with all the settings. You can, at any time, click the Set Default Values button to put everything back to normal. 3. If the reference image isn’t large enough for you, click the Apply to Original button.

Figure 7-12: Enhancing colors. Photo courtesy of NASA.

12_560938-ch07.indd 110

5/14/10 8:50 PM

Chapter 7: Adding Images

111

This adds all your changes to your full-size original image. Note, however, that you still haven’t actually altered it; all you have to do is click the Cancel button to return to normal. 4. When you’re finished, click the OK button to keep your changes or the Cancel button to abort them.

Using special effects filters There’s a lot you can do with most of today’s graphics programs, but there’s always something more that’s possible. That’s where filters come in. A filter is a special-effects wizard that alters your images automatically in various ways. You might, for example, apply a filter to a photograph to make the photo look like an oil painting or pencil sketch. IrfanView has its own set of ready-to-use filters. It can also use your Photoshop-compatible filters. The best way to gain a quick understanding of what filters can do is to check out the Effects Browser: 1. Choose Image➪Effects from the menu. 2. Choose the Effects Browser option from the resulting submenu. 3. In the Image Effects dialog box shown in Figure 7-13, select the names of the various built-in effects filters. As you do so, the twin images show you how the original compares to the filtered version. 4. Enter any requested values required by the filter. 5. When you’re done, click the OK button to keep your changes, or click the Cancel button to abort them.

Figure 7-13: Previewing effects. Photo courtesy of NASA.

12_560938-ch07.indd 111

5/14/10 8:50 PM

112

Part II: Building Better Web Pages

Basic Design with Images Getting or creating images is one thing. Knowing the right images to get (or to make) is another, and knowing what to do with them is perhaps most important of all. Misusing graphics — using either too many or too few — can make an otherwise outstanding Web site into an unpleasant mess. This section explores the proper use of images in Web page design.

Placing images for maximum effectiveness It’s easy to overdo any element on a Web page. It’s not uncommon to run across sites that are all, or almost all, text — which is fine for some technical material, but pretty dicey if you’re trying to appeal to the general public. At the opposite extreme, you’ll find pages that are (in effect) nothing but one image after another, with perhaps a small bit of text that often leaves you more confused than when you started. Balancing visual elements with text is key to good Web site design. The CNN. com front page illustrates this point well. It’s functional, eye catching, and well balanced. Figure 7-14 shows the top portion of the Web page. Note that it’s strongly graphical. Even the text and links are all tied in to their attendant graphical background, their colors nicely suiting the overall look of the page.

Figure 7-14: The top of the CNN. com home page is strongly graphical.

12_560938-ch07.indd 112

5/14/10 8:50 PM

Chapter 7: Adding Images

113

The major image at the top — a photo and its surrounding frame — is the largest single graphical element on the page, reflecting its importance as showing the latest top story. Farther down (see Figure 7-15), there are smaller photos illustrating other stories; the whole is well balanced by the set of text links leading to various news reports. This site has a particularly interesting feature: Except for the news story’s text links, virtually all the text is either embedded in or otherwise associated with a graphic. And very little of the graphic material is in the form of photos, drawings, or other commonly used image types. You do find heavy use of graphical dividers to help structure the visual appeal of the page — but they’re small and don’t overpower the other elements nearby. Your own artistic judgment must be the ultimate guide, but these guidelines will help you to create better-designed Web pages: ✓ Keep most images relatively small. How small depends upon two factors: the number of images you have on the page and simple visibility. ✓ Use your largest picture or artwork as the lead-in to the rest of your material. If it’s not the most important image, it probably shouldn’t be the biggest one, either. ✓ Use small divider images to separate subject areas. ✓ Don’t allow advertising images to overwhelm the basic material of the Web page.

Figure 7-15: The main portion of the page contains smaller graphics and is broken up by text.

12_560938-ch07.indd 113

5/14/10 8:50 PM

114

Part II: Building Better Web Pages

Sizing images in HTML Besides file size, you need to consider the physical size of images. Each image, when displayed in a Web browser, takes up a certain amount of real estate on your visitors’ screens. Very often, a particular image you want to use just doesn’t happen to be the size you want it to be. You can fire up your favorite graphics program, load the image, resize and resample it, and then resave it. Or you can just let your visitor’s Web browser do all the work for you. The ability to alter the size of an image on a Web page is built in to HTML. Although it isn’t required, it’s good form to specify the width and height of an image, as demonstrated here:

Normally you would use the actual size of the image, of course. But you can use any values. To make the image take up more space on a Web page, just enter larger numbers. To make it smaller — you guessed it — enter smaller values instead. You have to be careful to resize the image proportionally, unless you’re looking for some weird effect. If you want to quadruple the area of the example image — from 3,000 pixels to 12,000 pixels, for example — you set the width to 200 and the height to 60. See Chapter 2 for details on how to place images.

Online Sources for Quality Graphics Table 7-2 lists some places on the World Wide Web where you can find lots of high-quality graphics for your site.

Table 7-2

12_560938-ch07.indd 114

Online Resources for Quality Graphics

Web Site Name

Web Address

CoolNotions.com

www.coolnotions.com

All Free Original Clip Art

www.free-graphics.com

Goddess Art of Jonathon Earl Bowser

www.jonathonart.com

Graphics-4free.com

www.graphics-4free.com

Grazia A. Cipresso

www.gcipresso.com

Lindy’s Graphics

www.theiowa.net/lindy

5/14/10 8:50 PM

Chapter 7: Adding Images

115

I don’t list any image repositories in this table. An image repository is a Web site that simply provides about a zillion images for download without any regard for where they came from or what kind of legal troubles they may cause for you. They typically involve all sorts of copyright and trademark violations — and the fact that such a repository provides the Donald Duck images that you put on your site doesn’t keep Disney’s lawyers off your back. Stick with sites like the ones in this table, and you’ll keep out of trouble.

12_560938-ch07.indd 115

5/14/10 8:50 PM

116

Part II: Building Better Web Pages

12_560938-ch07.indd 116

5/14/10 8:50 PM

Chapter 8

Adding Forms In This Chapter ▶ Adding the FORM tag ▶ Setting up interaction ▶ Getting text info ▶ Offering visitor choices ▶ Checking for CGI access ▶ Implementing CGI scripts ▶ Using form makers

A

Web form consists of a series of elements that, together, enable you to gather information from your visitors. A Web form’s two most common uses are for getting user data when a visitor signs up for “membership” and getting purchaser info when making a sale. The first step in your form design process is, of course, to figure out what information you need from your visitors. Next you need to determine which form elements are best suited for getting that info. After you’ve done that, you type the HTML and (finally) arrange to submit the form’s data for processing. You doubtless recall from Chapter 2 that all HTML tags are enclosed within other tags, and forms are no exception. The tag goes within the BODY element, so your basic form setup will look like this:





13_560938-ch08.indd 117

5/14/10 8:51 PM

118

Part II: Building Better Web Pages If you fail to follow this pattern properly, in which each element is properly nested, the form may not work. Web browsers are very forgiving, however, so you might still get away with it.

Getting Input The most important part of a Web form, next to the tag itself, is the tag. The various permutations of the INPUT element allow you to get input in a wide variety of formats, ranging from simple text to a series of Yes and No options. The INPUT element includes several types such as check boxes, password fields, and even an option for a user to upload a file. I’ll go over the most useful of these in the following sections, but here’s the basic way to handle specifying the particulars:



Note that there is no closing tag for the INPUT element. As shown in Figure 8-1, this simple code example results in the elements all lying side by side. To put them all on separate lines for layout purposes, you’d need to add a line break between each pair, like this:







The version with line breaks results in the layout shown in Figure 8-2. For a really neat form layout, try putting its elements into a table (see Chapter 3).

13_560938-ch08.indd 118

5/14/10 8:51 PM

Chapter 8: Adding Forms

119

Figure 8-1: Some basic INPUT types.

Figure 8-2: Separating lines.

13_560938-ch08.indd 119

5/14/10 8:51 PM

120

Part II: Building Better Web Pages Of course, a typical form uses several of the same INPUT types over and over again. You’ll need to give each element a particular name in order to distinguish it from similar elements. Otherwise it would be impossible to tell the difference between (for example) the three text boxes asking for a visitor’s first name, middle initial, and last name. You do this via the name attribute, as you might expect. The example just mentioned would be coded like this:



Typing in text boxes Text boxes are simple, one-line rectangles that typically contain information such as names and addresses, and you’ve got a bunch of options you can specify when it comes to using them. The most obvious of these is setting the length of the text box. This capability enables you to create a more pleasing layout and (incidentally) save space. To expand on the example in the preceding section, you might set the length of the user name text boxes like this:

First Name: Middle Initial: Last Name:

Figure 8-3 shows the results (note that, despite the size limit on the middle initial, both Firefox and Internet Explorer expand it to three characters). The size attribute specifies the number of typed characters, not the number of pixels, and the width of characters depends on the font being used. Of course, when it comes to setting the length, you have to just take your best shot at what will work best. Some last names are five letters long whereas others may be more than 20. Fortunately, the size of the text box doesn’t actually limit the size of the data entered into it. If someone types a 100-character entry into a size 20 text box, all 100 characters will still be entered, and the text will simply scroll as it’s typed.

13_560938-ch08.indd 120

5/14/10 8:51 PM

Chapter 8: Adding Forms

121

Figure 8-3: Limiting the size of text boxes.

But what if the program you’re using to process the data has a limit on the size of the data it will accept? This is a pretty common situation, and you’ll be happy to know that there’s a simple way to handle this problem: You use the maxlength attribute. The following code shows how to adapt our example to accept no more than a particular number of characters:



In this case, the first and last names are limited to 50 characters in length; the middle initial, of course, is set to a single character. If you’re using a form that requires a user to enter a password, it’s customary to use, in the place of a regular text box, a specialized password text box that — you guessed it — you enter by typing this line:

13_560938-ch08.indd 121

5/14/10 8:51 PM

122

Part II: Building Better Web Pages With password text boxes, when a user enters his or her password, a series of asterisks is shown instead of the typed letters, thus protecting the user’s security if someone else is peeking at the screen. That’s the only difference; You use the same options as with regular text boxes. The following code sets up the example shown in Figure 8-4:

User Name:

Password:

Figure 8-4: Regular and password text boxes.

Using text areas There are lots of cases when you’ll want to get some textual data that just doesn’t fit comfortably in a one-line box. Say, for example, that you have an order form where you ask buyers if they have any special instructions. The

13_560938-ch08.indd 122

5/14/10 8:51 PM

Chapter 8: Adding Forms

123

answers you get to such a question may run to several paragraphs rather than just a few words. That’s where text areas come in handy: You can use them to set up a box as wide and as tall as you want. The most important way text areas differ from text boxes is that they are not (as you might normally expect) yet another type of the INPUT element. Instead, you use the TEXTAREA element. This code example shows the difference between the two:

User Name:

Special Instructions:


This specifies a text area with a width of 100 columns and a height of 20 rows, as shown in Figure 8-5. You have to use the end tag!

Choosing radio buttons or check boxes When it comes to basic choices, you’ll want to use check boxes or radio buttons. The round radio buttons (also called option buttons) are used for mutually exclusive choices; the square check boxes are used in situations where several simultaneous choices might be made. For example, if you have a Yes or No situation, you’d use radio buttons, as in the following example (see Figure 8-6):

Yes No

13_560938-ch08.indd 123

5/14/10 8:51 PM

124

Part II: Building Better Web Pages

Figure 8-5: Text box and text area.

The name attribute for radio buttons works differently from other INPUT types. A set of radio buttons has the same name for everything in it; it is the value attribute that specifies the difference between them. That’s because there can be only one answer — if you choose Yes, then there’s no possibility of selecting No, and vice versa. You would choose check boxes if (say) you’re asking whether a user wants to subscribe to various magazines. In that case, the visitor may want to order several (both Time and Newsweek, for example). Here’s how it’s done:

Time

Newsweek

Figure 8-7 shows how this looks on a Web browser.

13_560938-ch08.indd 124

5/14/10 8:51 PM

Chapter 8: Adding Forms

125

Figure 8-6: Radio buttons are mutually exclusive.

Figure 8-7: Check boxes offer nonexclusive choices.

13_560938-ch08.indd 125

5/14/10 8:51 PM

126

Part II: Building Better Web Pages

Setting up SELECT and OPTION What if you have, instead of just a few choices, a whole long list of possible choices, such as which country a visitor is from? Setting up a form with dozens of radio buttons would leave your Web page so cluttered and confusing that nobody would want to fill out the form. Setting up a single SELECT element that has several OPTION elements nested within it, however, lets you add as many choices as you want — in a very small space — by using drop-down menus or list boxes. Here’s a code example that lets visitors choose which continent they’re from:

North America South America Europe Asia Africa Australia Antarctica

The SELECT element is not a type of INPUT element, but a separate one, and both it and the nested OPTION element require closing tags. Figure 8-8 shows how this works. (I’ve added a second copy in the image, not reflected in the preceding example, that shows both the original result — a one-line box with a clickable arrow — and what happens when a user clicks that arrow: The expanded, complete list of options appears.) If you don’t want just a single line as in the preceding example, you can use a list box instead of a drop-down menu. All you have to do is just add one attribute to the SELECT element, called size:

North America South America Europe Asia Africa Australia Antarctica

13_560938-ch08.indd 126

5/14/10 8:51 PM

Chapter 8: Adding Forms

127

Figure 8-8: Selecting continents.

As you can see in Figure 8-9, four of the choices now show instead of just the first one. The other choices that aren’t shown are accessed by scrolling.

Submitting the form After a user is finished filling out the form, the next task is to submit the information so it can be processed. Usually you give the user the means to do this by adding a Submit button at the bottom of the form, like this:

Time

Newsweek



Any value you enter for the Submit button will be displayed, as shown in Figure 8-10, and the size of the button will expand automatically to accommodate it.

13_560938-ch08.indd 127

5/14/10 8:51 PM

128

Part II: Building Better Web Pages

Figure 8-9: Making the menu into a list box with the size attribute.

Figure 8-10: Adding a Submit button.

13_560938-ch08.indd 128

5/14/10 8:51 PM

Chapter 8: Adding Forms

129

Processing the Form You’ve seen how a form is designed and how to submit its contents after a user fills it in, but what do you submit it to? HTML has no form-processing capabilities at all, so you need to send it to an external program for processing. You’d normally, of course, have that program in mind from the very beginning and design the form to mesh with it. Although the various form-processing programs (such as shopping carts) are written in a variety of programming languages, you don’t need to know anything about programming in order to use them. Instead, many of them are hooked up to your Web page by using the Common Gateway Interface (CGI). There’s nothing mystical or particularly difficult about using the CGI, and I give you the basics in the section “Adding CGI Scripts,” later in this chapter. If you’re going to use CGI with your Web pages, first you have to make sure that you have the capability to do so. This sounds obvious, of course, but you may or may not have CGI access for your Web site. CGI access means you can run programs on your Web server that use the Common Gateway Interface, a method of sending form data from a Web page to an external program for processing. Okay, yeah, CGI also stands for Computer-Generated Imagery, referring to the special-effects technology that puts monsters, disasters, and other realistic animations in Hollywood blockbuster movies. The Common Gateway Interface may not be as spectacular, but it sure is handy for Web sites. Nine times out of ten, these programs are kept in a subfolder called cgibin, so your first step is to look to see if you have such a subfolder on your server. If you do, odds are that you have CGI access, because that subfolder doesn’t have any other purpose. If it’s there, go ahead and try to use a CGI program. If you follow all the instructions carefully and the program still doesn’t work, you may need to have a talk with your network administrator or ISP.

Why your ISP often won’t help When your Web site is hosted by the same ISP that you get your Internet access from, you’ll probably find that it’s not too supportive of your desire

13_560938-ch08.indd 129

5/14/10 8:51 PM

130

Part II: Building Better Web Pages to run CGI scripts. There are a couple of reasons for this, which make good sense to your ISP but don’t help you at all: ✓ Badly written programs using CGI can represent a security hazard, poking holes in the normal running of things. Because ISPs want everything to run smoothly and under their control instead of someone else’s, ISPs tend to frown on this possibility. ✓ Most ISPs don’t really care about your Web site. They’re not bad people, but they’re mostly in the business of providing Internet access to their customers, and anything else they have to deal with is just an annoyance that gets in the way of their main job. If your ISP allows you to run CGI scripts, it may be a painful and expensive process on your end. I once had an ISP that wanted to approve the scripts in advance, put them on the server sometime over the next couple of days (it was apparently too much trouble to allow the paying users to access their own files and get the job done instantly), and charge me $25 a pop for doing so. From an ISP’s point of view, that’s reasonable. From my point of view, it was a definite no-go. For starters, I like to do things right away instead of taking days to get around to it. On top of that, you often have to monkey with a CGI script before you get it working just the way you want. Every time I wanted to make a change, it cost another $25 and set me back a couple more days.

Finding a CGI provider Fortunately, many Web space providers do provide you with CGI access. If you live in a city or large town, you can easily shop around and find a new ISP that’s on your side, CGI-wise. If not, thanks to the way the Internet works, you don’t need to deal with your local ISP at all. You can go with a virtual server or other commercial remote Web-space provider (see Chapter 5 for details), or you can easily find free Web-space providers by using the search engine at FreeWebspace.net. Go to the main page at www.freewebspace.net and click the Advanced Free Hosting Search link, or just go straight to www.freewebspace.net/search/power. shtml, as shown in Figure 8-11. In the search form, select the CGI check box under Features. Select any other options you desire, and click the Search button. My test search, using the default options and the CGI check box, came up with 15 free providers that grant CGI access.

13_560938-ch08.indd 130

5/14/10 8:51 PM

Chapter 8: Adding Forms

131

Figure 8-11: FreeWeb space.net’s Advanced Search form can help you find a provider that gives you CGI access.

Using remotely hosted CGI scripts The CGI scripts that you use don’t have to reside on the same server that houses your Web pages. This is good, because CGI scripts are run by the Web server on which the script is located — and using them puts an added load on your server, if that’s where you keep them. If you have lots of visitors, the data-processing demands on your server can be pretty strenuous. If you don’t have your Web site on a dedicated server with plenty of power, things can get really slow. When the script is on someone else’s server, however, you don’t have to worry about the server load. Happily, there are lots of remotely hosted CGI scripts, which means you can still add their capabilities to your own pages while avoiding the server-overload problem. Many of the add-ons in this book are remotely hosted. Free CGI Resources provides free scripts that work via links to its server. (See Figure 8-12.) Check out some of them at www.fido7.com/free-cgi.

13_560938-ch08.indd 131

5/14/10 8:51 PM

132

Part II: Building Better Web Pages

Figure 8-12: Free CGI Resources provides you with CGI scripts that work on its server, not yours.

Adding CGI Scripts A CGI script works by taking input from your Web page and sending that input to an external program for processing. Usually it returns a new Web page that incorporates the results of that processing. The input is most often data from a form, but it can sometimes be just a link that a user clicks to activate the program.

Basic techniques Before you do anything, you have to get the script. Whenever I describe a script in this book, I provide you with the URL of the site from which you can download the script. After you have the script, follow these basic steps to use it: 1. Read the instructions for the script. Let me say that again: Read the instructions. After you’ve worked with a few scripts, it’s tempting to just plunge right ahead without looking. After all, most scripts plug in pretty much the same way, and often you can get away with skipping the instructions.

13_560938-ch08.indd 132

5/14/10 8:51 PM

Chapter 8: Adding Forms

133

Of course, that’s also the cause of about 900 percent of the problems people have with scripts. All it takes is to misunderstand or misinterpret one little setting, and then the whole script won’t work. The instructions are often in the standard ReadMe.txt file. Sometimes, the script doesn’t have a ReadMe file, though, and the instructions are embedded in the text of the script itself in the form of comments. (Comments are notes the programmer adds to provide information; they’re marked so they’re differentiated from the program code and don’t interfere with the running of the program.) 2. Open the script file in a text editor and make any necessary changes so that it works with your particular setup. After you do this, save the modified script. You may, for example, want to add a list of URLs for a link menu, an e-mail address to send a message to, or the location of your site’s main Web page. You don’t have to understand the programming in order to do this little chore. Just follow the instructions and replace the sample values in the script with your own values. If you use a word processor to make the changes, make sure that the script gets saved as plain text and that the original file extension doesn’t get changed. You don’t want a bunch of word-processor formatting codes embedded in the script, which you’ll get if you save the original plain text as, for example, a Microsoft Word .doc file! 3. Add the HTML code that the script’s instructions say to add to your Web page. As with the script, you probably need to change a few sample values to the actual values. The HTML code is usually nothing more than the location of the CGI program, entered as the action attribute of a form. 4. Upload the script and the modified HTML file to your Web server. The HTML file goes in the normal HTML folder, and the script goes into the cgi-bin folder.

Solving problems The basic techniques described in the preceding section work in almost all cases, but in some situations, you may need to modify the script a bit more to get everything working just right. For example, nearly every script you find assumes your cgi-bin directory is called cgi-bin. Yours may be simply named cgi, for example. If that’s the case, you need to change the typical folder references in the script to match your folder name.

13_560938-ch08.indd 133

5/14/10 8:51 PM

134

Part II: Building Better Web Pages You may also find that the standard file extensions, such as .pl for Perl files, aren’t allowed in your CGI setup. In that case, you have to change the file extension to whatever your server demands. A file named search.pl, for example, may need to be renamed search.cgi. If you try to run the script and nothing happens, here are some troubleshooting options: ✓ Go back over the instructions and see if you did anything wrong. Nine times out of ten, it’s something simple but so small and insignificant that it’s easy to overlook. You may have left out a required comma between two values, or forgotten a quotation mark. Perhaps you misspelled the URL of a Web site. Very carefully go over everything you did, and you’ll usually find the problem. ✓ If the script is fine, make sure that you uploaded all the necessary files. Some scripts have data files that you must upload along with them in order for them to work properly. ✓ Check to see that your cgi-bin folder has the correct permissions settings. If you’re not familiar with permissions, ask your ISP to check them for you. ✓ If all else fails, send an e-mail message to the program’s author explaining the nature of the problem and ask for help. Because most of these programs are free, don’t expect too much in the way of technical support. Nobody can afford to both give away programs and spend all their time providing free technical support as well. The best approach is to be polite, perhaps tell the program’s author how much you want to use the program (if you don’t feel that way about it, you haven’t come this far) — and be sure you give all the information you can about the settings you used.

Trying Out Form and Poll Makers Hardly a day passes without someone announcing the results of some kind of poll: “Thirty-two percent of city residents prefer smog.” “The For Dummies nerd’s approval rating climbed by 4 percent in the past week.” “Quantum physics confuses nine people out of five.” For whatever reason, people are fascinated by other people’s feelings about different subjects. And people love to toss in their two bits’ worth whenever they see a survey form. Here are a few common uses for Web-site survey forms: ✓ Feedback on product quality: “How do you rate our new release?” ✓ Opinions on social issues: “Should we pay more attention to threatened species?”

13_560938-ch08.indd 134

5/14/10 8:51 PM

Chapter 8: Adding Forms

135

✓ Preferences between political candidates: “Do you plan to vote Democrat, Republican, or Independent?” ✓ Requests for new site features: “Check the services you want us to add.” It’s not just polls, though. The amount and variety of information gathered via forms on the Web are staggering. Visitor information, prospect inquiries, and product orders are only a few uses of forms. If the idea of using forms interests you, but you’re not comfortable with the CGI — that’s short for Common Gateway Interface — you may want to try out some of the form makers and processing services described in this section. A tremendous amount of overlap exists between the folks who offer free forms and those who offer form-processing services. Many of the form makers also provide CGI services, although they usually limit them to servicing their own custom forms. A pure form-processing service, however, handles forms that you create on your own. This type of service gives you much more control and power over your Web site’s content.

Response-O-Matic Response-O-Matic — which you can find (predictably) at www.response-omatic.com on the Web — is one of the best form-processing firms around, and it gives you tremendous flexibility. It handles any form you want to throw at it. Well, okay, it does have a few restrictions. But they’re minimal and reasonable. You can’t, for example, transmit more than 50K of data with one form submission. That’s plenty, however, with scads and bunches to spare. The questions that you add to the form are up to you, but they require a bit of HTML knowledge. (If you’re totally at sea when it comes to HTML, try Freedback.com instead.) To create a form by using Response-O-Matic’s service, follow these steps: 1. Go to www.response-o-matic.com and then click the Get Started button. 2. On the Sign Up page (see Figure 8-13), enter your name, e-mail address, and a password. 3. Click the Sign Up button. You get an e-mail message asking you to confirm your account creation. Click the link in it. 4. The resulting Form Builder page, shown in Figure 8-14, has a rudimentary form that asks for only a name and an e-mail address. Don’t fill in the information — it’s just part of the form you’re building for someone else to fill in.

13_560938-ch08.indd 135

5/14/10 8:51 PM

136

Part II: Building Better Web Pages

Figure 8-13: Entering your data.

Figure 8-14: Adding form elements.

13_560938-ch08.indd 136

5/14/10 8:51 PM

Chapter 8: Adding Forms

137

5. If you don’t want those two form elements, click the Delete link to the left of each of them. 6. To add other elements, click the Add a Question link. 7. In the Choose a Question Type box (see Figure 8-15), select the desired kind (check box, radio button, and so on).

Figure 8-15: Adding new form elements.

Figure 8-16 shows the results of selecting the Short Answer option. 8. Enter the question you want to ask. If an answer is absolutely necessary, select the Required check box. 9. Click the Save button. Figure 8-17 shows the result. 10. When you’re satisfied with your form, click the Save and Continue to Step 2 button.

13_560938-ch08.indd 137

5/14/10 8:51 PM

138

Part II: Building Better Web Pages

Figure 8-16: Selecting the Short Answer option.

Figure 8-17: The question appears on the form.

13_560938-ch08.indd 138

5/14/10 8:51 PM

Chapter 8: Adding Forms

139

11. On the Form Options page, shown in Figure 8-18, select whether to have your form users sent to your site or to the all-purpose Thank You page at Response-O-Matic. If you choose the Thank You page, you then see a box in which you can enter your Web site’s address, which will be displayed on the Thank You page. You can also select an option to show the form results on that page. 12. Under Email, it is advisable to select the check box to have the form submissions e-mailed to you. You’ll get to enter a subject for the form e-mails you’ll receive. 13. Click the Save and Continue to Step 3 button. 14. On the resulting Get HTML page (see Figure 8-19), copy the code and then paste it into your own Web page.

Figure 8-18: The Form Options page gives you more choices.

13_560938-ch08.indd 139

5/14/10 8:51 PM

140

Part II: Building Better Web Pages

Figure 8-19: The code is available for copying and pasting.

FormSite.com FormSite.com (www.formsite.com) is another form maker that, in addition to creating a variety of general forms, has a specific survey form service. Like Response-O-Matic (described earlier in the chapter), the service is free if you accept its accompanying advertising — or you can pop for a few bucks to get rid of the advertising banners and pick up some extra features, such as secure forms. To create a form with FormSite.com, follow these steps: 1. Go to www.formsite.com. 2. Click the Sign Up Free button. 3. Type a username and a password in the appropriate text boxes on the User Profile form, shown in Figure 8-20. You can optionally provide your e-mail address.

13_560938-ch08.indd 140

5/14/10 8:51 PM

Chapter 8: Adding Forms

141

Figure 8-20: FormSite. com’s User Profile page, your starting point for creating your survey.

4. Click the I Agree, Create Account button. 5. When the next page opens, click the New Form button (see Figure 8-21). 6. On the resultant New Form Web page, shown in Figure 8-22, type the name of your form in the — you guessed it — Name text box. 7. To use a predesigned template, select the option button next to the survey template that most closely resembles the one you want to create. 8. To start from scratch, select the From a Blank Form radio button; then click the Create button. 9. On the next page (shown in Figure 8-23), drag items from the left and drop them into the white box above the Preview button. To access more options, click the categories (such as Formatting Items). Figure 8-24 shows the results of adding the Image form element. To add an image to the form, click the Upload button. Among the available options, alternate text (shown in a Web browser if the image is unavailable) can be added, and you can make the image a clickable link by supplying a connecting URL.

13_560938-ch08.indd 141

5/14/10 8:51 PM

142

Part II: Building Better Web Pages

Figure 8-21: Click the New Form button.

New Form button

Figure 8-22: Creating a new form.

13_560938-ch08.indd 142

5/14/10 8:51 PM

Chapter 8: Adding Forms

143

Figure 8-23: Selecting a new form element.

Figure 8-24: Setting the options for an element.

13_560938-ch08.indd 143

5/14/10 8:51 PM

144

Part II: Building Better Web Pages 10. When you’re satisfied with your choices, click the Save button to add the element to your form. 11. When the form is completed, click the Publish link at the top of the page. 12. On the resulting Web page, select the HTML radio button under Form Link. Depending on the requirements of your particular Web page, there are various other choices you can make other than HTML. You can, for example, scroll down and copy a JavaScript version. 13. Copy the HTML code and paste it into your own Web page.

Online Sources for CGI and Forms Table 8-1 lists some places on the World Wide Web where you can find more information on the topics covered in this chapter.

Table 8-1

13_560938-ch08.indd 144

Online Resources for Scripts and Applets

Web Site Name

Web Address

CGI Resource Index

www.cgi-resources.com

CGI: Why Things Don’t Work

www.raingod.com/raingod/resources/ Programming/Perl/Notes/CGIDebugging.html

Freewarejava.com

www.freewarejava.com

Intro to CGI

www.mattkruse.com/info/cgi

Java Boutique

www.javaboutique.internet.com

JavaScript Kit

www.javascriptkit.com

Perl Primer

www.webdesigns1.com/perl

WDVL: The Perl You Need to Know

www.wdvl.com/Authoring/Languages/Perl/ PerlfortheWeb

5/14/10 8:51 PM

Part III

Adding Frills and Fancy Stuff

14_560938-pp03.indd 145

5/14/10 8:52 PM

H

In this part . . .

ere you discover a ton of ways to make your site work, look, and sound great. Chapter 9 painlessly introduces you to the wonderful world of JavaScript; Chapter 10 walks you through adding image-based buttons and image maps. Chapter 11 introduces you to the world of Web multimedia. Chapter 12 covers the hottest thing going in generated content: blogging.

14_560938-pp03.indd 146

5/14/10 8:52 PM

Chapter 9

Exploring JavaScript and DHTML In This Chapter ▶ Understanding programming basics ▶ Creating JavaScript functions ▶ Adding JavaScripts to your pages ▶ Using the Document Object Model ▶ Adding interactivity

F

irst off, forget any fears you might have about “being a computer programmer!” The processes I talk about in this chapter are things that anyone could do; in fact, they’re largely the same kinds of things you already do on a daily basis, but just don’t realize are basically the same as what programmers think about all the time. When you use that programming mindset to create Web pages, JavaScript gives you an advantage: It’s not only specifically designed for use on Web pages, but because it’s also one of the simplest programming languages around, you’ll find it much easier to learn than some of the more complex languages (like C++). Combining JavaScript with HTML creates a further advantage that goes by the name DHTML (or Dynamic HTML). DHTML is “dynamic” because it allows you to add a high degree of interactivity — making your Web pages not just a static grouping of words and images, but a highly entertaining and useful experience for your visitors.

Principles of Programming A computer program is nothing more than a list of steps for the machine to follow when trying to complete some task. You already do that sort of thing for yourself during the normal course of your life, whether you realize it or not. If you set out to accomplish something as common as taking your children to visit the community swimming pool, you have to consider a whole

15_560938-ch09.indd 147

5/14/10 8:53 PM

148

Part III: Adding Frills and Fancy Stuff variety of options: You have to make sure that they have the right kind of clothing (one kind of variable), that they understand the rules of using the pool (a set of constants), and so on. So, let’s set aside all your preconceived notions about how difficult it is to “do” programming — and admit at the outset that you’ve already been programming all your life. That said, there’s a caveat (my editor promised me I could use at least one Latin word in this book). That means “beware” — you need to pay careful attention to getting your JavaScript just right. I mean, if you dress your kid wrong for the pool, your life doesn’t crash the way a computer program will. The difficulty with programming is that the computer is inflexible and understands no shades of gray. It takes effort and experience to think with the ruthless logic of a computer. However, if you follow the instructions in this chapter, you’ll be well on your way to mastering that skill.

Constants and variables There are two kinds of values you’ll be using in JavaScript (or in any other kind of computer programming): constants (values that never change) and variables (which change depending on the circumstances). The first kind is like the dates of Christmas Eve or New Year’s Eve — these will always fall on the 24th and the 31st of December, no matter what else is going on. The latter, however, are like Easter — which might fall on a different day in a particular year depending on the circumstances. The first thing you have to do with a variable is to define it; no variable can have any value unless, of course, that variable actually exists first. As you’d imagine, this is a fairly simple affair: To establish that a particular variable exists, you simply declare that this is so by adding a line like this to your JavaScript: var thisvariableexists If you want to assign a starting value to a variable at the same time that you declare it to exist, the process is just a tad different: var thisvariableexists=1 This line of code both declares the existence of a variable called thisvariableexists and assigns to it a value of 1. You actually don’t have to use the var part at all. Most Web browsers will understand what you mean if you just say thisvariableexists=1. Even so, it’s good programming practice to specify exactly what you mean rather than just leaving things to chance (and maybe hoping that, years later, you’ll remember exactly what you meant by some nonstandard usage).

15_560938-ch09.indd 148

5/14/10 8:53 PM

Chapter 9: Exploring JavaScript and DHTML

149

You’ll probably want to use lots of comments or notes of just exactly what you meant when you entered certain lines of code. To do so in a JavaScript situation, all you have to do is to use the figures // at the beginning of a line of code, as in the following example: //This is a JavaScript comment. Normally that’s all you need to do — just the double slash lines with nothing more. However, if a comment requires more space than one line can provide, you’d use opening and ending tags to specify it, as in the following example: /*This is an example of JavaScript code that exceeds several lines. */ The opening and ending tags, of course, would be /* and */. Even if a value will never vary (in which case it’s not technically a true variable) — the date of New Year’s Eve, for example — you can still assign that value with a var declaration. Variables can have one of three value types, and those types influence the kinds of calculations that you can perform based upon them. The first type (that we’ve already dealt with) is the numeric kind. Numeric values, as their name implies, are nothing more than numbers: 31 for the end of December, 12 for that month, and so on. Strings, however, are composed of textual values rather than numerical ones, and a string (of letters) can have any value that human languages may impute to it. Thus the string value “December” may have many more possible interpretations than merely that it is 12th in a series of 12. Depending upon the particular application involved in interpreting that string, it may mean anything from “the month in which Christmas and Hanukkah occur” to “the time when winter begins.” In addition to numerical or string values, you’ll have to deal with Boolean values. This sounds like a fearsome thing, but all it really means is whether something is or isn’t logically true. (By the way, everything in computing revolves around this concept; the simplest possible computer program is one that tells whether or not a light bulb is lit, and the most complex conceivable 3D graphics software is merely a descendant of this sort of statement.) String values, unlike their numeric or Boolean equivalents, are always enclosed within quotation marks.

15_560938-ch09.indd 149

5/14/10 8:53 PM

150

Part III: Adding Frills and Fancy Stuff

Doing the math You’ll often need to compare two values for various reasons. Some of these include: ✓ Seeing which value is higher or lower. ✓ Determining whether a value entered by a user is different from what was expected (for example, letters instead of numbers). ✓ Taking a particular action based upon the value. To compare two values to see whether they’re equal, you use the equality operator, or == (that’s two equal signs, not one). Table 9-1 gives the most commonly used comparison operators.

Table 9-1

Comparison Operators

Operator

Function

==

Equal to

!=

Not equal to




Greater than

=

Greater than or equal to

Of course, you’ll have to perform some mathematical operations along the way. Table 9-2 shows the symbols you use to do them.

15_560938-ch09.indd 150

Table 9-2

Math Operators

Operator

Function

+

Addition

-

Subtraction

*

Multiplication

/

Division

++

Increment (add one to)

--

Decrement (subtract one from)

5/14/10 8:53 PM

Chapter 9: Exploring JavaScript and DHTML

151

In addition to the obvious numerical comparisons, you also need to manage logical comparisons, basically asking whether something is logically true or false. You form these comparisons by using three operators (shown in Table 9-3).

Table 9-3

Logical Operators

Operator

Function

&&

AND

||

OR

!

NOT

The AND operator compares two things and returns an answer of true if they’re both true and false if one or both are different. The OR operator returns a value of true if either value is logically true. NOT, as you might imagine, tests whether the reverse of the value in question is true.

Branches You really can’t do much programming without branching. As the name implies, this is the point where the program flow can follow one path or another. It’s a pretty simple situation, really. Let’s say you’re going to the grocery; you might intend to buy Cokes, but find that they’re out of stock, so you buy 7-Up instead — that’s branching. Here’s what it looks like: if (drinks==Cokes) { buyThem; } else { buy7Up; }

Loops A loop is pretty much what it sounds like — running around in circles. The reason for doing this is to wait for something to happen before proceeding with the rest of the steps in a program.

15_560938-ch09.indd 151

5/14/10 8:53 PM

152

Part III: Adding Frills and Fancy Stuff The following example sets up a loop that writes a number called count on a Web page, and then checks to see whether that number is less than or equal to 10. Since the variable count begins by being assigned a value of 1, the loop will continue to run until all the numbers from 1 to 10 have been written: for (var count=1; count (greater than) operator, 150 >= (greater than or equal to) operator, 150 ++ (increment) operator, 150 < (less than) operator, 150 ) operator, 150 greater than or equal to (>=) operator, 150 Guerilla Marketing Online, 230 Guide to Cascading Style Sheets, 92

•H• H1 element B element within, 80 font, 78 for main headline, 21 redefining, 78–79 size, 20, 78 H2 element, 20–21 H6 element, 20 hardcopy, 313 HEAD element classes in, 77 in HTML element, 18 placement, 19 SCRIPT element in, 153, 154 use example, 42–43 headings defined, 20 elements, 20–21 HTML, 20–21 in section designation, 21 sizes (CoffeeCup), 51

5/14/10 9:02 PM

Index tags example, 21 types of, 20 use illustration, 21 height attribute, 32–33 high-risk, 264, 313 HitExchange, 230 hits, 313 home pages, 313 horizontal rules attributes, 23–24 defined, 23, 314 function of, 23 illustrated, 24 size, 24 width, 23 HostIndex, 62–63 hosting dedicated server, 61 finding, 62–63 free, 63–64 indexes, 62–63 ISP, 60 online resources, 68–69 types of, 59–60 virtual server, 60–61 HostReview, 62 HotDog PageWiz, 57 How to Redesign Your Website to Play to Your Audience (CIO Magazine), 252 HR element, 23–24 href attribute, 26 HTML (HyperText Markup Language) attributes. See attributes color, 25 content, 18 defined, 17, 314 elements. See elements fonts, 22–23 headings, 20–21 images, 26–29 lines, 23–25 links, 26 merging CSS and, 74–76 paragraphs, 19–20 resource, 17 sizing images in, 114–115 specifications, 18 tags. See tags Web page example, 29–30 HTML, XHTML & CSS For Dummies (Tittel and Noble), 17

28_560938-bindex.indd 333

333

HTML Editor (CoffeeCup), 178 HTML editors, 314 HTML element contents, 18 use example, 42–43 HTTP (HyperText Transfer Protocol), 314 HumanClick, 288, 289 hyperlinks. See links hypertext, 314 HyperText Markup Language. See HTML HyperText Transfer Protocol (HTTP), 314

•I• IANA (Internet Assigned Numbers Authority), 69 ICANN (Internet Corporation for Assigned Names and Numbers), 68–69, 315 icons, this book, 4 id method, 78 Image Effects dialog box (IrfanView), 111–112 Image Mapper (CoffeeCup) accessing, 179 Alt Text, 180 Area Properties, 180–181 clickable area, 179–180 defined, 178 geometric figure selection, 179 image maps creating, 177–182 defined, 177, 314 examples, 177 geometric figure selection, 179 mouseover text, 181–182 naming, 179 online resources, 182 outlining, 179–180 saving, 182 image repositories, 115, 314 Image Web Buttons, 182 ImageMapper Wizard (CoffeeCup), 178–179 image-mapping features, 178 programs, 177 images adding (CoffeeCup), 53–54 background, 28–29 basic design with, 112–115 colors, adjusting, 109–111 copyrights, 95–96 creating, 96–97 credits, 95–96

5/14/10 9:02 PM

334

Building a Web Site For Dummies, 4th Edition images (continued) cropping, 107–108 defined, 314 design guidelines, 113 editing, 105–112 file size, trimming, 98–101 flipping, 109 free, obtaining, 95–96 graphics file formats, 97–98 HTML, 27–28 logos, 101–105 online resources, 115 placing, 112–114 resizing, 106–107, 115 rotating, 108–109 sizing in HTML, 114–115 sources, 26–27 special effects (GIFWorks), 101 special effects filters (IrfanView), 111–112 uploading (GIFWorks), 99 IMG element background images and, 28 src attribute, 27 use examples, 27 increment (++) operator, 150 indentation styles (CoffeeCup), 86 Infobel World Telephone Directories, 235 InfoSpace Yellow Pages, 235 inline styles, 74 input. See also forms check boxes, 124–125 drop-down menus, 126–128 list boxes, 126–128 radio buttons, 123–125 text areas, 122–123 text boxes, 120–122 types, 118 types illustration, 119 INPUT element maxlength attribute, 121 name attribute, 120, 124 size attribute, 120 type specification, 118 Insert Image dialog box (CoffeeCup), 53–54 Insert Link dialog box (CoffeeCup), 51–52 Instant Check, 271 InterBanks, 314 Internet access, 314 defined, 314 etiquette (netiquette), 317

28_560938-bindex.indd 334

Internet Assigned Numbers Authority (IANA), 69 Internet commerce. See also e-commerce tools attitude towards, 232–233 business focus, 233–234 designing for, 237–238 FAQ, 252 future of, 233 major general retailers, 233 online resources, 252 potential buyer needs, 237–238 promise of, 231 search functions, 238–252 specialization, 233 success secret, 232–236 suppliers, 234–237 Internet Corporation for Assigned Names and Numbers (ICANN), 68–69, 315 Internet Explorer, testing scripts in, 155 Internet service providers. See ISPs interpolation, 106 interpret, 315 intranets, 315 Intro to CGI, 144 Introduction to Blogging, 210 IP addresses, 315 IrfanView color enhancement, 111 color reduction, 110 cropping images with, 107–108 defined, 105 grayscale conversion, 110–111 resizing images with, 106–107 special effects filters, 111–112 ISPs CGI script support and, 129–130 defined, 315 as Web space provider, 60 italic, 22

•J• Java, 315 Java & XML For Dummies (Burd), 156 Java Boutique, 144 JavaScript clicks, 158 constants, 148–149 defined, 315 drop-down lists, 159–160

5/14/10 9:02 PM

Index event handlers, 157–158 events, 156–159 functions, creating, 152–153 keyboard input, 158–159 mouseovers, 158 online resources, 166–167 problems, 155 scripts, incorporating, 153–155 scripts, testing, 155 variables, 148–149 JavaScript For Dummies (Vander Veer), 158 JavaScript Kit, 144, 167 JavaScript Source, 153–154, 167 JavaScript Tutorial, 167 JPEG (Joint Photographic Experts Group), 97–98, 315

•K• keyboard events, 158–159 keyboard-based JavaScript event handlers, 157 KeyDown event, 159 KeyPress event, 156–157, 159 KeyUp event, 156, 159 Keyword Extractor, 220–221 keywords. See also search sites advertising, 221–222 analyzing, 219–221 in CoffeeCup, 50 defined, 315 incorporating into site, 217–218 list of, 216–217 META, 216–217 spelling errors and, 217 trickery, 218–219 Keywords Analysis Tool, 219–220

•L• LawGuru.com, 280–281 layers absolute positioning, 90–91 concept, 89–90 defined, 89 relative positioning, 91–92 less than (