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

課題４：変換しなさい。

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

　ホームページを書く作業は、大雑把に言って３段階あります。

• １：文章を書く。
• ２：文章の中に記号を書き込む（書き足す）。
• ３：見栄え（配色・レイアウト等）を整える。

　【課題３】で体験してもらった通り、３の見栄えを整える作業は「ＣＳＳ」を使えば一瞬で終わります。
　１行の書き足しで、使用する（関連付ける）ＣＳＳファイルの名前を指定するだけで良いのです。

　ですが「ＣＳＳ」にも欠点があります。
　２の記号を書き込む作業が正確に行われていないと、見栄えを正しく整えることができないのです。
　我流で記号を書き込んだホームページでは、「ＣＳＳ」が上手く働かないのです。
　どんなに美味しい「ふりかけ」でも、焦げたご飯や水っぽいご飯にかけては、その真価を発揮できません。
　やはり、ふっくらと炊き上がったご飯にこそ「ふりかけ」をかけるべきなのです。(*1)

　ここまで読んで、「２の記号を書き込む作業が難しそう」と感じた方がいるかもしれません。ですが安心してください。
　最近は便利なソフトがあるので、記号を書き込む作業の大半を自動的に行うことができるのです。

*1:我ながら変な喩えですね。シャリ（ご飯）＋すしネタなどに
　喩えても良かったのですが、前回に引き続き「ふりかけ」で通しました。

●ステップ２："EBTag"をインストールしなさい

• １：自動的に記号を書き込んでくれる便利なソフトを、あなたのパソコンにインストールします。
• ３："ebtag159.exe"を右クリックしなさい。

  ebtag159.exe

• ４：「対象をファイルに保存」をクリックしなさい。
• ５：「保存する場所」は、「ＨＰ講座」のフォルダの中です。
• ６：「保存」をクリック。
• ７：回線にもよりますが、２分程度でダウンロードできます。
• ８：「ＨＰ講座」のフォルダを開きなさい。（「マイドキュメント」→「ＨＰ講座」の順にクリック）
• ９："ebtag159.exe"(*1)をダブル・クリック（*2）。
• １０：「次へ」→「次へ」→「次へ」とクリック。
• １１：「指定されたフォルダが存在しません。作成しますか」と聞かれるので、「はい」をクリック。
• １２：「完了」
• １３：ここまでが上手く行くと、デスクトップ上に黄と赤のアイコンが出来ます。「EBTag（イービータグ）」と書いてあります。

*1:Windows の設定によっては、"ebtag159"と省略表示。

*2:Windows の設定によっては、シングル・クリック。

●ステップ３：記号なしの文章を用意しなさい。

• １：記号なしの文章を用意します。
• ３："subject04.txt"を右クリックしなさい。

  subject04.txt

• ４：「対象をファイルに保存」をクリックしなさい。
• ５：「保存する場所」は、「ＨＰ講座」のフォルダの中です。
• ６：「保存」をクリック。
• ７：ここまでが上手く行くと、「ＨＰ講座」のフォルダの中に、白い"subject04.txt"というファイルが出来ています。
• ８：ただし、Windowsの設定によっては"subject04"と省略表記です。
• ９：また、同じくWindowsの設定によってはアイコンの色が違います。

●ステップ４：変換しなさい。

• １：ステップ３で用意した記号なし文章を、ホームページ（記号あり文章）に変換します。
• ２：デスクトップ上の"EBTag"（黄と赤のアイコン）をダブルクリック。
• ３：「EBTag」の左上に「入力ファイル」という細長い窓があります。
• ４：その窓の横の「...」をクリック。
• ５：「マイドキュメント」→「ＨＰ講座」→"subject04.txt"
• ６：「開く」
• ７：「EBTag」の右上に「出力ファイル」という細長い窓があります。
• ８：その横の「...」をクリック。
• ９：「マイドキュメント」→「ＨＰ講座」
• １０：「ＯＫ」
• １１：「EBTag」の下の方に「スタイルファイル」という細長い窓があります。
• １２：その横の「...」をクリック。
• １３：「マイドキュメント」→「ＨＰ講座」→"orange_line.css"
• １４：「開く」
• １５：「EBTag」の右下に３つのアイコン（絵文字）が並んでいます。
• １６：真ん中のアイコン（<p>が描いてある絵文字）をクリック。
• １７：「ＨＰ講座」のフォルダを開きなさい。（「マイドキュメント」→「ＨＰ講座」の順にクリック）
• １８："subject04.html"というファイル（多分、青い"ｅ"が書かれた白いファイル）が出来ています。
• １９："subject04.html"をダブルクリック。
• ２０："Internet Explorer"が起動して、ホームページが表示されます。

●ステップ５：ノートに書きなさい

• １：今日の学習で、分かったこと・気づいたこと・思ったことをノートに書きなさい。
• ２：今日の課題が上手く行かない方は、ステップ何の何番目がどう上手くいかないのか、なるべく詳しく報告しなさい。
• ３：早く終わった人は、変換したホームページ（subject04.html）のソースを見なさい。（「表示」→「ソース」）
• ４："EBTag"によって自動的に記号が書き足されたことが分かります。