Management Strategies Inc 

  An International Company


Introduction to Web Design


HTML - Hyper Text Mark-up Language

What is the internet?? Many people have asked me that question and it is a difficult one to answer. At one level it is a new way of communicating and at another level it is a new way of interacting with the world around you. The majority of people who use the Internet use it for Email and with their browser "Surfing the Net".

At a basic level the Internet is your computer connected to another computer through a phone line or cable communicating with each other. Add to this the ability to connect to any other computer and communicate with it in fractions of a second and you have the Internet in a nutshell. The terms 'net' or 'web' are a way of visualizing this interconnectedness.

Basic Concepts  

When working on a website there are a couple of key concepts that need to be understood.

One is the concept of the ‘Local' computer and the ‘Remote' computer. The local computer is the one you are working on and, unless you have access to the actual server that your website is stored on, the computer (server) that contains website is called the remote computer (For security reasons most servers are setup so that even if you have access to the server you still have to log on and transfer files much like you would if you were connected locally).

Always consider the file on the server to be the original copy as this is the one that visitors will see. If you need to make changes to a existing web page retrieve a copy of the original from the website first. That way if more than one person is updating the website you will avoid overwriting someone else's changes.

HTML is the language that is at the core of all document on the Internet. An HTML document is a text document with instructions for browsers on how to display the web page. Hyperlinks tie all the documents together integrating the website and connecting it to the rest of the "Net" so be sure that all your links work. Also HTML ignores spaces whether they are inserted with the space bar, tab key or enter key. All formatting must be explicitly defined.


Around the mid 90's with the introduction of Hypertext Markup Language or HTML and graphic capable browsers the Internet has taken off as a major communication tool accessible to large numbers of people. As there is no one organization that oversees the "Internet" there are a number of "protocols" that have been established to make this communication work.

The protocol that connects the computers together and directs the transfer of information has stabilized (at least temporarily) on TCP/IP (or Transmission Control Protocol/Internet Protocol). Currently HTML 3 has been okayed by the World Wide Web Consortium (or WC3) and discussion is underway on HTML 4.

The two main graphic formats are GIF and JPEG.

The two main sound file formats are Sun's .au and Microsoft's .wav though there are many others. Musical Instrument Digital Interface or .mid format is a way of storing complete songs in relatively small files.

The jury is still out on video, animation and streaming which has muddied the waters even more for people seeking standardization. Streaming technology, which allows content providers to send information such as audio and video in a stream rather than as a complete file, currently has three main formats; Real Audio's .ra (and others), Microsoft's .asf or asx and Apple's .mov (as well as others). There has been an attempt to standardize audio and video with the MPEG format but as the technology is expanding constantly it will be sometime before this area of providing content through the Internet settles down.

Role of the Webmaster

The Webmaster's role is to oversee the entire website whether they are maintaining the entire site themselves or the site is being maintained by various other people. Their role is to keep the site consistent with company or organizational policy, ensure that the site is working properly (i.e. links work, graphics display etc...) and answer questions that are generated from the website. In smaller organizations most often the Webmaster is also the Web Designer. Even if the Webmaster isn't involved in the day to day site maintenance the person taking on this role must have a good understanding of HTML.

Role of the Web Designer

The Web Designer's (web developer's) role is to layout and/or create the web content. Their strengths are a sense of design and strong understanding of HTML. Though a designer will often use a HTML editor or publisher, the core language of the Internet is HTML and that design tool is simply interpreting the hypertext markup language for the designer. If the designer doesn't understand HTML they will, very quickly, find themselves in a crisis when an image doesn't display or a link doesn't work.

Another skill that is not always required but good to have is an understanding of a scripting language. With the introduction of HTML 3 designers can now use Stylesheets to create complex site-wide formatting of documents. In the discussion of HTML 4 (and in the capability of version 4 browsers) is the ability to add Dynamic HTML to documents. JavaScriptis also becoming a common feature of websites. Many sites also incorporate programs based on a variety of different languages.

Advertising Your Website - This is where the work really comes in!

  Though it is impossible to get an exact number it is safe to say that there are billions of web pages available on the Internet. That leads an organization to wonder "how can we get people to our website"? A website is a collection of HTML documents presented by a company, organization or individual which make up their "web presence". Web pages are the collection of documents making up a website.  There are many different techniques that are used to make yourself know on the Internet but there are basically three key components to the process of creating your "web presence".

