X-2 - James Bac Dang
Download
Report
Transcript X-2 - James Bac Dang
Building Document Structure
Chapter 2
XHTML Introductory
1
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 Introductory
2
Creating XHTML Documents
• 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
XHTML Introductory
3
Creating XHTML Documents
• 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
XHTML Introductory
4
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 Introductory
5
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 Introductory
6
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 Introductory
7
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 Introductory
8
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 Introductory
9
Transitional DTD
XHTML Introductory
10
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 Introductory
11
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 Introductory
12
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 Introductory
13
Validating Web Pages
• 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 Introductory
14
Validating Web Pages
XHTML Introductory
15
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 Introductory
16
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 blocklevel element that contains them
XHTML Introductory
17
Block-Level and Inline Elements
XHTML Introductory
18
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 Introductory
19
Standard Attributes
XHTML Introductory
20
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 Introductory
21
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 Introductory
22
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 Introductory
23
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 Introductory
24
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 Introductory
25
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 Introductory
26
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 Introductory
27
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 Introductory
28
Child Elements of the <head>
Element
XHTML Introductory
29
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 Introductory
30
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 Introductory
31
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 Introductory
32
Animal Kingdom Headings
XHTML Introductory
33
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 Introductory
34
Paragraphs and Line Breaks
XHTML Introductory
35
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 blocklevel element, it cannot contain any content because
it is an empty element
XHTML Introductory
36
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 Introductory
37
Web Page with Comments
XHTML Introductory
38
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 Introductory
39
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 Introductory
40
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
XHTML Introductory
41