ホームページを作る

研コンでホームページを作成するための情報です。このページは山本君の書いたページをもとに作成しました。

最終更新日時は 02/02/98 ; 12:45:10 (JST)です。
ただし内容に関しては 1998年1月現在においてのみ文責をもちます。

注意：ホームページは基本的に、全世界から見ることができます。著作権や肖像権には十分ご注意下さい。

HTMLファイルについて

WWWのホームページは HTML とよばれる言語で書かれます(HTML = HyperText Markup Language)。言語というと難しそうですが、基本的には通常の文章のテキストファイルと同じで、最低限それに HTML として形を成すための尾ひれをつけてやるだけでOKです。もしその気があれば適当な記号（タグ）を挿入し、見出しを作ったり、リンクを張ったり、画像を貼り込むことで、さらに良いページになるでしょう。

近頃はホームページを簡単に作成する専用ソフトがあったり、 Wordなどのワープロが HTML形式で出力できたりします。しかし、ちょっと試しに作ってみるだけならともかく、多少はまともなページを作ろうと思うなら HTML の知識は避けて通れない道だと思います。知識さえあれば、必ずしも HTMLを手で書く必要もありませんし、すべて憶える必要もないので、使うものからだんだんと憶えていきましょう。

HTMLに関する解説はいろいろな本や資料が出回っているので、ここでは省略します。この文章の最後に挙げる参考文献のリンクも御利用下さい。

なにはともあれ、HTMLで書かれた HTMLファイルを作るところから始めます。前述のようなソフトを使うなり、テキストエディタを使うなりして、まずパソコン上に HTMLファイル（Windowなら HTMファイル）を作りましょう。ファイル名は名が体を表していればなんでも良いですが、全角文字や半角カナ文字は避けて下さい。

もちろん UNIXマシン上で直接 HTMLファイルを作っても構いませんが、以下ではパソコン上で作成する場合に絞って解説します。

作成途中のHTMLファイルは、WWWブラウザで開く（あるいはドラッグ＆ドロップする）ことでパソコン上で見ることができます。

目次へ戻る

HTMLファイルをアップロードする

HTMLファイルができたなら、今度はそれを公開するためにサーバに転送（アップロード）する必要があります。

HTMLファイルを置く場所は、各ユーザのホームディレクトリのすぐ下の

/home/username/html/

というディレクトリになります（ユーザ名を username とした場合。以下も同様）。 telnet や FTP などでログインした直後の場所（ホームディレクトリ）は

/home/username/

なので、（必要ならhtmlというディレクトリを作成して） htmlへ移動し、そのディレクトリ内に FTPで HTMLファイルを転送します。もし複数の HTMLファイルや他に画像ファイルがある場合には、それも転送して下さい。（FTP や telnet の使い方についてはここでは省略します）

ここまでできたら、試しにブラウザで

http://www.med.teikyo-u.ac.jp/‾username/

なる URL を指定して読み出してみてください（上のような WWW上での場所を示す名前を URL = Universal Resource Location と呼びます）。自分が転送したファイルの一覧が表示されたでしょうか？そこで一覧の中から自分の見たいファイルを選ぶと、自分の作ったページが表示されるはずです。

つまり上の URL が先ほどのディレクトリと対応しているわけです。

  サーバ上の場所              WWW上の場所               
/home/username/html/ <---> http://www.med.teikyo-u.ac.jp/‾username/

以上がアップロード作業の基本ですが、以下のコラムも読んでみて下さい。

インデックスファイルについて

先ほどの例であったとおり、

http://www.med.teikyo-u.ac.jp/‾username/

のようにディレクトリ名を指定して WWWブラウザで開くとディレクトリの中身の一覧が表示されます。

これはある意味では便利ですが、usernameさんの情報を見に来た人にとっては一覧が出てきても煩わしいだけですね。できれば簡単な紹介やプロフィールなどが書かれていて、さらに詳しい情報へのリンクが置かれているページが出てきた方がわかりやすいでしょう。

