ホームページ作り方教室　〜必要最小限の学習で、法則化論文形式のページをTOSSランドに登録しよう〜

課題１５：背表紙に題名を書きなさい

●ステップ１：ノート代わりに、"oedit"を開きなさい

• １："Oedit"を起動しなさい。
• ２："Oedit"の左上、"htm"のボタンが押されていますか？　押されていなければ、"htm"のボタンをクリック。
• ３："Oedit"の左上、「ファイル」→「名前を付けて保存」。
• ４：「保存する場所」は「ＨＰ講座」のフォルダ。
• ５：「ファイル名」は、"subject15.html"。
• ６：「保存」

●ステップ２：２つのページを見比べなさい

• １：ページＡを"Internet Explorer"で表示しなさい。

  ページＡ

• ２：次にページＢを"Internet Explorer"で表示しなさい。

  ページＢ

• ３：ＡとＢ、２つのページを見比べなさい。"Internet Explorer"の左上、 「←戻る」と「進む→」のボタンをクリックすれば、２つのページを行ったり来たりできます。
• ４：２つのページの、"Internet Explorer"の表示上での違い(*1)は何ですか？　間違っても構いません。答えを"Oedit"に書きなさい。

  *1：ソースの違いは関係ありません。"Internet Explorer"での表示が、１ヶ所だけ違うのです。パッと見は同じですが……。

• ５：ヒントを１つ言います。"Internet Explorer"の中（本文を表示している部分）ではなく、"Internet Explorer"の外枠の部分に違いがあるのです。
• ６：答えを"Oedit"に書いた人は、正解を確認しなさい。

  ステップ２の答え

●ステップ３：声に出して読みなさい

• １：以下の解説を声に出して読みなさい。ただし、ソース（点線と点線の間）は、目でザッと見るだけで構いません。
• ２：ページＡは、【課題１４】のソースから、まだ習っていないタグを全て削除したものです。

  <link rel="stylesheet" type="text/css" href="orange_line.css">
  <h1>TOSSランドとは</h1>
  <address>
  <a href="mailto:yamadarn@mbe.nifty.com">山田正和</a><br>
  作成日：2002年 7月11日(木) 
  </address>
  <p><em>　どこよりも早く、どこよりも役に立つ。</em></p>
  <p>　それが<a href="http://www.tos-land.net/">TOSSランド</a>です。</p>
  <p>　<a href="http://www.tos-land.net/">TOSSランド</a>には、<strong>
  向山型算数</strong>を
  はじめとする役に立つ教育実践が、多数納められています。</p>
  

• ３：ページＢはＡの冒頭に、１行だけ書き加えたものです。【課題１４】の正解には書いてあった１行です。

  <title>TOSSランドとは</title>
  <link rel="stylesheet" type="text/css" href="orange_line.css">
  <h1>TOSSランドとは</h1>
  <address>
  <a href="mailto:yamadarn@mbe.nifty.com">山田正和</a><br>
  作成日：2002年 7月11日(木) 
  </address>
  <p><em>　どこよりも早く、どこよりも役に立つ。</em></p>
  <p>　それが<a href="http://www.tos-land.net/">TOSSランド</a>です。</p>
  <p>　<a href="http://www.tos-land.net/">TOSSランド</a>には、<strong>
  向山型算数</strong>を
  はじめとする役に立つ教育実践が、多数納められています。</p>
  

• ４：<title>〜</title>は、その名の通り「題名（タイトル）」をくくるタグです。
• ５：<h1>〜</h1>との違いは、以下のように考えます。

  １）ホームページを１冊の本だとイメージする。

  ２）<h1>〜</h1>は、本の表紙に書かれた題名。

  ３）<title>〜</title>は、本の背表紙に書かれた題名。

• ６：<title>〜</title>でくくった題名は、"Internet Explorer"の 中（本文を表示している部分）には何も影響は与えません。
  <h1>〜</h1>でくくった題名は、ページの内容（本文）を読む時、 最初に目に飛び込んできます。

●ステップ４：「お気に入り」に登録して、その違いを見つけなさい

• １：ＡとＢ、２つのページを、それぞれ「お気に入り」に登録しなさい。「お気に入り」→「お気に入りに追加」です。保存フォルダはどこでも構いません。
• ２：「お気に入り」をクリックして、登録してある「お気に入り」をズラッと表示しなさい。
• ３：２を行うと、ＡとＢで違いがあります。答えを、"Oedit"に書きなさい。（もちろん２行あけます）
• ４：正解は以下の通り。

  ステップ４の答え

●ステップ５：声に出して読みなさい

　<title>〜</title>が無いページ（Ａ）を「お気に入り」に登録すると、 「ホームページアドレス」が、そのまま登録名になってしまいます。
　これでは、どんなページを登録したのか、一目で分からなくなります。

　対して<title>〜</title>があるページの方（Ｂ）は、キチンと「題名」 が登録名になります。どんなページを登録したのか、一目で分かるのです。

　<title>〜</title>は「（本の）背表紙に書かれた題名」です。
　本棚（しまっている場所）から取り出すときに、目で探しあてるための題名だとイメージすれば良いのです。

　利用者（読み手）の使い勝手を考えると、ホームページには必ず <title>〜</title>を書いておかなければなりません。

　なお、"google"などの「検索サイト」を使い際にも<title>〜</title> が大事になってきます。
　<title>〜</title>が無いページは「無題」として登録されてしまうのです。 やはりどんなページか一目で分かりません。

※以上の説明を読んだあとは、ステップ４で登録した２つの「お気に入り」を削除しても構いません。

●ステップ６：本題（今日の学習の確認問題）

• １：２行あけて、"Oedit"に以下のソースをコピー＆ペーストしなさい。

  <link rel="stylesheet" type="text/css" href="orange_line.css">
  <h1>教育技術入門</h1>
  <address>向山洋一</address>
  <p>技術を持って仕事にあたる人がプロである。</p>
  <p>すぐれた教育技術を持ち、それを使いこなす技量を
  持っている人がプロの教師である。</p>
  

• ２：この文章の冒頭に、<title>〜</title>でくくられた１行を書き足しなさい。
  「教育技術入門」という語句を冒頭にコピー＆ペーストした後、<title>と</title>を書き足すのです。
• ３："Oedit"を「保存」しなさい。