An HTML Tag is actually made up of TWO separate tags with some stuff in between:
Let's pretend the tagname of the tag we want to use is EXAMPLE. We would code the EXAMPLE Opening Tag like this:
<EXAMPLE>
<EXAMPLE ATTRIBUTE=>
<EXAMPLE ATTRIBUTE="VALUE"
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':
<EXAMPLE ATTRIBUTE="VALUE">
<EXAMPLE ATTRIBUTE="VALUE"> Text we want to affect here
</EXAMPLE>
So, here is our complete example tag:
<EXAMPLE ATTRIBUTE="VALUE"> Text we want to affect here </EXAMPLE>
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 and attributes</FONT></FONT></FONT>
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 attributes</FONT>
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 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: |