The information needed to create a complete XML document that will work in an XML-compliant browser such as Internet Explorer 5 is presented over the course of several chapters in this book. We will begin in this chapter by building a well-formed XML document that will always default to standard HTML. Any browser can read this document. We will use XML Notepad to create an XML Web document using a simple user interface.
XML Notepad enables us to focus on working with elements, attributes, and comments and to properly position them in the document structure. XML Notepad will handle the complexities of writing the XML document in a well-formed manner. In the section "The Final XML Document" later in this chapter, you'll find a review of the code created by XML Notepad. To create the initial document structure, follow these steps:
Figure 3-1 shows XML Notepad after you've made these changes.
Figure 3-1. XML Notepad, showing the root element and two child elements.
In this example, we will build a simple help desk Web page that uses a table to properly place the page elements in the Web browser. The Web page is shown in Figure 3-2.
Figure 3-2. Sample help desk Web page.
The table consists of two rows and two columns, for a total of four table cells, as shown in Figure 3-3. Notice that the title spans the two columns in the first row.
Figure 3-3. The four table cells.
In the following section, we'll create a generic template for producing Web pages that follow this design. These pages will use tables for formatting text and lists for presenting information.
To complete the head element, follow these steps:
The completed head element is shown in Figure 3-4.
Figure 3-4. The completed head element in XML Notepad.
Figure 3-5. Source code for the completed head element.
As you can see, this source code looks a lot like HTML. This document meets the requirements for a well-formed XML document, but it can also be used as an HTML document with a little work. Three of the elements are empty elements: <title/>, <base target=""/>, and <body/>. XML uses the singleton format to denote an empty element, which is not recognized by HTML. To modify these elements so that HTML Web browsers can read them, they should be written as follows:
<title></title> <base target=""></base> <body></body> |
We could leave the title and body elements as singletons since a Web browser reading this as an HTML document will simply ignore them. However, we don't want a Web browser to ignore the empty base element because it has the target attribute associated with it. The base element is supposed to be empty because it exists only as a container for its target attribute. We should change the base element to <base target=""></base>, but this cannot be done in XML Notepad. If you edit the document in a regular text editor and change this element, XML Notepad will change it back to the singleton when it reads the file.
We can prevent XML Notepad from converting the element back to a singleton by adding a comment to the element. To do so, click on base and choose Comment from the Insert menu, and then add the following comment value in the right pane of XML Notepad:
Default link for page |
The source code will now look as follows:
<base target=""><!--Default link for page--></base> |
This added comment solves the empty element problem without having to resort to any ugly hacks.
These problems are caused by the fact that HTML doesn't understand singletons. You will encounter these difficulties when you XMLize currently existing HTML document structures.
Now that we have completed the head section, we can next make the body section. The body section will contain the information that will be displayed in the browser. To complete the body element, follow these steps:
Default display colors for entire body |
Figure 3-6 shows the modified body element.
Figure 3-6. The body element, with attributes and elements added.
To complete the basefont element, you need to add a size attribute and the following comment:
Size is default font size for body; values should be 1 through 7 (3 is usual browser default). |
Once again, the comment solves the problem of the empty tag.
NOTE
Although we have placed constraints on the possible values for size, you will not be able to verify whether the correct values are used unless you create a DTD. You'll learn how to do this in Chapter 4.
This a element will act as an anchor for the top of the page. Add the following attributes to the a element: name, href, and target, and then add the following comment to the name attribute:
Anchor for top of page |
To complete the table element, follow these steps:
Rules/frame is used with border. |
Figure 3-7. Adding a tr element to the table element.
Either rowspan or colspan can be used, but not both. Valign: top, bottom, middle |
Next we will add a child element to td named CellContent. CellContent is not recognized by HTML, so HTML Web browsers will ignore the tag. We will use CellContent to identify the type of information being stored in the cell. This information can be used later by applications to help identify the content in the Web site.
The CellContent element will contain a series of tags that can be used as a template to create the content that will go into the cell. To keep things organized, h1, h2, h3, and h4 headers could be used. To keep this example simple, we will use only an h1 child element. Below each header will be a paragraph. Within the paragraph will be a series of elements that can be arranged as necessary to build the cell.
To complete the CellContent element, follow these steps:
All of the elements below can be used in any order within the p element. You must remove the li elements from ul and ol if they are not used. |
Border is thickness in pixels. Align = right, left The hspace and vspace attributes represent padding between image and text in pixels. |
Clear = left, right, all; used to prevent text wrapping around an image |
Figure 3-8 shows what the structure of your XML document should look like at this point.
Figure 3-8. The structure of the img and br elements.
Type: circle, square, disk |
Type: A for caps, a for lowercase, I for capital roman numerals, i for lowercase roman numerals, 1 for numeric |
Figure 3-9 shows the completed CellContent element.
Figure 3-9. XML Notepad, showing the CellContent element.
NOTE
Several elements in Figure 3-9, such as the img and br elements, are collapsed.
You have now created a basic XML template that can be used to build Web pages. In the next section, we will build a Web help page using this XML document.