An ESPG Lesson in Web Design

Table of Contents

Part 2: Writing a Basic Web Page

Let's get started with a basic web page to explain how HTML works:

Document name: learning.html (or learning.htm):

<HTML>
<HEAD>
<TITLE>This will show up at the top of the browser window.</TITLE>
</HEAD>
<BODY>
This is where you type the body of your document.
</BODY>
</HTML>

This is as basic as a web page can get. The output in a web browser of such a document would only say "This is where you type the body of your document." with the default background color (typically gray) and default text color (typically black).

We see that the name of the document ends in .html or .htm. This is very important so that the browser knows that the document that it is about to read is html. Typically, .html (ex. learning.html) is used, but if the machine (i.e. - PC's) you are writing your web page on only allows 8.3 names (8 characters with a 3 character extension) you can only use .htm (ex. learning.htm). Browsers are equipped to read both just fine.

Let's take a look at what all of the other stuff meant that we had to put into the document.

We see several "Tags" inserted which are enclosed in angled brackets (ex.: <HTML>). These are imperative--they tell the browser that the document is indeed HTML and also tells the browser how you want the material presented on the page. Tags typically come in pairs, with the end tag being almost identical from the start tag except for the slash (ex.: </HTML>). Also important to realize is that HTML is not case sensitive (with a few exceptions). I typically use the custom of capitalizing my code to make it stand out, but not everyone does. It is typically best to choose one convention and stick to it. Although it will not hurt your code to mix upper and lowercase, even in the same tag (ex.: <hTMl>), it makes the code easier to read if the capitalization is standard.

Since we know that tags are necessary, it helps to first understand what the basic tags mean:

<HTML> & </HTML>
This tells the browser that the document is indeed HTML. The browser probably already knows this because of the document's name which should end in .html (or .htm if you may only have 8.3 names). It is still important to add this tag though, for uniformity and because not all browsers will recognize the document type from the document name.
<HEAD> & </HEAD>
This basically contains the Title of the document.
<TITLE> & </TITLE>
The title of your document is important. The title is what shows up in the window of the browser. Also, if a user chooses to bookmark your page, the title is what will show up as the bookmark name. Therefore, you want to choose something short but descriptive. For example, the main page for the SMART students should probably have the title "SMART Welcome Page" rather than "Welcome". If one had a bookmark titled "Welcome," she may not remember where the link went and may not use it. A title such as "SMART Welcome Page" is descriptive and gives the users a good idea of where the link goes.
<BODY> & </BODY>
This is the last main section of an HTML document and contains the body of information which is to be displayed on the page. There are numerous tags which may be used within the body of a document which will be discussed shortly.

Knowing these basics will allow us to complete Lesson 1:

Back to the Table of Contents

Lesson 1: Write a Basic Web Page

In groups or alone, depending on computer resources, you are going to make a simple web page much like the one shown as an example above. Since you are probably using a Macintosh, open up SimpleText with a new document. (If you are having problems with this program, please see your instructor.) Because computers can crash, it is important to start saving your documents right away. Therefore, you should choose a descriptive name for you document and use the "Save As" function. Do not forget that the name must end in .html or .htm. From now on, periodically save your work so that if something happens to the machine you are working on, all is not lost.

Now that you have your empty document opened and saved, you want to start to fill it. Go through the example HTML document, using the same tags, but inserting your own text into the Title and Body fields. This will be your page to keep and build on for the rest of the lesson. Do not forget to save periodically.

Once you have finished the basic document, save it, and open up the provided web browser (probably Netscape). The browser will go to its default page. You want to use the browser to view your own document, though. Therefore you will want to use the "open file" or "open file in browser" command. When the box comes up showing documents which may be open, select your document and choose open. Your page is now displayed on the browser. If something is improperly coded, it may not display properly. (This is especially true for tables.) Check with your instructor.

Current versions of Netscape can also be used to edit files. However, you must be careful about saving documents: be sure you check how images are saved, especially if you plan to use multiple folders. The default is for images to be saved with their corresponding file (that is, in the same folder), but if you use the same image in more than one file, this can lead to image duplication. To change this, go to Edit --> Preferences... and select "Composer" and "Publish" and uncheck the "keep images with pages" box. You can also use the latest version of Microsoft Word to create simple web pages, but they are not always exactly WYSIWYG (What You See Is What You Get) in that some characters may be added and others deleted. However, both of these programs can be helpful in creating a very basic page, one which you can later edit to your satisfaction.

On to Part 3: Directory and File Organization