Element. . Saving Work with Contextual Selectors.
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Chapter 7: Adding Graphics. . . . . . . . . . . . . . . . . . . . . . . 183 Understanding Images. . . . . . . . . . . . . . The
Element. . . . . . . . . . . . . Alternate Text.. . . . . . . . . . . . . . . . Picture Size. . . . . . . . . . . . . . . . . . File Formats for Graphics. . . . . . . . . . Putting Pictures on Colored Backgrounds. . Images and Styles.. . . . . . . . . . . . . . . . Inline Images in Text. . . . . . . . . . . . . Borders. . . . . . . . . . . . . . . . . . . . Wrapping Text Around an Image. . . . . . Adding Captions. . . . . . . . . . . . . . . Background Images. . . . . . . . . . . . . Techniques with Graphics.. . . . . . . . . . . . Graphical Text. . . . . . . . . . . . . . . . Backgrounds for Other Elements. . . . . . Graphical Bullets in a List. . . . . . . . . . Finding Free Art. . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Chapter 8: Linking Pages. . . . . . . . . . . . . . . . . . . . . . . . . 213 Understanding the Anchor. . . . . . . . . . Internal and External Links.. . . . . . . Relative Links and Folders. . . . . . . . Changing Link Colors and Underlining. Mailto Links.. . . . . . . . . . . . . . . Image Links and Image Maps. . . . . . . . Adding Bookmarks. . . . . . . . . . . . . . When Good Links Go Bad. . . . . . . . . . Site Management.. . . . . . . . . . . . Link Checkers.. . . . . . . . . . . . . . Using Redirects. . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Chapter 9: Page Layout.. . . . . . . . . . . . . . . . . . . . . . . . . 239 The Challenge of Screen Space.. . . . . . . . . Style-Based Layout. . . . . . . . . . . . . . . . Structuring Pages with the
Element.. Floating Boxes. . . . . . . . . . . . . . . . Fixed Boxes.. . . . . . . . . . . . . . . . . Creating a Layout with Multiple Columns. . . . Building a Fixed-Width Layout. . . . . . . . Creating a Resizable Layout. . . . . . . . . Maximum Width: The Safety Net. . . . . . viii
table of contents
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
239 243 243 244 245 246 247 250 252
Stretching Column Height. . . . . . . . . . . . Super-Flexible Sites: The Zen of Web Design. . A Few More Layout Techniques. . . . . . . . . . . Layering. . . . . . . . . . . . . . . . . . . . . Combining Absolute and Relative Positioning.. Sizing Tables. . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
254 256 257 258 259 261
Chapter 10: Multipart Pages. . . . . . . . . . . . . . . . . . . . . . . 267 Understanding Multipart Pages.. . . . Server-Side Includes. . . . . . . . . . Page Templates. . . . . . . . . . . . . Understanding Page Templates. . Creating a New Page Template. . The Anatomy of a Page Template. Using a Page Template. . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
267 269 272 273 275 276 279
Chapter 11: Introducing Your Site to the World. . . . . . . . . . . 283 Your Website Promotion Plan. . . . . . . . . . Making Your Site Search-Engine Friendly. . . . Choose Meaningful Page Titles. . . . . . . Include a Page Description.. . . . . . . . . Supply Alternate Text for All Your Images. . Use Descriptive Link Text.. . . . . . . . . . Don’t Try to Cheat. . . . . . . . . . . . . . Registering with Directories.. . . . . . . . . . . The Open Directory Project. . . . . . . . . The Yahoo Directory. . . . . . . . . . . . . Registering with Search Engines. . . . . . . . . Rising Up in the Search Rankings. . . . . . Hiding from Search Engines. . . . . . . . . The Google Webmaster Tools. . . . . . . . Tracking Visitors.. . . . . . . . . . . . . . . . . Understanding Google Analytics.. . . . . . Signing Up for Google Analytics. . . . . . . Examining Your Web Traffic. . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
284 285 285 287 288 289 289 290 290 293 294 296 297 299 302 303 305 307
Chapter 12: Website Promotion.. . . . . . . . . . . . . . . . . . . . 315 Spreading the Word. . . . . . . . . . . Shameless Self-Promotion. . . . . . Google Places. . . . . . . . . . . . Google AdWords. . . . . . . . . . . Return Visitors. . . . . . . . . . . . Transforming a Site into a Community.. Fostering a Web Community.. . . . Website Community Tools. . . . . . Email Newsletters. . . . . . . . . . Twitter. . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
316 316 317 319 320 322 322 323 325 327
table of contents
ix
Groups. . . Facebook. .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
329 339
Chapter 13: Blogs. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 349 Understanding Blogs. . . . . . . . . . . . . . . Popular Blogs.. . . . . . . . . . . . . . . . Syndication. . . . . . . . . . . . . . . . . . Blog Hosting and Software.. . . . . . . . . Getting Started with Blogger. . . . . . . . . . . Creating a Blog. . . . . . . . . . . . . . . . Creating Formatted Posts. . . . . . . . . . Managing a Blog. . . . . . . . . . . . . . . . . Tweaking Common Settings. . . . . . . . . Configuring Your Blogger Profile.. . . . . . Giving Your Blog a Custom Domain Name. Customizing Your Template. . . . . . . . . Managing Comments. . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
350 351 353 356 357 358 363 365 368 370 372 373 379
Chapter 14: Making Money with Your Site. . . . . . . . . . . . . . 383 Money-Making the Web Way.. . . . Google AdSense. . . . . . . . . . . Signing Up for AdSense. . . . . The AdSense Interface. . . . . . Creating an Ad. . . . . . . . . . Placing Ads in Your Web Pages. Google-Powered Searches. . . . Amazon Associates. . . . . . . . . . Signing Up As an Associate. . . Generating Associate Links.. . . PayPal Merchant Tools. . . . . . . . Signing Up with PayPal.. . . . . Accepting Payments. . . . . . . Building a Shopping Cart.. . . . Withdrawing Your Money. . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
384 385 387 389 390 396 399 403 404 405 411 412 413 419 421
Chapter 15: JavaScript: Adding Interactivity. . . . . . . . . . . . . 423 Understanding JavaScript.. . . . . . . . . . . . Server-Side and Client-Side Programming. Scripting Languages. . . . . . . . . . . . . JavaScript 101. . . . . . . . . . . . . . . . . . . The <script> Element.. . . . . . . . . . . . Variables. . . . . . . . . . . . . . . . . . . Functions. . . . . . . . . . . . . . . . . . . External Script Files.. . . . . . . . . . . . . Dynamic HTML. . . . . . . . . . . . . . . . . . HTML Objects. . . . . . . . . . . . . . . . Events.. . . . . . . . . . . . . . . . . . . . x
table of contents
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
423 424 425 426 426 431 434 439 440 440 446
Image Rollovers. . . . . Collapsible Text.. . . . . Interactive Forms.. . . . Scripts on the Web. . . . . . Finding a Simple Script.. JavaScript Libraries.. . . Web Widgets. . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
449 450 453 459 460 462 463
Chapter 16: Fancy Buttons and Menus.. . . . . . . . . . . . . . . . 465 Fancy Buttons. . . . . . . . . . . . . . . Creating Your Button Pictures. . . . Making a Rollover Effect with CSS. . Picture-with-Text Buttons.. . . . . . Picture-less Buttons. . . . . . . . . Fancy Menus. . . . . . . . . . . . . . . Do-It-Yourself Collapsible Menus. . Third-Party Menus. . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
465 467 469 472 474 475 476 481
Chapter 17: Audio and Video. . . . . . . . . . . . . . . . . . . . . . 487 Understanding Multimedia. . . . . . . . . . . . . . Linking, Embedding, and Hosting. . . . . . . . Types of Multimedia Files. . . . . . . . . . . . Basic Background Music. . . . . . . . . . . . . . . The <embed> Element.. . . . . . . . . . . . . Embedded Audio Options. . . . . . . . . . . . Flash MP3 Players.. . . . . . . . . . . . . . . . . . The Premiumbeat Player: Playing a Song List. . The Yahoo Player: Playing All Your Links. . . . Flashtrak Loops.. . . . . . . . . . . . . . . . . Video Clips. . . . . . . . . . . . . . . . . . . . . . Preparing Video. . . . . . . . . . . . . . . . . Linking to and Embedding Video. . . . . . . . Flash Video. . . . . . . . . . . . . . . . . . . . Video in HTML5. . . . . . . . . . . . . . . . . Uploading Your Videos to YouTube.. . . . . . . . . Signing Up with YouTube.. . . . . . . . . . . . Preparing a Video. . . . . . . . . . . . . . . . Uploading a Video. . . . . . . . . . . . . . . . Watching a Video.. . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
488 488 489 492 492 494 495 495 498 500 502 502 504 505 506 507 508 508 509 512
Appendix A: HTML Quick Reference. . . . . . . . . . . . . . . . . . 515 Appendix B: Useful Websites. . . . . . . . . . . . . . . . . . . . . . 543 Index. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 551
table of contents
xi
Introduction
T
hese days, it’s all but impossible to find someone who hasn’t heard of the Internet. Companies create websites before they make business plans. Political activists skip the debates and trash-talk their opponents online. Even formerly technophobic grandmothers spend hours emailing old friends (and selling the odd family heirloom on eBay). The Internet has even changed our language: Google and friend are now verbs, for example, and tweet has nothing to do with birds.
As you no doubt know, you can establish a web presence in many ways. You can chat with friends through a Facebook page, share pictures with like-minded photographers on Flickr, put your home videos on YouTube, or write short diary-style blurbs on a blog hosted by a service like Blogger. But if you’re ambitious enough to have picked up this book, you’re after the gold standard of the Web: a bona fide website to call your own. So what can you accomplish with a website that you can’t do with email, social networking, and other web-based services? In a word: anything. Is your personal website just a permanent place to stash your résumé or the hub of an e-commerce warehouse that sells personalized underpants? (Hey, it’s made more than one millionaire.) The point is that a website of your own gives you the power to decide exactly what it is—and the control to change everything on a whim. If you’re already using other web-based services, like YouTube and Facebook, you can make them a part of your website, as you’ll learn in this book. For example, why not put the YouTube videos of your cat playing pool right inside your website, next to your personalized cat merchandise? Of course, with great power comes great responsibility—meaning that if you decide to build your own site, it’s up to you to make sure it doesn’t look as hokey as a 1960s 1
chapter
1
Preparing for the Web
T
he Web is an exciting place. Every day, it processes millions of financial transactions, serves up the latest news and celebrity gossip, and provides a meeting place for every type of community from political anarchists to vampire-show fans. Since you’re reading this book, you’ve probably decided to move in and join the Web. Congratulations! Just as you undertake some basic planning before you find a home in the real world, you need to do some preparation before you make the move to your new online neighborhood. In this chapter, you’ll get a good look at how the Web works, and learn what ingredients you need to build your own website.
Introducing the World Wide Web Although it doesn’t show its age, the Internet is older than you might think. The computer visionaries who created it began developing the idea in the early 1960s. In 1969, the first transmission over the Internet took place, between a computer at the University of California at Los Angeles and one at the Stanford Research Institute. As far as pioneering moments go, it wasn’t much to brag about—the computer crashed when it reached the G in the word “LOGIN.” Still, the revolution was underway. The early Internet was traveled mostly by academic and government types. It flourished as a tool for research and collaboration, letting scientists everywhere share information. In 1993, the first web browser hit the scene. In the following years, new types of people colonized the Internet, including book shoppers, news junkies, hobbyists, and a lot of lonely computer programmers.
7
chapter
2
Creating Your First Page
W
eb pages are the basic unit of a website, and every website is a collection of one or more pages. The ideal web page contains enough information to fill the width of a browser window, but not so much that readers need to scroll from morning until lunchtime to get to the page’s end. In other words, the ideal page strikes a balance: It avoids the lonely feeling caused by too much white space, as well as the stress induced by an avalanche of information. The best way to get a handle on what a web page should hold is to look at your favorite websites. A news site like www.nytimes.com displays every news article on a separate page (and subdivides longer stories into several pages). At an e-commerce shop like www.amazon.com, every product has its own page. Similarly, a personal website like www.MyUndyingLoveForPigTrotters.com could be divided into separate web pages with titles like “About Me,” “Vacation Photos,” and “Top-Secret Recipes for Pig Parts.” For now, don’t worry too much about how to divide your website into pages; you’ll revisit that task in Chapter 8 when you start linking pages together. Instead, your first goal is to understand how a basic web page works and how to create one of your own. That’s what you’ll do in this chapter. On the way, you’ll learn the essential details of the most important standard in website design: HTML.
Introducing HTML: The Language of the Web Web pages are written in HTML (HyperText Markup Language). It doesn’t matter whether your page contains a series of text-only blog entries, a dozen pictures of your pet lemur, or a heavily formatted screenplay—odds are that, if you’re looking at it in a browser, it’s an HTML page. 19
chapter
3
Putting Your Page on the Web
I
n the previous chapter you learned the basics of HTML by creating a simple onepage résumé. You can do a lot more to perfect that page, but before going any further, pause a moment to consider one of the most important pieces of the web puzzle: getting your pages online. In this chapter, you’ll learn how web servers work and how you can put them to work for you. Once you’re armed with these high-tech nerd credentials, you’ll be ready to search for your own web host, a company that lets you park your site on its web server. All you need to do is figure out your requirements, see which hosts offer what you need, and start comparison shopping.
How Web Hosting Works As you learned in Chapter 1, the Web isn’t stored on any single computer, and no company owns it. Instead, the individual pieces (websites) are scattered across millions of computers (web servers). Only a subtle illusion makes all these sites seem part of a single environment. In reality, the Internet is just a set of standards that let independent computers talk to each other. So how does your favorite browser navigate this tangled network of computers to find just the web page you want? It’s all in what’s known as the URL (Uniform Resource Locator)—which is simply the website address you type into your browser, like www.google.com.
49
chapter
4
Power Tools
I
n Chapter 2, you built your first HTML page with nothing but a text editor and a lot of nerve—the same way all web-page whiz kids begin their careers. To really understand HTML (and to establish your HTML street cred), you need to start from scratch. However, very few web authors stick with plain-text editors or use them to create anything other than simple test pages. The average HTML page is filled with tedious detail. Try to write every paragraph, line break, and formatting tag by hand, you’ll probably make a mistake somewhere along the way. Even if you don’t, it’s hard to visualize a finished page when you spend all day staring at angle brackets. This is especially true when you tackle more complex pages, like those that introduce graphics or use multicolumn layouts. The downside to outgrowing Notepad or TextEdit is the expense. Professional web design tools can cost hundreds of dollars. At one point, software companies planned to include basic web editors as part of operating systems like Windows and Mac OS. In fact, some older versions of Windows shipped with a scaled-down web editor called FrontPage Express. (Most Macs include a severely truncated editor called iWeb, which limits you to ready-made templates and doesn’t let you touch a line of HTML.) But if you want a full-featured web page editor—one that catches your errors, helps you remember important HTML elements, and lets you manage your entire site—you have to find one on your own. Fortunately, there are free alternatives for even the most cash-strapped web weaver. In this chapter, you’ll learn how web page editors work and how to evaluate them to find the one that’s right for you. You’ll also tour some of the better free and shareware offerings out there. Most web page editors are surprisingly similar, so this chapter
77
chapter
5
Text Elements
G
etting text into a web page is easy. You just open up an HTML file, drop in your content, and add the occasional HTML tag to format that content. But getting text to look exactly the way you want is a different story.
Before you can make your web pages look pretty, you need to put in a bit of organization work. In this chapter, you’ll get the first tool you need: the HTML elements that let you break masses of text into neatly separated headings, paragraphs, lists, and more. You put several of these elements at work in the résumé examples in Chapter 2, but now you’ll tour the HTML workshop to see everything it has to offer. Once you finish this step, you’ll be ready for the next chapter, where you learn to format your carefully structured content with style sheets—powerful page-formatting instructions that let you change the appearance of individual elements, entire web pages, and even your complete website.
Understanding Text and the Web Sooner or later, every website creator discovers that designing for the Web is very different from designing something that’s going to be printed. Before you can unleash your inner web-page graphic designer, you need to clear a few conceptual hurdles. Consider the difference between an HTML page and a page created in a word processor. Word processing programs show you exactly how a document will look before you print it: You know how large your headlines will be, what font they’re in, where your text wraps from one line to the next, and so on. If you see something you don’t like, you change it using menus and formatting commands. Your word processor, in other words, gives you absolute control over every detail of your page.
103
chapter
6
Style Sheets
L
ast chapter, you learned HTML’s dirty little secret: It doesn’t have much formatting muscle. If you want your web pages to look sharp, you need to add style sheets into the mix.
A style sheet is simply a document filled with formatting rules. Browsers read these rules and apply them when they display web pages. For example, a style sheet rule might say, “Make all the headings on this site bold and fuchsia, and draw a box around each one.”
You want to put formatting instructions in a style sheet instead of embedding them in a web page for several reasons. The most obvious is reuse. For example, thanks to style sheets, you can create a single rule to, say, format level-3 headings, and every level-3 heading on every web page of your site will reflect that rule. The second reason is that style sheets help you write tidy, readable, and manageable HTML files. Because style sheets handle all your site’s formatting, your HTML document doesn’t need to. All it needs to do is organize your pages into logical sections. (For a recap of the difference between structuring and formatting a web page, see page 104.) Finally, style sheets give you more extensive formatting choices than HTML alone does. Using style sheets, you can control colors, borders, margins, alignment, and (to a limited degree) fonts. This chapter has two parts. First, you’ll learn how style sheets work, and you’ll see how to attach a style sheet to your web pages. Next, you’ll explore the wide range of style sheet properties you can use to get the exact visual effects you want. Note: In this chapter, you won’t learn about every CSS property. For example, some properties apply primarily to pictures and layout; you’ll learn about these properties in later chapters. 135
chapter
7
Adding Graphics
I
t’s safe to say that the creators of the Internet never imagined it would look the way it does today—thick with pictures, ads, videos, and animated graphics. They designed a meeting place for leading academic minds; we ended up with something closer to a Sri Lankan bazaar. But no one’s complaining, because the Web would be an awfully drab place without graphics. In this chapter, you’ll master the art of web graphics. You’ll learn how to add ordinary images to a web page and to position them perfectly. You’ll also consider what it takes to prepare pictures for the Web—or to find good alternatives online.
Understanding Images To understand how images work on the Web, you need to know two things: • They don’t reside in your HTML files. Instead, you store each image as a separate file. • To display pictures on a page, you use the
![]()
element in your HTML document. You’ll use images throughout your site. You might even use them instead of ordinary text, if you need a special font. Tip: If you’re not sure whether a piece of content on a page is a graphic, try right-clicking it. If it’s an image, most browsers give you a Save Picture As option in a pop-up menu.
183
chapter
8
Linking Pages
S
o far in this book, you’ve worked on individual web pages. While creating a single page is a crucial first step in building a site, sooner or later you’ll want to wire several pages together so a web trekker can easily jump from one page to another. After all, linking is what the Web’s all about. It’s astoundingly easy to create links—officially called hyperlinks—between pages. In fact, all it takes is a single new element: the anchor element. Once you master this bit of HTML lingo, you’re ready to start organizing your pages into separate folders and transforming your humble collection of standalone documents into a full-fledged site.
Understanding the Anchor In HTML, you use the anchor element,
, to create a link. When a visitor clicks that link, the browser loads another page. The anchor element is a straightforward container element. It looks like this: ...
You put the text a visitor clicks inside the anchor element:
Click Me
The problem with the above link is that it doesn’t point anywhere. To turn it into a fully functioning link, you need to supply the URL of the destination page using an href attribute (which stands for hypertext reference). For example, if you want a link to take a reader to a page named LinkedPage.htm, you create this link:
Click Me
213
chapter
9
Page Layout
I
n Chapter 6, you learned about the remarkable CSS standard, and how it can transform the drabbest of pages into a stylish gem. However, you still haven’t seen everything style sheets let you do. Not only can you use them to play with colors, fonts, spacing, and borders, you can also use them to create sophisticated layouts. And with a little planning, style sheets let you create super-flexible pages that you can completely rearrange without touching a line of HTML. Instead, you simply swap in a new style sheet. In this chapter, you’ll see exactly how the CSS layout properties work. You’ll learn to use modern layout techniques like floating boxes, side-by-side columns, and overlapping layers of pictures and text. But first, you need to take a step back to consider the challenges of layout on the Web and learn why online viewing isn’t as straightforward as it seems.
The Challenge of Screen Space When you design a page for print, you take into account the physical size of your final document. You’d use much larger text on a poster than on a business card, for example. But in the world of the Web, this system breaks down, because your website visitors can set their monitors to all kinds of screen resolutions, and resize their browser windows to all sorts of different dimensions. These details affect how much screen real estate your web pages have to work with. The higher the resolution and the bigger the browser window, the more of your content fits onscreen. This raises a dilemma—how do you make sure your pages look their best when you don’t know your visitors’ screen settings?
239
chapter
10
Multipart Pages
A
s you start building bigger and more elaborate websites, you’ll no doubt discover one of the royal pains of website design: making a common ingredient appear on every page.
For example, you might decide to add a menu of links that lets visitors jump from one section of your site to another. You can place these links in a table or a
element (two techniques shown in Chapter 9) to position them on a page, but either way you face a problem you need to do a fair bit of copying and pasting to display the menu on every page of your site. If you’re not careful, one page can end up with a slightly different version of the same menu. When you decide to make a change to the menu, you face the nightmare of updating every one of your pages. Web creators who try this approach don’t get out much on the weekend. There’s no simple solution to this problem, but crafty web designers can use a variety of techniques to get around it. In this chapter, you’ll learn about the two most accessible solutions: server-side includes and the page template feature in Dreamweaver and Expression Web.
Understanding Multipart Pages By this point, you’ve amassed a solid toolkit of tactics and tricks for building web pages. You learned to polish your pages with modern fonts and colors, gussy them up with a trendy layout, and add images and links to the mix. As you apply these techniques to a complete website, however, you’ll run into some new challenges. One of the first hurdles you face when you go from one web page to a dozen or more is how to make them all consistent. Consistent formatting is relatively easy. As long
267
chapter
11
Introducing Your Site to the World
S
o far, you’ve polished your website-design mettle and learned how to build sleek and sophisticated pages. Now it’s time to shift to an entirely different role, that of a website promoter.
One of the best ways to attract new visitors to your site is to turn up as a result in a web search. For that to happen, the leading search engines (that’s Google, Yahoo, and Bing) need to know about your site, and they need to think it’s important enough to rank as a search result. For example, if you’re hawking fried delicacies at www .sweetsaltysweets.com, you want your website to turn up when someone searches for “chocolate-covered potato chips.” And ideally, that result will be among the first few listed, or at least on the first page of results, which greatly increases your odds of getting noticed. In this chapter, you’ll see how search engines work. You’ll learn how to make sure they regularly index your site, capture the right information, and expose your brilliance to the world. (Later, in Chapter 12, you’ll continue this journey and learn more promotion strategies, all of which can help you work your way up the search results rankings.) Lastly, you’ll learn to gauge the success of your site with visitor tracking. You’ll use a powerful, free service called Google Analytics to learn some of your visitors’ deepest secrets—like where they live, what browsers they use, and which of your web pages they find absolutely unbearable. With this information, you’ll have all the tools you need to improve your content and fine-tune the organization of your website. Before you know it, you’ll be more popular than chocolate ice cream.
283
chapter
12
Website Promotion
T
he best website in the world won’t do you much good if it’s sitting out there all by its lonesome self. For your site to flourish, you need to attract new visitors, and then keep them flocking back for more.
In the previous chapter, you started out on this path. You learned how to get your site noticed in a web search, and how to keep track of the number of visitors that stop by. But a search listing, on its own, isn’t enough to grow a brand-new site into a thriving web destination. For that, you need a range of promotional tactics, from sharing links to buying ad space. Contrary to what you might expect, this sort of ground-roots promotion might bring more traffic to your site than high-powered search engines like Google do. In this chapter, you’ll learn some of the best techniques for website promotion. You’ll also see how to build a sticky site—one that not only attracts new faces, but encourages repeat visitors. To pull this off, you need to transform your website into a web community. Your visitors will need a way to interact with your content and talk to you and each other, and you can use Facebook, Twitter, blogs, and groups to make this happen.
Note: The tasks you perform in most of this book—crafting web pages, formatting them with style sheets, uploading your finished site—are relatively straightforward. They might take some time and effort, but when you’re done, you know you’re done. The tasks you’ll tackle in this chapter—promoting your website and building a community around it—aren’t so well defined. They require continuous work, and it may take a lot of thankless slogging before your website traffic starts to grow.
315
chapter
13
Blogs
A
traditional website is the gold standard of the web world. It’s infinitely flexible—able to chronicle a personal trip to Machu Picchu just as well as it powers an e-commerce storefront.
However, there’s something distinctly unspontaneous about a website. For example, imagine you want to post a piece of gossip about a celebrity sighting in your hometown. Before you can share your thoughts with the rest of the word, you need to pick a web page file name, decide what HTML markup you’ll use, determine how you’ll link your page to other pages (and edit them if necessary), and so on. None of these tasks is really that difficult, but taken together, they’re enough to discourage casual web authors from writing anything that doesn’t seem worth the trouble. That’s where blogs fit into the picture. Blogs are a self-publishing format that gets your thoughts online quickly and easily, while avoiding the headaches of website management. They’re a fresh, straightforward, and slightly chaotic way to communicate on the Web. To maintain a blog, you publish short entries whenever the impulse hits you. High-powered blogging software collects, chronologically organizes, and presents your blog posts on web pages. That means that if you don’t want to fuss with the fine details of website management, you don’t need to. All you need to worry about is sending in postings—and with some blogging software, that’s as easy as firing off an email. In this chapter you’ll learn how blogs work, and you’ll see how to create your own blog with Blogger, one of the Web’s leading free blogging services.
349
chapter
14
Making Money with Your Site
I
f it’s not for sale on the Web, it’s probably not for sale at all. It’s no secret that the Internet is a global bazaar with more merchandise than a decade’s worth of garage sales. Web surfers generate huge amounts of traffic hunting for travel discounts, discussing hot deals, and scouring eBay for bargains. So how can you get your share of web capital? One obvious option is to sell a real, tangible product. The Internet abounds with specialty shops hawking art, jewelry, and handmade goods. But even if you have a product ready to sell, you still need a few specialized tools to transform your corner of the Web into a bustling e-commerce storefront. For example, you’ll probably want a virtual shopping cart, which lets visitors collect items they want to buy as they browse. And when they finally head for the virtual checkout counter, you need a secure way to accept their cash—usually by way of a credit card transaction. In this chapter, you’ll learn how to implement both of these features on your site using PayPal’s merchant tools. Even if you aren’t looking for a place to unload your hand-crafted fishbone pencils, your website can still help fatten your wallet. In fact, just about any website can become profitable, either by selling ad space or by recommending other companies’ products. In this chapter, you’ll consider how to use two of the Web’s most popular affiliate programs—Google AdSense and Amazon Associates—to collect some spare cash.
Note: Not a U.S. citizen? Don’t worry—all the money-making ideas in this chapter rely on companies that provide services worldwide. Google, Amazon, and PayPal let you rake in the cash no matter where you live.
383
chapter
15
JavaScript: Adding Interactivity
J
avaScript is a simplified programming language designed to beef up web pages with interactive features. It gives you just enough programming muscle to add some fancy effects, but not enough to cause serious damage to your site if your code goes wonky. JavaScript is perfect for creating pop-up windows, embedding animated effects, or modifying the content that appears on your web page. On the other hand, it can’t help you build a hot e-commerce storefront; for that, you need the PayPal tools described in Chapter 14 or a server-side programming platform (see page 424). The goal of this chapter isn’t to teach you the details of JavaScript programming— it’s to give you enough background so you can find great JavaScript code online, understand it well enough to make basic changes, and then paste it into your pages to get the results you want. Since you can find free JavaScript code on hundreds of websites, these basic skills can come in very handy.
Understanding JavaScript The JavaScript language has a long history; it first hit the scene with the Netscape Navigator 2 browser in 1995. Internet Explorer jumped on the bandwagon with version 3. Today, all modern browsers run JavaScript, and it’s become wildly popular as a result. Note: JavaScript is thoroughly different from the Java language (although the code sometimes looks similar, because they share some code-writing rules). Java is a full-fledged programming language, every bit as powerful—and complicated—as programming languages like C# and Visual Basic.
423
chapter
16
Fancy Buttons and Menus
O
ver the past 15 chapters, you’ve absorbed a fair amount of web wisdom. You learned to structure web pages using HTML, clothe them with style sheets, and breathe life into them with JavaScript. Now, it’s time to reap some of the rewards. In this chapter, you’ll learn how you master three of the most common (and most practical) web design techniques. You’ll learn how to build fancy buttons—for example, ones that light up when a mouse hovers over them. You’ll also use a pop-up or pop-open menu system, so visitors can cruise around your site in style. These features give you the chance to take the skills you’ve developed in CSS and JavaScript one step further. In other words, it’s time for your hard slogging to pay off with some snazzy website frills.
Fancy Buttons The trends and styles of web design are always changing. In the early days of the Web, everyone used ordinary text links, like the ones you learned about in Chapter 8:
Visit Elvis
Over time, these run-of-the-mill links started to look drab. Creative webmasters wanted more, and they decided to use small, clickable pictures instead. To do this, they pulled out the familiar
![]()
element and applied one of two techniques. The most straightforward approach to creating a graphical button is to wrap the image in an anchor, as described in Chapter 8. Here’s what that looks like:
465
chapter
17
Audio and Video
I
n the early days of the Internet, websites were about as jazzy as an IRS form. You’d see pages filled with an assortment of plain text, links, and more plain text. Over time, the Web matured, and web pages started to change as designers embraced the joys of color, pictures, and tacky clip-art. But when that excitement started to wear off, it was time for a new trick—multimedia. Multimedia is a catchall term for a variety of technologies and file types, all of which have dramatically different computer requirements and pose different web design challenges. Multimedia includes everything from the irritating jingle that plays in the background of your best friend’s home page to the wildly popular video clip of a cat playing the piano. (Depressing fact: That cat has over 20 million views, you’re unlikely to ever create a web page that’s half as popular.) In this chapter, you’ll consider how to use several types of multimedia. First, you’ll learn to play background music and put a snazzy MP3 player on a web page. Then you’ll embed video—first using ordinary HTML, and then using the new, but notquite-ready
