Lecture07 ASDFASFA ASD ASD SDS XHTML.ppt

Introduction to XHTML
Extensible HyperText Markup Language
XHTML vs HTML
XHTML:
Separating structure and presentation (use CSS)
A valid XHTML document allows only its content and
structure
HTML
Can still contain formatting elements

First XHTML Example
<?xml version = "1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title>Internet and WWW How to Program - Welcome</title>
</head>
<body>
<p>Welcome to XHTML!</p>
</body>
</html>

XHTML Namespace (1/4)
<?xml version = "1.0"? encoding = “UTF-8”?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
<html xmlns = “http://www.w3.org/1999/xhtml”>
(Your XHTML page contents here)
</html>
Top-level declaration
Required to conform to XHTML syntax

<?xml version = "1.0"? encoding = “UTF-8”?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns = “http://www.w3.org/1999/xhtml”>
!DOCTYPE = specify what version of XHTML you’re using. It tells
browsers what type of information to expect in the page, which in turn,
tells it how to render the page.
It is also used by XHTML validators to verify syntax of the webpage
<?xml...> declaration = a processing instruction used to declare that this
document is an XML document which uses the UTF-8 (Unicode)
character encoding.

• <?xml version = "1.0"? encoding = “UTF-8”?>
• <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
•<html xmlns = “http://www.w3.org/1999/xhtml”>
the <html xmlns...> line opens the XHTML document
and declares the default namespace

So, what is an XHTML Namespace?
Briefly, namespaces are unique identifiers used in
XML to differentiate between different markup
languages. Each markup language, such as
XHTML, has a namespace (e.g.
http://www.w3.org/1999/xhtml)

XHTML Comments
• 
• 
Similar with HTML comments

XHTML Elements
Important elements of an XHTML document are
<html>
<head>
<body>
The html element encloses the head section and the body section
The head section contains information about the XHTML document
AND can also contain special document formatting instructions (style
sheets, scripts)
The body section contains the page’s content that the browser displays

XHTML Elements
Elements within an XHTML document have start and
end tags
<html> </html>
A start tag may have attribute with its value
<p class=“special”> </p>
An empty element contains only attributes and do not
markup text.

Validating an XHTML
document
W3C provides a validation service
(http://validator.w3.org) for checking the syntax

Other Elements
Header elements
<h1> to <h6>
Linking
<a href=“ “></a> OR <a href=“mailto: “></a>
Images
<img src=“ “/>
Special Characters (character entity references) and Line
Breaks
< > &
<hr />, <br />

Other Elements (cont’d)
Lists (ordered and unordered)
<ol> </ol> and <ul> </ul>
<li> </li>
Image Maps
Framesets
Tables

XHTML Syntax Rules
Documents must be well-formed
Elements must nest symmetrically
Element names are case sensitive
End tags are required
Empty Elements are signified by a closing slash
Give space so older browsers will ignore the XHTML
closing slash e.g. <br />
Attribute values must be contained in Quotes

Why XHTML?
Cleaner code
XHTML requires us to remove code that does match
the standard such as deprecated elements
XHTML is based on XML so its capabilities can be
extended
Supports the variety of new devices & new technologies
used to access the Internet
Works smoothly with database and workflow applications

Style Sheets are Required
XHTML does not contain presentation information
The benefit of separating data from style
the same information can be directed to various
display devices simply by changing the style sheet
data-once, destination-many
The two style sheets languages that are available for
use with XML or XHTML: CSS and XSL

From HTML to XHTML
<H1>Some plain HTML
code</h1>
<P> This is a paragraph of
text.
<IMG SRC="xml.gif">
<H3>A bulleted list</H3>
<UL>
<LI>Item one
<LI>Item two
<LI>Item three
<h1>Some plain HTML code</h1>
<p>This is a paragraph of
text.</p>
<img src="xml.gif" />
<h3>A bulleted list</h3>
<ul>
<li>item one</li>
<li>item two</li>
<li>item three</li>
</ul>

Migrating from HTML to
XHTML
Evaluate existing code
Check for basic compliance with XHTML syntax
rules
Use HTML editing softwares to get this
automatically done
Evaluate existing presentation information
Are there deprecated tags e.g. <font> and
deprecated attributes e.g. “bgcolor”, “face” and
“size”?
Convert these to CSS

Migrating from HTML to
XHTML (cont’d)
Create coding conventions
To make sure that new coding and content added
will follow this standard
Start using CSS
Test for backward compatibility

XHTML Document Types
Strict
Clean, structural markup code. Free of any markup tags
associated with layout and from deprecated tags
Use CSS for styling
Transitional
Most common. Allows obsolete elements from older versions of
HTML and newer features such as style sheets and well-formed
markup.
Frameset
When using frames

Lecture07 ASDFASFA ASD ASD SDS XHTML.ppt

More Related Content

Similar to Lecture07 ASDFASFA ASD ASD SDS XHTML.ppt (20)

More from DrKBManwade (9)

Recently uploaded (20)

Lecture07 ASDFASFA ASD ASD SDS XHTML.ppt

Editor's Notes