Search Engines

The first are search engines. This involves visiting or hiring someone to visit the individual search engines and listing your website with each one. In theory the search engines will find your website without registering it but it could take months or even years for them to find you.

Though there are hundreds of different search engines out there are only 10 to 15 that the majority of people use. Many of the smaller or specialty search engines will use these 10 to 15 search engines to submit their own clients searches. One example is which allows you to perform "meta searches" using a combination of search engines. Both Internet Explorer and Netscape Communicator use the larger search engines such as Excite, GoTo, HotBot, LookSmart, Lycos, Snap, About, Google, InfoSeek, AltaVista, Excite and Yahoo. My favorite at this time is Google because of its ease of use and special advanced search features!

Before submitting your site to a search engine it is very important to have some key components ready on your own website.

  1. Have your site ready. This may go without saying but I have come across many websites which have broken links or pages that say "under construction" which leaves a poor impression.
  2. Have your meta tags ready. Meta tags are used by the search engine to categorize and file your site as well as describe it. There are two main meta tags; description and keywords.
    1. The description tag is a short paragraph describing what the searcher will find when they click on the link to your website. This is often displayed below the link and if it is not explicitly defined the search engine will take the first 25 or so words on the page regardless of what they are. This can result in a misrepresentation of your organization.
    2. The second meta tag is the keywords tag. This is a collection of every keyword that you can think of which describes any aspect of your organization. Include geographic words, philosophical words, American, English or other versions and even misspelled versions if you are using commonly misspelled words.

Print Media

The second technique is printed media. Most organizations produce printed media including flyers, advertisements, information leaflets, posters, press releases and various other material. Don't forget to add your website address to any and all of these. The same way that you would add a phone number which allows interested people to contact you for more information your web address must be added to these. The website is not a replacement for the traditional phone number and mailing address but an additional item that is often initially forgotten by organizations new to the Internet. Remember that your website is available 24 hours a day, 7 days a week so people can browse your website to read the information at their leisure.

Links Pages

The third and perhaps most interesting and certainly most exciting is creating fraternal links with like minded organizations. The Internet has created a new form of information gathering called browsing. People will click on interesting links which they find on website in order to navigate through the Internet. If your website is one of the links available people will be able to find you easily.

To begin this process you need to do two things. One is to create a links page or link section on your site. This links area of your website needs to be monitored as the Internet is constantly evolving and your links will need to be updated periodically. There are a few website, such as, which will check the links on a single page for free saving you the time of clicking on each one yourself. Even with this type of service it is a good idea to visit your links periodically, perhaps once a year or so, to make sure that the direction of the organization you have linked to hasn't changed. I have found websites that have changed from information providers to full blown commercial sites which no longer reflect the ideals that caused me to add a link to their site originally.

This page or section can be as simple or elaborate as you wish. One way is a simple list with the name of the organization, another is a link with a description of the organization, a third could be categorizing your links by topic or service. There are many different ways of arranging a links area on your website.

If you are a member of a coalition you may want to highlight other coalition members or even create a web-ring which is an Internet program/protocol which automates coalition links.

You then need to ask other organizations to add your site to their links page. A good way of approaching them is to send a note to their webmaster or contact person telling them that you have added their site to your links page, inviting them to visit your site and offer your site as an addition to their links page.

The Planning Stage

A certain amount of discussion and planning needs to happen before implementing a website project. Creating a rough draft, whether on paper or a rough website, is a good first step. Most organizations already have material that can be used to create a draft site. Though each organization and business is unique the following are a selection of the many questions that need to be addressed when planning or updating a website. This is just the authors initial list. If you find some glaring omissions please let me know.  

HTML and/or Publishers

As mentioned it is important that the designer have a strong basis in HTML. That being said much of the design work done today is created in a web design software application. Web design software has improved over the years to become a useful and even required tool of a designer.

Both the major browsers have design tools or "Publishers" as they are commonly referred to. Microsoft offers FrontPage Express and AOL offers Netscape Composer. Both can be found on the company website.

As well most commercial products have a free download and trial period allowing users to try before they by the products.

