このページは電子情報通信学会誌の1997年3月号掲載記事「ホームページの作成入門」を、学会の許可を得て公開するものです.
ABSTRACT
1. はじめに
2. WWWの基本的な仕組みと特徴
3. HTMLでテキストを記述する
4. ホームページのハイパーリンクを書く
5. ホームページにイメージを入れる
6. さらに高度なホームページ作成
7. おわりに
文献
WWWのホームページを書くための記述法は,HTML (Hyper Text Markup Language)という言語仕様になっている.最近ではホームページ作成用としてHTMLを生成するソフトも出てきているが,本稿ではHTMLを直接記述する方法を説明する.直接記述する方がWWWをよく理解できるし,また,WWW作成ソフトを使い始めると「かゆいところに手が届かない」という状況になって,結局「直接書いた方が速い」というようなこともあるからである.
さて,いきなりであるが,ホームページ作成の上達の極意を説明してしまおう.それは,他のホームページの書き方をまねすることである.WWWのホームページ上で,気に入った書き方や自分の知らない書き方を見つけたとする.WWWブラウザでソースファイルを見ることができる(注1)ので,該当するHTMLの記述・書き方のところを参考にするわけである.それでも,やはり必要最小限の知識は必要なので,以下ではWWWを使ったことはあるがホームページ作成は初めてという方を対象にホームページ作成への入門を解説する.
(注1) 例えばNetscape Navigator3.0では[View]から[Document Source]を選ぶ. Internet Explorer3.0では[表示]から[ソース表示]を選ぶ.
WWWの規格はサーバとブラウザ間の転送プロトコルHTTPと,転送されるファイルの種類およびマルチメディア・フォーマット(例えばテキスト,GIFフォーマットのイメージ,MPEGフォーマットのムービーなど)を規定している.フォーマットは図2に示すように,ファイル名の後に付与する3ないし4文字で識別する.
受け取ったファイルをどのように表示するか,はすべてブラウザに依存する.従って,ブラウザによって見え方が違うということが起こる.また,HTMLの言語仕様が発展を続けており,一方,ブラウザ独自の仕様拡張も行われている.このため,特に新しい機能については,あるブラウザでは表示されるが,他のブラウザでは全く表示されない,ということも起る.作成したホームページは代表的なブラウザで確認することが重要である.
WWWのもう一つの大きな特徴は,ホームページ中に別のホームページへのリンク(ハイパーリンクという)そのものを書き込めることである.この結果,ホームページからホームページ,サーバからサーバへとリンクができ,ユーザからみて情報の見方あるいは検索方法が格段に簡略化された.また,ホームページの作成・更新を分散化でき,技術資料などのドキュメントをネットワーク内で分散管理することが可能となった.マルチメディア識別子とハイパーリンクの導入がWWWの爆発的な普及のキーになったといえよう.
では,ホームページを作ってみよう.まず適当なテキストエディタあるいはワープロでテキストファイル(ソースファイルになる)を作り,名前(ここではtest.htmlとする)を付けて保存する.次にブラウザでtest.htmlを開く(注2).ブラウザはこのようにローカルに保存されたファイルも表示できるので,サーバへ転送する前に必ず自分のハードディスク内で表示を確認する.以下の説明を参考にソースファイルを書いてみよう.書き終ったらtest.htmlを保存しブラウザで 必ずReloadして(注3)表示を確認しよう.
(注2) 例えばNetscape Navigator3.0では[File]から[Open File]を選ぶ. Internet Explorer3.0では[ファイル]から[開く]を選び[ファイルを開く]を選択する.
(注3) ブラウザがパソコン内にキャッシュを持っているのでReloadが必要である. 例えばNetscape Navigator3.0では[View]から[Reload]を選ぶ. Internet Explorer3.0では[表示]から[最新の情報に更新]を選ぶ.なお,日本語ではJIS, SJIS(パソコンで使われる), EUCの3種類の代表的な漢字コードがある.電子メールではJISが標準であるが,WWWでは3種類のどれを使っても代表的なブラウザは自動的に漢字コードを判別して表示してくれる.但し,ページ内では自動判別は機能しないから,同一ページ内では漢字コードは統一しておく必要がある.
電子メールアドレスは図4のように<MAILTO>を使って書く.ブラウザ上でクリックすると電子メール送信の画面に切り換るので,コメントなどを受けるのに使う.なお,複数の人が管理するホームページでは、www-admin@www.mydom.co.jpのような架空アドレスを作り,そのアドレスへの受信メールを実際の担当者へ分配するメールリスト方式にすると更に便利である.また,ホームページの更新日を書いておくとユーザに親切である.
<A HREF="http://www.lab.kdd.co.jp/"> KDD研究所</A> 上記のように書くとブラウザでは以下のように表示される. KDD研究所上例のように/記号で終る場合,サーバはディレクトリ内のindex.htmlあるいはwelcome.htmlを自動的に選択する.サーバ内の特定のホームページを示すときは,以下のようにディレクトリ名とソースファイルを書く.
<A HREF="http://www1.kcom.ne.jp/~webbook/inet/"> つないで楽しむインターネット</A> 上記のように書くとブラウザでは以下のように表示される. つないで楽しむインターネット
<A HREF="xxxx.html"> ホームページxxxxへ飛ぶ</A> 上記のように書くとブラウザでは以下のように表示される. ホームページxxxxへ飛ぶ上の例でxxxx.htmlというファイルはtest.htmlと同じディレクトリに置いてある.別のディレクトリにある場合はディレクトリ名から記述する.サーバの最初のディレクトリ(これを/記号で示す)へのハイパーリンクは,パソコン上でローカルには確認できない.なぜなら/記号で示されるのはサーバ内で指定した「ホームページの格納場所」のディレクトリ(サーバルートディレクトリという)でパソコンは理解できないからである.ルートディレクトリへのリンクはサーバへ転送してから確認する.
<A HREF="#ABSTRACT"> 「ABSTRACT」へ飛ぶ</A> 上記のように書くとブラウザでは以下のように表示される. 「ABSTRACT」へ飛ぶ上の例では「リンク」という名前で示される場所がホームページ内のどこなのかを指定する必要がある.これは以下のようにホームページ内に<NAME>タグを付けて置く.
<A NAME=ABSTRACT>ABSTRACT</A>
写真や印刷物はスキャナで取り込みフォーマット変換してGIF/JPEGフォーマットにする.最近ではパソコンに接続できるディジタルカメラが安価に入手できるのでこれを使うのもよい.またVTRで録画しておいてスロー再生&ポーズでスナップ写真を取り込むという方法も便利である.このようにして取り込んだオリジナル画像は通常1,670万色になるので,画質が許容できるならばGIF/JPEG変換と同時に256色にしてファイルを小さくしよう.
ネットワーク内にはイラストやアイコンを提供しているホームページがあるので,それらを使うと親しみやすいページができる.著作権の条件(非営利目的のホームページ内使用に限って無償など)をよく読んで使われたい.また,ホームページ自体のデザイン・意匠も基本的には著作物なので注意すること.
<IMG SRC="kami.gif"ALT="上福岡">ALTを使ってそのイメージの内容を書いておく.アクセスが遅いユーザは「イメージの表示をオフ」にしている場合があるが,そのときでもALTのテキストは表示される.ユーザはテキストを見た後でイメージを表示するか否かの判断ができる.
小さいイメージを表示して,そのイメージをクリックすると大きいイメージを表示することもよく使われる.ハイパーリンクを使って以下のように記述する.
<A HREF="kami.gif"> <IMG SRC="kami-min.gif">これを大きく表示(約45kbyte)</A> 上記のように書くとブラウザでは以下のように表示される. これを大きく表示(約45kbyte)アクセスの遅いユーザ対策のもう一つの方法は,図6に示すように大きなイメージを時間の経過と共に「じわじわ」とモザイク上に表示する方法である.GIFのインターレスという形式でファイルを作ると順番に符号化するのではなく数行間隔で飛ばしてデータを織り混ぜるようにして符号化する.ブラウザはまだ受信していない線間のデータを計算してモザイク状に表示する.インターレスはHTML上の記述とは関係なくファイルのフォーマットのみで実現できる.
<A HREF="kami-int.gif"> <IMG SRC="kami-min.gif">これを大きく「じわじわ」と表示(約45kbyte)</A> 上記のように書くとブラウザでは以下のように表示される. これを大きく「じわじわ」と表示(約45kbyte)
イラストをそのまま表示すると図7のように「地」の部分にも色が付く.「地」の部分の色を「透明化」するとブラウザは背景色と同じ色にするので図がすっきりと表示される.論文や技術解説では図が多用されるので透明化を使うと見やすいホームページになる.特に,数式は本文中に図を埋め込むので透明化が必須である.透明化もインターレスと同様に,HTMLの記述とは関係なくGIF89というフォーマット形式に変換することで実現できる.なお,透明化したファイルを更にインターレスにすることも可能である.
ホームページの最初のページ(トップページとよばれる)は「テーブル」という機能を使うと,画面上に表形式で項目を表示できるのでインデックス的な使い方ができて便利であろう.また,「フレーム」という機能を使うと,一つの画面を分割して表示できるので,大会・研究会などの案内・周知のホームページに便利であろう.但し,フレームを使うとフレームを表示できないブラウザでは全く何も見えなくなってしまうので,ノンフレームのページも用意するなどの配慮が必要である.
イメージの中の特定の箇所をクリックすると他のホームページへ飛ぶようにしたページがある.「クリッカブルマップ」あるいは「イメージマップ」とよばれるもので,イメージ中の座標からハイパーリンクへの計算はブラウザまたはサーバで行う.クリッカブルマップを使う場合にも,イメージファイルを大きくしないこととテキストによるハイパーリンク表示を混在することが望ましい.
動画像ほどデータ量が大きくなくて動きを出せるのが「GIFアニメーション」である.複数のGIFイメージ(アニメのコマに相当)を一つのファイルに重ねて実現する.これも透明化やインターレスと同様にHTMLとは関係なく,GIFのフォーマット処理のみで実現できる.写真をコマにすると動画像らしくなるがファイルが大きくなるので,256色のイラストをコマにするのがよいだろう.
ホームページ中に入力枠を設けて,ユーザからの入力をサーバ側へ転送する「フォーム」という機能がある.大会・研究会や講演会への参加申込みなどに有効であるが,サーバ側でCGI (Common Gateway Interface)というプログラムを動かす必要がある.また,ホームページへのアクセス数をカウントする「アクセスカウンタ」という機能や,上述のクリッカブルマップでサーバが座標変換をする場合も基本的にはCGIで実現する.これらの機能については事前にサーバの管理者に問い合わせて,CGIの使用の可否や使用できる機能を確認する必要がある.
HTMLの仕様はW3C (World Wide Web Consortium)でバージョン3.2が検討中であるが(5) (6),一方有力なブラウザは独自の機能拡張を進めつつある.学会の周知などでは,アクセス速度の遅いユーザやテキストのみのブラウザのユーザなどを含めてすべてのユーザに公平に情報を発信・提供することが重要である.特定の一部のブラウザのみで可能な表示,追加ソフトが必要な表示を避けるなどの注意が必要である.
15 April 1997
「インターネット入門」のページに戻る