O'Reilly logo

Creating a Website: The Missing Manual, 3rd Edition by Matthew MacDonald

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Chapter 1. Preparing for the Web

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

Note

History buffs can follow the saga of the early Internet in much more detail at www.isoc.org/internet/history and www.walthowe.com/navnet/history.html.

Of course, the early Internet doesn’t have much in common with today’s Internet. In 1969, the Internet community consisted of four computers, all of them beastly machines that no one but a government lab or academic institution could love (or afford). In 1981, still fewer than 200 mainframe computers populated the Internet, and most of the people using them were computer experts or scientists going about their day-to-day work. Today, well over 100 million websites—and many more web enthusiasts—are online. It’s no wonder you’re getting so much junk email.

Web Browsers

As you no doubt know, a web browser is a piece of software that lets you navigate to and display web pages. Without browsers, the Web would still exist, but you wouldn’t be able to turn on your computer and take a look at it.

A browser’s job is surprisingly simple—in fact, the bulk of its work consists of two tasks. First, it requests web pages, which happens when you type in a website address (like www.google.com) or click a link in a web page. The browser sends that request to a far-off computer called a web server. A server is typically much more powerful than a home computer because it needs to handle multiple browser requests at once. The server heeds these requests and sends back the contents of the desired web pages.

When the browser gets those contents, it puts its second skill into action and renders, or draws, the web page. Technically, this means the browser converts the plain text it receives from the server into a display document based on formatting instructions embedded in the plain-text page. The end result is a graphically rich page with different typefaces, colors, and links. Figure 1-1 illustrates the process.

A web browser is designed to do two things really well–contact remote computers to ask for web pages, and then display those pages on your computer.
Figure 1-1. A web browser is designed to do two things really well–contact remote computers to ask for web pages, and then display those pages on your computer.

Choosing your browser

Depending on your personality, choosing a web browser is either a) a bore or b) an important expression of your character, individuality, and overall computer savvy. If you fall into the latter camp, you’ve probably already settled on a favorite browser. But if you’re searching for something a little different in a browser, or you’re curious to see what else is out there, the following quick overview sums up your browser options.

Even if you’re not interested in changing your browser, it’s a good idea to be familiar with the most common ones out there (see Figure 1-2). That’s because when you design your website, you need to prepare for a wide audience of people with different browsers. To make sure your nifty pages don’t turn funky when other people look at them, it’s a good idea to test your own site on other computers, using other screen sizes and other web browsers.