このように、ディレクトリ名でURLを指定した場合に、そのディレクトリの中身一覧（インデックス）のかわりに表示されるファイルをインデックスファイルと呼びます。

余談ですが、本来「ホームページ」という言葉はこのような「個人や組織の情報への入口になるページ」のことを指すもので、 WWW上のページをすべてホームページと呼ぶわけではありません（でした）。
さらに厳密には、「ホームページ」は「ブラウザを立ちあげたときに最初に見るスタート地点のページ」のことを指していて、組織などがメンバーや訪問者に「ホームページ」を提供していたことから、このような変遷があったようです。

研コン室の場合、インデックスファイルの名前は

HomePage.html, index.html, index.htm

のいずれかと設定されています（大文字小文字まで厳密に決まっています）。サーバは前のものから順に探して、最初に見つかったファイルをインデックスファイルとして表示します。したがって、たとえば Windows で index.htm なるファイルを作った場合は、HomePage.html やindex.htmlといったファイルを作らずに index.htm だけ置いておけば、それが自然とインデックスファイルになります。

もし自分の作ったページにこのような「ホームページ」にあたるものがあれば、そのファイル名をインデックスファイル名のどれかに変えておきましょう。 http://www.med.teikyo-u.ac.jp/‾username/ としても表示されるようになりましたか？

さらに余談ですが、ディレクトリ名を示す URL は必ずスラッシュ（"/"）で終らせるようにします。たとえば上の username さんの URL は
http://www.med.teikyo-u.ac.jp/‾username
でなくて
http://www.med.teikyo-u.ac.jp/‾username/
とします。
これはなぜかというと、たとえばブラウザ（クライアント）が /‾username を見に行く場合、サーバとの通信は
　クライアント：「/‾username を見せて下さい」　サーバ　　　：「/‾username というファイルはないけど、　　　　　　　　　/‾username/ というディレクトリならあるよ」　クライアント：「なら /‾username/ を見せて下さい」　サーバ　　　：「はいはい、じゃ /‾username/を送ります」
となります。もちろんきちんと /‾username/と指定した場合は上半分が不要なわけで、つまりスラッシュなしでは無駄な通信（容量、時間）が起こってしまうわけです。
そういうわけで、リンクなどに URLを書くときはきちんとスラッシュまで書くように心がけましょう。

目次へ戻る

ディレクトリの構成

自分のインデックスページ（ホームページ）に “研コン室のホームページへ”というハイパーリンク（アンカー）をつけたい場合には、

<a href="/">
研コン室のホームページへ
</a>

（以上例１）、または

<a href="../">
研コン室のホームページへ
</a>

（以上例２）のようにします。これは WWW上から見たディレクトリの階層が次のようになっているためです（http://www.med.teikyo-u.ac.jp の後ろだけに注目した場合）。

                   / <- 研コン室のホームページ
                   |
   +------+--------+--+------------+-- ...
   |      |           |            |
/med/   /aimg/   /‾user1/       /‾user2  
                      |            +----------------+-- ...
                      |            |                |
                 /‾user1/data/  /‾user2/picture/ /‾user2/text/
                      |..          |...

/‾user1 や /‾user2 がそれぞれ /home/user1/html、/home/user2/html に対応しているのは、前述のとおりです。さらにその下の /‾user1/data/ や /‾user2/picture/ はそれぞれ /home/user1/html/data/ や /home/user2/html/picture/ などに対応します。

したがって /‾user1/ のインデックスページや /‾user1/profile.html などといったファイル(URL)から研コン室のホームページへ戻るには根本（"/"）や一つ下（"../"）のディレクトリを指定すればよいわけです。

もし /‾user1/data/ で同じことをすると、例１（"/"）は研コンのホームページを、例２（"../"）は一つ上の /‾user1/ を指していることになります。

実際にやると例１と例２をやってみます。リンク先が違うディレクトリになっているのが、わかるでしょうか。

例１：研コン室のホームページへ
例２：研コン室のホームページへ

リンク（アンカー）に画像をボタンとして使うのもよく使われる手段です。その場合アンカータグ(A)の中に IMGタグを書きます。

