Special Edition Using HTML 2nd Edition - Chapter 14 HTML Style Sheets Copyright ©1996, Que Corporation. All rights reserved. No part of this book may be used or reproduced in any form or by any means, or stored in a database or @retrieval system without prior written permission of the publisher except in the case of brief quotations embodied in critical articles and reviews. Making copies of any part of this book for any purpose other than your own personal use is a violation of @United States copyright laws. For information, address Que Corporation, 201 West 103rd Street, Indianapolis, IN 46290 or at support@mcp.com.

Notice: This material is excerpted from Special Edition Using HTML, 2nd Edition, ISBN: 0-7897-0758-6. This material has not yet been through the final proof reading stage that it will pass through before being published in printed form. Some errors may exist here that will be corrected before the book is published. This material is provided "as is" without any warranty of any kind.

Chapter 14 HTML Style Sheets

by Mark Brown

The hardest part of learning to swim is overcoming your fears and getting into the pool. That's what this chapter is for. If you're contemplating putting up your own personal or corporate Web site but aren't quite sure where to begin, in this chapter you find HTML templates for each type so that you can get into the pool.

Before you start, though, you might want to refer to chapter 3, "Distributing Information with HTML," where you learn what should go on Web pages, and how and why. After you get your feet wet, then come back and dive right in.

You don't jump off into the deep end, though. In this chapter, you don't get in over your head. You learn how to put together some simple but attractive Web pages that you can easily modify and build up to create custom personal and professional Web pages to meet a variety of needs. You don't get into advanced HTML coding, CGI-bin programming, or anything like that.

After you've mastered the basic strokes, you might want to move on to chapters 21, "Forms and How They Work," and 22, "Form Layout and Design," which go in-depth into the design and development of two advanced @Web sites with multiple pages and lots of elements. That's the place where you begin training for the Olympics.

In this chapter, you discover the following:

Creating Personal Web Pages

To make the process of creating personal Web pages easy, follow along with a newbie Web developer who is going through the process of putting up his first Web page. He may know more than you do; he may know less. That doesn't matter, because the steps are the same no matter what your level of expertise.

Picking a Topic

Out there among you is a guy named Fred who's been reading this book at about the same pace you have, and who is starting to think he might know just about enough to put his own home page on the Web.

He has read and re-read chapter 3 and has a pretty good idea of what kinds of information are appropriate (and inappropriate) for Web sites. He's been thinking about what subject he might focus on, because he remembers that the number one rule for creating an appealing Web site is to focus the topic.

Fred likes @golf more than about anything else in the world, but thousands of Web sites cover the topic of @golf. Besides, "golf" just isn't focused enough. Putting up a @golf page would be almost as bad as putting up a page for "sports" in general.

The most important corollary to the principle of focusing your topic is to pick a focal point about which you know something extra. That way, you can present new, fresh information that isn't just a rehash of what's already on the Web. Because if it's already there somewhere, why put up the information again? On the Web, all you have to do is provide a link to the other sites, and you're done. You don't have to re-create the same information.

After carefully considering his options, Fred has decided to build a @Web site devoted to the subject of "@Making Your Own Golf Clubs."

Fred started making his own clubs because he's a good player, and he thought he could get a little better if he had some really top-of-the-line clubs. Problem is, they cost a fortune. Not only that, but Fred is a bit on the diminutive side-and left-handed, to boot-so finding clubs that fit him is a problem. So he lined up some suppliers, bought a couple of tools, made a few mistakes, and eventually put together an excellent set of custom clubs for himself at a fraction of the cost of a top-quality name-brand pro set.

After Fred started playing his own custom clubs, other players began to admire them, and he started making a few for other people on the side. At first, he did this for only a few friends, but his hobby soon expanded into a garage business that is now making him a couple hundred bucks every month.

Fred knows a lot about the topic and thinks that sharing what he knows might be fun. He believes that people would show an interest because he's already found a lot of interest among his friends and acquaintances. He's searched Yahoo!, Webcrawler, and Lycos and couldn't find a thing about making golf clubs, so he knows that his site will be unique.

Fred's not concerned about drumming up business-word of mouth is giving him all the business he wants. He just wants some fame and glory and perhaps a thank you note in his e-mail box once in a while.

Planning Content

@Fred's first impulse is to gather together a bunch of cool @golf-related graphics and start creating his page. He's about to dive in when he remembers that the second step is not to create but to plan. So he sits down with pencil and paper and thinks about what he might want to put on-line.

After a few false starts, some whittling down, and some inspirational additions, Fred finally comes up with the following list of things he definitely wants on his Web site:

The @video is a real inspiration. His friend Sheila runs the multimedia lab at the local university, and a quick call to her confirms that she can get studio time to videotape the whole golf club creation process and digitize it into an .avi file that can be uploaded to his site. She thinks the project is interesting, and is looking forward to doing it. Problem is, her schedule is full, and she can't do anything until next month. Rather than let Sheila's schedule be a setback and just omit the video, Fred decides to make a "Coming Soon!" tag to let people know that it's on the way. That will keep them coming back.

Fred has a lot of excellent information on his list, and every element is relevant to his focus topic. This, he thinks, is going to be a great Web site!

Creating a Home Page

Fred knows that he needs to organize first, so he decides to just jump right in and create his home page. He figures it's just as easy to outline right on the HTML page as it is to come up with some artificial outline first and then try to figure out how to "HTML-ize" it. And he's right.

He knows he can use any word processor or text editor to create an HTML document, but he's checked out the CD-ROM in the back of this book and has been playing around with HTML Writer, so he thinks he'll use it instead. Fred thinks that HTML Writer might help him remember and keep track of what all those HTML tags are for. He's right again. (See fig. 14.1.)

Fig. 14.1

@HTML Writer is an excellent @HTML editor that can provide a level of comfort and support during the @Web page-creation process.

Fred begins by laying out a @generic minimum HTML document, using chapters 4, "Building Blocks of HTML," and 5, "The TITLE, HEAD, and HTML Tags," as a guide:

<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>

He knows that every HTML document needs to be surrounded by <HTML></HTML> containers, and it must have a HEAD section, a TITLE section inside the HEAD, and a BODY section, in that order.

