Not only has a very public (and contentious) debate unfolded on the web about the efficacy of presenting videos using HTML5 instead of Flash, but momentum is gathering behind the nascent web standard.

From giant video sites like YouTube to Wikipedia, everyone it seems wants to get their video out of Flash and into native web formats. With Microsoft recently announcing it will support the HTML5 video tag in the coming Internet Explorer 9, expect even more sites to abandon Flash for native video.

So, you want in on the fun? Do you want to use some HTML5 video tags on your site right now? No problem. Fasten your seat belts, as we’re about to take a tour of the wonderful world of HTML5 video.

Browser Support for HTML5

First, let’s deal with some very basic stuff, like where this will work and where it won’t. As you can see in the table below, only the latest versions of most browsers support native video playback using HTML5′s <video> tag.

Since Firefox 3.0 and IE 7 & 8 lack any support for HTML5 video, you’ll have to come up with a fallback plan for serving video to those users. Depending on what you want to do you, could fallback first to Quicktime and then, failing that, to Flash. That’s the strategy used in Video for Everyone (note that as of v0.4, Video for everyone no longer falls back to QuickTime).

To keep things simple we’re just going to fall straight from HTML5 to Flash.

Formats, Codecs and Technicalities

The next thing you need to understand is what is actually happening when you load and play a video file in your web browser. You’re probably used to thinking of video as .mp4 or .mov files, but unfortunately it’s not that simple. The actual file formats are just containers. Think of them as a bit like a .zip file — they hold other stuff inside.

Each container holds at minimum one video track and, most likely, one audio track. When you watch a movie online, your video player (most likely Flash) decodes both the audio and video and sends the information to your screen and speakers.

Why does this matter? Well, because the process of decoding what’s inside the video container file varies. To know how to decode a movie, the player (which is your web browser in the case of HTML5 video) has to know which codec the movie was encoded with.

When it comes to web video there are two codecs to worry about: H.264 and Theora.

There’s a huge debate right now among web developers, browser makers and just about everyone else as to which codec is right for the web. We believe that a free, open codec without patent and licensing restrictions is the best solution for the web. Sadly, neither codec exactly fulfills that dream, so for now, let’s just skip the whole argument and be practical — we’re going to use both codecs.

Why? Well, have a look at the table below, which shows which codecs work where and you’ll quickly see that there is no one-size-fits-all-browsers solution. Only Google Chrome can play both H.264 and Theora.

So, you may be thinking … if HTML5 video doesn’t work in IE7 or IE8 and it means I’m going to have to encode my videos twice, then why bother at all? Well, the best answer is simple: mobile users. If you want iPhone and Android users to be able to see your video, HTML5 is the only way to do it — Flash support is coming to Android sooner or later but for now HTML5 is the only option, and we all know Flash doesn’t run on the iPhone or the iPad.

The HTML5 Code

Here’s how to actually embed your videos. First, we encode video in both .ogv and .mp4 containers. Encoding video is beyond the scope of this article, so instead we suggest you check out Mark Pilgrim’s online book Dive Into HTML5, which has a whole chapter devoted to understanding video encoding. Pilgrim’s encoding suggestions use free software to get the job done, and in the end you’ll have two files — one .mp4 and one .ogv.

Now it’s time to unleash those movies in pure HTML glory. Here’s the code:

<video width="560" height="340" controls>
  <source src="path/to/myvideo.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<source src="path/to/myvideo.ogv" type='video/ogg; codecs="theora, vorbis"'>
</video>

Yes, that’s it. What we’ve done here is use the <video> tag to specify the dimensions of our video, and to denote that we want to use the browser’s default controls. Then, within the video tag, we’ve added two <source> elements which link to our video files.

The “type” attribute of the <source> tag helps the browser understand which file it should load. It’s a bit of an ugly chunk of code that needs to specify the container format, the video codec and the audio codec.

In this case we’ve assumed standard .ogv and baseline encoded H.264 video as per Pilgrim’s tutorial. See the WHATWG wiki for more information on which video types you can specify.

And there you have it — native web video, no plugins required.

Dealing With Everyone Else

What about IE7, IE8 and older versions of just about any other browser? Well, for those users, we’ll fall back on Flash. To do that, we just use an <embed> tag within our video tag:

<video width="560" height="340" controls>
  <source src="path/to/myvideo.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>  
<source src="path/to/myvideo.ogv" type='video/ogg; codecs="theora, vorbis"'>
  <object width="640" height="384" type="application/x-shockwave-flash"
		data="path/to/swf/player.swf?image=placeholder.jpg&file=path/to/myvideo.mp4">
		<param name="movie" value="path/to/swf/player.swf?image=placeholder.jpg&file=path/to/myvideo.mp4" />
	</object>
</video>

Now any browser that doesn’t understand the HTML5 video tag will just continue on its way until it hits the object tag, which it should understand (note that the order, mp4 before ogv, is important for iPad support — Apple requires that mp4 be the first video file).

Of course for this to work you need a Flash video container. JW Player is one popular example, or you can roll your own using Adobe’s tools. Also remember that we still haven’t handled the case of an older version of Firefox with no Flash plugin installed (maybe your users are surfing your tubes with an outdated Linux machine). You can always add good old text-based links to the video files as a catch-all fix for anyone who can’t, for whatever reason, see either the HTML5 or Flash versions.

Conclusion

Embedding HTML5 video isn’t significantly more difficult than using Flash, especially if you’ve been using H.264 video files in your Flash player — which is exactly what YouTube has done with its HTML5 beta.

While we’re concerned about the licensing and patent requirements of H.264, it isn’t hard to notice that if you skip Theora and make all non-H.264 fall back to Flash, you’ve still saved yourself a considerable encoding headache. In fact, that’s probably the best practical argument against Mozilla and Opera’s refusal to support H.264.

If you’d like to use some of the more advanced aspects of HTML5 video, be sure to check the SublimeVideo player, which offers very nice JavaScript-powered set of custom controls. Also be sure to have a look at Video for Everybody, which makes for more complex code but handles just about every use case you could imagine. And there’s a handy Video for Everybody WordPress plugin as well.

See Also:

• Building Web Pages With HTML5
• Add Semantic Value to Your Pages With HTML5
• Who Needs Flash?

JavaScript has had the XMLHttpRequest object for almost a decade now, but it really only started getting wide attention in 2004. All this attention was mostly due to some showoff web applications that made every developer who saw them think, “I want my site to do that!” But it also has to do with the spiffy, spiffy name given to it by the folks at AdaptivePath, who named this asynchronized application Ajax. Maybe you’ve heard of it?

