Home   Site Map   Main Gallery   Quotes   Poetry   Essays   Links

A Guide To Web Site Building

Introduction

In the process of creating Midnight Moonlight Madness, and the never-ending process of upgrading and improving it, I have learned many things about Web site design, so I figured I might as will share some of the things I have learned with any of you who may be interested in creating your own Web site. In this essay, I give pointers to both the stylistic and the technical issues involved in building a Web site.

Where To Begin: Conquering The Fear Factor

When people first decide to put their own home page on the World Wide Web, their first questions are usually, "How am I going to do this? Where do I even begin?" It can seem intimidating at first. But don't let fear scare you away! Any reasonably intelligent person can create their own Web site. You don't have to be a computer genius to do it; with a little effort, even a neophyte can create a decent Web site. Read on, and I will show you the ropes.

Design Philosophy

I will get into the technical issues of how to create a Web site momentarily, but first, let me bend your ear for a few minutes about Web site design philosophy. By "design philosophy" I mean content issues as opposed to technical issues. (In other words, semantics as opposed to syntax.) This section briefly covers eight basic design issues: content, style, simplicity, speed, appropriateness, interoperability, artistry, and ergonomics.

Content

This is the most important paragraph in this essay, so pay attention. A Web site is only worth what it says. Find something worth saying, something people need to hear, and say it, with courage and honesty. The Web has too much crap in it already; no need to add yet another garbage web page to it. Either find something worth saying, work up the courage to say it, and say it with honesty, or it is better to say nothing at all.

Style

Your Web site's style is a part of its content (in that it affects your guests emotionally and aesthetically), and it also effects your site's ergonomics (the ability of your guests to interface easily with the site); so style in nearly as important as content. (Not quite, but almost.) Craft your site's style to create a mood comensurate with the purpose of your site. For example, a business site should seem serious and professional; a personal homepage should seem friendly and informal; an obituary or memorial should seem somber and respectful. In other words, make the style match the purpose.

Simplicity

Make your Web site look clean, even sparse, rather than cluttered or busy. Personally, I detest gaudy-looking pages full of jarring colors, cluttered with excessive graphics and jumping, flashing animated banners. I like sites that are simple in design and restful to the eye. Excessive clutter not only makes it harder for your guests to find their way around your site, it just plain looks awful! Clean up the clutter.

Speed

By "speed", I mean both the speed with which your site loads and runs, and the speed with which your guests can find their way through your site.

Speed up your load times by keeping graphics, sound, and other embedded files to 50KB or less in size, and not using more than 2 or 3 such embedded files in any one page. (In other words, keep your site mostly textual; text loads almost a thousand times faster than any other Web site element.)

And speed up your guests' trip through your site by cutting the clutter (see above under "simplicity") and by providing navigation bars or a site map so that your guests can find what they're looking for quickly and easily. Otherwise, your guests will get frustrated and go somewhere else.

(See the sections below, "Building A Site Using Authoring Tools" and "Do It Yourself", for much more on how to speed-up your site.)

Appropriateness

Make all the text, backgrounds, graphics, music (if any), and other elements on each page of your site appropriate to the topic, content, style, and mood of your site. I've seen no end of sites with a lot of irrelevant, incongruous junk in them that makes me wonder "what the hell was that all about? The bright-purple animated gif of the aardvark dancing an Irish jig accompanied by midi music of The Star Spangled Banner is... uh... interesting... but what does it have to do with programming in Perl?" Make your content appropriate, folks. (Or risk having people believe you are in need of professional psychiatric care.)

Interoperability

Don't put a lot of non-standard HTML in your site that only runs on one browser, or one ISP. Web sites should be platform-independent, running on all viewing agents and all Internet service providers. Make your site interoperable! (See the sections below, "Building A Site Using Authoring Tools" and "Do It Yourself", for much more on interoperability.)

Artistry

Don't be shy about using color. Plain black text on a plain white background is boring. Be colorful. Be artistic. Use font styles and colors and background textures to establish the mood of your sitel. Examples: black on white for business-like mood; dark-brown book-antiqua text on a pale-tan parchment background for a friendly, bookish mood; bright primary colors on a sky-blue background with for a cheerful mood; silver text on a starfield background for a night-time mood; etc.

But do be aware that the Artistry of your site also affects its ergonomics....

Ergonomics

The fonts and backgrounds you use on your site will dramatically effect your site's readability. Try to keep the font sizes of most of your text near 12pt. Much larger than that, and your guests will feel that you are yelling at them! Much smaller, and your guests will have to squint to see what they're reading. Also be careful to provide enough contrast between background color and text color that your text can easily be read. (For example, dark-blue 10-point font on a black background is a really, really bad idea.) In general, a well-designed Web site should be both pleasant to look at and easy to read.

