【HTML04】文書構造の練習 - ウェブ学のすすめ

課題

以下の内容をHTML文章にしてブログに載せなさい
DTDは「XHTML 1.0 Strict」
DTDがわからない場合は、テキスト「上級レイアウト」を読むこと

【HTML04】文書構造の練習
Layout Workflow
NavigationA1
NavigationA2
NavigationA3
NavigationA4
NavigationA5
スタイルシートによるレイアウトワークフロー
本文のレイアウト
見出しは、その章・節で述べられる話題を端的に示すものです。見出しにはh1からh6までの、6レベルの見出しが用意されています。ページのなかで最も重要な見出しをh1要素でマークアップし、次に重要な見出しをh2要素として、その次をh3要素で･･･といった具合に、重要なものから順々にマークアップいきます。
パラグラフとは、内容に関連のあるいくつかの文の集まりのことです。ひとつのパラグラフに複数のトピックを展開するのは、あまり良くありません。逆にトピックが次に展開しているにも関わらず、同じパラグラフの中に収めてしまうのも、あまり良くありません。段落はp要素を用いてマークアップします。
スタイルシートによるレイアウトワークフロー
本文のレイアウト
見出しは、その章・節で述べられる話題を端的に示すものです。見出しにはh1からh6までの、6レベルの見出しが用意されています。ページのなかで最も重要な見出しをh1要素でマークアップし、次に重要な見出しをh2要素として、その次をh3要素で･･･といった具合に、重要なものから順々にマークアップいきます。
パラグラフとは、内容に関連のあるいくつかの文の集まりのことです。ひとつのパラグラフに複数のトピックを展開するのは、あまり良くありません。逆にトピックが次に展開しているにも関わらず、同じパラグラフの中に収めてしまうのも、あまり良くありません。段落はp要素を用いてマークアップします。
補足情報
同じ内容の文章であっても、その表現の仕方によって読者に与える印象は大きく変化します。文章のレイアウトを考えることはより正確に、より効果的に情報を伝えるためにとても重要なことです。
補足情報
NavigationB1
NavigationB2
NavigationB3
NavigationB4
NavigationB5

引用元：HTML04 - Webデザインの勉強｜忘筌

解答

【HTML04】文書構造の練習 - jsdo.it - share JavaScript, HTML5 and CSS

※スマートフォンの方はこちらからご覧になれます。

<?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" lang="ja" xml:lang="ja">
    <head>
	<title>
	    【HTML04】文書構造の練習
	</title>
    </head>
    <body>
	<h1>Layout Workflow</h1>
	<ul>
	    <li><a href="#">NavigationA1</a></li>
	    <li><a href="#">NavigationA2</a></li>
            <li><a href="#">NavigationA3</a></li>
	    <li><a href="#">NavigationA4</a></li>
	    <li><a href="#">NavigationA5</a></li>
	</ul>
	<h2>スタイルシートによるレイアウトワークフロー</h2>
	<h3>本文のレイアウト</h3>
	<p>見出しは、その章・節で述べられる話題を端的に示すものです。見出しにはh1からh6までの、6レベルの見出しが用意されています。ページのなかで最も重要な見出しをh1要素でマークアップし、次に重要な見出しをh2要素として、その次をh3要素で･･･といった具合に、重要なものから順々にマークアップいきます。</p>
	<p>パラグラフとは、内容に関連のあるいくつかの文の集まりのことです。ひとつのパラグラフに複数のトピックを展開するのは、あまり良くありません。逆にトピックが次に展開しているにも関わらず、同じパラグラフの中に収めてしまうのも、あまり良くありません。段落はp要素を用いてマークアップします。</p>
	<h2>スタイルシートによるレイアウトワークフロー</h2>
	<h3>本文のレイアウト</h3>
	<p>見出しは、その章・節で述べられる話題を端的に示すものです。見出しにはh1からh6までの、6レベルの見出しが用意されています。ページのなかで最も重要な見出しをh1要素でマークアップし、次に重要な見出しをh2要素として、その次をh3要素で･･･といった具合に、重要なものから順々にマークアップいきます。</p>
	<p>パラグラフとは、内容に関連のあるいくつかの文の集まりのことです。ひとつのパラグラフに複数のトピックを展開するのは、あまり良くありません。逆にトピックが次に展開しているにも関わらず、同じパラグラフの中に収めてしまうのも、あまり良くありません。段落はp要素を用いてマークアップします。</p>
	<h3>補足情報</h3>
	<p>同じ内容の文章であっても、その表現の仕方によって読者に与える印象は大きく変化します。文章のレイアウトを考えることはより正確に、より効果的に情報を伝えるためにとても重要なことです。</p>
	<h3>補足情報</h3>
	<ul>
	    <li><a href="#">NavigationB1</a></li>
	    <li><a href="#">NavigationB2</a></li>
	    <li><a href="#">NavigationB3</a></li>
	    <li><a href="#">NavigationB4</a></li>
	    <li><a href="#">NavigationB5</a></li>
	</ul>
    </body>
</html>