Lecture07 ASDFASFA ASD ASD SDS XHTML.ppt
DrKBManwade
5 views
20 slides
Jul 15, 2024
Slide 1 of 20
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
About This Presentation
RTERT
Slide Content
XHTML
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
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>
<?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”>
(Your XHTML page contents here)
</html>
Top-level declaration
Required to conform to XHTML syntax
XHTML Namespace (2/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”>
!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”>
!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.
XHTML Namespace (3/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”>
the <html xmlns...> line opens the XHTML document
and declares the default namespace
•<?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
XHTML Namespace (3/4)
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)
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
•<!--Fig. 4.1: main.html -->
•<!--Our first Web page -->
Similar with HTML comments
•<!--Fig. 4.1: main.html -->
•<!--Our first Web page -->
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
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.
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
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 />
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
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
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
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
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>
<imgsrc="xml.gif" />
<h3>A bulleted list</h3>
<ul>
<li>item one</li>
<li>item two</li>
<li>item three</li>
</ul>
<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>
<imgsrc="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
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 (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
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
Tags
Categories
GeneralDownload
Download Slideshow Get the original presentation fileQuick Actions
Statistics
- Views 5
- Slides 20
- Age 504 days
Related Slideshows
22
Pray For The Peace Of Jerusalem and You Will Prosper
RodolfoMoralesMarcuc
30 views
26
Don_t_Waste_Your_Life_God.....powerpoint
chalobrido8
32 views
31
VILLASUR_FACTORS_TO_CONSIDER_IN_PLATING_SALAD_10-13.pdf
JaiJai148317
30 views
14
Fertility awareness methods for women in the society
Isaiah47
29 views
35
Chapter 5 Arithmetic Functions Computer Organisation and Architecture
RitikSharma297999
26 views
5
syakira bhasa inggris (1) (1).pptx.......
ourcommunity56
28 views