Creating Web Sites: The Missing Manual

Content preview·Buy PDF of this chapter|Buy reprint rights for this chapter

The Web's an exciting place. Every day, it chews through millions of financial transactions, serves up late-breaking news and scandalous rumors, and provides a thriving meeting place for every type of community, from political anarchists to Beanie Baby collectors.

Since you're reading this book, you've probably decided to move in and join the Web. Congratulations! Just as you need to prepare when it's time to find a home in the real world, you'll also need to undertake some basic planning before you can make the move to your new online neighborhood. In this chapter, you'll get a good look at the Web and what it takes to establish your own Web site. You'll also learn how the Web really works (behind the scenes), and what ingredients you need to build your site.

Although it doesn't show its age, the Internet is older than you might think. The computer visionaries who created the Internet 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 mostly traveled by academic and government types. It flourished as a tool for research and collaboration, allowing scientists everywhere to share information. In 1993 the first Web browser hit the scene. In the following years, the Internet was colonized by new types of people, including book shoppers, news junkies, hobbyists, and a lot of lonely computer programmers.

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 which were beastly, complex machines that no one but a government lab or academic institution could love (or afford). In 1981, there were still fewer than 200 mainframe computers on the Internet, and most of the people using them were computer experts or scientists going about their day-to-day work. Today, well over eight million Web sites—and many more Web surfers—are online. No wonder there's so much junk email flying around with shady sales pitches for anatomical self-improvement.

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy PDF of this chapter|Buy reprint rights for this chapter

Although it doesn't show its age, the Internet is older than you might think. The computer visionaries who created the Internet 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 mostly traveled by academic and government types. It flourished as a tool for research and collaboration, allowing scientists everywhere to share information. In 1993 the first Web browser hit the scene. In the following years, the Internet was colonized by new types of people, including book shoppers, news junkies, hobbyists, and a lot of lonely computer programmers.

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 which were beastly, complex machines that no one but a government lab or academic institution could love (or afford). In 1981, there were still fewer than 200 mainframe computers on the Internet, and most of the people using them were computer experts or scientists going about their day-to-day work. Today, well over eight million Web sites—and many more Web surfers—are online. No wonder there's so much junk email flying around with shady sales pitches for anatomical self-improvement.

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy PDF of this chapter|Buy reprint rights for this chapter

The last thing you need is to be buried under an avalanche of theory before you've had the joy of performing your first few Web creation tricks. However, every new Web site author can save time and effort by doing a little bit of planning before diving in to create a complete Web site. In the following sections, you'll consider some quick guidelines to get you on the right path.

You don't have much chance of creating a successful Web 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 Web sites 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, it's no longer unusual to have a personal Web site. In fact, everyone from tweens to grandmothers are jumping in.

If your plan is to create a personal Web site, think about what its format should be, and how you'll use it. Do you want to post regularly updated news tidbits in a chronological format (in which case, you might be interested in creating a blog, covered below)? Or perhaps you want to create something more ambitious, like an online picture album or a site featuring your family's history. Either way, you should decide what you want your Web site to focus on before you start slapping together Web pages.
Online diaries or blogs (Figure 1-2) are personal Web sites that are rapidly gaining popularity. The typical diary Web site provides a list of entries in reverse chronological order, which means whenever you surf to the site, you see the latest news at the top of the page. These online diaries, also known as

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy PDF of this chapter|Buy reprint rights for this chapter

The trickiest part about building a Web site is coordination. To get it right, you not only need the right tools to create Web pages, but you also need to coordinate with other companies to get your Web site onto the World Wide Web and (optionally) to give it a catchy address like www.StylinViolins.com. In this section, you'll create a quick Web shopping list that maps out what you need—and tells you where you'll learn about it in the rest of this book.

Web pages. Every Web site is built with individual pages. In order 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 next, in Chapter 2.
Web space. Creating Web pages is fun, but in order to let other people take a look at 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 Web site 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 the cost is usually quite low. If you want to put your Web site address on a business card or a brochure for a small business, there's really no better choice. In Chapter 3, you'll learn how to buy your own domain name.

The domain name is the first part of the 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) and how they work in Chapter 3.

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy PDF of this chapter|Buy reprint rights for this chapter

