Some of the best HTML Goodies tutorials have come from friends of mine rolling up to my office with a new trick and asking how it’s done. It’s fun to watch their face go blank when I have no idea how the trick is created. This tutorial is such a trick.
At first, my friend thought that this was some kind of image or table set:
You can probably guess that it isn’t. It’s actually a new, and quite fun, style of markup language called VML (Vector Markup Language).
Vector…Huh?
Honest to goodness, that was my buddy’s reaction when I finally figured out what this thing was. In short, VML allows you to set aside vectors on Web pages.
In shorter, you can draw shapes. Cool.
VML is not really a language unto itself but rather something that works as a namesake (ns) under XML, (eXtensible Markup Language). Using the power of XML, you can set aside specific sections (vectors) and fill them in with color and all sorts of other fun stuff.
The one downside of it all is that since this effect deals with XML, it is browser limited. You’ll need to be running IE 5.0 or above to get the effect. Netscape Navigator will simply ignore the commands and display nothing.
Prepare the Page
To get the effect, you’ll need to have a couple of lines of code on the page that will assist in the effect. This is the first:
<HTML xmlns_v="urn:schemas-microsoft-com:vml"> |
That command replaces your basic, original <HTML> tag at the top of the HTML code. Note the attribute “xmlns” is setting an XML namesake and pointing the page towards a DTD where the supporting materials can be grabbed.
Next, you’ll need to set a line in your Style Sheet block. If you don’t have one, you’ll need to create one. It looks like this:
v:* {behavior:url(#default#VML);}
|
Again, this goes in your Style Block. If you don’t have one — create one.
Let’s Draw!
Here’s the code that made that yellow rectangle above:
<v:rect style="width:150pt;height:50pt" fillcolor="yellow"></v:rect> |
- v:rect is reacting off of the line of text you set in the style sheet. If you remember, you set the letter “v” to a specific behavior. In this case, that behavior is going to be a four-cornered object. Yes, I know it reads “rect,” buy you’ll see that it can easily become a square.
- style=”width:150pt;height:50pt” sets the height and the width of the element you’re drawing. Change the numbers to your heart’s content to get different sizes. Set the sizes equal and you’ll get a square.
- fillcolor=”yellow” fills the created shape with yellow. You can also use a hex code; just be sure to place a pound sign (#) in front of it.
- </v:rect> ends the tag. Remember that in XML, all tags must have close tags.
You don’t need a “fillcolor” command. In fact, if you don’t have one, you’ll simply get the outline of the shape. Here’s the code above with the fillcolor attribute taken out:
Other Shapes
If there’s “rect,” there have to be other shapes, right? There are a few. According to the Microsoft Web Worksh