Browser usage statistics, which estimate the percentage of people using each major browser, vary depending on what sites you examine and how you count the visitors, but at the time of this writing, this is one reasonable estimate. Just as important are browser trends, which show Firefox, Chrome, and Safari steadily creeping up in popularity at Internet Explorer’s expense. (For current browser usage statistics, check out .)
Figure 1-2. Browser usage statistics, which estimate the percentage of people using each major browser, vary depending on what sites you examine and how you count the visitors, but at the time of this writing, this is one reasonable estimate. Just as important are browser trends, which show Firefox, Chrome, and Safari steadily creeping up in popularity at Internet Explorer’s expense. (For current browser usage statistics, check out http://en.wikipedia.org/wiki/Usage_share_of_web_browsers.)

Tip

At a bare minimum, all website creators need a copy of Internet Explorer, Firefox, and Google Chrome, by far the most commonly used browsers today. By using them to check out the web pages you build, you can see what your hard work will look like to 90 percent of the world.

The following list describes the most popular browsers of today:

  • Internet Explorer is still the world’s most-used browser. For better or worse, it sets the standard that other browsers need to follow. The clear advantage of using Internet Explorer (IE for short) is that you’ll never run into a web page you can’t read—with a market share of near 60 percent, IE is simply too successful for site creators to ignore. The downside is that Microsoft is slow and cautious in updating IE, which means that new features often appear in other browsers first and aren’t incorporated into IE until many months—or years—later.

    To download an updated version of Internet Explorer, visit www.microsoft.com/ie.

    Note

    Although Microsoft experimented with a Mac version of Internet Explorer for years, they finally put it out to pasture when Apple created a built-in browser named Safari. So if you’re a Mac owner, you’ll need to borrow a friend’s Windows PC to see what your pages look like in Internet Explorer. On your own computers, you’ll probably use Safari or Firefox, the most popular Mac browsers.

    For an extensive list of browsers for Macs, including those that work with older operating systems, see www.knutson.de/mac/www/browsers.html.

  • Firefox started its life as the modern response to Internet Explorer. It’s a web browser that’s lean, secure, and more than a little hip. Firefox pioneered several innovative features long before Internet Explorer caught up, including tabbed browsing (so you can look at multiple web pages in different window “tabs”) and pop-up blocking (to stop those annoying pop-up ads). Firefox is still ahead of the game with its incredibly flexible add-ons, tiny programs that other people develop to enhance Firefox with extra features, like a web mail notifier and thumbnails of the sites that show up in a Google search results page. Firefox currently enjoys a cult following among computer geeks and a growing number of disillusioned Internet Explorer veterans. Best of all, an army of volunteer programmers keep Firefox rigorously up to date.

    Give Firefox a go at www.mozilla.org/firefox.

  • Google Chrome is the new kid on the block. Although it didn’t wink into existence until the end of 2008, its market share has already soared to third place, making it the fastest-growing browser on the planet. Although its user interface is a little rough around the edges, tech-savvy web fans love the way it runs JavaScript (the snippets of code that power interactive web pages) with blistering speed.

    Experiment with Google Chrome at www.google.com/chrome.

  • Safari is an Apple-designed browser that comes with current versions of the Mac OS X operating system. Apple products like the iPhone, iPad, and the iPod Touch use the Safari browser. It’s quick, elegant, and sports a set of useful features, like spell-checking when you fill out online forms. Although Apple originally developed Safari exclusively for Mac computers, you can now download a Windows incarnation. Safari is still far more popular on Macs, however.

    Go on Safari at www.apple.com/safari.

  • Opera is a slimmed-down, easy-to-install browser that’s been around for well over a decade, serving as an antidote to the bloated size and pointless frills of Internet Explorer. For years, Opera was held back by an unfortunate detail—if you wanted an ad-free version, you needed to pay. Today, Opera is free and ad-free, too, just like the other browsers on this list. It has a small but loyal following, but runs a distant fifth in web browser standings.

    Check out Opera at www.opera.com.

Web Servers

When you type a web address into a browser, a web server receives the browser’s request and sends back the correct web page. For a busy website, this basic task can require a lot of work. As a result, web servers tend to be industrial-strength computers. Even though the average Windows PC with the right setup can host a website, it’s rarely worth the effort (see the box on Becoming a Web Host). Instead, most people get a commercial company, called a web host, to give them a little space on one of their servers, usually for a monthly fee. In other words, you need to rent some space on the Web.

Sometimes, you can rent this space from the same company you use for Internet access; they may even include server space as part of your Internet connection package. But the most straightforward approach is to use a dedicated web hosting company. Either way, you’re going to copy your newly built the websites to some far-off computer that will make sure a worldwide audience can enjoy your talents.

In Chapter 3, you’ll learn more about how a web browser navigates the Web to find a specific page. For now, keep focusing on the big picture so you can start planning your first website.

Planning a Website

The last thing you need before you start building a website is to be buried under an avalanche of theory. However, every new web author can save time and effort by doing a little bit of planning beforehand. In the following sections, you’ll consider some quick guidelines to get you on the right path.

Types of Sites

You don’t have much chance of creating a successful site if you haven’t decided what it’s for. Some people have a very specific goal in mind (like getting hired for a job or promoting a book), while others are just planning to unleash their self-expression. Either way, take a look at the following list to get a handle on the different types of websites you might want to create:

  • Personal sites are all about you. As the world gets more web-savvy, it seems everyone is building online homes. Whether it’s to share pictures of Junior with the relatives, chronicle a trip to Kuala Lumpur, or just post your latest thoughts and obsessions, a personal website is the place to do it.

    When you design a personal website, it’s up to you how ambitious you want to be. If all you need is a hub to chat with friends or a place to share pictures, you can save yourself a good bit of trouble by signing up on a social network like Facebook (www.facebook.com). Or, if you want a diary-like site to chronicle your life, work, or obsessive hat-collecting hobby, a personal blog may suit you fine (see, for instance, www.blogger.com, which is discussed in Chapter 13). If you’re a bit more ambitious (say you want to chart five generations of family history), or you want complete design control (forget Facebook blue), or you just need a single web home to gather together several interests, then a customized personal website is the mark of an individual with true style.

  • Résumé sites are a specialized type of personal site and a powerful careerbuilding tool. Rather than photocopy a suitcase full of paper résumés, why not send emails and distribute business cards that point to your online résumé? Best of all, with a little planning, your online vita can include more details than its tree-based counterpart, like links to former companies, an online portfolio, and even background music playing “YMCA” (which is definitely not recommended).

  • Topical sites focus on a particular subject that interests you. If you’re more interested in building a website about your favorite music, art, books, food, political movement, or American Idol contestants than you are in talking about your own life, a topical website is for you.

    Before you set out to create a site, consider whether other people with a similar interest will want to visit it, and take a look at existing sites on the topic. The best topical websites attract others with the same interest. The worst websites present the same dozen links you can find anywhere else. Remember, the Web is drowning in information. The last thing it needs is another Megan Fox Fan Emporium.

  • Event sites aren’t designed to weather the years—instead, they revolve around a specific event. A common example is a wedding website. The event hosts create it to provide directions, background information, links to gift registries, and a few romantic photos. When the wedding is over, the site disappears—or morphs into something different (like a personal site chronicling the honeymoon). Other events you might treat in a similar way include family reunions, costume parties, or do-it-yourself protest marches.

  • Promotion sites are ideal when you want to show off your personally produced CD or hot-off-the-presses book. They’re geared to get the word out about a specific item, whether it’s handmade pottery or your own software. Sometimes, these websites evolve into small-business sites, where you actually sell your wares (see the “Small business” bullet below).

  • Small business (or e-commerce) sites show off the most successful use of the Web—selling everything from portable music players to prescription drugs. E-commerce sites are so widespread that it’s hard to believe that when the Web was first created, making a buck was far from anyone’s mind.

    Creating a full-blown e-commerce site like Amazon.com or eBay is far beyond the abilities of a single person. These sites need the support of complex programs and computer genius–level programming languages. But if you’ve come to the Web to make money, don’t give up hope! Innovative companies like PayPal and Yahoo provide services that can help you build shopping cart–style sites and accept credit card payments. You can also host Google ads or hawk products from Amazon’s website to rake in some cash. You’ll learn about these great tricks in Chapter 14.

Once you pinpoint your website’s raison d’être, you should have a better idea about who your visitors will be. Knowing and understanding your audience is crucial to creating an effective site. (And don’t even try to suggest you’re creating a site just for yourself—if you were, there’s no reason to put it on the Internet at all!)

The Lifespan of Your Site

The Web constantly changes. Today’s Web isn’t the same as last year’s—or even the Web of 15 seconds ago.

Here are two valuable truths about website lifetimes:

  • The best websites are always improving. Their creators add support for new browser features, tweak their look to match new style trends, and—most important of all—constantly add new content.

  • When a website stops changing, it’s on life support. Many great websites have crumbled through neglect.

Think about your favorite sites. Odds are, they change daily. A good website isn’t one you consult once and leave behind. It’s a site you bookmark and return to periodically. In a sense, a website is like a television channel. If its creators aren’t adding new information, the site is showing reruns.

Creating a website is hard enough, and keeping its content fresh is even more taxing. Here are a few tips that can help you out:

  • Think in stages. When you put your first website online, it won’t be complete. Instead, think of it as version 1, and start planning a few changes for the next version. Bit by bit, and stage by stage, you can add everything you want your site to have.

  • Select the parts you can modify regularly, and leave the rest alone. There’s no way you can review and revise an entire website every week. Instead, your best strategy is to identify sections you want to change regularly. On a personal site, for example, you might put news on a separate page and update just that page. On a small-business website, you might concentrate on the home page so you can advertise new products and upcoming specials.

  • Design a website that’s easy to change. This is the hardest principle to follow, because it requires not only planning, but a dash of hard-won experience. As you become a more experienced web author, you’ll learn how to simplify your life by making your pages easier to update. One method is to separate information into several pages, so you can add new content without reorganizing your entire site. Another is to use style sheets to separate page formatting from your content (see Chapter 6). That way, you can easily insert new material without having to format the content from scratch to match the rest of your page.

Practice Good Design

Every year, hundreds of websites “win” awards for being abjectly awful. Sometimes, the profiled sites have spinning globes and hot pink text on a lime-green background. Other times, they have clunky navigation systems and grotesque flashing backgrounds. But no matter what the design sins, websites that are bad—hideously bad—are strangely common.

Maybe it’s because creating a website really isn’t that hard. Or maybe it’s because we all have an impulse to play with color, texture, and sound, and fancy web tools encourage our ugliest instincts. For a glimpse at some of the all-too-familiar mistakes, go to www.angelfire.com/super/badwebs (see Figure 1-3). You can also visit www.worstoftheweb.com, which profiles new offenders every month.

Here’s a website that gets it all wrong—deliberately. With a combination of scrolling titles, a crazily blinking background, and unreadable text, www.angelfire.com/super/badwebs does a good job of demonstrating everything you should avoid on your own web pages.
Figure 1-3. Here’s a website that gets it all wrong—deliberately. With a combination of scrolling titles, a crazily blinking background, and unreadable text, www.angelfire.com/super/badwebs does a good job of demonstrating everything you should avoid on your own web pages.

This book won’t teach you to become a professional web designer. However, it will help you learn the critically important art of Not Making Bad Websites. Throughout this book, you’ll find helpful tips, suggestions, and warnings about usability and design issues (look specifically for the “Design Time” boxes). In the meantime, here are a few general principles that can help make sure you never wind up on a worst-of-the-Web list (unless you absolutely want to):

  • Keep it simple (and don’t annoy your visitors). You can cram a lot of frills and goodies into a web page. But unless they serve a purpose, just say no. You’ll find that exercising restraint can make a few fancy touches seem witty and sophisticated. Adding a lot of fancy touches can make your site seem heady and delusional. If you pare down the tricks, you’ll make sure that your graphical glitz doesn’t overshadow your site’s content and drive your visitors away in annoyance.

  • Be consistent. No matter how logical you think your website is, the majority of visitors probably won’t think the same way. To cut down on the confusion, use similar organization from one page to another, similar headings, similar graphics and links, a single navigation bar, and so on. These touches help make visitors feel right at home.

  • Know your audience. Every type of site has its own unwritten conventions. You don’t need to follow the same design in an e-commerce store as you do on a promotional page for an experimental electric harmonica band. To help decide what is and isn’t suitable, check out lots of other sites that deal with the same sort of material as yours.

The Ingredients of a Website

Now that you know what sort of website you want to build, it’s time to get practical. Building a website isn’t just about picking a good design and writing solid content. You also need to coordinate with other companies to get your website onto the World Wide Web (and give it a catchy address, like www.StylinViolins.com).

This quick shopping list maps out what every website needs—and tells you where you’ll learn about it in the rest of this book:

  • Web pages. Every website is made up of individual pages. To create a basic web page, you need to understand HTML (HyperText Markup Language), the language of the Web. You’ll create your first web page in the next chapter.

  • Web space. Creating web pages is fun, but for other people to see them, you need to put them on a web server. In Chapter 3, you’ll consider your options for getting your first web page online, either through a fee-based service or a free alternative.

  • A domain name. There’s a world of difference between the website address www.inetConnections.com/Users/~jMallone012/web and www.JackieMallone.com. You can get your own personalized domain name, if it’s available. It’s not free, but it’s not expensive, either—about $10 or $15 a year. If you want to put your website address on a business card or a brochure for a small business, your own domain name is really the best choice. In Chapter 3, you’ll learn how to buy one.

    Note

    The domain name is the first part of a web address, which identifies the web server that’s storing and serving up your site. In the URL www.ebay.com/help/index.html, the domain name is www.ebay.com. You’ll learn much more about domain names and URLs (short for Universal Resource Locator, also known as web addresses), and how they work, in Chapter 3.

  • Web design tools. Creating web pages from scratch is a great way to learn a new skill, but it’s far too slow and painful to create a complete website that way. To get to the next level, you need to step up to a professional web design tool. If you have a commercial program like Dreamweaver, you’re in good hands. Even if you don’t, many good free and shareware products can help you out. Chapter 4 explains your options and helps you get started.

  • Hyperlinks. On its own, a single web page can do only so much. The real magic begins when you bind multiple pages together using links. Chapter 8 introduces the versatile hyperlink, which lets visitors move around your site.

  • Indispensable extras. Once you master the basics of web pages and websites, there’s far more ground to conquer. You can get your site listed in a search engine (Chapter 11), establish your own community forum (Chapter 12), and even sell stuff (Chapter 14). Still hungry for more? Why not create interactive pages with JavaScript code (Chapter 15), design a pop-up menu (Chapter 16), and add audio and video (Chapter 17)? All these features take you beyond basic web design and put you on the road to becoming a genuine web expert.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required