Images, Multimedia Objects and Background Graphics

HTML, DHTML & JavaScript

Chapter 10: Images, Multimedia Objects and Background Graphics

Objectives

• Explain relationship of HTML and multimedia

• To include multimedia object in web page

HTML, DHTML & JavaScript

Inserting Multimedia Objects

One of the latest HTML 4.0 (or, at least, beyond HTML 3.0) initiatives has been the addition of a tag called the <INSERT> tag, which expands on the role of the <IMG> tag by allowing various different multimedia types to be displayed inline. As the bandwidth of connections to the Internet grows, and the technology for inline multimedia grows with it, more and more Web viewers will be capable of viewing inline animations, presentation graphics, movies, and more.

As of this writing, very few browsers support the <INSERT> tag. Unlike some other HTML initiatives, however, this specification has been written with much more involvement from industry leaders like Microsoft, Netscape, Spyglass, and Sun.

The <INSERT> Tag

This is not exactly the easiest tag to get your arms around. Like tables, the <INSERT> tag is a container for other tags that help define the element. But, somewhat unlike tables, most of those contained tags don't actually display anything.

Let's take a look at a typical <INSERT> container:

Other Insert tags...

</INSERT>

Already, there are a couple of things you're required to know. You need to know the filename of the multimedia file or the appropriate URL if it's not in the current directory. You also need to know the MIME-style "type" of the data file.

MIME-Style Data Types

MIME (Multipurpose Internet Mail Extensions) data types are simply the standardized way that certain Internet programs can identify the type of ASCII and non-ASCII files that are being transferred to a client application. A very common example of this is the text/html MIME type.

The <INSERT> tag (and HTML in general) is not limited to the official MIME categories and types, hence we'll call them MIME-style data types. For the purposes of the <INSERT> tag, this is just a more reliable way to tell a Web browser what type of multimedia file to expect more reliable, that is, than just the file's extension.

Some common MIME-style data types appear in Table below. These and others are all useful for the

<INSERT> tag.

Type of File MIME Equivalent

GIF image/gif

HTML, DHTML & JavaScript

<INSERT>'s Attributes

Aside from DATA and TYPE, <INSERT> can also accept the attributes ALIGN, WIDTH, HEIGHT, and BORDER. Its format is as follows:

ALIGN works much as it does with <IMG>. The values possible for ALIGN are shown in Table below.

Notice that some of these values (LEFT, CENTER, MIDDLE) cause <INSERT> to act as a separate object, while the others assume the inserted multimedia object is supposed to be inline with the text of the document. You may recall that this is almost identical to what you learned about <IMG> at the beginning of this chapter.

Value Acts as How Object is Aligned

LEFT Object With left border and allows text wrap

RIGHT Object With right border and allows text

wrap

CENTER Object Between browser borders and allows

text wrap

TEXTTOP Inline Top vertically aligned with top of

text's font

MIDDLE Inline Middle vertically aligned with middle

of text's font

BASELINE Inline Bottom vertically aligned with

baseline of text

TEXTBOTTOM Inline Bottom vertically aligned with lowest point in text

Values for the <INSERT ALIGN> Attribute

WIDTH and HEIGHT accept numbers and unit suffixes (like px for pixels and in for inches). These two attributes are used to define the size of the object for faster downloading. Some browsers will also resize objects according to these attributes, so that you might expand a smaller inline movie's object with WIDTH and HEIGHT, for instance, to save on downloading time. WIDTH and HEIGHT take the following format:

The last parameter is BORDER, which has a default value of 1. The border will generally only appear when the entire <INSERT> object in enclosed in an anchor tag, as in the following example:

<A HREF="intro.html"><INSERT DATA="intro.moov" TYPE="video/quicktime" ALIGN="LEFT" WIDTH="3in"

HEIGHT="2in" BORDER="2">

</INSERT></A>

Using <PARAM> and <IMG> with <INSERT>

Two of the most common tags you'll want to use with the <INSERT> tag are the <PARAM> and <IMG>

tags. The <IMG> tag is used just as it has been elsewhere except it's only displayed when the browser

HTML, DHTML & JavaScript

The <PARAM> tag is used to offer additional parameters to the <INSERT> tag information like how many times to play a movie clip. The <PARAM> tag takes elements NAME and VALUE, which work a little like they do for certain table tags. Unfortunately, each different type of multimedia file will require different NAME and VALUE values, so you'll have to seek those out from the creator of the particular object type you want to send.

Here's an example of the <PARAM> tag:

</INSERT>

The <IMG> tag is used within an <INSERT> definition in the same way that it is used elsewhere, except that the ALIGN attribute isn't really necessary since the <IMG> will only be used to directly replace the inserted multimedia object. You can add the <IMG> like this:

</INSERT>

Clearly, you'll often want the graphic to at least represent the multimedia file that can't be displayed (see fig. below). Or, perhaps, you could cause a graphic to load that tells the user that he or she is missing out on something better.

The <INSERT> tag in action.

HTML, DHTML & JavaScript

Review Questions

1. The background image will scroll when the user scrolls down the page, unless you add which property to the <body> tag?

a. bgproperties="fixed"

b. bgproperties="stationary"

c. bgproperties="holdstill"

d. background-image=”stable”

2. Why should you specify a background color if you are using an image for the actual background of your page?

a. The background color will be shown until the image loads b. In case the image doesnt fit right

c. So the text shows up better

3. _____ tag can be used to add multimedia file objects.

a. <PLAY>

b. <INSERT>

c. <ADD>

d. <OBJ>

HTML, DHTML & JavaScript

Summary

Various multimedia objects can be inserted to add interactivity and to give better look to web pages. <INSERT> tag can be used to add multimedia object to a web page. The <PARAM> tag is used to offer additional parameters to the <INSERT> tag information.

HTML, DHTML & JavaScript

Chapter 11: Adding Tables to your Documents

Objectives

• Understanding how to create tables

• Using Captions, Table Headers and Table Data tags

• To know alignments of tables

In document HTML, DHTML and Java Script (Page 96-102)