Chapter 3. Text-Level Elements in HTML 4.0
 | CONTENTS |  |
|
Topics in This Chapter
-
Using explicit character styles
-
Using logical character styles
-
Specifying hypertext links
-
Embedding images
-
Setting clickable regions in images
-
Embedding applets, audio, video, and ActiveX controls
-
Controlling line breaks
This chapter describes how to change character styles, create hypertext links, set line breaks, and embed objects in paragraphs. The text-level elements used to accomplish these tasks specify the appearance of text within existing text blocks and do not cause paragraph breaks as do block-level elements. Text-level elements can contain other text-level elements, but not block-level elements.
Note that the general HTML attributes derived from style sheets (Chapter 5) and JavaScript event handling (Chapter 24) are not discussed for each element. Furthermore, the DIR and LANG attributes (covered in Section 1.6, "BODY-Creating the Main Document"), as well as the TITLE attribute (also covered in Section 1.6) are not discussed separately for each HTML element.
3.1 Physical Character Styles
These elements specify the type of font or character style that should be applied to the enclosed text. They can be used almost anywhere, with a few exceptions such as the TITLE and labels of SUBMIT. Character styles can be nested to compose styles for bold-italic, an underlined fixed-width font, a large, green, bold, italic, strike-through font, and so forth.
| HTML Element: | <B> ... </B> |
| Attributes: | None |
The B element instructs the browser to use a bold version of the current font for the enclosed text. This rendering can be overridden by the use of style sheets (see Chapter 5 for details).
| HTML Element: | <I> ... </I> |
| Attributes: | None |
The I element instructs the browser to use italics for the enclosed text.
| HTML Element: | <TT> ... </TT> |
| Attributes: | None |
The TT element instructs the browser to use a monospaced (fixed-width or "teletype") ont for the enclosed text.
| HTML Element: | <U> ... </U> |
| Attributes: | None |
The U element, technically deprecated in HTML 4.0, specifies that the enclosed text be underlined.
| HTML Element: | <SUB> ... </SUB> |
| Attributes: | None |
The SUB element instructs the browser to use subscripts for the enclosed text.
| HTML Element: | <SUP> ... </SUP> |
| Attributes: | None |
The SUP element instructs the browser to use superscripts for the enclosed text.
| HTML Element: | <BIG> ... </BIG> |
| Attributes: | None |
The BIG element instructs the browser to use text one size bigger than the current size, on a scale of seven possible sizes. The actual point sizes available are determined by the browser. For more details, see the FONT element later in this section.
| HTML Element: | <SMALL> ... </SMALL> |
| Attributes: | None |
The SMALL element instructs the browser to use text one size smaller than the current size, on a scale of seven possible sizes. Again, the actual point sizes are determined by the browser. For details, see the FONT element later in this section.
| HTML Element: | <DEL> ... </DEL> |
| Attributes: | CITE, DATETIME |
The DEL element is for marking deleted content from an earlier version of the document. In Internet Explorer 5.0, deleted text is presented with a strike-through line. Netscape does not change the appearance of the deleted text. The optional CITE attribute specifies a URI whose corresponding document clarifies why the content was deleted. The DATETIME attribute specifies the date and time when the material was marked for deletion in the document. The format for the DATETIME stamp is YYYY-MM-DDThh:mm:ssTZD. Please see http://www.w3.org/TR/html40/types.html#type-datetime for clarification of this DATETIME format.
| HTML Element: | <INS> ... </INS> |
| Attributes: | CITE, DATETIME |
The INS element is complementary to DEL; INS indicates newly added material since an earlier version of the document. Internet Explorer 5.0 displays the inserted text with an underline, whereas Netscape does not change the presentation of the text. The CITE and DATETIME attributes are the same as for the DEL element.
| HTML Element: | <Q> ... </Q> |
| Attributes: | CITE |
The Q element is suitable for a short, in-lin quoted text. The CITE attribute specifies a URI from which the quotation originated. Neither Netscape nor Internet Explorer supports this new element.
| HTML Element: | <BDO DIR="..." ...> ... </BDO> |
| Attributes: | DIR, LANG |
Characters in Unicode and ISO character sets have a specific direction, left to right (LTR) or right to left (RTL). The BDO element overrides the bidirectional algorithm of the charset for the enclosed characters. The DIR attribute specifically defines the override direction as either LTR or RTL. The case---sensitive LANG attribute defines the language code of the text. See Section 1.6 (BODY-Creating the Main Document) for further details.
Listing 3.1 gives a sampling of various character styles, with Figure 3-1 showing a typical result.
Figure 3-1. Rendering of physical character styles in Internet Explorer 5.0 on Windows 2000 Professional.
Listing 3.1 A sample of physical character styles
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE>Physical Character Styles</TITLE> </HEAD> <BODY BGCOLOR="WHITE"> <H1>Physical Character Styles</H1> <B>Bold</B><BR> <I>Italic</I><BR> <TT>Teletype (Monospaced)</TT><BR> <U>Underlined</U><BR> Subscripts: f<SUB>0</SUB> + f<SUB>1</SUB><BR> Superscripts: x<SUP>2</SUP> + y<SUP>2</SUP><BR> <SMALL>Smaller</SMALL><BR> <BIG>Bigger</BIG><BR> <STRIKE>Strike Through</STRIKE><BR> <B><I>Bold Italic</I></B><BR> <BIG><TT>Big Monospaced</TT></BIG><BR> <SMALL><I>Small Italic</I></SMALL><BR> <FONT COLOR="GRAY">Gray</FONT><BR> <DEL>Delete</DEL><BR> <INS>Insert</INS><BR> </BODY> </HTML>
| HTML Element: | <FONT ...> ... </FONT> |
| Attributes: | SIZE, COLOR, FACE (nonstandard) |
The FONT tag defines the size or color to use for the enclosed text. The SIZE attribute gives the author control over font size, and the COLOR attribute lets the user assign text colors to individual text, that is, other than globally. Remember that text---level elements cannot enclose paragraphs. This means that if you have several consecutive paragraphs, lists, or tables for which you want to specify a particular color or size, you need to repeat the FONT entry in each. However, global colors can be set in the BODY element (Section 1.6), and global sizes can be set with BASEFONT (discussed later in this section). The FONT element is technically deprecated in HTML 4.0. Cascading style sheets also provide a flexible alternative of specifying font size, color, and face information for paragraphs or sections of text. See Chapter 5 for details.
SIZE The SIZE attribute can be an absolute value from 1 (smallest) to 7 (largest) or a relative value (SIZE="+1", SIZE="-1", SIZE="+2", and so forth) indicating the change with respect to the current font. The actual point sizes to which these numbers correspond to are determined by the browser. Be careful with absolute sizes; they can be annoying to users who have customized their browser to use a particular font size.
Core Approach
 | Whenever possible, use relative font sizes, not absolute ones. |