My Web Site Design Philosophy In A Nutshell

To recap:

Approaches To Web-Site Creation

There are two basic approaches to creating a Web site.

The fist approach is to use an authoring tool such as Netscape Composer or Frontpage Express. The advantage of this approach is that even a person with little or no computer literacy can write a Web site with such tools in just a few hours. (For more information on this first approach, see the "Building A Web Site Using Authoring Tools" section below.)

The second approach is to write your pages directly in HTML and CSS. This approach does require a lot more computer literacy, and a lot of study, but it does have certain advantages:

(For more information on this second approach, see the "Do It Yourself" section below.)

So, which approach should you use? My advice is, if you want to quickly, easily create a small Web site, then use an authoring program. But if you want to create a larger, more complex site, and you are welling to put forth the effort to learn some computer languages, then learn HTML and CSS and write your site in those languages.

Building A Site Using Authoring Tools

Most people who create Web sites these days use some program, such as Microsoft Frontpage or Frontpage Express, or Netscape Composer, or some other "user-friendly" program, for quickly, easily creating Web pages. These easy-to-use WYSIWYG (what-you-see-is-what-you-get) programs are great if you want to quickly put a small Web page on-line, and you don't want to spend the time and effort on learning languages such as HTML and CSS. To use this approach, simply fire-up Microsoft Frontpage Express (comes with most versions of Windows) and start writing and experimenting. Use the "Help" in the menu bar for detailed pointers. Then just upload your pages to your server, and you're in business.

Beware, though, of using poorly-written authoring tools which will load your pages with non-standard HTML which will run on only one type browser, or on only one Web server. The worst offenders along these lines are Web-page authoring tools written by Internet service providers themselves. Key examples are Pacific Bell's Web-page creation utility, and America Online's "Personal Publisher". These load your pages with non-standard code and non-standard graphics which run only on that one ISP, and usually only with Internet Explorer, but not Netscape Navigator. Avoid these at all costs! Either use widely-available free programs such as Microsoft Frontpage Express or Netscape Composer, or buy a Web-page authoring program from your local computer store.

Do It Yourself

HTML

The first step in learning to write your own Web pages from scratch is to learn the publishing language of the World Wide Web, called "HyperText Markup Language", or HTML for short. This language basically "marks up" plain text with tags that indicate the structure of the document and allow for links to other documents ("HyperText"). HTML is a rich and complex language, but it is relatively easy to learn enough of it to write a simple Web page within an hour of beginning your study of the language.

The world headquarters for information on the HTML language is the Web site of The World Wide Web Consortium ("W3C"). W3C is a non-profit organization with several member entities, including, among others, Microsoft, Netscape Communications, and CERN (the European particle-physics research people who invented the World Wide Web and HTML in the first place). W3C writes the on-line "book" on HTML, and expects the world to follow its recommendations. (While Microsoft has been mostly compliant in that regard, Netscape has not. More on this below under "Browser Dependencies".)

So your first step in learning about HTML should be to visit The W3C's HTML Web site. That link is the normative definition for HTML. All books on HTML take their information from that Web site. That Web site is HTML. HTML is that Web site.

The first part of the W3C site you should go to is the section on HTML 4. While it is true that the current HTML specification is XHTML 1, it is essential to learn HTML 4 first, as XHTML 1 is really just a slight extension of HTML 4, and depends on HTML 4 for all of its semantics. So learn HTML 4 first, and get good at writing pages in that language. (But use only lower-case letters for element and attribute names! You'll find out why when you start studying XHTML 1.)

Once you are good at HTML 4, go to the W3C's XHTML 1 Web site and learn the XTHML 1 extension. This is really just a slight tweaking of HTML 4 to make it more "interoperable" with a wide variety of modern platforms, operating systems, browsers (and other user agents), and devices (such as handheld computers, and devices for the deaf and the blind).

I will admit up front that the W3C Web site's presentation of HTML is very complex, and that to really understand it requires a lot of time and effort. One of the first things the site will teach you is a portion of a language called "Standard General Markup Language" (SGML, the "mother language" of which HTML is only a child), to allow you to understand W3C's cryptic "document type definition" for HTML. This may seem a bit daunting, but I assure you it is well worth the effort. SGML, HTML, and CSS are a lot easier to learn that so-called "human" languages such as French, German, or Russian; and yet, people learn those languages every day. But HTML is easier. Much easier.

If you find the W3C's Web site hard going, then by all means get a good book on HTML for your local library or book store. (But remember that the W3C's Web site is the only normative definition for HTML.) One book I've read recently which is short, sweet, easy-to-understand, and yet pretty complete, is HTML 4 For the World Wide Web by Elizabeth Castro, published by Peachpit Press, Berkeley, CA, in 1998. This book allows you to learn most of HTML relatively easily, and it also covers much of CSS, along with limited coverage of several other languages. An excellent book! (O'Reilly also has a couple of books on HTML; I haven't read them, so I can't comment specifically about them, but hey, their cover animals are almost worth the purchase price! You'll see what I mean when your browse the O'Reilly section in your local bookstore or computer store.)

