XML - Managing Data Exchange/XHTML/Answers

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:

<?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>

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:

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.
  */
}

The document with deprecated features removed – note the use of the id and class attributes to provide hooks for the CSS selectors.

<?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>

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.

<?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>

XHTML Chapter => XHTML

XHTML Exercises => Exercises