Adding Images and Other Page Elements (Web Design in a Nutshell, 2nd Edition)

This chapter focuses on the HTML tags available for placing elements such as rules, images, or multimedia objects on a web page.

12.1. 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

<applet>...</applet>

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

<embed>...</embed>

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.

<hr>

NN 2, 3, 4, 6 MSIE 2, 3, 4, 5, 5.5, 6 HTML 4.01 WebTV Opera5

<hr> (no end tag)

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

<img> (no end tag)

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 Chapter 11, "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

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

<marquee>...</marquee>

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

<noembed>...</noembed>

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

<object>...</object>

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 programming 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

<param> (no end tag)

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

<spacer> (no end tag)

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.