Special Edition Using HTML 4

Previous chapterNext chapterContents


- 2 -
HTML Page Design and Implementation

by Mark R. Brown

What HTML Is

It isn't a programming language. HTML is exactly what it claims to be--a markup language. You use HTML to mark up a text document, just as you would if you were an editor with a red pencil. The marks you use indicate which format (or presentation style) should be used when displaying the marked text.

If you have ever used an old word-processor program, you already know how a markup language works. In older word-processing programs, if you wanted text to appear in italics, you might surround it with control characters like this: /Ithis is in italics/i When the document was printed, the /I would kick your line printer into italics mode, and the following text would be printed in italics. The /i would then turn italics off. The printer didn't actually print the /I or /i. They were just codes to tell it what to do. But the "marked up" text in between appeared in italics.

This is exactly how HTML works. If you want text to appear on a Web page in italics, you mark it like this:

<I>this is in italics</I>

The <I> turns italics on; the </I> turns them off. The <I> and </I> tags don't appear on-screen, but the text in between is displayed in italics.

Everything you create in HTML relies on marks, or tags. To be a great HTML "programmer," all you need to learn is which tags do what.

Of course, nothing in the real world is ever quite that simple. In truth, simple HTML gets a big boost in real-world page design from add-ons like Java and JavaScript, VBScript, CGI programming, cascading style sheets, ActiveX controls, and other page-design extenders and expanders. But, you can still get started in HTML page design by using nothing but a handful of basic HTML tags and a good text editor.

The Only Tool You Really Need

Because HTML is a tag-oriented text markup language that works with standard ASCII text, all you really need to begin creating HTML pages is a good text editor. If you're using a version of Windows, for example, good old Notepad will do just fine.

Listing 2.1 is a simple HTML document that you can recreate by using Notepad.

Listing 2.1  A Sample HTML Document

<HTML>
<HEAD>
<TITLE>A Simple Sample HTML Document</TITLE>
</HEAD>
<BODY>
<H1>Welcome to the World of HTML</H1>
<HR>
HTML documents can be as simple as this Web page, which consists of just a
single page of <B>text</B> and <I>links</I>, or as complex as a 10,000
page corporate intranet site replete with Java applets and CGI database
access. <P>
In this book, we'll explore the possibilities of HTML, but we'll also
check out what can be done by adding other elements to your documents.<P>
Click <A HREF="sample.htm">HERE</A> to reload this page!<P>
</BODY>
</HTML>

Don't worry that you don't know what these markup tags mean for right now--they are explained in the next few chapters. Just type this sample document into your text editor of choice and save it by using the file name sample.htm. (Make sure your editor is set to save in simple ASCII text mode.) Then fire up your Web browser and load this file from disk. You should see a display similar to that in Figure 2.1.


TIP: In Netscape Navigator 4, you can load a file from disk by selecting File, Open Page from the menu. In Microsoft Internet Explorer, choose File, Open. Then use the Browse (or Choose File) button to locate the file you want. Other browser programs work similarly.

FIG. 2.1
Netscape Navigator displays the sample HTML file from Listing 2.1.

Of course, just as most carpentry projects are easier when you have a selection of power tools rather than a couple of hand tools, the job of creating HTML documents is made easier if you have a selection of software tools to help you along. Chapter 42, "Using HTML and Site Tools," discusses a variety of HTML editors that speed and simplify the task of editing HTML, and many of the other chapters in this book describe graphics editors and other software tools to ease the creation of the other elements you'll want to incorporate into your HTML documents.

Image Is Not Everything

Billy Crystal's Fernando character on Saturday Night Live used to say, "As we all know, it is better to look good than to feel good...and you look mahvelous!" Unfortunately, it seems that many HTML developers have a similar attitude: They believe it is more important for their pages to look good than to actually be good. For example, you can find plenty of Web sites that are loaded with colorful graphics and have a multitude of links to click; but, they often lack good, solid content.

It might be better to follow the advice of the 20th Century's most famous architect, Frank Lloyd Wright, who coined the mantra of modern architecture: "Form Follows Function."

Because HTML documents can contain so many flashy elements--graphics, animations, video clips, and even interactive games--it's easy for the message to be overwhelmed. When designing HTML pages, you need to continually ask yourself: "Is this really necessary?"

