Download introXHTML_HTMLtoXHTML - Department of Computer and

Introducing XHTML:
Module B: HTML to XHTML
CSCI N241: Fundamentals of Web Design
Copyright ©2004  Department of Computer & Information Science
Goals
• Understand how XHTML evolved as a
language for Web delivery
• Understand the importance of DTDs
• Understand how to validate
XML/XHTML markup
• Understand how XML/XHTML differ
from HTML
N241: Fundamentals of Web Development
Copyright ©2004  Department of Computer & Information Science
The Evolution of XHTML
• The Web is expanding to other
media, called user agents, which are
devices that are capable of retrieving
and processing HTML and XHTML
documents
N241: Fundamentals of Web Development
Copyright ©2004  Department of Computer & Information Science
The Evolution of XHTML
• A user agent can be a traditional Web
browser or a device such as a mobile
phone or PDA, or even an application
that simply collects and processes
data instead of displaying it
• HTML is not suitable for user agents
other than Web browsers
N241: Fundamentals of Web Development
Copyright ©2004  Department of Computer & Information Science
The Evolution of XHTML
• HTML has evolved into a markup
language that is more concerned with
how data appears than with the data
itself
• Current and older versions of Web
browsers allow you to write sloppy
HTML code
N241: Fundamentals of Web Development
Copyright ©2004  Department of Computer & Information Science
The Evolution of XHTML
• Languages based on SGML use a
Document Type Definition, or DTD,
to define the tags and attributes that
you can use in a document, and the
rules the document must follow when it
includes them
N241: Fundamentals of Web Development
Copyright ©2004  Department of Computer & Information Science
The Evolution of XHTML
• When a document conforms to an
associated DTD, it is said to be valid
• When a document does not conform to
an associated DTD, it is said to be
invalid
N241: Fundamentals of Web Development
Copyright ©2004  Department of Computer & Information Science
The Evolution of XHTML
• You can check whether a document
conforms to an associated DTD by
using a program called a validating
parser
N241: Fundamentals of Web Development
Copyright ©2004  Department of Computer & Information Science
The Evolution of XHTML
• Because HTML is based on SGML, it
requires a DTD, and the HTML DTD
is built directly into Web browsers
• When a Web browser opens an
HTML document, it first compares the
document to the DTD
N241: Fundamentals of Web Development
Copyright ©2004  Department of Computer & Information Science
The Evolution of XHTML
• If an HTML document is missing any
required tags, the HTML DTD
supplies them, allowing the Web
browser to render the page correctly
N241: Fundamentals of Web Development
Copyright ©2004  Department of Computer & Information Science
The Basics of XML
• Extensible Markup Language, or XML,
is used for creating Web pages and
defining and transmitting data between
applications
• Like HTML, XML is based on SGML
N241: Fundamentals of Web Development
Copyright ©2004  Department of Computer & Information Science
The Basics of XML
• Version 1.0 of XML achieved
recommendation status by the W3C in
1998 and was still current at the time
of this writing
N241: Fundamentals of Web Development
Copyright ©2004  Department of Computer & Information Science
The Basics of XML
• In XML you refer to a tag pair and the
data it contains as an element
• All elements must have an opening
and a closing tag
• The data contained within an
element’s opening and closing tags is
referred to as its content
N241: Fundamentals of Web Development
Copyright ©2004  Department of Computer & Information Science
The XML Declaration
• XML documents should begin with an
XML declaration
• Specifies the version of XML being
used
N241: Fundamentals of Web Development
Copyright ©2004  Department of Computer & Information Science
The XML Declaration
• Not required to include an XML
declaration because currently only
one version of XML exists, version
1.0
• The encoding attribute of the XML
declaration designates the language
used by the XML document
N241: Fundamentals of Web Development
Copyright ©2004  Department of Computer & Information Science
The XML Declaration
• It’s a good practice to always include
the XML declaration because XML
will almost certainly evolve into other
versions that will contain features not
found in version 1.0
N241: Fundamentals of Web Development
Copyright ©2004  Department of Computer & Information Science
Parsing XML Documents
• When a document adheres to XML’s
syntax rules, it is said to be well
formed
• You will study XML’s rules for writing
well formed documents
N241: Fundamentals of Web Development
Copyright ©2004  Department of Computer & Information Science
Parsing XML Documents
• You use a program called a parser to
check whether an XML document is
well formed
• Two types of parsers: non-validating
and validating
N241: Fundamentals of Web Development
Copyright ©2004  Department of Computer & Information Science
Parsing XML Documents
• A non-validating parser simply checks
whether an XML document is well
formed
• A validating parser checks whether an
XML document is well formed and if it
conforms to an associated DTD
N241: Fundamentals of Web Development
Copyright ©2004  Department of Computer & Information Science
Writing Well-Formed
Documents
• Well-formed XML documents allow
user agents to read the document’s
data easily
N241: Fundamentals of Web Development
Copyright ©2004  Department of Computer & Information Science
Writing Well-Formed
Documents
• User agents expect XML data to be
structured according to specific rules,
which allows the user agent to read
data quickly without having to
decipher the data structure
N241: Fundamentals of Web Development
Copyright ©2004  Department of Computer & Information Science
All XML Documents Must Have
a Root Element
• A root element contains all the other
elements in a document.
• The <html>…</html> element is
the root element for HTML
documents, although most Web
browsers do not require a document
to include it.
N241: Fundamentals of Web Development
Copyright ©2004  Department of Computer & Information Science
All XML Documents Must Have
a Root Element
• XML documents, however, require a
root element that you define yourself
N241: Fundamentals of Web Development
Copyright ©2004  Department of Computer & Information Science
XML is Case Sensitive
• Unlike HTML tags, XML tags are case
sensitive
• With XML, you cannot mix the case of
elements
N241: Fundamentals of Web Development
Copyright ©2004  Department of Computer & Information Science
XML is Case Sensitive
• If you use a different case for an
opening and closing tag, they will be
treated as completely separate tags,
resulting in a document that is not
well formed
N241: Fundamentals of Web Development
Copyright ©2004  Department of Computer & Information Science
All XML Elements Must Have
Closing Tags
• XML is designed to organize data, not
display it.
• As a result, instead of documents
consisting of text that contains
elements, as is the case with HTML,
XML documents consist of elements
that contain text.
N241: Fundamentals of Web Development
Copyright ©2004  Department of Computer & Information Science
All XML Elements Must Have
Closing Tags
• All elements must have a closing tag
or the document will not be well
formed.
N241: Fundamentals of Web Development
Copyright ©2004  Department of Computer & Information Science
XML Elements Must Be
Properly Nested
• Nesting refers to how elements are
placed inside other elements
<p><b><i>
This paragraph is bold
and italicized.
</i></b></p>
N241: Fundamentals of Web Development
Copyright ©2004  Department of Computer & Information Science
XML Elements Must Be
Properly Nested
• In an HTML document, it makes no
difference how the elements are
nested.
• XML documents require that tags be
closed in the opposite order in which
they were opened.
N241: Fundamentals of Web Development
Copyright ©2004  Department of Computer & Information Science
Attribute Values Must Appear
Within Quotation Marks
• In HTML, an attribute value can be
placed inside quotation marks or they
may be left off.
• With XML, you must place quotation
marks around the values assigned to
an attribute
N241: Fundamentals of Web Development
Copyright ©2004  Department of Computer & Information Science
Empty Elements Must Be
Closed
• Several elements in HTML do not
have corresponding ending tags,
including the <hr> element, which
inserts a horizontal rule into the
document, and the <br> element,
which inserts a line break.
N241: Fundamentals of Web Development
Copyright ©2004  Department of Computer & Information Science
Empty Elements Must Be
Closed
• Elements that do not require an
ending tag are called empty
elements because you cannot use
them as a tag pair to enclose text or
other elements.
N241: Fundamentals of Web Development
Copyright ©2004  Department of Computer & Information Science
Empty Elements Must Be
Closed
• You can create an empty element in
an XML document by adding a single
slash (/) before the tag’s closing
bracket to close the element
• Most often, you use an empty
element for an element that does not
require content, such as an image.
N241: Fundamentals of Web Development
Copyright ©2004  Department of Computer & Information Science
Combining XML and HTML
• Although XML was designed primarily
to define data, this does not mean
that you cannot use it to create Web
pages.
N241: Fundamentals of Web Development
Copyright ©2004  Department of Computer & Information Science
Combining XML and HTML
• You can create formatted Web pages
using XML and Extensible
Stylesheet Language, or XSL, which
is a specification for formatting XML
in a Web browser
N241: Fundamentals of Web Development
Copyright ©2004  Department of Computer & Information Science
Combining XML and HTML
• To make the transition to XML-based
Web pages easier, the W3C
combined XML and HTML to create
Extensible Hypertext Markup
Language (XHTML)
N241: Fundamentals of Web Development
Copyright ©2004  Department of Computer & Information Science
Combining XML and HTML
• Combination of XML and HTML that
is used to author Web pages
• XHTML is almost identical to HTML,
except that it uses strict XML syntax
to describe the parts of a document
N241: Fundamentals of Web Development
Copyright ©2004  Department of Computer & Information Science
Resources
• Slides were adapted from the
following text & companion lectures:
First Edition
Dan Gosselin
Published by Course Technology (2004)
XHTML, Comprehensive
N241: Fundamentals of Web Development
Copyright ©2004  Department of Computer & Information Science
Questions?
N241: Fundamentals of Web Development
Copyright ©2004  Department of Computer & Information Science