Word of Eye - Web Site Design & Stuff logo
About web site design
How I work
About myself
See the sites
No place like home
Show me your stuff
About web site design


Web site design is not rocket science. Just about anyone with a text editor, a little time and some patience can build a simple site. (I offer instructions below). There are also a number of WYSIWYG HTML editors on the market that, again, with time and patience, will allow even the completely inexperienced to build their own sites without even having to know the HTML tags that the software writes.

So when people ask me, “Can't I just build my own web site?” I tell them “Yes, you can build your own web site. You can also cut your own hair and prepare your own taxes, but you will have to live with the consequences (at least, temporarily).” A badly designed web site can be a lot like a bad haircut — it makes an unprofessional first impression and may discourage your clients from trusting your judgment. And, like the bad haircut that has to be redone by a professional, or the incorrectly prepared taxes, a badly designed web site may, ultimately, end up costing you money.

Condensed Version Introduction

If you are contemplating building a web site or hiring someone to build one for you, it helps to know a little bit about the world wide web, search engines and browsers, and how these things work. If you are already comfortable with your knowledge of the world wide web (frequently, inaccurately referred to as the Internet), you may want to skip to “What could possibly go wrong” before deciding whether to build your own site or hire someone to build it for you. (If you have already decided to hire a professional web designer, you may want to skip to another page entirely.)

The following is my condensed version of how the world wide web and web sites work. The descriptions that I offer are extremely basic, and largely non-technical. Rather than taxing my limited knowledge of geek speak to create a glossary of terms, I have linked keywords to their definitions as provided by FOLDOC, Free On-Line Dictionary Of Computing <http://foldoc.org>, Editor Denis Howe — an invaluable resource.

Some of my descriptions are so basic that they may provoke a “well duh...” response, so feel free to skim through and skip anything that seems obvious. To be of aid in this process, I offer this outline:

  1. Read and learn disclaimer
  2. How it works
  3. What could possibly go wrong
  4. Advice

back to top of page

Read and learn disclaimer

Anyone who is interested in more comprehensive information on the world wide web, terminology and/or web site design is welcome to browse the world wide web or read one or more of the millions of books available on these subjects.

back to outline

How it works

World wide web
The world wide web is only a portion of the Internet, but it is the portion that allows for the existence of web sites, and therefore, the only portion that I will discuss here. The world wide web is made up of (but not limited to) web sites, web search engines, such as Google, and web directories, such as Yahoo, which are hierarchical indexes of the world wide web. Actually web search engines and web directories occupy their own web sites. Web search engines and web directories are powerful tools that, when used correctly, allow users to search huge portions of the world wide web and access search-specific information on other web sites.

back to outline

Web Search engines
Web search engines differ from web directories in that they employ spiders, virtual robots, that seek out information from web sites rather than relying on human intervention to sort and categorize site content. Some of the content that spiders read is contained in the meta tags of the web site. These tags are not visible in the browser’s display of the web page. However, you can view these tags and others by selecting “source” or “page source” from the “view” pull-down menu of the browser. Try it now. You will see all the code for this page. Meta tags are near the top.

back to outline

Web sites
Web sites consist of a web page or web pages linked together and hosted on a web server. All web pages have a unique address called a Uniform Resource Locator (URL). Ideally, the web server is up 24/7, and, generally, anyone with Internet access can view the page(s) with a browser pointed at the appropriate URL.

back to outline

Netscape Navigator and Internet Explorer are two of the most popular browsers in the USA. There are many versions of these browsers and there are hundreds, if not thousands, of other browsers out there. Browsers pass information back and forth to web servers using HTTP (Hypertext Transfer Protocol). Browsers, technically HTTP clients, interpret the information that they receive from web servers (HTTP servers) into the part of the graphical user interface (GUI) that we call a web page. Browsers also permit interaction between the user (through the GUI) and the server — i.e. clicking the mouse on a hyperlink to get to a new page.

back to outline

Web pages
Web pages are composed of various combinations of elements, represented by HTML (Hypertext Markup Language) tags and, sometimes, other code — i.e. JavaScript, PHP.

back to outline

HTML tags
The HTML tags are read by the browser and interpreted as formatting instructions. Users will not see the HTML tags on web pages, but the tags can, generally, be viewed by choosing “page source” from the pull-down menu under “view”. HTML tags are pretty simple.

HTML tags include opening and closing angle brackets and a name (which is usually an obvious choice) and, sometimes attributes. Attributes follow the tag name, and if the attributes have a value, the value follows the equals sign and is enclosed in quotes. Most HTML tags have a start tag and an end tag (which looks just like the start tag except that the end tag will have a forward slash before the tag name). Not all HTML tags require an end tag. One exception is the paragraph tag, which is written: opening angle bracket, the letter p, closing angle bracket — <p>. You should be aware that not everything enclosed in angle brackets is an HTML tag.

back to outline

Making web pages
You can make web pages by using HTML tags. You do not need special software to generate the tags. You can use any text editor that allows you to save text as “plain text” to make your tags. And you can hand-copy and use the basic structure below to create a few simple pages:

<title>This will appear in the browser's title bar</title>
<p>Put your body copy here.
<p>Be sure to use the paragraph tag if you want to separate paragraphs.

