超簡単なホームページの作り方

akagi.ms.u-tokyo.ac.jp用
modified from the original one written by okumura@matsusaka-u.ac.jp

インターネットのWWW(World Wide Web)で情報を発信するための ホームページの作り方を超簡単に解説します。

まず初めに……

akagi.ms.u-tokyo.ac.jp に hanako というログインネームで account を持って いるとしましょう(他のWWW のサーバでも、ほぼ同様なので、参考になるでしょう)。

WWWサーバ(ここでは、akagi.ms.u-tokyo.ac.jp で、WWWサーバには、NCSA HTTPd をほとんど設定を変えずに使っています)にログインしてください。 「>」というプロンプトが出ますね。

ここで次のように打ち込んでください。

    mkdir public_html
これでhanakoの自分のホームディレクトリの下にpublic_htmlという名前の サブディレクトリができます。

さらに次のように打ち込んでください。

    cd public_html
これでpublic_htmlというサブディレクトリに移動しました。

次のように打ち込んでください。

    mule index.html
これでエディタが起動します。 このエディタはmule(ミュール)といって, UNIXの世界で広く使われているフリーソフトです。

muleの終了のしかたは Ctrl-X Ctrl-C です。 つまり,コントロールキーを押し下げながら,X のキーをたたき, 次に,やはりコントロールキーを押し下げながら C のキーをたたきます。 すると,

Save file /home/staff/hanako/public_html/index.html? (y or n)
のように言ってきますので,y のキーを押すと保存して終了します。

作業をやめて接続を切るには

    logout
と打ち込みます。

ホームページの書き方

上で述べたようにしてmuleを起動し,ホームページの内容を書き込みます。

ホームページは通常のテキストファイルですが, HTML(HyperText Markup Language)という方式に則って 記述しなければなりません。

HTMLで記述した文書の簡単な例をあげてみます。 <...> で囲んだ部分がHTMLの命令です(詳しくは後で説明します)。 皆さんも,適当に内容を変えて打ち込んでみてください。

    <HTML>
      <HEAD>
        <TITLE>山川花子</TITLE>
      </HEAD>
      <BODY>
        <H1>山川花子のホームページ</H1>
        <P>山川花子は東京大学大学院数理科学研究科の修士1年です。
        <P>よろしくお願いいたします。
      </BODY>
    </HTML>

HTMLの命令の部分は,大文字でも小文字でもかまいませんが, 必ず半角文字で書いてください。 なお,上の例では見やすいように頭を下げて書きましたが,

    <HTML><HEAD>
    <TITLE>山川花子</TITLE>
    </HEAD><BODY>
    <H1>山川花子のホームページ</H1>
    <P>山川花子は東京大学大学院数理科学研究科の1年生です。
    <P>よろしくお願いいたします。
    </BODY></HTML>
のように詰めて書いても同じことです。

WWWブラウザ(Mosaic, Internet ExplorerやNetscape Navigatorなど) を立ち上げてください。アドレス(URL)として次のように指定します (山川花子さんの akagi でのログイン名が hanako であるとします)。

    http://akagi.ms.u-tokyo.ac.jp/~hanako/

どうでしょうか。やってみて納得してください。

ちなみに,この http://akagi.ms.u-tokyo.ac.jp/~hanako/ のような, “何々://何々” のような書き方を URL (Uniform Resource Locator) といいます。 URLはファイル名を一般化したもので,インターネットの情報源を現すのに使います。 URLの http:// は情報源がHTMLで記述された文書であることを意味します。

HTMLの命令

上の例で使われたHTMLの命令の意味は次の通りです。 多くの命令が <...> と </...> で対になっています。

段落の区切りの命令 <P> を入れたところでは必ず改行されますが, それ以外のところでは,エディタで作ったファイルの改行位置とは無関係に, WWWブラウザが画面の幅に合わせて適当な位置で改行してくれます。

注意!!

