F.3. First XHTML Example

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

[1] All the examples presented in this book are available at www.deitel.com and on the CD-ROM that accompanies the book.

Our first example (Fig. F.1) is an XHTML document named main.html that displays the message "Welcome to XHTML!" in the browser.

Figure F.1. First XHTML example.

 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 

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

10

Internet and WWW How to Program - Welcome 11 12 13

14

Welcome to XHTML!

15 16

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.

Lines 13 are required in XHTML documents to conform with proper XHTML syntax. For now, copy and paste these lines into each XHTML document you create. The meaning of these lines is discussed in detail in Chapter 20, Extensible Markup Language (XML).

Lines 56 are XHTML comments. XHTML document creators insert comments to improve markup readability and 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 F 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 to modify or update it 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 are 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 its title. The head section also can contain special document formatting instructions called style sheets and client-side programs called scripts for creating dynamic Web pages. (We introduce style sheets in Chapter 6 and scripting with JavaScript in Chapter 7.) 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 have 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 equals sign (=). Line 8 specifies a required attribute (xmlns) and value (http://www.w3.org/1999/xhtml) for the html element in an XHTML document. For now, simply copy and paste the html element start tag in line 8 into your XHTML documents. We discuss the details of the html element's xmlns attribute in Chapter 20, Extensible Markup Language (XML).

Common Programming Error F 1

Not enclosing attribute values in either single or double quotes is a syntax error. However, some Web browsers may still render the element correctly.

 

Common Programming Error F 2

Using uppercase letters in an XHTML element or attribute name is a syntax error. However, some Web browsers may still render the element correctly.

 

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 is also 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 that enables them 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.

Good Programming Practice F 3

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

  hello

Common Programming Error F 3

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 F 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 links 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 the text placed between the

and

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

This document ends with two end tags (lines 1516). These tags close the body and html elements, respectively. The 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 Chapter 4 examples onto your machine from the CD that accompanies this book (or download the examples from www.deitel.com).
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 Chapter 4 examples and select the file main.html, then click Open.
5.	Click OK to have Internet Explorer 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. F.1. (Note that we resized the browser window to save space in the book.)