Every Web site is a collection of one or more Web pages. You jump from page to page by clicking various elements in your Web browser, like links, pictures, or buttons. It may not sound very high-tech, but putting an entire Web site together and polishing it up is a significant undertaking. However, the first step to Web mastery is just building a single Web page. That's the task you'll tackle in this chapter.

Web pages are the basic unit of Web design. The ideal Web page contains enough information to fill up a browser window, but not so much that the reader needs to scroll from morning until lunchtime to get to the end. In other words, the ideal Web page strikes a balance—it avoids the lonely feeling caused by too much white space, and 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 Web sites. On a news site like www.nytimes.com, every news article is a separate page (and longer stories are subdivided into several pages). On an e-commerce shop like www.amazon.com, every product has its own page. Similarly, a personal Web site like www.MyUndyingLoveForPigTrotters.com may be divided into separate Web pages with titles like "About Me," "Vacation Photos," "Résumé," and "Top Secret Recipes for Pig Parts."

For now, don't worry too much about how to divide up your Web site—it's a task you'll revisit in Chapter 8 when you start linking Web pages together. Instead, your first goal is to understand how a basic Web page works, and how to create one of your own.

Web pages are written in HTML (HyperText Markup Language), which is the language of the Web. It doesn't matter whether your Web page contains a series of plain text blog entries, a dozen pictures of your pet lemur, or a heavily formatted screenplay—odds are if you're looking at it in a browser, it's an HTML page.

HTML plays two key roles:

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy PDF of this chapter|Buy reprint rights for this chapter

Web pages are written in HTML (HyperText Markup Language), which is the language of the Web. It doesn't matter whether your Web page contains a series of plain text blog entries, a dozen pictures of your pet lemur, or a heavily formatted screenplay—odds are if you're looking at it in a browser, it's an HTML page.

HTML plays two key roles:

HTML tells a Web browser how to format a page. Although there are plenty of computer programs that can format text (take Microsoft Word, for instance), it's almost impossible to find a single standard that's supported on every type of computer, operating system, and Web-enabled device. HTML fills the gap by supplying information that any browser can interpret. These formatting details include specifications about colors, headings, text alignment, and so on.
HTML links different documents together. These links can take several forms. You can use hyperlinks (discussed in Chapter 8) to let people surf from one Web page to another. You can also use HTML instructions to call up pictures (Chapter 7) or even other Web pages (Chapter 10) and combine them into a single Web page.

HTML is such an important standard that you'll spend a good portion of this book digging through most of its features, frills, and shortcomings. Every Web page you'll build along the way is a bona fide HTML document.

On the inside, an HTML page is actually nothing more than a plain-vanilla text file. That means every Web page consists entirely of letters, numbers, and just a few special characters (like spaces, punctuation, and everything else you can spot on your keyboard). This file is quite different than what you would find if you cracked open a typical binary file on your computer. (A binary file contains genuine computer language—a series of 1s and 0s. If another program is foolish enough to try and convert this binary information into text, you end up with gibberish.)

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy PDF of this chapter|Buy reprint rights for this chapter

Now that you know how to peer into existing HTML files and create your own, the next step is to understand what goes inside the average HTML file. It all revolves around a single concept—tags.

HTML tags are the formatting instructions that tell the browser how to transform ordinary text into something that's visually appealing. If you were to take all the tags out of an HTML document, you'd be left with nothing more than plain, unformatted text.

Technically, HTTP (HyperText Transport Protocol) is the low-level communication system that allows two computers to exchange data over the Internet. If you were to apply the analogy of a phone conversation, the telephone line would use HTTP, and the juicy tidbits of gossip you're exchanging with your Aunt Martha would be the HTML documents.

Figure 2-3: The address bar indicates where the Web page you're viewing is really located (in geek-speak this is known as the file path). If you see "http://" your page is on a Web server somewhere out on the Internet (top). If you're looking at a Web page on your own computer, you'll just see an ordinary file path instead (middle, showing a Windows PC), or you'll see a URL that starts with the prefix "file:///"(bottom, showing a Mac). It all depends on the browser and operating system you're using.

You can recognize a tag by looking for the angle brackets, which are two special characters that look like this: < >. The angle brackets contain a code. This code is for the browser's eyes only, and it's never shown to Web surfers (unless they use the View → Source trick to peek at the HTML). Essentially, the code is an instruction that conveys some information to the browser about how it should format the text that follows the code.

