First XHTML Example
This chapter presents XHTML markup and provides screen captures that show how a browser renders (i.e., displays) the XHTML. You can download the examples from www.deitel.com/books/iw3htp4. Every XHTML document we show has line numbers for the reader’s convenience—these line numbers are not part of the XHTML documents. As you read this book, open each XHTML document in your web browser so you can view and interact with it as it was originally intended.
Figure 4.1 is an XHTML document named main.html. This first example displays the message “Welcome to XHTML!” in the browser. The key line in the program is line 13, which tells the browser to display “Welcome to XHTML!” Now let us consider each line of the program.
Lines 1–3 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 14.
Lines 5–6 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. Com-ments do not cause the browser to perform any action when the user loads the XHTML document into the web browser to view it. XHTML comments always start with <!-- and end with -->. Each of our XHTML examples includes comments that specify the figure number and filename and provide a brief description of the example’s purpose. Subse-quent examples include comments in the markup, especially to highlight new features.
XHTML documents delimit an element with start and end tags. A start tag consists of the element name in angle brackets (e.g., <html>). An end tag consists of the element name preceded by a forward slash (/) in angle brackets (e.g., </html>). In this example, lines 7 and 15 define the start and end of the html element. Note that the end tag in line 15 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 7 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 7 into your XHTML documents. We discuss the details of the xmlns attribute in Chapter 14.
An XHTML document divides the html element into two sections—head and body. Lines 8–10 define the web page’s head section with a head element. Line 9 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, in the browser tab that the page is displayed on, 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 indexing purposes.
Line 12 begins the document’s body element. The body section of an XHTML doc-ument specifies the document’s content, which may include text and elements.
Some elements, such as the paragraph element (denoted with <p> and </p>) in line 13, mark up text for display in a browser. All the text placed between the <p> and </p> tags forms one paragraph. When the browser renders a paragraph, a blank line usually pre-cedes and follows paragraph text.
This document ends with two end tags (lines 14–15). These tags close the body and html elements, respectively. The </html> tag in an XHTML document informs the browser that the XHTML markup is complete.
To open an XHTML example from this chapter, open the folder where you saved the book’s examples, browse to the ch04 folder and double click the file to open it in your default web browser. At this point your browser window should appear similar to the sample screen capture shown in Fig. 4.1. (Note that we resized the browser window to save space in the book.)
Copyright © 2018-2020 BrainKart.com; All Rights Reserved. Developed by Therithal info, Chennai.