Upgrading to XHTML DECO 3001 Tutorial 1 – Part 2
Download
Report
Transcript Upgrading to XHTML DECO 3001 Tutorial 1 – Part 2
Upgrading to XHTML
DECO 3001 Tutorial 1 – Part 2
Presented by Ji Soo Yoon
19 February 2004
Slides adopted from http://faculty.northseattle.edu/jkent/it111/lecture_notes.html,
http://www.w3schools.com/xhtml/default.asp, http://www.pint.com/classes,
http://wally.cs.iupui.edu/n241-new/ and Beginning XHTML ©2000 Wrox Press
Creating XHTML Documents
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 such as PDAs or mobile
phones
Many of the elements found in XHTML 1.0, such as
graphics, tables, and frames, may not be useable on
many user agents
Document Type Definition (DTD)
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 DTDs
W3C Recommendation: Use a Document Type Definition to identify the type of markup
language used in a web page
XHTML 1.0 Strict
XTML 1.0 Transitional
May be considered to be the ‘core’ XHTML DTD
Use this when you want really clean markup, free of presentational clutter
Use this together with Cascading Style Sheets
Use this whenever possible
Contains everything that is within the Strict DTD plus some additional tags and attributes
Likely to be phased out in future versions of XHTML
This is the least strict specification for XHTML 1.0
Use this when you need to take advantage of HTML's presentational features
Use this when you want to support browsers that don't understand Cascading Style Sheets
XHTML 1.0 Frameset
Contains everything that is within the Strict DTD plus some additional tags and attributes
Likely to be phased out in future versions of XHTML
Use this when you want to use HTML Frames to partition the browser window into two or more
frames
Strict DTD
The Strict DTD eliminates the
elements that were deprecated in the
Transitional DTD and Frameset DTD
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.
Transitional DTD
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
DOCTYPE
All documents begin with a <!DOCTYPE> declaration
The <!DOCTYPE> declaration states the XHTML version of the
document and the XHTML DTD (Transitional, Frameset, or Strict)
with which the document complies
Modern browsers are aware of the <!DOCTYPE> and will
examine it to determine what rendering mode to enter
(standards vs. quirk)
Using the <!DOCTYPE> declaration allows validation software
to identify the DTD being followed in a document, and verify
that the document is syntactically correct
all tags used are part of a particular specification and are being
used correctly
The <!DOCTYPE> Declaration
XHTML Version
DOCTYPE
XTHML 1.0 Strict
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
XHTML 1.0 Transitional
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
XHTML 1.0 Frameset
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
XHTML 1.1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
XHTML 2.0 (still in
progress)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 2.0//EN" "
http://www.w3.org/TR/xhtml2/DTD/xhtml2.dtd ">
XHTML Version Summary
XHTML Version
Description
XTHML 1.0 Strict
A reformulation of HTML 4.0 strict using XML. This language is rule
enforcing and leaves all presentation duties to technologies such as
Cascading Style Sheets (CSS).
XHTML 1.0 Transitional
A reformulation of HTML as an XML application. The transitional
form preserves many of the basic presentation features of HTML 4.0
transitional but applies the strict syntax rules of XML to HTML.
XHTML 1.1
A minor change to XHTML 1.0 that restructures the definition of
XHTML 1.0 to modularize it for easy extension. It is not commonly
used at the time of this writing and offers minor gains over XHTML
1.0.
XHTML 2.0 (still in
progress)
A new implementation of XHTML circa 2003 that may not provide
backward compatibility with XHTML 1.0 and traditional HTML.
XHTML 2 will likely remove most or all presentational tags left in
HTML and will introduce even more logical ideas to the language.
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
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
Block-Level
Inline Elements 2
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
Standard Attributes 2
Standard Attributes 3
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
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
Boolean Attributes 2
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
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
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
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
The XHTML Namespace 2
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
The <head> Element
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
Child Elements of
the <head> Element
A parent element is an element that
contains other elements, known as child
elements
The <body> Element
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
The <body> Element 2
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
Basic body elements such as the <p> and <br />
elements are some of the most frequently used
elements in Web page authoring
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>
Paragraphs and Line Breaks
The paragraph (<p> … </p>) and linebreak (<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
Paragraphs and Line Breaks 2
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
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
Comments
Comments are nonprinting lines that
you place in your code to contain
various types of remarks
XHTML comments begin with an
opening comment tag <!– and end
with a closing comment tag -->
First XHTML Page
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC "//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xml:lang="en" lang="en">
<head>
<title>My First XHTML Document</title>
</head>
<body>
<h2>My First HTML Document</h2>
<hr />
<p>Hello, visitor</p>
<!-- No simple "Hello World" here -->
<p>Greetings from <a href=“http://…"> Ji Soo
Yoon</a></p>
<p>This page written by:
<cite>Ji Soo Yoon</cite>
<br />
© 2004 and beyond</p>
<p>Checking this page for validation <a href=“http://..">
click here</a></p>
</body>
</html>
For More Information
World Wide Web Consortium
Greg’s Web
http://www.arch.usyd.edu.au/~g_smith
W3Schools
http://www.w3.org
http://www.w3schools.com
XHTML with examples
http://wdvl.internet.com/Authoring/Languages/XML/XHTML/