Taking HTML Further

by Anthony Stai

HTML might seem like a simple language for web documents, and to an extent, it is – that's what it was intended to be. If you know what you're doing, though, you can do a lot more with HTML than you might think. This article should give you a few ideas on how to take HMTL further.

Inserting Multimedia Content.

Plain text and graphics are all well and good, but sooner or later you're going to want to insert some multimedia content, such as a Flash movie, or an audio or video file. Unfortunately, browsers don't handle these things themselves – they use plugins, and you have to know the code to activate these plugins. While this should be simple, it isn’t, for various historical reasons.

To begin with, there are two ways entirely different ways of calling a plugin. Newer browsers use the object tag, like this:

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab"
width="200" height="200">
<param name="movie" value="myFlashMovie.swf">
</object>

That one's for Flash. To insert things like Quicktime or Windows Media players, you just need to find out their classid and codebase URL, as well as which parameters (param tags) they require. Most browsers now support the object tag, but some still use the embed tag instead:

<embed src="/support/flash/ts/documents/myFlashMovie.swf"
width="200" height="200"
type="application/x-shockwave-flash"
pluginspage="http://www.macromedia.com/go/getflashplayer">
</embed>

For most cases, you should include both – it's best to place the embed tag inside the object tag, as this will cause browsers that understand object to ignore your embed. As an extra fallback, you might want to insert a ‘plugin not found’ message, with a link to allow users to download the plugin, but in most cases browsers should now do this for you automatically.

For Internet Explorer only, you can extend object tags to call plugins that are on your server instead of on your computer – this is known as ‘ActiveX’. Its most common use is to let users install web-based programs such as instant messengers without having to download and run a standalone install program.

However, you have to realise that many users will see ActiveX as dodgy, because it is an often-used way of installing undesirable software, and people who aren’t using Internet Explorer just won’t see anything at all. If you’re designing a site for a limited set of users, however (such as an intranet), ActiveX can be a very powerful capability.

Tables.

Even though tables are rarely used for layout any more, they're still used for what they were originally intended for – actual tables of information! You'll probably need one at some point, but they're still as complicated as ever, so it's good to take a while to learn about how they work.

Basically, to create a table, you have to create the rows and columns individually: each table tag contains row (tr) tags, and each tr tag contains column (td) tags. A typical table looks like this:

<table>
<tr> <td> month </td> <td> sales </td> </tr>
<tr> <td> January </td> <td> 200 </td> </tr>
<tr> <td> February </td> <td> 300 </td> </tr>
</table>

This can be a difficult way to work, especially if your data is organised in columns, not rows. You just need to remember that the data you put in the tds will line up depending on their order in the tr: so, for example, 'sales', '200' and '300' will line up in a column, because they are all in the second td tag of each tr. You might find it easier to use tabs instead of spaces to separate the tds, so the table appears lined up in the HTML the same way it will on the page.

Once you see how that works, you pretty much understand tables – wasn't so hard, was it? The only thing left to realise is that you can make one td fill more than one column using the 'colspan' tag. In the example table, for example, you could add text that fills two columns by adding this row:

<tr> <td colspan="2">text</td> </tr>

Experiment a little, and you should be alright. Good luck.

About The Author:

Anthony Stai invites you to take your website to the next level. Get one of the best Search Engine Optimization (SEO) books on the market for Free! Learn the techniques that differentiate the amateurs from the pros. Get your book at http://www.makemoneyonline4you.com/seo.html

Home Resources