Book HomeWeb Design in a NutshellSearch this book

Chapter 12. 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.

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.

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

<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

Specifies the map containing coordinates and links for a client-side imagemap (an image containing multiple hypertext links). See Chapter 11, "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

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

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.



Library Navigation Links

Copyright © 2002 O'Reilly & Associates. All rights reserved.