遊方流「我家頁(ホームページ)」のつくりかた[暫定版]



ホームページの実体
 ホームページの実体は、インターネット・プロバイダが所有するサーバー・コンピュータのディスク内に保存されたデータ(ファイル)の一種に過ぎません。
 このファイルは、HTMLという形式で書かれ、Netscapeやインターネット・エクスプローラーなどのWebブラウザでこのファイルを見ると、本のページと同じように文字や図や写真が含まれた、ホームページとして見ることができるのです。

すぐに作れます
 インターネット上でなく、あなたのパソコン内であればすぐに作れます。
 ホームページといってもそんなに難しいものではありません。ここで紹介する程度の内容であれば、すぐにできてしまいます。
 エディタまたはワープロ(Windows95のアクセサリに含まれるワードパッドも可)さえあればいいのです。

ホームページの作り方
 ページの内容はHTMLの書式にしたがって記述します.
 HTMLというのは,HyperText Markup Languageの略で,ハイーパーテキスト(普通のテキストを超えるテキスト)のマークアップ(書式指定)のための言語といった意味になります.普通のテキストにない代表的な働きとしては,情報の参照のためのリンク機能があります.
 ただし言語といっても,そんなに難しいものではなく,機能の目印になる「タグ」と呼ばれる命令の意味さえ分かれば簡単に作れます.
 なお,HTMLの内容自体は,単なる文字情報のみのテキストファイルとして作成します. ページの構成としては,手紙でも「前文」「主文」「末文」と分けられるように,大まかには次のようにすればよいと思いますが,これにこだわる必要はありません.

  @見出し(タイトル)
  A本体(内容)
  B補足的な情報

HTMLの約束事
 HTMLファイルを作る上での代表的な約束事は次のとおりです。


 これ以外については、HTMLあるいはホームページ作成に関する書籍や雑誌を参考にしてください。

例題1(シンプル・ホームページ)
 それでは,非常に簡単なページを作ってみましょう.まず、 例題1のホームページを確認しましょう。
 エディタを使って,たとえば「simple.html」という名前のファイルを作り,次のように入力します.ワードパッドなどのワープロで作る場合には,保存時の「ファイルの種類」に「テキスト文書」と指定してください.

<HTML>

<HEAD>
<TITLE>
Simple Home Page
</TITLE>
</HEAD>

<BODY>
シンプル・ホームページ
</BODY>

</HTML>

 上の内容をコピーして、エディタなどで貼り付ける方法でも、簡単に作成できますので試してみてください。

 各行の内容を説明します。ただし、これには説明が入っているのでHTMLファイルとしては使えません。

<HTML> …HTMLファイルの始まりを示す。

<HEAD> …ページ文頭の始まりを示す。
<TITLE> …タイトルの始まりを示す。
Simple Home Page …これがブラウザのタイトルに表示される。
</TITLE> …タイトルの終わりを示す。
</HEAD> …ページ文頭の終わりを示す。

<BODY> …ページの本体部分の始まりを示す。
シンプル・ホームページ …これがページの内容として表示される。
</BODY> …ページの本体部分の終わりを示す。

</HTML> …HTMLファイルの終わりを示す。


ホームページを確認しよう
 それでは早速,WWWブラウザ(このコーナーでは、Netscape2.01I[JA]を例にして説明します)で確認してみましょう.

[1] [ファイル]メニューから[ファイルを開く]を選択します.
[2] 先ほど作った「simple.html」を指定して,[開く]をクリックします.
[3] 「シンプル・ホームページ」と表示されます.

 このように,HTMLの形式で書いてあるファイルをWWWブラウザで見るだけなら,インターネットにつながっている必要はありません(ただし,インターネット上のホームページを見ることはできません).

ホームページの素材
 文字情報以外のデータを含むホームページの作成のためには、ホームページに載せる素材を作るためのツールが必要になってきますが,それはどのような内容(コンテンツといいます)を盛り込むかによって変わってきます.
 画像データとしては、GIF、JPEG等を使います。ここでは、GIFファイルを対象にします。
 たとえば,次のようなものがあると便利です.

