xhtml1 building document structure chapter 2. xhtml2 objectives in this chapter, you will: learn how...

XHTML 1

Building Document Structure

Chapter 2

XHTML 2

Objectives

In this chapter, you will:

• Learn how to create Extensible Hypertext Markup Language (XHTML) documents

• Work with XHTML Document Type Definitions (DTDs)

• Study XHTML elements and attributes

• Learn about required XHTML elements

• Study basic XHTML elements

XHTML 3

• XHTML version 1.0 introduced in 2000

• It provides a consistent standard for creating Web pages that can function on different user agents, including mobile phones and Personal Digital Assistants (PDAs)

• This is accomplished through the use of three DTDs: Transitional, Frameset, and Strict

• Even though the XHTML DTDs are an improvement over HTML, they may still be too large for many types of user agents

Creating XHTML Documents

XHTML 4

• Many of the elements found in XHTML 1.0, such as graphics, tables, and frames, may not be useable on many user agents, such as PDAs or mobile phones

• One big difference between XML and XHTML:

– Whereas XML does not contain any predefined elements, XHTML contains almost all the elements that are available in HTML

Creating XHTML Documents

XHTML 5

Backward Compatibility

• To be backward compatible with older browsers, you save XHTML documents with an extension of .html or .htm, just like HTML documents

• You must follow several rules to ensure that the code within your XHTML documents is also backward compatible

• XML requires that empty elements include a slash before the closing bracket to close the element

XHTML 6

Backward Compatibility

• Older browsers that do not support XML ignore the

element when they see the slash immediately

following the element name in an empty element

• You can ensure that older browsers are able to read empty elements in a well-formed XHTML document by adding a space between the element name and the closing slash

XHTML 7

The <!DOCTYPE> Declaration

• An XHTML document must include a <!DOCTYPE> declaration and the <html>, <head>, and <body> elements

• The <!DOCTYPE> declaration states the XHTML version of the document and the XHTML DTD (Transitional, Frameset, or Strict) with which the document complies

XHTML 8

XHTML DTDs

• The World Wide Web Consortium (W3C)

created XHTML to make the transition to

XML-based Web pages easier

• To facilitate the transition, the W3C provided

three types of XHTML DTDs: Transitional,

Frameset, and Strict

XHTML 9

Transitional DTD

• Elements and attributes that are considered to be obsolete and that will eventually be eliminated are said to be deprecated

• The Transitional DTD allows you to continue using deprecated elements along with the well-formed document requirements of XML

XHTML 10

Transitional DTD

XHTML 11

Frameset DTD

• The Frameset DTD is identical to the transitional DTD, except that it includes the <frameset> and <frame> elements

• Allows you to split the browser window into two or more frames, which are independent, scrollable portions of a Web browser window, with each frame capable of displaying a separate URL

XHTML 12

Strict DTD

• The Strict DTD eliminates the elements that were deprecated in the Transitional DTD and Frameset DTD

• The <!DOCTYPE> declaration for the Strict DTD is as follows:

<!DOCTYPE html PUBLIC

“-//W3C//DTD XHTML 1.0 Strict//EN”

http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd>

XHTML 13

Validating Web Pages

• To ensure that an XHTML document is well formed and that its elements are valid, you need to use a validating parser

• Validation checks that your XHTML document is well formed, and that the elements in your document are correctly written according to the element definitions in an associated DTD

• You are not actually required to validate XHTML documents

XHTML 14


• If you do not validate an XHTML document and it contains errors, most Web browsers will probably treat it as an HTML document, ignore the errors, and render the page anyway

• Many XHTML validating parsers exist

– One of the best available is the W3C MarkUp Validation Service, a free service that validates both HTML and XHTML

– The W3C MarkUp Validation Service is located at http://validator.w3.org

XHTML 15


XHTML 16

XHTML Elements and Attributes

• The data contained within an element’s

opening and closing tags is referred to as its

content

• You must close empty elements by adding a

space and a slash before the tag’s closing

bracket

XHTML 17

Block-Level and Inline Elements

• Two basic types of elements can appear within a document’s <body> element: block-level and inline

– Block-level elements are elements that give a Web page its structure

– Inline, or text-level, elements describe the text that appears on a Web page

– Unlike block-level elements, inline elements do not appear on their own lines; they appear within the line of the block-level element that contains them

XHTML 18

Block-Level and Inline Elements

XHTML 19

Standard Attributes

• You place attributes before the closing bracket of the starting tag, and you separate them from the tag name or other attributes with a space

• Many XHTML attributes are unique to a specific element or can only be used with certain types of elements

• XHTML also includes several standard, or common, attributes that are available to almost every element, with a few exceptions

XHTML 20

Standard Attributes

XHTML 21

Standard Attributes

• In order to be a considerate resident of the international world of the Web, you should designate the language of your elements using the lang and xml:lang attributes

• The lang attribute is used in HTML documents, whereas the xml:lang attribute is used in XML-based documents

XHTML 22

Boolean Attributes

• A Boolean attribute specifies one of two values: true or false

