Placing Images:
The most basic form of the image loading command that places an inline graphic image on a
WWW page is simply:
<img src="URL">
Where URL is a complete or partial path to the
source image file to be loaded, including the file name.
- Example:
- Code -
<b>This is a transparent inline image
<img src="../graphics/bearico1.gif">
of a bear.</b>
- Result -
This is a transparent inline image
 of a bear.
Low and High Source Images -
In addition to loading the main high source image, as stipulated by the
src="URL" argument, it is also possible to place
a low source image using the lowsrc="URL"
argument. The low source image will load before the high source image does.
The lowsrc image should ideally be a much smaller file
(smaller in file size, not in the displayed image dimensions) than the high
source image. It should be a near perfect copy of the high source image but
should have far fewer color indices, or much lower resolution.
The effect produced is that the lowsrc image will load
quickly and remain visible as the high src image overlays
it. This can produce a dramatic and pleasing visual effect something
akin, but on a much smaller scale, to the famous scene from The Wizard of Oz
in which Dorothy, in black and white, opens the door to Munchkinland, in full
color by Technicolor. Follow the link below to see this effect.
Note: This effect will
only generally be produced the first time a page is viewed since the high
source image may be cached locally on the user's microcomputer. This prevents
the low source image from loading again on subsequent page visits until the
local cache becomes outdated, corrupted or is purged.
Command Parameters -
The image loading command has a number of basic parameters that control
placement, appearance and size of the inline image on the WWW page.
These are set out in the table below:
|
Parameter
|
Definition/Action
|
Examples
|
align=value
|
Where value defines the alignment for the inline image.
Allowed values are:
- Relative
- top
middle
center
bottom
-
Absolute
- abstop
absmiddle
absbottom
- Wrapping
- right
left
|
This image is aligned <img src="../graphics/orb.gif" align=absmiddle>
in the absolute middle of the text line.
This image is aligned  in the
absolute middle of the text line.
<img src="../graphics/orb.gif" align=right> This image is aligned
to the right and text wraps around it.
This image is aligned to the right and
text wraps around it.
|
Wrap
Images
Neatly
|
NOTE: If the image is aligned to the right or to the
left then all text will be forced to wrap down only one margin until the
browser clears the bottom of the image file.
The <br clear=all>
command can be used to force a clear break to the bottom of the image for the placement
of a new paragraph of text not wrapped around the image.
|
alt="text"
|
Where text defines the alternate text to be displayed
if the image is unavailable for display or if the user has turned off
display of inline images in the browser preferences.
|
<img src="../graphics/image.gif" alt="This is an image.">
The text This is an image. would display if the image file
orb.gif could not be displayed.
|
Provide
Backup
|
NOTE: The alt="" parameter is
very useful for forcing display of information about an image which cannot be loaded,
particularly if the image, itself, displays textual information in graphic form which
the user really needs to read. It can also be used
by internal and external search engines to locate an image on a web page.
|
border=n
|
Where n defines the width, in pixels, of the border to be drawn
around a placed image.
|
Bordered <img src="../graphics/orb.gif" border=2> inline image.
Bordered inline image.
|
Watch
Borders
|
NOTE: The default is for no border
(border=0) on
ordinary inline images. If an image is made the object of a link, however,
the default is to border=1
unless it is turned off with the
border=0 parameter line.
|
height=nwidth=n
|
Where n defines the height and width, in pixels, of the space
in which the image can be displayed.
|
The actual size of image orb.gif is 32 X 32 pixels -
see above.
<img src="../graphics/orb.gif" height=10 width=10>
<img src="../graphics/orb.gif" height=50 width=200>
Note the step effect produced by stretching the image beyond its actual size. |
Always
Provide
Image
Sizes
|
NOTE: The default is
to load the image using its actual dimensions.
The browser will either compress or expand the image to fit
within any dimensions supplied and will dither it or mosaic it,
if necessary, to fit it into the space allowed.
This may produce unsatisfactory results (see the examples above).
It is better to size an image outside the browser so that it will display in
its original dimensions without unnecessary dither or
mosaic or step effects. IMPORTANT:
Web pags will load much faster, especially if images are placed within tables,
if the dimensions in pixels, of the images are included. Without this
information the browser must load and compose the entire page before it "knows"
how much space to allocate to the images. If the image sizes are provided to
the browser then it can display the text portion of the page while
the placed images load in the spaces already provided for them. Not only does
the page load faster but the image loading process can produce a pleasing and dramatic
effect. See the discussion on Inline Image
Types below.
|
hspace=nvspace=n
|
Where n defines the width, in pixels, of the horizontal space
(hspace) and vertical space (vspace) to be placed around the inline image
for text wrapping.
|
This code would display the image shown here
with a free area <img src="../graphics/orb.gif" hspace=10 vspace=10>
10 pixels wide around it both vertically and horizontally.
This code would display the image
shown here with a free area
10 pixels wide around it both vertically and horizontally.
|
Standoffs
Can Be
Tricky
|
NOTE:
This kind of placement is best used with large inline images
to allow a sufficient standoff for wrapped text.
It can look silly when used on smaller inline images. Also,
the standoff is produced to both sides and to the top and bottom of the
images indiscriminately. If the image must be flush with a
border or margin yet have a clear standoff to one side or the other
then that standoff must be provided as a literal space -
- or
it must be "built in" to the image as clear transparent space to one side or the
other of the image, itself.
|
In addition to these placement parameters the image loading command also allows advanced
placement parameters that govern the display of image maps, animated images and define
low resolution alternative sources but these are beyond the scope of the present
discussion.
An image can be used as a linked object.
Examples:
- With link border (default - messy) -
<a href="index.html"><img src="../graphics/return.gif"></a>
to the top level.
 to the top level.
