14th.HTM

第１４回　
　　　ホームページ作成

ホームページの作成はハイパーテキスト言語HTML（Hyper Text Makeup Language）を使って作成する。HTMLという厳めしい名前に圧倒されて取っつきにくい感じはするが若干のポイントを理解すればワープロソフト程度の容易さで扱える。
最近は無料または低料金で個人向けにWWWサーバーを提供するプロバイダが増えているので個人ホームページも珍しいものではなくなってきた。
最近、筆者も本連載講座のバックナンバーを主なコンテンツとするホームページ（http://www.netpassport.or.jp/~wsato032/)を開設した。そこで今回はその具体例をもとにホームページの作成、WWWサーバーへのアップロードおよびサーチエンジンへの登録を含め要点を解説する。

HTMLファイルとその作成法
ホームページはHTMLによって記述される。ブラウザの「表示」メニューで「ソース表示」を開くとHTMLファイルを見ることができる。
このようなHTMLファイルを作成するには次の４通りの方法がある。
1．テキストエディタで手入力する
2．HTMLエディタでタグを自動入力する
3．ワープロからHTML形式に変換する
4．ホームページ作成ソフト（WEBオーサリングソフト）を用いる

もっとも簡単なHTMLファイルは、テキストエディタで作ったテキストをhtml拡張子をつけて保存するだけでよい。これをWEBブラウザで開けばテキストを読むことができる。ただし、改行やリストは無視され、単にテキストが羅列表示されるにすぎない。
そこでHTMLファイルの書式を整えるためにタグと呼ばれる記号を使って各種の指定が行われる。
例えば、あるテキストを太字で表示したい場合には、そのテキストをタグとで挟み込めばよい。
タグを理解するには習うより慣れろで、いくつかの代表的なタグの具体例を見ていると理解できる。そこではじめはタグに慣れ親しむ意味でテキストエディタでHTMLファイルを作る方法からスタートすることにする。

テキストエディタによるHTMLファイルの作成
もっとも原始的な方法だが、簡単なHTMLファイルであればMacならSimpleText、Win95ならメモ帳などのテキストエディタでタグを入力して作成できる。
タグは半角文字を使用するので、うっかり全角スペースが紛れ込んだりするとブラウザでの表示が思い通りにできなくて苦労する。
1｡HTMLファイルの基本構文
HTMLファイルの基本構文は次のようになっている。

＜HTML>
<HEAD>
（ここにタイトルなどの書誌事項が入る）
</HEAD>
<BODY>
（ここに本文のテキストや画像が入る）
</BODY>
</HTML>

ここでタグ<HEAD>と</HEAD>の間にさらにタグ＜TITLE＞＜/TITLE>を入力し、この対になっているタイトルタグの間にタイトル名を仮にSimple HTMLと入力する。
さらにホームページの本文が記述される領域であるタグ<BODY>と</BODY>に挟まれた領域にはテスト用としてWelcome to My Homepage ! という短い文を入力する。HTMLファイルとしての最低限の体裁は整ったのでここでひとまずsimplehtml.htmlなどの適当な名前を付けて保存しよう（図１）。
インターネットエクスプローラなどのブラウザでこのファイルを開くと図２のようにタイトルバーに"Simple HTML"と表示され、ウインドウには"Welcome to My Homepage ! "と表示される。これで小さいながらも一通りの体裁を整えたHTMLファイルが動作したことになる。
次にフォントのサイズやスタイル、色、テキストの配置などに手を加えたり、画像を貼り付けたり、リンクを張ったりする手法を用いて完成度を高めてゆけばよい。

