411 REFERENCE · Wikibooks
XML - Managing Data Exchange/XHTML/Answers
Reference material by Wikibooks contributors. This retains its source identity and is not 411 news reporting.
XHTML Chapter => XHTML
XHTML Exercises => Exercises
Answer
1. Change the HTML document below into an XHTML document conforming to the W3C's transitional standard. Validate your page using the validator available at http://validator.w3.org/.
Exercise 1
Below is an example of an invalid HTML document that contains a number of deprecated features. It is also badly structured. The document needs converting to XHTML with the content separated from the presentation.
Exercise 1.a.
a. Change the HTML document into a valid XHTML 1.0 Transitional document. Validate your page using the validator available at http://validator.w3.org/.
The XHTML 1.0 Transitional document:
<nowiki>
<?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">
<head>
<title>Convert HTML to XHTML</title>
</head>
<body text="blue">
<h1>XHTML page</h1>
<p><b>It is important for your site to be current with the
most recent W3C standards.</b>
</p>
<u>Welcome</u> to my <b>page</b>.<br />
I hope that you <i>enjoy</i> your stay.
<p>
<font color="#9900FF" face="Arial" size="+2">
XHTML is similar to HTML
</font>
</p>
<a href="http://validator.w3.org">Validator</a>
</body>
</html>
</nowiki>
Exercise 1.b.
b. Starting with the model answer for question 1.a. identify all deprecated elements and attributes in the document and replace them with CSS in a linked external stylesheet. See HyperText Markup Language/Tag List for details of deprecated elements.
The deprecated features are:
the text attribute of the body element;
the u element; and
the font.
A possible stylesheet is:
<nowiki>
body {
color:blue
}
span#welcome {
text-decoration:underline
/* It is generally a bad idea to underline anything other than hyperlinks. */
}
p.highlight {
color:#9900FF;
font-size:150%;
font-family:Arial,sans-serif
/* It is good practice to include one as the CSS generic font families,
e.g. sans-serif, as an alternative.
*/
}
</nowiki>
The document with deprecated features removed – note the use of the id and class attributes to provide hooks for the CSS selectors.
<nowiki>
<?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">
<head>
<title>Convert HTML to XHTML</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<h1>XHTML page</h1>
<p><b>It is important for your site to be current with the
most recent W3C standards.</b>
</p>
<span id="welcome">Welcome</span> to my <b>page</b>.<br />
I hope that you <i>enjoy</i> your stay.
<p class="highlight">XHTML is similar to HTML</p>
<a href="http://validator.w3.org">Validator</a>
</body>
</html>
</nowiki>
Exercise 1.c.
c. Starting with the model answer for question 1.b. replace all presentational markup with semantic markup and ensure that all inline elements are contained in block-level elements. Change the DOCTYPE to XHTML 1.0 Strict and validate the page with the W3C Markup Validation Service.
The presentational elements are:
b
i
br
The 'paragraph' beginning with a span element is a mixture of inline elements and text and so should be contained in a block-level element such as p (paragraph).
The a (anchor) element is inline and needs enclosing in a block-level element.
<nowiki>
<?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">
<head>
<title>Convert HTML to XHTML</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<h1>XHTML page</h1>
<p><strong>It is important for your site to be current
with the most recent W3C standards.</strong>
</p>
<p><span id="welcome">Welcome</span> to my <strong>page</strong>.</p>
<p>I hope that you <em>enjoy</em> your stay.</p>
<p class="highlight">XHTML is similar to HTML</p>
<p><a href="http://validator.w3.org">Validator</a></p>
</body>
</html>
</nowiki>
XHTML Chapter => XHTML
XHTML Exercises => Exercises