Before adding a page-design element, you should determine that the element will actually enhance and emphasize the message your document is trying to communicate. What are you trying to say? Does that graphic, sound bite, or table help you communicate your message? If the answer is "no," then you should rethink your page design.

The flip side of this is, of course, that if your HTML pages have excellent content but aren't visually appealing, people aren't likely to stay around long enough to find out just how good they are. People have a tendency to judge a book by its cover, and with so many well-done, attractive HTML documents out there, you're up against some stiff competition.

A case in point, chosen at random, is the Defense Technical Information Center's Business Process Reengineering Help Desk Web site, found at http://www.dtic.dla.mil/ bpr-helpdesk/ (see Figure 2.2). Though this government site links to a lot of important information, it's not clear from this page to what kinds of information it leads. Though there's a big, colorful department logo, an animated e-mail icon, and even a nice, subtle American flag background graphic, the menu is a wad of text-link acronyms that convey limited information. There's plenty of room on this page to have organized things better, and to even have included a bit of explanatory text. Unfortunately, most visitors won't have a clue what's available from this site. It just isn't clear. People will need help first in order to use this Help Desk!

If you're going to draw people in, you have to present your pages the way a politician campaigns: You've only got the public's attention for a quick sound bite, so you must make your impression up front.

FIG. 2.2
What's this site all about? How do you get to the information you need? Unfortunately, it's hard to tell.


NOTE: Though you want to strive for good design, don't just shove a bunch of extra elements down your viewers' throats--give them a choice! If you want to add Java applications, animations, sound files, video clips, and even background graphics to your pages, make them optional. Don't make your visitors automatically load a home page that is overloaded with lots of noncritical elements. Viewers with slow modem connections will especially appreciate the opportunity to not view everything on your pages.

The Right Stuff

It's been established that looks aren't everything, but that without looks you'll never get your message across. Now, it's time to think about what that message will be.

Keep Focused

Here's your new motto: Keep in-focus!