２．テキストの装飾
テキストの入力は<BODY>と</BODY>の間に直接キーボードで入力するかコピー＆ペーストで貼り付ける。フォントサイズ、スタイル、色、およびテキスト配置はタグによって次のように指定する。
文字の大きさはテキストをタグとで囲んで指定する。
文字の大きさと数字の関係は３を標準サイズとし、最小１から最大７まで最大7段階ある。
文字の色はテキストをタグ＜FONT COLOR＝"#色コード">とで囲んで指定する。無指定では黒で表示される。ダブルクヲーテーションのなかの色コード#rrggbbは
黒＝#000000
白＝#FFFFFF
赤＝#FF0000
青＝#0000FF
緑＝#00FF00
などである。
文字サイズの指定と別々に書いてもよいが、まとめて
Welcome to My Homepage !
のように書くこともできる。文字の位置を行の中央に配置したい場合には、タグ<CENTER>　</CENTER>で囲む（図３）。これは画像の配置でも同じように使うことができる。これで文字は拡大され茶色になり行の中央に表示されるようになる（図４）。
テキストの改行はタグ を使う。これは対をなしていないタグの一例である。
たとえリターンキーを押してエディタの画面上で改行されているように見えても、ブラウザーで表示するとテキストは繋がって表示されるので必ず で処理しなければならない。
単に空行を入れてスペースの調整をする場合にも は有効である。タグでも同じ効果が得られる。
対をなしていないタグには他にも水平線（仕切り線）のタグ<HR>がある。
３｡画像ファイルの取り込み
JPEG形式のファイルであればタグ<IMG SRC="画像の名前.JPG">、GIF形式のファイルであれば＜IMG SRC="画像の名前.GIF">と指定する。
例えば、<IMG SRC="biplaine.GIF" WIDTH="320" HEIGHT="180">
とすれば320ピクセルＸ180ピクセルの大きさのbiplane.GIFというGIF形式の画像ファイルが表示される。文字と同じように画面の中央に表示したい時はタグ<CENTER>と</CENTER>で囲んでおく（図５）。これで文字と画像の表示がされ、それらしくなった（図６）。
.この画像ファイルは今作成しているHTMLファイルと同じフォルダー（ディレクトリ）に置かれている必要がある。
記事中の図面などのように別のフォルダーの中に置かれる場合には,例えば、<IMG SRC="11th/FIG1.JPG">のようにフォルダー名（この例では11th）を指定する必要がある。
偏微分方程式などはテキストとして入力できないのでExpressionistを使って入力したものが画像ファイルとして貼り付けられる。
ホームページ上の画像ファイルのフォーマットはほとんどGIF形式かかJPEG形式である。GIF形式は２５６色（８ビット）しか使えないがJPEG形式はフルカラー（２４ビット）に対応しているので写真などはJPEG形式を使ったほうがきれいに見える。

4．リンクを張る
連載記事の一回分の文字数は約６千文字程度、図面も２０枚程度になる。そこで各回の表題と要約をホームページに載せておいて、本文はそこからリンクできるようにする。
また本文の図面も図番をクリックすると表示されるようにリンクを張ることにする。
　リンクを張る方法には、テキストをクリックさせる場合と画像をクリックさせる場合がある。
ここでは表題の文字をクリックさせる方法でリンクを張ることにする。
　<A HREF="リンク先テキストファイル名">クリックさせるテキスト</A>
例えば、<A HREF="11th/11th.htm">英日／日英翻訳支援</A>とすれば、ブラウザーで表示させたとき「英日／日英翻訳支援」のテキストが通常の設定では青色で表示され、この部分をクリックするとフォルダー11thにある連載第11回の「英日／日英翻訳支援」の記事である11th.htmが開かれる。
リンク先テキストファイル名としてはURLであってもかまわない。例えば、
<A HREF="http://www.nikkan.co.jp/">日刊工業新聞社</A>
とすれば青色に表示された日刊工業新聞社のテキスト部分をクリックすると日刊工業新聞社のホームページにリンクする。
　画像をクリックさせる場合は、メール送信先を表すポストのアイコンや検索サイトのリンクアイコンなど視覚効果の大きいものが適している。
　<A HREF="リンク先ファイル名">＜IMＧSRC="クリックさせる画像ファイル名"></A>
例えば、ポストのアイコンをクリックして筆者あてにメールを送信するには
<A HREF="mailto:sato032@green.ocn.ne.jp">＜IMG SRC="MAIL.GIF"></A>
と指定すればよい。　MAIL.GIFの赤いポストというのは万国共通のポストのイメージではないようなので海外からアクセスが多いホームページは違った図柄のものを使ったほうがよいかもしれない。
検索サイトへリンクを置く場合は、指定のHTMLプログラムをコピー＆ペーストするよう検索サイトより指示されている。
Yahoo!　JAPANの例では、次のようになる。

<A HREF="http://www.yahoo.co.jp/">
<IMG SRC="http://www.yahoo.co.jp/images/recip.gif" ALT="Yahoo!"
BORDER=0></a>


NTT DiIRECTORYの場合は、メールで自分のURLとメールアドレスを送ってリンクを置くことを申し出て予め了承を得ておく必要がある。

５．背景色、水平線、リスト表示など
この他に画面を見やすくするためにページに背景色を付けたり、水平線（仕切り線）<HR>やリスト表示<UL>　</UL>を入れたり、テーブルなどを使えば画面は一段と見やすくなる。付随的なものとして、アクセスを数えるアクセスカウンターや更新記録、更新日などを挿入する場合もある。これでいちおう完成となる。
図７はHTMLファイルのリスト、図８はインターネットエクスプローラでの表示画面である。
完成したHTMLファイルはホームページの表紙、目次にあたる部分で、通常index.htmlという名前で保存される。