<a href="/">
<img src="/aimg/granitesm_left.gif" alt="o">
研コン室のホームページへ
</a>

研コン室のホームページへ

ボタンとなった画像には上のように枠がつきますが、border=0 オプションをつけると枠がなくなります。

<a href="/">
<img src="/aimg/granitesm_left.gif" alt="o" border=0>
研コン室のホームページへ
</a>

研コン室のホームページへ

目次へ戻る

ホームページ作成のテクニック

この節ではホームページ作成のテクニックを、研コン独特の設定も含めて紹介します。

最終更新日時を表示する

このファイルを最後に更新したのは： 02/02/98 ; 12:45:10 (JST)

のように表示する方法を説明します。これは SSI の flastmod 機能を用いて実現しますが、 execを除くSSIはデフォルトで可能にしてありますので、とくに準備も必要なく実現できます。

作業は実に簡単で、以下のタグを挿入するだけです（「最終更新：」は単なる例なので、つける必要はありません）。

最終更新：<!--#flastmod file="HomePage.html"-->

もちろんHomePage.htmlのところは、ファイル名に応じて変更する必要があります。同じサーバ上にある他のファイル名を書けば、そのファイルの更新日時を表示することも可能です。もし指定されたファイルがなかったり指定が間違っていたら、次のようなエラーが表示されるはずです。

最終更新：[an error occurred while processing this directive]

flastmod には file と virtual の２つのオプションの指定の仕方があります。ひとことでいうと、file はサーバのディスク上での位置を示すのに対し、 virtual は WWW上での URLでの位置を示します。したがって上の例のように自分自身や自分と同じディレクトリのファイルを指定するときには、file でも virtual でも変わりはありませんが、別のディレクトリにあるファイルの更新日時を示す場合には異なる書き方になります。なおどちらの形式でも '../'で親ディレクトリを参照することはできません。また virtual はルートディレクトリから参照することができますが、 file はルートディレクトリに戻ることもできず、自分より下位のディレクトリのみ参照できます。

もっと具体的にいうと、以下の２つの記述は同じファイルを指しています。

例１：<!--#flastmod file="data/dummy.html"-->
例２：<!--#flastmod virtual="data/dummy.html"-->

また virtual のみ

例３：<!--#flastmod virtual="/‾yamamoto/HomePage.html"-->

のような書き方ができます。以下は実際に使ってみた例です。

例１：01/19/98 ; 12:06:06 (JST)
例２：01/19/98 ; 12:06:06 (JST)
例３：02/26/96 ; 19:34:04 (JST)>

さて、以上で更新日時が表示されるようにはなりましたが、表示スタイルに不満があるかと思います。 flastmod の表示スタイルを変更するには、'config timefmt=...' SSIを使います。

まず、ファイルの先頭（正確には flastmodより前ならどこでもよい）に以下のような文を入れます。

<!--#config timefmt="%m/%d (%a), %Y"-->

"%m/%d (%a), %Y"の部分でスタイルを指定します。以下の記号を利用します。

     %a　    省略形の曜日名
     %A　    完全な曜日名
     %b　    省略形の月名
     %B　    完全な月名
     %d　    月の日付（0-31）
     %D      日付。%m/%d/%y と指定した場合と同じ
     %e      日（1 桁の値の 10 の位には 0 ではなく空白を置く）
     %h      月。locale の月の省略名を使用
     %H　    時間（00-23）
     %I 　   時間（01-12）
     %j　    日付（000-365）
     %m　    月（01-12）
     %M　    分（00-59）
     %n      ¥n と同じ（改行コード）
     %p　    午前（AM）または午後（PM）
     %r      時刻。%I:%M:%S %p と指定した場合と同じ
     %R      時刻。%H:%M と指定した場合と同じ
     %S　    秒（00-59）
     %t      ¥t と同じ（タブコード）
     %T      時刻。%H:%M:%S と指定した場合と同じ
     %U　    １年の週数（00-53）。週の最初は日曜日となります。
     %w　    １週間の曜日数（0-6, 日曜: 0）
     %W　    １年の週数（00-53）。週の最初は月曜日となります。
     %x　    Locale 特定日付形式
     %X　    Locale 特定時間形式
     %y　    年（下2桁）（00-99）
     %Y　    年（ccyy）（1988 など）
     %Z　    時間帯名