- Without link border (crisp) -
<a href="index.html"><img src="../graphics/return.gif"
border=0></a> to the top level.
to the top level.
Move the mouse pointer over the image to see the effect and note the URL for the link.
Inline Image Types:
Most browsers can recognize and display inline graphic images in at least two
basic formats:
|
GIF87a (Compuserve Graphics Information File Format) files can
contain up to 256 colors. Files are raster graphics and can be
stored in either strict raster order or in interlaced order.
The file extension is GIF.
Interlaced images load in the browser differently from non-interlaced
images. Non-interlaced images load as if a canvas were being painted
line by line from the top to bottom in raster line order. Interlaced
images load as a broad mosaic that sharpens as more interlaced lines are
read. This not only produces a pleasing visual effect, but it also
allows the user to see the entire image as it sharpens before their eyes.
GIF89a images share the same basic attributes as GIF97a images.
The GIF98a file format, however, also supports both transparency
and animation. A GIF89a image can have a transparent background
color index which makes it blend into any background color or background image.
A transparent image, obviously, can have only 255 colors in addition to the transparent
background.
GIF89a images can also contain a stack of several GIF format images,
which, when loaded, can be displayed at varying replacement speeds with varying
replacement methods and can be made to loop a given number of times or to loop
continuously. This is roughly comparable to flipping through a stack of
cards which contain a moving image. Because animated GIF89a images
consist of a stack of images they are generally much larger than conventional
GIF87a images and should be used sparingly and for maximum effect.
|
JPG or JPEG images are also raster graphic images; that is,
they consist of lines of graphic information that build to produce the
final image much like the image that is produced on a television set or
the microcomputer monitor.
The file extension is JPG or
JPEG.
One of the principal differences between JPG and GIF images is
that JPG format images can contain much more color information in about
the same amount of file space. JPG images stored at maximum image
definition settings can display over a million colors. The problem with
this is that the user's browser may only accommodate 216 colors. Much of
the color information can be lost and unsightly color step and color area effects
can be introduced. Most users with high-end microcomputers will be able
to view a JPG image with the full color depth.
Because of this ability to encode much greater color depth in about the same
amount of file space, JPG images are generally preferred over GIF
images for images which require a greater display palette for proper rendering
in the browser.
Since JPG images have much greater color depth and may be dithered
extensively depending on the amount of compression used in saving them,
transparency is not available in this file format. If transparency is
more desirable than color depth in an inline image then the GIF89a format
is the clear format of choice despite its 255 index color depth limitation.
JPG format images are often preferred for use as background images because
of their clarity and depth of color. They are also preferred when no transparency
is required, as in the case of a photograph of a natural scene or a
portrait, etc.
|
Embedding Video Files:
Video files can be displayed in a browser using HTML without resorting to other
programming languages. HTML provides a mechanism for embedding AVI
video files into the web page so that they can be played at the discretion of the
viewer or automatically. Below is the simplest form of the embed command:
<embed src="URL">
This will work in Netscape or Internet Explorer browsers
The Internet Explorer browser recognizes the following extensions to the img src=
command for inline graphics:
<img dynsrc="URL1" src="URL2">
This does not work in the Netscape browser
Where:
dynsrc = the dynamic source, that is, the video AVI file source.
URL1 = the Internet path to the AVI file to be displayed.
src = the static source, that is, a corresponnding still image file source.
URL2 = the internet path to a static image to be displayed until the AVI loads.
The command parameters for the embed command are similar to those
used to place inline graphic images - height=, width=,
border=, vspace= and hspace=.
These work the same way as they do with inline images. See the discussion of
command parameters above.
There are some additional embed command parameters that govern
the starting and display characteristics of video files - autostart=
and loop=".
Where:
autostart = true or false and governs whether or not the video will
play automatically.
loop = the actual number of times for the video to rewind and
replay or "infinite."
You might use code like that displayed in the example below to display a video file:
<embed src="earth.avi" autostart="true" loop="infinite" height=100 width=100>
or
<img dynsrc="earth.avi" height=100 width=100>
View the effects produced
by these
video file placement methods.
|
It is possible to embed other types of video files in the same manner but they may
not display within the browser depending on the version level and the plug-ins
which have been installed. Other common video file formats include AVI, MPEG,
MOV and RM. Video information can also be streamed rather than
delivered as an embedded file, but video streaming is beyond the scope of this
course.
|
Color in HTML