COLOR As with the colors in the BODY element, these colors can be a logical color name (Table 1.1 in Section 1.6) or an explicit RGB value, and you should take care to avoid the likelihood of text in the same color as the background, which would appear to be blank to the reader.
FACE Netscape and Internet Explorer allow a FACE attribute containing a list of preferred font names, separated by commas. The first font in the list should be used if available on the client machine; otherwise, the second should be used, and so on. If no font in the list is available, a default should be used, just as if the FACE attribute was omitted.
| HTML Element: | <BASEFONT SIZE=xxx> (No End Tag) |
| Attributes: | SIZE (required) |
BASEFONT sets the default font size for nonheading text for the remainder of document, using absolute values from 1 (smallest) to 7 (largest). The default is 3. As with FONT, BIG, and SMALL, the mapping from these seven values to actual pixel sizes is determined by the browser.
BASEFONT doesn't affect colors; to set the default color, use the TEXT attribute of BODY for global values, or FONT for local color changes, or cascading style sheets. BASEFONT is technically deprecated in the HTML 4.0 specification. Use BASEFONT with caution because many users set the default text size for their browser to suit their own tastes.
3.2 Logical Character Styles
Rather than specifying the specific font to be used, some authors prefer to describe the type of text being rendered and let the browser decide the details of the resultant look. That is the purpose of logical character style elements. These elements can also provide additional information to automatic document indexers, but in the absence of style sheets, they give the author less explicit control over the look of the document. All of these elements require start and end tags, can be nested to compose styles, and can be combined with the physical character style tags.
| HTML Element: | <EM> ... </EM> |
| Attributes: | None |
EM specifies that the browser emphasize the enclosed text. EM is rendered in italics by most browsers.
| HTML Element: | <STRONG> ... </STRONG> |
| Attributes: | None |
The STRONG element tells the browser to strongly emphasize the enclosed text. STRONG is usually rendered in boldface.
| HTML Element: | <CODE> ... </CODE> |
| Attributes: | None |
The CODE element is used for excerpts from computer code and is rendered in a fixed-width font. Don't forget that certain characters such as < and & get interpreted as HTML markup and need to be replaced with <, &, and so forth. See Table 2.1 for a list of these characters.
Core Alert
| | You can't put arbitrary program excerpts inside a CODE, SAMP, or KBD block without first checking for special characters such as <, &, and the like. |
| HTML Element: | <SAMP> ... </SAMP> |
| Attributes: | None |
The SAMP element is used for sample program output. SAMP is typically rendered in fixed-width font just like CODE.
| HTML Element: | KBD> ... </KBD> |
| Attributes: | None |
The KBD element indicates keyboard input to be entered by the user. Text enclosed in the KBD element is typically rendered in fixed-width font similar to CODE.
| HTML Element: | <DFN> ... </DFN> |
| Attributes: | None |
The DFN element is used for the defining occurrence of a term. Internet Explorer uses italics to present the enclosed text. Netscape uses the current character style and does not change the rendering of the text contained in a DFN element.
| HTML Element: | <VAR> ... </VAR> |
| Attributes: | None |
VAR represents a variable or argument to a function or procedure and is usually rendered in italics.
| HTML Element: | <CITE> ... </CITE> |
| Attributes: | None |
CITE indicates that the enclosed text is a citation or reference and is usually rendered in italics.
| HTML Element: | <ACRONYM> ... </ACRONYM> |
| Attributes: | TITLE |
The ACRONYM element is often used in conjunction with the TITLE attribute to define an acronym. For example,
<ACRONYM TITLE="Java Development Kit">JDK</ACRONYM>
In Internet Explorer 5.x, the TITLE is displayed as a pop-up when the mouse is over the element. Netscape does not display the TITLE attribute.
Listing 3.2 gives a sample of each of these character styles, with a typical result shown in Figure 3-2.
Figure 3-2. Rendering of logical character styles in Internet Explorer 5.0 on Windows 2000 Professional.
Listing 3.2 A sample of logical character styles
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE>Logical Character Styles</TITLE> </HEAD> <BODY BGCOLOR="WHITE"> <H1>Logical Character Styles</H1> <EM>Emphasized</EM><BR> <STRONG>Strongly Emphasized</STRONG><BR> <CODE>Code</CODE><BR> <SAMP>Sample Output</SAMP><BR> <KBD>Keyboard Text</KBD><BR> <DFN>Definition</DFN><BR> <VAR>Variable</VAR><BR> <CITE>Citation</CITE><BR> <EM><CODE>Emphasized Code</CODE></EM><BR> <FONT COLOR="GRAY"><CITE>Gray Citation</CITE></FONT><BR> <ACRONYM TITLE="Java Development Kit">JDK Acronym</ACRONYM> </BODY> </HTML>
| HTML Element: | <ABBR ...> ... </ABBR> |
| Attributes: | TITLE |
The ABBR element indicates an abbreviation, as in
<ABBR TITLE="cubic inches">cu. in.</ABBR>.
Neither Netscape nor Internet Explorer supports this element.
| HTML Element: | <SPAN ...> ... </SPAN> |
| Attributes: | CLASS, ID, STYLE |
SPAN is a text-level element added to support cascading style sheets. The default behavior is to leave the enclosed text unchanged, but SPAN delimits user-defined character styles. SPAN is discussed in Chapter 5 (Cascading Style Sheets).
3.3 Specifying Hypertext Links
One of the central ideas of HTML is that documents do not have to be read from top to bottom in a linear fashion. Instead, authors can create documents or sets of documents with links to other sections or documents, thus allowing readers to proceed in directions according to their interests. The anchor element A allows the author to specify sections of text or images that, when selected by the reader, will transfer the browser to a specific section of a designated document. The A element also allows the author to name a section of the document so that other links can refer to the section.
| HTML Element: | <A ...> ... </A> |
| Attributes: | HREF, NAME, TARGET, REL, REV, TITLE, ONFOCUS, ONBLUR, COORDS, SHAPE, TYPE, HREFLANG, CHARSET, ACCESSKEY, TABINDEX |
The anchor element is a container with a required end tag. With HREF, the section enclosed becomes the clickable region in the resultant page. This region is often underlined and highlighted in the default link color (often blue), or in the color specified by the LINK attribute of the BODY element, or in the color specified by the style sheet. Links that have been visited in the current session are generally underlined and highlighted in the VLINK color. Depending on how the browser's history mechanism is configured, links visited in previous sessions can be indicated this way as well.
HREF The HREF attribute specifies the address that the browser should visit when the user clicks upon the designated region. The value can be an absolute URL, a relative URL, a pound sign followed by a section name (see the NAME attribute), or a URL followed by a pound sign followed by a section name. If a specific section is supplied, the browser transfers to that section of the designated document when the active region is selected. Otherwise, the browser transfers to the top of the given document.
As explained in Chapter 19 (Server-Side Java: Servlets), URLs that specify directories but omit the trailing slash result in the browser making two connections to the HTTP server: the first to request the original URL and the second to request the one with the trailing slash included, based on a Location response header from the HTTP server. This double trip can waste time if the network connection to the referenced site is slow. So, use http://some.host.com/some/directory/, not http://some.host.com/some/directory.
Core Performance Tip
| | If a URL specifies a directory, be sure to include the trailing slash. |
For instance, Listing 3.3 shows four types of hypertext links: to an absolute URL, to a relative URL, to a section within the current document, and to a section within a specific URL. In addition to http: links, most browsers also support mailto: links (for e-mail addresses), file: links (for local files on the client machine, usually used for testing), and ftp: links (for FTP sites).
Listing 3.3 Hypertext links
The official HTML specifications are available from <A HREF="http://www.w3.org/MarkUp/"> the World Wide Web Consortium (W3C)</A>, with some examples given in <A HREF="HTML--Examples.html">my example page</A>. The Java programming language is discussed in <A HREF="#Section--3">Section 3</A>. For a discussion of COBOL, see <A HREF="johndoe.html#COBOL">my husband's home page</A>.
Finally, a stylistic note on the use of hypertext links: the document is more readable when the linked text is descriptive, rather than when the description is before or after the link with the linked text simply a filler such as "click here." For instance, a better approach is to say
Recent Dilbert strips are available on-line at <A HREF="http://www.unitedmedia.com/comics/dilbert/"> The Dilbert Zone</A>.
rather than to say
<A HREF="http://www.unitedmedia.com/comics/dilbert/"> Click here</A> to see recent Dilbert strips that are available on-line at The Dilbert Zone.
Core Approach
| | Avoid "click here" links. Instead, make the linked text descriptive enough so users know where it goes. |
NAME The NAME attribute gives a section a name so that other links can reference it through HREFs containing a # sign. For instance:
<A id="COBOL">COBOL: A Programming Language for the Future</A>Note that this name is case sensitive.
TARGET The TARGET attribute specifies that the referenced document be placed in a particular frame, or even in a new browser window. TARGET is discussed in Chapter 4 (Frames").
TITLE TITLE can be used to supply a title for documents that wouldn't already have one (e.g., an FTP directory). TITLE is used by some browsers to suggest an e-mail subject line in mailto: links and could be used by indexing programs to build a menu of links.
REL and REV The REL and REV attributes are used much less frequently than the other attributes. They can be used to describe the relationship of the current document to the linked document (REL) or the linked document to the current one (REV).
ONFOCUS and ONBLUR These attributes are used by JavaScript-capable browsers to designate JavaScript code to be executed when the link receives focus and loses focus, respectively. An element focus event can occur either through the mouse or the keyboard. See Chapter 24 (JavaScript: Adding Dynamic Content to Web Pages) for more details.
COORDS and SHAPE If the hyperlink represents a server-side image map connected to a CGI program, then COORDS specifies the (x,y) coordinate region of the image. The SHAPE attribute determines how the (x,y) pairs are interpreted. See Section 3.5 (Client-Side Image Maps) for further clarification of these two attributes.
TYPE, CHARSET, and HREFLANG TYPE defines the MIME type associated with the resource indicated by the link, as in TYPE="text/html". The CHARSET attribute indicates the character encoding of the referenced link, for example, CHARSET="ISO-8859-6". The HREFLANG attribute indicates the base language of the link, for example, the syntax HREFLANG="pt" would mean that the referenced link is written in Portuguese.
ACCESSKEY and TABINDEX ACCESSKEY is a single character (from the charset of the document) that acts as a hot key when used in conjunction with the Alt key on MS-Window systems or the Cmd key on Apple systems. When the key sequence is invoked, the document focus is set to the corresponding A element. TABINDEX is an integer between 0 and 32,767 that defines the tabbing order of the element in the document. When users navigate the document via the keyboard, the TABINDEX determines in which order the elements receive focus. By default, all elements that do not support the TABINDEX attributes have a value of 0. Elements with the same value receive focus in the order in which they appear in the document. Internet Explorer 5.x supports both of these attributes; Netscape 4.x supports neither.
3.4 Embedded Images
The IMG element enables you to insert images into the document. Most browsers support GIF (Graphics Interchange Format), JPEG (Joint Photographic Experts Group), and PNG (Portable Network Graphic) formats, but some browsers support others such as xbm, xpm, or bmp either directly or through plug-ins. In most cases, GIF images are more compact than JPEGs for images that have few color changes, such as drawings generated by graphics packages. JPEGs tend to be smaller for images with many changes, such as scanned photographs. Because image loading time can dominate the total Web page loading time, trying images both ways and checking the resulting sizes and quality is highly recommended.
Animated GIFs
Many browsers include support for the GIF89A standard, which allows multiple frames to be incorporated into an image file. The frames are overlaid on top of each other in a predefined cycle, resulting in a simple animation. Browsers that only support the GIF87 format but that are given an animated GIF in GIF89A format will still correctly display the first frame. An animated GIF is a good alternative to Java-based animations when the requirements are simple. Many commercial packages support the creation of animated GIFs from multiple GIF, TIFF, or other single-image formats, or by converting AVI or QuickTime movies.
The IMG Element
| HTML Element: | <IMG SRC="..." ALT="..." ...> (No End Tag) |
| Attributes: | SRC (required), ALT (required), ALIGN, WIDTH, HEIGHT, HSPACE, VSPACE, BORDER, USEMAP, ISMAP, NAME, LONGDESC, ONLOAD (nonstandard), ONERROR (nonstandard), ONABORT (nonstandard) |
IMG inserts an image at the current location of this document. Note that IMG is a text---level element and thus does not cause a paragraph break. IMG is not a container and has no end tag.
SRC SRC is a required attribute that specifies the location of the image file to be inserted. The URL can be either an absolute or a relative one. For instance:
<IMG SRC="http://www.some-isp.com/~jane/portrait.jpg" ALT="Jane Doe"> <IMG SRC="images/spot.gif" WIDTH=150 HEIGHT=120 ALT="My dog Spot">ALT ALT designates a string to display to text-only browsers, browsers with graphics temporarily disabled, or temporarily in regular browsers if text is loaded before images. In HTML 4.0, the ALT attribute is required.
WIDTH and HEIGHT These two attributes specify the intended size of the image in pixels. Providing a WIDTH and HEIGHT allows many browsers to load the text first, then come back and insert the image without rearranging any of the rest of the page, giving a much more pleasing result to the reader. If you load an image file directly in Netscape, choosing Page Info from the View menu will show you the dimensions of the image. The size of the image is also displayed in the title of the Netscape window. In Internet Explorer 5.x, the task is a little easier; simply place the mouse pointer over the image, click the right mouse button, and select Properties. Note: if you supply dimensions different from the original image dimensions, then the image will be stretched or shrunk to fit the specified width and height. In this situation, Internet Explorer yields the displayed image dimensions, not the original image dimensions, when you select the Properties option.
Core Approach
| | Always supply ALT, WIDTH, and HEIGHT attributes for images. |
ALIGN The ALIGN attribute, technically deprecated in HTML 4.0, specifies the position of the image with respect to the line of text in which it occurs. Possible values are LEFT, RIGHT, TOP, BOTTOM, and MIDDLE, with BOTTOM being the default. The LEFT and RIGHT values allow the text to flow around the image and are generally used when the image is being used as an illustration. If you use LEFT or RIGHT alignment and do not want text to appear beside the image, use <BR CLEAR="ALL">. See Section 3.7 (Controlling Line Breaks). MIDDLE is useful when a small image is being used as a bullet. Listing 3.4 gives an example of each of the alignment options, with the result shown in Figure 3-3.
Figure 3-3. Five ways to align images.
Listing 3.4 Image-Alignment.html
<!DOCTYPE HTML PUBLIC "--//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE>Image Alignment</TITLE> </HEAD> <BODY> <H1 ALIGN="CENTER">Image Alignment</H1> <TABLE BORDER=1> <TR><TH>Alignment <TH>Result <TR><TH><CODE>LEFT</CODE> <TD><IMG SRC="rude--pc.gif" ALIGN="LEFT" ALT="Rude PC" WIDTH=54 HEIGHT=77> This positions the image at the left side, with text flowing around it on the right. <TR><TH><CODE>RIGHT</CODE> <TD><IMG SRC="rude--pc.gif" ALIGN="RIGHT" ALT="Rude PC" WIDTH=54 HEIGHT=77> This positions the image at the right side, with text flowing around it on the left. <TR><TH><CODE>TOP</CODE> <TD><IMG SRC="rude--pc.gif" ALIGN="TOP" ALT="Rude PC" WIDTH=54 HEIGHT=77> Here, the image runs into the paragraph and the line containing the image is aligned with the image top. <TR><TH><CODE>BOTTOM</CODE> <TD><IMG SRC="rude--pc.gif" ALIGN="BOTTOM" ALT="Rude PC" WIDTH=54 HEIGHT=77> Here, the image runs into the paragraph and the line containing the image is aligned with the image bottom. <TR><TH><CODE>MIDDLE</CODE> <TD><IMG SRC="rude--pc.gif" ALIGN="MIDDLE" ALT="Rude PC" WIDTH=54 HEIGHT=77> Here, the image runs into the paragraph and the line containing the image is aligned with the image center. </TABLE> </BODY> </HTML>HSPACE and VSPACE These attributes stipulate the number of empty pixels to leave on the left and right (HSPACE) or top and bottom (VSPACE) of the image. The default is usually about 2. HTML 4.0 does not directly support methods for overlapping images or overlaying them with text, but such image layout can be done by use of negative margins with cascading style sheets. Because HSPACE and VSPACE are both officially deprecated, we recommend a style sheet approach for controlling margins. See Chapter 5 for details.
BORDER The BORDER attribute, also officially deprecated in the HTML 4.0 specification, designates the width of the border to draw around the image when it is part of a hypertext link. The default is usually 2.
USEMAP USEMAP supplies the name of a MAP entry, specified as "#name" or "URL#name". See Section 3.5 (Client-Side Image Maps) for explanation and an example.
ISMAP ISMAP causes the image to be used as a server-side image map connected to a CGI program. The use of ISMAP is only legal when the image is part of a hypertext link. See Chapter 18 (HTML Forms).
NAME The NAME attribute gives the image a name. JavaScript-enabled browsers can refer to the image in JavaScript through the name.
LONGDESC The LONGDESC attribute simply provides a URI to a detailed description of the image. This attribute is useful for users of nongraphic browsers.
ONLOAD, ONERROR, and ONABORT These attributes are extensions for JavaScript-enabled browsers and specify code to be executed when the image is loaded, when an error occurs in loading the image, and when the user terminates image loading before completion, respectively.
3.5 Client-Side Image Maps
| HTML Element: | <MAP id="..."> ... </MAP> |
| Attributes: | NAME (required) |
The MAP element enables the author to designate client---side image maps. This element enables the author to associate URLs with different regions of an image, a useful capability for creating toolbars and navigation images as well as for more traditional maps. These image maps are processed entirely in the user's browser, as opposed to server---side image maps provided by ISMAP or the image INPUT type (both are described in Chapter 18, "HTML Forms"), both of which require communication with the server to determine the action. The NAME attribute is required and provides a target for the USEMAP attribute of the IMG element. Each of the clickable regions is described by an AREA element appearing inside between the start and end MAP tags.
Listing 3.5 gives an example that divides an image into four quadrants with an HTML document associated with each. Results before and after clicking in the southwest corner for Internet Explorer 5.0 on Mac OS 9 are shown in Figure 3-4 and Figure 3-5, respectively.
Figure 3-4. Client-side image maps allow you to associate Web pages with various parts of an image.
Figure 3-5. Results of clicking in the lower-left quadrant of the map in Figure 3-4.
Listing 3.5 An image map
<!DOCTYPE HTML PUBLIC "--//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE>Kansas Topography</TITLE> </HEAD> <BODY> <H1 ALIGN="CENTER">Kansas Topography</H1> Click on a region of Kansas to get information on the terrain in that area. <P> <IMG SRC="kansas.gif" ALT="Kansas" WIDTH=385 HEIGHT=170 USEMAP="#Kansas" BORDER=0> <MAP id="Kansas"> <AREA HREF="nw.html" SHAPE="RECT" COORDS="0,0,192,85" ALT="North West"> <AREA HREF="ne.html" SHAPE="RECT" COORDS="193,0,385,85" ALT="North East"> <AREA HREF="sw.html" SHAPE="RECT" COORDS="0,86,192,170" ALT="South West"> <AREA HREF="se.html" SHAPE="RECT" COORDS="193,86,385,170" ALT="South East"> </MAP> </BODY> </HTML>
| HTML Element: | <AREA ALT="..." ...> (No End Tag) |
| Attributes: | HREF, COORDS, SHAPE, ALT (required), NOHREF, TARGET, ONFOCUS, ONBLUR, ACCESSKEY, TABINDEX |
The AREA element can only appear inside a MAP element and describes a clickable region in an image map. One AREA entry is used for each region and describes the location of the hot zone, the destination URL, and a textual description normally displayed by the browser in the status line when the mouse or cursor moves over the designated region. If regions overlap, the first region specified takes precedence.
HREF The HREF attribute specifies the target document and, as is typical with URLs, can be absolute or relative and can include a section name following a #.
COORDS COORDS supplies a comma-separated list of the coordinates of the particular region. The number and interpretation of the coordinates depends on the SHAPE attribute (see examples in following section). The coordinates should be integers and are interpreted as pixels relative to the top-left corner of the image.
SHAPE The SHAPE attribute should be one of RECT (the default shape), CIRCLE, POLY, or DEFAULT. Except for the DEFAULT value, SHAPE should be followed by a COORDS entry supplying coordinates appropriate to that type of region. The RECT entry should have associated coordinates in a comma-separated string of the form "left, top, right, bottom." For instance, the following associates region3.html with a 200 x 200 area whose top-left corner is at (20,40).
<AREA HREF="region3.html" SHAPE="RECT" COORDS="20,40,220,240">The CIRCLE entry takes a COORDS string of the form "x, y, radius," and the POLY entry takes a string of the form "x1, y1, x2, y2, , xn, yn" giving the vertices of the bounding polygon. The DEFAULT entry has no associated COORDS and indicates the entire image. The URL belonging to overlapping regions is determined by the first AREA element enclosing the region. Thus, the default entry should always come last, whether or not the AREA element explicitly uses DEFAULT.
ALT The ALT attribute supplies a string describing the destination URL. ALT is often shown by the browser in the status line when the mouse moves over the associated hot zone.
NOHREF The NOHREF attribute designates a region with no associated URL. NOHREF is only needed if you want to turn off part of a region that would otherwise be active owing to some other AREA entry. Because the action associated with more than one AREA is determined by the first AREA entry, NOHREF entries should always come first.
Core Approach
| | Because the URL of areas in multiple regions is determined by the first applicable AREA element, NOHREF entries should come first in a MAP element and the entry for the default URL should come last. |
TARGET The TARGET attribute designates the target frame in which to show the results. Frames are particularly prevalent for documents that use image maps; see the discussion of frames in Chapter 4 for details.
ONFOCUS, ONBLUR, ACCESSKEY, and TABINDEX These attributes are defined exactly the same as for the IMG element in Section 3.4 (Embedded Images).
3.6 Embedding Other Objects in Documents
Although there are a few text-only browsers, almost all browsers support embedded image files. But images are not the only kind of objects that can be placed in Web pages. Java applets are also supported by most major browsers. Other audio, video, VRML, and ActiveX objects typically either depend on the user having a specific plug-in or are browser specific.
Embedded Applets
| HTML Element: | <APPLET CODE="..." WIDTH=xxx HEIGHT=xxx ...> ... </APPLET> |
| Attributes: | CODE, WIDTH (required), HEIGHT (required), CODEBASE, ALT, ALIGN, HSPACE, VSPACE, NAME, OBJECT, ARCHIVE (nonstandard), MAYSCRIPT (nonstandard) |
The APPLET tag enables you to embed an applet into a page and is discussed in detail in Chapter 9 (Applets and Basic Graphics).
CODE CODE designates the filename of the Java class file to load and is required unless the OBJECT attribute is present. This attribute does not define an absolute URL; the filename is interpreted with respect to the current document's default directory unless CODEBASE is supplied.
Core Note
| | CODE cannot be used to give an absolute URL. Use CODEBASE if you want to load applets from someplace other than the current document's location. |
WIDTH and HEIGHT These attributes specify the size of the area the applet will occupy. They can be specified in pixels or as a percentage of the browser window width. However, Sun's "appletviewer" (a lightweight pseudobrowser that ignores all the HTML except for the APPLET part) cannot handle percentages because no preexisting window for the percentage to refer to is present. WIDTH and HEIGHT are required in all applets.
Core Alert
| | Sun's appletviewer cannot handle WIDTH and HEIGHT attributes as percentages. |
CODEBASE CODEBASE designates the base URL. The entry in CODE is taken with respect to this base directory. See Section 9.9 (The Java Plug-In) for an example.
ALT Java-enabled browsers ignore markup between <APPLET ...> and </APPLET>, so alternative text for these browsers is normally displayed at the location of the applet. The ALT attribute was intended for browsers that support Java but have disabled this capability. ALT is not widely supported; thus, we recommend avoiding it.
ALIGN The ALIGN attribute specifies alignment options and has the same possible values and interpretation of values as the IMG element (Section 3.4).
HSPACE HSPACE specifies the empty space at the left and right of the applet in pixels.
VSPACE VSPACE specifies the empty space at the top and bottom of the applet in pixels.
NAME NAME gives a name to the applet. Used in Java for interapplet communication and by JavaScript to reference an applet by name.
OBJECT The OBJECT attribute can be used to supply a serialized applet that was saved by the object serialization facility of Java.
ARCHIVE ARCHIVE specifies an archive of class files to be preloaded. The archive should be Java Archive (.jar) format, but Netscape allows uncompressed Zip (.zip) archives.
MAYSCRIPT Netscape and Internet Explorer use this attribute to determine if the applet can be controlled from JavaScript. For details, see Chapter 24 (JavaScript: Adding Dynamic Content to Web Pages).
Technically, the APPLET element, along with all the corresponding attributes, is deprecated in the HTML 4.0 specification. The recommended alternative is the OBJECT element. However, many authors still prefer the simpler APPLET element. See Sections 9.6 and 9.8 for additional information on the APPLET and OBJECT element.
| HTML Element: | <PARAM id="..." VALUE="..."> (No End Tag) |
| Attributes: | NAME (required), VALUE (required) |
The PARAM element supplies customization values to the applet, which can read them by using getParameter. See Section 9.7 (Reading Applet Parameters) for details. A PARAM name of WIDTH or HEIGHT overrides the WIDTH and HEIGHT values in the APPLET tag, so you should avoid <PARAM id="WIDTH" ...> and <PARAM id="HEIGHT" ...>. Note: PARAM elements can also customize an HTML OBJECT, as discussed later in this section.
Core Alert
| | Never use WIDTH or HEIGHT as PARAM names. |
Embedded Video, Audio, and Other Formats with Plug-ins
| HTML Element: | <EMBED SRC="..." ...> ... </EMBED> |
| Attributes: | SRC, WIDTH, HEIGHT, Plug-in-Specific Attributes |
The EMBED element is not part of the HTML 4.0 specification but can be used to create in-line objects of types supported by plug-ins for a particular browser. Text inside the element is ignored by browsers that support plug ins. In addition to the standard SRC, WIDTH, and HEIGHT attributes, other attributes particular to a specific plug-in are possible. For instance, both Netscape and Internet Explorer have standard plug-ins such as LiveVideo that support the playing of video clips in AVI format. These plug-ins support an additional attribute of AUTOSTART with values of TRUE or FALSE that determine if the video should begin playing automatically when the page is loaded or wait until the user clicks on the video (the default). For instance, the following would embed a video file in browsers with an appropriate plug-in that would begin playing only when the user clicks on the video object,
<EMBED SRC="martian-invasion.avi" WIDTH=120 HEIGHT=90>
A large list of free and for-fee plug-ins, along with usage descriptions and EMBED attributes supported, can be found at:
http://home.netscape.com/plugins/
Highlights include support for VRML, QuickTime, streaming audio, Adobe Acrobat files, PNG images, and more.
Embedded ActiveX Controls
| HTML Element: | <OBJECT ...> ... </OBJECT> |
| Attributes: | CLASSID, CODETYPE, CODEBASE, ALIGN, BORDER, WIDTH, HEIGHT, HSPACE, VSPACE, STANDBY, ARCHIVE, DATA, TYPE, NAME, TABINDEX, DECLARE, USEMAP |
Internet Explorer allows authors to embed any ActiveX control in a Web page. Customization parameters are supplied by PARAM elements, just as with Java applets. Because ActiveX controls, unlike Java applets, can perform arbitrary actions on the client system (including, in principle, deleting files, running arbitrary programs, and so forth), readers shouldn't allow arbitrary controls to be downloaded, but certain controls are bundled with Internet Explorer, and third-party controls can be digitally signed to verify their source. Many users are reluctant to allow any ActiveX controls to be downloaded to their machine, and Web pages with such controls shouldn't be considered portable even to readers using Internet Explorer. However, ActiveX controls can be very useful for trusted intranet environments. The most important attributes are as follows.
CLASSID CLASSID specifies the URL. For registered controls, CLASSID is of the form clsid:class-identifier.
CODETYPE CODETYPE defines the content type of the object. The form for applets is CODETYPE="application/java". See Section 9.8 (HTML OBJECT Element) for details.
CODEBASE CODEBASE specifies the directory from which to load, just like the CODEBASE attribute of APPLET.
ALIGN, BORDER, WIDTH, HEIGHT, HSPACE, and VSPACE These attributes are used exactly the same way as they are for the IMG element. See Section 3.4 (Embedded Images).
STANDBY STANDBY supplies a string to be displayed while the object is loading.
ARCHIVE The ARCHIVE attribute defines a space-separated list of URIs to preload before rendering of the object. The URIs are interpreted relative to the CODEBASE attribute. For applets, the standard archive is JAR format, which can be generated through the JDK jar utility.
DATA and TYPE The DATA attribute is a URI specifying a data file to be processed by the object, where the TYPE attribute specifies the MIME type of the DATA.
NAME The NAME attribute is used by browsers that support JavaScript to give a name that can be used by JavaScript to refer to the image.
TABINDEX When users navigate the document via the keyboard, TABINDEX determines in which order the elements receive focus. Values between 0 and 32,767 are legal for the TABINDEX. By default, all elements that do not support the TABINDEX attributes have a value of 0. Furthermore, elements with the same value receive focus in the same order in which they appear in the document. Internet Explorer 5.x supports both of these attributes; Netscape 4.x supports neither.
The HTML 4.0 specification adds a DECLARE attribute that is currently unsupported by Netscape and Internet Explorer. DECLARE restrains the browser from initially loading the OBJECT, permitting loading later though a link, another OBJECT, or a button.
In addition, the HTML specification includes a USEMAP attribute for the OBJECT element to specify a client-side image map. USEMAP is not supported by Internet Explorer 5.x and earlier, or Netscape 4.7 and earlier. However, USEMAP is supported by Netscape 6.
A wide variety of third-party ActiveX controls can be found at CNET's ActiveX Download Gallery at http://www.activex.com/.
Embedded Scrolling Text Banners
| HTML Element: | <MARQUEE ...> ... </MARQUEE> |
| Attributes: | WIDTH, HEIGHT, ALIGN, BEHAVIOR, BGCOLOR, DIRECTION, HSPACE, VSPACE, LOOP, SCROLLAMOUNT, SCROLLDELAY |
The MARQUEE element is an Internet Explorer extension that displays the text enclosed between the start (<MARQUEE ...>) and end (</MARQUEE>) tags in a scrolling banner, or "marquee." Text-level markup is not allowed inside MARQUEE, but a MARQUEE element can be embedded inside markup such as a FONT element to give, for instance, large, scrolling, blue text. Browsers other than Internet Explorer ignore the MARQUEE tags and treat the enclosed text as part of the current paragraph. You can simply use <MARQUEE> as the start tag, or you can supply one of the following attributes to customize the behavior. Many end users consider MARQUEE to be an annoying distraction, so use it with caution.
WIDTH and HEIGHT These attributes define the width and height for the marquee region, either in pixels or as a percentage of the Internet Explorer window's size. The default width is 100%, and the default height is based on the current font.
ALIGN The ALIGN attribute specifies how the marquee should be aligned with respect to the surrounding text. Legal values are LEFT, RIGHT, CENTER, TOP, BOTTOM, and MIDDLE. These values are used in exactly the same way as in the IMG element covered in Section 3.4 (Embedded Images).
BEHAVIOR The BEHAVIOR attribute describes how the text should move. SCROLL, the default, means that the text should scroll in one direction until off the screen, then repeat. SLIDE means that the text should scroll until reaching one side, then stop. BOUNCE means that the text should alternate back and forth within the defined region.
BGCOLOR BGCOLOR defines the background color of the region.
DIRECTION The DIRECTION attribute specifies the direction in which the text scrolls (or first scrolls, in the case of BEHAVIOR="BOUNCE"). Legal values are LEFT (from right to left) and RIGHT (from left to right). LEFT is the default.
HSPACE and VSPACE HSPACE and VSPACE give the amount of horizontal and vertical space (in pixels) around the region, respectively.
LOOP The LOOP attributes specifies how many times the scrolling will repeat. A value of -1 or INFINITE means that the scrolling text will repeat indefinitely; -1 is the default.
SCROLLAMOUNT SCROLLAMOUNT specifies the number of pixels between each successive drawing of the text.
SCROLLDELAY SCROLLDELAY specifies the number of milliseconds between each successive drawing.
3.7 Controlling Line Breaks
When displaying most types of text, the browser inserts line breaks to fit the available space. In Section 2.2 (Basic Text Elements), you saw the PRE tag that set a fixed-width font and turned off word wrapping for an entire paragraph. In addition to PRE, HTML lets you insert explicit line breaks with the BR tag and prevent line breaks by the use of either nonbreaking spaces or the nonstandard, but widely supported, NOBR tag.
| HTML Element: | <BR ...> (No End Tag) |
| Attributes: | CLEAR |
BR inserts a line break without ending the current paragraph. Because carriage returns in the HTML source are ignored except within a few special elements such as PRE or TEXTAREA, BR is necessary to guarantee a line break in the resultant page. The CLEAR attribute, with possible values of NONE (default), LEFT, RIGHT, and ALL, enables you to skip down past floating images at the left or right margins. On most browsers, including Netscape and Internet Explorer, multiple consecutive <BR> tags result in extra blank lines (unlike consecutive empty <P> tags).
| HTML Element: | <NOBR> ... </NOBR> |
| Attributes: | None |
The NOBR element is not part of HTML 4.0 but is supported by Netscape and Internet Explorer. NOBR suppresses word-wrapping for the enclosed text, except possibly at places indicated by WBR. The same effect can be obtained in standard HTML 4.0 by use of nonbreaking spaces ( ) between each word in the region of interest.
| HTML Element: | <WBR> (No End Tag) |
| Attributes: | None |
The WBR element, which should be used only inside a NOBR element, indicates that a line break can be placed at the tag if necessary. WBR is not part of HTML 4.0 but is typically supported by browsers that support NOBR.
3.8 Summary
Text-level elements let you specify character styles, line breaks, and hypertext links in paragraphs in a Web page. You can also embed images, either purely as static graphics, as a hypertext link, or with multiple hypertext links associated with different regions of the image. Finally, depending on your browser, you can embed Java applets, audio, video, Adobe Acrobat files, VRML, or ActiveX components.
The following two chapters build on this material, adding considerable functionality and control to a document. In Chapter 4 we look at frames, a capability that enables you to divide the Web page into rectangular regions and load a separate HTML document in each region. In Chapter 5 we discuss cascading style sheets, which give you much more control over the fonts, indentation, and style used for the various block-level and text-level elements.
| CONTENTS | |
EAN: 2147483647
Pages: 31