OMSI/WinterHaven PSD2000 Project:

Inquiry Sessions | Portfolio | Resources | Teaching Guide

Inquiry Session 2: Website Design Basics

Learn the basics of website design so you know what you're doing before you get started!

About HTML | Making HTML | Web File Formats
Naming Folders & Files | Storing Web Files

About HTML

Most webpages are made using HTML. HTML stands for "HyperText Markup Language", which is a simple computer language used to "mark up" the format of a webpage (you can learn more about the "HyperText" part of HTML in Session 5).

A web browser (like Netscape Navigator or Communicator or Microsoft Internet Explorer) is a computer program that can access a webpage and read any HTML format to display it correctly.

HTML uses simple commands called "tags" to change the format of specific pieces of text in a document. All HTML tags begin with the "less than" math symbol "<" and end with the "greater than" math symbol ">".

For example, to make words on a page bold, you can use the HTML tag <B>. When you want to stop making words bold, you use another HTML tag to "close" or stop the bold tag--</B>--which is exactly the same except for an added slash before the letter "B".

When you create a webpage, all you have to do is "mark up" the text of your document with the right HTML tags in the right places to format it the way you want.

Making HTML

There are a lot of different programs out there specifically for creating and editing HTML. For example, a free HTML program called "Composer" is built in to Netscape Communicator. Another common HTML program is Microsoft Front Page or Front Page Lite, which is also free. Claris HomePage is another common HTML program, and there are many more.

You can use any of these HTML programs to make webpages, but the amazing thing about HTML is that you don't need any special programs at all to make it!

Here's why: The only thing in an HTML file is plain text and HTML tags, which are also plain text (you can learn about how images appear in webpages in Session 4).

Because simple HTML tags take care of all formatting, webpages don't need any special formatting added by word processing or HTML programs.

To make a plain text file, you can use a basic text editing program you probably already have on your computer, like SimpleText for Macintosh or Notepad or Wordpad for Windows.

Or you can use a word processing program like ClarisWorks, WordPerfect, or Microsoft Word, as long as you are careful to save your HTML document as a plain text file. (For example, after you make your file, choose "Save As" from the "File" menu and save the file as type "Text" or "Text Only"). And remember, because HTML tags do all the work of formatting a webpage, you can not also format a webpage using commands like "center" or "bold" in a word processing program!

When you are starting out with HTML, the best reason to use a basic text editing program is that you will understand all the HTML code for your webpage because you will type it yourself.

Try out one of the fancy HTML programs and look at the HTML code it makes. You will probably see a lot of HTML that you didn't expect and you may not be sure what it does!

Web File Formats

Computers use many different kinds of files: plain text documents, webpages, image files, word processing documents, programs. Each different kind of computer file is called a file "format".

On many personal computers, you don't really ever need to know a file's format. You double-click on a file and a program that can read that format opens up. When you're done, you close the file and the program saves it in the right format.

Only certain types of computer file formats can be used easily on the Web. The most common are HTML documents (which we already know are really just plain text format), and image files of different formats such as Graphic Interchange Format (GIF), Joint Photographic Experts Group (JPEG), and Portable Network Graphics (PNG).

For your webpages to work, you must make sure that all the files--HTML and images--are saved in the right formats. One way to be sure is to open a file and use the "Save As" command to make sure you are saving it as the right format or type.

On the Web, you must also identify what format a file is by adding a period and an abbreviation to the end of the file's name. This abbreviation is called a "file extension" and is sometimes 3 letters long, sometimes 4, depending on what kind of web server the page will use (use 3 letter extensions unless you know you will need 4-letter extensions).

HTML files should end in ".htm" ("home.htm"), GIF image files should end in ".gif" ("picture.gif"), JPEG image files should end in ".jpg" ("picture.jpg") and PNG image files should end in ".png" ("picture.png").

Many programs will add these extensions for you automatically. Be careful using Microsoft Windows because it allows you to hide file extensions if you don't want to see them. If you add extensions yourself in Windows, you might end up with a file named something confusing for you and other computers, like "home.htm.htm".

Naming Folders & Files

On most personal computers, you can name a folder almost anything you want. But web server computers are more picky about names and you may want to put your webpage online some day.

Follow these simple rules for naming folders and files for the Web:

Storing Web Files

Like computers on the Internet, computer files on the Web can be in different places and still connect to each other. So it's important to keep your webpage files organized so you and the files know where everything is!

The easiest way to keep a webpage organized is to keep all its HTML and image files in the same folder. You can learn how to connect webpages in different folders--or even webpages on different computers--in Session 5.

go back to Inquiry Session 1 | go on to Inquiry Session 3

Inquiry Sessions | Portfolio | Resources | Teaching Guide