6.3 The Main BODY of the HTML Document
6.3 The Main BODY of the HTML Document
The document that you see in a web browser or on a mobile telephone is formatted by the elements in the <body>. The BODY element contains several attributes and is never empty if you want something to display. Some of these elements have been deprecated (are no longer used) but are listed for reference.
|
background |
An image resource or path to an image to be displayed behind all other items on the page. The image will be displayed with a tiling effect. It will first appear in the upper-left corner and repeat down and to the right. If you make the image sufficiently wide, this effect will not be shown unless the user scrolls past the first repeat. It is also possible to create a small image with repeating patterns that appear to be one big graphic. This attribute has been deprecated for use with XHTML and XML, so use stylesheets to specify a background image. |
|
bgcolor |
The background color of the body of the web page. By default, the browser may display white or gray if no background color is specified in this element. This attribute is a solid color and does not have the tiling effect of background. Both attributes may be used, but the background may completely obscure a bgcolor. It may still be useful if an image cannot be found. While not deprecated, this attribute may also be specified in a stylesheet. |
|
text |
The color of the text on the page, also called the foreground color. If you use a bgcolor of black, you would specify white or another light color for the text, for example. This attribute is also deprecated and often specified in a stylesheet. The default foreground color or the text of the page is black if you do not specify one. |
|
link |
Hypertext links have a default of blue underline if you place them in a web page. Once they have been selected and visited, they change color. Your browser can override the defaults, or you can specify the color (or none) by using this deprecated attribute. vlink is the color of visited links and alink is the color of the selected links. These attributes can work together or separately with link, and all have been deprecated. |
Other attributes for <body> are id (must be unique in any document), class, lang, title, style, onload, onunload, onclick, ondblclick, onmousedown, onmouseover, onmouseup, onmousemove, onmouseout, onkeypress, onkeydown, and onkeyup. The most common attribute is the onload attribute. As the document loads into the window of the browser, the <body> element can perform a script. An example usage for preloading images for animation effects is shown in the code below. This is calling the script preloadImageJS for the two images next.gif and prev.gif including the relative path to these images.
<body onload="preloadImageJS('images/nav/next.gif','images/nav/prev.gif')">
The <body> element contains the elements that compose the page. These are text, tables, lists, blocks, anchors, images, objects, and forms. Each of these elements will be described in this chapter.
6.31 Text
Text is not specifically an element by name, but the text of the document can be contained in other elements. Some of these elements are methods of formatting the text within the <body> of the document. The <body> element is an HTML element that can contain content and other elements. It is perfectly legal to have a document of all text, although your results may not be as you intended, such as in the following example.
<body> Here is the text of this document. Even though there are returns between the lines, the browser will render only the text and ignore the extra white space. The blank line above, for example, will not display as a blank line. Only the width of the window may make the text wrap and appear as separate lines. </body>
Here is the text of this document: Even though there are returns between the lines, the browser will render only the text and ignore the extra white space. The blank line above, for example, will not display as a blank line. Only the width of the window may make the text wrap and appear as separate lines.
To display the text as we intended, we can use the block element <div> and the inline element <span> to group the text. An advantage of doing this is to later apply stylesheets to these groups. Use the id and class attributes to identify these elements within the document. Examples of these elements are shown in Listing 6.2. Typically, <div> will be used where a line break would occur, although it does not provide the means to insert a break character.
Other attributes for <div> and <span> are lang, dir, title, style (for specific style of this element), align (left, right, or center), onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, and onkeyup.
The align attribute has been deprecated in favor of assigning this with a stylesheet rather than within the element. However, it is common to still include this attribute. The default alignment of text within any element is to the left. If you do not specify align or choose align="right" or align="center", the text will display starting on the left. Keep in mind the use of the lang and dir attributes along with this attribute. The language and direction (RTL, or right to left) will not be changed but the text margin will be on the left by default.
 |
