演習：文書構造

セマンティックなマークアップ

セマンティック＝意味をきちんと考えた（例: そのテキストは「見出し」なのか「通常のパラグラフ」なのか、見出しならばh1〜h6要素のどれでマークアップすべきか）
セマンティックなマークアップによって、そのページは自然とマシンフレンドリーな状態になる。
セマンティックなマークアップで制作したページは、アクセシビリティとSEOの両面で最適な状態になる。
その上で、ヒューマンフレンドリーとクローラーフレンドリーという視点で考える。

文書構造課題

以下のテキストを読み、内容を適切にHTMLで構造化しなさい

例1

見出しと段落のレイアウト
同じ内容の文章であっても、その表現の仕方によって読者に与える印象は大きく変化します。文章のレイアウトを考えることはより正確に、より効果的に情報を伝えるためにとても重要なことです。


見出しのレイアウト
見出しは、その章・節で述べられる話題を端的に示すものです。見出しにはh1からh6までの、6レベルの見出しが用意されています。ページのなかで最も重要な見出しをh1要素でマークアップし、次に重要な見出しをh2要素として、その次をh3要素で･･･といった具合に、重要なものから順々にマークアップいきます。
見出しは、その章・節で述べられる話題を端的に示すものです。見出しにはh1からh6までの、6レベルの見出しが用意されています。ページのなかで最も重要な見出しをh1要素でマークアップし、次に重要な見出しをh2要素として、その次をh3要素で･･･といった具合に、重要なものから順々にマークアップいきます。


段落のレイアウト
パラグラフとは、内容に関連のあるいくつかの文の集まりのことです。ひとつのパラグラフに複数のトピックを展開するのは、あまり良くありません。逆にトピックが次に展開しているにも関わらず、同じパラグラフの中に収めてしまうのも、あまり良くありません。段落はp要素を用いてマークアップします。
パラグラフとは、内容に関連のあるいくつかの文の集まりのことです。ひとつのパラグラフに複数のトピックを展開するのは、あまり良くありません。逆にトピックが次に展開しているにも関わらず、同じパラグラフの中に収めてしまうのも、あまり良くありません。段落はp要素を用いてマークアップします。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>見出しと段落のレイアウト</title>
</head>
<body>
<h1>見出しと段落のレイアウト</h1>
<p>同じ内容の文章であっても、その表現の仕方によって読者に与える印象は大きく変化します。文章のレイアウトを考えることはより正確に、より効果的に情報を伝えるためにとても重要なことです。</p>
<h2>見出しのレイアウト</h2>
<p>見出しは、その章・節で述べられる話題を端的に示すものです。見出しにはh1からh6までの、6レベルの見出しが用意されています。ページのなかで最も重要な見出しをh1要素でマークアップし、次に重要な見出しをh2要素として、その次をh3要素で･･･といった具合に、重要なものから順々にマークアップいきます。</p>
<p>見出しは、その章・節で述べられる話題を端的に示すものです。見出しにはh1からh6までの、6レベルの見出しが用意されています。ページのなかで最も重要な見出しをh1要素でマークアップし、次に重要な見出しをh2要素として、その次をh3要素で･･･といった具合に、重要なものから順々にマークアップいきます。</p>
<h2>段落のレイアウト</h2>
<p>パラグラフとは、内容に関連のあるいくつかの文の集まりのことです。ひとつのパラグラフに複数のトピックを展開するのは、あまり良くありません。逆にトピックが次に展開しているにも関わらず、同じパラグラフの中に収めてしまうのも、あまり良くありません。段落はp要素を用いてマークアップします。</p>
<p>パラグラフとは、内容に関連のあるいくつかの文の集まりのことです。ひとつのパラグラフに複数のトピックを展開するのは、あまり良くありません。逆にトピックが次に展開しているにも関わらず、同じパラグラフの中に収めてしまうのも、あまり良くありません。段落はp要素を用いてマークアップします。</p>
</body>
</html>

例2

石垣島観光ガイド

石垣島は八重山諸島の中で一番大きな島で、沖縄で3番目に大きな島です。沖縄からは、空路で約1時間、沖縄より台湾に近く南に位置します。気候は亜熱帯気候で、1年を通じて平均気温は27度もあります。亜熱帯気候のため、マングローブの森や色とりどりの南国の花が咲き、赤瓦屋根の民家、そして何よりも、鮮やかなコバルトブルーの海岸は、多くの観光客をひきつけ、特にダイバーやシュノーケリングを楽しむ人にとっては格好の場所になっています。

観光スポット

「川平（かびら）湾」
石垣港から車で約20分
石垣を代表する景勝地で、エメラルド色のサンゴ礁と黒真珠の養殖でよく知られています。 潮の流れが早いため、遊泳は禁止されています。

「宮良川（みやらがわ）のヒルギ林」
石垣港からバスで30分宮良橋で下車
巨大なマングローブ林（ヒルギ群落）があり、国の天然記念物に指定されているほど壮大です。

「底地（すくじ）ビーチ 」
川平湾から車で約10分
マリンスポーツが楽しめ、マンタが見られることから、ダイバーに人気があります。

