Understanding
HTML:
Inserting Multimedia Content and Tables
SolveYourProblem.com Article Series: Web Site Design
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 realize 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.
#
# # # #
SolveYourProblem.com : 2007
> Home > Website Design Articles: Main Page
|