<body> <div id="1"> <span id="3"> Here is the text of this document. </span> <span id="4"> Even though there are returns between the lines, the browser will render only the text and ignore the extra white space. </span> </div> <br /> <br /> <div id="2"> <span id="5"> The blank line above, for example, will not display as a blank line. Only the width of the window may make the text wrap and appear as separate lines. </span> </div> </body>
|
Separating this text into divisions and spans only improves the look if you include the linebreak (<br />). But with the unique id attribute for each element, you can change the look of the text by applying fonts, colors, and text sizes to each ID. External stylesheets can apply different font values for each ID, depending on the device that will be displaying the text.
The linebreak is always an empty element in XHMTL and is used to force the browser to insert a return. This linebreak character is the carriage return, linefeed, or a combination of carriage return and linefeed, depending upon the platform displaying the text. The BR character does not insert a blank line but returns to the default left margin of the text. This element can contain the attributes id, class, title, style, and clear. The clear attribute can be used to assure that text flowing around another object begins again after the object is completely rendered.
Text can also be grouped with the paragraph element, <p>, which is never an empty element. How the text content in a paragraph is rendered in the browsers may be variable, but the paragraph element typically provides a blank line after the text. Sometimes the <p> element is used to align the text to the left, right, or center. Rather than the <p> element, use the <div> and <span> elements to group your text and rely upon stylesheets to format the text.
To visually separate text or other objects, the element <hr> (horizontal rule) is used. The attributes for <hr> that have been deprecated in favor of using stylesheet controls are align, noshade, size (height in pixels or percent), and width (in pixels or percent). The standard way the <hr> is rendered is a two-tone line. If the attribute noshade is set, the <hr> is rendered as a solid color. The other attributes of the horizontal rule element are id, class, lang, dir, title, style, onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, and onkeyup.
Specialized types of text are headings, addresses, quotations, structured text, and preformatted text and are described below.
Headings
The <hx> element can display differently in various browsers but always includes a new line after the heading. The original purpose of headings was to emphasize more important sections of a document. There are six values for the "x" and this element is never empty. The attributes of <hx> are id, class, lang, dir, title, style, align, onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, and onkeyup. Search engines may use these elements to outline your document. The lowest number in the <hx> element is for the most important topics of the document. The example code below displays in Internet Explorer 5.0, Macintosh as in Figure 6.1:
<body> <h1>Chapter 1</h1> <h2>Sub-Chapter</h2> <h3>Topic</h3> <h4>Sub-Topic</h4> <h5>Extra Information</h5> <h6>Final Heading Type</h6> </body>
Figure 6.1: Head elements in a browser
Addresses
The <address> element is a convenient place to list contact information. This may be rendered as italic or emphasis font in the web browser. The <address> element may also be used by the search engines and should be used for specific and consistent information about the owner or host of the web site. The attributes for <address> are id, class, lang, dir, title, style, align, onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, and onkeyup. An example of the <address> element is provided below.
<address> Your Name<br /> Your Company<br /> yourwebsite.com </address>
Quotations
Double quotes (") and single quotes or apostrophes (’) are used in the HTML, XHTML, and XML markup. To specify a section of text as a quotation, two special elements, <blockquote> and <q>, are used rather than displaying the text with the quote characters. Longer quotations are displayed using <blockquote> and may be rendered as indented text on the left and right margins. Shorter quotes displayed with <q> may be rendered with quote marks automatically by the browser and may be nested for quotes within quotes. If you wish to indicate these quote characters specifically, use the entities " (") and ' ('), but do not use them in the <blockquote> or <q> contents.
An example of <blockquote> and <q> is shown in Listing 6.3. These two elements are never empty and may have attributes. A special attribute of <blockquote> or <q>, cite, is used to specify the source of the document as a URI. These elements have the attributes id, class, lang, dir, title, style, onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, and onkeyup.
|
<body> Quotations: <blockquote> Now is the winter of our discontent. All good boys do fine. One potato, two potato, three potato, four. </blockquote> <q> Now is the winter of our discontent. </q> </body>
|
The above displays as:
Now is the winter of our discontent. All good boys do fine. One
potato, two potato, three potato, four.
"Now is the winter of our discontent."
Structured Text
Although a goal of XML and HTML is to separate the formatting from the text of the document, some structure can be applied to text to make it stand out in the document. The use of structured text can also give the document standards, which can be used to search for key words or phrases in the document. Listing 6.4 shows the code for EM, STRONG, DFN, CODE, SAMP, KBD, VAR, CITE, ABBR, ACRONYM, SUB, and SUP. The rendering of these format elements may be different in various browsers and may be ignored in hand-held devices. Carefully consider the result if these elements are nested within each other or with other elements. A subscript and superscript structure should never be used for the same text, for example. The structure elements are never empty and may contain attributes.
|
<em>For emphasis</em>
<strong>Stronger emphasis</strong>
<dfn>defining instance of the enclosed term</dfn>
<code>fragment of computer code</code>
<samp>sample output</samp>
<kbd>text to be entered from the keyboard by the user</kbd>
<var>variable or program argument</var>
<cite>citation or reference</cite>
<abbr>abbreviation</abbr>
<acronym>acronym</acronym>
subscript: H<sub>2</sub>O is the chemical abbreviation for water
superscript: the Area of a circle can be found with π<sup>2</sup>
|
The attributes of these elements are id, class, lang, dir, title, style, onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, and onkeyup.
The following structured text elements have been deprecated as style attributes, and stylesheets should be used to replace them.
<b>bold</b> <i>italic</i> <u>underline</u>
Preformatted Text
Another way to present text that keeps the white space for multiple spaces and returns is to use the <pre> element. The width attribute has been deprecated, but it was used to maintain a length in characters of the preformatted text. This attribute should no longer be used. The rendering of the text in this element may be monospaced font to keep the spacing the same for each letter. In this way, a simple table can be displayed with white space padding between the columns. This element also has the attributes id, class, lang, dir, title, style, onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, and onkeyup. While other elements can be within the <pre> element, it should not contain other <pre> elements, or <img> (images), <object>, <sub>, or <sup> elements. The following listing shows a sample of this type of text.
|
<pre>Now is the winter of our discontent. All good boys do fine. One potato, two potato, three potato, four. </pre>
|
This displays as:
Now is the winter of our discontent. All good boys do fine. One potato, two potato, three potato, four.
The PRE element is rarely used. Tables and stylesheets are more often used to place the text in precise locations.
6.32 Listed Items in HTML
An outline can be included in HTML and XHTML by using list elements. There are unordered lists or bulleted lists (<ul>), ordered lists or numbered lists (<ol>), and definition lists (<dl>). Two other list types, <menu> and <dir> (directory), have been deprecated.
The unordered list <ul> displays, by default, the bullet or disc before every list item (<li>). The type attribute for <ul> could previously specify disc, square, or circle. This attribute has been deprecated in favor of using stylesheets. Unordered lists can be nested as seen in Listing 6.6 and Figure 6.2.
|
<ul>
<li>item one</li>
<li>item two
<ul>
<li>sub-item one</li>
<li>sub-item two</li>
</ul>
</li>
<li>item three</li>
</ul>
|
Figure 6.2: Unordered lists
Ordered lists are similar to an outline document and can have the type attributes "1" (numeric), "a" (lowercase alphabet), "A" (uppercase alphabet), "i" (small Roman numeral), and "I" (large Roman numeral). The type attribute for ordered lists has also been deprecated. Listing 6.7 shows the code of a numbered list and an outline, which are shown in Figure 6.3. If ordered lists are nested, each level may indent when rendered.
|
<div>Ordered Lists
<ol type="1">
<li>line one</li>
<li>line two</li>
<li>line three</li>
</ol>
</div>
<div>Outline
<ol type="I">
<li>Part one
<ol type="A">
<li>Section one</li>
<li>Section two
<ol type="a">
<li>subsection one</li>
<li>subsection two</li>
</ol>
</li>
</ol>
</li>
<li>Part two</li>
</ol>
</div>
|
Figure 6.3: Ordered lists
Definition lists (<dl>) use the elements <dt> (definition term) and <dd> (definition). This kind of list might be used to display a glossary of terms. The code for a definition list and the result is shown in Listing 6.8.
|
<div>Glossary
<dl>
<dt>HTML</dt>
<dd>Hypertext Markup Language</dd>
<dt>XHTML</dt>
<dd>Extensible Hypertext Markup Language</dd>
<dt>XML</dt>
<dd>Extensible Markup Language</dd>
</dl>
</div>
|
Figure 6.4
Unordered lists, ordered lists, and definition lists may have the attributes id, class, lang, dir, title, style, onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, and onkeyup.
6.33 Presentation of the Web Page with the TABLE Element
The <table> element is often used to place text and images within rows and columns. The table has greater flexibility than using the <pre> element. The <table> has the elements <caption> (title for the table), <tr> (table row), and <td> (table definition or cell). The rows can be grouped with the elements <thead> (table header), <tfoot> (table footer), and <tbody> (main table rows). The columns of the table can be grouped with the elements <colgroup> and <col>. A simple table is shown in Listing 6.9 and Figure 6.5.
|
<body>
<table summary="This is the test table">
<caption>Test Table</caption>
<tr>
<td>_Row_1_Cell_1_</td>
<td>_Row_1_Cell_2_</td>
</tr>
<tr>
<td>_Row_2_Cell_1_</td>
<td>_Row_2_Cell_2_</td>
</tr>
<tr>
<td>_Row_3_Cell_1_</td>
<td>_Row_3_Cell_2_</td>
</tr>
</table>
</body>
|
Figure 6.5: Simple table in a browser
You should not attempt to simulate desktop publishing by using tables to place objects in a browser window. Stylesheet commands, which set the position of objects, may be better suited for this and give more control.
The document "Request For Comment (RFC) 1942," found at http://www.faqs.org/rfcs/rfc1942.html, states, "The (table) model is designed to work well with associated style sheets but does not require them. It also supports rendering to Braille, or speech, and exchange of tabular data with databases and spreadsheets." The latest version of the HTML 4.01 specification, http://www.w3.org/TR/html401, "11.1 Introduction to tables," states, "The HTML table model allows authors to arrange data—text, preformatted text, images, links, forms, form fields, other tables, etc.—into rows and columns of cells." The <table> element and its associated subelements are designed to group information for display on various devices. Depending upon the complexity of the table, such as a table within a table, the result may or may not be desirable. Great caution should be taken to test the results on the devices that will be displaying these tables.
Some browsers will wait until a table is fully loaded from the server before drawing it on the web page. Large and complex tables may take much longer to render. Group the design of a web page into smaller tables rather than complex nested tables.
TABLE Attributes
The summary attribute describes the table. Screen readers or Braille readers may use this attribute to explain the structure of the table. The summary is not a required attribute for the TABLE element.
The outline of the table is set by the border attribute. This attribute previously was always on by default and 1 pixel wide, unless you specified <table border="0">. Current specifications add frame and rules attributes to work with the border size. The frame is the outside border and the rules are the borders between rows and cells. External or internal stylesheets can control the <table> attributes, rather than including the styles in the element. In some browsers, the border color can be controlled.
The frame attribute may contain one of these values:
|
void |
The border has no sides and is the default value. |
|
above |
Only the top of the border is rendered. |
|
below |
The bottom side only is rendered. |
|
hsides |
The top and bottom border sides are rendered. |
|
vsides |
The right and left sides are rendered. |
|
lhs |
The left-hand border is rendered. |
|
rhs |
The right-hand border is rendered. |
|
box |
All four sides are rendered, same as frame="border". |
|
border |
All four sides are rendered. |
The rules attribute may contain one of these values:
|
none |
No rules. This is the default value. |
|
groups |
Rules will appear between row groups. |
|
rows |
Rules will appear between rows only. |
|
cols |
Rules will appear between columns only. |
|
all |
Rules will appear between all rows and columns. |
The element and its default attributes, <table border="0" frame= "void" rules="none">, will produce a table with no border around the items in the table. This may be the most flexible for various devices. The value "0" for border implies that there is no frame or rules, so these values need not be specified. A border of 1 or more pixels assumes that frame="border" and rules="all" unless otherwise specified.
The width attribute may have the value in pixels or a percentage. Using precise pixels does not allow the table to adjust for a variety of screen resolutions but may be desirable when placing text and graphics in precise locations on the screen. When you use percentage rather than pixels, the table will adjust to the viewer's choice of width and font preferences. The instruction <table width="50%"> will be drawn half the width of the screen. Do not mix pixels and percentages, as some browsers do not render the table width properly.
To save the viewer from scrolling to see the full table, consider designing a maximum width of 540 pixels. If the screen resolution is 72 pixels per inch, 540 pixels equates to 7½ inches. On a web page designed for printing or viewing at 640x480 screen size, 540 pixels is the best width for the table. If, however, you are reasonably sure that your viewers have monitors set to 800 or greater screen widths, you may safely design a table at a greater pixel width.
The align attribute has been deprecated if you are using strict XHTML but may be used to allow the flow of text around the <table> object. The values for align are "left", "right", and "center". Text will flow around the <table> only with the "left" or "right" alignment. These values can also be set with a stylesheet. An example of this is shown in Listing 6.10 and Figure 6.6.
|
<table border="1" align="right" width="200">
<tr>
<td>_Row_1_Cell_1_</td>
<td>_Row_1_Cell_2_</td>
</tr>
<tr>
<td>_Row_3_Cell_1_</td>
<td>_Row_3_Cell_2_</td>
</tr>
<tr>
<td>_Row_3_Cell_1_</td>
<td>_Row_3_Cell_2_</td>
</tr>
</table>The element and its default attributes, <table border="0"
frame="void" rules="none">, will produce a table with no border around
the items in the table. This may be the most flexible for various devices.
The value "0" for border implies that there is no frame or rules, so these
values need not be specified. A border of 1 or more pixel assumes that
frame=border and rules=all, unless otherwise specified.
|
Figure 6.6: Text flowing around a table in a browser
Two more <table> attributes, cellpadding and cellspacing, are independent of the table border attributes. The values can be specified in pixels or a percentage. The cellpadding places white space around all sides of the contents of all cells in the tables. This keeps text, for example, away from the sides of the cell. Cellspacing is the width of the border around each cell or between cells. These values are considered when rendering a fixed-width table. If cellpadding and cellspacing are not specified, the browser may assign a default. Include these attributes and values if you want to control how the table is rendered in the browser.
The attribute bgcolor (color of the table borders, rows, and cells) can be assigned with a stylesheet or included in the table definition. If individual colors are assigned to rows or cells, these will override the background color of the table. The border color may be determined by the table bgcolor. You can set the table bgcolor to one value and each cell bgcolor to another value. Tables can also have the attributes id, class, lang, dir, title, style, onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, and onkeyup.
TABLE Rows
The attributes for the table row (<tr>) will be used for the table cells (<td>) unless specified for each cell. The attributes for <tr> are bgcolor, align, char, charoff, valign, id, class, lang, dir, title, style, onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, and onkeyup. Rows can be grouped with the elements <thead>, <tfoot>, and <tbody>. The HTML 4.01 specification describes these grouping elements as the ability to scroll the "table bodies independently of the table head and foot." This would also add the head and foot information to long tables that need to be printed on multiple pages. Tables using these group elements can have multiple <tbody> elements, but they are listed after <thead> and <tfoot>. An example table is shown in Listing 6.11 and Figure 6.7. The display of the <tbody> is between the <thead> and <tfoot>, even though the code lists the TBODY element after the THEAD and TFOOT elements.
|
<table border="1">
<caption>Table with header and footer </caption>
<thead>
<tr>
<th>column one </th>
<th>column two </th>
</tr>
</thead>
<tfoot>
<tr>
<td>end one </td>
<td>end two </td>
</tr>
</tfoot>
<tbody>
<tr>
<td>_Row_1_Cell_1_ </td>
<td>_Row_1_Cell_2_ </td>
</tr>
<tr>
<td>_Row_2_Cell_1_ </td>
<td>_Row_2_Cell_2_ </td>
</tr>
</tbody>
</table>
|
Figure 6.7: Table headers and footers in a browser
The Table Cell
Text or graphics are contained in table cells. A special table cell, <th>, can be used to specify a heading label. The <th> can be used for column labels or row labels. While not a requirement for tables, the <th> element can be used to distinguish it from the normal table cell. By default, the browser may render the <th> as centered and bolded text. Stylesheets can be used to override the default settings.
The <td> has one of two special attributes, rowspan and colspan, that are used to allow the text or images to be rendered over more than one cell without the borders between these cells. An example table with rows and columns spanning is shown in Listing 6.12 and Figure 6.8. A table cell with rowspan="2" will be drawn the depth of two cells. A table cell with colspan="2" will be drawn with the width of two cells. With the careful use of both of these attributes, you can display your web contents in unique ways.
|
<table border="1">
<tr>
<td rowspan="2">_Row_1_Cell_1_</td>
<td rowspan="2"></td>
<td colspan="3">_Row_1_Cell_3_</td>
</tr>
<tr>
<td colspan="3">_Row_2_Cell_3_</td>
</tr>
<tr>
<td>_Row_3_Cell_1_</td>
<td>_Row_3_Cell_2_</td>
<td>_Row_3_Cell_3_</td>
<td>_Row_3_Cell_4_</td>
<td>_Row_3_Cell_5_</td>
</tr>
<tr>
<td>_Row_4_Cell_1_</td>
<td>_Row_4_Cell_2_</td>
<td>_Row_4_Cell_3_</td>
<td>_Row_4_Cell_4_</td>
<td>_Row_4_Cell_5_</td>
</tr>
</table>
|
Figure 6.8: Table row and cell span in a browser
The attributes nowrap, width, and height have been deprecated from the <td> and <th> elements. If these are not specified, the table can be rendered more loosely. They can be set by stylesheet if necessary. The attributes align and valign (vertically align) are used to place the cell contents within the cell. The attribute align can have the values "left", "right", "center", "justify", or "char". The values for the attribute valign are "top", "middle", "bottom", or "baseline". The text of a cell can be further defined by using the char attribute. When char="." is used with align="char", the text is aligned on the decimal point of numbers. The <td> attribute charoff is the offset (in pixels) for the first text character in the cell. This attribute is a handy way to display an indented paragraph. The alignment may render differently in your browser. Other attributes for the <td> element are bgcolor, id, class, lang, dir, title, style, onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, and onkeyup.
Table Within a Table
The table within a table can further refine the alignment of elements on the web page. Although Cascading Style Sheets could also be used for precise placement of elements, the table can use stylesheet commands to change the look of the original document. An example of a nested table, or table within a table, is shown in Listing 6.13 and Figure 6.9. Use the table within the table carefully and remember that the display of any table on a smaller device, such as the mobile phone, may be prohibitive. A stylesheet can accommodate the difference in displays by changing the table structure.
|
<table border="1">
<tr>
<td>
<table border="1">
<tr>
<td>_Row_1_Cell_1_</td>
<td>_Row_1_Cell_2_</td>
</tr>
<tr>
<td>_Row_2_Cell_1_</td>
<td>_Row_2_Cell_2_</td>
</tr>
<tr>
<td>_Row_3_Cell_1_</td>
<td>_Row_3_Cell_2_</td>
</tr>
</table>
</td>
<td>_Row_1_Cell_2_</td>
<td>_Row_1_Cell_3_</td>
</tr>
<tr>
<td>_Row_2_Cell_1_</td>
<td>_Row_2_Cell_2_</td>
<td>_Row_2_Cell_3_</td>
</tr>
</table>
|
Figure 6.9: Nested tables in a browser
6.34 Hyperlinks and Anchors
Web pages are highly distinguishable from other text documents with the addition of hyperlinks. Navigating from page to page puts the control into the hands of the user. Any page can be connected to multiple other pages. The CGI requests to Web Companion can be hyperlinks. The requests can return precise results or variable results controlled by the user.
The standard hyperlink uses the anchor element <a>. The primary attribute for the <a> element is the href, or hyperlink reference, with the value being the location of the linked document. The anchor element may, alternatively, have a name attribute. This name is an anchor to a location on the current page. Hyperlinks can use the anchor to navigate to a precise location on a page. The location is a fragment of the page. Examples of anchors and hyperlinks are shown in Listing 6.14. Even if the anchor element is empty, as when it uses the name attribute, it uses the start tag and end tag.
|
<a name="placeholder1"></a> <!-- some content here --> <!-- a link to this anchor will jump here --> <a name="placeholder2"></a> <!-- Web Companion request as a hyperlink --> <a href="fmpro?-db=myfile.fp5&-lay=web&-format=-fmp_xml&id=123&-find>FIND 123</a> <!-- more page content --> <div> This is a link to the first <a href="#placeholder1">anchor</a> on this page.<br /> This is a link to <a href="page2#placeholder3">another page</a> and anchor. </div> <!-- a link to a larger image from a thumbnail --> <a href="bigImage.jpeg"><img src="smallImage.jpeg" border="2" /></a>
|
The hyperlink can have other attributes, such as title, charset, lang, dir, type, rel, rev, shape, coords, tabindex, accesskey, id, class, target, style, onfocus, onblur, onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, and onkeyup. The most common attribute for the <a> element may be the onclick call to a scripted event. An anchor element that uses the onclick attribute may not go to another location but may perform an action that loads another image. The next section defines the attributes that are used to perform an action.
Images can be hyperlinks by including the <a> element around the <img> element. By default, a border may appear around the hyperlinked image unless you specify the border value to be "0". The last line of Listing 6.14 shows a hyperlink around a small image. The link will display the larger image on a new page. A single image may have multiple hyperlinks by specifying a shape and the coordinates of the <area> element of the <map> element. See "Image Maps" in section 6.35.
Attributes for Script Calls
Links and anchors often have attributes with JavaScript or other event calls. But most objects on a web page can use these events. Read the full specifications for each object to see what attributes may be used. The following script attributes are defined in section 18.2.3 of the "HTML 4.01 Specification," http://www.w3.org/TR/html401. These events may be handled with JavaScript or other scripts, including Cascading Style Sheet changes.
|
onload |
The onload event occurs when the user agent finishes loading a window or all frames within a FRAMESET. This attribute may be used with BODY and FRAMESET elements. |
|
onunload |
The onunload event occurs when the user agent removes a document from a window or frame. This attribute may be used with BODY and FRAMESET elements. |
|
onclick |
The onclick event occurs when the pointing device button is clicked over an element. This attribute may be used with most elements. |
|
ondblclick |
The ondblclick event occurs when the pointing device button is double-clicked over an element. This attribute may be used with most elements. |
|
onmousedown |
The onmousedown event occurs when the pointing device button is pressed over an element. This attribute may be used with most elements. |
|
onmouseup |
The onmouseup event occurs when the pointing device button is released over an element. This attribute may be used with most elements. |
|
onmouseover |
The onmouseover event occurs when the pointing device is moved onto an element. This attribute may be used with most elements. |
|
onmousemove |
The onmousemove event occurs when the pointing device is moved while it is over an element. This attribute may be used with most elements. |
|
onmouseout |
The onmouseout event occurs when the pointing device is moved away from an element. This attribute may be used with most elements. |
|
onfocus |
The onfocus event occurs when an element receives focus either by the pointing device or by tabbing navigation. This attribute may be used with the following elements: A, AREA, LABEL, INPUT, SELECT, TEXTAREA, and BUTTON. |
|
onblur |
The onblur event occurs when an element loses focus either by the pointing device or by tabbing navigation. It may be used with the same elements as onfocus. |
|
onkeypress |
The onkeypress event occurs when a key is pressed and released over an element. This attribute may be used with most elements. |
|
onkeydown |
The onkeydown event occurs when a key is pressed down over an element. This attribute may be used with most elements. |
|
onkeyup |
The onkeyup event occurs when a key is released over an element. This attribute may be used with most elements. |
|
onsubmit |
The onsubmit event occurs when a form is submitted. It only applies to the FORM element. |
|
onreset |
The onreset event occurs when a form is reset. It only applies to the FORM element. |
|
onselect |
The onselect event occurs when a user selects some text in a text field. This attribute may be used with the INPUT and TEXTAREA elements. |
|
onchange |
The onchange event occurs when a control loses the input focus and its value has been modified since gaining focus. This attribute applies to the following elements: INPUT, SELECT, and TEXTAREA. |
6.35 Images and Objects
Objects are the images, sounds, and applets that previously were included as separate elements in the HTML page. Images can be single graphic elements or image maps with multiple "hot spots" to be processed for further actions. Both the <img> element and <object> element can be used to display these graphic elements. Smaller devices may not render images and objects.
The <img> (image) element is always empty (no content) and has one required attribute, src. This src attribute is the location or source of the image. The image can be various file types, but common images shown on the web are .gif (Graphics Interchange Format), .jpeg or .jpg (Joint Photographic Experts Group), and .png (Portable Network Graphics). The source of this image can be the full absolute path to the image located on any server or the partial relative path to the image from the page on which it will be displayed.
Use the .gif format for images that have large sections of a single color, and use the .jpeg format for images that have a larger range of colors. Both formats use a compression algorithm, which allows the images to be displayed quickly in a web browser.
The alt attribute is beneficial for text-only browsers and screen readers, as the text of this attribute is displayed or spoken when an image cannot be viewed or displayed on the web page. The text of the alt attribute should be helpful in describing any missing image, as well. Well-formed XHTML documents use the alt attribute in the <img> element.
If a small clear image is used for padding space, alt= (single space) is often used. For bullet images, alt="∗" is often used.
Another attribute for the <img> element is border, which is shown if border is specified or image is a hypertext link. The attribute longdesc is the location of a fuller description of the image than should be specified by the alt attribute. The name attribute may be used for scripting. The attributes id and class may be used in stylesheets to specify some of the values that previously were attributes. The deprecated attributes for the <img> element are width and height (size of the image), align (placement of image in relationship to any text that may flow around it), and hspace and vspace (the pixels or percentage of white space around the image). Some of these attributes are used in the code below:
<img src="butterfly.gif" border="0" alt="Monarch Butterfly" width="30 height="58" align="center" /> <img id="234" name="btrfly1" src="http://www.mysite.com/images/ butterfly.gif" alt="Monarch Butterfly" />
Additional attributes for the <img> element are lang, dir, title, and style. Images can use the script calls onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, and onkeyup. Two more attributes for the image element are usemap, for classifying the image as a client-side image map, and ismap, for classifying the image as a server-side image map. The Web Companion server is not designed to process server-side image maps, so the client-side image map example is used in this chapter.
Image Maps
A single image can contain multiple hyperlinks by specifying the shape and coordinates in an image map. The server-side image map u
