ホームページを作る(2)



三 HTML文書作成の基本的な技術

 1 では、具体的に、ホームページを作成する上で必要な最小限度のことを書いてみたいと思います(繰り返しますが、初心者用のノウハウ本も1冊買っておいて損はありません。「初心者用」をうたい文句にしているものなら、どれでも同じだと思います。)。
 なお、「ホームページ」といっても、要するにいくつかのHTML文書をリンクでつなぎ合わせたものに過ぎません。そして、HTML文書は実はテキスト文書なのでワープロ・エディター等で作成できますし(ファイル名の拡張子を、普通は「 *.txt 」等であるところ、拡張子を「 *.htm 」又は「 *.html」と替えるだけです。)、「リンク」といっても、何か特別なことをするのではなく、HTML文書の中に「タグ」と呼ばれる記号を入力するだけでいいのです。

 2 一番簡単なのは、Word95(Internet Assistant for Microsoft Wordを付けたもの。)を使うことだと思います(他の、インターネット対応のワープロでもよいが、Internet Assistant for Microsoft Word は無料で配布されているので(パソコン雑誌のCD−ROMには大抵入っている。)、もともとWord95を持っているなら、試してみる価値はあります。)。
 とにかく、Internet Assistant for Microsoft Wordをインストールして(やり方は雑誌の解説を参考にして下さい。)、Wordで普通に文章を作るか、ファイルを呼び出し、「ファイル」→「名前を付けて保存」のとき、「ファイルの種類」を「HTML文書(*.htm)」に指定して、あとは普通に保存すれば、自動的にHTML文書に変換してくれます(あとは、「インターネット アシスタント ヘルプ」を参考に、「書式」「挿入」等で装飾すれば、格別な知識がなくても一応「きれいな」HTML文書ができます。)。
 なお、ファイル名は、半角の英字で、しかも全て大文字か小文字に統一した方がいいと思います(自分のパソコンで作っているうちは問題ないのですが、一旦インターネット上にアップすると、日本語のファイル名では訳が分からなくなってしまいますし、大文字と小文字は全く別な文字として扱われるのでリンクを張っても目的のページにジャンプできません。)。

 3 インターネット対応のワープロを持っていて、それを使えばいいという人は全く問題はないのですが、何せHTML文書は所詮テキスト文書なのですから、エディターを使って軽快に作ってみたいものです。その点でも、最近ではインターネット対応のエディターもあるのですが、ここは一つ、全く普通のエディターでHTML文書を作るために最低限必要なタグを紹介してみたいと思います。

 (一)テンプレート

 なぜか分かりませんが、HTML文書は次のような書式になっています(意味を知りたい人は、前述の「インターネット活用法」を読んで下さい。)。

  <<HTML>
   <HEAD>
    <TITLE>タイトル</TITLE>
   </HEAD>

   <BODY>
    本文
   </BODY>

  </HTML>

 このなかの、「タイトル」の部分に簡単なタイトルを書き(そうすると、ブラウザの一番上にそのタイトルが表示されます。)、「本文」に本文を書き込んで、「 *.htm 」というファイル名で保存すれば、それだけで立派なHTML文書になってしまいます。
 初めての方は、エディターを使って、上の要領で何かHTML文書を作って保存し、それをブラウザで見て下さい(エクスプローラで、その文書名をダブルクリックすると、ブラウザが起動して表示されるはずです。)。
 どうでしょうか。「本文」の部分に改行を含む文章を入れていた方は、改行が無視されてダラダラと字だけが並んでいることに驚かれたのではないでしょうか?
 どうやら、ブラウザでは改行記号は無視されてしまうようです。いくらレイアウトにはこだわらないとはいえ、これでは見にくくて困ってしまいます。
 そこで、改行のためのタグを覚えてみましょう。

 (二)改行

  (1)<PRE>〜</PRE>タグ

 例えば、各行の末尾全てに改行を入れるなどして整形済のテキストがあるときは、その文書の本文の一番前に<PRE>、本文の最後に</PRE>を入れると、その改行された形のままブラウザに表示されるようになります。
 (一)で作った文章に、各行の末尾全てに改行を入れ、本文の前後にこのタグを入れて保存し直し、ブラウザが(一)のままの表示であれば、「最新の情報に更新」(「F5」キー)を押してみて下さい。大体、エディターで見たままの形で文章が表示されているはずです。

  (2)<BR>タグ

 (1)で入れた余計な改行を全て取り去り、<PRE>〜</PRE>タグも消してから、今度は、改行したいところに<BR>と入力してみて下さい。
 再び、保存して「最新の情報に更新」すると、今度は、<BR>タグを入れたところで改行されて表示されるはずです。
 この<BR>タグは、「改行」と理解しておいていいと思います。いくつか連続して入れると、「改行」がそうであるように、行と行との間に空白を入れることもできます。HTML文書で最もよく使う、基本的なタグといえるでしょう。

  (3)<P>タグ

 今度は、(2)の<BR>タグを<P>に置換してみて下さい。そして、保存の上「最新の情報に更新」すると、(2)の時に比べて、改行後次の行までの間に少し空白が入っているのに気付くでしょう。
 <BR>タグが改行であるのに対し、<P>タグは段落の変更のタグなので、少し空白が入っているのです。

 (三)見出し

 さて、本文は、まず見出しから始まります。
 見出しは、普通はタイトルと同じくして、それを<H1>〜</H1>で囲めば出来上がりです。
 1つの大見出し中にその下の見出しを入れるには、<H2>〜</H2>タグを入れます。<H2>の中を更に分けるときは、<H3>〜</H3>タグを、以下、4・5まで使うことができます。
 これをブラウザで見ると、おそらく見出しが大きすぎて不格好かとも思いますが、何しろ「情報で勝負」なのですから、見かけは気にしないことです。不格好ですが、このタグを使うことがHTMLのルールだそうですから・・・。

 (四)リンク(<A HREF=”〜”>〜</A>タグ

  (1)リンクとは、ブラウザ上でHTML文書のある部分(普通はアンダーラインが引いてあって、色も他のところと違っている。)をクリックすると、そこにジャンプできるという機能です。
 ホームページが、HTML文書をリンクでつないだもの、と表現される所以です。

  (2)まず、下準備として、(一)(二)で述べたことを参考に、簡単なHTML文書を2つ作って下さい( a.htm と b.htm の2つとします。)。
 このうち、a.htm の中に、<A HREF=”b.htm”>リンク</A>と入力して、保存して下さい。
 そうして、ブラウザでa.htmを表示すると、「リンク」という、アンダーラインが付いた色の違う部分があるはずです。そして、そこをクリックすると、b.htm が表示されるはずです。
 こんな簡単なことでこんな動きをするなんて、驚いてしまいます。「リンク」といっても、何か特別な仕掛けがあるわけではなく、ただタグを入れただけなのです。
 くどいですが、注意して欲しいのは、このファイル名は大文字か小文字かに統一することです。混在しても現在は特に支障はないはずですが、ホームページを公開するときに困ってしまいます。

  (3)(2)は同じフォルダの2つの文書の話でしたが、フォルダが別になってもやはりリンクできます(フォルダを分けない方が簡単なのですが、ファイルが多くなってくると訳が分からなくなってくるので、ある時点からはフォルダを作るのは不可避的なことです。それなら、最初から勉強しておいた方がいいでしょう。)。

   (あ)例えば、「 A 」フォルダの中に先ほどの a.htm を作り、「 A 」フォルダの下に「 B 」フォルダを作って中に b.htm を作って下さい。
 そして、 a.htm には<A HREF=”B/b.htm”>bファイル</A>を入力し、 b.htm には<A HREF=”../a.htm”>aファイル</A>と入力して、保存して下さい。これで、ブラウザ上をクリックすると、異なるフォルダ同士でもジャンプできることが理解できるでしょう。
 つまり、下のフォルダ内のファイルにリンクするときは、ファイル名の前に「下のフォルダ名/」を入れ、上のフォルダ内のファイルにリンクするときは、ファイル名の前に「../」を入れればいいのです。もっと上に行ったり、下に行ったりすることも、同様の方法で可能ですが、実践的にはこの程度で止めておいた方が面倒がなくていいでしょう(私も、「元フォルダ」「子フォルダ」だけでホームページを運用しています。子フォルダの数を増やせばいいだけのことです。)。

    (い)もう少し複雑なものを(複雑なので、フォルダとファイルの位置関係を自分で図にしてみて下さい。)。
 (あ)のファイル・フォルダに加え、「 A 」フォルダと同列の位置に(つまり、「 A 」フォルダの一つ上のフォルダの下に「 A 」「 C 」フォルダが入っているように)「 C 」フォルダとその中に c.htm を、また、「 B 」フォルダと同列の位置に(つまり、「 A 」フォルダの下に)「 D 」フォルダを作って中に d.htm を作って下さい。
 つまり、あるフォルダの中に A フォルダと C フォルダがあり、A フォルダの下に B フォルダと D フォルダが入っている形になります。
 ここで、 c.htm の中には<A HREF=”../A/D/d.htm”>dファイル</A>と、 d.htm の中には<A HREF=”../../C/c.htm”>cファイル</A>と入力し、保存した上で、ブラウザ上でクリックしてみて下さい。c・dファイルを行ったり来たりできるはずです。
 言葉にすると説明すると面倒ですが、要するに、共通の元フォルダまで遡って、そこから目的のファイルまでフォルダを降りてくる、という形になっているのです。

  (4)HTML文書の中の特定の部分にもジャンプできます。
 例えば、a.htm 文書内の最初の方に、<A HREF=”#1”>ジャンプ</A>とし、最後の方に、<A NAME=”1”>ここ</A>としておきます。

  (5)他のHTML文書の中の特定の部分にもジャンプできます。
 例えば、(2)のように同じフォルダ内の a.htm と b.htm がある場合、 a.htm 内に<A HREF=”b.htm#1”>ジャンプ</A>とし、b.htm の中に<A NAME=”1”>ここ</A>としておきます。つまり、「#」の前にファイル名、後ろに目印とした文字(<A NAME=”〜”>の「〜」の部分)を入れればいいのです。
 もちろん、(3)と組み合せることで、異なったフォルダ内のHTML文書内の特定の部分にジャンプするようにもできます。

  (6)リンクを、やや詳し過ぎるくらい見てみましたが、ともかく、ホームページにとっての命のようなものですから、実際にエディターとブラウザを使って練習してみて下さい。タイプミスや、</A>を忘れるなど、最初は結構失敗が多いものですが、慣れてくると簡単なものです。

  (7)さて、リンクといえば、自分の作ったページにだけリンクできるのではありません。ここがインターネットのすごいところで、自分のページからホワイトハウスのホームページにリンクを張ったり、ペントハウスのページにリンクを張ったりできます。
 しかも、「リンクを張る」とはいいますが、何か特別なことをするわけではなく、<A HREF=”〜”>○○</A>の「〜」の部分に、相手のURLを入れるだけでいいのです。私のホームページのURLは「http://village.infoweb.ne.jp/~fwgl6015/」なので、これを「〜」の中に入れ、「○○」の中に適当な文字を入れてHTML文書を作り、ブラウザでクリックしてみて下さい。おそらく、プロバイダーに接続して、私のホームページが表示されるはずです。
 この「リンクを張る」ルールは、私もよく分かりません。予め「リンクしてもいいですか」とメールで確認を取っておくのが無難でしょうが(私も公的機関のホームページ以外は一応そうしています。)、そもそも公開されたホームページなのですから、勝手にリンクしても文句を言われる筋はないようにも思います(余計な心配をさせないために、「勝手にリンクしてもかまいません」とホームページに明記しておくのが親切だと思います。)。ともかく、今はまだHTML文書を公開しているわけではなく、専ら個人として利用する段階なので、勝手に色々なURLを入れて、自分のリンク集を作ってみて下さい(そのようなリンク集も、結構便利に使えます。)。

 (五)リンクのところがわかりにくかったかも知れませんが、ともかく、今まで説明したものだけで必要にして十分なホームページを作ることができます。
 実際に、自分で色々なページを作って、相互にリンクを張ってみて下さい。遊び程度に作っても、ある程度HTML文書がたまれば結構立派なホームページになるものです。



もどる   次へ

法律実務とパソコンのページへ

ホームページへ