Introduction to
XHTML
OBJECTIVES
In this chapter you will learn:
To understand important components of XHTML
documents.
To use XHTML to create web pages.
To add images to web pages.
To create and use hyperlinks to navigate web
pages.
To mark up lists of information.
To create tables with rows and columns of data
and control table formatting.
To create and use forms to get user input.
To make web pages accessible to search engines
using <meta> tags.
HTML vs XHTML
HTML or HyperText Markup Language is the main markup
language for creating web pages and other information that can be
displayed in a web browser.
XHTML (Extensible HyperText Markup Language) is a family of
XML markup languages that mirror or extend versions of the widely
used Hypertext Markup Language (HTML), the language in which
web pages are written.
HTML XHTML
Filename extension .html, .htm .xhtml, .xht, .xml, .html, .htm
Internet media type text/html application/xhtml+xml
Developed by W3C & WHATWG World Wide Web Consortium
Type of format Document file format Markup language
Extended from SGML XML, HTML
Stands for HyperText Markup Extensible HyperText Markup
Language Language
Application Application of Standard Application of XML
Generalized Markup
Language (SGML).
Function Web pages are written in Extended version of HTML that is
HTML. stricter and XML-based.
Nature Flexible framework Restrictive subset of XML and
requiring lenient HTML needs to be parsed with standard
specific parser. XML parsers.
Origin Proposed by Tim Berners- World Wide Web Consortium
Lee in 1987. Recommendation in 2000.
Versions HTML 2, HTML 3.2, HTML XHTML 1, XHTML 1.1, XHTML 2,
4.0, HTML 5. XHTML 5.
Introductio
n
XHTML (Extensible HyperText Markup Language)
markup language for creating web pages
Based on HTML (HyperText Markup Language)
legacy technology of the World Wide Web Consortium (W3C)
XHTML 1.0
Allows only a document’s content and structure to appear in a valid
XHTML document, and not its formatting
Formatting is specified with Cascading Style Sheets
EDITING XHTML
A machine that runs a specialized piece of
software called a web server stores XHTML
documents
FIRST XHTML EXAMPLE
In XHTML, text is marked up with elements delimited by
tags that are names contained in pairs of angle brackets
Every XHTML document contains a start <html> tag and an end
</html> tag
Some elements may contain attributes that provide
additional information about the element
Comments in XHTML always begin with <!-- and end with
-->. The browser ignores all text inside a comment
FIRST XHTML EXAMPLE
(CONT.)
Every XHTML document contains a head element
which generally contains:
A title
A body element
head element
generally is not rendered in the display window
FIRST XHTML EXAMPLE
(CONT.)
The title element:
Names a web page
Usually appears in the colored bar (called the title bar) at
the top of the browser window
Is the text identifying a page when users add your page
to their list of Favorites or Bookmarks
The body element:
Contains the document’s content, which may include text
and tags
FIRST XHTML EXAMPLE
(CONT.)
All text placed between the <p> and </p> tags
forms one paragraph
XHTML documents delimit an element with start and
end tags
A start tag consists of the element name in angle brackets
(e.g., <html>)
An end tag consists of the element name preceded by a
forward slash (/) in angle brackets (e.g., </html>)
Many start tags have attributes that provide
additional information about an element
Each attribute has a name and a value separated by an equals
sign (=)
1 <?xml version = "1.0" encoding = "utf-8"?>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
FIRST
3
4
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
XHTML
5 <!-- Fig. 4.1: main.html --> EXAMPLE.
XHTML comments, not
interpreted by the browser
6 <!-- First XHTML example. -->
7 <html xmlns = "http://www.w3.org/1999/xhtml">
8 <head> Creates a head element
9 <title>Welcome</title>
Creates a title element, which
10 </head> contains the text Welcome
11
12 <body>
13 <p>Welcome to XHTML!</p> Creates a p element within the body,
which displays welcome text
14 </body>
15 </html>
COMMON PROGRAMMING ERROR
XHTML does not permit tags to overlap—a nested element’s
end tag must appear in the document before the enclosing
element’s end tag.
For example, the nested XHTML tags
<head><title>hello</head></title>
cause a syntax error, because the enclosing head element’s
ending </head> tag appears before the nested title
element’s ending </title> tag.
W3C XHTML VALIDATION
SERVICE
XHTML documents that are syntactically correct
are guaranteed to render properly
XHTML documents that contain syntax errors
may not display properly
Validation services (e.g., validator.w3.org)
ensure that an XHTML document is syntactically
correct
HEADINGS
XHTML provides six headings (h1 through
h6) for specifying the relative importance
of information
Heading element h1 is considered the most
significant heading and is rendered in the
largest font
Each successive heading element (i.e., h2, h3,
etc.) is rendered in a progressively smaller
font
1 <?xml version = "1.0" encoding = "utf-8"?>
2
3
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Heading
4 elements h1
5 <!-- Fig. 4.2: heading.html -->
6 <!-- Heading elements h1 through h6. --> through h6
7 <html xmlns = "http://www.w3.org/1999/xhtml">
8 <head>
9 <title>Headings</title>
10 </head> Creates six headings, each with
11
12 <body>
decreasing significance
13 <h1>Level 1 Heading</h1>
14 <h2>Level 2 heading</h2>
15 <h3>Level 3 heading</h3>
16 <h4>Level 4 heading</h4>
17 <h5>Level 5 heading</h5>
18 <h6>Level 6 heading</h6>
19 </body>
20 </html>
LINKIN
G
A hyperlink references or links to other
resources, such as XHTML documents and
images
Web browsers typically underline text
hyperlinks and color them blue by default
LINKING (CONT.)
Users can insert links with the a (anchor)
element.
The href attribute specifies the resource (e.g., page,
file, e-mail address) being linked
Anchors can link to an e-mail address using a mailto:
URL
When a user clicks this type of anchored link, most browsers
launch the default e-mail program (e.g., Outlook Express) to
initiate an e-mail message addressed to the linked address.
The strong element typically causes the browser to
render text in a bold font
1 <?xml version = "1.0" encoding = "utf-8"?>
2
3
4
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> LINKING TO
5
6
7
<!-- Fig. 4.3: links.html -->
<!-- Linking to other web pages. -->
<html xmlns = "http://www.w3.org/1999/xhtml">
OTHER WEB
8
9
<head>
<title>Links</title>
PAGES.
10 </head>
11
12 <body>
13 <h1>Here are my favorite sites</h1> Creates anchor elements that link to
14 <p><strong>Click a name to go to that page.</strong></p> the URL specified in the href
15
16 <!-- Create four text hyperlinks -->
attribute
17 <p><a href = "http://www.deitel.com">Deitel</a></p>
18 <p><a href = "http://www.prenhall.com">Prentice Hall</a></p>
19 <p><a href = "http://www.yahoo.com">Yahoo!</a></p>
20 <p><a href = "http://www.usatoday.com">USA Today</a></p>
21 </body>
22 </html>
1 <?xml version = "1.0" encoding = "utf-8"?>
2
3
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> LINKING TO
4
5
6
<!-- Fig. 4.4: contact.html -->
<!-- Linking to an e-mail address. -->
AN E-MAIL
7
8
<html xmlns = "http://www.w3.org/1999/xhtml">
<head> ADDRESS
9 <title>Contact Page</title>
10 </head>
11
12 <body> Hyperlink that creates a message to
13 <p> the address deitel@deitel.com
14 My email address is with the computer’s default e-mail
15 <a href = "mailto:deitel@deitel.com"> program
16 deitel@deitel.com
17 </a>
18 . Click the address and your default email client
19 will open an e-mail message and address it to me.
20 </p>
21 </body>
22 </html>
