ホームページ作り方教室 〜必要最小限の学習で、法則化論文形式のページをTOSSランドに登録しよう〜
TOSSオホーツク・
山田正和
作成日：2002年9月24日(火)
更新日：2003年1月13日(月)
課題３：１行書き足しなさい
今日は、ホームページ作成作業の３段階目を体験してもらいます。
●ステップ１：「ふりかけ」をダウンロードしなさい。
- １："orange_line.css"を右クリックしなさい。
orange_line.css
- ２：「対象をファイルに保存」をクリックしなさい。
- ３：「保存する場所」は、「ＨＰ講座」のフォルダの中です。
- ４：「保存」をクリック。
- ５：回線にもよりますが、３０秒以下でダウンロードできます。
- ６：今ダウンロードしたファイルは、ホームページの「ふりかけ（のようなもの）」です。
●ステップ２："subject01.html"に１行書き足しなさい
ステップ１の「ふりかけ」を、早速試してみましょう。
- １：「ＨＰ講座」のフォルダを開く。（「マイドキュメント」→「ＨＰ講座」の順にクリック）
- ２：フォルダの中に、"subject01.html"や"orange_line.css"があることを確認。
- ３："subject01.html"を"Internet Explorer"で開きなさい。（"subject01.html"をダブルクリック、またはシングルクリック）
- ４："subject01.html"のソースを表示させなさい。（「表示」→「ソース」の順にクリック）
- ５：ソースの１行目に、以下の１行を書き足しなさい。
<link rel="stylesheet" type="text/css" href="orange_line.css">
- ６：５の作業は、以下のようにするのです。
<h1>授業の腕をみがく</h1>
<address>向山洋一</address>
<p>運動会のダンスを年配の女の先生が指導していた。研究熱心な先生である。</p>
↓
<link rel="stylesheet" type="text/css" href="orange_line.css">
<h1>授業の腕をみがく</h1>
<address>向山洋一</address>
<p>運動会のダンスを年配の女の先生が指導していた。研究熱心な先生である。</p>
- ７：５の作業は、コピー＆ペースト（複写＆貼り付け）すると楽です。
- （１）書き足す１行（<link (中略)>）の先頭( < の前)をクリック
- （２）「Shift」キーを押したまま、同じく末尾（ > の後）をクリック
- （３）（２）に成功すると、１行全体が反転表示されます。
- （４）反転表示された１行を右クリック
- （５）「コピー」を右クリック
- （６）ソースの、１行書き足したいところを右クリック（<h1>の前を右クリック）
- （７）「貼り付け」をクリック
●ステップ３："Internet Explorer"を更新しなさい
- １：ステップ２がソースしたら、ソースを上書き保存します。
- ２："Oedit"の左上の方、「ファイル」→「上書き保存」
- ３："Internet Explorer"の表示を更新します。（ソースの書き換えを反映させます）
- ４："Internet Explorer"の上、「更新」をクリック。
- ５：もしも「更新」ボタンが分からなければ、「Ｆ５」キーを指で押しても同じ効果があります。
- ６：ステップ２に成功していれば、"Internet Explorer"の表示が劇的に変化します。
●ステップ４：ノートに書きなさい。
- １：上手く劇的な変化が起きたでしょうか？ この変化は「ふりかけ（のようなもの）」の効果です。
- ２：今日の学習（課題３）で分かったこと・気づいたこと・思ったことをノートに書きなさい。
●ステップ５：早く終わった人は、違う「ふりかけ」も試しなさい
長々と指示を書いてしまいましたが、実際の作業は短いです。
多少パソコン操作に慣れた人なら１０分以下で終わってしまいます。
ですから一応、追加課題を出しておきます。
- １：早く終わった人は、違う「ふりかけ」も試しなさい。
- ２：２つ目の「ふりかけ」は、"green_line.css"です。
green_line.css
<link rel="stylesheet" type="text/css" href="green_line.css">
- ３：３つ目の「ふりかけ」は、"blue_line.css"です。
blue_line.css
<link rel="stylesheet" type="text/css" href="blue_line.css">