resume11

#11/ホームページの作成

インターネットで自分の作った「ページ」を公開する

学校のサーバーに登録する
登録すると、世界中から参照できるようになる
文書はファイルとして作り、しかるべき手順で登録する必要がある
作成する文書はHTML（Hyper Text Markup Language）によって記述されたテキストファイルや、あるいは画像などの素材ファイル

実習1：まず、手元でHTMLを作ってみよう

あらかじめ、作成したファイルを作っておくフォルダを用意しておく
- C:ドライブのハードディスクの、「Winnt→Profiles→a000000→Personal」フォルダ内に、たとえば「My Web Page」というのを作っておくとする
- 「WindowsNTエクスプローラ」でフォルダを左側で選択し、「ファイル」メニューの「新規」の「フォルダ」を選ぶ。作ってから名前を変える
「メモ帳」を開く（スタートメニューの「アクセサリ」）
以下のテキストをキータイプする
- <HTML>
- <HEAD>
- <TITLE>私のぺージ</TITLE>
- </HEAD>
- <BODY>
- 私の名前は◯◯◯◯です。
- 慶應大学の学生です。
- </BODY>
- </HTML>
ファイルとして保存するが、ファイル名は必ず「index.html」にする
- 最初に作った「My Web Page」フォルダに保存する。場所として、この位置に移動して、index.htmlで保存する
ここで、index.htmlをダブルクリックしてみる。ブラウザで見えているが、これはファイルの中身を単に開いただけ。まだ、公開はされていない
「タグ」について
- <>で囲われたテキストはページでは見えていない。これは、ページ上に文字などをどうレイアウトするかを指定する一種のコマンドで、「タグ」と呼ばれる。<HEAD> </HEAD>のように対にして使うものは、通常はその間の範囲に影響がある。対で使わないものもある。

ftpについて

ワークステーションや世界中のサーバーとファイルの受け渡しができる
作成したHTMLファイルなどをこれを使ってサーバーに登録する

実習2：ホームページを公開するためのディレクトリを用意

telnetでワークステーションに接続
- public_htmlというフォルダを作る（以下のコマンドを入力、半角の空白で区切る、入力後Enter!）
  - cd
  - mkdir public_html
- アクセス権を設定する（以下のコマンドを入力、最後のピリオドを忘れない）
  - cd
  - chmod 755 .
ここまでの作業は1回だけでよい

実習3：WS_FTPでのファイル転送

起動すると、ハードディスクのファイルが一覧されているのを確認
- ホームページのファイルのあるフォルダに移動
Connectボタンで「mita1」あるいは「mita1.cc.mita.keio.ac.jp」に接続する。User/Passwordはtelnetのときのものを指定
ワークステーションのディレクトリが右表示される
- public_htmlに移動する
ハードディスク内のファイルやフォルダを選択して、ワークステーションにコピーする
- 左側にハードディスクのファイルが一覧される
- 作成したページのファイルであるindex.htmlが存在するフォルダに移動する
- Autoをチェックする
- ファイルやフォルダを選択して、「-->」ボタンなどを押す
  - index.htmをコピーする
  - グラフィックスを埋め込んでいれば、そのファイルもコピーする必要がある。たぶん、index.htmと同じフォルダにファイルがいっぱいできているが、それは埋め込んだグラフィックスのファイル
  - Shiftキーを押しながらクリックすると、複数のファイルが選択できる

ftpでサーバーにファイルを登録すると…

ブラウザを使えば、アドレス「http://www.mita.keio.ac.jp/~aXXXXXXX」で参照できるようになる。実際にブラウザで見てみよう
自分のディレクトリのindex.htmlが自動的に開く（これは決まりごと）
これで、世界中のブラウザから参照できるようになる。もちろん、アドレスを知らないと見えないが…

実習4：ページを少し変更する

ページの中身を書き換える共通の手順
- 手元のファイルを変更する
- いったん、ファイルをダブルクリックして、思い通りになっているかを確認する
- それをサーバーにftpを使ってアップロードする
- ブラウザで再度確認する
(1)
- </BODY>の前に、
- 慶應大学三田のページは<A HREF="http://www.mita.keio.ac.jp">ここ</A>をクリックしてください
- を追加する
- アップロードして確認し、どうなるかを参照する
(2)
- ページに画像を表示することをやってもらいます。画像については、ここをクリックして取得します
- </BODY>の前に、
- <SRC IMG="cat.jpg">
- を追加する
- アップロードして確認し、どうなるかを参照する
- cat.jpgファイルをアップロードすることを忘れないように
(3)＿＿以下修正の箇所だけを示す。結果を見て何が変わったかをよく観察すること
- 自分の名前のある行（～の部分）の前に、あとにと入れてみる
 - たとえば、「私の名前は◯◯◯◯です。」としてみる。
- 自分の名前の前後に「」を入れる
 - たとえば、「私の名前は◯◯◯◯です。」としてみる。
- 各～の部分の間に、<HR>を入れてみる
- <BODY>の代わりに<BODY BGCOLOR=#FFFFAA>にしてみる
- を、にしてみる
- あとは自由に…

ちなみに、ページ上で他にできることの代表例

文字に色をつける
背景に色をつける
背景にグラフィックスを配置する
箇条書き、番号付き箇条書き
表作成
フレーム
etc.