HTMLエディタで作成
毎回タグを入力するのは面倒くさいと感ずるならば、HTMLエディタと呼ばれるソフトを使えば入力の手間が省ける。表やフレームを使う場合などはこのようなソフトなしでは済まされないだろう。Mac版ではPageSpinnerやHTML Web Weaver Lite やWindows版ではHyperEditなどのシェアウェアソフトがある。PageSpinnerは英語版だが日本語を使えるようにするには FileメニューのPreferencesでUse the Default Filing optionsの設定をdefault file format to Mac TEXTにセットすればよい。
表示させるブラウザを指定して、PageSpinnerの「ファイル」メニューから「プレビュー」を選ぶと直接ブラウザで表示させることができる。またWebサーバーに送信する機能も含まれている。

ワープロからHTML文書に変換
Microsoft word 7.0（アドインソフト「Internet Assistan for Microsoft Word」
使用時）やMac版のEGWORD PURE, IｰWriteなどのワープロソフトは保存時にHTML形式を選択すればHTML文書に自動的に変換する機能を備えている。画像の取り込みは画像フレームの挿入、読み込み、ハンドルで適当なサイズに調整するといった手順で行う。EG-WordPureの画像ははPICT形式しか取り込めないがHTML形式で保存すると自動的にJPEG形式に変換される。I-WriteはJPEG形式の取り込みもできる。EGWORD PUREでリンクを張るには対象のテキストを指定した後「検索」メニューから「リンクマークをつける」を選ぶ。

ホームページ作成（WEBオーサリング）ソフト
HTMLといった煩わしい言語にかかわりたくないという向きにはホームページ作成ソフト（WEBオーサリングソフトとかホームページビルダーと呼ばれることもある）が登場してきているのでこれを利用するのがよい。ほとんどワープロと変らない感覚で操作できる。個人のホームページ作成用であれば、「Adobe　PageMill（Adobe)」、「クラリス　ホームページ（クラリス）」や「FrontPage97（マイクロソフト）」などで十分間に合うだろう。

WWWサーバーへの登録（アップロード）
完成したファイルはFTPプログラムでWWWサーバーへ登録する。FTPはFile　Transfer　Protocolの略で、異なるコンピュータ間でファイルを転送するためのプロトコルをいう。anonymous（匿名）FTPといってIDを必要とせずフリーソフトウェアなどのダウンロードができるサービスも行われているが、ホームページをアップロードする場合には契約先のプロバイダーからWWWサーバーのユーザーIDとパスワードを取得しておく必要がある。
FTPソフトにはMAC版ではシェアウェアの「Fetch」がWindows版ではフリーウェア「WS_FTP」が定番ソフトとしてよく利用される。
ここではMac版の「FetchｰJ」による接続例を示す。
まずインターネットで契約プロバイダに接続する（筆者の場合、IBMネットパスポート）。
次に「FetchｰJ｣を立ち上げるとウインドウが表示されるので、ホスト名、ユーザーIＤ、
パスワードおよびデレクトリの４項目を入力する（図９）。ユーザIDとパスワードはプロバイダから発行されたものを手元に用意しておくとよい。
入力後OKをクリックするとリモートのhtmlデレクトリーが表示される。
「送信（Put)」を選び、送信するファイルを指定した後「OK｣ボタンを押すと犬が荷物をくわえて走っている絵が表示され、転送が実行される（図１０）。
「FetchｰJ｣を終了した後、WWWブラウザを立ち上げて表示が正しく行われるかどうか確認する。画像が表示されなかったり、リンクが繋がらないケースもあるので丹念に確認する。不具合があれば送信するファイルを点検修正した後、「FetchｰJ」で送信してファイルを置き換える（リモート・ファイルは内容を読んだり、ファイル名の変更、ファイルの削除はできるがファイル内容の修正はできない）。

検索サイト（サーチエンジン）への登録
ホームページの登録が完成してもそのままでは、だれもアクセスしてくれない。
そのため検索サイトに登録して「新着情報」として公開してもらう必要がある。
検索サイトも多数あるのでどこに登録するのがよいか迷うほどだが、ここではNTT DIRECTORYへの登録を紹介する。
　　　　　　　　　　　　　　　　　　　　　　　　　　（つづく）

参考文献

永江一石「ホームページ作成の近道」
PageSpinner's home site at: <http://www.algonet.se/~optima/pagespinner.html>