■ホームページ制作の流れ
インターネット上で見られるホームページ*は、HTML** ファイルによって作られています。グラフィックやサウンドがあれば、それらのファイルも用意します。これらのファイルを、WWW サーバープログラムのあるコンピュH

新連 載ータのディスクに収めることで、他の人がそのファイルを見る、すなわちホームページを表示Oすることができるようになります。そこで、具体的な制作の流れは、図1 のようになります。

M

まずHTML ファイルや画像ファイルを作成し、自分のコンピュータ上でそれを確認、OK

EになったらWWW サーバーにファイルをアップロード*** し、アップロードしたファイルが思ったとおりに見えるかどうかをさらに確認します。作業はこの繰り返しです。

PA■ HTML を書くのに必要なもの
HTML ファイルはテキストファイルですからワープロやエディターがあれば、HTML を書Gくことができます。 誰 でも持 っている
W i n d o w s のライトや、 M a c i n t o s h のE

SimpleText でいいのです。使い慣れたワープロやエディターがあれば、もちろんそれらを使えばいいでしょう。
ただしワープロでは、普通に保存した場合にはワープロ独自のファイル形式になることが多いので、テキストファイルとして保存する必要があることに注意してください。
さて、HTML を書くだけならばこれで準備
OK ですが、書いたHTML がどのように表示されるかを確認しなければなりません。そのた

川添 歩 （かわぞえあゆむ）
アクセス株式会社

めに、WWW ブラウザーが当然のことながら

http://www.axes.co.jp/

インターネットに接続してネットサーフィンを楽しんでみると、今度は自分のホームページを作って公開したいと思う方は多いのではないでしょうか。本連載では、そのような場合のホームページ作成法について、すなわちファイルの作成の仕方、リンクの仕方、デザインの仕方などを中心に解説していきたいと思います。技術的なことばかりでなく、どのようなものを載せるのか、いわゆる「コンテンツ」についても考えていきたいと思います。

202 INTERNET magazine 1996/2

インターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&D

1 ホームページ作成の流れ
材料作成必要となります。現在はNetscape が主流ですから、まず何はなくともNetscape。
N e t s c a p e の正 式 版 は、 W i n d o w s やと「>」に囲まれている部分は表示されていMacintosh では現在のバージョンが1.1x です

ないことがわかります。この部分を、タグとが、2.0 のベータバージョンも公開されていまいいます。タグはWWW ブラウザーにさまざす。1.1x と2.0 では、利用できるHTML の仕まな指示をするためのものです。

ージョンを揃えておきましょう。
また、より多くの人に見てもらうためには、どんなブラウザーでも自分の意図に近い表示

HTML化

画像調整/GIF化

ファイルコンバート

自分のコンピュータ上で確認
ブラウザーで表示

OKNo Good
WWWサーバーへアップロードに他のページへのリンクなどの指示が、タグにブラウザーで表示

OK

よって行われます。WWW ブラウザーはそれNo Goodらの指示に従って表示をします。

HTML ファイルはWWW ブラウザーによってとがわかります。< ○○ > と</○○ > の対で多少異なった表示の仕方がされてしまうので、す。つまり、タグによる指示の範囲を示して確認のためにNetscape 以外のWWW ブラウいるわけです。また、対にならない単独のタザーも少なくとも1 つは用意しておきましょう。

グもいくつか存在します。

■ HTML というもの■基本的なタグ完了！

2 インプレス社のページのHTML<HTML><HEAD><TITLE>Impress Group Information
Server</TITLE></HEAD><BODY BGCOLOR="#FFFFFF"><CENTER><A HREF="/cgibin/imagemap/map/home.map"><IMG
SRC="home.gif" WIDTH=468 HEIGHT=205
BORDER=0 ALT="Impress Group Information
Server" ISMAP></A><HR SIZE=5><H2> インプレスグループ<BR>
インフォーメーション・サーバーにようこそ</H2>

さて、それでは基本的なタグについて説明しましょう。図4 は非常にシンプルなHTML で、図2 がHTML ファイルで、それをWWW ブ

元データ作成WWWサーバー上で確認

さらにタグをよく見ると、対になっているこうなものかを見てみましょう。