Fred decides that he wants a title and a subtitle for sure, so he adds two generic lines:

<H1>Title</H1>
<H2>Subtitle</H2>

He knows that what he puts between the <TITLE></TITLE> tags is actually just the name that will appear in the browser's window border. His Title and @Subtitle lines are in the big H1 and H2 heading styles, so they'll be really visible.

Fred knows that the polite practice is to tell viewers when a page was last updated and to provide an easy means for them to e-mail comments. So, Fred adds three more lines of @HTML at the end of the document, just before the closing </BODY></HTML> tags:

<HR>
Last Updated DATE.<br>
Please address all questions or comments to ADDRESS

The <HR> adds a horizontal rule to set off these lines from the rest of the page. Fred can't quite remember how to make the last line a link to e-mail him automatically when someone clicks it, so he just puts in the word ADDRESS for now.

Fred thinks a bit about how he wants to organize his information and decides that he wants to keep his home page small (no more than two display screens tall), with links that will jump to other pages with the actual information. (Good for him!) So he makes a list of links that are enticing titles for his subject matter. He decides to put them in a list, like this:

<UL>
<LI>Menu
</UL>

The <UL></UL> container makes this list "unordered," or bulleted. Each menu item will have its own <LI> line when he is through.

Fred then checks the list he made on paper before starting and remembers that he wants to have some links to other golf-related Web sites. Because his list of links is bigger than he wants to include on his home page, he decides to give the list its own page, too. On his home page, he can just link to the list with this line near the bottom of the page, above the bottom horizontal rule:

<STRONG>CLICK <A HREF="">HERE</A> FOR A LIST OF LINKS!</STRONG>

He doesn't have a URL for his links page yet, so he leaves the HREF="" part empty.

This is what Fred's home page looks like so far:

<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
<H1>Title</H1>
<H2>Subtitle</H2>
<HR>
<UL>
<LI>Menu
</UL>
<STRONG>CLICK <A HREF="">HERE</A> FOR A LIST OF LINKS!</STRONG>
<HR>
Last Updated DATE.<br>
Please address all questions or comments to ADDRESS
</body>
</html>

Fred saves his work and clicks the big @eyeball icon on the @HTML Writer screen, which previews his work in Netscape, as shown in figure 14.2.

Fig. 14.2

@Fred's bare-bones Web page is previewed in @Netscape Navigator 2.0.

Fred's pretty pumped about the fact that his first effort has actually resulted in something being displayed in Netscape. Maybe this HTML stuff isn't so tough after all!

Now he buckles down. First, he fleshes out the top of the page. Because the top is what people will see first, it's got to draw them in.

<HEAD>
<TITLE>How to Make Your Own Golf Clubs</TITLE>
</HEAD>
<BODY>
<H1>[How To Make Your Own Golf Clubs]</H1>
<H2>Making Your Own Clubs is Fun</H2>
<H3>And Profitable Too!</H3>
<H4>*COMING SOON!* Online Video Instructions! *COMING SOON!*</H4>
<HR>

Fred makes the @window TITLE "How to Make Your Own Golf Clubs" to match the H1 header. As he's typing in the H1 header, though, he realizes that he doesn't really want a header. He wants a graphic logo. It's the first item on his list, and he forgot it! Oh, well. For now, he types [How To Make Your Own Golf Clubs] in as an H1 header. He surrounds the text with brackets [] to remind himself that this title is just a placeholder for a graphic he has yet to create.

He rounds out the header information with H2 and H3 headers that proclaim how fun and profitable making golf clubs can be, and he finishes up with an H4 header with the announcement about the video, surrounded by *COMING SOON* notes. He adds a horizontal rule to separate the header information from the rest of his home page.

Having learned from the title graphic fiasco, he checks his list to see whether he wants to add any other graphics, and sees that his site will contain both diagrams and photos. Though he knows now that they will appear on separate pages, he decides that a small graphic for each of them should go on his home page with a link to the pages that actually contain the images. So he adds this line, just to remind himself later that he has to make some "icon" graphics:

[DIAGRAM][PHOTO]<BR>

