6.4 Deprecated HTML Elements
|
|
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.
Listing 6.2: Grouping text
 |
<body> <div > <span > Here is the text of this document. </span> <span > 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 > <span > 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.
Listing 6.3: Quotations in the HTML document
|
<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.
Listing 6.4: Structured text elements
|
<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.
Listing 6.5: Preformatted text code and result
|
<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.
Listing 6.6: Unordered list
|
<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.
Listing 6.7: Ordered lists
|
<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.
Listing 6.8: Definition lists
|
<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.
Listing 6.9: Simple table
|
<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.
Listing 6.10: Text flow around a table
|
<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.
Listing 6.11: Table with header and footer
|
<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.
Listing 6.12: Table rows and columns with span
|
<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.
Listing 6.13: Nested tables
|
<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.
Listing 6.14: Anchor element
|
<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="/books/3/422/1/html/2/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="/books/3/422/1/html/2/butterfly.gif" border="0" alt="Monarch Butterfly" width="30 height="58" align="center" /> <img name="btrfly1" src="/books/3/422/1/html/2/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 uses different elements and attributes and requires a server that can process the map. The browsers can render client-side image maps.
The <img> attribute usemap has the same value as the name of the <map> element. The image map is the name of the map and a list of the coordinates for the shapes rectangle, circle, and polygon (many-sided shape). A single graphic can be mapped with these coordinates and actions assigned to each defined shape. The <map> element contains the <area> elements, which define the shapes and can be located anywhere on the web page. A "default" shape is used to cover any of the image coordinates that are not specified by other shapes.
The rectangle shape is defined with these four coordinates: left, top, right, and bottom ("x1", "y1", "x2", "y2"). The center point of the shape and the radius size defines the circle: "cx", "cy", "cr". The polygon is composed of multiple pairs of "x" and "y" coordinates. The first set of coordinates and the last set are the same coordinates to close the polygon. A rectangle could also be defined with these four coordinates: x1, y1, x2, y2, x3, y3, and x4, y4 and back to starting point: x1, y1. An example image with its associated map is listed here.
<img src="/books/3/422/1/html/2/stateMap.gif" alt="State Map" usemap="mystate" /> <map name="mystate"> <area shape="default" /> <area shape="rect" coords="10, 15, 50, 82" href="ourTown.html"/> <area shape="circle" coords="100, 100, 22" href="theCapital.html"/> <!-- this is a triangle --> <area shape="poly" coords="120, 40, 160, 200, 80, 160, 120, 40" onmouseover="javascript:blink()" /> </map>
Each of the <area> elements can have these additional attributes: alt (text to be displayed for the shape), tabindex (the number of the <area> in the tab order for the page), accesskey, onfocus, and onblur.
Objects
The image can also be displayed with the <object> element. This element is more flexible for including images, sounds, and applets. Examples of the OBJECT element are shown in Listing 6.15. You can read more about HTML objects in section 13 of the "HTML 4.01 Specification," http://www.w3.org/TR/1999/REC-html401-19991224.
Listing 6.15: Image and object examples
|
<img src="/books/3/422/1/html/2/butterfly.gif" border="0" alt="Monarch Butterfly" width="30 height="58" align="center" /> <!-- as an object: --> <object class> <param name="width" value="30" valuetype="data" /> <param name="height" value="58" valuetype="data" /> <param name="border" value="0" valuetype="data" /> Monarch Butterfly </object> <object codetype="application/java" class width="400" height="200"> Java applet to display an animation. </object>
|
6.36 FRAME Your Web Pages
Frames in web pages are often misunderstood, misused, and sometimes a blessing in disguise. All web pages are displayed in a window. The <frameset> and <frame> elements can be used to divide a window into subsections. If the <frameset> is used in a web page, the <body> element is redundant and not needed in the page. When the window and each frame are given a name attribute, that name can be used with the target attribute in hyperlinks and form submissions. Listing 6.16 shows example target attributes.
Four target values can be used instead of a frame or window name. The "_top" value sends the new page to the current window and removes all frames. The "_self" value for the target attribute will send the page to the frame in which the <a> or <form> is displayed. The "_blank" target value will open a new window and display the new page there without closing the current window. When frames are inside other frames, as you will see shortly, the "_parent" value for the target will display the new page in the frame or window that is the parent of the current frame. Window or frame names are used in the target requests listed below.
Listing 6.16: Target attributes
|
<a href="newpage.html" target="_top">New Page</a> <a href="frametop.htm" target="header">Change the Header</a> <a href="fmpro?-db=thisTest.fp5&-lay=web&-format=-fmp_xml&-findany" target="ListView">Find Random</a> <a href="miniPage.htm" target="_blank">Quick Mini Page</a> <form action="fmpro" method="post" target="Main"> <!-- additional information here --> <input type="hidden" name="-db" value="thisTest.fp5" /> <input type="hidden" name="-lay" value="web" /> <input type="hidden" name="-format" value="-fmp_xml" /> <input type="hidden" name="-findany" value="" /> <input type="submit" name="-findany" value="Find Random" /> </form>
|
Set up a window for subdivision by defining a <frameset>. A <frameset> can be composed of multiple rows or columns, and a <frameset> can be inside another <frameset>. The rows or cols attributes are a comma-separated list with the pixel width or percent of the space for each frame. If the width of a defined row or column is the wildcard character (∗), the frameset divides the remaining space. A frameset with percent values will adjust to the size of the space as the window is resized manually. Other attributes for <frameset> and <frame> elements are id, class, style, onload, and onunload.
After the <frameset> is declared, an empty <frame> element is defined for each row or column in the <frameset>. Other pages use the name attribute for the <frame> element wherever a reference to a target is used. The src attribute is the page or image or other element to be displayed in the FRAME and may be empty. A frame width or height can be resized by the user unless you specify the attribute noresize="noresize". By default a <frame> will have a border, but you can remove it with the attribute frameborder="0". The scrolling attribute can have the values "auto" to add a scroll bar automatically if needed, "no" to prevent a scroll bar at the side or bottom from being added, or "yes" to implicitly render a scroll bar. The <frame> may be rendered away from the left and top margins of the window. Use the attributes marginwidth="0" and marginheight="0" to place the frame to the left, right, top, and bottom of the window or the next <frame>.
The following examples in Listings 6.17, 6.18, and 6.19 show simple <frameset> and <frame> definitions. A more complex example in Listing 6.20, frame.htm, uses multiple frames but references pages containing framesets. The more complex example allows greater flexibility for replacing the contents of frames.
Listing 6.17: Frameset with rows
|
<frameset rows="100,*,100"> <frame src="/books/3/422/1/html/2/top.gif" name="header" frameborder="0" scrolling="no" noresize="noresize" /> <frame src="/books/3/422/1/html/2/mainpage.html" name="main" /> <frame src="/books/3/422/1/html/2/bottom.gif" name="footer" frameborder="0" scrolling="no" noresize="noresize" /> </frameset>
|
Listing 6.18: Frameset with columns
|
<frameset cols="100,*,100"> <frame src="/books/3/422/1/html/2/left.html" name="menu" frameborder="0" scrolling="yes" noresize="noresize" /> <frame src="/books/3/422/1/html/2/mainpage.html" name="main" /> <frame src="/books/3/422/1/html/2/" name="ads" frameborder="0" scrolling="yes" noresize="noresize" /> </frameset>
|
Listing 6.19: Framesets with rows and columns
|
<frameset cols="100,∗"> <frame src="/books/3/422/1/html/2/left.html" name="menu" frameborder="0" scrolling="yes" noresize="noresize" /> <frameset rows="100,∗"> <frame src="/books/3/422/1/html/2/top.gif" name="header" frameborder="0" scrolling="no" noresize="noresize" /> <frame src="/books/3/422/1/html/2/mainpage.html" name="main" /> </frameset> </frameset>
|
If the browser is very old, a <noframes> element may be used to display alternate content in the page. The transitional and frameset DTDs will support the <noframes> element. This element is never empty if it is used and may contain the attributes id, class, lang, dir, title, style, onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, and onkeyup.
Frames can be used to hide any links followed from a page. The <title> from the first frameset is used as the title in the browser. The location field in the browser will contain the original link instead of the links to each additional page within the FRAMESET. Each page within a frame can be opened in a new browser window and the source code for each page can be viewed. This is a not a security feature, merely a way to temporarily hide information.
Frames Using Frameset Pages
The key to this exercise is creating pages with a <frameset>, which can load additional pages. Reference an outer frame by name and use a page with a frameset as the source. Then the contents of each frame can be replaced. Create each of the pages, placing them in a folder, and open Listing 6.20, frame.html, in your browser.
Listing 6.20: frame.html
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/ xhtml1-frameset.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>FRAMES DEMO - Home Page</title> </head> <frameset cols="25%,75%"> <frame src="/books/3/422/1/html/2/A.html" name="A" noresize="noresize" scrolling="no" marginwidth="0" marginheight="0" frameborder="0" /> <frame src="/books/3/422/1/html/2/B.html" name="B" marginwidth="0" marginheight="0" frameborder="0" /> <noframes>Sample text if no frames....</noframes> </frameset> </html>
|
Listing 6.21 loads into the left side or navigation bar of the window (frame "A"). The page A.html contains links that target the right side of the window (frame "B"). Each link loads a different page or frameset into frame "B."
Listing 6.21: A.html
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/ xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>FRAMES DEMO - Menu Bar</title> </head> <body bgcolor="#99FFFF"> <p>INDEX</p> <p><a href="B.html" target="B">Home</a></p> <p><a href="CD1.html" target="B">Page One</a></p> <p><a href="CD2.html" target="B">Page Two</a></p> </body> </html>
|
Listing 6.22, B.html, is a single page that loads into frame "B" but may be viewed separately by opening it directly in the browser.
Listing 6.22: B.html
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/ xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>FRAMES DEMO - Main Page</title> </head> <body bgcolor="#FFFFFF"> <h1 align="center">Welcome to <br />a demonstration <br />of Frames</h1> <p align="center">Click on one of the links to go to that page.</p> </body> </Html>
|
The following listing 6.23, CD1.html, will be loaded into frame "B" when the link "Page One" is clicked in page A.html. CD1.html is a frameset page with two frames ("C" and "D") and it loads two other pages, C1.html and D1.html.
Listing 6.23: CD1.html
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/ xhtml1-frameset.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>FRAMES DEMO - Document one frame</title> </head> <frameset rows="15%,85%"> <frame src="/books/3/422/1/html/2/C1.html" name="C" noresize="noresize" scrolling="no" marginwidth="0" marginheight="0" frameborder="0" /> <frame src="/books/3/422/1/html/2/D1.html" name="D" marginwidth="0" marginheight="0" frameborder="0" /> </frameset> </html>
|
CD2.html in Listing 6.24 is also a frameset page. It redefines frames "C" and "D." The pages C2.html and D2.html are opened as two frames within the "B" frame. If this frameset page is opened in a new browser window, it merely creates the new frames "C" and "D" and loads the page.
Listing 6.24: CD2.html
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/ xhtml1-frameset.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>FRAMES DEMO - Document two frame</title> </head> <frameset rows="15%,85%"> <frame src="/books/3/422/1/html/2/C2.html" name="C" noresize="noresize" scrolling="no" marginwidth="0" marginheight="0" frameborder="0" /> <frame src="/books/3/422/1/html/2/D2.html" name="D" marginwidth="0" marginheight="0" frameborder="0" /> </frameset> </html>
|
Listing 6.25, C1.html, is a plain page that may be used as a title or banner location. It gets loaded into frame "C" when frameset page CD1.html is loaded into frame "B."
Listing 6.25: C1.html
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/ xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>FRAMES DEMO - Title 1</title> </head> <body> <h2 align="center">This is page one!</h2> </body> </html>
|
The following code for Listing 6.26, D1.html, has a hyperlink to open a plain document. Even though the D1.html page is loaded into frame "C," the link can target frame "B," which is the parent of frames "C" and "D." Clicking the link will open the new page in the parent frame. If CD1.html is opened in the browser and not called by the link in A.html, the link in page D1.html will open in a new window named "B."
Listing 6.26: D1.html
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/ xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>FRAMES DEMO - Document 1</title> </head> <body> <p>This is the text for Document one. You can see that the title is above. </p> <p>If you have any links in this document, be sure to set the targets so that the link shows up in the correct frame or no frames. </p> <p>Go to <a href="Plain.html" target="B">plain document</a> <b>in </b>this "frame"</p> <p>This is dummy text to show that this frame does have scroll bars. -repeat this text - This is dummy text to show that this frame does have scroll bars.</p> <p>This is dummy text to show that this frame does have scroll bars. -repeat this text - This is dummy text to show that this frame does have scroll bars. </p> </body> </html>
|
The next listing 6.27, C2.html, is similar to Listing 6.25, C1.html. Both of these pages are loaded into the "C" frame, which is inside the "B" frame.
Listing 6.27: C2.html
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/ xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>FRAMES DEMO - Title 2</title> </head> <body bgcolor="#CCCCFF"> <h2 align="center">This is page two!</h2> </body> </html>
|
Page D2.html in Listing 6.28 is loaded into frame "D" when frameset page CD2.html is loaded into frame "B." This page has a link that targets a new page to be loaded outside all frames and framesets. TARGET="_top" will load the new page in the parent window.
Listing 6.28: D2.html
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/ xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>FRAMES DEMO - Document 2</title> </head> <body> <p>This is the text for Document one. You can see that the title is above. </p> <p>If you have any links in this document, be sure to set the targets so that the link shows up in the correct frame or no frames. </p> <p>Go to <a href="Plain.html" target="_top">plain document</a> <b>out</b> of all frames. </P> <p>This is dummy text to show that this frame does have scroll bars. - repeat this text - This is dummy text to show that this frame does have scroll bars. </p> <p>This is dummy text to show that this frame does have scroll bars. - repeat this text - This is dummy text to show that this frame does have scroll bars. </p> </body> </html>
|
The simple page in Listing 6.29 is loaded into whichever frame is targeted by the link.
Listing 6.29: Plain.html
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/ xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>Plain</title> </head> <body> <h3 align="center">Plain page that stays within the frame....</h3> <h3 align="center">Or NOT!</h3> <h3 align="center">Click the Back button on your browser to return.</h3> </body> </html>
|
Frames can be nested and links will open new pages in the same frame or in another frame or window. If you use FRAMESET pages and FRAME elements, remember to target all hyperlinks to other sites to the "_top" of the window. If you forget to go outside of your frameset and you open another site containing frames, you may get very unpredictable results.
|
|
EAN: 2147483647
Pages: 100