For example, one simple tag is the tag, which stands for bold. When the browser encounters this tag, it switches on boldface formatting, which affects all the text that appears after this tag. Here's an example:

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy PDF of this chapter|Buy reprint rights for this chapter

So far, you've been considering HTML snippets—portions of a complete HTML document. In this section, you'll learn how to put it all together and create your first genuine Web page.

To create a true HTML document, you need a minimum of three container tags: <html>, <head>, and <body>. These three tags work together to describe the basic structure of your page.

<html>

This tag wraps everything else in your Web page. It tells the browser that you're using HTML.
<head>

This tag designates the header portion of your document. The header can include some optional information about your Web page, including the title (which is displayed in your browser's title bar), search keywords, and a style sheet (which you'll learn about in Chapter 6).
<body>

This tag holds the meat of your Web page, including the actual content you want to display to the world.

There's only one right way to combine these tags. Here's the correct arrangement:

	<html>

	<head>

	…

	</head>

	<body>

	…

	</body>

	</html>

Every Web page uses this basic framework. The ellipsis (…) shows where you'll want to insert additional information. The spaces in between the lines aren't required; they're just to help you see the tag structure more easily.

Almost all browsers let you bend these rules, and create a document that lacks these three basic tags. Of course, if you wanted to learn the wrong way to write Web pages, you probably wouldn't be reading this book!

To transform this barebones template into a real document, you just need to start adding some content. For example, let's say you're starting a basic résumé page. Here's a very basic first go at it:

	<html>

	<head>
	</head>
 
	<body>
	I am Lee Park. Hire me for your company, because my work is <b>off the 
	hizzle</b>.
	</body>
	
	</html>

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy PDF of this chapter|Buy reprint rights for this chapter

The current version of HTML (as implemented by all modern browsers and taught in this book) is HTML 4.01. HTML 4.01 became an official standard at the end of 1999, so it's definitely not a new kid on the block. This raises an interesting question—in all the years since HTML 4.01 hit the Web, why haven't there been more changes?

The fact is, HTML 4.01 has essentially finished its evolution. There isn't much more that can be improved—at least not without radically changing the way the language is now. In the years since 1999, developers have largely concentrated on extending HTML with browser plug-ins for new types of content (like Flash movies) and building massive Web applications that can generate HTML on the fly.

That doesn't mean the world of Web standards has been quiet. The next big thing is XHTML, a revised version of HTML that incorporates some of the philosophy of another standard called XML (Extensible Markup Language). XHTML is a stricter form of HTML, so it doesn't allow sloppy mistakes (like improperly nested tags) that browsers tolerate happily. However, the real goal of XHTML isn't to hassle lazy Web developers. Instead, because XHTML is more consistent, it makes life easier for Web search engines and scaled-down Web browsers on specialized platforms (like telephones, pocket computers, and even kitchen appliances). And because XHTML has XML underpinnings, it's great for hardcore computer programmers that want to create and analyze Web pages using development tools.

So why aren't we all focusing on XHTML? Even though XHTML has been around for several years, HTML 4.01 is still the undisputed popularity champ. It's more compatible with older browsers and works well with piles of popular Web editors. Most Web page creators still pass on XHTML because it doesn't add any new features. At the time of this writing, top sites like Amazon, eBay, and Google are still XHTML-free. In fact, XHTML is used only when companies have powerful Web application software that's smart enough to serve up different types of Web pages (HTML or XHTML) depending on how capable the requesting browser is.

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy PDF of this chapter|Buy reprint rights for this chapter

In the previous chapter you learned the basics of HTML by considering a simple one-page résumé. There's still a lot more you can do to perfect that page, but before going any further it's worth taking a careful look at one of the most important pieces of the Web puzzle—getting your pages online.

In this chapter, you start by taking a closer look at how Web servers work. Once you're armed with these high-tech nerd credentials, you'll be ready to search for your own Web host—the company that's going to let you park your Web site on its Web server. All you need to do is figure out your requirements, assess the possibilities, and then start shopping!

As you learned in Chapter 1, the Web isn't stored on any single computer, and no company owns the Web. Instead, the individual pieces (Web sites) are scattered across millions of computers (Web servers). Only a subtle illusion makes all these Web sites seem to be 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 the Web page you want? It's all in the URL—the Web site address you type into your browser.