その他サウンドなど文字の修飾やグラフィックファイル、それがされるように作っておくほうがいいわけです。

それでは、まずHTML ファイルとはどのよ

画像
原画作成/撮影等●タグ
図3 を見ると、図2 のテキストのうち「<」様がやや異なるので、できればこれら2 つのバ

テキスト
原稿作成

これをブラウザーで表示してみたのが図5です。

ラウザーで表示すると、図3のようになります。

図 4 にあるタグは<HTML>、<HEAD>、これはインプレスのページ（http://www<TITLE>、<BODY> の4 種類です。それぞ.impress.co.jp/）ですが、他のページでも、れのタグがWWW ブラウザーに何を「指示」

そのページのHTML がどのようになっているかしているのかを見ていきましょう。

3 インプレス社のページのHTML をブラウザで表示してみたところを見たければ、ブラウザーのメニューからソース（表示しているページのもととなるHTMLのこと）を見る項目を選んでください。たと●<HTML>
ごらんのとおり、これはHTML である、とえば N e t s c a p e では V i e w メニューからいう指示以外の何物でもありません。

Source（またはDocument Source）を選「WWW ブラウザーに表示させるんだから、びます。

そりゃHTML に決まってるだろう。なんでわ

ブラウザーの表示とHTML を見比べてみるざわざこんな指示をしなければいけないの」とと、なんとなくHTML というものがわかって思われますか？まあおっしゃるとおりで、たいくるのではないでしょうか？

ていのブラウザーでは、このタグがなくても問* ホームページ
ホームページという言葉は、WWW ページを全般的に表すこともあれば、自分のパーソナルなページをさすこともあります。また、あるWWW サーバーページのうち最初に表示されるページ、WWW ブラウザーのホームボタンを押すと表示されるページなどをさすこともあります。本連載では、自分の作るパーソナルなページのことをホームページと呼ぶことにします。
** HTML
WWW ブラウザーで青い文字・下線の部分をクリックすると、他のページにジャンプします。
このように、テキストの中で、他のページへリンクするしくみのことを、ハイパーテキストといいます。テキストの中に表示のためのいろいろな指示を埋め込むことを、英語でマークアップ（markup）するといいます。そしてマークアップされたファイルは、指定を含めたテキス
トの内容をWWW ブラウザーに伝えるための一種の「言語（Language）」であるといえますので、HyperText Markup Language、略してHTML（エッチティエムエル）と呼びます。
そしてHTML に従って書かれたテキストファイルのことを、HTML ファイルと呼びます。
*** ファイルのアップロード
ファイルのアップロードの仕方は、本連載ではごく簡単にしか扱いません。本誌の1995 年
12 月号に集中企画『ホームページ設置サービス活用法』として各プロバイダーごとの詳細な情報が掲載されているので、そちらを参照してください。

インターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&DINTERNET magazine 1996/2203

題はありません。しかしそうでない場合もある一したほうがよいでしょう。

ので、ともかくファイルの先頭に<HTML> を、保存する際のファイル名には、決まりごと最後に</HTML>を入れておくほうが無難です。

があります。まず、ファイル名は終わりに「.HTML」または「.HTM」を必ずつけます。

●<HEAD> と<BODY>

4 シンプルなHTML（上）と5 その表示例（下）<HTML><HEAD><TITLE>My First HTML</TITLE></HEAD><BODY>
習うより慣れろ。百聞は一見にしかず。
</BODY></HTML>

いわゆる拡張子です。MS-DOS（Windows<HEAD> タグと<BODY> タグも、たいて

3.1）では「FIRST .HTM」といった名前をついは省略しても表示には影響ありません。しけ る こ と に な り ま す 。 Windows 95 やかしやはり念のために入れておいたほうがいい

Macintosh ではファイル名の文字数の制限がタグです。

ゆるやかなので、「MyFirst Lesson.HTML」<HEAD> は本文以外の、このHTML につなどとすることができます。大文字や小文字いての情報などを書いておく部分です。多くも自由に使えますし、拡張子を小文字にしての場合、<TITLE> タグとセットで使われます。

もかまいません。

<BODY> は文字どおり本文です。ブラウザ

ただし文字の種類は1 バイトのアルファベッ

