Taking HTML Further
Taking HTML Further.
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.
|