He finishes off by adding the date to his update line and his e-mail address in place of ADDRESS (though he still hasn't figured out how to link it). Here's Fred's home page so far:

<HTML>
<HEAD>
<TITLE>How to Make Your Own Golf Clubs</TITLE>
</HEAD>
<BODY>
<H1>[How To Make Your Own Golf Clubs]</H1>
<H2>Making Your Own Clubs is Fun</H2>
<H3>And Profitable Too!</H3>
<H4>*COMING SOON!* Online Video Instructions! *COMING SOON!*</H4>
<HR>
<UL>
<LI>Menu
</UL>
[DIAGRAM][PHOTO]<BR>
<STRONG>CLICK <a href="golflink.htm">HERE</a> 
FOR A LIST OF AWESOME GOLF LINKS!</STRONG>
<HR>
Last Updated February 16, 1996.
Please address all questions or comments to fred18@golf.net
</BODY>
</HTML>

Figure 14.3 shows what Fred's page looks like now.

Fig. 14.3

Fred's home page is coming along fine. Though still pretty generic, it has most of the elements in place.

Though things are progressing nicely, the time has come for Fred to make a few decisions. He decides he's definitely going to have three documents besides his home page: one for the Why arguments, one for the How instructions, and one for his list of links. He decides to name them why2make.htm, how2make.htm, and golflink.htm. Now he can go ahead and create his menu list.

First, Fred makes a list of menu items:

<UL>
<LI>Why Make Your Own Clubs?
<LI>To Save Money
<LI>To Make Money
<LI>To Customize Your Clubs to You!
<LI>How To Make Your Own Clubs
<LI>Tools
<LI>Suppliers
<LI>Step-by-step Instructions
</UL>

Each of these lines is a link, so Fred adds an <A></A> anchor container to each line, with the URL of the appropriate page:

<UL>
<LI><A HREF="why2make.htm">Why Make Your Own Clubs?</A>
<LI><A HREF="why2make.htm">To Save Money</A>
<LI><A HREF="why2make.htm">To Make Money</A>
<LI><A HREF="why2make.htm">To Customize Your Clubs to You!</A>
<LI><A HREF="how2make.htm">How To Make Your Own Clubs</A>
<LI><A HREF="how2make.htm">Tools</A>
<LI><A HREF="how2make.htm">Suppliers</A>
<LI><A HREF="how2make.htm">Step-by-step Instructions</A>
</UL>

The list is good, but Fred thinks that something just doesn't feel right about it. He thinks for a minute and then realizes that all eight of his links go to just two destinations. That doesn't seem very helpful. A little page-turning through this book reveals that a link can lead not only to a whole @Web page, but to a particular spot on that page. So, Fred decides that only one link each should go to the tops of the two pages, and he adds the syntax for jumping to a named anchor for each of the rest. Because he doesn't know the names yet, he just puts in the octothorpe (#) so that he knows to add the names later:

<UL>
<LI><A HREF="why2make.htm">Why Make Your Own Clubs?</A>
<LI><A HREF="why2make.htm#">To Save Money</A>
<LI><A HREF="why2make.htm#">To Make Money</A>
<LI><A HREF="why2make.htm#">To Customize Your Clubs to You!</A>
<LI><A HREF="how2make.htm">How To Make Your Own Clubs</A>
<LI><A HREF="how2make.htm#">Tools</A>
<LI><A HREF="how2make.htm#">Suppliers</A>
<LI><A HREF="how2make.htm#">Step-by-step Instructions</A>
</UL>

Fred's named anchors will be created on the how2make.htm and why2make.@htm pages using the @anchor tag <A> with the NAME attribute, like this:

<A NAME="tools">Tools</A>

In this example, the preceding line would appear in the how2make.htm file in the spot where Fred wanted this link from his home page to jump to

<A HREF="how2make.htm#tools">Tools</A>

The @#tools portion of the HREF attribute makes this link jump to the tools value of the @NAME attribute on the how2make.htm page.

Finally, Fred has figured out that his automatic @e-mail line at the bottom of the page needs a @mailto: reference, and he encloses the whole line with the ADDRESS text format, as follows:

<ADDRESS>Please address all questions or comments to <A HREF="mailto:fred18@golf.net">fred18@golf.net</A></ADDRESS>

His home page now looks like the following, and appears as shown in figure 14.4.

<HTML>
<HEAD>
<TITLE>How to Make Your Own Golf Clubs</TITLE>
</HEAD>
<BODY>
[How To Make Your Own Golf Clubs]
<H2>Making Your Own Clubs is Fun</H2>
<H3>And Profitable Too!</H3>
<H4>*COMING SOON!* Online Video Instructions! *COMING SOON!*</H4>
<HR>
<UL>
<LI><A HREF="why2make.htm">Why Make Your Own Clubs?</A>
<LI><A HREF="why2make.htm#">To Save Money</A>
<LI><A HREF="why2make.htm#">To Make Money</A>
<LI><A HREF="why2make.htm#">To Customize Your Clubs to You!</A>
<LI><A HREF="how2make.htm">How To Make Your Own Clubs</A>
<LI><A HREF="how2make.htm#">Tools</A>
<LI><A HREF="how2make.htm#">Suppliers</A>
<LI><A HREF="how2make.htm#">Step-by-step Instructions</A>
</UL>
[Diagrams][Photos]<BR>
<STRONG>CLICK <a href="golflink.htm">HERE</a> FOR A LIST OF AWESOME GOLF LINKS!</STRONG>
<HR>
<EM>Last Updated February 16, 1996.</EM>
<ADDRESS>Please address all questions or comments to <A HREF="mailto:fred18@golf.net">fred18@golf.net</A></ADDRESS>
</BODY>
</HTML>

Fig. 14.4

Fred's home page is shaping up nicely. Now it's time to add some graphics!

There's no putting it off any longer-Fred knows it's time to buckle down and create some @graphics. Though he's not much of an artist, he does have a CD-ROM full of clip art at hand, and he manages to find some golf-related images that should do nicely with a little modification.

Remember not to use any copyrighted materials on your Web pages. Though Fred's CD-ROM collection of clip art is copyrighted, the end-user license agreement specifically allows him use of the images without paying royalties.

Fred fires up his copy of @Paint Shop Pro (see fig. 14.5) and goes to work.

Fig. 14.5

A good @graphics program is indispensable for @Web page creation. A shareware program like Paint Shop Pro, shown here, works fine.

Knowing that he wants his @home page to look good on any @graphic browser, Fred opts to keep his @graphics to the 16 standard Windows colors, and to format them so they'll look good on a 640X480 screen. This way, they load faster, too. He checks his list and sees he's got three images to create for his home page:

After Fred looks back at the preview of his page in Netscape, he realizes that he'd really love to have two more graphics:

He knows he can get into big trouble if his background pattern is too gaudy, and it's a browser-specific design, but Fred figures if he's careful, he can come up with something tasteful that won't get in the way, and that won't really be missed on browsers that can't display it.

Figure 14.5 shows what he found-a huge golf ball that he had to trim, resize, and recolor in subtler (not black and white) shades. He also trimmed, resized, recolored, and generally mucked around with clip art images of a @golf bag and a set of three @golf clubs to get his photo icon and logo. The diagram icon he finally ended up drawing by hand so that it would look like a diagram. He made the two icon images the same size so they'd look good side-by-side, and made the logo big enough to make an eye-catching display without taking over the entire screen.

Fred has been @reading chapter 10, "Adding Graphics to Your Home Page," though, and wants to make the background of his logo transparent so that the background graphic will shine through. @Paint Shop Pro doesn't create transparent @GIF images, so Fred converts his logo by using LView Pro (see fig. 14.6), which is used by many Web page designers for just this purpose.

Fig. 14.6

@LView Pro is an excellent Windows/Win95 tool for creating transparent @GIF images for @Web pages.

Fred's home page is nearly done. He adds anchor links to all the graphics he's created and keeps the placeholder names he was using as ALT definitions for non-graphical browsers. He goes back and fills in names for the named anchors in his list items. Finally, Fred adds background color and a background graphic to the @BODY tag, and his @home page looks like this:

<HTML>
<HEAD>
<TITLE>How to Make Your Own Golf Clubs</TITLE>
</HEAD>
<BODY BGCOLOR=#00ff00 BACKGROUND="golfball.gif">
<IMG SRC="clublogo.gif" ALT="[How To Make Your Own Golf Clubs]">
<H2>Making Your Own Clubs is Fun</H2>
<H3>And Profitable Too!</H3>
<H4><IMG SRC="comesoon.gif" ALT="*COMING SOON!*"> Online
 Video Instructions! <IMG SRC="comesoon.gif" ALT="*COMING SOON!*"></H4>
<HR>
<UL>
<LI><A HREF="why2make.htm">Why Make Your Own Clubs?</A>
<LI><A HREF="why2make.htm#savemoney">To Save Money</A>
<LI><A HREF="why2make.htm#makemoney">To Make Money</A>
<LI><A HREF="why2make.htm#customize">To Customize Your Clubs to You!</A>
<LI><A HREF="how2make.htm">How To Make Your Own Clubs</A>
<LI><A HREF="how2make.htm#tools">Tools</A>
<LI><A HREF="how2make.htm#suppliers">Suppliers</A>
<LI><A HREF="how2make.htm#steps">Step-by-step Instructions</A>
</UL>
<A HREF="how2make.htm/#diagrams><IMG SRC="diagrams.gif" ALT="[Diagrams]"></A>
<A HREF="why2make.htm/#photos><IMG SRC="photos.gif" ALT="[Photos]"></A>
<BR>
<STRONG>CLICK <a href="golflink.htm">HERE</a> FOR A LIST OF
 AWESOME GOLF LINKS!</STRONG>
<HR>
<EM>Last Updated February 16, 1996.</EM>
<ADDRESS>Please address all questions or comments to <A HREF="mailto:fred18@golf.net">fred18@golf.net</A></ADDRESS>
</BODY>
</HTML>

When Fred loads his page into Netscape, he is thrilled to see all his graphics come through with flying colors. His background color is putting-green green, and everything looks great (see fig. 14.7).

Fig. 14.7

Fred's home page is almost done. He just needs to align a few things better, and he's got a home page!

For a short discourse on color names and values, see the sidebar "What's in a Color Name?" in chapter 16

Except...

Nothing is centered. He forgot about centering. And the little "Coming Soon!" @graphics aren't aligned properly with the text. Then, too, his list just doesn't look right. Fred needs to break it up into two main categories, with three subcategories under each. He decides to leave bullets for the main categories but number the subcategories using the OL (ordered list) tag. Now his Web page looks like this:

<HTML>
<HEAD>
<TITLE>How to Make Your Own Golf Clubs</TITLE>
</HEAD>
<BODY BACKGROUND="golfball.gif" BGCOLOR="#00FF00" TEXT="#000000" 
LINK="#0000FF" VLINK="#008888">
<DIV ALIGN=CENTER>
<IMG SRC="clublogo.gif" ALT="[How To Make Your Own Golf Clubs]">
<H2>Making Your Own Clubs is Fun</H2>
<H3>And <FONT COLOR=#FF0000>Profitable</FONT> Too!</H3>
<H4><IMG SRC="comesoon.gif" ALIGN=MIDDLE ALT="*COMING SOON!*"> 
Online Video Instructions! <IMG SRC="comesoon.gif" ALIGN=MIDDLE 
ALT="*COMING SOON!*"></H4>
</DIV>
<HR>
<UL>
<LI><A HREF="why2make.htm">Why Make Your Own Clubs?</A>
<OL>
<LI><A HREF="why2make.htm#">To Save Money</A>
<LI><A HREF="why2make.htm#">To Make Money</A>
<LI><A HREF="why2make.htm#">To Customize Your Clubs to You!</A>
</OL>
<LI><A HREF="how2make.htm">How To Make Your Own Clubs</A>
<OL>
<LI><A HREF="how2make.htm#">Tools</A>
<LI><A HREF="how2make.htm#">Suppliers</A>
<LI><A HREF="how2make.htm#">Step-by-step Instructions</A>
</OL>
</UL>
<DIV ALIGN=CENTER>
<A HREF="how2make.htm/#diagrams"><IMG SRC="diagrams.gif" ALT="[Diagrams]">
<A HREF="why2make.htm/#photos"><IMG SRC="photos.gif" ALT="[Photos]">
<BR>
<STRONG>CLICK <A Href="golflink.htm">HERE</A> FOR A LIST OF
 AWESOME GOLF LINKS!</STRONG>
<HR>
<EM>Last Updated February 16, 1996.</EM>
<ADDRESS>Please address all questions or comments to <A HREF="mailto:fred18@golf.net">fred18@golf.net</A></ADDRESS>
</DIV>
</BODY>
</HTML>

Rather than use @Netscape's non-standard CENTER tag, Fred opts for the @HTML 3.0 standard <@DIV ALIGN=CENTER> option, just to be "legal." He's also added TEXT, LINK, and VLINK color attributes to the BODY tag, just to make sure that his text shows up on that green background.

A final check in Netscape (see fig. 14.8 and fig. 14.9) shows that all is well with Fred's home page. It looks great!

Fig. 14.8

Fred's home page is done, and it looks great!

Fig. 14.9

Even the bottom half of Fred's home page looks good!

He's not done, of course. He still has a lot of work ahead of him preparing the content pages to which his home page links. But Fred is off to a very good start.

Creating Corporate Web Pages

The steps involved in developing a @Web presence for your company are not much different from those for building a quality personal home page. In fact, if you're developing a business site, you have one big advantage. You already know the message you want to deliver on the Web-you want to sell something!

You have to hone that generic goal down a bit, of course, to whether you want to sell a product, a service, an image, your stock, or something else. But the bottom line is simply that whatever you put on the Web should in some way positively affect your bottom line.

For the next example, see what Honest Joe has done with his Web site for Honest Joe's Used Cars.

Focusing the Pitch

"You're putting a used car lot on the Web? Har, Har, Har!" was the reaction of Joe's main competitor when he found out what Joe had in mind. Since then, Joe has had the last laugh-all the way to the bank.

You see, even though Joe knows it's the "World Wide" Web, he also knows two other things: (1) Being on the Web is almost free, and (2) the "world" includes Milwaukee, where he sells cars. In fact, a lot of high-tech companies are located in the Milwaukee area. He knows. He's already sold cars to hundreds of their employees. In fact, thousands upon thousands of Web-browsing potential customers reside in the @Milwaukee area. Joe knows that lots of them are techie-types who might not be comfortable shopping for a car on a used car lot. But they love shopping for one on the Web!

Joe introduced computers into his car @showroom in the early '80s and has supervised upgrade installations a half dozen times since then. He knows computers pretty well. He studied this book until he got a pretty good handle on HTML; then he sat down and put together a set of Web pages that he felt would appeal to his potential techie customers.

Joe knew he wanted to tell them four major points:

  1. He offers easy credit terms.
  2. He has a wide selection of cars, from sporty models for young, single programmers to family vans for middle-management types.
  3. His cars are good, quality-checked vehicles.
  4. His stock turns over constantly, and viewers should check back often for new listings.

Joe knew that the convenience of car shopping on the Web would draw in customers, and the immediacy of seeing new listings daily would keep them coming back until they bought from him.

A Corporate Home Page

Joe decided to put a few "hot" listings up front on his home page, along with a flashy, easy-to-use clickable image map to send his customers off to information pages about credit, quality, and so on. Problem is, he really had no clue about how to create a clickable image map. He knew it involved CGI-bin programming, which sounded scary. But he thought about it, experimented a bit, and came up with a design that worked well without requiring any fancy stuff.

See chapter 12, "Graphics Navigation with Imagemaps," and chapter 15, "Netscape-Specific Extensions to HTML"

Joe's solution involved putting six small @graphics together on the page in two rows of three, with this @HTML code:

<center>
<a href="quality.htm"><img src="chekmark.gif" alt="[Quality Checkmark]"></a>
<a href="aboutjoe.htm"><img src="joetop.gif" alt="[Honest Joe's Used Cars]"></a>
<a href="vans.htm"><img src="2doorvan.gif" alt="[Family Vans]"></a>
<br>
<a href="cars.htm"><img src="blusedan.gif" alt="[Sporty Sedans]"></a>
<a href="happycar.htm"><img src="joebottm.gif" alt="[Home of the Happy Red Car!]"></a>
<a href="terms.htm"><img src="wallet.gif" alt="[Cash or Credit!]"></a>

Each image is the same size as all the others, so the resulting grid is a symmetrical rectangular area with six @clickable areas, as shown in figure 14.10.

Fig. 14.10

@Honest Joe's Used Car's simulates a @clickable image map by stacking six linked images. This view is in Netscape Navigator 2.0.

Of course, the solution isn't perfect. It leaves a colored link rectangle around each image. But Joe figures he can live with it for now, and it looks okay. In fact, it has a kind of windowpane effect.

Joe could get rid of the @windowpane effect by adding the following attributes to the @BODY tag:

<BODY BGCOLOR=#ffffff TEXT=#000000 LINK=#ffffff VLINK=#ffffff>

This line sets the page's background color to white, the text color to black, and the color of both followed and unfollowed links to white. Because links are the same color as the background, the windowpanes would go away.

Unfortunately, so would the text of all the text links on the page, so this solution just isn't very friendly. However, Joe can use it in situations in which he doesn't have any text links to worry about.

Two of the outside @graphics link to @Joe's latest up-to-date (Joe updates it himself daily) list of used sedans and @vans. The graphic in the upper left goes to a page that describes Joe's 12-point quality inspection and guarantee. The lower-right image leads to a page about Joe's friendly credit terms.

Joe has bowed to vanity a bit on this page-the top middle @graphic jumps to a page that tells all about the dealership, complete with pictures of all the salesmen. This link is not totally for vanity's sake-Joe wants repeat customers, and the best way to get them back is to remind them who they dealt with last time and how nice they were. The bottom middle graphic goes to a page that talks about the "Happy Red Car," an Honest Joe's trademark for over 30 years. Everyone in Milwaukee knows about the @Happy Red Car. It's in all of Honest Joe's TV commercials on the late news, and it's in all the parades in the Milwaukee area from St. Patrick's Day (when it's painted green, and Joe drives it dressed up like a leprechaun) to Thanksgiving. In other words, the @Happy Red Car link is a good tie-in to Joe's other @promotional efforts.

Before you begin building your corporate Web pages, sit down and ask yourself just what exactly it is you are trying to do. Chapter 3 provides some guidance, and lots of good advice is also available on the Web.

One good place to start is Dr. Ralph F. Wilson's "12 @Web Page Design Decisions Your Business or @Organization Will Need to Make." Though he'll try to sell you his services along the way, the questions he steps you through on-line are right on the money. Check it out at http://www.wilsonweb.com/rfwilson.

Yahoo! offers a list of helpful sites at http://www.yahoo.com/Computers_and_Internet/Internet/World_Wide_Web/Authoring.

Joe follows the grid of images with a @tagline giving the address and phone number of his car lot. Being civic-minded, he makes the "Milwaukee, Wisconsin" part of his address a link to the local Chamber of Commerce promotional page for the city, as follows:

<hr>
<h3>Honest Joe's Used Cars  2300 Lakeside Ave.  <a href="http://www.milwaukee.net/">Milwaukee, Wisconsin</a> 
333-555-1111</h3>
<hr>
</center>

After these lines, he's done with header stuff, so he adds a horizontal rule to divide the rest of the page and turns off centering.

Unlike Fred, Joe uses the non-standard <CENTER> tag rather than the HTML 3.0 <@DIV ALIGN=CENTER> element. On a practical basis, using either one makes little difference.

Now come the car listings. First, Joe tells people that over 100 new cars are available; then he lists just six of them. Man, that Joe is a salesman! Only the best "featured" cars are listed on @Joe's home page, and he offers an irresistible blurb and @hotlink to each. Each featured car has its own page, complete with @digitized picture and full sales pitch, and they're updated weekly. Finally, he provides links that lead to two separate pages for all the rest-one for sedans and one for vans. These links are the same as those for the graphic sedan and van links in the image map at the top of the page:

Over 100 <img src="new.gif" alt="NEW"> models this week!<br>
<img src="bulletbl.gif" alt="*"><a href="92cutlas.htm">1992 Olds Cutlass</a><img src="hot.gif" alt="HOT!"> <b>*executive car*</b><br>
<img src="bulletbl.gif" alt="*"><a href="95carvan.htm">1995 Dodge Caravan</a> <b>*loaded*</b><br>
<img src="bulletbl.gif" alt="*"><a href="94cavlir.htm">1994 Chevy Cavalier</a> <b>*low mileage*</b><br>
<img src="bulletbl.gif" alt="*"><a href="96taurus.htm">1996 Ford Taurus</a><img src="hand.gif" alt="<-"> <b>*the boss's wife's car!*</b><br>
<img src="bulletbl.gif" alt="*"><a href="77ramchg.htm">1977 Dodge Ramcharger</a> <b>*muscle car*</b><br>
<img src="bulletbl.gif" alt="*"><a href="73beetle.htm">1973 VW Beetle</a> <b>*clean*</b><br>
<b>Click here for even more new <a href="cars.htm">cars</a> and <a href="vans.htm">vans</a>!</b>
<p>

Joe could use a bulleted list for his featured autos, but he wants to use fancy graphic bullets instead.

Finally, Joe finishes up with the electronic equivalent of a hearty handshake and an invitation to come back again:

<center>
<hr>
<i>New cars and vans are arriving every day!<br>
<b>Bookmark</b> this page and come back often!</i><br>
<strong>Thanks for visiting Honest Joe's Used Cars.</strong>
</center>
<hr>
<strong>Page last updated April 1, 1996</strong>
<address>Email comments to: <a href="mailto:joe@joescars.com">joe@joescars.com</a></address>
<a href="http://www.joescars.com">http://www.joescars.com</a>

Here's the entire home page for Honest Joe's Used Cars:

<html>
<head>
</head>
<title>Honest Joe's Used Cars</title>
<!-- milwaukee wisconsin used cars pre-owned autos automobiles 
bargains deals easy credit terms -->
<body>
<center>
<a href="quality.htm"><img src="chekmark.gif" alt="[Quality Checkmark]"></a>
<a href="aboutjoe.htm"><img src="joetop.gif" alt="[Honest Joe's Used Cars]"></a>
<a href="vans.htm"><img src="2doorvan.gif" alt="[Family Vans]"></a>
<br>
<a href="cars.htm"><img src="blusedan.gif" alt="[Sporty Sedans]"></a>
<a href="happycar.htm"><img src="joebottm.gif" alt="[Home of the Happy Red Car!]"></a>
<a href="terms.htm"><img src="wallet.gif" alt="[Cash or Credit!]"></a>
<hr>
<h3>Honest Joe's Used Cars  2300 Lakeside Ave.  <a href="http://www.milwaukee.net/">Milwaukee, Wisconsin</a> 
333-555-1111</h3>
<hr>
</center>
Over 100 <img src="new.gif" alt="NEW"> models this week!<br>
<img src="bulletbl.gif" alt="*"><a href="92cutlas.htm">1992 Olds Cutlass</a><img src="hot.gif" alt="HOT!"> <b>*executive car*</b><br>
<img src="bulletbl.gif" alt="*"><a href="95carvan.htm">1995 Dodge Caravan</a> <b>*loaded*</b><br>
<img src="bulletbl.gif" alt="*"><a href="94cavlir.htm">1994 Chevy Cavalier</a> <b>*low mileage*</b><br>
<img src="bulletbl.gif" alt="*"><a href="96taurus.htm">1996 Ford Taurus</a><img src="hand.gif" alt="<-"> <b>*the boss's wife's car!*</b><br>
<img src="bulletbl.gif" alt="*"><a href="77ramchg.htm">1977 Dodge Ramcharger</a> <b>*muscle car*</b><br>
<img src="bulletbl.gif" alt="*"><a href="73beetle.htm">1973 VW Beetle</a> <b>*clean*</b><br>
<b>Click here for even more new <a href="cars.htm">cars</a> and <a href="vans.htm">vans</a>!</b>
<p>
<center>
<hr>
<i>New cars and vans are arriving every day!<br>
<b>Bookmark</b> this page and come back often!</i><br>
<strong>Thanks for visiting Honest Joe's Used Cars.</strong>
</center>
<hr>
<strong>Page last updated April 1, 1996</strong>
<address>Email comments to: <a href="mailto:joe@joescars.com">joe@joescars.com</a></address>
<a href="http://www.joescars.com">http://www.joescars.com</a>
</body>
</html>

Joe doesn't bother setting any fancy background images or colors, or the text colors for his page. He wants everyone to be able to see his pages. But he does make the backgrounds of all his GIF graphics (including the bullets) transparent so that whatever colors his customers pick in their browsers will shine right through.

Joe has read all about how Webcrawler robot indexing programs work, so he's added this comment line near the top of his home page:

<!-- milwaukee wisconsin used cars pre-owned autos @automobiles

bargains deals easy @credit terms -->@

He figures that the robots will pick out all these terms and add them to their index lists. That way, if a user checks for any of these keywords in an index that has "crawled" his @home page, he or she will find a link to Joe's site.

Pretty sharp, that Joe.

Joe's already checked his page with Netscape (fig. 14.10), but he goes the extra mile to make sure that it looks good in Microsoft's Internet Explorer and NCSA Mosaic, too (see fig. 14.11 and fig. 14.12).

Fig. 14.11

@Honest Joe's home page looks just as good in Explorer as it does in Netscape, as shown in figure 14.10.

Fig. 14.12

Though it looks a bit different in NCSA Mosaic, Joe's home page is fine here, too.

But Joe has also sold a lot of cars to students from the @University of Wisconsin and to engineers and programmers at a big @UNIX-oriented research center in a @Milwaukee suburb. He knows that they regularly browse the Web using an all-text Web browser called Lynx. Just to make sure, he checks out his Web page with Lynx, too (see fig. 14.13).

Fig. 14.13

Though not as pretty, @Joe's Web page works fine on the all-text browser @Lynx.

Joe, like Fred in the previous example, still has a lot of work to do to create pages for credit, quality, and the other issues he wants to address on his site. He's also going to have to hustle to keep his lists up-to-date. But at least his home page looks good, and he's off to an excellent start.


A Client-Side Image Map

Joe easily figured out how to implement his home page using a client-side image map. The trouble is, if he uses an image map, NCSA Mosaic users can't access the page, and he would have to make separate provisions for his Lynx customers. If Joe decides to use a client-side image map, here's how he can do it:

First, he must combine all six of his image graphics into one big graphic with the same arrangement. Each individual frame is 150 pixels wide by 85 pixels high, so he would end up with a map 450 pixels wide by 170 pixels high.

Here's the @HTML code that would create the same result as the "@fake" map Joe is currently using:

<MAP NAME="joesmap">

<AREA SHAPE="RECT" COORDS="0,0,149,84" HREF="quality.htm">

<AREA SHAPE="RECT" COORDS="150,0,299,84" HREF="aboutjoe.htm">

<AREA SHAPE="RECT" COORDS="300,0,449,84" HREF="vans.htm">

<AREA SHAPE="RECT" COORDS="0,85,149,169" HREF="cars.htm">

<AREA SHAPE="RECT" COORDS="150,85,299,169" HREF="happycar.htm">

<AREA SHAPE="RECT" COORDS="300,85,449,169" HREF="terms.htm">

</MAP>

<IMG SRC="joesmap.gif" USEMAP="#joesmap">

This map, of course, has the advantage that the links are invisible, and it doesn't get broken up into @windowpanes like @Joe's current interface.

For more on the subject, see the section "Client-Side Image Maps" in chapter 15


Templates for Lists

@Web page lists can easily grow to unwieldy sizes, but there are no built-in provisions in HTML to create nice, neat hierarchical lists. If you are planning a site with lots of lists, this section can help you figure out how to keep things from getting out of hand.

Hierarchical Lists

The first trick of list building is to make your lists hierarchical, or nested; that is, don't list everything at one level. This example is exactly the wrong way to go:

<HTML>
<HEAD>
<TITLE>Magic Cards</TITLE>
<HEAD>
<BODY>
<DIV ALIGN=CENTER>
<H1>Magic: The Gathering</H1>
<H2>Card Listing</H2>
</DIV>
<HR>
<UL>
<LI>Land
<LI>Basic
<LI>Special
<LI>Artifacts
<LI>Creatures
<LI>Mono
<LI>Continuous
<LI>Black
<LI>Summon
<LI>Enchantment
<LI>Sorcery
<LI>Instant
<LI>Interrupt
<LI>Blue
<LI>Summon
<LI>Enchantment
<LI>Sorcery
<LI>Instant
<LI>Interrupt
<LI>Green
<LI>Summon
<LI>Enchantment
<LI>Sorcery
<LI>Instant
<LI>Interrupt
<LI>Red
<LI>Summon
<LI>Enchantment
<LI>Sorcery
<LI>Instant
<LI>Interrupt
<LI>White
<LI>Summon
<LI>Enchantment
<LI>Sorcery
<LI>Instant
<LI>Interrupt
</UL>
</BODY>
</HTML>

Though this page is perfectly "legal," the list is almost unusable because it has no structure (see fig. 14.14).

Fig. 14.14

This unstructured list is confusing. It needs some hierarchies.

A better method is to move subservient portions of the list to their own sublevel, creating a hierarchical list, like this:

<UL>
<LI>Land
<UL>
<LI>Basic
<LI>Special
</UL>
<LI>Artifacts
<UL>
<LI>Creatures
<LI>Mono
<LI>Continuous
</UL>
<LI>Black
<UL>
<LI>Summon
<LI>Enchantment
<LI>Sorcery
<LI>Instant
<LI>Interrupt
</UL>
<LI>Blue
<UL>
<LI>Summon
<LI>Enchantment
<LI>Sorcery
<LI>Instant
<LI>Interrupt
</UL>
<LI>Green
<UL>
<LI>Summon
<LI>Enchantment
<LI>Sorcery
<LI>Instant
<LI>Interrupt
</UL>
<LI>Red
<UL>
<LI>Summon
<LI>Enchantment
<LI>Sorcery
<LI>Instant
<LI>Interrupt
</UL>
<LI>White
<UL>
<LI>Summon
<LI>Enchantment
<LI>Sorcery
<LI>Instant
<LI>Interrupt
</UL>
</UL>

This list is shown in figure 14.15.

Fig. 14.15

A hierarchical list like this is much easier to comprehend.

The various levels of indentation and different bullets for different levels really help you track what goes where.

Each level of a hierarchical list can have its own format. For example, you could have made the second level for each secondary level in the preceding list an ordered (numbered) list by substituting <OL></OL> tags for all the second-level <UL></UL> tags.

Reading through the HTML code for nested lists like these can be somewhat confusing, especially if the lists have three or four levels of depth. Mentally breaking down things helps if you consider each new level as a single element in the previous list, like this:

<UL>
<LI>Land
<UL><LI>Basic<LI>Special</UL>
<LI>Artifacts
<UL><LI>Creatures<LI>Mono<LI>Continuous</UL>
<LI>Black
<UL><LI>Summon<LI>Enchantment<LI>Sorcery<LI>Instant<LI>Interrupt</UL>
<LI>Blue
<UL><LI>Summon<LI>Enchantment<LI>Sorcery<LI>Instant<LI>Interrupt</UL>
<LI>Green
<UL><LI>Summon<LI>Enchantment<LI>Sorcery<LI>Instant<LI>Interrupt</UL>
<LI>Red
<UL><LI>Summon<LI>Enchantment<LI>Sorcery<LI>Instant<LI>Interrupt</UL>
<LI>White
<UL><LI>Summon<LI>Enchantment<LI>Sorcery<LI>Instant<LI>Interrupt</UL>
</UL>

Now you can easily see that the main list is made up of both individual list elements <LI> and sublists enclosed in <UL></UL> pairs. It's also easier to tell which </UL> tags end what lists. @HTML code even works just fine when it's written this way, if that helps you to keep track of things.

Expandable Lists

The problem with the list so far is that it's still huge. Even though the nested list is organized much better than before, it scrolls off the screen and just keeps scrolling, and scrolling, and scrolling...like the Energizer Bunny of lists.

Now see if you can bring the list under better control. Start by compressing the list to just the first level, as follows:

<UL>
<LI>Land
<LI>Artifacts
<LI>Black
<LI>Blue
<LI>Green
<LI>Red
<LI>White
</UL>

This shortened list is easier to read, but you lose detail (see fig. 14.16).

Fig. 14.16

This list is easy to read but doesn't include as much information.

Now make each list item a link to another page, like this:

<UL>
<LI><A HREF="land.htm">Land</A>
<LI><A HREF="artifact.htm">Artifacts</A>
<LI><A HREF="black.htm">Black</A>
<LI><A HREF="blue.htm">Blue</A>
<LI><A HREF="green.htm">Green</A>
<LI><A HREF="red.htm">Red</A>
<LI><A HREF="white.htm">White</A>
</UL>

This page looks just like the previous one (see fig. 14.16) with the exception that every item is a link. Clicking on, say, the list item for Red makes you jump to the page red.htm. Here's the code for that page:

<UL>
<LI><A HREF="land.htm">Land</A>
<LI><A HREF="artifact.htm">Artifacts</A>
<LI><A HREF="black.htm">Black</A>
<LI><A HREF="blue.htm">Blue</A>
<LI><A HREF="green.htm">Green</A>
<LI>Red
<UL>
<LI>Summon
<LI>Enchantment
<LI>Sorcery
<LI>Instant
<LI>Interrupt
</UL>
<LI><A HREF="white.htm">White</A>
</UL>

This page is the same as the previous one, except that the @Red item has no link. Instead, the sublist below Red has been expanded to show all the subitems for Red, as shown in figure 14.17.

Fig 14.17

Clicking the link for Red in the previous screen expands the sublist under it.

Though this technique demands that you create a separate page for each sublist, all are identical except for the sublist information. Because you load many pages clicking back and forth in such lists, you don't want graphic elements on these pages to slow down the load times, especially over slow modem connections.

However, this technique is excellent for making lists user-friendly-and it keeps the pages short.

Expandable lists are so useful that the @HTML 3.0 proposal includes an element for making them automatic. The <LH> (List Heading) tag lets an HTML 3.0-compliant browser choose to expand and contract the <LI> elements listed under them without having to create separate pages or special @HTML code to do so.

One final note about creating lists: Remember to pick the right kind of list for what you want to do. Besides ordered <OL> and unordered <UL> lists, you also can use menu <MENU>, directory <DIR>, and definition <DEF> list tags. Netscape and HTML 3.0 add many options to each of these elements. Check out chapter 9, "Displaying Text in Lists," for insights into the uses and format of each of these list types.

Template Tools

Many helpful tools are available to help get you started creating your own Web pages. Two of the most useful are the page-creation pages on the Web itself and add-on Web page templates for popular word processors.

Creating a Page Directly on the Web

Several sites on the @Web feature on-line forms that, when filled out, create a @Web page for you. All you need to do is fill in a few blanks and save the HTML code of the page that's created. Though pages created by these sites tend to be generic, you might use this approach to get the bare-bones HTML code that you can modify to make your own page.

Yahoo! keeps a list of such resources at http://www.yahoo.com/Computers_and_Internet/Internet/World_Wide_Web/Authoring/. But here are three to get you started:

Fig. 14.18

The @Home Page Generator is just one of many forms-driven @HTML page-creation sites on the Web.

Templates for Word Processors

If you're the type who's married to your word processor, you might prefer creating Web pages in that old, familiar environment. Fortunately, many templates are available. They plug right into your existing word processor, effectively turning it into an HTML editing machine.

As usual, Yahoo! has an index of such templates; it's at http://www.yahoo.com/Computers_and_Internet/Internet/World_Wide_Web/HTML_Converters/.

Microsoft's free HTML editing template for Word, Internet Assistant, and Quarterdeck's Word template, WebAuthor, are so powerful that this book contains an entire chapter dedicated to each. If you're a Word user, check out chapters 29 and 30.

See chapter 29, "Microsoft Internet Assistant" and chapter 30, "Quarterdeck WebAuthor"

If you're a Microsoft Word user, download a copy of the shareware template ANT_HTML (or ANT_PLUS) from ftp.einet.net/einet/pc. Both are Word templates that convert @Word documents to @HTML, or let you create HTML documents in place. ANT works on both Mac and Windows in the latest international versions of Word.

EasyHelp/Web from @Eon Solutions is for all recent versions of Word. It lets you create Windows Help files as well as HTML pages. You can get more information at http://www.u-net.com/eon/easyhelp/easyhelp.htm.

CU_HTML.DOT is another Word for @Windows 2.0 and 6.0 @HTML template that you can download from ftp://ftp.cuhk.hk/pub/www/windows/util.

WordPerfect users might want to check out Wp2Html, a WordPerfect template that converts DOS WP documents to HTML with tables, equations, and figures intact. You can get an evaluation copy from http://www.res.bbsrc.ac.uk/wp2html/.

You might also want to check out Internet Publisher from Novell, a free HTML creation add-on to WordPerfect 6.1 for Windows, downloadable from http://wp.novell.com/elecpub/intpub.htm.

If AmiPro is your word processor of choice, you've got AmiWeb, an HTML add-on. You can get more information at http://www.cs.nott.ac.uk/~sbx/amiweb.html.

These add-ons are all well and good, you say, but what if you want to convert from HTML to something else? @CERN offers a list of resources to do just that at http://www.w3.org/hypertext/WWW/Tools/html2things.html.


Internet & New Technologies Home Page - Que Home Page
For technical support for our books and software contact support@mcp.com
© 1996, Que Corporation