VML: Vector Markup Language
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:
Digg
del.icio.us
Slashdot
DZone
Reddit
StumbleUpon
Facebook
FriendFeed
Furl
Newsvine
Google
LinkedIn
MySpace
Technorati
Twitter
Windows Live
YahooBuzzYou can probably guess that it isn't. It's actually a new, and quite fun, style of markup language called VML (Vector Markup Language).
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. 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: Again, this goes in your Style Block. If you don't have one -- create one. 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:
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. 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">
v\:* {behavior:url(#default#VML);}
Let's Draw!
Here's the code that made that yellow rectangle above:<v:rect style="width:150pt;height:50pt" fillcolor="yellow"></v:rect>
Comment and Contribute