• The presence of a Boolean attribute in an element’s opening tag indicates a value of “true”, whereas its absence indicates a value of “false”

• When a Boolean attribute is not assigned a value, it is referred to as having a minimized form

• Recall that all attribute values must appear within quotation marks

XHTML 23

Boolean Attributes

• This syntax also means that an attribute must be assigned a value

– For this reason, minimized Boolean attributes are illegal in XHTML

• You can still use Boolean attributes in XHTML provided you use their full form

• You create the full form of a Boolean attribute by assigning the name of the other attribute itself as the attribute’s value

XHTML 24

Required Elements

• To better understand how an XHTML

document is structured, in this section you

study in detail the three elements that must

be included in every XHTML document: the

<html>, <head>, and <body> elements

XHTML 25

The <html> Element

• All HTML documents must include an <html> element, which tells a Web browser that the instructions between the opening and closing <html> tags are to be assembled into an HTML document

• The <html> element is required and contains all the text and other elements that make up the HTML document

• The <html> element is also the root element for XHTML documents and is required for XHTML documents to be well formed

XHTML 26

The XHTML Namespace• All of the predefined elements in an XHTML document

are organized within the XHTML namespace that you declare in the <html> element

• In order to understand what a namespace is, recall that you must define your own elements and attributes in an XML document

• You identify each element by the namespace to which it belongs

• A namespace organizes the elements and attributes of an XML document into separate groups

XHTML 27

The XHTML Namespace• For elements, you add the namespace and colon

before the tag name in both the opening and closing tags

• A default namespace is applied to all of the elements and attributes in an XHTML document, with the exception of elements and attributes to which local namespaces have been applied

• You specify a default namespace for an XHTML document by using the xmlns namespace attribute in the <html> element

XHTML 28

The Document Head

• The elements within a document’s head section contain information about the Web page itself

• The document head does not actually display any information in a browser

– Rather, it is a parent element that can contain several child elements

• A parent element is an element that contains other elements, known as child elements

XHTML 29

Child Elements of the <head> Element

XHTML 30

The Document Body

• The document body is represented by the <body> element and contains other elements that define all of the content a user sees rendered in a browser

• XHTML documents consist of elements that contain content, as opposed to HTML documents, which consist of content that contains elements

• In HTML, you can also use various attributes in the <body> element that affect the appearance of the document, such as the bgcolor attribute for setting the background color and the text attribute for setting the default color of text

XHTML 31

Basic Body Elements

• Basic body elements such as the <p> and <br />

elements are some of the most frequently used

elements in Web page authoring

XHTML 32

Headings

• Heading elements are used for emphasizing a document’s headings and subheadings, which helps provide structure by hierarchically organizing a document’s content

• There are six heading elements, <h1> through <h6>

XHTML 33

Animal Kingdom Headings

XHTML 34

Paragraphs and Line Breaks• The paragraph (<p>) and line-break (<br />)

elements provide the simplest way of adding white space to a document

• White space refers to the empty areas on a page

– It makes a page easier to read and is more visually appealing

– It is tempting for beginning Web page authors to try and pack each page with as much information as possible, but experienced Web page authors know that the presence of white space is critical to the success of a page, whether you are creating a Web page or a traditional printed page

XHTML 35

Paragraphs and Line Breaks

XHTML 36

Horizontal Rules

• The empty horizontal-rule (<hr />) element draws a horizontal rule on a Web page that acts as a section divider

• Horizontal rules are useful visual elements for breaking up long documents

• Although the <hr /> element is technically a block-level element, it cannot contain any content because it is an empty element

XHTML 37

Comments

• Comments are nonprinting lines that you place in your code to contain various types of remarks, including your name and the date you wrote the code, notes to yourself, copyright information, or instructions to future Web page authors and developers who may need to modify your work

• XHTML comments begin with an opening comment tag <!– and end with a closing comment tag -->

XHTML 38

Web Page with Comments

XHTML 39

Summary

• The <!DOCTYPE> declaration states the Extensible Hypertext Markup Language (XHTML) version of the document and the XHTML Document Type Definitions (DTD) with which the document complies

• Elements and attributes that are considered to be obsolete and that will eventually be eliminated are said to be deprecated

• The Transitional DTD allows you to continue using deprecated elements along with the well-formed document requirements of Extensible Markup Language (XML)

XHTML 40

Summary

• The Frameset DTD is identical to the Transitional DTD, except that it includes the <frameset> and <frame> elements, which allow you to split the browser window into two or more frames

• The Strict DTD eliminates the elements that were deprecated in the Transitional DTD and Frameset DTD

• Validation checks that your XHTML document is well formed and that the elements in your document are correctly written according to the element definitions in an associated DTD

XHTML 41

Summary

• All XHTML documents, regardless of whether they use the Transitional, Strict, or Frameset DTD, use the namespace identified by the following URI: http://www.w3.org/1999/xhtml

• A parent element refers to an element that contains other elements, known as child elements

• The horizontal rule (<hr />) element draws a horizontal rule on a Web page that acts as a section divider