HTM-Hell: HTML Basic Skills

HTML: Basic Skills You Need To Master

Gazoocifer's note: This tutorial is quite long. It deals with some of the very basic aspects of coding in HTML so it is important that you cover the entire tutorial. It is difficult to be brief when trying to explain the complexities of a language like HTML, so I have tried to present the material here as visually oriented as I can. I think you will pick up a lot just looking at the examples provided below.

What is a 'TAG' and how do I code it?

To properly code HTML you need to know how your HTML TAGS are written. Is that simple or what?

An HTML Tag is actually made up of TWO separate tags with some stuff in between:

An Opening Tag

An Attribute(s) to help define the Opening tag

A Value for the Attribute(s)

Text or an Image you want the tag to affect

A Closing Tag

The Opening Tag:
The Opening Tag consists of an angular bracket < followed by a tagname and then completed with a closing angular bracket >. (This tag will also contain any Attributes you choose to use and the Values that go along with them. Don't worry, it is all covered below.)

Let's pretend the tagname of the tag we want to use is EXAMPLE. We would code the EXAMPLE Opening Tag like this:

<EXAMPLE>

The Attribute(s):
There is no MORE important concept, in HTML, to understand than that of the tag Attribute. You can give your tags infinitely more flexibility by understanding what an Attribute is and how to use it. An Attribute lets you help define the TAG IT RESIDES IN more precisely and allows you to specify more functions WITHIN the same tag. Confusing huh.. let me illustrate an Attribute (I have colored Attributes in Red for all of these tutorials) and how it is used with a tagname:

<EXAMPLE ATTRIBUTE=>

The Value:
The Value can be a number or a word depending on which attribute you are using. If there is one piece of advice I can give you regarding ALL Values, it is this:

ALWAYS SURROUND YOUR VALUES IN QUOTES

Some browsers will read Values without quotes but virtually ALL browsers will read Values correctly with quotes around your Values. To ensure the best compatibility with all browsers you should always use quotes. Always! Really! I'm not kidding! Even if Cousin Frank the computer geek says it is ok not to... trust me!

Let me illustrate how a Value (I have colored Values in Green for all these tutorials) is written into a tag:

<EXAMPLE ATTRIBUTE="VALUE"

Now our Opening Tag is complete. An Opening tag consists of a Tagname, Attribute(s) and a Value for each Attribute(s). So we can close it off with the 'other bracket':

<EXAMPLE ATTRIBUTE="VALUE">

The Text Or Image To Affect:
Now that we have the Opening Tag complete, we need to give the Opening Tag something to actually work on. We do that by defining some text, or perhaps a graphic WITHIN the Tag:

<EXAMPLE ATTRIBUTE="VALUE"> Text we want to affect here

The Closing Tag:
We are almost finished the tag! All that remains now is to finish it off by Closing it. We do this by adding the Closing Tag. This tells the browser to stop creating the effect we defined in the Opening Tag. A Closing Tag consists of a bracket, a forward slash (not a backward slash), the tagname and then the 'other bracket', like this:

</EXAMPLE>

So, here is our complete example tag:

<EXAMPLE ATTRIBUTE="VALUE"> Text we want to affect here </EXAMPLE>

Virtually every HTML tag you will ever use is setup precisely this way. Some will have several attributes, and values can vary widely but if you can understand and master the above steps you have already won half the HTML battle!

Theory Is Fine But How About A Real Example?

Okay I think we can manage that!

Step 1: Let's pretend I have some text I want to make really BIG:

'HI THERE!'

For this we must make use of the   tag set. So let's enter the Opening tag:

<FONT

Step 2: This tag has several Attributes to choose from:

SIZE=

COLOR=

FACE=

Since I just want to make my text bigger let's use the SIZE= Attribute:

<FONT SIZE=

The SIZE= Attribute has a numerical Value range of 1-7. 1 is the smallest, 7 is the largest:

<FONT SIZE="6"

Step 3: Now we close off the Opening Tag because it is complete:

Step 4: Add the Text we want to affect:
HI THERE!

Step 5: And finally, we can close off the tag entirely by adding the Closing Tag:

HI THERE!

There! We are finally finished the entire tag! Here is how that text will appear:

HI THERE!

Try the above example on your own page and see what happens if you change the 6 to a different value!

How do I code a Tag with several Attributes and Values?

Learning to properly COMBINE Attributes is EXTREMELY important! Let's take the tag example above a little further to illustrate the way you combine attributes into a single tag.

What happens when you want black text, slightly larger than normal, displayed in Arial, on your page? (Don't worry, these attributes are discussed in detail in another tutorial)

This is how most beginners will code this scenario:

testing the tags and attributes

Bzzzzztt...WRONG!!!!!... thanks for playing...

In this example each attribute was given it's own Opening and Closing Tag. All this will do is give you a zillion Closing Tags and confuse your poor browser. What you SHOULD do, is COMBINE the attributes into ONE  tag like this:

testing the tags and attributes

All you really need to do is take all the Attributes and Values and nest them inside ONE Opening Tag. The order of the attributes is up to you. As long as you have them all set with the correct values, in quotes, combining will work just fine!

It's not exactly rocket science but you might be astounded at the number of beginners who don't understand how combining works, or even that it can be done. I have visited several tutorial sites and not a single one ever mentions what combining is or how to do it.

Well, that brings us to the end of this tutorial. It is absolutely imperative that you have a good grasp of all of the above parts of the HTML Tag so practice these steps until they are second nature to you. You won't regret the practice, believe me!