J.3. First XHTML Example

In this appendix, we present XHTML markup and provide screen captures that show how Internet Explorer renders (i.e., displays) the XHTML. Every XHTML document we show has line numbers for the reader's convenience. These line numbers are not part of the XHTML documents.

Our first example (Fig. J.1) is an XHTML document named main.html that displays the message Welcome to XHTML! in the browser. The key line in the program is line 14, which tells the browser to display Welcome to XHTML! Now let us consider each line of the program.

Figure J.1. First XHTML example.

"http://www.w3.org/1999/xhtml"> 9 10

 1  "1.0"?>
 2  "-//W3C//DTD XHTML 1.1//EN"
 3 "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
 4
 5 
 6 
 7
 8 

Our first Web page 11 12 13

14

Welcome to XHTML!

15 16

---

Lines 13 are required in XHTML documents to conform with proper XHTML syntax. Lines 56 are XHTML comments. XHTML document creators insert comments to improve markup readability and to describe the content of a document. Comments also help other people read and understand an XHTML document's markup and content. Comments do not cause the browser to perform any action when the user loads the XHTML document into the Web browser to view the document. XHTML comments always start with . Each of our XHTML examples includes comments that specify the figure number and file name and provide a brief description of the example's purpose. Subsequent examples include comments in the markup, especially to highlight new features.

Good Programming Practice J.2

Place comments throughout your markup. Comments help other programmers understand the markup, assist in debugging and list useful information that you do not want the browser to render. Comments also help you understand your own markup when you revisit a document for modifications or updates in the future.

 

XHTML markup contains text that represents the content of a document and elements that specify a document's structure. Some important elements of an XHTML document include the html element, the head element and the body element. The html element encloses the head section (represented by the head element) and the body section (represented by the body element). The head section contains information about the XHTML document, such as the title of the document. The head section also can contain special document-formatting instructions called style sheets and client-side programs called scripts for creating dynamic Web pages. The body section contains the page's content that the browser displays when the user visits the Web page.

XHTML documents delimit an element with start and end tags. A start tag consists of the element name in angle brackets (e.g.,

). An end tag consists of the element name preceded by a / in angle brackets (e.g., ). In this example, lines 8 and 16 define the start and end of the html element. Note that the end tag in line 16 has the same name as the start tag, but is preceded by a / inside the angle brackets. Many start tags define attributes that provide additional information about an element. Browsers can use this additional information to determine how to process the element. Each attribute has a name and a value, separated by an equal sign (=). Line 8 specifies a required attribute (xmlns) and value (http://www.w3.org/1999/xhtml) for the html element in an XHTML document.

Common Programming Error J.1

Not enclosing attribute values in either single or double quotes is a syntax error.

 

Common Programming Error J.2

Using uppercase letters in an XHTML element or attribute name is a syntax error.

 

An XHTML document divides the html element into two sectionshead and body. Lines 911 define the Web page's head section with a head element. Line 10 specifies a title element. This is called a nested element, because it is enclosed in the head element's start and end tags. The head element also is a nested element, because it is enclosed in the html element's start and end tags. The title element describes the Web page. Titles usually appear in the title bar at the top of the browser window and also as the text identifying a page when users add the page to their list of Favorites or Bookmarks, which enable users to return to their favorite sites. Search engines (i.e., sites that allow users to search the Web) also use the title for cataloging purposes.

---

[Page 1329]

Good Programming Practice J.3

Indenting nested elements emphasizes a document's structure and promotes readability.

 

Common Programming Error J.3

hello

XHTML does not permit tags to overlapa nested element's end tag must appear in the document before the enclosing element's end tag. For example, the nested XHTML tags

cause a syntax error, because the enclosing head element's ending tag appears before the nested title element's ending tag.

 

Good Programming Practice J.4

Use a consistent title naming convention for all pages on a site. For example, if a site is named "Bailey's Web Site," then the title of the main page might be "Bailey's Web SiteLinks." This practice can help users better understand the Web site's structure.

 

Line 13 opens the document's body element. The body section of an XHTML document specifies the document's content, which may include text and tags.

Some tags, such as the paragraph tags (

and

) in line 14, mark up text for display in a browser. All text placed between the

and

tags form one paragraph. When the browser renders a paragraph, a blank line usually precedes and follows paragraph text.

This document ends with two closing tags (lines 1516). These tags close the body and html elements, respectively. The ending tag in an XHTML document informs the browser that the XHTML markup is complete.

To view this example in Internet Explorer, perform the following steps:

1.	Copy the Appendix J examples onto your machine (these examples are available on the CD-ROM that accompanies this book).
2.	Launch Internet Explorer, and select Open... from the File Menu. This displays the Open dialog.
3.	Click the Open dialog's Browse... button to display the Microsoft Internet Explorer file dialog.
4.	Navigate to the directory containing the Appendix J examples, and select the file main.html; then click Open.
5.	Click OK to have Internet Explorer (or any other browser) render the document. Other examples are opened in a similar manner.

At this point, your browser window should appear similar to the sample screen capture shown in Fig. J.1.

[Page 1330]

J 4 Headers