HTM-Hell: Getting Started - Building Your First Page

HTML: Getting Started - Building Your First Page

Gazoocifer's note: This tutorial will show you the necessary elements you will need in place to begin building your first web page. These are only the absolute minimum tags you will need in order to make a page viewable. What and how you add your actual web page content is the subject of other tutorials.

Learning The Minimum HTML Tags For A Page:

These are the sets of HTML Tags you need to learn to achieve this:

<HTML> and </HTML>

This set of Opening and Closing Tags tell your browser that the document it is loading is an HTML document. The Opening <HTML> Tag MUST appear at the very top of your document since the rest of your document has to reside inside this Tag.

The Closing </HTML> Tag MUST appear at the very bottom of your document. This Tag tells the browser that there is no more HTML document to display.

<HEAD> and </HEAD>

The HEAD portion of your page will display absolutely nothing in your browser. It's function is to contain hidden internal information your browser requires to display your page properly. Between the Opening <HEAD> Tag and the Closing </HEAD> Tag you will often find the METATAG elements and possibly JAVASCRIPT Tags. (Metatags will be discussed in another tutorial, for now you need only worry about the very basics.)

<TITLE> and </TITLE>

The TITLE Tag set is entered INSIDE your HEAD Tag set, like this:

<HEAD>
<TITLE>
HTM-Hell: Easy to Understand HTML and Web Design tips and tutorials
</TITLE>
</HEAD>

The TITLE Tag is probably the most confusing tag of all, to novice HTML coders. It is very important that you understand what this tag really does. All this tag does is display whatever text you enter as the TITLE in your browser's TITLE BAR. Huh? I will explain:

Since you are currently reading this page, look up at the very top line of your browser. Way up there at the top you should see a line of text that says "HTM-Hell: Easy to Understand HTML and Web Design tips and tutorials". That is my TITLE for this page. I entered that text between my Opening <TITLE> Tag and my Closing </TITLE> Tag as shown in the example above. This TITLE does NOT appear anywhere on your page!

It is very important to enter a good descriptive TITLE, since most of the Search Engines on the Web use that title when it displays search results to a viewer. Try not to use something completely lame like "My HomePage". If I saw that on a search page, I would keep right on moving to something else that was more exciting, and more informative. Keep your TITLE reasonably short, let's say no more than 10 words, and try to include words that describe the main theme of your site. (It's not as easy as you think)

<BODY> and </BODY>

The BODY Tag set is a pretty easy set to understand. All of the text and images you put on your page must appear BETWEEN these two tags.

Correctly Setting Up These Tags:

Rather than try to explain where all of these Tags should go, and how to set up all the attributes properly, I am going to show you the complete setup for a Basic Home Page that incorporates ALL of the Tag sets we have discussed so far:

<HTML>
<HEAD>
<TITLE>(Type a title for your page here)</TITLE>
</HEAD>
<BODY BACKGROUND="" BGCOLOR="#000000" TEXT="#000000" LINK="#0000FF" VLINK="#800080" ALINK="#FF0000">

This is where all the wonderful stuff you want to show on your page goes.

</BODY>
</HTML>

Ain't it purdy? I have displayed the Attributes for the BODY Tag in Red, and the Value's in Green so you can easily see which is which. Notice I have encased each of the Value's in quotation marks.

The <BODY> Tag Attribute(s):

As I mentioned in a previous tutorial, the Attributes you use help you define better what a Tag does or does not do. As you can see there are several basic Attributes that you can use in the Opening <BODY> Tag.

BACKGROUND=
You can use this Attribute when you wish to specify a background graphic, either a GIF or a JPG. To use a background image on your webpage just specify which graphic you want to use, like this:

BACKGROUND="graphic.gif"

or if it is in a different folder than the page you are writing:

BACKGROUND="otherfoldernamehere/graphic.gif"

BGCOLOR=
If you do not wish to use a background graphic, use this Attribute instead to define a color for your web page background. All you have to do is enter the Hexadecimal Color Code as the Value. (Hexadecimal Color Codes are discussed more in-depth in another tutorial, HTML: Adding Color) Here is the correct way to code a new background color for your page:

BGCOLOR="#FF0000"

Using the "#FF0000" Hexadecimal Color Code will give you that lovely shade of red you are looking at. Notice I always use quotation marks to surround my Value's.

TEXT=
You can use this BODY Attribute to define what color you want ALL of the text on your page to appear in. You code this Attribute in exactly the same way as you did the BGCOLOR Attribute:

TEXT="#000000"

In this case, using the "#000000" Hexadecimal Color Code will give you the spiffy Black text you are reading at this very moment.

LINK=
This BODY Attribute will let you define the color that ALL of your Links are displayed as on your page:

LINK="#008080"

Don't you just love dark Green Links?

VLINK=
VLINK?? What the heck is a VLINK? Well, the answer is pretty simple. A VLINK is a Visited Link and you can define the color that ALL the Visited Links appear in. Let's say you click on a Link and go to a page, and then come back to the original page. You will usually notice that the Link you just clicked on is now another color, so you always know which Links you have already visited. You can define that Visited Link color using VLINK:

VLINK="#FFFF00"

I think that Hexadecimal Color Value will give you a wonderful Yellow, but it's 3a.m. and frankly it doesn't matter. It's the theory that matters... (just like the New Math for all you Baby Boomers out there...:)

ALINK=
Ok, Mr. SmartyPants, what in God's name is an ALINK?? Ah yes, Grasshopper, I am glad you asked. Sit at the feet of the Master and you shall be enlightened. The ALINK is an Active Link. Of all the BODY Attributes, this is probably the least used. This lets you define what color the Links you have on your page will turn as you click on them and make them Active.

Here on the HTM-Hell site I indulged myself and decided that each Link on the main menu's would flash Red when you clicked on them. Does anyone notice? Probably not, but I know it is there and a little knowing smile flashes across my face every time I click on one of those wonderful Links. Let's code it together, shall we:

ALINK="#FF0000"

Well, that pretty much covers all of the tags you need to get your page started. Now you can start adding your own content between the <BODY> and </BODY> tags! We have covered a LOT of territory this time around so don't worry if you haven't memorized every single tag, and each and every attribute. You can always pop back for a quick refresher, and eventually using all of these Tags will become second nature to you. Trust me...:)