XML - 資料交換管理/XHTML/答案

XHTML 章節 => XHTML

XHTML 練習 => 練習

答案

1. 將下面的 HTML 文件更改為符合 W3C 的 *過渡* 標準的 XHTML 文件。使用 http://validator.w3.org/ 中提供的驗證器驗證您的頁面。

練習 1

下面是一個包含許多已棄用功能的無效 HTML 文件示例。它也結構不良。該文件需要轉換為 XHTML，內容與表示分離。

練習 1.a.

a. 將 HTML 文件更改為有效的 XHTML 1.0 過渡文件。使用 http://validator.w3.org/ 中提供的驗證器驗證您的頁面。

XHTML 1.0 過渡文件

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

練習 1.b.

b. 從問題 1.a. 的模型答案開始，識別文件中所有已棄用的元素和屬性，並在連結的外部樣式表中用 CSS 替換它們。有關已棄用元素的詳細資訊，請參閱超文字標記語言/標籤列表。

已棄用的功能是

body 元素的 text 屬性；
u 元素；以及
font。

可能的樣式表是

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

已刪除已棄用功能的文件 - 注意使用 id 和 class 屬性為 CSS 選擇器提供掛鉤。

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

練習 1.c.

c. 從問題 1.b. 的模型答案開始，用語義標記替換所有表示性標記，並確保所有內聯元素都包含在塊級元素中。將 DOCTYPE 更改為 XHTML 1.0 Strict，並使用 W3C 標記驗證服務驗證頁面。

表示性元素是

b
i
br

以 span 元素開頭的“段落”是內聯元素和文字的混合，因此應包含在塊級元素（例如 p（段落））中。

a（錨）元素是內聯的，需要包含在塊級元素中。

<?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 章節 => XHTML

XHTML 練習 => 練習