A URL (Uniform Resource Locator) consists of several pieces. Some of these pieces are optional, because they can be filled in by the browser or Web server automatically. Others are always required. Figure 3-1 dissects the URL http://www.SellMyJunkForMillions.com/Buyers/listings.htm.

Figure 3-1: The average URL consists of four pieces. The first part (the protocol) indicates how the page is going to be retrieved. The second part (the domain) indicates the Web server you're accessing. The third and fourth parts indicate the path and file on the Web server where the Web page is located.

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy PDF of this chapter|Buy reprint rights for this chapter

As you learned in Chapter 1, the Web isn't stored on any single computer, and no company owns the Web. Instead, the individual pieces (Web sites) are scattered across millions of computers (Web servers). Only a subtle illusion makes all these Web sites seem to be 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 the Web page you want? It's all in the URL—the Web site address you type into your browser.

A URL (Uniform Resource Locator) consists of several pieces. Some of these pieces are optional, because they can be filled in by the browser or Web server automatically. Others are always required. Figure 3-1 dissects the URL http://www.SellMyJunkForMillions.com/Buyers/listings.htm.

Figure 3-1: The average URL consists of four pieces. The first part (the protocol) indicates how the page is going to be retrieved. The second part (the domain) indicates the Web server you're accessing. The third and fourth parts indicate the path and file on the Web server where the Web page is located.

Altogether, the URL packs a lot of information into one place, including:

The protocol is the way you communicate over the Web. Technically, it's the way that request and response messages are transmitted across your Internet connection. Web pages always use HTTP (HyperText Transport Protocol), which means the protocol is always http:// or https://. (The latter establishes a super-secure connection over HTTP that encrypts sensitive information you type in, like credit card numbers or passwords.) In most browsers, you can get away without typing this part of the URL. For example, when you type

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy PDF of this chapter|Buy reprint rights for this chapter

Shakespeare may have famously written "What's in a name? That which we call a rose / By any other name would smell as sweet." But he may not see things the same way if he has to type in www.thesweetsmellingredflowerwiththorns.biz into his browser instead of www.rose.com. Short, snappy domain addresses attract attention and are easier to remember. Today, cheap personalized domain addresses are within the reach of every Web site creator. If you decide to get one of your own, it's worth taking the time to get it right.

Your first step should be to start checking domain name availability. You can start this process even if you haven't chosen a Web hosting company. In fact, the Web abounds with tools that let you check if a domain name is available. These tools will also stop you if you try to use illegal characters (only letters, numbers, and dashes are allowed in a domain name).

As you already know, the Internet is a huge network of computers that spans the globe. An intranet is a lot smaller—it's a network inside a specific company, organization, or home that joins together a much smaller number of computers. In fact, an intranet could have as few as two computers.

An intranet makes sense anytime you need to have a Web site that's only available to a small number of people in one location. For example, a company can use an intranet Web site to share marketing bulletins (or the latest office gossip). In your own home, you could use an intranet to let your housemates browse your Web creations from multiple computers. The only limitation is that a Web site on an intranet is only accessible to the computers on that network. Other Web surfers won't be able to visit it.

Setting up a Web site for an intranet is easier than setting it up for the Internet, because you don't need to register the domain name. Instead, you can use the network computer name. For example, if your computer has the network name "SuperServer," you could access a Web page with a URL like

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy PDF of this chapter|Buy reprint rights for this chapter