「フサキビーチ」
石垣港からバスで30分、宮良橋下車
島の西側にあるビーチで、西表（いりおもて）島に沈む美しいサンセットが見られるビーチとして有名です。

「米原海岸」
石垣空港より車で約30分
米原キャンプ場が隣接していて、ビーチパーティが楽しめます。潮の流れが早いため、遊泳は禁止されています。

「マエザトビーチ」
石垣空港より車で約5分
ホテル内にあるリゾートビーチですが、宿泊者以外でも利用可能です。ファミリー向けリゾート地で、 シュノーケルのレンタルもあります。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>石垣島観光ガイド</title>
</head>
<body>
<h1>石垣島観光ガイド</h1>
<p>石垣島は八重山諸島の中で一番大きな島で、沖縄で3番目に大きな島です。沖縄からは、空路で約1時間、沖縄より台湾に近く南に位置します。気候は亜熱帯気候で、1年を通じて平均気温は27度もあります。亜熱帯気候のため、マングローブの森や色とりどりの南国の花が咲き、赤瓦屋根の民家、そして何よりも、鮮やかなコバルトブルーの海岸は、多くの観光客をひきつけ、特にダイバーやシュノーケリングを楽しむ人にとっては格好の場所になっています。</p>
<h2>観光スポット</h2>
<h3>「川平（かびら）湾」</h3>
<h4>石垣港から車で約20分</h4>
<p>石垣を代表する景勝地で、エメラルド色のサンゴ礁と黒真珠の養殖でよく知られています。 潮の流れが早いため、遊泳は禁止されています。</p>
<h3>「宮良川（みやらがわ）のヒルギ林」</h3>
<h4>石垣港からバスで30分宮良橋で下車</h4>
<p>巨大なマングローブ林（ヒルギ群落）があり、国の天然記念物に指定されているほど壮大です。</p>
<h3>「底地（すくじ）ビーチ 」</h3>
<h4>川平湾から車で約10分</h4>
<p>マリンスポーツが楽しめ、マンタが見られることから、ダイバーに人気があります。</p>
<h3>「フサキビーチ」</h3>
<h4>石垣港からバスで30分、宮良橋下車</h4>
<p>島の西側にあるビーチで、西表（いりおもて）島に沈む美しいサンセットが見られるビーチとして有名です。</p>
<h3>「米原海岸」</h3>
<h4>石垣空港より車で約30分</h4>
<p>米原キャンプ場が隣接していて、ビーチパーティが楽しめます。潮の流れが早いため、遊泳は禁止されています。</p>
<h3>「マエザトビーチ」</h3>
<h4>石垣空港より車で約5分</h4>
<p>ホテル内にあるリゾートビーチですが、宿泊者以外でも利用可能です。ファミリー向けリゾート地で、 シュノーケルのレンタルもあります。</p>
</body>
</html>

例3

すべての女性の未来のために
今わたし達にできること……

美しさは日々の生活から

美容と健康は太い糸で結ばれていることは言うまでもありませんが、日常生活にまつわる食事、運動睡眠、入浴、呼吸、体質、環境なども細かく くもの巣のように繋ってバランスが保たれているのです。

従って、それらの一つでも切れたり 弱ったりすると全体のバランスが崩れます。 つまり、健康、美容にも悪影響を与えてしまうというわけです。

製品について

私たちのこだわり
商品情報
お手入れについて
スキンケアについて
使用方法
無料サンプルお申し込み
お知らせ

7月21日から夏の「紫外線対策キャンペーン」をスタートします。

<!DOCTYPE html>
<html lang="ja">
<head>
<title>女性の未来のために</title>
</head>
<body>
<h1>すべての女性の未来のために<br>
今わたし達にできること……</h1>
<h2>美しさは日々の生活から</h2>
<p>美容と健康は太い糸で結ばれていることは言うまでもありませんが、日常生活にまつわる食事、運動睡眠、入浴、呼吸、体質、環境なども細かく くもの巣のように繋ってバランスが保たれているのです。<br>
従って、それらの一つでも切れたり 弱ったりすると全体のバランスが崩れます。 つまり、健康、美容にも悪影響を与えてしまうというわけです。</p>
<h3>製品について</h3>
<ul>
<li>私たちのこだわり</li>
<li>商品情報</li>
<li>お手入れについて</li>
<li>スキンケアについて</li>
<li>使用方法</li>
<li>無料サンプルお申し込み</li>
<li>お知らせ</li>
</ul>
<p>7月21日から夏の「紫外線対策キャンペーン」をスタートします。</p>
</body>
</html>

例4

ガラスの靴の持ち主を捜しています！

パソコンで応募する方

下記の「応募規約」、「個人情報のお取り扱いについて」をお読みいただき、
ご同意いただける方は「はい」をクリックし、応募フォームにお進みください。
【応募規約】