As well as commercial products there are many shareware software packages that range from HTML text editors to complete GUI applications.


Hyper Text Markup Language (HTML) - useful to know! Take the Course!

HTML is a system used to markup a text document with tags, which describe how the document should look. The language's power lies in the fact that it is interactive, cross-platform (Mac, DOS, UNIX, etc), multimedia and a client-server application as well. Though there is no regulatory body the World Wide Web Consortium (W3C) oversees the development of HTML and other Internet languages.

The World Wide Web (WWW) is made up of HTML documents containing formatted text, images, and sounds stored on 100's of thousands of computer worldwide.

When web pages or HTML documents are viewed by a visitor or client the web browser will formatted the document using the codes or markup tags and display it on the screen. How the document is displayed varies depending on a number of factors including the type of browser, the type of computer (monitor, video settings, resolution, etc) and personal preference settings.

Web pages can be created in a text editor using the ASCII character set recognized by any modern computer. Markup tags are defined by angle brackets < >. An HTML tag *must* have a beginning tag and an end tag. An example would be <B> begins to bold text and </B> ends bold text. Any text between the tags would be rendered as bold text by the readers browser. Tags are case insensitive (upper or lower are acceptable).

HTML ignores white space, truncating any it finds to a single space. This includes tabs, line breaks, multiple space, etc...

A web page must begin with <HTML> and end with </HTML>. This tells the visitor's browser that it is reading a web page. A web page is often broken up into a head and a body.

The head of the document (<HEAD> and </HEAD>) contains non-displaying text such as the document name and the body contains the document's information. The head can also contain META tags, scripting and programming code.

The body of the document (<BODY> and </BODY>) contains the html tags which display the text, graphics and other information.

Because blank spaces are truncated into single spaces it is necessary to define paragraph and line breaks. Use the <p> and </p> to define a paragraph and use <br> to set a line break.

HTML Quick Reference

The following table is a quick reference of some of the most common tags.
<HTML> display and ends an HTML document </HTML>
<HEAD> used to add non-displaying text </HEAD>
<TITLE> adds the document name displayed on the title bar </TITLE>
<BODY> contains the main or displayed part of a document (see below)
<Hl .. H6> formats text for headings from 1 (the largest) to 6 (the smallest) </Hl .. /H6>
<B> bold the text (<strong> also displays bolded text but is listed as a depreciated tag </strong>) </B>
<I> italicizes the text (<em> also displays italicized text but is listed as a depreciated tag </em>) </I>
<U> underlines the text (underlined text is often reserved for a hyperlink) </U>
<P> determines where a paragraph begins and ends (end tag not currently required) </P>
<A.... > creates a hypertext link to another spot on the current page or another document (see below) </A>
*Exceptions that don't use closing tags  
<IMG..... > displays an image defined by the information typed into the tag (see below)  
<BR> adds a line break  
<HR> displays a horizontal rule or line across the page  
&nbsp; adds a non-breaking space (not really a tag but handy to know)  
<BLOCKQUOTE> Indents the enclosed text on the left and right margins </BLOCKQUOTE>
<OL> Encloses a number (ordered) list </OL>
<UL> Encloses a bulleted (unordered) list </UL>
<LI> A list item within an ordered or unordered list </LI>
<TABLE> Creates a table (see below) </TABLE>
<FONT> Modifies the font (see below) </FONT>
Sample Template HTML Document Following is a sample basic web document that includes many of the most common HTML tags. It can be copied by selecting it with your mouse, copying it and pasting it into a text editor and modified it for your own use. To view it simple save the file as a text document and open it in your browser (or double click on it).


<meta name="Description" content="This is where you describe your company or organization for search engines.">
<meta name="Keywords" content="add, keywords, separated, by, commas">
<title>Document Title</title>
<link rel="stylesheet" href="stylesheet.css">

