Animated Ball UMUC Logo
http://polaris.umuc.edu/~flazarus/

A Hands-on Introduction to Web Site Design
An Overview

The Web Paradigm

This paradigm is one where the viewer's browser does much of the presentation work reducing the amount of information that needs to be transferred across the Net. For example, you can specify a font (typeface) and expected it to be rendered only if it is on the viewers machine1. This is the so called "end-to-end" principal. This principal identifies where the network "intelligence" is placed. It states that no service, feature, or restriction should be forced on the user. These decisions should be left with the users browser. This forces a sort of network neutrality. All applications have a level playing field across the network. In other words it should not matter what operating system, Linux, UNIX, OS2, Windows or whatever or what browser you are using all should work. Of course we all know that Bill bent the rules a bit.

Another defining aspect of the Web paradigm is hypertext, links can be placed in situ like this one to Ferd's teaching page. This allows an author to make auxiliary information immediately available to his/her reader.

It is the view of many that the power of the Internet is derived from these two factors, neutrality and links.

WYSIWYG?

As the demand increases for "easy" Web design many WYSIWYG (What You See Is What You Get) authoring tools are appearing. Unfortunately the paradigm for WYSIWYG is quite different from that of the Web making for a poor fit. For the Web, what is seen at the design end of the process almost certainly will not be exactly what is seen at the viewing end. WYSIWYG tools, at least the better ones, do speed up the design process with one very big proviso, you need to be proficient at "hand-coding" first. Almost always the code produced using WYSIWYG authoring tools needs hands-on adjustment. This is particularly true if you have made adjustments after the first cut. Under these circumstances WYSIWYG tools cause the code to deteriorate rapidly adding many, perhaps even syntactically correct, but unnecessary tags. This code bloat, at the very least, makes loading slower. In addition it makes maintenance difficult and confounds some scripts. Further if you don't check the code then you can't be sure your pages will display the way you want them to on systems other than your own.

I teach Web design using a simple text (ASCII) editor. My students therefore experience the code hands-on. These students can then more easily adapt to any of design tool they may choose to use.

HTML, CSS, and JavaScript

The acronym HTML stands for Hyper-Text Markup Language. This language uses <tag> </tag> pairs to form containers. The contents of each container has the rules of the container applied to it. For example the text within a boldface container <b> </b> will render boldfaced. In other words tags determine how information will be displayed. This display however is controlled by the browser used to display the information.

CSS add enhancements and consistency to these container rules. However the presentation is still static.

JavaScripts, often in concert with CSS, can be used to add a measure of dynamics to the presentation.

Templates

It is truly amazing how fast the the details of inspirational HTML, CSS, and JavaScript code fades from memory. One of the "tricks" that helps with the design of successful Web pages is the development of templates. Here our goal is to build a series of fundamental templates.

1. Embedded font technology does exist however because
of conflicts among browsers it is not much used.

Return to the Index