So, You Want A Custom Tag, Huh?

By Joe Burns

Use these to jump around or read it all...

[XML Name SpaceThe Code]
[Many NameSpace Tags]

A long time ago, on a computer far, far away, I wrote a tutorial on this new thing called eXtensible Markup Language. Natives know it as XML.

Many read the tutorial and asked the question... So what? XML didn't seem like something that would help the Weekend Silicon Warrior. E-mail came in asking what could be done with XML. Until now, I didn't have a really good answer, but with the advent of MSIE 5.0, I've found a pretty good use for XML.

You can use it to create your own HTML tags... but only in MSIE 5.0 (as of 7/16/99).


XML NameSpace

The process of setting up your own tags in this manner is called XML NameSpace. I've also seen it written as all one word: "xmlnamespace." Here's the process:

As far as I could see, you could only set up one tag per page, but that one tag could have endless attributes assigned to it. Let me walk you through setting up a tag that will set text to 16 pixels, italic, Arial font, green, and underlined...all with just that one tag.


The Code

We begin by assigning the XML NameSpace tag a name. I am going to assign the name "JB".It's short and can be written quickly. We do that in the HTML tag. It looks like this:

<HTML XMLNS:JB>

Now we need to set up the Style Block that will set attributes to the new JB tag. It looks like this:


<STYLE TYPE="text/css">

@media all

{
JB\:gr {font-size: 16pt; font-style: italic; font-family: Arial;
color:green; text-decoration: underline}
}

</STYLE>


Notice a couple of things: The text @media all must be in there to denote that this XML NameSpace will work across the page rather than being equal to a class or ID.

The curly brackets then surround what will be the attributes for the JB tags.

JB is once again stated, the a back slash, a colon, and then the code that will denote the attributes "gr." I chose "gr" because it was short and the text will be green. Then curly brackets go around the Style Sheet commands that will be applied when the JB:gr tag is called for.

Now, at the moment, I only have one JB attribute set up. I'll show you how to set up multiple tags in a moment.

Okay, now we have the tag and its attributes set up. Here's how you use it in the document:

<JB:gr>Joe Burns</JB:gr>

And if you're using MSIE 5.0, you should see the effect of that right here:

Joe Burns

Notice the new JB tag. It's used just like any other HTML tag. The way the browser keeps it straight is through the colon and then the "gr" I assigned to it. But what if you want more than one new tag? It's easy. You follow the same format again and again, assigning a new attribute name and new attributes each time.


Many NameSpace Tags

Here's an example of setting up three NameSpace tags. Note the tag name stays the same. You set that up in the HTML tag to begin with. What changes is the attribute. Look at this:


<STYLE TYPE="text/css">

@media all

{
JB\:gr {font-size: 16pt; font-style: italic; font-family: Arial;
color:green; text-decoration: underline}

JB\:bk {background-color: yellow; height:40;width:100}

JB\:wide {text-decoration: line-through; color:purple;
text-transform: uppercase}

}

</STYLE>


You would then call on each of these separate JB tags this way:

<JB:gr>This is the effect</JB:gr>

<JB:bk>This is the effect</JB:bk>

<JB:strk>This is the effect</JB:strk>

And this is what you'd get for your troubles:

This is the effect

This is the effect

This is the effect


That's That...

Again, this pup only works on MSIE 5.0 browsers, so don't rely on it just yet. If you want text affected across browsers you should still rely on hard-wiring CSS or HTML.

But now you have something new to gab about at your next cocktail party when the awkward XML discussion comes up.

 

Enjoy!

 

[XML Name Space] [The Code]
[Many NameSpace Tags]

 

Make a Comment

There are no comments for this article yet.
  • Web Development Newsletter Signup

    Invalid email
    You have successfuly registered to our newsletter.
  • Click Here!
  •  
  • Click Here!