ーで表示するものは<BODY> から始まり、トと記号で、1 バイトのカタカナや2 バイトの</BODY> で終わるのが原則です。

文字はファイル名には使わないでください。スペースなども使わないようにしてください。

●<TITLE>HTML のタイトルを示します。たいていの

6 自分のディスクにあるHTML ファイルを開くメニュー●ブラウズ

ブラウザーでは、このタグで囲まれた部分をブ保存したHTML ファイルを見る（ブラウズラウザーのウィンドウタイトルとして表示しまする）には、WWW ブラウザーを使用します。

す。<TITLE> タグがない場合は、HTML ファ

WWW ブラウザーはインターネットに接続しイル名がウィンドウタイトルになります。

なくても、自分のディスク上にあるHTML フ

またこのタイトルは、見る側がNetscapeァイルを表示することができます。などのブラウザーのブックマークにページを登メニューの名前は多少異なる場合がありま録する際に、その名前として使われるので、すが、たいていファイルメニューに、HTML フ

あまり長すぎず、端的にページの内容を表すァイルを開く項目が用意されています。図 6

名前にしておくとよいでしょう。

はNetscape 2.0b の例です。これを選んで、保 存 した H T M L ファイルを選 択 すれば、

■ HTML ファイル作成の実際
図4 のHTML ファイルは、HTML ファイル

7 リロードするためのボタン（上）と8 メニュー（下）WWW ブラウザーのウィンドウにHTML で指示した内容が表示されるはずです。のもっとも基本的なものです。各タグの意味

Netscape ではファイルメニューのほかに、がわかったところで、このファイルをまず作成

・ HTML ファイルアイコンをNetscape アイして表示してみましょう。

コンにドラッグ&ドロップする・ HTML ファイルアイコンをNetscape のブ●入力と保存エディターやワープロで図 4 のとおりに入力し、テキスト形式で保存します。
図4 ではタグの名前を大文字で書いていまラウズウィンドウにドラッグ&ドロップするという方法でもHTML ファイルをオープンして表示することができます。特に後者は便利な方法です。

すが、小文字で<title> のように書いてもかまいません。ただし見栄えが悪いですから、大文字で書くか小文字で書くか、どちらかに統

204 INTERNET magazine 1996/2●HTML ファイルの変更
WWW ブラウザーで表示してみておかしな

インターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&D

ところがあったり、内容を訂正・追加したいようなページを仕上げていきます。メモリに余場合には、再びエディターでHTML ファイル

裕があれば、エディターとWWW ブラウザー

私もそうですが、絵や音楽、あるいはプロを修正します。修正後に保存しますが、このを同時に起動して作業をすると効率的です。

グラムなど、他の人に見せられるような作品を作る才能はないし、かといってただ自己紹とき同じ名前で同じ場所に保存（重ね書き）したのであれば、ブラウザーでは再度ファイルのは厳然として存在すると思います。

■コンテンツについて介だけ載せてもしょうがない、でもとにかく何をオープンするのではなく、 リロード

ホームページを作りたいと思っても、いざ作かページを作りたいと思っている人はたくさん（reload ＝再読み込み）するだけで表示が更るとなると「いったい何を載せたらいいだろいるはずです。ネットサーフィンをして、さま新されます。WWW ブラウザーのボタンまたう？」と考えてしまう人は、意外に多いのでざまな面白いページを見れば見るほど、そうはメニュー（図 7、8）でリロードすることはないでしょうか。
「載せたいものが思いつかいう欲求は高まります。そんな欲求を満たすができます。

ないんなら、別にホームページなんか作らなくために、ホームページで発信する材料を発見エディターで書き、ブラウザーで確認するとてもいいんじゃない？」というのも真理です

し上手に料理をするコツを毎月のコラムで考いう行為の繰り返しで、最終的に自分が望むが、なにも思いつかない人にも表現欲というえていきたいと思います。

