All posts tagged ‘tutorial’

Microdata: HTML5′s Best-Kept Secret

Given the amount of industry noise about native video and scripted animations, you’d be forgiven if you had never heard of the new microdata specification included in HTML5.

Similar to outside efforts like Microformats, HTML5′s microdata offers a way of extend HTML by adding custom vocabularies to your pages.

The easiest way to understand it is to consider a common use case. Let’s say you want list details about a business on your page — the name, address, telephone number and so on. To do that you’ll need to use some vocabulary in addition to HTML, since there is no <business> tag.

Using microdata, you can create your own custom name/value pairs to define a vocabulary that describes a business listing.

When a search engine spider comes along, it will know that not only is your data a business listing, but it can discover the address, the phone number, or even the precise geo-coordinates if you want to include them.

Given that HTML5 is still a draft at this point, why bother?

Actually, despite its lack of publicity and HTML5′s still-incomplete status, microdata is already being used by Google, which has started adding information gleaned from microdata markup to its search result snippets.

Continue Reading “Microdata: HTML5′s Best-Kept Secret” »

Embed Videos In Your Web Pages Using HTML5

HTML5 video is taking the web by storm.

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.

Continue Reading “Embed Videos In Your Web Pages Using HTML5″ »

File Under: Ajax

Ajax for Beginners

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.

Continue Reading “Ajax for Beginners” »
File Under: HTML, Web Standards

Make an HTML Document

HTML is the lingua franca of the web. It’s a simple, universal mark-up language that allows web publishers to create complex pages of text and images that can be viewed by anyone else on the web, regardless of what kind of computer or browser is being used.

Despite what you might have heard, you don’t need any special software to create an HTML page; all you need is a word processor (such as SimpleText, BBEdit, or Microsoft Word) and a working knowledge of HTML. And lucky for all of us, basic HTML is dead easy.

It’s All About the Tags

HTML is just a series of tags that are integrated into a text document. They’re a lot like stage directions — silently telling the browser what to do, and what props to use. Continue Reading “Make an HTML Document” »

File Under: HTML, Web Standards

Add HTML Forms to Your Site

So you’ve decided it’s time to interact with your users. You’re tired of this one-way street — you talking, them listening. You want to actually hear what your readers have to say. In order to do this, you’ll need to provide a way for people to enter information. Therefore, you’re going to need an HTML form (to process this information, however, you must implement some sort of script, which might require another tutorial).

Continue Reading “Add HTML Forms to Your Site” »
File Under: HTML

Write Symbols and Special Characters in HTML

When you type regular letters, numbers, and characters from your keyboard into the body of an HTML document, they show up on your Web pages just as you typed them. But things aren’t so easy in non-English speaking countries (and such places do exist – honest). Languages such as French, German, and Icelandic often use characters that are not found on your typical keyboard. Even in English, accents can distinguish a “résumé” from a “resume.”

So how do you make special characters and accented letters show up on your pages? You use a special set of codes called character entities, which you insert into your HTML code and which your browser will display as the corresponding symbols or characters you want.

Continue Reading “Write Symbols and Special Characters in HTML” »
File Under: HTML

Refresh a Page Using Meta Tags

Childhood, as far as your basic cheese selections go, was easy. In your typical middle-class family, you had one of three choices:cheddar, Monterey Jack, and those precious, flat, sandwich-sized slices of American. That’s what all the cool kids ate. I had to fight my mother to get those into my lunch. She used to make sandwiches with these huge slabs of cheddar cheese that looked like they were hewed from the side of an orange glacier. Although I lost the Wonder Bread battle, I didn’t give an inch on this one. For some reason, Mom couldn’t see the simple beauty in a perfectly proportioned square of processed cheese food.

The problem with childhood is that we never appreciate it while we have the chance. As I grew up, I developed more mature needs and tastes. Like many young adults lost in the hype of ’80s mass cultural wonders like Molly Ringwald and Oingo Boingo, I began to experiment. I told myself that I didn’t have a problem, but a little brie here, and a bit of Chaumont there, and before I knew it, I was hooked.

Continue Reading “Refresh a Page Using Meta Tags” »
File Under: HTML

Make a Mailto Link

To create a link that sends an e-mail to somebody, use the HTML mailto: tag.

Your code will look like this:

<a href="mailto:webmonkey@wired.com>Send an e-mail to Webmonkey</a>

and tell us how much you love cats.

When the reader clicks on that link, their default e-mail application will launch and a blank e-mail addressed to webmonkey@wired.com (or whatever address you put in the link) will open up.

Continue Reading “Make a Mailto Link” »
File Under: HTML

Position Text and Images With Div Tags

Are you sick of putting align in every tag just to get a page to lay out properly? And how do you feel about table hacks for positioning images? I thought so. Well, never fear – the <div> tag is here.

Although it’s been around since HTML 3.0, <div> didn’t really catch on until CSS-based layouts became the rage du jour. It won’t solve all your problems, but it works for formatting large blocks of text, images, and just about anything else that has an HTML tag around it.


Continue Reading “Position Text and Images With Div Tags” »

File Under: Browsers, JavaScript

Get Started With Greasemonkey

Greasemonkey is a Firefox extension that gives you tremendous control over how a page appears in your browser. If you can imagine JavaScript that you wish would run when a site loads, you can make it so. Rearrange a site’s layout, hide annoying elements (ads?), or replace every occurrence of “David Lee Roth” with “Sammy Hagar.” All it takes is a few lines of JavaScript and the Greasemonkey extension.


Continue Reading “Get Started With Greasemonkey” »