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

課題１９：ナビゲーションのリンクを作りなさい

●ステップ１："EBTag"で変換しなさい

• １："Oedit"を起動しなさい。
• ２："Oedit"の左上、"txt"のボタンをクリック。"txt"は記号なし文章、"htm"が記号あり文章の意味です。
• ３："Oedit"の１行目に、次の文章をコピー＆ペーストしなさい。

  発想のおもしろい文作り
  
  女教師ツーウェイ編集長：石川裕美 
  
  　ありえない出来事をあたえて、発想豊かに文を作る授業である。
  　１年も２学期になると、文を書くことに慣れてくる。しかし作文と
  して単に毎日の出来事を書かせていると子どもも教師も、マンネリ化し
  てくる。そこでこんな文作りをしてみた。
  　「今から問題を言います。自分の考えで答えを、その紙に書きましょう」
  　発問１．地球が二つにわれたら、どうしますか。
  　「おもしろい問題ですから、よーく考えて書いてね」
  　少々、もったいぶって言ってみると、子どもたちは、何がはじまるの
  かと、こちらを見た。そこで、発問１を言うのである。
  「えーつ！」「へんなのォ」「わあ、こわい」
  　さんざん騒いで、早い子は用紙にさっと書いた。
  『こわい』『しんじゃう』
  　すっかり私は、あわててしまった。子どもの発想は、おもしろいと良
  く聞かれるが、信じられない気分であった。超現実的である。
  　問いがいけなかったのだ。そこで言いかえた。
  　死なないから大丈夫よ。もし地球が２つにわれたら、あなたたたちは
  まず何をしますか。自分が、することを書きなさい。
  　そう言って、やっと少しおもしろいのが出てきた。
  『ばすにのってにげる』
  『せっちゃくざいでくっつける』
  『ふたつにわれたどっちかにうつる』
  『うちゅうにとびちって月に家をつくる』
  『うちゅうににげる』
  『せかいじゅうの人のおもみでなおす』
  　発問２．えんぴつで字をかきますね。字をかくほかに、えんぴつの使
  い道はありませんか。
  　これはちょっと難しかったようで、「どういう意味？」と何回も聞か
  れた。
  「字や絵をかくことのほかに、何かの道具に使えないかな」と説明した。
  　これは、すごく悩んでいた。
  

• ４："Oedit"の左上、「ファイル」→「名前を付けて保存」。
• ５：「保存する場所」は「ＨＰ講座」のフォルダ。
• ６：「ファイル名」は、"subject19.txt"。末尾に注意。".html"がではなく".txt"です。
• ７：「保存」
• ８："EBTag"で、"subject19.txt"を"subject19.html"に変換しなさい。
• ９：変換できたら、"subject19.html"をダブルクリックして、"Internet Explorer"での表示を確認しなさい。

●ステップ２：【課題１７】を、ちょっとだけ復習します。

• １："subject19.html"のソースを表示しなさい。
• ２：作者情報のタグを、以下のように書き換えなさい。

  <p>女教師ツーウェイ編集長：石川裕美 </p>
  

  ↓

  <address>
  <a href="http://homepage1.nifty.com/sishamo/kai/two-way.html">
  女教師ツーウェイ</a>編集長：石川裕美
  </address>
  

• ３：１段落目はリード文です。以下のように書き換えなさい。

  <p>　ありえない出来事をあたえて、発想豊かに文を作る授業である。</p>
  

  ↓

  <p class="lead">　ありえない出来事をあたえて、発想豊かに文を作る授業である。</p>
  

• ４："Oedit"を「上書き保存」しなさい。
• ５："Oedit"の青い「ｅ」をクリックして、"Internet Explorer"の表示を確認しなさい。
  作者情報が右寄せになりましたか？　リンクは機能しますか？　リード文の見栄えが変わりましたか？

●ステップ３：２ついっぺんに書き換えなさい。

• １：発問の段落が２つあります。"<p>　発問"で始まる段落です。
  この２つの段落は、<p>〜</p>を、<p class="key">〜</p>でくくり直さないと枠囲いされません。
  ですが、１つずつ書き換えるのはちょっと面倒です。
• ２："oedit"の上の方、「検索」→「置換」とクリック。
• ３：「検索文字列」の窓に"<p>　発問"と入力しなさい。
  手で打っても良いですし、コピー＆ペーストでも構いません。
  なお""は要りません。タグと全角空白と漢字２文字だけです。
• ４：「置換後の文字列」の窓に"<p class="key">　発問"と入力しなさい。
  （注意点は、ステップ３の５と同じです）
• ５：「全て置換」ボタンをクリック。
• ６：その下の「閉じる」ボタンをクリック。
• ７：発問の段落の<p>が、２つとも<p class="key">に書き換わったのを確認しなさい。
• ８："Oedit"を「上書き保存」しなさい。
• ９："Oedit"の青い「ｅ」をクリックして、"Internet Explorer"の表示を確認しなさい。枠囲いされていますか？
• １０：同じ文字を探し出して、いっぺんに違う文字へ置き換える（書き換える）技を、「置換（ちかん）」と言います。
  「ワード」や「一太郎」や「エクセル」など、多くのソフトに用意されている便利な機能です。
  もちろん、３ヶ所以上をいっぺんに書き換えることも可能です。

●ステップ４：ナビゲーションのリンクを作りなさい

• １：ソースの末尾に、まだ学習していない２つのタグがあります。

  </body>
  </html>
  

• ２：その上に、次の１行を書き足しなさい。

  <p><a href="#top">↑ページ先頭へ戻る</a></p>
  

• ３：次のようになれば良いのです。

  <p><a href="#top">↑ページ先頭へ戻る</a></p>
  </body>
  </html>
  

• ４：矢印のキーボードで打つ時は、以下のようにします。
  • （１）「やじるし」と打つ
  • （２）通常の漢字変換と同様に、指で「スペース」キーまたは「変換」キーを押す。
  • （３）何度か変換を繰り返すと、「↑」「↓」「←」「→」「⇔」が出てくるはずです。
• ５："Oedit"を「上書き保存」しなさい。
• ６："Oedit"の青い「ｅ」をクリック。
• ７："Internet Explorer"に表示されたページの末尾に、「↑ページ先頭に戻る」というリンクが出来ています。クリックして、機能するかどうか試しなさい。
• ８：<a href="#top">〜</a>は、ページ内のリンクです。
  同じページ内の、"top"という「目印」が付いた場所へ移動するリンクなのです。
• ９："oedit"でソースの１０行目を見なさい。
  まだ学習していないタグですが、以下のようになっています。

  <div class="category" id="top">
  

• １０：このタグの、id="top"の部分が、ページ内リンクの「目印」です。id は、ＩＤカード（身分証明書）のＩＤです。
• １１：なお<div>〜</div>のタグについては、明日学習する予定です。