If you are going to try this, you may want to change the title and add your own body copy. Once you have made your page, you will need to save it as plain text and name the file “index.html” or “index.htm” if you are using an older version of Windows. After naming and saving your page, you can view it in your browser by choosing “open file” from the “file” menu of your browser and navigating to wherever you saved the “index.html” file. Congratulations, if you followed my instructions, you should have a web page.

You can make more pages the same way, and by saving those pages to the same location (folder) as the index page, you can make a web site. Each page will have to have its own name and the .html or .htm extension, but, beyond naming the home page “index”, the names are arbitrary.

For the purpose of this explanation, call the second page “pgtwo.html” and the third “pgthree.html”. Since you will want to be able to navigate from the home page to the second and third pages and back again, you will want to add links (hyperlinks).

To add a link on the home page to the second page, hand-copy the following tag:

<a href="pgtwo.html">title of page two</a>

into the body section of your web page before the </body> end tag. To add a link to the home page, use the same tag and replace the value of “pgtwo.html” with the value of “index.html” and change the title of page two to the title of the home page. Test the results in your browser.

You should now have a very small web site that you can view on your computer. If you want the world to see it, you will have to upload it to a web server. Your Internet Service Provider (ISP) can tell you how.

Making a web site can be this easy. Learn a few more tags (see the Read and learn disclaimer) and you will be able to change the appearance of your text, add color to your page(s) and add images. It really takes only a short amount of time to master the basics. And if your only reason for having a web site is to share anecdotes and photos with family and friends, building your own web site may be the way to go.

However, be aware that there are a number of things that need to be taken into consideration when building a web site.

back to outline

What can possibly go wrong?

Because the Internet, and components of the world wide web, developed through the efforts of many different individuals and groups of people around the world over several decades, a lot of funky stuff happened. Different (program) languages and (program) applications evolved in a sort of free-form manner. Standards for the world wide web were and are always changing.

For this reason, there are a lot of different browsers available. Different browsers and different versions of the same browsers support different features, so cross-browser compatibility becomes an issue. Many older browsers do not support Cascading Style Sheets (CSS). Worse still, some support CSS improperly so instead of ignoring the CSS formatting rules and doing nothing at all to alter the appearance of a web page, these archaic browsers do quirky interpretations of the rules with unacceptable results.

An example of this is the white border surrounding the text on this page. I created the border using CSS to tile images that are gold, white and green to create the border. This page looks nice when viewed with most browsers that support CSS. However, the Netscape 4.7 browser, which does not properly support CSS, will display the page properly if JavaScript is turned on, but if JavaScript is turned off the CSS formatting disappears. This should not happen since CSS is not a form of JavaScript.

On a similar note, when you are designing a web site, browser preferences should be taken into consideration. If you do not format pages using CSS, a user can exercise a certain amount of control over the appearance of the content in the browser window. By choosing “preferences”, frequently located under the “edit” pull-down menu, a user can do a number of things, including, but not limited to, change the default home page for the browser, change the default fonts and/or the point size of the fonts. A user may also choose to turn off JavaScript causing features such as rollovers and popup windows not to work — this is one more variable that a designer must take into consideration.

Ultimately, a designer may exercise complete control over the appearance of type by converting the type to a graphic. This is useful for creating logos, buttons and headers or a completely typeset appearance. However, graphics load much more slowly than text, and the speed at which a page loads should always be a factor in determining the design of the page.

A user’s choice of computer will also affect the appearance of the designer’s web page. PCs and Macs display color differently. The same color tends to look more saturated if it is being interpreted by a PC than it would if it were being interpreted by a Mac.

Monitor resolution is also a consideration. As monitors become better and cheaper, more and more people are buying larger monitors and setting them higher than the once ubiquitous 800 pixel by 600 pixel resolution. For the time being, I am designing sites that look best at 1024 x 768, but still look OK at 800 x 600, and are not totally illegible at 1600 x 1200.

If the site is text driven, and the relationship of text to graphics positions is not terribly important, a fluid design (where pages expand and contract as the browser window is resized) with relative sized fonts (smallest, smaller, small, medium, large, larger, largest) will work nicely for all resolutions. If the site is image driven and the positioning of images is crucial, then a fixed width site with CSS will work for most new browsers. In order for that same fixed width layout to work with older browsers, a designer may have to do any one or more of the following: use tables to fix layout, use dot GIFs to prevent empty table cells from resizing, use legacy tags with or instead of style sheets, use JavaScript to redirect old browsers to special compatible pages or to post alerts about non-compatible pages.

These are just a few of the variables that one must consider when designing a web site. Hopefully, this makes it clear that although building a simple site for your own amusement is not an insurmountable task, designing a professional web site for your business is no small undertaking. Hiring a professional web site designer is a sensible move to make if you do not have hundreds of hours to spend mastering HTML and CSS and then, endlessly testing your web pages.

back to outline


However, if you are still determined to build a site, I offer the following advice:

  • Start with a small and simple site.
  • Backup your work regularly.
  • Test your site regularly using different browsers and different computers.
  • Copy and paste the URLs for all external links.
  • And, if you are using unfamiliar software, read the manual.

back to outline