T3L4
Images and Objects
Introduction
When designing a Web site, one needs to know how to place various images and objects, such as
Java applets, within a web page. This lesson is designed to introduce the basic mechanics of
image and object placement within a web page. The ability to do so can improve both the
aesthetics and the functionality of the site.
When you finish this lesson, you should be able to:






Add graphics to a web page.
Add horizontal rules to a web page.
Embed audio and video files within a web page.
Add a scrolling-text marquee area to a web page.
Integrate a Java applet within a web page.
Integrate other objects within a web page.
This lesson is divided into the following sections:






Adding Graphics To A Web Page
Adding Horizontal Rules To A Web Page
Embedding Audio And Video Files Within A Web Page
Adding A Scrolling-Text Marquee Area To A Web Page
Integrating A Java Applet Within A Web Page
Integrating Other Objects Within A Web Page
Additional Resources

The Compendium of HTML Elements [[http://www.htmlcompendium.org/0frame.htm ]] is an
excellent reference to the different HTML tags, attributes and arguments. It is also a great
reference for browser compatibility issues.

The Bare Bones Guide to HTML [[http://werbach.com/barebones/]]
This short and sweet document lists nearly all the basic HTML tags.
1
T3L4
Adding Graphics to a Web Page
Graphics are the object most often added to a web page. Graphics can be used as:




a simple graphic,
a link,
an imagemap (a graphic with several different navigation hot spots), and
as spacing devices (to provide precise layout control).
Adding a Simple Graphic
Display Image
The HTML mechanics for displaying graphics are quite simple:
<IMG SRC="URL">
Alignment Argument
In addition, if you want to place the graphic in relation to some text or another object, you can
add an argument to the IMG SRC tag:
<IMG SRC="URL" ALIGN=TOP|BOTTOM|MIDDLE|LEFT|RIGHT>
Alternate Argument
Another, very important argument you should include with ANY image is the ALT argument.
This argument specifies the alternate text that will be displayed in the browser cannot display an
image. This is extremely useful for visually-impaired users, as well as users who have turned off
automatic image display.
<IMG SRC="URL" ALT="***">
Dimensions Argument
A trick to make your images load slightly faster is to include the WIDTH and HEIGHT
arguments. The browser doesn't have to calculate them itself, saving some time.
<IMG SRC="URL" WIDTH=? HEIGHT=?>
(in pixels)
OR
<IMG SRC="URL" WIDTH=% HEIGHT=%>
(as percentage of page width/height)
Border Argument
2
T3L4
If you want a border around an image (for example, if it is also a hypertext link), use the
BORDER argument:
<IMG SRC="URL" BORDER=?>
(in pixels)
Runaround Space Argument
To leave some white (empty) space around the image, use the HSPACE and VSPACE tags:
<IMG SRC="URL" HSPACE=? VSPACE=?>
(in pixels)
Lowsrc Argument
Another useful trick for sites that have users connecting a low transmission speeds is to display a
(usually) smaller, lower-resolution image in place of the "True" image. This low-res image loads
faster. If the user really wants to see the real image, s/he can click on the low-res image to
display the better image. In this case, you actually need two images: the low-res image and the
true image.
<IMG LOWSRC="URL" SRC="URL">
Adding a Graphic as a Link
To make a graphic a link, place anchor tags around the image tag. For example:
<A HREF="mydoc.htm"><IMG SRC="myPict.gif"></A>
Adding a Graphic as an Imagemap
It is beyond the scope of this lesson to illustrate exactly how you develop an image map. Many
small "helper" programs exist in the public domain to assist you in this. Basically, you take an
image and define different coordinates or "hot spots" on the image. When the user clicks on a
hot spot, the corresponding URL is activated. Here is an example of an Imagemap with three hot
spots.
<MAP NAME="cchome1">
<AREA SHAPE="rect" COORDS="333,237,515,262" HREF="URL">
<AREA SHAPE="rect" COORDS="330,181,517,215" HREF="URL">
<AREA SHAPE="rect" COORDS="332,145,558,168" HREF="URL">
</MAP><IMG SRC="cchome1.jpg" WIDTH="564" HEIGHT="338" ALIGN="BOTTOM"
USEMAP="#cchome1" BORDER="0" NATURALSIZEFLAG="0" ISMAP>
3
T3L4
Spacing Devices
Sometimes, blank graphics are used as a spacing device between two other page elements. Many
HTML purists believe this to be in bad form.
4
T3L4
Adding Horizontal Rules to a Web Page
Horizontal rules are one of the simplest ways to separate chunks of information on a web page.
They are useful in braking up long text passages into more manageable sections.
Basic Horizontal Rule
The basic HTML syntax to place a horizontal rule is
<HR>
The NoShade Argument
To display the rule as a solid bar, use this argument:
<HR NOSHADE>
The Size Argument
To change the thickness of the rule, use this argument:
<HR SIZE=number>
where number is the thickness in pixels.
The Width Argument
To change the default (full width of the browser window) width, use this argument:
<HR WIDTH=number or %>
where the number is the length in pixels, and the percentage is the percentage of the page
window.
5
T3L4
Embedding Audio And Video Files Within A Web Page
There are several methods and options for embedding audio and video files within a web page.
All options have their particular strengths and weaknesses. This section will detail only nonstreaming audio and video files. For information on streaming technologies, please see the
Streaming lesson
Audio
Embedding an Audio File for Automatic Play
Use the following EMBED tag to accomplish this:
<EMBED SRC="URL" HIDDEN="TRUE" LOOP="TRUE" AUTOSTART="TRUE"
CONTROLS="FALSE"></EMBED>
where URL points to an audio file, usually a MIDI file. This is a good way to set up continuallyplaying background music or sound. However, it is very difficult for the user to shut the sound
off, and this may bother your users.
Setting an Audio File for Controlled Play
Use the following A HREF tag to accomplish this:
<A HREF="URL">Click here for some cool sounds!</A>
where URL points to an audio file. This will bring up an audio controller and begin the audio
file. The nice part of this method is it put the user in control of the entire situation.
Video
There are two basic ways to place a video clip on a web page.
Setting a Video File for Controlled Play
Use the following A HREF tag to accomplish this:
<A HERF="URL">Click here for a cool movie on a new
page!</a>
where URL points to a video file. This will bring up a new web page with a video controller and
begin the video file. The nice part of this method is it put the user in control of the entire
situation. The bad part is the user must use the "Back" button to return to the original web page.
Embedding a Video File for Controlled Play
Use the following EMBED tag to accomplish this:
<p><EMBED SRC="URL" AUTOPLAY="FALSE" HEIGHT="140" WIDTH="140"
CONTROLS="TRUE">
6
T3L4
<Br>Click on the tiny triangle above to see this movie!</EMBED>
where URL points to an video file. This will show the first frame of the movie as well as the
controls. When the user clicks on the controls, the movie will play. The bad aspect of this
approach is that the movie will load without any input from the user, and you may have some
user's with a slow connection that won't even try to access the movie. You've penalized this
group with this approach. Conversely, the movie will play on the same page, eliminating the
need to press the "Back" button once the movie is over.
7
T3L4
Adding A Scrolling-Text Marquee Area To A Web Page
There may be times when you want to add a bit of pizzazz to your web page, or have some
critical information made repeatedly visible. A Marquee is the way to accomplish this. It creates
a sideways scrolling are of text within the web page.
The Marquee Tag
The basic HTML tag for this is:
<MARQUEE> Your text here</MARQUEE>
Alignment Arguments
Use the following alignment arguments to accomplish different relative location of the marquee
text to the neighboring text line:
ALIGN="TOP"|MIDDLE"|"BOTTOM"
Behavior Arguments
Use the following behavior arguments to accomplish different effects:
BEHAVIOR="SCROLL"|"SLIDE"|"ALTERNATE"
Scroll (the default) means the text starts off one side, scrolls completely across and off the
screen, then repeats. Slide means the text stops when it hits the opposite side from where it
started. Alternate means the text will bounce back and forth within the marquee.
Other arguments include BGCOLOR, DIRECTION (left or right), HEIGHT (in pixels),
HSPACE (holds n pixels space clear to the left and right), LOOP (n time or infinite),
SCROLLAMOUNT (the number of pixels to move the text for each scroll movement),
SCROLLDELAY (the number of milliseconds to delay between movements of the text),
VSPACE (holds n pixels space clear to the top and bottom), and WIDTH (specifies the pixel
width of the marquee).
8
T3L4
Integrating A Java Applet Within A Web Page
Java applets are self-contained mini-programs that can be placed within a web page. Many free
Java applets are available on the web for use. They should be used only when you cannot
accomplish a needed task in any other way, for every time a Java applet is used (launched), it
takes additional computer memory to do so. You may have some users who have enough
computer memory to view your site, but when they attempt to launch the Java applet, their
machine crashes. Your user may have turned off Java in their browser's preferences. Also, many
available Java applets (despite their claim) are not truly cross-platform. If you must create your
own Java applet, never assume it will "just run" on the other platform - check it yourself.
Traditional Placement of a Java Applet Within a Web Page
Traditionally, the APPLET tag is used to place a Java applet. An alternative, the OBJECT tag,
does not work correctly on all browsers. Here is an example of a rotating picture cube APPLET
tag in action:
<APPLET CODEBASE=class CODE="Rotate.jar" WIDTH=90 HEIGHT=76>
<PARAM NAME="cabbase" VALUE="Rotate.cab">
<PARAM NAME="picture1" VALUE="rotjava.gif ">
<PARAM NAME="picture2" VALUE="rotpalaceav.gif">
<PARAM NAME="picture3" VALUE="rotwaav.gif">
<PARAM NAME="picture4" VALUE="rotonliveav.gif">
<PARAM NAME="delay" VALUE="40">
<PARAM NAME="reduction" VALUE="2">
You need a Java enabled browser to see the Applet running.
</APPLET>
Dissecting this chunk of code, we have:
CODEBASE - This tells the browser where the applet is located. If the applet is in the same
directory as the page, it is not needed.
CODE - This is the applet to be used. Applets end in .class or .jar .
PARAM NAME - Specific information passed to the applet telling it what to do.
Unless you are creating the Java applet yourself, you can usually copy and paste the correct
HTML code from a source document into your document. Make sure you have the correct
permissions to do so first!
9
T3L4
Integrating Other Objects Within A Web Page
New objects are being developed for use in a web-based environment all the time. Chances are
one of two tags will enable you to add a new object to a web page - the EMBED and/or the
OBJECT tag.
The EMBED Tag
The EMBED tag places a media object (movie, Flash animation, etc.) on a web page in a defined
rectangular area. The EMBED tag is supported by most popular browsers. When a browser sees
an EMBED tag, it tries to match the object with the appropriate plug-in or player. That's why the
MIME type and file extension of the object are usually very important - the browser must have
this information to make the correct match.
Here is a basic EMBED tag:
<EMBED SRC="url" HEIGHT="x" WIDTH="y"></EMBED>
You can also use the ALIGN, HSPACE, and VSPACE arguments. Another, special argument is
PLUGINSPAGE - This specifies a page to automatically go to if the required plug-in is not on
the user's system. (Version 4.0 or better browsers).
The OBJECT Tag
While the EMBED tag is traditional, an alternative, the OBJECT tag, is now endorsed by the
HTML 4.0 Specifications for the placement of multimedia elements. However, keep in mind that
the OBJECT tag does not work correctly on all browsers. Here is a basic OBJECT tag:
<OBJECT CLASSID="url" CODEBASE="url" DATA="url" TYPE="mimetype" ID="name">
CLASSID - The location of the object's program. This can be used like the PLUGINSPAGE tag
to specify where to locate a missing but needed program.
CODEBASE - The URL for the plug-in and functions. This is the same as the CODEBASE
attribute in the APPLET tag.
DATA - The URL of the object itself. The same as the SRC argument for the EMBED tag.
TYPE - The MIME type of the object.
10
T3L4
11
T3L4
Images and Objects Summary
When designing a Web site, one needs to know how to place various images and objects, such as
Java applets, within a web page. This lesson was designed to introduce the basic mechanics of
image and object placement within a web page.
When you finish this lesson, you should be able to:






Add graphics to a web page.
Add horizontal rules to a web page.
Embed audio and video files within a web page.
Add a scrolling-text marquee area to a web page.
Integrate a Java applet within a web page.
Integrate other objects within a web page.
A short summary of these topics are listed below. If you do not understand these things, you
should review the lesson at least once. If you are still having difficulty, you should consider other
sources of information that compliment this lesson, such as textbooks, tutors, and instructors.
Adding Graphics to a Web Page
Graphics are the object most often added to a web page. Graphics can be used as:




a simple graphic,
a link,
an imagemap (a graphic with several different navigation hot spots), and
as spacing devices (to provide precise layout control).
The HTML mechanics for displaying graphics are quite simple:
<IMG SRC="URL">
Adding Horizontal Rules to a Web Page
Horizontal rules are one of the simplest ways to separate chunks of information on a web page.
They are useful in braking up long text passages into more manageable sections.
Basic Horizontal Rule
The basic HTML syntax to place a horizontal rule is
<HR>
Embedding Audio And Video Files Within A Web Page
12
T3L4
There are several methods and options for embedding audio and video files within a web page.
All options have their particular strengths and weaknesses.
Embedding an Audio File for Automatic Play
<EMBED SRC="URL" HIDDEN="TRUE" LOOP="TRUE" AUTOSTART="TRUE"
CONTROLS="FALSE"></EMBED>
Setting an Audio File for Controlled Play
<A HREF="URL">Click here for some cool sounds!</A>
Setting a Video File for Controlled Play
<A HREF="URL">Click here for a cool movie on a new
page!</a>
Embedding a Video File for Controlled Play
<p><EMBED SRC="URL" AUTOPLAY="FALSE" HEIGHT="140" WIDTH="140"
CONTROLS="TRUE">
<br>Click on the tiny triangle above to see this movie!</EMBED>
Adding A Scrolling-Text Marquee Area To A Web Page
There may be times when you want to add a bit of pizzazz to your web page, or have some
critical information made repeatedly visible. A Marquee is the way to accomplish this. It creates
a sideways scrolling are of text within the web page.
The Marquee Tag
<MARQUEE> Your text here</MARQUEE>
Integrating A Java Applet Within A Web Page
Java applets are self-contained mini-programs that can be placed within a web page. Many free
Java applets are available on the web for use.
Example Placement of a Java Applet Within a Web Page
<APPLET CODEBASE=class CODE="Rotate.jar" WIDTH=90 HEIGHT=76>
<PARAM NAME="cabbase" VALUE="Rotate.cab">
<PARAM NAME="picture1" VALUE="rotjava.gif ">
<PARAM NAME="picture2" VALUE="rotpalaceav.gif">
<PARAM NAME="picture3" VALUE="rotwaav.gif">
<PARAM NAME="picture4" VALUE="rotonliveav.gif">
<PARAM NAME="delay" VALUE="40">
<PARAM NAME="reduction" VALUE="2">
13
T3L4
You need a Java enabled browser to see the Applet running.
</APPLET>
Unless you are creating the Java applet yourself, you can usually copy and paste the correct
HTML code from a source document into your document. Make sure you have the correct
permissions to do so first!
Integrating Other Objects Within A Web Page
New objects are being developed for use in a web-based environment all the time. Chances are
one of two tags will enable you to add a new object to a web page - the EMBED and/or the
OBJECT tag.
The EMBED Tag
<EMBED SRC="url" HEIGHT="x" WIDTH="y"></EMBED>
The OBJECT Tag
<OBJECT CLASSID="url" CODEBASE="url" DATA="url" TYPE="mimetype" ID="name">
14