An HTML Tag is actually made up of TWO separate tags with some stuff in between:
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 >.
Let's pretend the tagname of the tag we want to use is EXAMPLE. We would code the EXAMPLE Opening Tag like this:
The Tag Attribute(s)
A Tag Attribute lets you help define the tag it resides in more precisely and allows you to specify more functions within the same tag:
Values can be a number or a word depending on which attribute you are using:
An Opening tag consists of a Tagname, Attribute(s) and a Value for each Attribute(s). Now our Opening Tag is complete, so we can close it off with the 'other bracket':
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
All that remains now is to finish it off 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:
So, here is our complete example tag:
<EXAMPLE ATTRIBUTE="VALUE"> Text we want to affect here </EXAMPLE>
Combining Tags With Several Attributes
Learning to properly COMBINE Attributes is extremely important! Let's use the <FONT> tag 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:
<FONT SIZE="4"><FONT FACE="Arial"><FONT COLOR="#000000">testing the tags
Bzzzzztt...WRONG!!!!!... thanks for playing...
As you can see 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 all of the attributes
into ONE <FONT> tag like this:
<FONT SIZE="4" COLOR="#000000" FACE="Arial">testing the tags and
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, it will work just fine!
Nesting Tags Properly
Nesting Tags is simply the process of applying more than one tag to the same block of text or object.
Let's take a simple font tag for example:
<FONT SIZE="2">Nesting the Tags</FONT>
Here is how it looks on your page:
Nesting the Tags
Now let's say we want to have that text appear bolded. We have to add the Bold Tag set around the text we want to affect:
<FONT SIZE="2"><B>'Nesting the Tags'</B></FONT>
Here is how the newly bolded text will appear on your page
'Nesting the Tags'
Now let's add a third tag to our text. Let's display our text in Italics by adding the Italics Tag set to our text:
<FONT SIZE="2"><B><I>Nesting the Tags</I></B></FONT>
Now our text will be displayed like this:
Nesting the Tags
Learning how to properly nest multiple tags around one block of text or an object is crucial to successfully coding your web pages.
If you look at our final example above, the opening tags have been put in a certain order and the closing tags ALL appear in the EXACT OPPOSITE ORDER. For example:
<TAG1><TAG2><TAG3> [text or object here] </TAG3></TAG2></TAG1>
Making sure you have your multiple tags nested properly takes a little getting used to, but if you get into the habit at the very beginning it will become second nature to you in short order.
|Now that you have the the basic required skills for coding HTML down pat, let's show you how to start building your first web page:|
~~~~~ On to "Create A Page