Lesson Plan One

Welcome to Lesson 1! Modifying existing web pages does not have to be difficult. There is no need to learn the entire HTML programming language as this tutorial is designed to provide a general understanding of the codes. In this lesson the following basic definitions and relevant tags are discussed:

HTML (Hyper Text Markup Language) is the language used to write Web pages, which consists of codes (tags) embedded in the text of a document.

Tags are codes in an HTML document, which the browser reads and then interprets for subsequent display to a reader. Tags are not visible when an HTML document is viewed in a browser, but their effects are. Tags begin with the opening symbol "<" and end with the closing symbol ">"; and usually come in pairs, one that begins an action and one that ends it.

* Do not worry about memorizing all the tags described in these lessons. Any tags that are required are listed in the accompanying HTML Reference Guide, which can be printed for reference purposes.

Each HTML document has a minimum number of tags. Here is the very least HTML code that can be called a "page":

<HTML>

<HEAD>
<TITLE>This is my page Title!</TITLE>
</HEAD>

<BODY>

This is my message to the world!

</BODY>

</HTML>

<HTML>...</HTML>		Encloses the entire HTML document.These tags let the browser know to start reading and displaying the information presented within.
<HEAD>...</HEAD>		The <HEAD> element contains all information about the document in general. It contains HTML elements that describe the document's usage and relationship with other documents.
<TITLE>...</TITLE>		The <TITLE> is contained in the <HEAD> of the document. It is displayed at the top of the browser window and on the bookmark list, so it is important to choose something descriptive, unique, and relatively short.
<BODY>...</BODY>		The <BODY> element contains all the information, which is part of the document. There are a number of different attributes for the <BODY> tag (attributes are the elements included within brackets that change the behavior or appearance of a tag). They are: "BACKGROUND=" Specifies the image tile that is to appear in the document's background. EXAMPLE: <BODY BACKGROUND= "picturename.gif"> </BODY> "BGCOLOR=" Sets the background color of the page. In order to do this a six digit hexadecimal number denoting a red-green-blue color value is included. Thus "000000" is black and "FFFFFF" is white and every other colour in between is described using these 6 characters in different combination. In addition to the hexadecimal system, there are sixteen color names that (other than black) that can be included in the tags. They are: Aqua, Red, Green, Blue, Violet, Fuchsia, Gray, Lime, Maroon, Navy, Olive, Purple, Silver, Teal, White, and Yellow. EXAMPLE: <BODY BGCOLOR="#FFFFFF"> This page has a white background. </BODY> OR EXAMPLE: <BODY BGCOLOR="WHITE"> This page has a white background. </BODY> "LINK=" Sets the hexadecimal color code for links that have not yet been visited. EXAMPLE: <BODY LINK="#0C6249"> This page has blue links </BODY> VLINK= Sets the hexadecimal color code for links the user has already visited. EXAMPLE: <BODY VLINK="#800080"> This page has purple links after being visited </BODY> "ALINK=" Sets color of links that are active (ie., the color they turn when the link is clicked on). EXAMPLE: <BODY ALINK="#FFB50C"> This page has yellow active links </BODY> "TEXT=" Sets the hexadecimal color code for the default text color. EXAMPLE: <BODY TEXT="#00006A"> This page has blue text </BODY> The <BODY> tags for this document are as follows: <BODY BACKGROUND="spiral_ruled.gif" BGCOLOR="#FFFFFF" TEXT="#00006A" LINK="#005A5A" VLINK="800080" ALINK="#FFB50C">

An excellent way to learn HTML is to view the coding used on other web pages. To do this in either Netscape or Internet Explorer - select "View Source" from the "View" menu. The file contents with all the HTML tags will be displayed in a new window.

In the Box below, type the following HTML code, then click the "View" button. The HTML document you made will be displayed in a new browser window. You may wish to experiment by changing the words within the tags.

HTML Code		Browser Display
I want to <B> emphasize </B> this!		I want to emphasize this!