Cascading Style Sheets

The style sheets on my site (css/main.css, css/night.css, css/day.css, css/brown.css) are written in the W3C's Cascading Style Sheets, Level 1 language. This is an easy-to-learn language for exactly specifying styles (colors, font faces, font sizes, borders, backgrounds, etc.) in an HTML document. Some of the advantages of using CSS instead of HTML to express the styles in your website are:

  1. Style sheets keep content and style separate for maximum interoperability on various platforms and user agents.
  2. In a large Web site with many pages, the styles for all the pages can be controlled by a single style sheet. That way, the webmaster can update all the styles on the entire site by making a few changes in just one file.
  3. HTML is a structural language, not a presentational language. It does very poorly at presentational tasks, compared to Cascading Style Sheet Language. Indeed, many of the stylistic elements are being phased-out of HTML completely by W3C.
  4. Cascading Style Sheet Language allows several style sheets to be "cascaded", or combined and applied according to rules of precedence. HTML has no such capability.
  5. By removing the style information from the HTML code, one can write code that is much more readable and easier to edit.
  6. By putting the style information in style sheets, one can insure that one's guests can turn off the style sheets if necessary by disabling style sheets in their browser's settings. For example, a voice-synthesizer-based browser for use by blind guests would just be confused by purely-visual style information.

Many striking stylistic effects are simply not possible using HTML, and can only be accomplished through style sheets.

A style sheet can be an external file used by many HTML documents, or a section in the header of just one HTML file, or a "style" attribute in just one HTML tag inside an HTML file. You can use any combination of these, and browsers will use "cascading" rules to combine the style sheets and decide which rules take precedence in case of conflict. This offers you wide flexibility in planning the styles on your Web site.

So my advice is, go to the Web site linked-to above and learn CSS, and use it to write style sheets to control the look of your site.

Frames

I don't like frames. I had frames on my Web site for a while, but I took them off because they were causing too many problems.

The pros of frames include:

The cons of frames include:

Frankly, I think the cons of frames far outweigh the pros. My advice? Don't use frames.

Javascript

First of all, Javascript has absolutely nothing to do with Java. The similarity of the names is purely due to the fact that the originators of Javascript decided to capitalize on the popularity of Sun Microsystems' "Java" language by giving their own language a similar name. The two languages are very different, though.

Javascript is a fast-running scripting language which can be used to create some very nice effects on your Web site. It is especially good for things like mouse roll-over effects that make pictures change or icons "light up" if you pass your mouse over them. That can help make clear what item is current "selected" and what will happen if the user clicks his mouse button. While Javascript is not essential to a good Web site, it is fun and easy to learn. If you have the time and patience to learn an extra language, I recommend getting O'Reilly's book Javascript: The Definitive guide. That is a complete course in the language. For examples of what you can do with Javascript, search your local library or bookstore for books with titles like "Javascript Cookbook" or "Javascript Goodies"; there are hundreds of such books in print.

Java

Java is a very versatile programming language which can be used to write all kinds of programs, including stand-alone applications not related to the World Wide Web. Java applications written for use in Web pages are called "applets" (small applications). Pages with Java applets take longer to load, but with the advent of microprocessors running at speeds anywhere from 200MHz to 2000MHz (and beyond), this isn't as much of a problem as it used to be in the days of 33MHz computers. I haven't learned Java yet, myself. (A project for the future.)

My feelings about Java are mixed. I've seen a few sites that make good use of it (such as for expanding menus that make very large, complex Web sites easy to navigate), but most of the uses of Java I've seen are frivolous, and a waste of resources. If you do include Java applets on your site, make sure they pull their own weight. Don't just throw in some applets for window dressing.

Graphics

A Web site without any pictures or graphics looks very dull! Put some pictures on your site. But not too large or too many, or your pages will load very slowly. No sense putting pictures on your site that are larger than the screen! Scrolling pics is a big no-no. Not only is it hard to visualize what the whole picture is supposed to look like, but big pictures make your site load very slowly. Generally, anything over 50KB or bigger than 400 by 600 pixels is too big. And don't put more than 3 or 4 such pics on any one page.