A few high-profile Google applications in particular made a splash with Ajax: Maps and Gmail were first. It also powers some of the core functionality in the user interface of the ever-so-popular photo sharing site Flickr. By now, Ajax has become integral to the fabric of the web, especially in the era of real-time applications like Twitter, Buzz and Wave (all of which use Ajax extensively in their webapp front ends, for the record). Ajax may also lay claim to being the first JavaScript object with its own fan website. Date.com doesn’t count, although I did have a scintillating chat with a lady there once about the getTimeZoneoffset method.

What is Ajax?

So what is this fancy object that everybody wants a piece of? In brief, it’s a solution to one of the big annoyances of web interfaces. Generally, the user inputs some data or makes a choice, and clicks a button that sends the data to the server. The server takes a look at the data and sends back a whole new web page, which is loaded into the browser. Reloading a page every time you want to do something is annoying, disjunctive and time-consuming for the user. XMLHttpRequest moves that browser-server interaction to behind the scenes, so the user can just keep on playing with the same page, even while elements on the page are talking to the server! Go take a look at Google Suggest if I’ve lost you — it’s a nice, eloquent example of this.

JavaScript has always been able to sneakily trigger a server-side script without anything happening in the browser by using a few classic tricks. This one, for example:onSubmit='runascript = new Image(); runascript.src="http://www.wired.com/images/archiveyscript.php?" + this.value'. That sort of chicanery is good, maybe, for caching form data to a file on the server, but it doesn’t return any information to the JavaScript that calls it, so its usefulness is limited. Ajax, on the other hand, can get a full parcel of data back from the script it calls. Hence the “XML” part of the name – which really is just there for looks, kind of like the “Java” part of JavaScript, because the returned data can be plain text or whatever you like, if XML is overkill or just not your cup of tea.

This opens up millions of exciting possibilities. Every form submission, every JavaScript event, and heaven knows what else, can now interact with server-side databases and processing power. Data retrieval, password authentication, image generation – you name it, Ajax can trigger it.

Making Your Own

The potential of Ajax-enhanced web apps is limited only by your imagination – and by browser support. Mozilla-based browsers can do it, and Safari, and newer versions of Explorer, and Opera 8 but not Opera 7. It’s best to incorporate a fallback way of doing things for users who aren’t as cutting edge as you’d like them to be. Also, Explorer does things somewhat differently (of course) from all the other browsers, so it’s necessary to fork the code to account for the irritating little 80-odd percent of the population who use IE.

Let’s build a simple application that accepts input from the user, passes it to some PHP on the server that checks it against a database, and returns the result to the browser. It comes in three parts. First, we need an HTML form. This you’ve seen before:

<html>

 <head>

 <title>Report</title>

 <script type='text/javascript' src='xhr.js'></script> </head> <body> <form action="fallbackpage.php" method="post">



 <p>Welcome, student. Please enter your essay here:<textarea name="essay" id="essay">

 </textarea> <input type="submit" name="submit" value="Submit" onClick="return

 grade(this.form.essay.value);">

 </p>

 </form>

 </body>



 </html>

Note that, for users without support for our script (named xhr.js), the form will just submit to the fallback page at fallbackpage.php.

