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

課題１３：隣のページにリンクさせなさい

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

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

●ステップ２：隣のページにリンクさせなさい

• １："Oedit"の１行目に、次の文章をコピー＆ペーストしなさい。

  <p>勉強できる子の共通点については、向山洋一著
  『どんな子だって勉強できる子になれる！』
  に詳しく書かれてます。</p>
  

• ２：この文章中の"どんな子だって勉強できる子になれる！"を、<a href="subject10.html">〜</a>でくくりなさい。『』はくくらなくても良いです。純粋に書名のみくくります。
• ３："Oedit"を「保存」しなさい。
• ４："Oedit"の上、青い「ｅ」をクリックして、"Internet Explorer"で表示させてみなさい。
• ５：リンク語句をクリックした時、【課題１０】で作ったページへ移動することができれば合格です。
• ６：もし上手く行かない場合は、同じ「ＨＰ講座」のフォルダの中に、"subject10.html"があるかどうかを確認しなさい。
  "subject10.html"が無くなっていたり、ファイル名が違っていたら(*1)、リンクは上手く機能しません。

*1:例えば"sabject10.html"とか、"subject10.htm"のようなファイル名だと、リンクは上手く機能しません。

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

　昨日は、遠くにあるページ（他の人が作ったページ）へリンクさせる方法を学習しました。

　ステップ２で学習したのは、近くにあるページ（自分が作ったページ）へリンクさせる方法です。
　今作っているページの隣近所（すぐ側）にあるページにリンクさせるには以下のようにします。

◆遠くのページ（他人の作ったページ）へのリンク

<a href="ホームページ・アドレス">リンクにしたい語句</a>

◆近くのページ（自分で作ったページ）へのリンク

<a href="ファイル名">リンクにしたいたい語句</a>

　例えば、講師の個人サイトへのリンクなら、次のようになります。

▼各受講者が、山田の作ったページへリンクさせる場合

<a href="http://www.yamadarn.com/index.html">山田庵</a>

▼山田自身が、自分の作ったページへリンクさせる場合

<a href="index.html">山田庵</a>

　この近くのページへリンクさせる方法は、将来、自分のページを作る時に多用することになります。
　例えば、文章量が多い１つのレポートを、２ページ以上に分割する時に使用します。
　また、TOSSランドに登録する個々のページから、自分の表紙ページ（トップページ）へのリンクを作る際などにも使用します。

●ステップ４：画像（絵や写真）へリンクさせなさい

• １：まず、画像を１枚用意します。（趣意）
• ３："logo.png"を右クリックしなさい。(*1)

  logo.png

• ４：「対象をファイルに保存」をクリックしなさい。
• ５：「保存する場所」は、「ＨＰ講座」のフォルダの中です。
• ６：「保存」をクリック。
• ７：画像へのリンクを作ります。（趣意）
• ８：２行あけて、"Oedit"に次の文章をコピー＆ペーストしなさい。

  <p>TOSS北海道は、北海道内の３５のサークルの集まりです。北海道から
  旧文化を一掃し、新しい教育文化を広めるために活動しています。</p>
  <p>→TOSS北海道のロゴマーク</p>
  

• ９：この文章中の、"→TOSS北海道のロゴマーク"を、<a href="logo.png">〜</a>でくくりなさい。
• １０："Oedit"を「保存」しなさい。
• １１："Oedit"の上、青い「ｅ」をクリックして、"Internet Explorer"で表示させてみなさい。
• １２：リンク語句をクリックした時、画像（黄緑の北海道＋文字）へ移動することができれば合格です。
• １３：このように、近くのページへリンクさせる方法は、ホームページだけではなく、画像（絵や写真）に応用することもできます。

*1："logo.png"が表示されない時は、ページを「更新」してみてください。「Ｆ５」キーを指で押すのです。

●ステップ５：本題（確認問題）

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

  <p>詳しくは、向山洋一著『算数が大好きになる本』を読んでください。</p>
  <p>→向山洋一著『算数が大好きになる本』</p>
  

• ２：この文章中の"→向山洋一著『算数が大好きになる本』"を、<a href="subject05.html">〜</a>でくくりなさい。
• ３："Oedit"を「保存」しなさい。