XML Font Manipulation and Tag Formatting

        Sorry Netscape users, but this deals only with Internet Exporer 5.0 and higher at the moment. Please do go through the tutorial, though. You will probably learn something, and if you decide to get Internet Exporer, then you can use this code.

        Anyway, now on to the tutorial. XML stands for eXtensible Markup Language. It can be used to configure your own HTML tags! Instead of having to write out all of that HTML code for one word, or having to use CLASS's and ID's, you can make your effects happen anywhere! This is a little more complicated to setup, but the effect is well worth it. Below is a sample XML manipulated string of text. This only works in Internet Explorer 5.0 or higher.

Green manipulated text!

         I bet you are wondering how I did that, right? Did I use a lot of fancy HTML script? No. Did I use CLASS's and ID's? No. Did I use stylesheets? Partly. How about XML? You bet. XML invloves understanding how to use CSS to make itself work. That is why I brought you through all of that CSS stuff before I could bring you here. You have to know CSS! Anyway, here is how I did that.

<HTML XMLNS:ONE>
<HEAD>
<STYLE TYPE="text/css">

@media all
{
ONE\:gr {font-size: 18pt; color: green; font-weight: 800; text-decoration: underline; font-variant: small-caps; font-family: Arial; text-transform: none}
}

</STYLE>
</HEAD>
<BODY>
<ONE:gr>GREEN MANIPULATED TEXT</ONE:gr>
</BODY>
</HTML>

Now, this may seem a little confusing right now, but let me take you through step by step on how to do this.

First, type the <HTML> tag, but add the attribute XMLNS, which means XML Name Space, a colon, and then the name of the tag, in capital letters
Next, use the <STYLE> tag to indicate a stylesheet.
Type "@media all", without the quotes, in the stylesheet
On the next line, type in an open brace {
On the next line, write the cpaitalized name of the tag, the one indicated in <HTML XMLNS:name>, followed by a FRONT SLASH ( \ ), then a colon, and then a short designator in case you want to create many tags under the one name
Add a space, then an open brace, {, and then modify the text with CSS all on one line
After closing the CSS brace, go down one space and add another close brace, }
Close the stylesheet using <STYLE>

I will only take you to the modification of the text at the moment. The rest comes later in the tutorial. The thing that might confuse you is why we use the designator after the name. For example, in ONE\:gr, gr would be the designator. You can create many different tags under one name, so this is required. More on more tag later. The directions were pretty easy to follow, I think. If not, just use the example script as a model, and work from there. Now, for an explanation on how this works.

The XMLNS:ONE indicates that there will be XML work done in a stylesheet on the current page, and that a tag named ONE will be created
The "@media all" indicates that the XML work will be done between the next set of braces, { }
The ONE\:gr indicates what tag will be created under what designator, i.e. gr
The CSS modifies the text
The second } indicates the end of XML creating

Did that help a little? Now we get to how to use the tag in HTML script. Where you want the tag's effect to appear place the name given, then a colon, and then the designator inside of a tag. Type the text in between of it and its ending counterpart. To end the effect, use the start tag, except with a BACK SLASH before the name, as in most things. Here is the script again :

<ONE:gr>GREEN MANIPULATED TEXT</ONE:gr>

Understand?

Now we get to how to make two or more different tags with the same base name. This is accomplished by using this script :

<STYLE TYPE="text/css">
@media all
{
ONE\:gr {color: green}
ONE\:bl {font-size: 17pt; color: blue; font-weight: bolder; text-decoration: overline; font-variant: none; font-family: Courier; text-transform: none; font-style: italic}
}
</STYLE>

Now, all you do is switch the secondary name in the tag. For example, here is the bl tag we just made.

The ONE:bl text

Here is the script for that last set of text modified by the new tag we just made.

<ONE:bl>The ONE:bl text</ONE:bl>

See how easy that was? Follow the same pattern to make even more. You cannot have more than one base name (ONE) in one document. Sorry. Now you can really impress your HTML friends! Good Luck!! Please note that this is only one of several things XML is used for. I do not have the other uses ready for the site yet.

Choose a link to get started:

ALL NEW!!!

The Basics

More Advanced Topics

Advanced Topics

Additional Topics

XML Font Manipulation and Tag Formatting