・イラストを入れるならペイント・ソフト
 Windows95の「ペイント」でもかまいませんが、GIFファイルに変換する必要があります。
 自分で作る場合には必要ですが,とりあえず市販の素材集のデータのみを使う場合にはなくても困りません.
・写真を入れるならデジタル・カメラやスキャナ
 オリジナルなデータを作る場合には不可欠です.
・画像処理を行なうソフト
 効果的な画像を作る場合に必要です.私の場合は,「Paint Shop Pro」を使用しています.

例題2(イメージを含むホームページ)
 イメージ(画像データ)を含むホームページを作ってみます。まず、 例題2ホームページを確認しましょう。
 適当なGIFファイルを用意してください。
 適当なGIFファイルが手元にない人は、次の画像の上で右クリックして、画像を保存してください。[画像を名前を付けて保存]を選択し、適当なフォルダに「TITLE.GIF」という名前で保存します。





 タイトルに画像を貼り付けたホームページの例です。
 <IMG SRC="title.gif">で、「title.gif」という名前の画像の貼り付けを指定します。

<HTML>

<HEAD>
<TITLE>
My Home Page
</TITLE>
</HEAD>

<BODY>
<CENTER>
<IMG SRC="title.gif">
<P>
<H1>
我が家のホームページへようこそ!
</H1>
</CENTER>
<P>
このページは、例題2のホームページです。
</BODY>

</HTML>


各行の内容を説明します。

<HTML>

<HEAD>
<TITLE>
My Home Page
</TITLE>
</HEAD>

<BODY>
<CENTER> …中央揃えの始まりを示す。
<IMG SRC="title.gif"> …イメージ・データの取り込みを示す。
<P> …段落をつくる。
<H1> …サイズ1の見出しの始まりを示す。
我が家のホームページへようこそ!
</H1> …サイズ1の見出しの終わりを示す。
</CENTER> …中央揃えの終わりを示す。
<P>
このページは、例題2のホームページです。
</BODY>

</HTML>


ソース表示
 一番最初にも説明したように、ホームページの実体はHTMLの形式にしたがって書かれた単なるテキスト・データです。HTMLデータをブラウザの機能で見るとホームページとして見ることができますが、エディタの機能で見るとホームページのソース(元の)データを見ることができます。この機能がソース表示です。
 それでは、今ご覧のこのページ自体のHTMLソースを見てみましょう。[表示]-[ 文書のソース]コマンドを選択します。
 どうですか?
 これで、他の人のホームページ作成テクニックを参考にすることができるようになります。
 

例題3(複数のページからなるホームページ)
 ホームページの最大の特長であるリンク機能を使うには、リンクでつなげたい部分を<A HREF="リンク先">と</A>で囲みます。イメージ・データを囲むことも可能です。
 スタート・ページ(ホームページの先頭ページ)からサブのページにリンクし、再びスタート・ページに戻るホームページを作ってみましょう。まず、 例題3のホームページを確認しましょう。

@スタート・ページ(start.html)

<HTML>

<HEAD>
<TITLE>Start Page</TITLE>
</HEAD>

<BODY>
ここは、スタート・ページです。
<BR>
<A HREF="sub.html">サブ・ページへ飛びます。</A>
</BODY>

</HTML>


Aサブ・ページ(sub.html)

<HTML>

<HEAD>
<TITLE>Sub Page</TITLE>
</HEAD>

<BODY>
ここは、サブ・ページです。
<BR>
<A HREF="start.html">スタート・ページへ戻ります。</A>
</BODY>

</HTML>



アイデア次第
 このコーナーでは、ごく簡単なホームページの作り方を紹介しました。ホームページはアイデアが勝負です。がんばって、本格的なホームページ作りに挑戦してみてください。
 素敵なページができましたら、メールをください。
 


参考文献: パソコン雑誌I/O(工学社)1996年9月号 連載記事「電窓倶楽部」内田保雄


我が家のホームページに戻ります。