Next comes the JavaScript. This is the exciting part, so we’ll take it slow.

 function grade(essay) {

 

First, we initialize the object. We have to do it two ways, for different browsers.

    // Mozilla version

    if (window.XMLHttpRequest) {

        xhr = new XMLHttpRequest();

    }

    // IE version

    else if (window.ActiveXObject) {

        xhr = new ActiveXObject("Microsoft.XMLHTTP");

    }

 

Then, we escape the user input to make it URL-safe:

    essay=encodeURIComponent(essay);

 

and use the open method of the object to open a connection to the PHP script:

    xhr.open("POST","grade.php");

 

The method requires two arguments:first, the HTTP method (GET or POST); second, the URL of the script.

A quick HTTP header prepares the script for what it’s getting, and then the send method transmits the actual request:

 xhr.setRequestHeader(

      'Content-Type',

      'application/x-www-form-urlencoded; charset=UTF-8'); xhr.send(essay); 

This last step isn’t necessary for GET requests, wherein all the data can be contained in the query string of the URL.

Getting Results

Now we’re ready to see if the HTTP request worked. The readyState property counts up from zero during the request, and shows 4 when the server page has loaded successfully.

 xhr.onreadystatechange=function() {

      if (xhr.readyState==4) {

 

If the request worked, then we can get the output of the server-side script by querying the responseText property, which contains a string. For more complex server script output, a responseXML property, which can hold a full document object of XML data, is also available.

      grade = xhr.responseText;

      alert ("Nice essay. Your grade is " + grade);

    }

    return false;

 }

 

Want to see all that in a pastable block? Here it is in a separate file.

Finally, the third component is the PHP script, which lives on the server and waits patiently for the JavaScript to pass it some juicy data. This example uses PHP, but any language you like — Ruby, Perl, C, ASP — can do as well. The core of this example script is a natural-language function called grade_essay() that grades student essays from 1 to 100, but I will redact that part to conserve space.

 <?php

 function grade_essay($essay) {

      return strlen($essay);

 }

 $essay = urldecode(implode(file('php://input')));

 $grade = grade_essay($essay);

 echo $grade;

 ?>



 

The php://input grabs the POST data, which gets put into a string, decoded and passed to the ingenious grading algorithm. The algorithm returns a numeric grade. Lastly, we just output the grade with echo – ordinarily, this would display in the browser, but since the PHP script is running “behind the scenes,” the string output is simply returned to the JavaScript that called it. If you need structured data, an XML document would be output with an echo statement in just the same way, but the content-type of the output page must be set to text/xml.

What the user sees is this:She types her essay into the text area in the browser, clicks Submit, and within instants an alert box pops up giving her a final grade on the essay. Invisibly, the essay has been sent to the server, read and evaluated by a team of PHP gnomes, and returned with a grade, without ever reloading the page. The user can modify her essay and resubmit it endlessly.

And that’s the gist of the almost magical XMLHttpRequest object! The example is simple, but the uses of the object can be elaborately, multifariously clever. If you need further inspiration and edification, a burgeoning number of examples are dotted around the Web:

• Ajax-powered start pages like iGoogle, Pageflakes and Netvibes

• Social news site Digg

• Movie rentals site Netflix

But what data you send and receive with Ajax is up to you.

A wedding of linkable web pages and regular e-mail, HTML e-mail is a growing medium for Internet communications, and it’s getting easier to use.

HTML e-mail brings the power of the web browser to your e-mail inbox. Maybe you receive daily newsletters, weather updates, gardening tips, or whatever with pictures, fancy text and backgrounds and clickable links? That’s HTML e-mail. All the information and delivery ease of an e-mail but with the look and feel of a web pages.

With a basic knowledge of web design and a touch of e-mail savvy, you, too, can offer your own content in this format.

What you’ll need

It may seem like a needless step, but take a moment to be sure that your e-mail service supports all of the standard mail protocols like POP (Post Office Protocol), IMAP (Internet Mail Access Protocol), SMTP (Simple Mail Transfer Protocol), and MIME (Multipurpose Internet Mail Extensions). Free accounts are available from Hotmail and Gmail among others, should you need one.

Limitations

Before taking the plunge, beware of the challenges of any e-mail endeavor:list management, bounced mail, and angry subscribers. And if you think designing for multiple browsers is fun, you will love HTML e-mail agents that ignore your tags. Let’s spend a moment dwelling on the technology’s limitations.

It’s not good practice to include frames or exceedingly large images in HTML e-mails. Page anchors and custom backgrounds are usually supported. You will need to use absolute links, since the user will view your page within a foreign domain. (Relative links can be converted to absolute links using a simple search-and-replace.)

Also, some mail agents skip the bgcolor attribute in the <body> tag. One trick is to specify bgcolor in a <td> (table cell) and put your whole page within the one-cell table.

Don’t forget the folks who accidentally receive your HTML e-mail through a standard ASCII-text mail agent. If you’re not careful, your audience will be looking at all your mark-up mess (the raw links might work, but the page won’t look pretty). For this crowd, insert a comment tag — so it won’t appear when it shouldn’t — with some friendly unsubscribe instructions. In my opinion, friendly unsubscribe instructions should be included as a basic courtesy on any e-mail sent to a subscriber list.

How It Works

Here’s how it works. Incoming mail is stored in your POP account on an internet server as multipart MIME documents. A message is divided into a text component and MIME file attachments. These attachments are associated with a URL that calls in the graphics, animations and other elements at viewing time.

Outgoing HTML e-mail is sent like any other piece of internet mail using SMTP — the trick is to manipulate the header information that accompanies your message.

In addition to To:, From:, Cc:, and Bcc:, an e-mail header specifies content type, transfer encoding, and display properties of the mail. The most important of these header fields for HTML e-mail is Content-Type. Most mail agents send mail with Content-Type:text/plain, but you want yours to read Content-Type:text/html. Most mail agents will not let you modify this field, so you have to be crafty. One solution is to compose your HTML e-mail manually using a Unix mailer program. This will enable you to type a customized header. Here’s an example of a test message with appropriate header information:

Errors:errors@YourDomain.com

From:Your Name <you@YourDomain.com>

To:Recipient Name <them@Theirs.com>

Subject:test message

MIME-Version:1.0

Content-Type:text/html; charset=us-ascii

Content-Transfer-Encoding:7bit

Content-Disposition:inline; filename="filename.html"

Content-Base:http://www.YourDomain.com



<b>Hello there.</b><br>

Monkey see, monkey do.

Notice the extra line break before the body of the message. In a Unix mailer program, the body begins with the line following two consecutive carriage returns and ends with a single period on its own line. To test your message, send it to yourself.

 % sendmail -t filename.html

The -t tells your Unix mailer to read the header information from the file itself.

Congratulations! Now you can send HTML e-mail from a Unix prompt. It felt really great the first time I sent myself an HTML e-mail. I admit my enthusiasm has diminished over time.

On the bright side, the tools have long since caught up. Most clients, including Microsoft Outlook and Mozilla Thunderbird can send and receive HTML e-mail. Most web-based e-mail programs can even default to “Content-Type:text/html” with a button-click.

Now it’s time to set up an HTML e-mail offering on your own site. Just remember to take an occassional weekend to yourself. At least whistle while you work.

Final Analysis

HTML e-mail will not change your life. It’s a communications gimmick, a remora clinging to the belly of the internet. Spun from the success of web-based e-mail, HTML e-mail brings designer layouts, graphics, animation, sound and interactivity to the genre. What’s more — it caters to laziness. The not-so-savvy web enthusiast can passively receive updated content from a growing list of web publishers. In commercial corridors, HTML e-mail is used to ping an ambivalent user base while providing useful information in a sexy format. It’s non-invasive push media. This fosters habit-forming behavior in the user and encourages clickthroughs to a site.

In all fairness, my biggest gripe with HTML e-mail is download time. It’s e-mail at the speed of a web page, and it will make you wait. There’s some appeal to downloading personalized daily news while you’re brushing your teeth, but is it worth it? Be your own guide.

OK, you’ve created your own weblog and your hands are shaking with excitement and terror. You just posted an excellent new piece that details your grievances with that jerk Kelly at work, an essay that is by turns insightful and thrillingly alive with a kind of erotic frisson. But where are your readers? Where are the hits? Why aren’t people falling over themselves to get at your sweet, sweet words?

There are many possible explanations, but one is that people are shallow, crass, and easily distracted by shiny objects. If they come to your site and just see a page full of text, their eyes will glaze over and they’ll head right on back to the Nude Animated GIFs site.

But, but, it’s the content that’s important, right? Shouldn’t your razor-sharp writing be enough to keep their attention? Wouldn’t dressing up the text with pretty pictures almost be an insult? Isn’t it what’s in here (gesturing toward heart) that matters most of all?

Yes, truly, but in the real world people like to see their content all gussied up, preferably as sextastically as possible. Sure, you can give them a few well-cropped and color-adjusted photos. But your blog also needs its fair share of arty, distorted, eye-searing pictures! And what about a zany logo?

Enter filters!

You may not be an artist – so what if your talent lies in crafting the written word? – but I’m here to tell you that while technology can’t yet generate interesting writing (check back in 2006 when Microsoft Grisham comes out of beta), it can do a lot of artistic legwork for you. It’s a secret that Web designers have known for years:If you can score a copy of the 800-pound behemoth known as Adobe Photoshop, you can fake artistic ability with the best of them.

Filter Up!

Yes, Photoshop is expensive, and yes, it can have a pretty steep learning curve. As for the first problem, let’s assume you can borrow a friend’s copy, or perhaps pick up the cheaper, more streamlined Photoshop Elements. As for the learning curve, the good news is that we can safely ignore just about everything the program has to offer except what lurks under the Filter menu.

Sure, Photoshop can put your head on a bodybuilder’s torso or change a hideous pink sweater to a eye-bleeding orange, but that involves reading the manual and rooting around in the toolbar and palettes and the like. With filters, all you have to do is choose an effect and see what happens. They’re all about trial-and-error and learning-by-doing.

Filters got their name from the world of photography, where you could change how a picture looked – brighter, redder, fuzzier, etc. – by placing a filter over the lens. Photoshop filters do the same thing, just with much more variety and weirdness. The program comes with dozens of built-in effects that can make your photograph look like everything from a Seurat painting to a bad photocopy. And once you get tired of those, you can pick up some free ones or buy some from third-party companies like Xaos Tools, Alien Skin, or Flaming Pear.

So fire up Photoshop, open up any image, and then start making your way down the Filter menu. Pick one and watch the dark magic unfold. Some filters (the ones with “…” after their names in the menu) will pop-up a dialogue box before working. Just hit OK to see the default action, or drag the sliders around and see how tweakable everything is. Most filters have a preview window to give you an idea of how messed-up your picture is about to become. Nine times out of ten I have no clue what a particular variable means, but I can mess around with it and see the results, so from then on I know what to expect.

Now that you’ve got the gist of filters, let’s take a look at a few examples.

Photo Phreaking

Let’s say I have a blog on Tripod that’s all about me, my thoughts on life, the pretend conversations I have with my cats, and sonnets about my enchanted experiences at the Renaissance Faire. Keep in mind that this is purely hypothetical. I update my blog with seven or eight thousand words a day, but would like to break things up a little with some nice pictures.

So I do what any self-respecting weblog author would and take a photo of myself in the bathroom mirror. That way people can put a face to the name, which can simplify matters when filing for a restraining order. The snapshot ends up looking more like an ad for the camera:

Plain-old unfiltered snapshot.

Let’s take it to the next level. The most popular use for Photoshop filters is tricking people into thinking you have artistic abilities. So I go to the Filter menu and right up top is a collection of filters filed under Artistic. Yes, I would like to be artistic. I laugh at the suckers who went to art school and click on Watercolor.

The Watercolor Palette in action.

Up pops a box that shows a preview of my photo under the influence of the Watercolor filter. (Note:If you can’t see the entire picture in the preview window, you can click on it and drag it around to see other parts.) Below are some sliders that let me fine-tune it:Brush Detail, Shadow Intensity, and Texture. What does Brush Detail mean? Who knows – let’s slide it around. Looks like the lower the detail, the blockier and faker my picture gets. So I crank that up to 9, and turn the Shadow Intensity to 0 so it’s not too dark. In this example, the lower the Texture setting, the smoother it looks, so I set that to 1. Then I hit OK to see what it looks like.

Hey, Mom! I do have talent after all! Look at this watercolor I painted!

OK, Mom isn’t buying it. You’ll never understand my art, Mother!!! Maybe she’ll be more convinced by a sketch. I head on down to the Sketch sub-menu and choose Chalk & Charcoal. Again, three sliders to adjust how it looks. Charcoal Area and Chalk Area let you balance how much of each drawing tool you use, and Stroke Pressure lets you control how many sketch-strokes appear. Did I learn this in the manual? Oh no way. I just messed around with them to see what they did. Here’s what I ended up with:

I just sketched this up at the local cafe!

My skills are growing exponentially. I slap that on my weblog, write “Untitled Self-Portrait [24 x 18", chalk & charcoal]” underneath it and pass it off as my own handiwork. My site is getting more visually interesting and now the galleries are calling. So I crank out some more fake art using four of the other filter faves:

The Underpainting filter.

The Pointillize filter.

The Graphic Pen filter.

The Stained Glass filter.

But there’s more to filters than duping people. They can also be instruments of Boundless Good and Wretched Evil, as you’ll see.

Useful Filters, Eyesore Filters

Aside from art-simulating filters, there are also what I like to call Actually Useful filters and Beautiful Eyesore filters. In the first category is a set of tools that are relatively subtle and can vastly improve your pictures, if used with care. They can be found under opposing headers:Blur and Sharpen.

Blur filters soften the focus of your picture, while Sharpen filters make it clearer. If you don’t want to mess around with sliders and settings, just choose Blur or Blur More (or Sharpen or Sharpen More), which apply a subtle version of the filter. If you want to have more control over, crank up Gaussian Blur or Unsharp Mask, two of the most widely used Photoshop filters.

I often use these Actually Useful filters in conjunction with other filters. For example, Watercolor could cause some jagged edges in a picture and ruin the illusion of authentic paint-on-canvas. Blurring the picture slightly can smooth out those edges.

Or you can pretend you’re a better photographer than you really are by selecting a portion of your picture and blurring it out, as if you’d carefully adjusted the focus when snapping the photo:

(This does, however, require a quick trip to the toolbar. I used the lasso and sloppily drew a line around everything except the camera, thereby selecting it. I then blurred the background with Gaussian Blur.)

At the other end of the spectrum are the Beautiful Eyesores. These filters are all about messing up your picture quickly and efficiently, and have been responsible for some of the most astonishingly awful website designs ever. Gaze upon the retro headache of Color Halftone:

…or the eerie wonder of Plastic Wrap:

…or the funhouse mirror of Pinch:

…or the disco fever of Glowing Edges:

…or the infamous Lens Flare:

These are but a small sample. Dig deep into the Filter menu and push those sliders to the extreme to really see what horrors Photoshop is capable of inflicting.

But even Beautiful Eyesores can have palatable results. Let’s try throwing them at something other than a photograph.

Logo, go, GO!

Up till now we’ve been working with photographs which are, of course, Photoshop’s favorite thing. But what if I wanted to make a logo that featured the title of my site?

Let’s say – again, hypothetically – that my weblog is called “Josh’s House of Stank.” I type the title into Photoshop and give it a blue background. (This calls for another brief trip to the toolbar to use the Type and Paint Bucket tools.) Like so:

Fine enough, but boring. What happens if we throw some filters at it? Let’s give ye olde Pinch another shot:

Not bad! Or maybe the aforementioned Glowing Edges:

Weird! Encouraged, I try some new ones, like Radial Blur, Mosaic Tiles, Emboss, or Extrude:

As always, just choose some at random and play around with their options. Photoshop filters are extremely powerful and any one of them, even the most egregious Eyesore, can do something great if applied to the right subject and tweaked in the right direction.

So play around with them for a while and before long you’ll have something intriguing enough to catch a visitor’s eye. Then they’ll be hooked, and will finally read your words, and after that … it’s all over. You will own them.

One of the main advantages of systems like PHP, XSSI, and CSS is the way they let us keep the functional code (or “business logic” as the eggheads call it) separate from how the content is rendered (“presentation”). At least in theory.

In actuality, this separation happens all too rarely, and muddled code with everything scrambled together is the norm. That kind of separation becomes especially important when multiple people are involved in a project, with designers, programmers and content writers working separately. Or, when you need to make frequent changes to, say, the look of a site without changing its wording, or vice versa.

The Basic Smarty Template

Smarty makes separation much, much easier by layering a templating system on top of PHP. This allows flaky designers, unwashed programmers and who-needs-’em content monkeys to all do their own thing without even seeing, let alone stepping on, each other’s toes. A Smarty template acts as the intermediary between all of them. The template consists of a designed HTML page with slots for content that can be filled dynamically.

An example of a template will clarify how this works:

 <html>

 <head>



 <title>

 How to recognize {$name}

 </title>

 </head>

 <body bgcolor="#000099">

 {$name}'s hair is {$haircolor}. He or she wears {$shoecolor} shoes.

 </body>



 </html>

The snazzy look of that template was created by a brilliant design team on giant CRT monitors, and the data inside the curly brackets is fed in from a PHP script created by a part-time web programmer with a burrito tattoo. The two have never met, and they like it that way.

Naturally, templates typically get quite a bit more complex than that. But let’s start by installing Smarty.

Installing Smarty

All you need to get started is a web server running PHP. Download the latest release of Smarty from the download page, and untar the package:

 tar xzvf Smarty-x.y.z.tar.gz

It contains several directories, including an important one called libs:place that in its entirety somewhere in your PHP include path.

If you don’t know where your include path is, it can be found by reading the output of the PHP function phpinfo(), and it can be modified in the php.ini file (if you have access to that on your server) or with the ini_set() function (if you don’t).

Alternately, you can put it any old place and refer to its location specifically every time you include() it. The libs directory contains the functional heart of Smarty, the PHP classes that do the work.

Next, create a web-accessible directory where you are going to build your first Smarty template. In this directory, create three subdirectories, called templates, templates_c and configs. Smarty uses these to work its magic, as we shall see.

The installation of Smarty is now complete. You will have to reboot your server. Just kidding!

Building a Smarty Page

Two components are required for a Smarty page:a template file, which ends with a .tpl suffix, and a PHP file that invokes Smarty and gives values to the template variables. Going back to our hypothetical designer and programmer, the designer messes around with the template file to her heart’s content to control the looks of the page, and the programmer handles the PHP (and MySQL or what-have-you).

Let’s start with that template page up top. Save it in your templates directory (that is where all templates should live) under the name recognize.tpl. Then, wearing our Programmer hat, we will breathe life into it by creating a basic PHP file, called recognize.php:

<php>

First we need to pull in the Smarty class:

 require 'Smarty.class.php';

If you didn’t put the libs directory in your include path like I told you, you’ll have to specify ‘/path/to/Smarty.class.php‘ explicitly.

Then we create a Smarty object from the class:

 $smarty = new Smarty;

Every Smarty script begins in roughly this way. Now we can begin assigning values to variables, using the assign method of the Smarty class. In practice, these values will come from a database or other dynamic source.

 $firstname = 'Sandra';



 $smarty->assign('haircolor', 'auburn');



 $smarty->assign('shoecolor', 'taupe');



 $smarty->assign('name', $firstname);

Finally, we use the display method to call and display the template, nicely filled in with the values we assigned:

 $smarty->display('recognize.tpl');



 ?>

End of script. Here’s a clean copy:

 <php>

 require 'Smarty.class.php';

 $smarty = new Smarty;

 $firstname = 'Sandra';

 $smarty->assign('haircolor', 'auburn');

 $smarty->assign('shoecolor', 'taupe');

 $smarty->assign('name', $firstname);

 $smarty->display('recognize.tpl');

 ?>

If you launch http://yoursite.com/smartydir/recognize.php and you’ve done everything correctly, it should display a finished page saying that:

 Sandra's hair is auburn. He or she wears taupe shoes.

The first time Smarty displays the page, it also compiles the output into a PHP page and stores that in the templates_c directory. That makes everything run faster, since the Smarty engine doesn’t have to parse the template again until it’s changed.

Congratulations! That’s your first Smarty page!

Template Tricks

If that was all Smarty could do, it’d be kind of nifty but probably not worth a Webmonkey article this long. Since this article is still unspooling, we can therefore deduce that there’s more to Smarty, much more. A host of template functions are provided that make Smarty a genuinely robust way of doing things. Let’s put on that stylish Designer hat again.

Working with a template, we aren’t limited to simply grabbing variable values from the PHP script and displaying them in nice colors. The display of variables can be changed dynamically in the template with a variety of modifier functions. For example, to convert the value of a string to all caps, we can use a reference in the template like this:

 I said, {$name}'s hair is {$haircolor|upper}!!!

The |upper causes the value of $haircolor to be displayed in uppercase:

 I said, Sandra's hair is AUBURN!!!

There are a number of other useful modifiers. Truncate is awfully handy when you want to display strings of varying or unknown lengths in a confined space:It chops off the end of the string at a length you specify. So if your template reads:

 My favorite foods are {$foods|truncate:15}

The output will be:

 My favorite foods are zucchini, lemons...

regardless of how long the actual content of the $foods variable is. That “15″ in the template is an argument telling truncate how many characters to cut off at. You can pass additional arguments to change the appended text (“…” is the default) and to specify whether to chop off the string at the preceding word boundary or right in the middle of a word (“false” does the former, “true” the latter). Thus {$foods|truncate:5:"-aagh!":true} will cut off the string at five characters, regardless of whether the word is done or not, and append “-aagh!” to the truncated string:

 My favorite foods are zucch-aagh!

As you can see, the colon character : delimits arguments.

Wordwrap is used to word-wrap long strings, and also takes three optional arguments, specifying:the number of characters before wrapping (default is 80); what to put at the end of each line (default is n, the newline character); and whether to break lines at word boundaries (the default) or just exactly when the character count is met. So, to insert
tags in a string every 40 characters, without respect for word boundaries, we use:{$string|wordwrap:40:"
":true}.

One more:regex_replace allows for actual text replacement in the template. It uses the same syntax as PHP’s preg_replace() function. That is to say, it takes two arguments:first the regular expression for which to search the string, and second the text to replace it with. So, to replace every instance of the word “color” with “colour” and then put the string in all caps (sorry, not all these examples can be hilarious ones) we’d say {$string|regex_replace:"/color/":"colour"|upper}. Notice how I tacked a second modifier, upper, onto that. When multiple modifiers are used, they are evaluated from left to right.

The arsenal of variable modifiers gives designers a nice little dose of power over the content. There’s more where that came from:Stay tuned for our intermediate Smarty course, in which we’ll cover advanced tools for template designers, like if/else statements and for loops; as well as some features for programmers to play with.

Windows provides a little command line utility called cmd.exe, but it has nothing close to the power of the Unix command line and its integrated free tools and applications. Fortunately, especially for addicts of the Unix way, there’s a way to use a lot of the Unix tools in a Windows environment. That way is a free piece of software called Cygwin. Cygwin is a Unix-style command line for Windows; it comes with a selection of hundreds of free tools as well.

Installing Cygwin

Installation is shockingly easy. Download http://www.cygwin.com/setup.exe onto your Windows computer, and then run the program.

The setup utility walks you through installing Cygwin. When prompted to choose a download source, select “Install from Internet”. Choose a reasonably local download mirror from the choices it offers.

Next, it’s time to choose which software packages you want included in your Cygwin installation. Choosing All is the easiest option, and it means you won’t get that annoying “command not found” error often — but it takes a long time to download everything, and it takes a lot of drive space. The packages are broken down into categories — Database, Devel, Editors — for ease of picking and choosing if you want to grab just the packages you need. I recommend blowing up the window to full screen for this process.

After you’ve picked some or All and clicked the Next button, all those packages will download from the mirror site and be installed on your machine. You can watch a captivating progress bar while this happens.

Finally you should see the “Installation Complete” message.

If, later on, you realize that now you want a package you opted not to install the first time around, just run setup.exe again and choose it. It’ll be added to your Cygwin setup, and any updates will be downloaded too, while your existing installation is left intact.

X and Rxvt

The X Window System is available via xorg. To get it installed, install the X-startup-scripts package from the X11 category. Then, the batch file C:cygwinusrX11R6binstartxwin.bat will start Xorg for you, indicated by a black X in the system tray. The X server will sit around waiting for X applications to use your display.

The default Cygwin shell window may be a little cumbersome sometimes, so the rxvt program provides a window that is more compatible with traditional Unix/Linux programs, especially those that might be running remotely. To give yourself a convenient Rxvt icon, make sure that the Rxvt package is installed (categorized under Shells), and create a windows shortcut to C:CygwinbinRun.exe. Then edit the shortcut’s properties so the Target reads: C:cygwinbinrun.exe /bin/rxvt -display :0.0 -e bash -login (If you decide not to use X, then leave off the -display :0.0, but some graphical programs may not work.)

Using Cygwin

Launch Cygwin in the way you ordinarily launch programs, be that the Start menu or a shortcut system. It’ll bring up a terminal window running the bash shell. Using bash, just a few keystrokes can accomplish things it takes unassisted Windows megabytes of shareware to do.

There’s a little bit of rethinking necessary if you’re used to Windows’ conventions. The C: drive is referred to as /cygdrive/c/ and so forth; your Desktop is at /cygdrive/c/Documents and Settings/User Name/Desktop

To create a whole series of nested directories:

mkdir -p /cygdrive/c/Documents and Settings/User Name/My Documents/One/New/Directory/After/Another

(note that you need to put a before space characters in directory and file names)

You can rename multiple files, too. Say you have a whole folder called mypics full of JPEGs with names like IMG_0203.JPG, and you’d like to add the prefix “vacation2006″ to each file:

for i in mypics/IMG*.JPG; do mv $i vacation2006-$i; done

To remove all empty files and folders from a directory:

find . -empty -maxdepth=1 -print0 | xargs -0 rm -rf

Programming with JavaScript used to be hard. Just look at all the JavaScript tutorials written by our Webmonkeys. Over the years we’ve done what we can to help you make sense of JavaScript.

Now we’re being helped out by JavaScript frameworks, like JQuery, Prototype and Moo Tools. These web frameworks sit on top of JavaScript and make some common tasks a whole lot easier. When you write in JQuery, as you will in this tutorial, you’re still writing JavaScript, but what used to be 50 lines may now be one or two. JQuery’s slogan is “write less, do more,” and it lives up to that promise.

In this tutorial, I’ll introduce you to a new way to write JavaScript: the easy, JQuery way. We’ll retrieve multiple objects in a single line, add CSS classes and make things magically disappear. At the end, you’ll be able to create an expandable Frequently Asked Questions template, where users can click a question and the answer will appear below.

You don’t have to be a pro to master JQuery (although going through Webmonkey’s JavaScript tutorials helps). Even if you’re new to JavaScript, you’ll want to read on and see what JQuery can do for you.

What you’ll need

• Good understanding of HTML and CSS
• Very basic knowledge of JavaScript
• Willingness to have your mind blown away

Your Basic HTML Sets the Stage

You should be excited to write some JQuery. I know I am. First, we have to get the HTML ready to go. Copy the code below into an empty document:

<html>

<head>



	<title>Testing JQuery</title>

	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>

	<style>

		// CSS goes here

	</style>

	<script>



		// JavaScript goes here

	</script>

</head>

<body>



</body>

</html>

Opened in a browser, the above is blank. That’s because it’s only a starting place for the code we’ll be adding into it.

Before we start writing code, I want to point out something interesting about one of the script tags. The one above the style tag and below the title tag calls to an external JavaScript file. That’s normal, but the URL where the src leads is not.

Most shared JavaScript code requires you to download it and put it on your server. You can do that with JQuery if you want (download JQuery, if you’d like). However, you can piggyback off of Google’s servers by accessing the version stored on the Google Ajax APIs site, like we did in the example above.

Another note about scripts. The code we create in this tutorial will be written within one main HTML file. Normally, we’d link to an external JavaScript file instead. The same goes for our CSS, which we’ll put between the style tags. I’m including scripts and styles inline because I want to make the code easy to read and manipulate.

Before we move on to the code, let’s set up the HTML and CSS we’ll be using in the next section.

Add this between the body tags:

<div id="container">

<span>SPAN<br />No id</br />No class</span>



<span class="test" id="second">SPAN<br />id="second"<br />class "test"</span>

<div class="test">DIV<br />No id<br />class "test"</div>

</div>



<p>

<strong>Toggles:</strong>

</p>

And put this between the style tags:

#container div, #container span

{

	width: 150px;

	height: 150px;

	display: block;

	float: left;

	border: 1px solid black;

}

#container .highlight

{

	border: 3px solid orange;

}

p

{

	clear: left;

}

p input

{

	display: block;

}

Reload the HTML file you created and you’ll see a few squares on your screen. Yay! Now let’s JQuery-ify the sucker.

You Can Get Anything With JQuery

One of the best features of JQuery is its tools for grabbing objects from a page. Most of this happens through the dollar sign function, with CSS-like commands. In this section, I’ll show some of the common ways of selecting objects, as well as filtering a list of objects down to just the few you want.

To follow along, you can download the basic HTML file or copy and paste it from Webmonkey’s code library. I’ll also give you the code to add to this starting template at each step. By the end of this tutorial, you should have written a decent JQuery-powered expandable FAQ template.

Get An Object By ID

Identifying a single object by ID is similar to setting styles in CSS. Use the dollar sign function and pass the ID with a pound sign in front of it. Like this: $("#second")

To test this out in our example HTML file, add the following underneath the “toggles” section near the bottom of the HTML:

<input type="button" onClick="javascript:test_byid();" value="id='second'" />

This line adds a button to the page that, when clicked, calls the test_byid() function. Where is that function? We need to add it between the script tags in your example HTML file:

function test_byid()

{

	$("#second").toggleClass("highlight");

}

Reload the file and click the new button. The second span (the one with id="second") highlights.

Get Objects By Class

Grabbing all objects of a certain class also uses similar CSS commands and the dollar sign function. Check it: $(".test")

Let’s test it in our example HTML file. Here’s the code for the testing button:

<input type="button" onClick="javascript:test_byclass();" value="class='test'" />

And now the JavaScript, which you should paste below the previous function:

function test_byclass()

{

	$(".test").toggleClass("highlight");

}

Reload the file and click the new button. The two right boxes (the ones with class=”test”) highlight.

Get Objects By Tag

If you want all objects of a particular tag, you just need to pass the name of the tag to the dollar sign function. This is also similar to CSS: $("span")

In our example HTML file, paste this code for the button to test getting objects by tag:

<input type="button" onClick="javascript:test_bytag();" value="tag is 'span'" />

And the JavaScript function:

function test_bytag()

{

	$("span").toggleClass("highlight");

}

Reload and click the new button, you’ll see the two left boxes (the ones that are span tags) highlight.

Filtering Objects

JQuery has a whole lot of filters for finding only the items you want from a selection. We’ll filter the final example from the previous section, where we retrieved all the span tags.

Here’s the HTML for the two filtering buttons:

<input type="button" onClick="test_byfirstfilter();" value="the first object where tag is 'span'" />

<input type="button" onClick="test_bynotfilter();" value="tag is 'span', but id is not 'second'" />

And the script for both of these filters:

function test_byfirstfilter()

{

	$("span:first").toggleClass("highlight");

}

function test_bynotfilter()

{

	$("span:not(#second)").toggleClass("highlight");

}

Filters all start with a colon. In these examples, we use the :first and :not filters.

The :first filter returns only the first item in the collection. Where $("span") will return all the span tag objects, $("span:first") will return only the first span.

Click the first of our two new buttons and we’ll see the first span highlights. Success!

The second filter shows how to remove specific rules from being selected. This filter accepts a second set of CSS commands inside parentheses. The full JQuery command, $("span:not(#second)") will first grab all the spans, but then filter out any that have id="second".

Click the second of our two new buttons and we’ll see the first span highlights again. It is the only span that does not contain the “second” id.

If you’ve been following along, your web page should now look something like this:

You can get quite a bit more complicated with the JQuery filters. There is a whole list of filters on the JQuery site. See how to select every other element (i.e., for zebra striped tables), elements containing specific text, and more.

Or, if you’re all filtered out, move on to the next section. I’ll show you how to actually /do something/ with the objects we’re selecting with JQuery.

Change Things Up With JQuery

So far we’ve just selected objects on the page using JQuery. Now it’s time to do something with them. For this section, I’m removing all my previous HTML buttons and script from my file. You can work on the same one, or also clean house a bit. Or, like before, you can follow along with ****[advanced.html this section's examples]**** in one file.

There is an aspect to what I’ve shown so far that you’ve probably noticed: highlighting. It’s an example of what can be done with the results from a JQuery call. The first item below shows how it’s done, then I’ll get into some other ways to manipulate the objects on the page using JQuery.

Change CSS Classes

To alter the design of a site as a user interacts with it, you most likely want to add or remove CSS classes. JQuery makes it easy. In fact, every example so far has toggled the “highlight” class, which puts a 3 pixel orange border around our example boxes.

Add this HTML button to your file:

<input type="button" onClick="test_changeclass();" value="Change CSS class of id='second'" />

And this script:

function test_changeclass()

{

	$("#second").toggleClass("highlight");

}

The code is actually the same as the example to retrieve a particular ID. Here, we use the toggleClass function to tell JQuery which class to either add or remove. If the class is already there, it removes. Otherwise, it adds.

We can also change the toggleClass function to be addClass or removeClass to perform those functions directly.

Change An Object’s Inner Text

So far we’ve just made changes to how something looks. How about bigger changes? In this example, we’ll change the text inside some of the boxes using JQuery.

To do this, we’ll use the text function. It takes a string of text as an argument, where we tell it the new text to use.

Here’s the HTML code for our button:

<input type="button" onClick="test_changetext();" value="Change text where class='test'" />

And the script:

function test_changetext()

{

	$(".test").text("over-riding text for these boxes");

}

We use JQuery to return all the objects from the page with class “test”, then replace their inner text with the new text.

Reload your file, click the new button, and suddenly your right two boxes (the ones with class="test") will have new content inside.

The important thing to notice here is that JQuery made the change over multiple objects, but only required one line. If there had been 50 objects with class test, the code would have been the same. No looping code needed. JQuery does the hard work for us.

You’re probably beginning to see the real power of JQuery. In the next section, I’ll start making stuff disappear. Then you’ll /know/ it’s magic.

Change Your Appearances: Show and Hide

Now for some real fun. We’re going to make boxes disappear. To do this, we’ll need the hide function. Let’s get straight to the code, first for the button:

<input type="button" onClick="test_hiding();" value="Hide where id='second'" />

And then the script:

function test_hiding()

{

	$("#second").hide();

}

Reload the page, click the new button, and just like that, the box goes away. As you may have guessed, to get it to return, you’ll need to call $("#second").show(). Instead, let’s try toggling, since it may be a more popular method than using show and hide independently.

The idea behind a show/hide toggle is that if an object is currently displayed on the page, it will disappear. If it’s invisible, it will reappear. Voila!

Here is the button code:

<input type="button" onClick="test_hidetoggling();" value="Toggle show/hide where id='second'" />

And the script:

function test_hidetoggling()

{

	$("#second").toggle();

}

If you’ve been following along, the end result should look something like this:

Notice the code is virtually the same as the show code? Instead of calling the show function, we call the toggle function. All the work to determine whether something is viewable is done by JQuery.

This example of toggling viewability will come in handy for the next section. I’m going to show you how to create an FAQ that only shows the questions until you click to expand the answers.

Create An Expandable FAQ With JQuery

In this section, I’ll show an example project that you can start using in the real world right away. We’ll create an FAQ with questions and answers, then use JQuery to hide the answers and display one when the question is clicked.

You can follow along piece by piece or download the file or copy and paste it from the code library.

Set Up The HTML

Start with the shell of an HTML file, like in previous examples. Then add this definition list between the body tags:

<dl>

	<dt>Question number one</dt>

	<dd>Answer to first question</dd>



	<dt>Question number two</dt>



	<dd>Answer to second question</dd>



	<dt>Question number three</dt>

	<dd>Answer to third question</dd>

</dl>

A definition list (<dl> tag) is a semantic way to show questions and answers. JQuery doesn’t require this, but this simple markup does make things easier. Inside the definition list, we have questions as definition terms (<dt> tags) and the answers as definition descriptions (<dd> tags).

JQuery’s “onLoad: the ready()” Function

When the FAQ page is first loaded, we want the definitions to be hidden, so that only the questions are viewable. To do this, we need to call some JavaScript when the page first loads. JQuery provides a ready() function to make this easy.

Between the script tags near the top of your code, add this JavaScript:

$(document).ready(function(){

	$("dd").hide();

});

When the document is loaded, the browser will run an anonymous function. That function is declared inside the ready function. If you haven’t seen this before, it may look strange, but it’s part of the power of JavaScript and JQuery.

Inside the new function, we currently have one call, which may look familiar from previous sections of this tutorial. We are using JQuery to retrieve all the dd tags, then we’re calling the hide() function to make them disappear temporarily.

Reload your HTML file and you should now only see the questions list.

Make Your Questions Clickable

Now that we have successfully hidden the FAQ answers, we want to allow users to click questions in order to display the appropriate answer. In order to do this, we need to use JQuery to tell the browser that every dt tag can be clicked, then also tell the browser what to do when it’s clicked.

Add this code to your ready() function, just below the hide command from the previous section:

$("dt").click(function(){

	$(this).next().toggle();

});

Here we grab every dt tag, then run the click command, which attaches an event to the dt. Inside the click event, we create an anonymous function (similar to our ready() function) to toggle the visibility of the answer within the dd tag.

You may be asking, where do we reference the dd tag? We don’t. We let the power of JQuery and our semantic code do the work:

1. Reference the object that was clicked with $(this)
2. Call the next() function on the clicked object to return the object that comes after it in our HTML code. In this case, that is our dd tag.
3. Toggle the visability of the dd tag.

Now, with very little JavaScript code, we’ve created an expandable FAQ that you could implement today. An added bonus is that this code has easy upkeep. Add or remove questions to the list and it still works without needing to edit any JavaScript code.

You could stop here, or you could add one more enhancement to the FAQ: the “expand all” link.

Add “Expand All” Option to FAQ

Some people hate expandable FAQs. These people may be no fun at parties, but that doesn’t mean we should deprive them of reading your Q&A. Let’s provide a one click option to show all the answers.

Above your definition list (dl), add a simple hyperlink:

<a href="#" onclick="showall();" id="linkshowall">Expand all</a>

Though there’s nothing but a pound sign as the URL for this link, the onclick event calls a function called showall(). Let’s create that function and use a simple JQuery statement:

function showall()

{

	$("dd").show();

}

You may notice that the call to show all the definition descriptions (dd) is similar to hiding. Yet, instead of calling the hide() function, we call the show() function.

The end result should look like this:

Now you’ve appeased the expandable FAQ haters and learned a tiny bit more JQuery. Where else can you go from here? Read on in the final section.

Become a JQuery Master

If you’ve made it this far in the tutorial, you have a good idea of the power JQuery has, while being easy to write. Hopefully you’re looking to learn even more JQuery and maybe even to become a JQuery master.

The JQuery docs are a little difficult to browse around, but are a good reference. Now you have a little knowledge of the way JQuery is written, you may be able to figure out how to use more advanced functions and filters. Just about every item in the docs has an example if you click through to the detail page.

Here are a few particular JQuery docs to check out:

• More ways to select objects – You’ll be surprised at the ways you can retrieve just the objects you need with JQuery. The hierarchy stuff almost makes my brain explode, but it’s extremely powerful.
• More ways to manipulate objects – In addition to changing its text, you can completely remove, append, prepend, and wrap objects.
• View child and sibling objects in many ways – If you liked the next() function, there’s a lot more where that came from.

Cascading stylesheets are a new-ish technology that promises to make the Web a better place by allowing you to control layout like never before, to make smaller, faster pages, and to easily maintain many pages at once.

Steve Mulder, author of “Web Designer’s Guide to Stylesheets,” created this five-day stylesheets tutorial which — modesty aside — kicks butt.

Your journey begins with a quick trip through the basics of cascading stylesheets — everything you have to know to get started quickly.

Then begin exploring the stylesheets properties that make them more than cool, starting with fonts. Stylesheets is your tool for calling fonts by name, controlling text size, specifying all manner of bolds and italics, and adding special effects.

Stylesheets give you lots of control over how characters, words, and lines can be spaced relative to one another. These CSS properties give you power over the space between words and letters, the leading (vertical spacing) between lines of text, the alignment of text, margins and padding, borders, and floating elements.

Lesson four introduces color and images into the mix. These CSS properties enable you to apply colors to elements and to place images behind elements.

In the final lesson, you’ll discover what many people believe to be the coolest thing about CSS: positioning and layering. Positioning text and images on a Web page with HTML is a pain in the butt (think table tags, invisible spacer GIFs, browser and platform variations). If you’re tired of these limitations, CSS will make you feel like a god.

After you’re done here, you may want to bulk up your skills even further by taking Tutorial:JavaScript Tutorial.

P.S. Mulder tells us he has no relation to the X-Files’ Mulder. But that’s what he would say.