自分のホームディレクトリの public_html(先の例では、 /home/staff/hanako/public_html)およびそれより下のディレクトリにある すべてのファイルは、(<A HREF= で指定しなくても)世界中から見るこ とが出来、実行ファイルなら実行可能になります。御注意下さい。

また、他の人から自分のディレクトリがアクセス出来なくなっていると WWW ブラウザから見ることができません。たとえば、

      chmod 755 ~/
      chmod 755 ~/public_html
      chmod 755 ~/public_html/index_html
とすればよいでしょう。自分のディレクトリの中で、他の人から見られたく ないものは、それぞれに応じて個別に設定して下さい。

画像の入れ方

画像はGIF形式にして,次のような命令で入れます。

    <IMG SRC="mypic.gif" ALT="My Picture">

こうすると,mypic.gif というファイルが文書の中に入ります。 WWWブラウザで画像を表示しない設定にした場合は,ALTで指定した文字列 (この場合は“My Picture”)が画像の代わりに表示されます。

画像は一つの大きな文字として扱われますので, 画像を独立した行に置きたいときは, 画像の前後に段落開始の命令 <P> を入れて

    <P><IMG SRC="mypic.gif" ALT="My Picture">
    <P>これは私の写真です。
のようにするのがよいでしょう。

WWWでは画像の形式はGIFが一般的です(最近はJPEGも増えました)。 Windows 3.1の「ペイントブラシ」やWindows 95の「ペイント」で 描いた絵はBMP形式で保存されます。これをGIF形式に直すには,UNIX上で

    bmptoppm myfile.bmp | ppmtogif > myfile.gif
のように打ち込みます。

もちろんパソコン上でGIF形式に変換してからUNIXに送ってもかまいません。

リンクのしかた

たとえば

    ここから<A HREF="http://sunsite.sut.ac.jp/">
東京理科大学</A>に行けます。
と書いておけば,WWWブラウザでは
ここから東京理科大学に行けます。
のように,東京理科大学という語だけ色が変わって(あるいは、アンダーライン付き で)表示されます。 そして,マウスで東京理科大学という語をつつくと, 実際に http://sunsite.sut.ac.jp/ に移動できます。 Aはanchor(いかり)の意味,HREFはhypertext referenceの意味です。

リンク先は同じマシンの中のファイル名でもかまいません。たとえば

    ここを押すと<A HREF="okumura.html">奥村</A>の情報が現れます。
と書いておけば,奥村の部分を押すと, リンク元のファイルと同じディレクトリの okumura.html というHTML文書に飛びます。 また,
    ここが<A HREF="/~ponta/">ポン太</A>のホームページです。
と書いておけば,ポン太の部分を押すと ponta という人のホームディレクトリ の下の public_html という名前のサブディレクトリの中の index.html という ファイルに行きます。

テキストファイルやバイナリファイルの置き方

そのまま転送して良いファイル、たとえば、TeX のソースファイルや DVI ファイル、PSファイル、あるいは、実行ファイルなど、HTMLファイルでない ものもリンクしておけば、WWWブラウザで取り出せるように設定できます。
WWWブラウザによっては、たとえば DVI ファイルならばマウスのクリックに よってTeXのプレビューアで表示させたり、印刷を行なうことも可能です。
このようなファイルの時は、http: でなく、file: または ftp: と書きます。 たとえば、自分の index.html が存在するのと同じディレクトリに MyText.dvi と いうファイルを置いたとすると、index.html には
 <A HREF="file:MyText.dvi">私の論文</A>です。御覧下さい。
などと書けば良いでしょう。

その他の命令

HTMLでは半角の <,>,&," は特別な意味をもつので, これらを出力したいときは, それぞれ &lt;,&gt;,&amp;,&quot; と書くか, あるいは全角文字を使います。 これらの命令は大文字・小文字を区別しますので, &LT; などとは書かないでください。

その他

もっと詳しく知りたい人は,たとえば ここ こちら をつついてください(どちらも日本語です)。


ホームページに戻る

oshima@ms.u-tokyo.ac.jp