一杯の珈琲から今日のランチまで
自分は文章を書くのも絵を描くのも苦手だし、それだけのページだ。職場の同僚や友だちが何とになる。そしてその情報がまさに今を刻々とたとえ書けたって大した情報を持ってるわけでを毎日食べてるかなんて、たいして興味のある伝えるのであれば、面白さは倍増する。あのコもない。だから何も発信するモノがないと思っ内容ではない。でもそれが海の向こうの、「ただーヒーメーカーがいい例だ。どこにでもある単なてる人。そういう人は、自分が本当はたくさんのアメリカ人」の毎日のメニューだったら、見るコーヒーメーカーなのに、世界中から現在のの情報を持っていることに気づいてないのかもてみたいと思わない？

状態を見ることができるというしかけを作ったしれない。

逆に、日本に住んでいるわれわれが、毎日どんだけで、世界で最も有名なコーヒーメーカーに自分が少しでも興味を持っていることがあって、なものを食べているのか、たぶんよっぽど日本なってしまった。

それについてはそこらの人よりは詳しいという何通な人でなければ、ほとんどの外国人は知らなもう一度あなたの身の回りを見回してみてほしかがあれば、それをページにしていけばいいのだ

いだろう。だからただ毎日ひたすら昼飯の記録

い。間違いなく、あなたも「面白い」情報を持けれど、さしあたって特にそういうものは自分をつけて、それをページにしていくだけでも、実っているはずだから。

は持っていない、平凡な人生を歩んでいるといはそのまま日本の現在のわれわれの生活を伝えう人。そういう人は、自分が本当は必ずしも平る、面白いページになる。もちろん食べたもの

凡な人生を歩んでいるわけではないことに気づをデジタルカメラやビデオで撮って、画像をペいていないのかもしれない。

ージにつければ、情報の量も質もぐんとアップ

Web のページは世界に開かれている。自分が作する。

ったページは、世界中の人が見ることになる。

ただ、こういうことはあんまり欲張らないほう自分がすでに持っている情報の質が、このことがいい。最初から欲張ると、挫折も早い。たとによってがらりと変わることに気づいているだろえ毎日 1 行でも更新されていくことが、リアルうか。

タイムでチープな情報を流せるインターネットのLunch Server というページが何人かの人によっ面白さだから。て作られている（http://kao.ini.cmu.edu:

ほんとにツマンナイ情報でも、インターネット5550/lunch.html）。えらそうな名前だけれど、に載せるだけで、文化や生活を共有していない

自分が食べたランチの内容をただ記述している、はるか遠くに住んでいる人にはすごく面白いこ

インターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&D

INTERNET magazine 1996/2205

［インターネットマガジン バックナンバーアーカイブ］ ご利用上の注意
この PDF ファイルは、株式会社インプレス R&D（株式会社インプレスから分割）が 1994 年～2006 年まで発行した月刊誌『インターネットマガジン』の誌面を PDF 化し、「インターネットマガジン バックナンバーアーカイブ」として以下のウェブサイト「All-in-One INTERNET magazine 2.0」で公開しているものです。

http://i.impressRD.jp/bn
このファイルをご利用いただくにあたり、下記の注意事項を必ずお読みください。
z 記載されている内容（技術解説、URL、団体・企業名、商品名、価格、プレゼント募集、アンケートなど）は発行当時のものです。
z 収録されている内容は著作権法上の保護を受けています。著作権はそれぞれの記事の著作者（執筆者、写真の撮影者、イラストの作成者、編集部など）が保持しています。
z 著作者から許諾が得られなかった著作物は収録されていない場合があります。
z このファイルやその内容を改変したり、商用を目的として再利用することはできません。あくまで個人や企業の非商用利用での閲覧、複製、送信に限られます。
z 収録されている内容を何らかの媒体に引用としてご利用する際は、出典として媒体名および月号、該当ページ番号、発行元（株式会社インプレス R&D）、コピーライトなどの情報をご明記ください。
z オリジナルの雑誌の発行時点では、株式会社インプレス R&D（当時は株式会社インプレス）と著作権者は内容が正確なものであるように最大限に努めましたが、すべての情報が完全に正確であることは保証できません。このファイルの内容に起因する直接的および間接的な損害に対して、一切の責任を負いません。お客様個人の責任においてご利用ください。

このファイルに関するお問い合わせ先
All-in-One INTERNET magazine 編集部
im-info@impress.co.jp
Copyright © 1994-2007 Impress R&D, an Impress Group company. All rights reserved.