HTML For Webpages

On this page I will explain how to use HTML tags to make your webpage. This is not a course in HTML but should give you a basic foundation for writing an HTML page.

This first page will cover;



the <BODY> tag

the <TITLE> tag

Skip to Tags for:


The Page Header

<HTML>   </HTML>

This is the first tag that must appear on the page. It tells the visitors browser that this is an HTML page. The last tag on the page is always </HTML>

Your will notice that the closing tag is the same as the opening tag except it has a slash mark (/) just inside the 'less than' sign. With few exceptions, every opening tag must have a complementary closing tag. Some exceptions to this rule are;

&lt;P> &lt;BR> &lt;SPACER> &lt;HR> &lt;IMG> &lt;META> These tags will be discussed later.

<HEAĐ>   </HEAD>

This is the tag for your page header. Information in the header is read by the browser but does not appear on your page. Contained between <HEAĐ> and </HEAD> tags are the <TITLE> </TITLE> tags and the <META> tags. Javascript codes are often found in here too.


The TITLE tag contains the page information that will appear in the status bar at the bottom of your screen. This is often the same as the title at the top of your page. This page will be titled "My HTML Webpage". You don't need meta tags yet so I'll leave them out for now. The page so far should look like this:

<title>My HTML Webpage </title>


So far, the tags we have used are simple tags containing only the tag name. From here on we will be using more advanced tags so you need to understand how to write these tags. Common tags have contained within them the tag name, tag elements and their values. Tags can have more than one element and each element will have it's value attached to it. Since our next tag we will be using is the <BODY> tag I will use it for the example. This is what a simple body tag looks like:


Where BODY is the tag name, BGCOLOR= is the first element, "WHITE" is it's value, TEXT= is the second element, "BLACK" is it's value.

Values are usually put in quote marks but this is not always necessary. As a rule of thumb, if the value contains only numbers with no symbols or characters then you probably don't need them. If you're not sure if you need them, use them. Notice the single space between the elements in the tag. These are required and are the only places that a space is allowed in any tag. The formatting of tags is critical to many browsers.

Another important thing to remember is that tags must be closed in the mirror image order that they were opened. You will often have occasions to be using more than one tag at a time to define a text or image field. The last one opened is the first one closed and the first one opened is the last one closed. Do not allow tags to 'overlap' another tag. For example:

<TAG 1> <TAG 2> <TAG 3> FIELD </TAG 3> </TAG 2> </TAG 1>

<BODY>    </BODY>

The <BODY> tag is the next tag on the page and may have many elements. It is used to define your page and text color, your background, the color of your links and visited links and even the way your page loads. Since your browser has default values for these elements, they are all optional but you must at least have the <BODY> tag on your page. Common elements that are used in the BODY tag are:

BGCOLOR="value" •The value may be a color or an RGB number
BACKGROUND=URL •URL is the location of the background image
TEXT="value"•The value may be a color or an RGB number
LINK="value"•Value is the color of your link text
VLINK="value"•Value is the color of your visited link text
TRANSITION="value" Value may be wipeup, wipedown, wipeleft, wiperight, scrollup, scrolldown, scrolleft, scrollright

The BODY tag for this page looks like this:

<BODY BGCOLOR="#AAC6DD" TEXT="#000020" LINK="#000066" VLINK="#660000">

Adding the BODY tag to the page will complete the Page Header. The rest of the page will be written within the open body tag, that is the information that will be displayed on the page. Then the BODY tag will be closed before the closing </HTML>. The codes now look like this:

<BODY BGCOLOR="#AAC6DD" TEXT="#000020" LINK="#000066" VLINK="#660000">

(this is where the rest of the page information will go.)


Now that that's out of the way it's time to start putting the visable stuff on the page. Click the next button below to continue.


This page is written and Copyrighted by Techniguy
1999 All rights reserved.