<body bgcolor="#BBCAC5" background="background.jpg" text="#000000" link="#990033" alink="#3333CC" vlink="#999900">
<h1>Heading Level 1</h1>
<h2>Heading Level 2</h2>
<h3>Heading Level 3</h3>
<h4>Heading Level 4</h4>
<h5>Heading Level 5</h5>
<h6>Heading Level 6</h6>
<p>Paragraph Text</p>
<p><blockquote>Indented Paragraph Text</blockquote><p>
<p><a href="http://#anchor">Anchor</a></p>
<p><a href=""><img src="" width="59" height="30" alt="joansvoboda" border="0"></a></p>
<table border="2" width="300" cellspacing="2" cellpadding="2">
<td>Cell One Row One</td>
<td>Cell Two Row One</td>
<td>Cell One Row Two</td>
<td>Cell Two Row Two</td>
<li>Bulleted Item One
<li>Bulleted Item Two
<li>Numbered List Item One
<li>Numbered List Item Two
<p><a name="anchor">Clicking the anchor above will jump to this spot.</p>
<!--Comments can be added if they are enclosed by these tags -->



An anchor or link contains at least one attribute and the most common is HREF or Hypertext Reference. The HREF contains the path or address to a linked document. The address or URL (Uniform Resource Locator) describes where the linked document is located and the method of retrieving that document.An example of a complete URL or link would be...
<A HREF="">joansvoboda</A>

Once you have retrieved a document from a website the links on that document only need to point to other files in the same site and may contain partial or relative links. An example would be...
<A HREF="second.html">The next page</A>

The text between the open and close anchor is displayed on the page as information about the link. By default the text is blue and underlined.

Though a full path reference or URL is always more accurate and must be used when moving to another site, a relative link works well if the destination document is located on the same site. To create links within a website...

  1. Just refer to the filename if it's in the same directory
  2. Type the directory name then a front slash if its in a sub or child directory (subdir/doc.html)
  3. Precede the filename with two dots and a front slash for a parent directory (../doc.html) and repeat this for each parent (../../doc.html).

