Adding Images and Other Page Elements
Contents:
Summary of Object Placement Tags
Image Basics
The <img> Tag and Its Attributes
Horizontal Rules
Embedded Media Files
Java Applets
This chapter focuses on the HTML tags available for placing elements such as rules, images, or multimedia objects on a web page.
Summary of Object Placement Tags
In this section, browser support for each tag is noted to the right of the tag name. Browsers that do not support the tag are grayed out. Tag usage is indicated below the tag name. Start and end tags are required unless otherwise noted. "Deprecated" means that the tag or attribute is currently supported but is due to be phased out of the HTML specification and is discouraged from use (usually in favor of similar style sheet controls). The attributes listed for each tag reflect those in common use. A more thorough listing of attributes for each tag, according to the HTML 4.01 specification, appears in Appendix A, "HTML Elements"
| <applet>
| NN 2, 3, 4, 6 MSIE 3, 4, 5, 5.5, 6 HTML 4.01 Opera5 |
Deprecated. This tag (first introduced in Netscape Navigator 2.0) is used to place a Java applet on the web page. <applet> and all its attributes have been deprecated in favor of the <object> element, but it is still widely used. Some applets require the use of the <applet> tag. Furthermore, Navigator 4 and earlier and Internet Explorer 4 do not support Java applets via object tags.
Attributes
align=left|right|top|middle|bottom
- Aligns the applet and allows text to wrap around it (same as image alignment).
alt=text
- Provides alternate text if the applet cannot be displayed.
archive=urls
- Provides a space-separated list of URLs with classes to be preloaded.
code=class
- Required. Specifies the class name of the code to be executed.
codebase=url
- URL from which the applet code is retrieved.
height=number
- Height of the initial applet display area in pixels.
hspace=number
- Holds number pixels space clear to the left and right of the applet window.
name=text
- Names the applet for reference from elsewhere on the page.
vspace=number
- Holds number pixels space clear above and below the applet window.
width=number
- Width of the initial applet display area in pixels.
| <embed>
| NN 2, 3, 4, 6 MSIE 3, 4, 5, 5.5, 6 WebTV Opera5 |
Embeds an object into the web page. Embedded objects are most often multimedia files that require special plug-ins to display (for example, Flash movies, Quicktime Movies, etc.). In addition to the standard attributes listed below, certain media types and their respective plug-ins may have additional proprietary attributes for controlling the playback of the file. The closing tag is not always required, but is recommended.
Attributes
align=left|right|top|bottom
- NN 4.0+ and MSIE 4.0+ only. Controls the alignment of the media object relative to the surrounding text. The default is
bottom. top and bottom are vertical alignments. left and right position the object on the left or right margin and allow text to wrap around it.
height=number
- Specifies the height of the object in number of pixels. Some media types require this attribute.
hidden=yes|no
- Hides the media file or player from view when set to
yes. The default is no.
name=name
- Specifies a name for the embedded object. This is particularly useful for referencing the object from a script.
palette=foreground|background
- NN 4.0+ and MSIE 4.0+ only. This attribute applies to the Windows platform only. A value of
foreground makes the plug-in's palette the foreground palette. Conversely, a value of background makes the plug-in use the background palette; this is the default.
pluginspage=url
- NN 4.0+ and MSIE 4.0+ only. Specifies the URL for information on installing the appropriate plug-in.
src=url
- Required. Provides the URL to the file or object to be placed on the page.
width=number
- Specifies the width of the object in number of pixels. Some media types require this attribute.
Internet Explorer only
alt=text
- Provides alternative text when the media object cannot be displayed (same as for the
<img> tag).
code=filename
- Specifies the class name of the Java code to be executed.
codebase=url
- Specifies the base URL for the application.
units=pixels|en
- Defines the measurement units used by height and width. The default is pixels. En units are half the point size of the body text.
Netscape Navigator only
border=number
- Specifies the width of the border (in pixels) around the media object.
frameborder=yes|no
- Turns the border on or off.
hspace=number
- Used in conjunction with the
align attribute, the horizontal space attribute specifies (in pixels) the amount of space to leave clear to the left and right of the media object.
pluginurl=url
- Specifies a source for installing the appropriate plug-in for the media file. Netscape recommends that you use
pluginurl instead of pluginspage.
type=MIME type
- Specifies the MIME type of the plug-in needed to run the file. Navigator uses either the value of the
type attribute or the suffix of the filename given as the source to determine which plug-in to use.
vspace=number
- Used in conjunction with the
align attribute, the vertical space attribute specifies (in pixels) the amount of space to leave clear above and below the media object.
| <hr>
| NN 2, 3, 4, 6 MSIE 2, 3, 4, 5, 5.5, 6 HTML 4.01 WebTV Opera5 |
Adds a horizontal rule to the page.
Attributes
align=center|left|right
- Deprecated. If the rule is shorter than the width of the window, this tag controls horizontal alignment of the rule. The default is
center.
noshade
- Deprecated. This displays the rule as a solid (non-shaded) bar.
size=number
- Deprecated. Specifies the thickness of the rule in pixels.
width=number or %
- Deprecated. Specifies the length of the rule in pixels or as a percentage of the page width. By default, rules are the full width of the browser window.
| <img>
| NN 2, 3, 4, 6 MSIE 2, 3, 4, 5, 5.5, 6 HTML 4.01 WebTV Opera5 |
Places a graphic on the page.
Attributes
align=type
- Deprecated. Specifies the alignment of an image using one of the following attributes:
| Type
| Resulting alignment
|
absbottom
| Navigator 3.0 + and Internet Explorer 4.0 + only. Aligns the bottom of the image with the bottom of the current line.
|
absmiddle
| Navigator 3.0 + and Internet Explorer 4.0 + only. Aligns the middle of the image with the middle of the current line.
|
baseline
| Navigator 3.0 + and Internet Explorer 4.0 + only. Aligns the bottom of the image with the baseline of the current line.
|
bottom
| Aligns the bottom of the image with the text baseline. This is the default vertical alignment.
|
center
| According to the W3C specification, this centers the image horizontally on the page; however, in practice, browsers treat it the same as align=middle.
|
left
| Aligns the image on the left margin and allows subsequent text to wrap around it.
|
middle
| Aligns the text baseline with the middle of the image.
|
right
| Aligns the image on the right margin and allows subsequent text to wrap around it.
|
texttop
| Navigator only. Aligns the top of the image with the ascenders of the text line. An ascender is the part of a lowercase letter (like "d") that rises above the main body of the letter.
|
top
| Aligns the top of the image with the top of the tallest object on that line. |
alt=text
- Required. Provides a string of alternative text that appears when the image is not displayed. Internet Explorer 4.0+ and Netscape 6 on Windows display this text as a "tool tip" when the mouse rests on the image.
border=number
- Specifies the width (in pixels) of the border that surrounds a linked image. It is standard practice to set
border=0 to turn the border off.
height=number
- Specifies the height of the image in pixels. It is not required, but is recommended to speed up the rendering of the web page.
hspace=number
- Specifies (in number of pixels) the amount of space to leave clear to the left and right of the image.
ismap
- Indicates that the graphic is used as the basis for a server-side imagemap (an image containing multiple hypertext links). See "Creating Links" for more information on server-side imagemaps.
longdesc=url
- Specifies a link to a long description of the image or an imagemap's contents. This may one day be used to make information about the image accessible to nonvisual browsers, but it is not currently supported.
lowsrc=url
- Netscape Navigator (all versions) and Internet Explorer 4.0+ only. Specifies an image (usually of a smaller file size) that will download first, followed by the final image specified by the
src attribute.
name=text
- Assigns the image element a name so it can be referred to by a script or style sheet.
src=url
- Required. Provides the location of the graphic file to be displayed.
usemap=url
- Specifies the map containing coordinates and links for a client-side imagemap (an image containing multiple hypertext links). See "Creating Links" for more information on client-side imagemaps.
vspace=number
- Specifies (in number of pixels) the amount of space to leave clear above and below the image.
width=number
- Specifies the width of the image in pixels. It is not required, but is recommended to speed up the rendering of the web page.
Internet Explorer's dynsrc attribute
Using a dynsrc attribute, Internet Explorer Versions 2.0 and later also use the <img> tag to place a video on the page. The following attributes are related to the dynsrc function and work only with Internet Explorer:
controls
- Displays playback controls for the video.
dynsrc=url
- Provides the location of the video file to be displayed on the page.
loop=number|infinite
- Sets the number of times to play the video. It can be a number value or set to
infinite.
start=fileopen|mouseover|fileopen, mouseover
- Specifies when to play the video. By default, it begins playing as soon as it's downloaded (
fileopen). You can set it to start when the mouse pointer is over the movie area (mouseover). If you combine them (separated by a comma), the movie plays once when it's downloaded, then again every time the user mouses over it.
| <marquee>
| MSIE 2, 3, 4, 5, 5.5, 6 WebTV |
Creates a scrolling-text marquee area.
Attributes
align=top|middle|bottom
- Aligns the marquee with the top, middle, or bottom of the neighboring text line.
behavior=scroll|slide|alternate
- Specifies how the text should behave.
Scroll is the default setting and means the text should start completely off one side, scroll all the way across and completely off, then start over again. Slide stops the scroll when the text touches the other margin. Alternate means bounce back and forth within the marquee.
bgcolor=#rrggbb or color name
- Sets the background color of the marquee.
direction=left|right
- Defines the direction in which the text scrolls. IE 4.0+ also support the values
up and down.
height=number
- Defines the height in pixels of the marquee area.
hspace=number
- Holds a number of pixels space clear to the left and right of the marquee.
loop=number|infinite
- Specifies the number of times the text loops as a number value or infinite.
scrollamount=number
- Sets the number of pixels to move the text for each scroll movement.
scrolldelay=number
- Specifies the delay, in milliseconds, between successive movements of the marquee text.
vspace=number
- Holds a number of pixels space clear above and below the marquee.
width=number
- Specifies the width in pixels of the marquee.
| <noembed>
| NN 2, 3, 4, 6 WebTV Opera |
The text or object specified by <noembed> appears when an embedded object cannot be displayed (e.g., when the appropriate plug-in is not available). This tag is placed within the <embed> container tags.
| <object>
| NN 3, 4, 6 MSIE 3, 4, 5, 5.5, 6 HTML 4.01 WebTV Opera5 |
A generic element used for placing an object (such as an image, applet, media file, etc.) on a web page. It is similar to the <embed> tag but is the W3C's approved method for adding elements to a page. Browser support for the <object> tag is not up to standards. Support in Navigator 4 is buggy, and in IE 4 (and even 5), the tag is generally useful only for ActiveX controls.
Attributes
align=baseline|center|left|middle|right|textbottom|textmiddle|texttop
- Deprecated. Aligns object with respect to surrounding text. See the <img> tag for explanations of the
align values.
archive=urls
- Specifies a space-separated list of URLs for resources that are related to the object.
border=number
- Nonstandard. Sets the width of the border in pixels if the object is a link.
classid=url
- Identifies the location of an object's implementation. It is used with or in place of the
data attribute. The syntax depends on the object type.
codebase=url
- Identifies the base URL used to resolve relative URLs in the object (similar to
<base>). By default, the codebase is the base URL of the current document.
codetype=codetype
- Specifies the media type of the code. It is required only if the browser cannot determine an applet's MIME type from the
classid attribute or if the server does not deliver the correct MIME type when downloading the object.
data=url
- Specifies the URL of the data used for the object. The syntax depends on the object.
declare
- HTML 4.01. Declares an object but restrains the browser from downloading and processing it. Used in conjunction with the name attribute, this facility is similar to a forward declaration in a more conventional developing language, letting you defer the download until the object actually gets used.
height=number
- Specifies the height of the object in pixels.
hspace=number
- Deprecated. Holds number pixels space clear to the left and right of the object.
name=text
- Specifies the name of the object to be referenced by scripts on the page.
standby=message
- HTML 4.01. Specifies the message to display during object loading.
type=type
- Specifies the media type for the data.
usemap=url
- Specifies the imagemap to use with the object.
vspace=number
- Deprecated. Holds number pixels space clear above and below the object.
width=number
- Specifies the object width in pixels.
| <param>
| NN 2, 3, 4, 6 MSIE 3, 4, 5, 5.5, 6 HTML 4.01 WebTV Opera5 |
Supplies a parameter within the <applet> or <object> tag.
Attributes
name=text
- Required. Defines the name of the parameter.
value=text
- Defines the value of the parameter.
valuetype=data|ref|object
- Indicates the type of value:
data indicates that the parameter's value is data (default); ref indicates that the parameter's value is a URL; object indicates that the value is the URL of another object in the document.
type=content type
- HTML 4.01. Specifies the media type of the resource only when the
valuetype attribute is set to ref. It describes the types of values found at the referred location.
| <spacer>
| NN 3, 4, 6 WebTV |
Holds a specified amount of blank space within the flow of a page. This is a proprietary tag introduced by Netscape; it met with controversy and is now rarely used in common practice. It can be used to maintain space within table cells for correct display in Navigator.
Attributes
type=vertical|horizontal|block
- Specifies the type of spacer:
vertical inserts space between two lines of text, horizontal inserts space between characters, and block inserts a rectangular space.
size=number
- Specifies a number of pixels to be used with a
vertical or horizontal spacer.
height=number
- Specifies height in number of pixels for a
block spacer.
width=number
- Specifies width in number of pixels for a
block spacer.
align=value
- Aligns
block spacer with surrounding text. Values are the same as for the <img> tag.