HTML04

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

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

<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/
xhtml1-strict.dtd">
<html>
<head>
<title>HTML04</title>
</head>
<body>
<h1>Layout Workflow</h1>
<ul>
<li><a href="~~">NavigationA1</a></li>
<li><a href="~~">NavigarionA2</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>