All you need to achieve Web superstardom is a domain name and a small amount of space on a Web server. There's no one-size-fits-all solution when it comes to finding a Web host. Instead, you'll choose the right Web hosting company based on your budget, what you want your Web site to be able to do, and your own capricious whims (let's face it—some Web hosts just have way cooler names than others).

Finding the right Web host can take a bit of searching, and it may require making a few phone calls or just surfing around the Web. Before you start tapping away, it helps to take a look at the big picture.

Nowadays, Web hosting packages come in three main flavors:

Simplified Web site creation. In this case, the Web hosting company offers special software that promises to help you create a Web site in two or three easy steps. These tools range from terrible to awful (see Figure 3-7). After all, if you're content to create the same cookie-cutter Web site as everyone else, you probably aren't interested in HTML, and you wouldn't have picked up this book in the first place. Instead, go for standard Web site hosting and unleash your inner Web artiste.

Figure 3-7: Page design wizards give you a quick and easy way to make mediocre pages. In this example (generated for an AOL Hometown site), a tool-generated page has plain formatting and an ad banner you can't remove. Another major limitation is the page-creation software. Although it's quite good for a browser-based program, it's still slow and awkward, and lacks most of the features and conveniences you'll get if you use a regular PCbased Web editor, which you'll learn about in Chapter 4.

There's one case where simplified Web site creation makes sense—if all you want to do is create a

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy PDF of this chapter|Buy reprint rights for this chapter

Once you've signed up for Web hosting, you're ready to transfer some files to your Web space. To perform this test, you can use Lee Park's résumé from the previous chapter (which you can download from the "Missing CD" page at www.missingmanuals.com). The final version has the filename resume5.htm.

Browser-based uploading is fairly easy, but it's not always convenient. The idea is you go to a special Web page on your host's site, where you can specify the files you want to transfer. Many Web hosting companies provide both browser-based uploading and FTP-based uploading. If you're using a budget plan or a free Web host, you may not have the FTP option at all. To perform browser-based uploading, follow these steps:

Surf to the Web site of your Web hosting company.
Log in to your account with the user name and password you created when you signed up.

Usually you'll find a login box somewhere on the first page.
Browse through the icons until you find the right page for managing files.

Each Web hosting provider has its own slightly different site layout. Figure 3-12 shows what things look like at Brinkster.

Figure 3-12: Every Web hosting provider's site looks a little different, but you'll eventually find a set of text boxes that allows you to upload pages. These text boxes always work in the same way. First you click the Browse button (top image), which shows an Open File dialog box (middle). Then you browse to the file you want, select it and click Open. If you have several files to upload at once, repeat this process using different text boxes. When you've chosen all the files you want (or just run out of text boxes), click OK, and wait until the files are copied and you get a confirmation message (bottom).

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy PDF of this chapter|Buy reprint rights for this chapter

In Chapter 2, you built your first HTML page with nothing but a plain text editor and a lot of nerve. This is how all Web page gurus begin their careers. In order to really understand HTML (and 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. That's because the average HTML page is filled with tedious details. If you're forced 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 what the end result will look like when you spend all day staring at angle brackets. This is especially true when you start to tackle more complex pages, such as those that introduce a slew of graphics or organize the layout of a page with tables.

There's a definite downside to outgrowing Notepad or TextEdit—namely, it can get expensive. Professional Web design tools can cost hundreds of dollars. At one point, software companies planned to include basic Web editors in common operating systems like Windows and Mac OS. In fact, some older versions of Windows shipped with a scaled-down version of FrontPage called FrontPage Express. That's not the case today, so if you want an HTML editor, you'll have to find one on your own. Fortunately, there are free alternatives for even the most cash-strapped Web designer.

In this chapter, you'll learn how HTML 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 that are currently out there. When it comes to the basics, most Web page editors are surprisingly similar. That means you'll learn how to get started with your tool of choice, whether it's FrontPage, Dreamweaver, or a nice piece of freeware called Nvu.

Tools like Notepad and TextEdit aren't all that bad for starting out. They keep it simple, and they don't mess with your HTML (unlike a word processing program). Seeing the result of your work is just a browser refresh away. So why are you destined to outgrow your favorite text editor?

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy PDF of this chapter|Buy reprint rights for this chapter

Tools like Notepad and TextEdit aren't all that bad for starting out. They keep it simple, and they don't mess with your HTML (unlike a word processing program). Seeing the result of your work is just a browser refresh away. So why are you destined to outgrow your favorite text editor?

Nobody's perfect. With a text editor, it's just a matter of time before you make a mistake, like typing instead of . Unfortunately, you might not realize your mistake even when you view your page in your browser. (Remember, some browsers compensate for some types of mistakes; other browsers don't.) A good HTML editor can highlight problems and help you get rid of faulty HTML.
Edit-Save-Refresh. Repeat 1,000 times. Text editors are convenient for small pages. But what if you're trying to size a graphic perfectly, or line up a table column? You need to jump back and forth between your text editor and your Web browser (saving and refreshing each time). This process can literally take hours. With a good HTML editor, you get conveniences like drag-and-drop editing to fine tune your Web page. You make a few adjustments, and your editor tweaks your HTML appropriately.
Help, I'm drowning in HTML! One of the nicest little frills in an HTML editor is color coding. Color coding helps make sure those pesky HTML tags stand out against a sea of text. Without this feature, you'll be cross-eyed in hours.
Just type <ul><li></li></ul>. To create a bulleted list, of course. You haven't forgotten already, have you? The truth is, most Web authors don't memorize every tag there is. With a Web editor, you don't need to. If you forget something, there's usually a help link or a menu command to fill it in. Without a tool to guide you, you're on your own.

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy PDF of this chapter|Buy reprint rights for this chapter

Once you've chosen an HTML editor, the next step is to take it for a spin. In this section, you'll learn how to create a sample HTML document and get it online, all without leaving the comfort of your editor.

Software companies have spent the last decade copying features from their competitors and as a result, common tasks in FrontPage, Dreamweaver, and Nvu are startlingly similar. That means that no matter which program you use, the following sections will teach you the basics. Once you're comfortable with your editor, you can move on to the rest of the book and learn more about how HTML works.

Although future chapters won't lead you step by step through any of these HTML editors, look for sidebars and tips to point out occasional shortcuts, tricks, and techniques for your favorite editor.

A few years ago, there were a number of mid-level HTML editors in hot competition. Today, most have died out. The mid-level HTML editors that remain often aren't worth the expense. Instead, your best bet is to save up for one of the two leading edge HTML editors—Macromedia Dreamweaver or Microsoft FrontPage. Of the two, FrontPage is the more affordable, while Dreamweaver is more often used by professional Web developers. You may be able to find academic (or "student and teacher") editions of both programs. These editions are scaled down but still powerful, and they have a much lower price tag. You'll need to prove you're a student or starving academic to get in on the action.

One mid-level option that's actually worth considering is Macromedia HomeSite, a less powerful Web design tool that Macromedia purchased from another company to complement its line of professional Web development software. HomeSite is priced at about $100, which makes it more affordable than FrontPage or the lofty Dreamweaver. However, there's a good case to be made for sticking with the nifty (and free) Nvu editor until you're ready to move up to a more full-featured program.

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy PDF of this chapter|Buy reprint rights for this chapter

Getting text into a Web page is easy. All you need to do is open an HTML file, drop in your content, and add the occasional formatting tag. Unfortunately, getting text to look exactly the way you want is a completely different story.

One of the first things you'll notice when you start working on a site is how little control HTML gives you. When you create a Web page, you're at the mercy of your viewers' Web browsers, their bizarre preference settings, and a dozen other details beyond your control. Under these conditions, writing a perfect page feels like trying to compose a 90-minute symphony with a triangle and a pair of castanets.

Faced with these limitations, what's an enterprising Web developer to do? The first step is to learn the basic tags you can use to structure your text by marking up paragraphs, sections, and lists. That's the task you'll tackle in this chapter. The second step—which you won't dive into until the next chapter—is to apply style sheets, a powerful page formatting technology that lets you unleash your markup skills across multiple pages or even your entire site.

Sooner or later, every Web site creator discovers that designing for the Web is pretty different than designing something that's going to be printed out. Before you can unleash your inner graphic designer, there are a few conceptual hurdles to clear.

To understand the problem you're facing, it helps to consider the difference between an HTML page and a document you might create in a program like Microsoft Word. Word processing programs help you prepare your content so that you can print it out. In that environment, you know all the details about your output medium (things like the paper size, whether or not the printer supports color, what fonts are available, and so on). As a result, your word processor gives you absolute control over every detail.

HTML is a more freewheeling standard. When you create an HTML document, you have no idea who's going to look at it or what kind of monitor, screen settings, Web browser, and so on they'll be using to view it. The way your document appears could change dramatically, depending on whether the person viewing your page turns on large text, shrinks the browser window to microscopic proportions, or switches off pictures. And if people surf to your site using a trendy pocket-sized PC, they'll get a completely different view compared to those who have the latest widescreen computer monitor.

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy PDF of this chapter|Buy reprint rights for this chapter

Sooner or later, every Web site creator discovers that designing for the Web is pretty different than designing something that's going to be printed out. Before you can unleash your inner graphic designer, there are a few conceptual hurdles to clear.

To understand the problem you're facing, it helps to consider the difference between an HTML page and a document you might create in a program like Microsoft Word. Word processing programs help you prepare your content so that you can print it out. In that environment, you know all the details about your output medium (things like the paper size, whether or not the printer supports color, what fonts are available, and so on). As a result, your word processor gives you absolute control over every detail.

HTML is a more freewheeling standard. When you create an HTML document, you have no idea who's going to look at it or what kind of monitor, screen settings, Web browser, and so on they'll be using to view it. The way your document appears could change dramatically, depending on whether the person viewing your page turns on large text, shrinks the browser window to microscopic proportions, or switches off pictures. And if people surf to your site using a trendy pocket-sized PC, they'll get a completely different view compared to those who have the latest widescreen computer monitor.

HTML was designed to avoid compatibility problems by giving you less control. Instead of allowing you to place everything in an exact spot, HTML forces you to use tags to shape the basic structure of your work (for example, to indicate paragraphs, headings, and lists). However, it's up to the Web browser to decide how to display these details on a given computer. In other words, HTML was designed as a compromise that sacrifices control for the sake of simplicity, flexibility, and compatibility.

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy PDF of this chapter|Buy reprint rights for this chapter

Some text tags are so important they'll crop up in virtually every HTML document. Many of these tags are used to create block elements—chunks of content that are separated (by a line break and a little bit of extra space) on a Web page. Headings and paragraphs are two examples of block elements. When you end a block element, the browser automatically adds a line break and a little extra space before the next bit of content.

For example, consider this fragment of HTML:

	<h1>Bread and Water</h1>This economical snack is really
	all you need to sustain life.

This snippet has a title in large, bold letters followed immediately by some ordinary text. You might expect to see both parts (the heading and the ordinary text) appear on the same line. However, the <h1> tag is a block element. When you close it, the browser does a little housecleaning, and adds a line break and some extra space. The text starts on a new line, as you can see in Figure 5-3.

Figure 5-3: Block elements are always separated by a distance of approximately one and a half lines (in this figure, the space between "Bread and Water" and the sentence below).

Block elements are nice because they make it easy to format a document. For example, the spaces that exist between block elements helps insure that one section of text doesn't run into another section. However, there's also a clear downside. In some cases, you won't be happy with the automatic spacing between block elements. For example, in dense, information-laden pages, the standard spacing looks far too generous. To tighten up your text and shrink the spaces in between block elements, you need style sheets (see Chapter 6).

Interestingly, the previous example is equivalent to this more explicit HTML:

	<h1>Bread and Water</h1><p>This economical snack is really
	all you need to sustain life.</p>

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy PDF of this chapter|Buy reprint rights for this chapter

Once you've mastered paragraphs and headings, it's time to move to HTML's other set of tags for organizing text—the list tags. HTML gives you three types of lists you can create:

Ordered lists give each item in a list a number or a letter (as in 1, 2, 3 or A, B, C). They're handy when sequence is important, like when you're listing off a series of steps that tell your relatives how to drive to your house.
Unordered lists are also known as bulleted lists, because next to each item is a bullet. You can control what the bullet looks like, to some degree. You're reading a bulleted list right now.
Definition lists are handy for displaying terms followed by definitions or descriptions. For example, the dictionary is one huge definition list. In a Web page, the terms are left-aligned, and the definition is indented underneath.

In the following sections you'll learn how to create all three types.

In an ordered list, each item is numbered consecutively, starting at some value (usually 1). The neat part about ordered lists in HTML is that you don't need to supply the numbers. Instead, the browser automatically adds one to the left of each list item (sort of like the autonumber feature in Microsoft Word). This is handy for two reasons. First, it allows you to wildly insert and remove list items without screwing up your numbering. Second, the numbers and list items are carefully lined up, which isn't as easy if you're doing it on your own.

To create an ordered list, you use the <ol> tag, which is a block element. (<ol> stands for ordered list.) Then, inside the <ol> tag, you place an <li> tag for each list item you want, in order.

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy PDF of this chapter|Buy reprint rights for this chapter

As you learned earlier in this chapter, it's best not to format HTML too heavily. Instead, to get the maximum control and make it easy to update your Web site's look later on, you should head straight to style sheets (as described in the next chapter). However, there are a few formatting tags in HTML that are so commonly used that you should know them. These are inline character styles—tags you can use inside another block element, like a paragraph, heading, or list.

You've already seen these tags in Chapter 2. They're staples in HTML, allowing you to quickly format snippets of text in a few simple ways. Here's an example that uses all three— for italics, for bold, and for underline:

	<p
	<b>Stop!</b> The mattress label says <u>do not remove under penalty
	of law</u> and you <i>don't</i> want to mess with mattress companies.
	</p>

It's displayed like this in a browser:

Stop! The mattress label says do not remove under penalty of law and you don't want to mess with mattress companies.

The tag (for emphasized text) is the logical equivalent of the physical tag . In just about every browser these two tags have the same effect—they italicize text. Philosophically, the tag is a better choice, because it's more generic. When you use , you're simply indicating that you want to emphasize a piece of text, but you aren't saying how to emphasize it. You can use a style sheet later on to change how emphasized text is displayed. Possibilities include making it a different color, a different font, or a different size.

Technically, you can use style sheets to redefine the tag in the same way. However, it seems confusing to have the tag do anything except apply italics. After all, that's its name.

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy PDF of this chapter|Buy reprint rights for this chapter

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

Style sheets are separate documents that are filled with formatting rules. The browser reads these rules and uses them to format your Web page. For example, a style sheet rule might say, "make all headings bold and fuchsia and draw a box around each one."

There's several reasons that you place formatting instructions in a style sheet instead of directly in a Web page. The most obvious one is reuse. For example, thanks to style sheets, you can create a single rule that you can use with every level three heading in every Web page on your Web site. The second reason is that style sheets help you make tidy, manageable HTML. Because they do all the formatting, your HTML code doesn't need to. All your HTML needs to do is organize the page into logical sections. (For a quick recap of the difference between structuring and formatting a Web page, refer back to Section 5.1.2.)

The formatting choices in style sheets are much more extensive (and much more overwhelming) than those in HTML alone. Using style sheets, you can control colors, borders, margins, alignment, and (to a limited degree) fonts. You'll use style sheets in this chapter and throughout this book. As you'll see, style sheets give you options that can jazz up the dullest HTML.

Style sheets are officially known as the cascading style sheet (CSS) standard. CSS is a system for defining rules about how one or more Web pages should be formatted. When you use CSS in a Web page, the browser reads both the page's HTML and the style sheet rules. It then uses the style sheet rules to format the page. Figure 6-1 diagrams the process.

Figure 6-1: When you surf to a page that uses a style sheet, the following things happen. 1) Your browser requests the HTML page from the Web server. 2) The browser finds an instruction in the HTML page that indicates that the page uses a style sheet. The browser then grabs that style sheet with a separate request. 3) The browser chews through the HTML in the Web page, and uses the rules in the style sheet to adjust its appearance.

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy PDF of this chapter|Buy reprint rights for this chapter

