Wikibooks

XML - Managing Data Exchange/XHTML/Answers

< XML - Managing Data Exchange | XHTML

XHTML Chapter => XHTML

XHTML Exercises => Exercises

Answer

edit

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

edit

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.

edit

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.

edit

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.

edit

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

Retrieved from "https://en.wikibooks.org/w/index.php?title=XML_-_Managing_Data_Exchange/XHTML/Answers&oldid=3640542"