Your HTML documents should focus on a single topic or, at most, a cluster of closely associated topics. If you're developing a Web site, for example, there are millions of Web surfers out there, and most of them won't even slow down for a generic, generalized site. They want to find information and entertainment that suits their personal needs, wants, and tastes. The odds are that you'll never find even a handful of individuals who share your dual interests in, say, wind-surfing and Baroque music. It would be suicide to mix the two on a Web page--those who are interested in one topic will be turned off by the other, and move on. But if you put up a site devoted to one or the other, you'll pull in thousands of like-minded individuals. (And remember, there's nothing to keep you from putting two separate sites on the Web!)

Above all, your pages should be interesting. Whether you're developing a Web site or a corporate intranet, or even if you're just enhancing an e-mail or news message, your HTML documents should appeal to the audience you have identified for them, and should communicate your message clearly. The topic should be focused--the tighter, the better.

There are a million Web sites devoted to music, for example. The odds of drawing much of a crowd with such a generic topic are slim--you're sure to be overwhelmed by other bigger and better established Web sites with more resources to devote to the project.

However, if your Web site is focused on something specific, such as Lithuanian folk music, you're sure to pull in a devoted following of true, die-hard advocates of the topic. Figure 2.3 is a perfect example of a Web site with a tightly defined subject matter. The St. Augustine page at the University of Pennsylvania (http://ccat.sas.upenn.edu/jod/augustine.html) is a scholarly site devoted completely to the study of St. Augustine. There are complete texts (including some in Latin), images, commentaries, and essays, all presented in a well-organized and appealing way. And it's not stuffy--you'll even find the lyrics to Sting's rock-and-roll ballad, "St. Augustine in Hell"! This site won't attract many punk rockers or rocket scientists. However, its intended audience--philosophers and theologians, both amateur and professional--are sure to not only find it, but to keep coming back.

FIG. 2.3
This page, devoted to the study of St. Augustine, is a perfect example of an HTML document that is focused, well-presented, and rich in content.

On the Links

Here's another motto for you: Think hyper!

Almost every HTML document features hypertext links; they're what make HTML unique. But, I'm sure you've seen many Web sites which have a huge, unorganized list of links, some of which are more relevant to the topic at hand than others. A well-organized list of links--whether to associated Web pages or to a network database--can be a valuable asset to an HTML document.

For example, Scott Yanoff began his list of must-see sites on the Internet back before the World Wide Web existed. People would download his list of informative Gopher, FTP, and Telnet sites every month or grab it off their UseNet news feed when it was updated. With the advent of the Web, Yanoff added Web sites to his list and set up a site of his own to host the list (http://www.spectracom.com/islist/). It is, and always has been, one of the best topically organized lists of resources on the Net (see Figure 2.4). Take a look at his site, and try to do as good a job of organizing your own hypertext link lists.

FIG. 2.4
Scott Yanoff's topical list of Internet services is one of the most comprehensive and well-organized lists of resources on the Web.

Timeliness

One of the reasons people love the World Wide Web is because of its capability to deliver new information with an immediacy that can only be matched by other broadcast media such as TV and radio. Whenever news breaks--whether it is a major world event or the release of the latest new software product--you can bet that the Web will have the information first. If you can keep the information on your site up-to-the-minute fresh, you're sure to attract loyal viewers.

Don't let your Web site lag behind. Keep it up-to-date. Always be on the lookout for new information and new links. Make sure to delete or update older information so that your site never, ever presents outdated or stale information. And, even if you're creating an internal intranet, you want to make sure the information contained therein is timely and accurate.

There are hundreds of daily news sites on the Web that do an amazing job of posting the latest news items every day. Even if your site isn't news-oriented, you can learn a few things by checking out how these sites keep up the pace. Figure 2.5 shows the Web site of the Beloit Daily News, one of the smaller newspapers keeping a daily presence on the Web--and doing an excellent job of it. Check out their site at http://www.beloitdailynews.com/.

FIG. 2.5
The Beloit Daily News is just one of hundreds of sites that presents the latest news stories on the Web daily--or even hourly!


ON THE WEB: http://www.cnn.com/  For general news updated on a daily basis, you can't beat CNN's Web pages.
http://www.news.com/  For the best in computer-related daily news, check out c|net's site.

Create a Vortex

So your HTML documents should be appealing, focused, organized, and up-to-date. That's not too much to ask, is it? The whole idea is to create an information vortex that draws in your audience like a spider draws in flies.

You've got to strike a careful balance between form and content, between innovation and familiarity. People long for the new, innovative, and unique--but, conversely, they are more comfortable with the recognizable and familiar. Everything must work together to make your pages appealing.

Everything in your documents should be directed toward delivering your message. All should point to the center: your focus topic. Graphics should illustrate, links should be relevant, and design should set a mood.

There are people accomplishing this every day on the World Wide Web. For example, take a look at Figure 2.6, the Web site for the Rock and Roll Hall of Fame at http://www.rockhall.com. The home page features a big, colorful, playful, clickable graphic menu that leads to fun and relevant areas of interest--from a tour of the museum itself to a list of the 500 top rock songs of all time. There's even a thoughtful link to the Cleveland home page. (This is a good tie-in because the Rock Hall is a tourist attraction, and potential visitors want to know about travel, hotels, restaurants, and other tourist sites in the area).

Right up front are two very timely items: a link to Rock News and an item right below the menu showing what happened in rock-and-roll history on this date. The first thing you think when you check into this site is, "awesome!" All of the information is relevant and up front, so the site accomplishes its real goal: to entice people to visit the Rock and Roll Hall of Fame.

FIG. 2.6
The Rock and Roll Hall of Fame Web site is the perfect example of what an HTML document should be: entertaining, appealing, and focused, with a clear goal in mind.

The Wrong Stuff

So what shouldn't you put into your HTML documents? That's easy--just turn around everything said so far.

Remember to focus. Don't try to be everything to everybody. This is the number-two problem of many personal sites on the World Wide Web--they haven't defined who or what they are there for. They spew out whatever pops up in whatever areas interest them at the moment. You might see graphics of motorcycles, rock bands, comic book characters, and computer screens all mixed up like a nightmare collage.

"Wait a minute," you protest, "you said that's the number-two problem of personal Web sites. What's number one?"

Even worse than a site that's burdened with everything is one that contains nothing of interest at all. Many personal sites contain next to nothing: lists of CDs or comic books the person owns; pictures of his or her dog, gerbil, or fish; fuzzy photos of the site's owner goofing around with friends; and so on. Let's face it; except for a small circle of your very closest friends, nobody but nobody (not even your significant other) wants to know that much about you. So why put it up in public? It's a waste of bandwidth. It's boring!

What astounds me is many people are aware that it's mind-numbingly boring, and yet they put it up anyway! Some even seem to take pride in how boring they can make their sites, as shown by examples like the following page, appropriately titled "My Boring Life" (see Figure 2.7). Please don't ever put another site like this up on the Web. There are far too many of them already.

FIG. 2.7
There are already too many boring sites on the Web. Make sure yours isn't one of them.


TIP: The number one rule of writing is this: Have something to say. If a writer has a message, or a story, or a cause, he or she never gets writer's block. Apply the same rule to your HTML documents, and you'll never have to worry about what you should create.

Another thing you definitely don't want to do is to put up a page that consists of nothing but huge wads of unedited, unorganized links, such as the Web site shown in Figure 2.8. (And don't mistake alphabetical order for organization!) This site is like a library where the books are stacked at random. It's almost worse than having none at all. People want useful links, but they also want to be able to find them easily.

FIG. 2.8
An unorganized list of random links is of no use to anyone. At least this site included short descriptions!

Everyone expects data in an HTML document--especially one on the Web--to be up-to-date and accurate. The worst thing you can do to your viewers is put up some purportedly useful data only to have it go stale. It's better to take your site down completely than to let it sit there with outdated, useless information.

Figure 2.9 is an example of a site past its prime. It features a graph of card prices for the collectable trading card game, "Magic: The Gathering." Prices for these cards fluctuate wildly, and when the data was current, this was a valuable service for card collectors. Unfortunately, the site is still up, and, as of this writing, the information is well over a year out of date. This is worse than useless, as someone is likely to consult this graph and not notice that the information is outdated. They could make some bad decisions based on this old data. Don't ever do this to those who visit your site. If you can't keep it current, take it down.

FIG. 2.9
The data in this graph is outdated and useless. Visitors to this site are going to be disappointed.


NOTE: Poor grammar and poor spelling are rampant on the Web. If a document is worth doing, it's worth doing well. No one is too hurried to use a spell checker or grammar checker. People who read your documents will assume that bad English usage and misspellings mean that you don't know what you're talking about, and they'll move on.

Legal and Moral Issues

When you're creating a private e-mail message, closed newsgroup post, or corporate intranet, you probably don't have to worry much about possible legal problems with your HTML documents. After all, your audience is on the same team you are on, and your communications are most likely governed by company policies and guidelines. However, when you create a site on the World Wide Web you are subject to many of the same laws that govern printing, publishing, and broadcasting.


CAUTION: This section is not a legal guide. It is, rather, an overview of some of the legal issues to keep in mind when you are developing HTML documents. For advice on legal matters, consult an attorney.

Be a Legal Eagle

The first amendment to the U.S. Constitution guarantees every American the right of free speech (and, of course, most other free nations have similar laws). This does not guarantee you the right to say anything you want with impunity. People who feel that you have treated them unfairly in public have legal recourse. You can be sued for libel and slander for anything you say on the Web, just as you could if you had printed it on paper. And in this litigious society, it is probably better to err on the side of caution than to strike out boldly and without forethought.

Controversy and debate online are fine, but if you're diplomatic and noninflammatory you'll not only avoid legal battles, you'll attract more sympathizers. After all, you're on the Web to share your ideas, not to entice someone to sue you. Before you post something questionable, consider the following: Even if you're sure you'd win, do you really want to spend your time sitting in court for months on end?

The right to privacy ties in closely with libel and slander issues. If you receive private information about any of your users--through a registration form, for example--you must be very, very careful about how it is used and who has access to it. Though there is no actual law guaranteeing U.S. citizens a right to privacy, there is a long-established legal precedent that says it is a basic right implied by the U.S. Constitution. It is best to keep all such information completely private, unless you have asked for and received specific permission to use it publicly.

Perhaps no laws are more openly flaunted on the Web than those concerning copyright and plagiarism. Everyone seems to steal text, graphics, programs, hypertext link lists, HTML code, and everything else from one another pretty freely and openly. However, the most recent U.S. copyright law says that all original creative works in any medium (including electronic) are automatically assigned to their creator when created. No registration is necessary (though it is a good idea, so that ownership can be proven if challenged). Again, it's best to not "borrow" anything at all from anyone else's site, unless you have written permission to do so.

No Web-related topic has gotten more press than the issue of adult material on the Web and its accessibility by minors. It is such a hot topic that Congress included tough anti-pornography language directed at the Internet in the Telecommunications Act of 1996. Although this law was quickly challenged in the courts, it has made many ISPs very, very nervous about the content of pages posted through their sites. If you plan to post adult material on your site, you certainly should at least make people enter through a disclaimer page. And make sure you have the permission of your ISP beforehand, or you could be kicked unceremoniously offline at the first hint of controversy.

Got you scared, now? You say you need advice? The Electronic Frontier Foundation is the champion of the rights of those online. If you have questions about copyrights, pornography, libel, or other legal issues online, the odds are good that you can find the answers on the EFF site at http://www.eff.org (see Figure 2.10).

Electronic Morality

Once past the legal issues, you might want to stop a moment and ponder the fine line between rights and responsibilities. Are you the guardian of society's mores? Is it up to you to try to bolster a civilization that is sagging under its own decaying weight?

FIG. 2.10
The Electronic Frontier Foundation home page features full coverage of the topic of legal issues online, including a lively discussion of the Telecommunications Act of 1996.

Some people consider it better to be positive than negative, to build up rather than to tear down. With a forum as wide-ranging as the World Wide Web, anyone putting up a Web site has a huge potential audience, and therefore a potential to do great good or great harm.

Nonetheless, there are legitimate issues, worthy of open discussion, that are the subjects of controversial Web sites. Take tax reform, for instance. Many sides of this issue are represented in force on the Web (see Figure 2.11), and all draw their share of criticism, harassment, and hate mail. Those who have chosen to establish these sites may consider the controversy all part of the territory. There are religious denominations, environmentalists, pro-choice and pro-life organizations, neo-Nazis, and other controversial groups on the Web that are constantly drawing fire from others. Before you establish a site that's destined to become the center of controversy, you should answer just one question: Can you take the heat? If the answer is "yes," then by all means go online with your views.

Sending Your Work Out into the World

As noted in the previous chapter, HTML isn't just for Web pages anymore. People are using HTML to create corporate intranets, flashy e-mail and news postings, and even user interfaces for applications.

So what do you do with your HTML once you've written it? As you might expect, that depends on your application.

FIG. 2.11
All sorts of controversial sites, such as this tax reform newsletter page, exist on the Web. Before you set one up, make sure you're willing to do battle for your cause.

If your HTML pages are destined for the World Wide Web, you'll likely upload them to your ISP (Internet service provider). Finding an ISP to host your Web pages is a relatively simple task these days. If you're on an online service like America Online, you probably already have space available to you, whether you know it or not. Most local ISPs also include a few megabytes of space for hosting your pages, all as a part of your dial-up service contract. Chapter 3, "Putting Your Web Pages Online," provides detailed information on how you can get your Web site up and running.

If you're developing for a corporate intranet, or if your Web pages will be hosted by your organization's own Web server, you need to set up the server computer to host your pages. The details will vary with different installations, and you'll need to work them out with your system administrator.

If your HTML is destined to dress up e-mail or newsgroup posts, you'll need to use an e-mail or newsgroup program that allows attaching HTML to messages. Netscape Communicator's Messenger (for e-mail) and Collabra (for news) applications include this capability, as do Internet Explorer 4.0's Outlook Express and many others.

Finally, HTML for GUI (graphical user interface) development means your HTML code will be bundled together with controls, applets, and other bits and pieces of the application for distribution as a package. If you're not the sole developer of the application itself, the project coordinator will likely be in charge of making sure all the pieces come together as needed. 


Previous chapterNext chapterContents


Macmillan Computer Publishing USA

© Copyright, Macmillan Computer Publishing. All rights reserved.