Style sheets are officially known as the cascading style sheet (CSS) standard. CSS is a system for defining rules about how one or more Web pages should be formatted. When you use CSS in a Web page, the browser reads both the page's HTML and the style sheet rules. It then uses the style sheet rules to format the page. Figure 6-1 diagrams the process.

Figure 6-1: When you surf to a page that uses a style sheet, the following things happen. 1) Your browser requests the HTML page from the Web server. 2) The browser finds an instruction in the HTML page that indicates that the page uses a style sheet. The browser then grabs that style sheet with a separate request. 3) The browser chews through the HTML in the Web page, and uses the rules in the style sheet to adjust its appearance.

This system gives Web weavers the best of both worlds—a rich way to format pages and a way to avoid mucking up your HTML beyond recognition. In an ideal world, the HTML document describes only the structure of a Web page (what's a header, what's a paragraph, what's a list, and so on), and the style sheet explains how to give that Web page a hot new look.

Before you even get started learning how to write CSS rules, you first have to think about where you're going to place those instructions. CSS gives you three different ways to apply style sheets to a Web page:

An external style sheet is a style sheet that's stored in a separate file. This is the most powerful approach, because it completely separates the formatting rules from your HTML pages. It also gives you an easy way to apply the same rules to many pages.
An internal style sheet is a style sheet that's embedded inside an HTML document (it goes right inside the <head> element). You still have the benefit of separating the style information f

Table of Contents