上の例では

<!--#config timefmt="%D ; %T (%Z)"-->

というスタイルを使っていましたが、少し変えてみましょう。

"%y/%m/%d %T"            98/02/02 12:45:10
"%T (%b %d)"             12:45:10 (Feb 02)
"%Y年%m月%e日 %H時%M分"  1998年02月 2日 12時45分

ページが何回アクセスされたかを表示する

アクセスカウンターについての説明は別のページに用意してあります。

研コンのイメージファイル

画像ファイルは原則としてそれぞれ用意していただくわけですが、

のような一般的なイメージファイルがいくつか用意してあり、

/gifs/
/aimg/

に置いてあります。例えば、
<img src="/gifs/skyblue.gif" alt="o"> で

が、
<img src="/aimg/new_small.gif" alt="[new!]"> で [new!]

が表示されます。

altというのは画像を表示しない（できない）場合に画像の代わりに表示する文字列を指定するためのものです。

/aimg/ については直接ここから選んでみて下さい。好きな絵で右クリックする（マックならしばらく押したままにする）とファイル名がわかります。

/gifs/は同じようにここでわかります。ただし、このページでは...download/blue.gifなどと表示されますが/gifs/blue.gifなどとして利用するようにして下さい。

目次へ戻る

HTMLを書くのに参考になる資料

基本的なHTMLの書き方については WWW上で慶応や NTT などにある解説文書を見ることができます。どちらもNCSA （最初の WWW browser 'Mosaic' を生み出した組織です）によって提供されている A Begginer's Guide to HTMLを日本語訳したものです。

さらに詳しいHTMLの書き方については KDDのHTMLメモ（近日中に obsolete する予定らしいです）や慶応の学生さんの書いたドキュメントが参考になります。

より正式なドキュメントや最新のWWW技術について知りたい方は、 WWW Consortium (W3C) へ行くとよいでしょう。最新の HTML4.0 の正式アナウンスなどがあります。

出版物としては Laura Lemay の「HTML入門」("Teach Yourself Web Publishing with HTML in a Week") や David Kerven らの「HTML3パワフルテクニック」(原題不詳) などが有名で、これらは研コンにも（日本語訳版が）あります。

HTMLファイルを書くには、普通はテキストエディタで書いたり HTMLエディタで書いたりしますが、とりあえず最初のページを手っ取り早く作るには、 view sourceやsave as..などのメニューを利用してどこかのページをコピーしてそれを参考に使うと良いですページの中身はともかく形式に関しては、本をいろいろ見たり HTMLエディタに頼るよりもすでにあるページを参考にする方が手っ取り早いです（もちろん著作権等の問題には注意しましょう）。最初にひとつページを作ったら、あとはそれを改造しながら他のページも作っていくことができます。ただしそのページの書き方が正しいとは限らないので、上に挙げたドキュメントで確認して正しい知識を身に付けた方が良いことは間違いありません（本や文書が必ずしも正確とは限りませんが……）。

目次へ戻る

研コンの WWWサーバ情報（まとめ）

サーバホスト名: www.med.teikyo-u.ac.jp

これは別名（canonical name）で、現在これにあたるマシンは suzukaです。

httpd: Apache 2.1.4

98年1月現在

ユーザ用 WWWディレクトリベース

ディスク上の /‾username/html/ が WWW上の /‾username/ に対応します。

画像

/aimg/や /download/を用意してあります。

CGI

CGIはとくに制限ありません。拡張子.cgiと.pl をCGIプログラムと認識します。

SSI

exec のみ禁止

用意されたイメージファイル

/aimg/や /gifs/にサンプルがあります。

その他のトピック

目次へ戻る

WWW counter / 研コン室 / 相談員　森川
< morikawa@med.teikyo-u.ac.jp >