Ⅵ．テキストエディタで構築１（エディタのインストール）
ここでは、テキストエディタを用いて、HTML（とCSS）を学びながら、Web サイトを 構築する方法を説明していきます。相当の労力と時間を必要とします。 覚悟を決めてかからないと途中で挫折するかもしれません。 その場合、費やした労力と時間は無駄になります。
テキストエディタの選択
Windows には、「メモ帳」というテキストエディタがあります。
名前通り、ちょっとしたメモをとるには簡便なんですが、機能が限定的なため、
HTMLファイルの編集には不向きです。
お使いの pc に、「メモ帳」以外のテキストエディタがない場合。
無料でインストール可能な Web 用テキストエディタは多数あります
（例えば、
プログラミングに使える！フリーのテキストエディタ10選
）
から、好みに合わせてそのどれかを準備することになります。
ここでは、TeraPad（テラパッド）のダウンロードとインストールについて
説明します。
（既に、テキストエディタがある方はこのページは不要です。）
テラパッドのダウンロードとインストール
1. 窓の杜の
TeraPadページを開きます。
2. そこの、「窓の杜からダウンロード」をクリックします。
画像
3. ダウンロード完了後、ダウンロード先フォルダを開き、
4. ダウンロードしたファイル
を
ダブルクリックします。
ウィザード形式でのインストール手順設定が開始されます。
5. デフォルトで、「デスクトップにショートカットを作成する」になっていると
思いますから、特に何も変更することなく「次へ」を順次クリックすれば、
インストールが開始されます。
(*) 完了後、デスクトップにテラパッドのショートカット
の表示を確認して下さい。
テラパッドを使ってみる
1. テラパッドのショートカットをクリックして下さい。 テラパッド窓が開きます。
実習で作成したファイル index.html は、テキストファイルです。
テラパッドで閲覧／編集ができますから、一応見ておきます。
----- 先に断っておくと、この index.html にはワードで閲覧／編集が できるようにHTMLファイルとしては不必要な内容が多数含まれています。 ですから、HTMLを学習する為の参考としては不向きです。-----
（参考のため、後で、不必要な部分を除いたものを記述しておきます）
2. テラパッド窓のメニュー「ファイル」を左クリックします。
3. 現れたサブメニューの「開く」を左クリックし、
選択窓でデスクトップ内のフォルダ hptest のファイル index.html
を選択します。
index.html の内容が、テラパッド窓に表示され、編集可能となります。
が、このファイルは中身を見てみるだけで、これで用済みです。
ファイルを閉じるとテラパッドまで閉じてしまうので、そのままにしておきます。
新たにHTMLファイルを作成します。
1. テラパッド窓の、メニュー「ファイル」を左クリックします。
2. 現れたサブメニューの「新規作成」を左クリックします。
新しい編集画面が現れます。
3. テラパッド窓から、このページに移ります。
（どこでもいいですからこのページをクリックして下さい。）
4. 下の水平線の間にある文字列全体を選択します。
カーソルを文字列全体の先頭に置き、左クリックし--その状態のまま--
カーソルを文字列全体の最後に移動（ドラックする）
文字列全体の背景色が青色であることを確認し、左クリックを開放
5. コピーして下さい。
青色に変わっている場所（どこでも構いません）にカーソルを置き、右クリック
現れたサブメニューの「コピー」を左クリックします。
<!DOCTYPE HTML>
<html>
<head>
<title>HP テスト</title>
<meta charset="Shift_JIS">
<style type=text/css>
body {
width:880px; margin:0 auto; text-align:center;
line-height:2; background-color:#ffaaff;
}
</style>
</head>
<body>
<div style="color:blue;background-color:yellow;font-size:20pt;">HP テスト</div>
<!--
ここはコメント行で、ブラウザは無視する
-->
<img src="http://jfmaj6.html.xdomain.jp/img_c2/my_sphere2.png" align="left">
<img src="http://jfmaj6.html.xdomain.jp/img_c4/sample_map3.jpg" align="center">
<img src="http://jfmaj6.html.xdomain.jp/img_c6/world_map.png" align="right">
<br clear="all">
<a href="http://chiyodaclub.php.xdomain.jp/index.html">
<span style="font-size:35pt;background-color:#aaffaa;"><b>pc「千代田」へのリンク</b></span>
</a>
</body>
</html>
6. テラパッド窓に戻り、メニュー「編集」を左クリックします。
7. 現れたサブメニューの「貼り付け」を左クリックします。
コピーした内容が貼り付けられ表示されます。
表示内容を、HTMLファイルとして、フォルダ hptest に保存します
1. メニュー「ファイル」を左クリックします。
2. 現れたサブメニューの「名前を付けて保存」を左クリックします。
保存用窓が表示されます。
画像
3. 保存用窓で、フォルダ hptest を選択します。
4. ファイルの種類選択枠を、左クリックします。
5. 現れたプルダウンメニューで、「HTMLファイル」を選択します。
6. ファイル名欄に test.html と入力します。
7. 右側の「保存」を左クリックします。
保存したHTMLファイルを、ブラウザで表示します
1. テラパッドのメニュー「ツール」を左クリックします。
2. 現れたサブメニューの「Internet Explore」を左クリックします。
3. ブラウザ（ie）が開かれ test.html が表示されます。
4. ブラウザ表示を確認後、テラパッドを終了します。
拡張子 html のファイルをダブルクリックしたとき、何がファイルを開くか？
拡張子 html のファイルは、ブラウザで開けますが、
テキストファイルですからテラパッドでも開けます。
ダブルクリックで開いた場合は、デフォルトではブラウザで開かれます。
設定を変えることで、ダブルクリックによりテラパッドで開かれるようにできます。
1. html ファイルを右クリックします。
2. 現れたメニューの「プログラムから開く」にカーソルを合わせます。
3. 現れたサブメニューの「既定のプログラムの選択」を左クリックします。
4. 現れた選択画面の「すべての .html ファイルをこのアプリで開く」に
チェックを入れます。
5. アプリの中から、TeraPad を選択（左クリック）します。
（余談） 「テラパッド」という名前を初めて聞いたときのこと
昔（高校生の頃）からSFファンです。
ずーっと、早川書房のSFマガジンを愛読してきました。
ですから、「テラパッド」という名前を聞いたときは、
『なっ何て大そうな名前を付けるんだ！』と驚きました。
というのは、SFファンにとって「テラ」とは「地球」を指し示すからです。
「地球へ（てらえと読む）・・・（Coming Home To Terra)」というタイトルの
竹下恵子のコミックがあります（アニメ化もされています。）
「テラフォーミング」とは、SFでは、
惑星を人間が住めるように改造することを意味する一般的な単語です。
はて？「テラパッド」の「パッド」はどんな意味で使ってるんだろう？
まさか、洋服の肩や胸などに入れる詰め物のことじゃないよなー？
「テラ」（地球）「パッド」（洋服の肩や胸などに入れる詰め物）では、
意味が通らないしー。とにかく、「テラ」などという言葉を使って、
いずれこのエディタソフトは名前負けをおこすに違いない、
何でこんな名前を付けたんだろうと思いました。
答は、じきに判りました。テラパッドの作者（ソフト開発者）は、寺尾進 氏で、
名前の最初の２字をとって付けられていました。納得！
（「パッドがどういう意味か？」なんてどうでもいいや！）