If you have a lot of pictures, consider using "thumbnails", which are tiny, low-resolution pictures (about 50x100 pixels) which are hyperlinks to larger pictures. That way, when the page loads, it just loads the thumbnails, and doesn't need to load your entire collection of 50 200KB pictures!

Another thing you can do that adds some spice to your site is use animated GIF files. But use them very sparingly! They tend to get very cloying very quickly if you use too many. Also, they do slow down the running of your visitor's computers. They are real hogs of CPU time. Here again, that is not as much of a problem with modern computers, but your guests with older computers will have a very hard time viewing pages with too many animations.

Embedded Midi Music

My advice? Don't do it. With the advent of CD players and MP3 files, most people are now used to a much higher level of musical fidelity than is attainable in midi music files. Midi music tends to sound "dated". Also, embedding midi files requires deprecated or non-standard HTML code. If you want to include midi music on your site, it's better to link-to the midi files with hyperlinks than to embed the files with pseudo-HTML "embed" commands. And if you feel you absolutely must embed some midi music, try to make the music appropriate to the page, and don't set the volume over about 40%, unless it's a very soft tune; sudden bursts of loud raucous music will not ingratiate your site visitors to you.

Browser Dependencies

One problem that crops up a lot when you start writing pages in HTML 4.0 and CSS is that your pages may look good in Internet Explorer but not in Netscape Navigator, or (rarely) the reverse. What is going on here? Aren't HTML and CSS "standard" languages that are the same regardless of what browser people use to view your sites? In theory, yes. In practice, no, not by a long shot!

Unfortunately, not all browsers interpret HTML and CSS the same. The two most popular browsers in use today are Microsoft's Internet Explorer (hereafter referred to as "IE") and Netscape Communications Corporation's Netscape Navigator (hereafter referred to as "NN"). IE and NN handle HTML and CSS somewhat differently.

For one thing, IE and NN each have their own proprietary pseudo-HTML and pseudo-CSS keywords that the other browser does not recognize. This is due to the two companies' ongoing struggle for market dominance. The key to avoiding this problem is, don't use any of those proprietary commands; stick to standard HTML and CSS instead.

Another problem is that while IE (versions 4.0 or better) interprets standard HTML 4.0 and CSS commands correctly, NN (any version) doesn't. NN doesn't even recognize all the commands, and it tends to respond incorrectly to some of the commands it does recognize. This is what I meant when I said earlier that while Microsoft has been reasonably compliant with the W3C's recommendations for HTML and CSS, Netscape has not.

So, it becomes a challenge to design HTML and CSS code that is technically up-to-date and well-written, and yet will be rendered reasonably close to the author's intentions by both IE and NN. Here are some hints for making sure your HTML and CSS code will work well with both browsers:

Deprecated Elements and Attributes

The W3C has indicated that many of the HTML elements and attributes currently in use in documents written in HTML versions 1.0, 2.0, and 3.2 are now "deprecated". The W3C intends to phase all these "deprecated" elements and attributes out of HTML altogether in a few years. Examples are the FONT element (and all its attributes) and the vspace and hspace attributes of the IMG element.

I don't use "font" elements on my site at all, because they clutter up HTML code horribly, and make it so unreadable that it's almost impossible to edit in a text editor. To control font sizes, families, colors, weights, etc., I use style sheets. (See the section above on "Cascading Style Sheet Language".)

I used to use some deprecated attributes of the "img" element, such as "vspace" and "hspace", because earlier versions of Netscape Navigator did not correctly interpret "style" attributes in "img" elements. Recent browsers, however, have rectified that problem.

In fact, there is no longer any reason to use deprecated elements or attributes in Web sites at all. Shun them! Use only non-deprecated elements and attributes. There's no sense in building obsolescence into a Web site if one doesn't have to.

Keep your goal in mind!

It's easy to get lost among the technical details of Web site creation and forget the over-all goals you started with. To avoid this, each time you consider adding a particular item to your site, ask yourself how it fits into the over-all picture. Especially strive to keep your site as a whole fast, simple, and appropriate. Ask yourself questions such as: "Is this photograph appropriate to my site?" and "Is the usefulness of this Java applet worth the decrease in loading speed?" and "Will adding these animated GIF banners make my site look too cluttered and confusing?" In other words, include only those elements on your site which support your over-all goal.

In Summation

Design Philosophy:

Technical issues:

Written Wednesday October 27, 1999 by Robbie Hatley.

Last updated Thursday March 1, 2018.

Contact Info   sign my guestbook

Home   Site Map   Main Gallery   Quotes   Poetry   Essays   Links

Valid HTML 5 Valid HTML 5     Valid CSS Valid CSS