An anchor can also point to a specific spot on the same page or a specific spot on a different document. The spot that the link points to must have a named anchor (target) attached and the reference link must include the number symbol (#) then the name of the anchor. Use the same naming rules as above. An example of a link to an anchor would be...
<A HREF="#sub">Refers to a target on the page</A>
<A HREF="">Refers to a specific spot on a different document</A>

An example of an named anchor would be...
<A NAME="sub">Sub Topic</A>


Image tags work much the same as the anchor tag but don't require an end tag. All images require a source (SCR) attribute. The two main types are JPEG and GIF. Generally use JPEG (.jpg or .jpeg) for photographs and use GIF (.gif) for Clip art or Logos. An example would be...
<IMG SRC="logo.gif">
<IMG SRC="">

Images have a number of attributes that can be added as needed.

ALT = Descriptive Alternative Text ("placed in quotes")
BORDER = 0 for no border or 1 and up for place a border around the image
HEIGHT = defines the height of the image
WIDTH = defines the width of the image

Images are treated like a text character to a browser. Unless you use attributes to modify how they are displayed, images will be placed in a document as if they are the next character in a string of text. This allows them to be used as references for links.

Images Used as Links

To use an graphic or image as a link by placing the image between the anchor tags. An example would be...
<A HREF="index.html"><IMG SRC="logo.gif" BORDER="0" ALT="Our Logo"></A>

BORDER = "0" - removes the default 2 pixel border that is placed around an image if it is used as a link
ALT = displays the alternative text if visitor is not using graphics or reads alternative text. This text is also displayed when a cursor moves over the picture


The <BODY> tag determines how the document will display. It has a number of attributes...

BGCOLOR = "rrggbb" - can contain a red/green/blue hexadecimal number (see below) or a named color
LINK = "rrggbb" - the link color
ALINK = "rrggbb" - the active link color
VLINK = "rrggbb" - the visited link color
TEXT = "rrggbb" - the text color
* note that COLOR is the American spelling

Images can also be use in the <BODY> tag to display backgrounds. Some care should be used to match the image with the text as this is a common mistake made by designers. The background image goes in the BODY tag. An example would be...
<BODY BACKGROUND="background.gif">

Pages can use both a background image and a background color for visitors who don't display graphics. An example could be...
<BODY BGCOLOR=#88C5D1 BACKGROUND="background.gif">


The color attribute is determined in 2 ways. The first is by a hexadecimal value made up of 6 digits. Hexadecimal digits use 16 values including 0 through 9, A, B, C, D, E, and F. The first two digits determine the red value the next two determine the green and the last two determine the blue commonly referred to as the rgb value.

The second method is to use a "name color" such as red or green. Most common color names can be used and there are many resource on the Internet to help with determining page colors.

Always be aware that visitors are using a variety monitors and color preferences and the color you choose may not display the same on everyone's screen.


The <FONT> and </FONT> tag modifies text size, color and face.

SIZE = "n" - a number between 1 (smallest) and 7 (largest). Also + or - 1 through 7 compared to baseline font
COLOR = "rrggbb" - rgb value or named color
FACE = "n" - a named font (user must have font installed locally)

An example could be...
<FONT SIZE="-2" COLOR="red" FACE="Arial">Small, red text in Arial</font>

Note: Stylesheets should be used rather than the <FONT> tag in most instances.


Tables can be used to place information in columns & rows. A table definition begins with <TABLE> and ends with </TABLE>. Tables are made up of Rows <TR></TR>, Headings <TH></TH> and Definitions (cells) <TD></TD>.

<TR> and </TR> - begins and ends a row
<TH> and </TH> - begins and ends a heading
<TD> and </TD> - begins and ends a definition

Tables can be nested to create different effects. Table also have various attributes...

BORDER = "n" - determines border width
BORDERCOLOR = hexadecimal value or color name
BORDERCOLORDARK = two edges of the border
BORDERCOLORLIGHT= the other two edges of the border
WIDTH = "n" - can be a percent (n%) or a number based on points (n pt)
CELLPADDING = "n" - space between content and cell walls
CELLSPACING = "n" - space between the cell and the exterior frame of the table. Some of the table attributes can be applied to individuals row, columns and cells. The table definition and heading have an extra attribute.
COLSPAN = "n" - extends the contents of a cell into the next column(s)
ROWSPAN = "n" - extends the contents of a cell into the next row(s)


Most tags allow for attribute or parameters such as alignment, color, width & height, borders, alternative text and various others. Parameters follow the tag within the braces and are made up of a name and a value pair. There can be multiple attributes with each one separated by a space. Though some times it is not necessary, it is good policy to always place quotes around the parameter values.


The <META> tag is used to present information about an HTML document to browsers, search engines, and other applications. A meta tag can be used to describe a document, define the keywords that a search engine will use, redirect visitors to the correct page and various over background applications.

It is quite important to include <META> tags in the main documents of your website. If you don't include these tags the search engines will define your site based on their own criteria using the first 25 words that they find, regardless of what they are. The two main tags for defining your site are;

Description - containing a 25 (approximate) word description of your organization
Keywords - containing words that interested people will type into a search engine

Extended Character Sets

All alphanumeric characters (A to Z and 0 through 9) and many symbols will display on a web page simply by typing them in. Several characters including many European symbols require that their decimal equivalent be entered to display properly on the page. As well some symbols are used by HTML for special purposes. An example is the less than (<) and greater than (>) symbol which is used to define tags. In order to use these symbols a developer must add them using their decimal equivalent or HTML special entity reference. To enter a symbol from the extended character set begin with an AND symbol (&) and end with a Semicolon. An example would be &#160; or &nbsp; which would both place a single space in that spot that you place this entry.


The <frame> </frame> tags allow designers to place two or more web pages on the same screen. Frames are setup in a parent/child format allowing designers to control the flow of information from one frame to another. The <frameset> </frameset> tag allow the designer to determine the size and placement of the individual frames. The <noframes> </noframes> tags allow designers to display information for browsers that don't use frames.

A few things to note when using frames are that the title on the top of the page displays the parent's <title> information regardless of the child frame contents. As well the URL in the address field also displays the location of the parent document. When placing links in a frame be sure to direct the page to the right frame using the target attribute.

Website Design Tools

Style Sheets (HTML 4) As with any computer technology HTML is constantly evolving. The latest version HTML 3 adds various new tags and HTML 4 will/does incorporate Dynamic Hypertext Markup Language (DHTML). One aspect of DHTML are Cascading Style Sheets (CSS). CSS allows designers to create a document with standard attributes that can be applied to various HTML documents which then inherit their attributes from this document. This allows consistency across multiple documents on a website. It also allows designers to quickly change the look of the site by making changes to style sheet that will then be applied to all the documents that use that style sheet.

Style sheet are attached to a document using a <LINK> tag in the head of the document, embedded in a document with the <style type="text/css"> </style> tag or defined for a specific area of the document (this last options sort of defeats the purpose of stylesheets).

A stylesheet file name ends with a .css extension and is a text document containing the styles that will be applied to the document. Stylesheets can contain information on the size and color of headings and links and can define various specialized tags to modify text throughout the site. Stylesheets are still relatively new and only IE3 and up and NS4 and up use them. Older browsers that encounter Stylesheets will ignore them (if the designers uses <!-- and // --> around the style definitions) and display the page using the browsers defaults.

Once a stylesheet has been linked to a document, styles can be applied to tags with the class="" attribute and to text using the <div></div> and <span></span> tags.

File Transfer Protocol (FTP)

Though all the design work can be done on your computer off-line (with the exception of testing your scripts) you will need to place your finished web documents on the website. File transfer protocol or FTP is the method used to place your documents on the website server. There are a number of FTP programs available from the most basic command line program that comes with Windows to the freeware and shareware programs that most ISPs distribute with their startup accounts to commercial based software.

What FTP does is allow the website manager to connect their computer (the Local computer ) to the server (the Remote computer). You will need the address of your service's FTP server in order to connect to it and then the username assigned to the directory and finally a password to connect to the server. Once connected the FTP program will display the files with their name, size and date information and allow the user to replace, modify or delete these files as needed. The program will usually display the contents of the remote computer's directory beside the local computer's directory. This allows the maintainer to compare the files on the local computer with the ones on the website.

Sending a file to the server or placing the file on the website is called uploading and getting a file from the server is called downloading. The FTP program may refer to the computer you are connecting (the one the website is on) as the remote computer and your computer as the local computer.

When more than one person is updating the website it is a good policy to download the file (the remote copy) from the server before making changes to it. This way you are making changes to the latest version of the file rather than writing over changes someone just made. Consider the copy on the website as the original.

HTML Editors

Though most word processors advertise a "publish to HTML" option the actual output can often leaves something to be desired, especially when graphics and tables are being displayed. Having said that it can be a quick and easy way of creating an HTML document. It is extremely important that the website maintainer has a working knowledge of HTML as many "publish to HTML" options will add tags that need to be modified.

There are a few commercial HTML design programs that work quite well though it is still necessary to modify the HTML form time to time. Most design software integrate an HTML text editor into the program.

There are also number of free alternatives which can be very useful tools. A free text based HTML editor can provide many tools that assist web developers. Most of these programs also integrate a web browser to allow the developer to view the page.

Another alternative is FrontPage Express or Netscape Composer which are free HTML design programs and publishers. Like any other HTML graphics based program the developer will need to occasionally open the file in a text editor to "tweak" the file. These programs also have a bad habit of modifying the document without telling you. To publish from one of these programs the user, usually, will need to enter the complete pathname (not the partial one used to connect to the ftp server).

One of a web designers main tools remains a good text editor. The program Notepad is less than adequate as it often loses line breaks making the document hard to read. Wordpad one of the most used programs for non-commercial web designers, just make sure to save the document as text. Designers can also use their favorite word processor but be sure to save the document as a text or HTML document when saving it. You may also want to consider purchasing a professional HTML text editor if you are working on a lot of documents.


A picture is worth a thousand words and a second visit to a website. Some thought must go into the graphics used on your site. A poorly designed graphic distracts from the sites content but the lack of graphics can be worse.

When adding graphics to a web page keep in mind the size of the image file and how it will contribute to the speed that the page will display on the visitors browser. Use a graphic program to "optimize" your images before adding them to the page. Try to get your clipart image down under 15 kilobytes if possible and keep photo's under 35 kilobytes if possible.

Generally use the .gif format for clipart with 256 colors or less and use .jpeg for photos or images with a large range of colors.

The GIF format allows you to define one color as transparent which is usually used as the background color. The GIF format can also be used to create animations.

The JPEG format allows you to set the level of compression. Though highly compressed images produce smaller file sizes the image quality also deteriorates. Though there is software applications that will assist you with optimizing your images it still takes some trial and error to get that image perfect.

It is possible to control the text flow around images by adjusting the ‘align' attribute. If you can't get that image in the exact place consider putting the text and image in separate cells in a table.

Always use the ‘alt' attribute to add a text definition for your images. This will be the words that text browsers display and the words that audio browsers read.

Sound & Animation

I have placed these two categories together as they often come under the category of multimedia. They also involve more complex web designs, often involving some programming or plugins. MPEG was an attempt to create a common standard out of the dozens of sound and animation standards available. MPEG 3 has upped the anti for multimedia content as most multimedia players recognize it, it involves very little training to use and is simple to incorporate into a site. Look for MPEG material to appear on the Introduction to Computer site in the future.

There are many different formats though RealNetworks and Macromedia stand out. RealNetworks content must be placed on a server that can stream audio and video content. You may have to shop around to find a service that provides this and the web page visitor must have a RealNetworks player (or equivalent player) installed to view/hear the content. Macromedia produces multimedia development software which can be placed on any server but the web page visitor must have a Shockwave plugin installed to view the multimedia content.

A simple and economical solution to placing multimedia content on your website is to use .gif animations. GIF animations are a series of images or frames setup to display one after the other. There are many graphics programs that allow you to assemble and create images then save them as .gif files. Treat them as you would any other plain (large) .gif image once it has been saved.

MPEG is another economical way to place multimedia on your site. You will probably have to purchase a development program but placing the content on a website can be as simple as creating a link and most multimedia players (including the one that comes with Windows) will play it.

Browser Comparison

Though there are many different browser the two main ones used by the majority of people are Microsoft's Internet Explorer and AOL's Netscape Navigator both originally based on the first web browser; Mosaic. Many universities and community based Internet services offer text accounts which provide Lynx as the browser. Thought the majority of visitors use graphic based browsers, a designer must be aware that a significant number of visitors are using text based browsers to view the site.

The companies that develop Internet browsers often place support for non-standard tags in anticipation of the changing nature of the Internet. This can cause the various browsers to display the same page differently. The way that the various companies implement the HTML tags in their program can also be different causing a confusing situation for the web developer.

Many web design tools use shortcuts and none standard HTML based on the browser that they are targeting. As you are building your site keep checking it to make sure that it conforms as closely as possible to the W3C guidelines. There a number of resources available on the Internet and through software applications to check your HTML for browser compatibility. Also be aware that each browser has various versions though it is not always possible to support the older browsers.

The best rule it to stick to standard HTML or provide a separate page for text browsers. This is especially true when using frames or complex programming. One should also note that browsers designed for the visually impaired use standard HTML tags to read the information to the users.

Test your website in more than one browser and ifpossiblel a text browser as well. It is more difficult to have various versions of a browser but if possible this also helps.

etting up security

As most people won't be setting up their own secure server the scope of this section is limited to the topics of protecting email and small business or organizational transactions.

Email can be protected using a service or an application (program). There are others but the two that stand out currently are S/MIME and PGP. S/MIME requires the user to register with a 3 party service which issues a digital id that you attach to your message. Though this is usually a commercial service there is often a free introductory period (Editors note: one service offer to renew my trail period recently). PGP is both a freeware or a commercial application that you run from your own computer.

Both methods allow users to sign or attach a digital identification to the email message which verifies, to the recipient, that the message is from the original person or organization and that the information wasn't tampered with in transit. These methods also allow the user to encrypt their message so that anyone intercepting the message wouldn't be able to read it. You can also decide the level of encryption from low; in which a nerd with some good software and enough time on their hands could possibly decrypt to high (128 bit) which would take a whole mountain of experts weeks to decrypt if even then. Most of us will choose somewhere in between as this process involves increased time and file size.

Both methods use key pairs of public and private keys. The sender signs their messages with a private key which is kept secure. The recipient is sent a public key which, depending on their email program, will automatically or manually verify to them that your message is authentic. Public keys are sent to the recipient through various methods including posting it to a service, sending it through email or sending it as a file (you can also post that public key file on an Internet site). The recipient can add your public key to a file (sometimes called a key ring) and use it to verify any other message from the sender.

Encryption also involves using the key pair but in reverse. Once your message is completed you encrypt the file using the recipient's public key ensuring that only the recipient can ever access that message with their private key. (Editor's note: Don't lose your private key!).

Small businesses and organizations that wish to offer transactions over the Internet or Ecommerce can take their chances and set up an unsecured system, set up their own secure server or purchase a service from a third party. There are various types including service that take a percentage of the transaction and/or charge a service fee and/or charge for each transaction. Some organizations are more reliable and you should always shop around before committing to a service. Because this type of service is so new the length of time a company has been operating is not always a way to decide. Things to watch for is down-time. If your companies website is operating properly yet the customer or user can't access the transaction server because it is down, too busy or misconfigured they will easily be put off perhaps entirely. Watch for contracts that lock you in, as the market is still developing and prices tend to fluctuate. It is easy to switch services by simply changing the address on your website's order forms.

Security and Websites

As was stated at the beginning of this document the nature of the Internet is an open system. Having said that - there are many reasons and many ways to set up a secure or closed system within this open framework. Private or member based discussion groups, private files or folders, protected databases, copyrighted material to name a few all need some way of allowing them to be distributed to the intended recipient only. Also many businesses are creating Intranets which are closed systems only accessible to registered users. An Intranet can provide a way of making company information easily accessible and allow branch offices to communicate with each other easier. Intranets are powerful tools for a business!

Account Security

Your website itself is protected by your Internet Service Provider's software. When you attempt to access your web space to change or modify a file using a shell or ftp you are challenged to send your username and password. This is the first line of protection and adequate for many website administrators.

Server Security

The server that your website is installed on is the second line of protection. Most servers have security features built in to them allowing users to password protect folders or build scripts to send a username/password challenge to a user trying to access a file or folder. This allows website administrators the ability to create discussion groups within their site or to place confidential documents or information that is made available only to registered users on their own website. Unfortunately many ISP either don't make this option available, charge a premium to use them or only allow their own employees to set them up.

Third Party Security

Another option includes contracting the protection of private files to a separate service, pay a third party to hosting a private discussion group or obtain web space on another server that allows access to security options. The entire Internet is as close as your computer connection and whether the file the user is viewing is stored in your own current web space or on another server is usually immaterial. When your customer or member moves from one page to another the consistency of the website is the maintained by the design, not the address of the separate pages. It is also possible to control the address that is displayed if required.

Software Security

Another option is to use JavaScript or Java applets to control how customers or members access secure features. This option is only available to users who are using modern Java enabled browsers. Scripts and applets can control access to documents and databases, create content on the fly based on user input, detect the browser the visitor is using and direct them to the proper page, retrieve cookies and use that information to determine whether a user has access to a certain area or not, as well as many other uses.


Copyright is protect using the same process as any original material (books, artwork, film, etc...). Anything that a user gets off the Internet should be treated as privately owned information unless otherwise noted. Anyone posting private information to the Internet should be aware that copyright law is not the same in every country and may be difficult to enforce. It is possible to set up a page that won't be stored on the users computer once they leave the site but that will only slow down not stop users who want to obtain information posted on a website. Notices of copyright are often added to the main page of a website sometimes with a link to a page describing the details of how the content can be used.

Is Security Necessary?

Though you may think that it is not necessary to setup security systems there are many reason to consider it. I have come across a number of examples of people forging documents and email. A digital signature will be the only way to verify whether a document is genuine or not.

Another reason you may need is that many organizations need to discuss draft articles, changes to bylaws and other documents that could cause problems if they were made public before they supposed to. A secure directory within your website is an ideal spot to store sensitive material making it available for members and people who have the password.

I would be remiss to not point out and as all articles on the subject also point out mining the Internet with malicious intent is also possible. One of the latest malicious acts is to search websites for email addresses and then add them to spam distribution lists. Unfortunately there is very little that can be done to counter this.

Whether you decide to add a security component to your website project it is a good idea to have a discussion about the topic when planning the site and review your security systems periodically.

Design Tools

There are thousands of reference materials and user's guides available for web designers. There are also thousands of different pieces of software available to assist a developer in designing websites. A good graphics program and a HTML editor are the main tools that a designer uses though there are many others that a designer will also need. The table below is a list of applications that a designer will want to have available. There are many good quality software products available and many new ones added each day. When choosing a software package check the companies website first to look for trial versions, support service, upgrades, etc...

  Click here to return Home

To Contact us by E-Mail:  JOANS followed by @ (formatted to foil Spam Bots!)