○パソコンでのご応募は、お一人様一回限り（複数ご応募いただいた場合は最終応募のみ有効）とさせていただきます。
※但し、郵便ハガキでのご応募は、ハガキ１通を１口として、お一人様何口でもご応募できます。
○商店街で同時期に行われる他のキャンペーンと重複して当選することはできません。
○当選後の権利譲渡、換金はできません。
○応募の際の必要事項に、不備や虚偽があった場合は、無効になります。
○ご応募は日本国内在住の方に限らせていただきます。
○応募受付の確認、抽選結果に関するお問合せには、お受けいたしかねますのでご了承ください。
○景品の"ガラスの靴"は、11月17日から12月25日まで商店街内に展示した靴となりますので、予めご了承ください。また、サイズは23.5ｃｍとなります。
【個人情報のお取扱いについて】

ご応募にあたり、ご記入いただいた個人情報（郵便番号、住所、氏名、電話番号、年齢）は、当社にて適切に管理し、ご当選の場合の景品受け渡し、及び個人を識別できない統計情報として、応募状況の傾向把握に利用します。当社は、上記の目的範囲内で、個人情報の取り扱いを外部の第三者に委託することがあります。この場合、個人情報の漏洩等が無いよう、業務委託契約に基づく適切な管理を行います。

【個人情報のお取扱いについて】

（プライバシーポリシー）

応募先・お問い合わせ

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ガラスの靴の持ち主を捜しています</title>
</head>
<body>
<h1>ガラスの靴の持ち主を捜しています！</h1>
<h2>パソコンで応募する方</h2>
<p>下記の「応募規約」、「個人情報のお取り扱いについて」をお読みいただき、<br>
ご同意いただける方は「はい」をクリックし、応募フォームにお進みください。</p>
<h3>【応募規約】</h3>
<ul>
<li>パソコンでのご応募は、お一人様一回限り（複数ご応募いただいた場合は最終応募のみ有効）とさせていただきます。<br>
※但し、郵便ハガキでのご応募は、ハガキ１通を１口として、お一人様何口でもご応募できます。</li>
<li>商店街で同時期に行われる他のキャンペーンと重複して当選することはできません。
<li>当選後の権利譲渡、換金はできません。</li>
<li>応募の際の必要事項に、不備や虚偽があった場合は、無効になります。</li>
<li>ご応募は日本国内在住の方に限らせていただきます。</li>
<li>応募受付の確認、抽選結果に関するお問合せには、お受けいたしかねますのでご了承ください。</li>
<li>景品の"ガラスの靴"は、11月17日から12月25日まで商店街内に展示した靴となりますので、予めご了承ください。また、サイズは23.5ｃｍとなります。</li>
</ul>
<h3>【個人情報のお取扱いについて】</h3>
<p>ご応募にあたり、ご記入いただいた個人情報（郵便番号、住所、氏名、電話番号、年齢）は、当社にて適切に管理し、ご当選の場合の景品受け渡し、及び個人を識別できない統計情報として、応募状況の傾向把握に利用します。当社は、上記の目的範囲内で、個人情報の取り扱いを外部の第三者に委託することがあります。この場合、個人情報の漏洩等が無いよう、業務委託契約に基づく適切な管理を行います。</p>
<h3>【個人情報のお取扱いについて】</h3>
<p>（プライバシーポリシー）</p>
<p>応募先・お問い合わせ</p>
</body>
</html>

３日間のまとめ

以下のように表示させなさい
管理フォルダーの中に「season」という名前のフォルダーを作成する
その中に「index.html」「spring.html」「summer.html」「fall.html」「winter.html」というHTMLドキュメントを作成する
それぞれのページに必要な構造を作成しリンクする
表組みは「border="0"」で枠線を非表示にする

四季の風景
日本では春・夏・秋・冬、それぞれの季節に風景の様々な変化を感じることができます。

春の風景

夏の風景

秋の風景

冬の風景

ホームへ戻る

素材

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>四季の風景</title>
</head>
<body>
<h1>四季の風景</h1>
<p>日本では春・夏・秋・冬、それぞれの季節に風景の様々な変化を感じることができます。
</p>
<table border="0" cellpadding="5">
<tr>
<td><a href="spring.html"><img src="img/s_spr.jpg" width="150" height="214" alt="春"></a></td>
<td><a href="summer.html"><img src="img/s_sum.jpg" width="150" height="214" alt="夏"></a></td>
<td><a href="fall.html"><img src="img/s_fal.jpg" width="150" height="214" alt="秋"></a></td>
<td><a href="winter.html"><img src="img/s_win.jpg" width="150" height="214" alt="冬"></a></td>
</tr>
<tr>
<td><a href="spring.html">春</a></td>
<td><a href="summer.html">夏</a></td>
<td><a href="fall.html">秋</a></td>
<td><a href="winter.html">冬</a></td>
</tr>
</table>
</body>
</html>

※table要素の属性はエラーですが、この段階の見栄えとして記述しています。
※今後、CSSで記述することになります。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>春の風景</title>
</head>
<body>
<h1>春の風景</h1>
<p><img src="img/spring.jpg" width="412" height="589" alt="春"></p>
<p><a href="index.html">ホームへ戻る</a></p>
</body>
</html>