Chapter 17. XHTML at Work
 | CONTENTS |  |
- Displaying an Image (<img>)
- Creating a Hyperlink or Anchor (<a>)
- Setting Link Information (<link>)
- Creating Tables (<table>)
- Creating Documents with Frames (<frameset>)
- Using Style Sheets in XHTML
- Using Script Programming (<script>)
- Creating XHTML Forms (<form>)
- Extending XHTML 1.0
- All About XHTML 1.1 Modules
We got started with XHTML in the previous chapter, and I'll continue exploring it here. In this chapter, I'll take a look at how XHTML implements images, hyperlinks, style sheets, tables, and forms, and I'll also cover how to extend XHTML by creating custom tags. I'll start with handling images.
Displaying an Image (<img>)
As in HTML, the <img> element is an empty element that you use to insert images into Web pages. This element is supported in XHTML 1.0 Strict, XHTML 1.0 Transitional, XHTML 1.0 Frameset, and XHTML 1.1. Here are its attributes (which apply to XHTML 1.0 Strict, XHTML 1.0 Transitional, XHTML 1.0 Frameset, and XHTML 1.1, unless otherwise noted):
| Attribute | Description |
|---|---|
| align | Sets the alignment of text relative to the image on the screen. Possible settings are left, right, top, texttop, middle, absmiddle, baseline, bottom, and absbottom. (XHTML 1.0 Transitional, XHTML 1.0 Frameset.) |
| alt | Is required. This attribute holds the text that should be displayed instead of an image for browsers that cannot handle graphics or have graphics disabled. |
| border | Specifies whether the image has a border and, if so, how thick the border is. Set this to 0 for no border, or a positive integer pixel value. (XHTML 1.0 Transitional, XHTML 1.0 Frameset.) |
| class | Gives the style class of the element. |
| height | Specifies the height of the image, in pixels. |
| hspace | Sets the horizontal spacing (both left and right sides) around the image. Set this to pixel measurements. (XHTML 1.0 Transitional, XHTML 1.0 Frameset.) |
| id | Use the ID to refer to the element; set this attribute to a unique identifier. |
| ismap | Specifies that this image is to be used as an image map along with a map file. |
| lang | Specifies the base language used in the element. Applies only when the document is interpreted as HTML. |
| longdesc | Contains a longer description of the image. Allows descriptions that can contain markup. Set this to a URI. |
| src | Is required. Specifies the URI of the image to display. |
| style | Gives the inline style indicating how to render the element. |
| title | Contains the title of the body (which might be displayed in ToolTips). |
| usemap | Specifies the URI usually inside the current document of a client-side image map. |
| vspace | Sets the vertical spacing around the image. Set this to pixel measurements. (XHTML 1.0 Transitional, XHTML 1.0 Frameset.) |
| width | Indicates the width of the image. Set this to pixel measurements. |
| xml:lang | Specifies the base language for the element when the document is interpreted as an XML document. |
This element supports these XHTML events: onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, and onkeyup.
You use the XHTML <img> element to insert images into a Web page as well as image maps. When you use this element, you supply the URI of the image in the src attribute. Besides src, the alt attribute, which specifies alternate text to display in case the image can't be displayed, is required.
Interestingly, the align attribute is not deprecated in the <img> element as it is for virtually every other XHTML element that supports it.
Here's a simple example using the <img> element:
<?xml version="1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title> Using the <img> Element </title> </head> <body> <center> <h1> Using the <img> Element </h1> <img src="image.jpg" width="428" height="86" alt="an image" /> </center> </body> </html>
You can see the result in Figure 17.1.
Figure 17.1. Displaying an image in XHTML.
Creating a Hyperlink or Anchor (<a>)
The <a> element creates a hyperlink (use the href attribute) or anchor (use the id or the deprecated name attribute for browsers that need to use name, such as Netscape). This element is supported in XHTML 1.0 Strict, XHTML 1.0 Transitional, XHTML 1.0 Frameset, and XHTML 1.1. Here are this element's attributes:
| Attribute | Description |
|---|---|
| accesskey | Assigns a keyboard access key to the hyperlink. (XHTML 1.0 Strict, XHTML 1.0 Transitional.) |
| charset | Indicates the character encoding of the hyperlink's target. Set this to an RFC (Request for Comments) 2045 language character set string. The default value is ISO-8859-1. |
| class | Gives the style class of the element. |
| coords | Sets the coordinate values (in pixels) appropriate to the corresponding shape attribute to define a region of an image for image maps. |
| dir | Sets the direction of text that doesn't have an inherent direction in which you should read it, called directionally neutral text. You can set this attribute to ltr, for left-to-right text, or rtl, for right-to-left text. |
| href | Holds the target URI of the hyperlink. You must assign a value to either this attribute or the id attribute. |
| hreflang | Gives the base language of the target indicated in the href attribute. Set this to RFC 1766 values. |
| id | Use the ID to refer to the element; set this attribute to a unique identifier. |
| lang | Specifies the base language used in the element. Applies only when the document is interpreted as HTML. |
| name | Is available in the three XHTML 1.0 DTDs, but is deprecated and not available in the XHTML 1.1 DTD (use id instead). Gives the anchor a name, which may be used as the target of a hyperlink. (XHTML 1.0 Strict, XHTML 1.0 Transitional, XHTML 1.0 Frameset.) |
| rel | Specifies the relationship described by the hyperlink. |
| rev | Is the same as the rel attribute, but the syntax works in the reverse direction. For example, a link from A to B with rel="X" signifies the same relationship as a link from B to A with rev="X". |
| shape | Specifies the type of region for mapping in an <area> element. Used with the coords attribute. Possible values are rect (the default), circ, circle, POLY, and polygon. |
| style | Is an inline style indicating how to render the element. |
| tabindex | Specifies the tab sequence of hyperlinks in the page for keyboard navigation. (XHTML 1.0 Strict, XHTML 1.0 Transitional, XHTML 1.0 Frameset.) |
| target | Indicates the named frame that serves as the target of the hyperlink. (XHTML 1.0 Transitional, XHTML 1.0 Frameset.) |
| title | Contains the title of the element (which might be displayed in ToolTips). |
| type | Specifies the Multipurpose Internet Mail Extensions (MIME) type of the target given in the href attribute. |
| xml:lang | Specifies the base language for the element when the document is interpreted as an XML document. |
This element supports these XHTML events: onclick, ondblclick, onfocus, onblur, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, and onkeyup.
The <a> element is a big part of what makes the Web work. You use this element to create hyperlinks and anchors (an anchor can serve as the target of a hyperlink). In this element, you must set either the href attribute to set the target URI of a hyperlink, or the id attribute to create an anchor. Here's an example using href, specifying the W3C site as the target of a hyperlink:
<?xml version="1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title> Using the <a> Element </title> </head> <body> <center> <h1> Using the <a> Element </h1> Want to learn more about XHTML? Go to: <a href="http://w3c.org">W3C</a> </center> </body> </html>
You can see the results of this XHTML in Figure 17.2; as is standard in HTML browsers, the hyperlink appears as underlined text (largely because the browser thinks that this is standard HTML). You can also use graphical hyperlinks if you enclose an <img> element in the <a> element.
Figure 17.2. Displaying a hyperlink.
Setting Link Information (<link>)
You use the XHTML <link> element to indicate the relationship of other documents to the current one, such as specifying an external style sheet. This element is empty and goes in the <head> section of a document. This element is supported in XHTML 1.0 Strict, XHTML 1.0 Transitional, XHTML 1.0 Frameset, and XHTML 1.1. Here are the attributes of <link>:
| Attribute | Description |
|---|---|
| charset | Specifies the character encoding of the linked document. Set this to an RFC 2045 language character set string; the default value is ISO-8859-1. |
| class | Gives the style class of the element. |
| dir | Sets the direction of directionally neutral text. You can set this attribute to ltr, for left-to-right text, or rtl, for right-to-left text. |
| href | Contains the target URI of the resource. You must assign a value to either this attribute or the id attribute. |
| hreflang | Indicates the base language of the target indicated in the href attribute. Set this to RFC 1766 values. |
| id | Use the ID to refer to the element; set this attribute to a unique identifier. |
| lang | Specifies the base language used in the element. Applies only when the document is interpreted as HTML. |
| media | Specifies the device that the document will be displayed on; possible values are screen (the default), print, projection, braille, speech, and all (style information should be used for all devices). |
| rel | Gives the relationship described by the hyperlink. |
| rev | Is the same as the rel attribute, but the syntax works in the reverse direction. For example, a link from A to B with rel="X" signifies the same relationship as a link from B to A with rev="X". |
| style | Is an inline style indicating how to render the element. |
| target | Indicates the named frame that serves as the target of the link. (XHTML 1.0 Transitional, XHTML 1.0 Frameset.) |
| title | Contains the title of the element. |
| type | Indicates the MIME type of the target given in the href attribute. |
| xml:lang | Specifies the base language for the element when the document is interpreted as an XML document. |
This element supports these event attributes: onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, and onkeyup.
The <link> element specifies the relationship of the current document to other documents. I'll use this element to handle external style sheets. You indicate the relationship with the rel attribute, which can take these values:
| Value | Links to |
|---|---|
| rel=alternate | An alternate resource |
| rel=appendix | An appendix |
| rel=bookmark | Bookmarks, which provide entry points into a document |
| rel=chapter | A chapter |
| rel=contents | The contents section |
| rel=copyright | A copyright document for the current document |
| rel=glossary | A document providing a glossary of terms |
| rel=help | A document providing help |
| rel=home | A home page |
| rel=index | A document providing an index |
| rel=next | The next document |
| rel=previous | The previous document |
| rel=section | A section |
| rel=start | The start of a resource |
| rel=stylesheet | An external style sheet |
| rel=subsection | A subsection |
| rel=toc | A document that holds a table of contents |
| rel=up | The parent of the current document |
Here's an example showing how to use an external style sheet, where I'm setting rel to "stylesheet" to indicate that the linked-to item is a style sheet, and href to the URI of the style sheet:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title> Working With External Style Sheets </title> <link rel="stylesheet" href="style.css"> </head> <body> <center> <h1> Working With External Style Sheets </h1> <p> This document is displayed using an external style sheet. </p> </center> </body> </html>
Here's the style sheet I'm using, style.css:
body {background-color: #FFFFCC; font-family: Arial} a:link {color: #0000FF} a:visited {color: #FFFF00} a:hover {color: #00FF00} a:active {color: #FF0000} p {font-style: italic} That's all it takes you can see the results in Figure 17.3. I'll take a closer look at working with style sheets later in this chapter (see the section Using Style Sheets in XHTML).
Figure 17.3. Using an external style sheet in Netscape.
Creating Tables (<table>)
The <table> element is always a popular one, and you use it to create tables. To build a table, you enclose other elements in <table>, such as <caption>, <tr>, <th>, <td>, <colspan>, <col>, <thead>, <tbody>, and <tfoot>. This element is supported in XHTML 1.0 Strict, XHTML 1.0 Transitional, XHTML 1.0 Frameset, and XHTML 1.1. Here are its attributes:
| Attribute | Description |
|---|---|
| align | Is deprecated in HTML 4.0. Sets the horizontal alignment of the table in the browser window. Set this to left, center, or right. (XHTML 1.0 Transitional, XHTML 1.0 Frameset.) |
| bgcolor | Is deprecated in HTML 4.0. Sets the background color of table cells. Even though this attribute is deprecated, style sheet support for tables is still limited and inconsistent among browsers today. (XHTML 1.0 Transitional, XHTML 1.0 Frameset.) |
| border | Sets the border width as measured in pixels. If you set this attribute to 0, the border is invisible. (XHTML 1.0 Transitional, XHTML 1.0 Frameset.) |
| cellpadding | Specifies the spacing between cell walls and cell contents in pixels. |
| cellspacing | Specifies the distance between cells. Set this to a value in pixels. |
| class | Gives the style class of the element. |
| dir | Sets the direction of directionally neutral text. You can set this attribute to ltr, for left-to-right text, or rtl, for right-to-left text. |
| frame | Determines the outer border display of the table using the Complex Table Model. You use this attribute with the rules attribute. Possible values are void (no borders), above (border on top side only), below (border on bottom side only), hsides (horizontal borders only), vsides (vertical borders only), lhs (border on left side only), rhs (border on right side only), box (border on all four sides), and border (the default, the same as box). |
| id | You use the ID to refer to the element; set this attribute to a unique identifier. |
| lang | Specifies the base language used in the element. Applies only when the document is interpreted as HTML. |
| rules | Specifies the interior struts in a table using the Complex Table Model. Set this to none (no interior struts), groups (horizontal struts displayed between table groups created with the thead, tbody, tfoot, and colgroup tags), rows (horizontal struts displayed between all table rows), cols (vertical struts displayed between all table columns), and all (struts displayed between all table cells). |
| style | Is an inline style indicating how to render the element. |
| summary | Gives summary information for nonvisual browsers. |
| width | Sets the width of the table; set this to a pixel value or a percentage of the display area (add a percent sign [%] to such values). |
| xml:lang | Specifies the base language for the element when the document is interpreted as an XML document. |
Here are the XHTML events that this element supports: onclick, ondblclick, onfocus, onblur, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, and onkeyup.
The <table> element is what you use to create tables in XHTML. To create a table, you enclose everything in a <table> element:
<table> . . . </table>
That creates a table, but nothing happens on the screen with this markup you need to give the table some rows. See the next section to start fleshing things out.
Creating Table Rows (<tr>)
You use <tr> to create rows in a table. This element can contain <th> (table header) and <td> (table data) elements, and it is supported in XHTML 1.0 Strict, XHTML 1.0 Transitional, XHTML 1.0 Frameset, XHTML 1.1. Here are this element's attributes:
| Attribute | Description |
|---|---|
| align | Specifies the horizontal alignment of the text in this table row. Set this to left, center, right, justify, or char. Unlike other align attributes, this one is not deprecated. |
| bgcolor | Is deprecated in HTML 4.0. Specifies the background color of the table cells. (XHTML 1.0 Transitional, XHTML 1.0 Frameset.) |
| char | Specifies a character to align text on. |
| charoff | Sets the alignment offset to the first character to align on (which you set with char). |
| class | Gives the style class of the element. |
| dir | Sets the direction of directionally neutral text. You can set this attribute to ltr, for left-to-right text, or rtl, for right-to-left text. |
| id | Use the ID to refer to the element; set this attribute to a unique identifier. |
| lang | Specifies the base language used in the element. Applies only when the document is interpreted as HTML. |
| style | Is an inline style indicating how to render the element. |
| title | Contains the title of the element. |
| valign | Sets the vertical alignment of the data in this row. Possible values are top, middle, bottom, and baseline. |
| xml:lang | Specifies the base language for the element when the document is interpreted as an XML document. |
Here are the events supported by this element: onclick, ondblclick, onfocus, onblur, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, and onkeyup.
You use <tr> inside <table> to create a row in a table. Here's how that looks:
<table> <tr> . . . </tr> . . . </table>
There's a <tr> element for every row in an XHTML table, and the browser knows how many rows there will be in the table by counting the number of <tr> elements. This element contains <tr> elements, which you use to create table headers, and <td> elements, which hold the actual data in the cells in a table.
Creating Table Headings (<th>)
You use the <th> element to create table headings, which are usually displayed in bold text and label the columns in a table. This element is supported in XHTML 1.0 Strict, XHTML 1.0 Transitional, XHTML 1.0 Frameset, and XHTML 1.1. Here are its attributes:
| Attribute | Description |
|---|---|
| abbr | Holds an abbreviated name for a header. |
| align | Sets the horizontal alignment of content in table cells. Possible values are left, center, right, justify, and char. |
| axis | Contains a name for a cell (usually used only with table heading cells). Allows the table to be mapped to a tree hierarchy for access in code. |
| bgcolor | Is deprecated in HTML 4.0. Sets the background color of table cells. (XHTML 1.0 Transitional, XHTML 1.0 Frameset.) |
| char | Specifies a character to align text on. |
| charoff | Sets the alignment offset to the first character to align on (which you set with char). |
| class | Gives the style class of the element. |
| colspan | Specifies how many columns of the table this header should span. (The default is one). |
| dir | Sets the direction of directionally neutral text. You can set this attribute to ltr, for left-to-right text, or rtl, for right-to-left text. |
| headers | Species a list of header cells that supply header information. |
| height | Is deprecated in HTML 4.0. Sets the height of the header in pixels. (XHTML 1.0 Transitional, XHTML 1.0 Frameset.) |
| id | Use the ID to refer to the element; set this attribute to a unique identifier. |
| lang | Specifies the base language used in the element. Applies only when the document is interpreted as HTML. |
| nowrap | Is deprecated in HTML 4.0. Indicates that content should not be wrapped by the browser by adding line breaks. (XHTML 1.0 Transitional, XHTML 1.0 Frameset.) |
| rowspan | Specifies how many rows of the table this header should span. |
| scope | Specifies a set of data cells for which the header cell provides header information. Set this to row, col, rowgroup, or colgroup. |
| style | Is an inline style indicating how to render the element. |
| title | Contains the title of the element. |
| valign | Sets the vertical alignment of the data in this cell. Set this to top, middle, bottom, or baseline. |
| width | Is deprecated in HTML 4.0. Gives the width of the header. (XHTML 1.0 Transitional, XHTML 1.0 Frameset.) |
| xml:lang | Specifies the base language for the element when the document is interpreted as an XML document. |
Here are the XHTML events supported by this element: onclick, ondblclick, onfocus, onblur, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, and onkeyup.
You use the <th> element to put a header on top of columns in a table. Headers such as these can span several columns if you use the colspan attribute. Here's an example:
<table> <tr> <th>TIC</th> <th>TAC</th> <th>TOE</th> </tr> . . . </table>
This adds three table headers on top of three columns: TIC, TAC, and TOE. The next step is adding cells to the table that can contain some data, and you do that with the <td> element.
Creating Table Data (<td>)
The <td> element is where you place the data that you want in a cell in a table. You use this element inside the <tr> element. It's supported in XHTML 1.0 Strict, XHTML 1.0 Transitional, XHTML 1.0 Frameset, and XHTML 1.1. Here are this element's attributes:
| Attribute | Description |
|---|---|
| abbr | Gives an abbreviated name for a cell (XHTML 1.0 Strict, XHTML 1.0 Transitional, XHTML 1.0 Frameset, XHTML 1.1.) |
| align | Sets the horizontal alignment of content in the table cell. Set this to left, center, right, justify, or char. |
| axis | Contains a name for a cell (usually used only with table heading cells). Allows the table to be mapped to a tree hierarchy. |
| bgcolor | Is deprecated in HTML 4.0. Sets the background color of table cells. (XHTML 1.0 Transitional, XHTML 1.0 Frameset.) |
| char | Specifies a character to align text on. |
| charoff | Sets the alignment offset to the first character to align on (which you set with char). |
| class | Gives the style class of the element. |
| colspan | Specifies how many columns this cell should span. |
| dir | Sets the direction of directionally neutral text. You can set this attribute to ltr, for left-to-right text, or rtl, for right-to-left text. |
| headers | Species a list of header cells that supply header information. |
| height | Is deprecated in HTML 4.0. Sets the height of the cell in pixels. (XHTML 1.0 Transitional, XHTML 1.0 Frameset.) |
| id | Use the ID to refer to the element; set this attribute to a unique identifier. |
| lang | Specifies the base language used in the element. Applies only when the document is interpreted as HTML. |
| nowrap | Is deprecated in HTML 4.0. Indicates that content should not be wrapped by the browser by adding line breaks. (XHTML 1.0 Transitional, XHTML 1.0 Frameset.) |
| rowspan | Specifies how many rows of the table this cell should span. |
| scope | Specifies a set of data cells for which the header cell provides header information. Set this to row, col, rowgroup, or colgroup. |
| style | Is an inline style indicating how to render the element. |
| title | Contains the title of the element. |
| valign | Sets the vertical alignment of the data in this cell. Set this to top, middle, bottom, or baseline. |
| width | Is deprecated in HTML 4.0. Gives the width of the header. (XHTML 1.0 Transitional, XHTML 1.0 Frameset.) |
| xml:lang | Specifies the base language for the element when the document is interpreted as an XML document. |
Here are the events that this element supports: onclick, ondblclick, onfocus, onblur, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, and onkeyup.
You use <td> elements to hold the data in a table's cells. The browser knows how many columns to create in the table, depending on how many <td> or <th> elements you put into a row. For example, here's how I add data to the rows of a table using <td> elements:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title> Working With XHTML Tables </title> </head> <body> <center> <h1> Working With XHTML Tables </h1> <table> <tr> <th>TIC</th> <th>TAC</th> <th>TOE</th> </tr> <tr> <td>O</td> <td>X</td> <td>O</td> </tr> <tr> <td>X</td> <td>O</td> <td>X</td> </tr> <tr> <td>O</td> <td>X</td> <td>O</td> </tr> </table> </center> </body> </html>
You can see the results in Figure 17.4. That's all it takes to create simple tables in XHTML. The process is just like HTML you enclose everything in a <table> element, use <tr> to create the rows of a table, and enter the data in each cell using <td> (or <th> for header text).
Figure 17.4. A table written in XHTML.
Creating Documents with Frames (<frameset>)
You use the <frameset> element when you want to display frames in a document. The <frameset> element replaces the <body> element in such documents; in XHTML 1.0, that means you use the XHTML 1.0 Frameset DTD. This element is supported in XHTML 1.0 Frameset only. The <frame> and <frameset> elements are not supported in XHTML 1.1; the XHTML 1.1 DTD does not makes any mention of these elements or of frames at all, and these elements are specifically listed as unsupported in XHTML 1.1. Why aren't frames supported in XHTML 1.1? They're not supported because the W3C expects style sheets to handle the presentation techniques that you use frames for today; whether the Web community will ultimately accept that is anyone's guess.
Here are the attributes of this element:
| Attribute | Description |
|---|---|
| class | Gives the style class of the element. |
| cols | Sets the number of columns (vertical framed bands) in the frameset. |
| dir | Sets the direction of directionally neutral text . You can set this attribute to ltr, for left-to-right text, or rtl, for right-to-left text. |
| id | Use the ID to refer to the element; set this attribute to a unique identifier. |
| lang | Specifies the base language used in the element. Applies only when the document is interpreted as HTML. |
| rows | Sets the number of rows (horizontal framed bands) in the frameset. |
| style | Is an inline style indicating how to render the element. |
| title | Contains the title of the element. |
| xml:lang | Specifies the base language for the element when the document is interpreted as an XML document. |
This element supports no XHTML events.
You use the <frameset> element and the XHTML frameset DTD to format a page into frames. This element takes the place of the <body> element in documents that display frames. To create the frames themselves, you use the <frame> element.
To format the display into frames, you use the rows or cols attribute of the <frameset> element. You indicate the number or rows or columns that you want to use by giving their heights or widths in a comma-separated list. To specify those heights or widths, you can give pixel measurements or a percentage measurement (such as "40%") to request a percentage of the available display area. If you use an asterisk, the browser will try to give you the remaining display area; for example, cols="200, *" creates one vertical frame of 200 pixels and a second vertical frame filling the remainder of the display area. I recommend using percentage measurements rather than pixel measurements because the user may resize the browser window.
For example, here's how I create two columns that is, two vertical frames each of which takes up half the available width (note that I'm using the XHTML 1.0 frameset DTD):
<?xml version="1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title> Using XHTML Frames </title> </head> <frameset cols = "50%, 50%"> . . . </frameset> </html>
So how do you actually create the frames that should be displayed? Take a look at the next topic.
Creating Individual Frames (<frame>)
You use the <frame> element to create an individual frame. This element is an empty element, and you use it inside the <frameset> element. It's supported in XHTML 1.0 Frameset only. This table lists its attributes:
| Attribute | Description |
|---|---|
| class | Gives the style class of the element. |
| dir | Sets the direction of directionally neutral text. You can set this attribute to ltr, for left-to-right text, or rtl, for right-to-left text. |
| frameborder | Sets whether borders enclose the frame. In Netscape, you set this attribute to yes (the default) or no; in Internet Explorer, you set it to 1 (the default) or 0 (no border). |
| id | Use the ID to refer to the element; set this attribute to a unique identifier. |
| lang | Specifies the base language used in the element. Applies only when the document is interpreted as HTML. |
| longdesc | Specifies the URI for a long description of the frame contents, which may include markup. |
| marginheight | Sets the height of the top and bottom margins used in the frame. |
| marginwidth | Sets the width of the right and left margins used in the frame. |
| name | Sets the name of the frame, which you can use as target destinations for <a>, <area>, <base>, and <form> elements. |
| noresize | Indicates that the frame may not be resized. The default is that frames may be resized by dragging the border. |
| scrolling | Sets scrollbar action; possible values are auto, yes, and no. |
| src | Is required. Holds the URI of the frame document. |
| style | Is an inline style indicating how to display the element. |
| title | Contains the title of the element. |
| xml:lang | Specifies the base language for the element when the document is interpreted as an XML document. |
This element does not support any XHTML events.
You can use the <frame> element inside a <frameset> element to create a frame. This element exists so that you can specify the document that is displayed in a URI. That's the one required attribute in this element src, which holds the URI of the document that the frame is to display.
For example, here's how I might display two frames, placing the contents of the document frame1.html in one, and the contents of frame2.html in the other:
<?xml version="1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title> Using XHTML Frames </title> </head> <frameset cols = "50%, 50%"> <frame src="frame1.html" /> <frame src="frame2.html" /> </frameset> </html>
Here's frame1.html:
<?xml version="1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title> Using XHTML Frames </title> </head> <body bgcolor=red> <h1> <center> This is frame 1. </center> </h1> </body> </html>
And here's frame2.html:
<?xml version="1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title> Using XHTML Frames </title> </head> <body bgcolor=cyan> <h1> <center> This is frame 2. </center> </h1> </body> </html>
The result of this XHTML appears in Figure 17.5.
Figure 17.5. Displaying XHTML frames.
That's all it takes to create and display frames in XHTML, but bear in mind that the W3C has apparently targeted frames for extinction. Will style sheets be capable of taking over what frames do today? That remains to be seen. I'll take a look at handling style sheets now.
Using Style Sheets in XHTML
There are several ways to use style sheets in XHTML. As we already saw in this chapter, you can use the <link> element to connect an external style sheet to a document, like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title> Working With External Style Sheets </title> <link rel="stylesheet" href="style.css"> </head> <body> <center> <h1> Working With External Style Sheets </h1> <p> This document is displayed using an external style sheet. </p> </center> </body> </html>
This XHTML links the Web page to an external style sheet named style.css, written in CSS (refer to Chapter 9, "Cascading Style Sheets," for more on CSS). Here's how that style sheet looks:
body {background-color: #FFFFCC; font-family: Arial} a:link {color: #0000FF} a:visited {color: #FFFF00} a:hover {color: #00FF00} a:active {color: #FF0000} p {font-style: italic} XHTML documents can be interpreted in two ways by browsers today as HTML or as XML (and in the future, presumably, as XHTML). If you treat an XHTML document as XML (that is, by giving it the extension .xml), you use an XML processing instruction, <?xml-stylesheet?>, to indicate what style sheet you want to use, as we did in Chapter 9:
<?xml version="1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/DTD/xhtml1-transitional.dtd"> <?xml-stylesheet type="text/css" href="style.css"?> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title> Working With External Style Sheets </title> <link rel="stylesheet" href="style.css"> </head> <body> <center> <h1> Working With External Style Sheets </h1> <p> This document is displayed using an external style sheet. </p> </center> </body> </html>
Besides linking to external style sheets, XHTML documents that are interpreted as HTML can also use embedded style sheets if you use the <style> element.
Creating Embedded Style Sheets in XHTML (<style>)
The <style> element lets you embed full style sheets in XHTML documents. It is supported in XHTML 1.0 Strict, XHTML 1.0 Transitional, XHTML 1.0 Frameset, and XHTML 1.1. Here are the attributes of this element:
| Attribute | Description |
|---|---|
| dir | Sets the direction of directionally neutral text. You can set this attribute to ltr, for left-to-right text, or rtl, for right-to-left text. |
| lang | Specifies the base language used in the element. Applies only when the document is interpreted as HTML. |
| media | Specifies the target media for the style sheet. Possible values are screen (the default), print, projection, braille, speech, and all. |
| title | Names the style sheet so that the browser can build a menu of alternative style sheets. |
| type | Is required. Indicates the MIME type of the <style> element content. |
| xml:lang | Specifies the base language for the element when the document is interpreted as an XML document. |
| xml:space | Set this to preserveto preserve spacing. |
This element does not support any XHTML events.
The <style> element usually goes in a Web page's head, and you can use it to set styles, just as you can with an external style sheet. Here's an example that creates the same display as the example in the previous topic note that the type attribute is required in XHTML:
<?xml version="1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title> Working With External Style Sheets </title> <style type="text/css"> body {background-color: #FFFFCC; font-family: Arial} a:link {color: #0000FF} a:visited {color: #FFFF00} a:hover {color: #00FF00} a:active {color: #FF0000} p {font-style: italic} </style> </head> <body> <center> <h1> Working With External Style Sheets </h1> <p> This document is displayed using an external style sheet. </p> </center> </body> </html> Here's an important note: XHTML browsers are allowed to read and interpret every part of your document, so if your style sheet includes the characters <, &, ]]>, or , you should make your style sheet external so that those characters are not parsed and mistaken for markup. Also, XML parsers, like the ones inside XHTML browsers, are permitted to remove comments, so the practice of "hiding" style sheets inside comments as Web authors sometimes did to make documents backward-compatible might not work as expected in XHTML.
Using Inline Styles in XHTML
In XHTML, you can also create inline styles, where you apply styles to one XHTML element only. You create inline styles with the style attribute that most XHTML elements have. Here's an example. This example creates the same result as the previous two examples, but this time I'm using the style attribute, not the <link> element to link to an external style sheet, or the <style> element to create an embedded style sheet:
<?xml version="1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title> Working With External Style Sheets </title> </head> <body style="background-color: #FFFFCC; font-family: Arial"> <center> <h1> Working With External Style Sheets </h1> <p style="font-style: italic"> This document is displayed using an external style sheet. </p> </center> </body> </html>
You usually use inline styles for short amounts of text; in fact, style purists insist that you should stay away from inline styles because it decentralizes the definition of styles, mixing markup with content more than they like. Note that as with embedded style sheets, if your style sheet includes the characters <, &, ]]>, or --, you should make your style sheet external.
Using Script Programming (<script>)
You use the <script> element to embed a script, such as those written in JavaScript in an XHTML document. You usually place this element in a document's <head> section, except when the code writes directly to the document's body, in which case you should place it in the document's body. This element is supported in XHTML 1.0 Strict, XHTML 1.0 Transitional, XHTML 1.0 Frameset, and XHTML 1.1. Here are the attributes of this element:
| Attribute | Description |
|---|---|
| charset | Gives the character encoding of the script contents. |
| defer | Tells the browser that the script is not going to generate any document content. |
| language | Specifies the scripting language. This attribute is required if the src attribute is not set and is optional otherwise. (XHTML 1.0 Strict, XHTML 1.0 Transitional, XHTML 1.0 Frameset.) |
| src | Holds a URI for the script code. (XHTML 1.0 Strict, XHTML 1.0 Transitional, XHTML 1.0 Frameset.) |
| type | Is required. Holds the Multipurpose Internet Mail Extension (MIME) type of the scripting code. (XHTML 1.0 Strict, XHTML 1.0 Transitional, XHTML 1.0 Frameset.) |
| xml:space | Set this to preserveto preserve spacing. |
This element does not support any XHTML events.
You use the <script> element to embed a script in a document. In XHTML, the type attribute, which you set to "text/javascript" in JavaScript, is required. Here's an example; note that normally, <script> goes in a document's <head> element, but because this script writes a message, Welcome to XHTML scripting!, to the document's body, it's supposed to be in the <body> element. (Note also that the document.open() and document.close() calls are not needed in Internet Explorer.)
<?xml version="1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title> Welcome to XHTML scripting </title> </head> <body> <script type = "text/javascript" language="javascript"> document.open() document.writeln("Welcome to XHTML scripting!") document.close() </script> </body> </html> You can see the results of this XHTML in Figure 17.6.
Figure 17.6. Running JavaScript in XHTML.
In HTML programming, you enclosed the actual JavaScript in an HTML comment like this. (Note that I ended the comment with a JavaScript comment marker, //; if I didn't, some HTML browsers would assume that the script code was actually commented out.)
<?xml version="1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title> Welcome To JavaScript </title> </head> <body> <script type = "text/javascript" language="javascript"> <!-- document.open() document.writeln("Welcome to XHTML scripting!") document.close() //--> </script> </body> </html> The reason that you had to do that is because if a browser doesn't understand the <script> tag, it displays what's inside the <script> element the JavaScript code as text. If you enclose that text in what looks like an HTML comment to the browser, it won't display the code. However, that's no good in XML because XML parsers are allowed to remove what they consider to be comments from the document entirely, and not pass them on to the browser.
While we're on the topic, it's worth noting that if your script contains sensitive characters such as < or &, they may be treated as markup by an XHTML browser. To avoid that, the W3C helpfully suggests that you enclose the script in a CDATA section:
<?xml version="1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title> Welcome to XHTML scripting </title> </head> <body> <script type = "text/javascript" language="javascript"> <![CDATA[ document.open() document.writeln("Welcome to XHTML scripting!") document.close() ]]> </script> </body> </html> Unfortunately, no major HTML browser today has any idea what to do with CDATA sections in documents that they consider HTML. Your only real alternative here is to store the script in an external file so that it won't be parsed, and assign the src attribute the URI of that file. Here's how that looks in this case, I'm storing the JavaScript code in a file named script.js:
<?xml version="1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title> Welcome to XHTML scripting </title> </head> <body> <script type = "text/javascript" language="javascript" src="script.js"> </script> </body> </html>
Here, script.js, stored in the same directory as the Web page itself, contains this code:
document.open() document.writeln("Welcome to XHTML scripting!") document.close() This XHTML gives the same results as the earlier examples. What's important to remember here is that you should use external scripts if your script uses the characters <, &, ]]>, or -- because an XHTML browser may interpret those characters as markup.
Creating XHTML Forms (<form>)
You use the <form> element to create an XHTML form, which you use to contain XHTML controls such as buttons and text fields. This element is supported in XHTML 1.0 Strict, XHTML 1.0 Transitional, XHTML 1.0 Frameset, and XHTML 1.1. Here are its attributes:
| Attribute | Description |
|---|---|
| accept | Holds a comma-separated list of content types that a server processing this form will handle correctly. (XHTML 1.0 Strict, XHTML 1.0 Transitional, XHTML 1.0 Frameset, XHTML 1.1.) |
| accept-charset | Holds a list of possible language character sets for the form data. (XHTML 1.0 Strict, XHTML 1.0 Transitional, XHTML 1.0 Frameset, XHTML 1.1.) |
| action | Is required. Gives the URI that will handle the form data. |
| class | Gives the style class of the element. |
| dir | Sets the direction of directionally neutral text. You can set this attribute to ltr, for left-to-right text, or rtl, for right-to-left text. |
| enctype | Sets the MIME type used to encode the name/value pairs when sent to the action URI. The default is "application/x-www-form-urlencoded". |
| id | Use the ID to refer to the element; set this attribute to a unique identifier. |
| lang | Specifies the base language used in the element. Applies only when the document is interpreted as HTML. |
| method | Indicates a method or protocol for sending data to the target action URI. The GET method is the default; the other alternative is POST. |
| name | Is deprecated. Gives a name to the form so that you can reference it in code; use the id attribute instead in browsers that understand it. (XHTML 1.0 Transitional, XHTML 1.0 Frameset.) |
| style | Is an inline style indicating how to render the element. |
| target | Indicates a named frame for the browser to display the form results in. (XHTML 1.0 Transitional, XHTML 1.0 Frameset.) |
| title | Contains the title of the element. |
| xml:lang | Specifies the base language for the element when the document is interpreted as an XML document. |
This element supports these XHTML events: onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup, onsubmit, and onreset.
When you want to use controls in a Web page, such as buttons and text fields, you should enclose the control elements in a <form> element. (Controls won't even appear in Netscape unless you enclose them in a <form> element.)
Forms originally were intended to be used to send data (such as the contents of text fields) back to the server. The target URI to send that data to is placed in the action attribute, and the W3C has made that attribute required for forms. We'll see how to send data to a server in Chapter 20, "WML, ASP, JSP, Servlets, and Perl," and we'll use the action attribute there; until then, I'll just set the action attribute to "action". In addition, note that in XHTML, you're supposed to give XHTML forms an ID with the ID attribute some browsers, such as Netscape, however, don't understand that attribute and use name instead. The only alternative in this case is to use both the ID and the name attributes here.
Let's see an example; here, the document will display a message that, when clicked, will display the message Hello from JavaScript. in a text field. Here's the code:
<?xml version="1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title> Using Forms in XHTML </title> <script language = "javascript"> function displayMessage() { document.form1.textfield.value = "Hello from JavaScript." } </script> </head> <body> <center> <h1> Using Forms in XHTML </h1> <form name = "form1" id = "form1" action = "action"> <input type = "text" name = "textfield" size = "25" /> <br /> <br /> <input type = "button" value = "Click Me" onclick = "displayMessage()" /> </form> </center> </body> </html> You can see the results of this XHTML in Figure 17.7.
Figure 17.7. Using an XHTML form in Netscape.
This document used both a button and a text field, and I'll take a look at how to create those two controls in XHTML next.
Creating Controls (<input type = "button">)
You use the <input> element to create controls such as buttons and text fields. Setting the type attribute indicates what kind of control you want to create, and this element supports different attributes based on control type. This element is empty and is supported in XHTML 1.0 Strict, XHTML 1.0 Transitional, XHTML 1.0 Frameset, and XHTML 1.1. Here are the attributes for <input type="button":
| Attribute | Description |
|---|---|
| accesskey | Assigns a keyboard access key to the button. (XHTML 1.0 Strict, XHTML 1.0 Transitional.) |
| class | Gives the style class of the element. |
| dir | Sets the direction of directionally neutral text. You can set this attribute to ltr, for left-to-right text, or rtl, for right-to-left text. |
| disabled | Indicates that the element should be disabled when first displayed. |
| id | Use the ID to refer to the element; set this attribute to a unique identifier. |
| lang | Specifies the base language used in the element. Applies only when the document is interpreted as HTML. |
| name | Gives the element a name. |
| size | Sets the size of the control. |
| style | Is an inline style indicating how to render the element. |
| tabindex | Specifies the tab sequence of hyperlinks in the page for keyboard navigation. |
| title | Contains the title of the element. |
| type | Specifies the type of the element. |
| value | Specifies the caption of the element. |
| xml:lang | Specifies the base language for the element when the document is interpreted as an XML document. |
This element supports these XHTML events: onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup, onfocus, onblur, onselect, and onchange.
You can create buttons in XHTML with the <input type="button" element (and also with the <button> element). We saw an example in the previous section:
<?xml version="1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title> Using Forms in XHTML </title> <script language = "javascript"> function displayMessage() { document.form1.textfield.value = "Hello from JavaScript." } </script> </head> <body> <center> <h1> Using Forms in XHTML </h1> <form name = "form1" id = "form1" action = "action"> <input type = "text" name = "textfield" size = "25" /> <br /> <br /> <input type = "button" value = "Click Me" onclick = "displayMessage()" /> </form> </center> </body> </html> Of course, you can create plenty of other controls. I'll take a brief look at creating text fields next.
Creating Text Fields (<input type="text">)
You use the <input type = "text"> element to create text fields. This element is an empty element and is supported in XHTML 1.0 Strict, XHTML 1.0 Transitional, XHTML 1.0 Frameset, and XHTML 1.1. Here are its attributes:
| Attribute | Description |
|---|---|
| accesskey | Assigns a keyboard access key to the button. (XHTML 1.0 Strict, XHTML 1.0 Transitional.) |
| class | Gives the style class of the element. |
| dir | Sets the direction of directionally neutral text. You can set this attribute to ltr, for left-to-right text, or rtl, for right-to-left text. |
| disabled | Indicates that the element should be disabled when first displayed. |
| id | Use the ID to refer to the element; set this attribute to a unique identifier. |
| lang | Specifies the base language used in the element. Applies only when the document is interpreted as HTML. (XHTML 1.0 Strict, XHTML 1.0 Transitional, XHTML 1.0 Frameset, XHTML 1.1, IE4, IE5.) |
| maxlength | Sets the maximum number of characters that can be entered into the text field. The text field will scroll as needed if maxlength is greater than value of the size attribute. |
| name | Gives the element a name. |
| readonly | Specifies that the content of the text field is read-only, which means that it cannot be modified. |
| size | Sets the size of the text field, as measured in characters. |
| style | Is an inline style indicating how to render the element. |
| tabindex | Specifies the tab sequence of hyperlinks in the page for keyboard navigation. |
| title | Contains the title of the element. |
| type | Specifies the type of the element. |
| value | Holds the initial text in the text field. Set this to alphanumeric characters. |
| xml:lang | Specifies the base language for the element when the document is interpreted as an XML document. |
This element supports these XHTML events: onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup, onfocus, onblur, onselect, and onchange.
You can create a text field with the <input type="text"> element. You can set the size of the text field in characters with the size attribute, and the maximum length of text (text fields will scroll if the maximum length is greater than its size) with the maxlength attribute.
Here's an example. In this case, I'm connecting JavaScript code to display the message Hello from JavaScript. in the text field to the onkeyup event, so every time you type something in this text field, the text is immediately replaced with that message.
<?xml version="1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title> Using Forms in XHTML </title> <script language = "javascript"> function displayMessage() { document.form1.textfield.value = "Hello from JavaScript." } </script> </head> <body> <center> <h1> Using Forms in XHTML </h1> <form name = "form1" id = "form1" action = "action"> <input type = "text" name = "textfield" size = "25" onkeyup = "displayMessage()" /> </form> </center> </body> </html> You can see results in Figure 17.8.
Figure 17.8. Using a text field in XHTML.
Extending XHTML 1.0
One of the attractions of XHTML is that you can extend it with your own elements because it's based on XML. The way you actually do this is has changed in the various XHTML working drafts over time; the current working draft on this topic is at http://www.w3.org/TR/xhtml-building/.
Here's an example. As you know, XHTML documents have <head> and <body> elements. Here, I'll add a <foot> element to XHTML 1.0. The W3C says that all custom XHTML elements should have their own namespace, so I'll give that element the namespace doc. I'll also create an attribute for this element, footattribute, like this in a new DTD, extend.dtd:
<!ELEMENT doc:foot (#PCDATA) > <!ATTLIST doc:foot footattribute CDATA #IMPLIED > . . .
You also must indicate where the new element fits into the XHTML element hierarchy. In the XHTML 1.0 Transitional DTD, here's how the <html> element is defined:
<!ELEMENT html (head, body)>
I can add <doc:foot> to this content model this way:
<!ELEMENT doc:foot (#PCDATA) > <!ATTLIST doc:foot footattribute CDATA #IMPLIED > <!ELEMENT html (head, body, doc:foot)> . . .
Redefining the <html> element's content model in extend.dtd means that this new content model will be used instead of the old version. To complete extend.dtd, I include the entire XHTML 1.0 Transitional DTD using a parameter entity this way:
<!ELEMENT doc:foot (#PCDATA) > <!ATTLIST doc:foot footattribute CDATA #IMPLIED > <!ELEMENT html (head, body, doc:foot)> <!ENTITY % xhtml10T.dtd PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> %xhtml10T.dtd;
You can specify how you want the new element displayed with a style sheet. For example, I'll call this style sheet extend.css and use it with this new element:
doc:foot {font-size: 8pt; color: #0000FF} p (color: #000000} Here's an XHTML document that uses this new element. In this case, I'm creating a formal public identifier (FPI) for the new DTD ("-//Extender//DTD XHTML-Extensions 1.0//EN"). I'm also setting the default namespace to the XHTML namespace, and defining the doc namespace for the <doc:foot> element:
<!DOCTYPE html PUBLIC "-//Extender//DTD XHTML-Extensions 1.0//EN" "http://www.starpowder.com/steve/extend.dtd" > <html xmlns="http://www.w3.org/1999/xhtml" xmlns:doc="http://www.starpowder.com/steve/extend.dtd"> <head> <title> Extending XHTML </title> <link rel="stylesheet" href="extend.css" /> </head> <body> <p> Here is some text. </p> </body> <doc:foot> This is the page's foot. </doc:foot> </html>
And that's all there is to it. Here are the general rules for creating FPIs:
-
The first field in an FPI specifies the connection of the DTD to a formal standard. For DTDs that you're defining yourself, this field should be . If a non-standards body has approved the DTD, use +. For formal standards, this field is a reference to the standard itself (such as ISO/IEC 13449:2000).
-
The second field must hold the name of the group or person that will maintain or be responsible for the DTD. In this case, you should use a name that is unique and that identifies your group easily (for example, the W3C simply uses W3C).
-
The third field must indicate the type of document that is described, preferably followed by a unique identifier of some kind (such as Version 1.0). This part should include a version number that you'll update.
-
The fourth field specifies the language that your DTD uses (for example, for English, you use EN. Note that two-letter language specifiers allow only a maximum of 24 x 24 = 576 possible languages; expect to see three- letter language specifiers in the near future).
-
Fields in an FPI must be separated by double slash (//).
So far, I've only extended XHTML 1.0. The process is similar in XHTML 1.1, but you have to know how to integrate new elements into the XHTML 1.1 content models; to do that, you have to know how XHTML 1.1 modules work.
All About XHTML 1.1 Modules
The XHTML 1.1 DTD is a driver DTD that includes DTD modules. A DTD module is a section of a DTD that has two parts an abstract part, which specifies what the DTD does in human-readable language, and the module itself, which is a DTD fragment that contains element types, a set of attribute list declarations, and a set of content model declarations.
You can find the XHTML 1.1 driver DTD at http://www.w3.org/TR/xhtml11/xhtml11_dtd.html#a_xhtml11_driver, and the actual implementation of the XHTML 1.1 modules (there's one for forms, one for text, one for images, and so on) at http://www.w3.org/TR/xhtmlmodularization/dtd_module_defs.html#a_xhtml11_modules. You'll find the XHTML 1.1 modules listed in Table 17.1.
| Module | Contents |
|---|---|
| xhtml-applet.module | Java Applet Element Module |
| xhtml-base.module | Base Element Module |
| xhtml-bdo.module | BIDI Override Module |
| xhtml-csismap.module | Client-side Image Map Module |
| xhtml-edit.module | Edit Module (<del> and <ins>) |
| xhtml-events.module | Events Module |
| xhtml-form.module | Forms Module |
| xhtml-framework.module | Modular Framework Module |
| xhtml-hypertext.module | Hypertext Module |
| xhtml-image.module | Image Module |
| xhtml-link.module | Link Element Module |
| xhtml-list.module | Lists Module |
| xhtml-meta.module | Document Metainformation Module |
| xhtml-param.module | Param Element Module |
| xhtml-postfw-redecl.module | Post-Framework Redeclaration Module |
| xhtml-prefw-redecl.module | Pre-Framework Redeclaration Module |
| xhtml-pres.module | Presentation Module |
| xhtml-ruby.module | Ruby Module |
| xhtml-script.module | Scripting Module |
| xhtml-ssismap.module | Server-side Image Map Module |
| xhtml-struct.module | Document Structure Module |
| xhtml-style.module | Stylesheets Module |
| xhtml-table.module | Tables Module |
| xhtml-text.module | Basic Text Module |
Each module has two parts, and I'll take a look at them here in overview.
XHTML 1.1 Abstract Modules
Each XHTML 1.1 module has an description called an abstract module that specifies what elements and attributes are in the module, and gives a minimal content model for each element. You can find these abstract versions of the XHTML 1.1 modules at http://www.w3.org/TR/xhtml-modularization/xhtml_modules.html#s_xhtmlmodules. An abstract module is really just a table listing the elements, attributes, and minimal content models in the module. For example, the Basic Text abstract module appears in Table 17.2.
| Element | Attributes | Minimal Content Model |
|---|---|---|
| abbr | Common | (PCDATA | Inline)* |
| acronym | Common | (PCDATA | Inline)* |
| address | Common | (PCDATA | Inline)* |
| blockquote | Common, cite | (PCDATA | Heading | Block)* |
| br | Core | EMPTY |
| cite | Common | (PCDATA | Inline)* |
| code | Common | (PCDATA | Inline)* |
| dfn | Common | (PCDATA | Inline)* |
| div | Common | (Heading |Block | List)* |
| em | Common | (PCDATA | Inline)* |
| h1 | Common | (PCDATA | Inline)* |
| h2 | Common | (PCDATA | Inline)* |
| h3 | Common | (PCDATA | Inline)* |
| h4 | Common | (PCDATA | Inline)* |
| h5 | Common | (PCDATA | Inline)* |
| h6 | Common | (PCDATA | Inline)* |
| kbd | Common | (PCDATA | Inline)* |
| p | Common | (PCDATA | Inline)* |
| pre | Common | (PCDATA | Inline)* |
| q | Common, cite | (PCDATA | Inline)* |
| samp | Common | (PCDATA | Inline)* |
| span | Common | (PCDATA | Inline)* |
| strong | Common | (PCDATA | Inline)* |
| var | Common | (PCDATA | Inline)* |
The Basic Text abstract module in Table 17.2 lists two attribute groups Common and Core. Here's what they contain:
-
The Common attribute groups contains the class, id, title, dir, xml:lang, style, onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, and onkeyup attributes.
-
The Core attribute group contains the class, id, and title attributes.
The content models in Table 17.2 also use the Heading, Block, and Inline content models; here's what elements they contain:
-
The Heading content model contains <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>.
-
The Block content model contains <address>, <blockquote>, <div>, <p>, and <pre>.
-
The Inline content model contains <abbr>, <acronym>, <br>, <cite>, <code>, <dfn>, <em>, <kbd>, <q>, <samp>, <span>, <strong>, and <var>.
An abstract module like the Basic Text module is only so that you can find out what's in a module it isn't actually used by any software, nor does it appear in any actual module implementation. What actually makes these modules work is their implementations.
XHTML 1.1 Module Implementations
As far as an XML processor is concerned, a module is really just a DTD fragment that is included in a driver DTD. This DTD fragment can contain element declarations, attribute declarations, and content model declarations. You can find the XHTML 1.1 module implementations at http://www.w3.org/TR/xhtml-modularization/dtd_module_defs.html. For example, here's the XHTML 1.1 images module, xhtml11-image-1.mod:
<!-- . --> <!-- XHTML 1.1 Images Module --> <!-- file: xhtml11-image-1.mod This is XHTML XHTML 1.1, a modular variant of XHTML 1.0. Copyright 1998-2000 W3C (MIT, INRIA, Keio), All Rights Reserved. Rovision: $Id: dtd_module_defs.html,v 1.2 2000/01/05 20:58:33 shane Exp $ SMI This DTD module is identified by the PUBLIC and SYSTEM identifiers: PUBLIC "-//W3C//ELEMENTS XHTML 1.1 Images 1.0//EN" SYSTEM "xhtml11-image-1.mod" Revisions: (none) --> <!-- Images img This module provides markup to support basic image embedding. --> <!-- To avoid problems with text-only UAs as well as to make image content understandable and navigable to users of non-visual UAs, you need to provide a description with the 'alt' attribute, and avoid server-side image maps. --> <!ENTITY % Img.element "INCLUDE" > <![%Img.element;[ <!ENTITY % Img.content "EMPTY" > <!ELEMENT img %Img.content; > <!-- end of Img.element -->]]> <!ENTITY % Img.attlist "INCLUDE" > <![%Img.attlist;[ <!ATTLIST img %Common.attrib; src %URI.datatype; #REQUIRED alt %Text.datatype; #REQUIRED longdesc %URI.datatype; #IMPLIED height %Length.datatype; #IMPLIED width %Length.datatype; #IMPLIED > <!-- end of Img.attlist -->]]> <!-- end of xhtml11-image-1.mod -->
DOCUMENT NOTICE for xhtml11-image-1.modCopyright [cw] 1994-2000 World Wide Web Consortium, (Massachusetts Institute of Technology, Institut National de Recherche en Informatique et en Automatique, Keio University). All Rights Reserved. http://www.w3.org/Consortium/Legal/ Public documents on the W3C site are provided by the copyright holders under the following license. The software or Document Type Definitions (DTDs) associated with W3C specifications are governed by the Software Notice. By using and/or copying this document, or the W3C document from which this statement is linked, you (the licensee) agree that you have read, understood, and will comply with the following terms and conditions: Permission to use, copy, and distribute the contents of this document, or the W3C document from which this statement is linked, in any medium for any purpose and without fee or royalty is hereby granted, provided that you include the following on ALL copies of the document, or portions thereof, that you use: A link or URL to the original W3C document. The pre-existing copyright notice of the original author, or if it doesn't exist, a notice of the form: "Copyright [cw] 2000 World Wide Web Consortium, (Massachusetts Institute of Technology, Institut National de Recherche en Informatique et en Automatique, Keio University). All Rights Reserved. http://www.w3.org/Consortium/Legal/" (Hypertext is preferred, but a textual representation is permitted.) If it exists, the STATUS of the W3C document. When space permits, inclusion of the full text of this NOTICE should be provided. We request that authorship attribution be provided in any software, documents, or other items or products that you create pursuant to the implementation of the contents of this document, or any portion thereof. No right to create modifications or derivatives of W3C documents is granted pursuant to this license. However, if additional requirements (documented in the Copyright FAQ) are satisfied, the right to create modifications or derivatives is sometimes granted by the W3C to individuals complying with those requirements. THIS DOCUMENT IS PROVIDED "AS IS," AND COPYRIGHT HOLDERS MAKE NO REPRESENTATIONS OR WARRANTIES, EXPRESS OR IMPLIED, INCLUDING, BUT NOT LIMITED TO, WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE, NON-INFRINGEMENT, OR TITLE; THAT THE CONTENTS OF THE DOCUMENT ARE SUITABLE FOR ANY PURPOSE; NOR THAT THE IMPLEMENTATION OF SUCH CONTENTS WILL NOT INFRINGE ANY THIRD PARTY PATENTS, COPYRIGHTS, TRADEMARKS OR OTHER RIGHTS. COPYRIGHT HOLDERS WILL NOT BE LIABLE FOR ANY DIRECT, INDIRECT, SPECIAL OR CONSEQUENTIAL DAMAGES ARISING OUT OF ANY USE OF THE DOCUMENT OR THE PERFORMANCE OR IMPLEMENTATION OF THE CONTENTS THEREOF. The name and trademarks of copyright holders may NOT be used in advertising or publicity pertaining to this document or its contents without specific, written prior permission. Title to copyright in this document will at all times remain with copyright holders. |
Here's how that module is included in the XHTML 1.1 driver DTD:
<!-- Image Module .. --> <!ENTITY % xhtml-image.module "INCLUDE" > <![%xhtml-image.module;[ <!ENTITY % xhtml-image.mod PUBLIC "-//W3C//ELEMENTS XHTML 1.1 Images 1.0//EN" "xhtml11-image-1.mod" > %xhtml-image.mod;]]>
Note the parameter entity xhtml-image.module here. This entity is set to "INCLUDE" by default, as you see here, but you can set it to "IGNORE" if you want to exclude the image module in a customized version of XHTML 1.1. That W3C calls the XHTML 1.1 DTD fully parameterized, and that's what it means you can include or exclude modules just by changing parameter entities.
You'll find various suffixes used in the XHTML 1.1 driver DTD; for example, the name of the actual image module file is xhtml-image.mod. Here are the suffixes, such as .mod, that you'll find in the XHTML 1.1 driver DTD, along with what they mean. Using these suffixes, you can decipher what the various parameter entities in the DTD do:
| Suffix | Description |
|---|---|
| .attrib | Indicates a group of tokens that indicate attribute specifications. Used in ATTLIST declarations. |
| .class | Groups elements of the same class together. |
| .content | Specifies the content model of a particular element. You specify what elements go inside what other elements with the content model. For example, here's how that looks for the <head> element: <!ENTITY % Head.content "( %Head-opts.mix;, title, %Head-opts.mix; )" >. |
| .mix | Specifies a collection of elements from different classes. |
| .mod | Is used for DTD modules, such as the term xhtml-image.mod that we've already seen. |
| .module | Is used for parameter entities that are used to control inclusion or exclusion of DTD modules. You can set them to INCLUDE (the default) to include a module, or IGNORE to exclude the module. |
Extending XHTML 1.1
As mentioned, extending XHTML 1.1 works much like extending XHTML 1.0, except that integrating the new element into the element hierarchy is a little different. For example, instead of modifying the declaration of the <html> element directly, you modify the Html.content parameter entity, which looks like this in XHTML 1.1:
<!ENTITY % Html.content "( head, body )" >
This means that I can modify the DTD that I developed earlier, extend.dtd, to work with XHTML 1.1 by modifying this content model, adding <doc:foot> and including the entire XHTML 1.1 DTD this way:
<!ELEMENT doc:foot (#PCDATA) > <!ATTLIST doc:foot footattribute CDATA #IMPLIED > <!ENTITY % Html.content "( head, body, doc:foot )" > <!ENTITY % xhtml11.dtd PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> %xhtml11.dtd;
Now I can use this new DTD as we've used the XHTML 1.0 version of extend.dtd:
<!DOCTYPE html PUBLIC "-//Extender//DTD XHTML-Extensions 1.0//EN" "http://www.starpowder.com/steve/extend.dtd" > <html xmlns="http://www.w3.org/1999/xhtml" xmlns:doc="http://www.starpowder.com/steve/extend.dtd"> <head> <title> Extending XHTML </title> <link rel="stylesheet" href="extend.css" /> </head> <body> <p> Here is some text. </p> </body> <doc:foot> This is the page's foot. </doc:foot> </html>
And that's it for our look at XHTML. These two chapters have provided an introduction to the subject, and we've hit the major differences between HTML and XHTML. You're now ready to create XHTML documents of substantial complexity. However, there are more details in XHTML than we can cover in two chapters for example, what attributes are required in each of the more than 100 XHTML elements. For more information, see the W3C XHTML sites using the various URIs that I've listed everything you need is there.
In the next chapter, I'm going to take a look at two more popular XML applications: Resource Description Framework (RDF) and Channel Definition Format (CDF).
| | CONTENTS | |
EAN: 2147483647
Pages: 23