How to make a Web Page (Ver.2)

言語学研究室のホームページが始動してからはや２年が経とうとしています。既にアクセスは１万回を超えました(1999年4月現在)。研究室のメンバーのみなさんには、研究室のホームページを足がかりに、是非自分のホームページをつくって、どんどんリソースを発信して欲しいと思っています。

「ホームページには興味があるけど，どう始めていいのかわからない」という方の為に，このページではホームページを作成するにあたっての基本的な事項をご紹介しています。初めてホームページにチャレンジする方は、以下の項目を順序に沿って参照してください。もうすでにホームページの知識を多少持っている方は、分からない項目だけをピックアップしてご覧になることもできます。

1. HTMLについて

ホームページはHTML (Hypertext Markup Language) という規則に従って書かれます。 HTML という言語は普通のテキストにいろいろな記号 (タグ) をいれることによって文書の構造やレイアウト情報を表わします。文書は全部テキストなので、どんなエディタを使って書いても問題ありません。

HTMLも日々進化しており、また見た目にインパクトのある凝ったしかけができるようになっていますが、ここでは基本的なことを挙げるにとどめておきます。まずやってみることが大切です。簡単な例を出しましょう。 (行頭の番号は行番号を表します。実際に書く必要はありません。)

書いたファイルとブラウザで見た状態とではちょっと違うことがお分かりいただけますね。タグと呼ばれる文字列を挿入することによって，ホームページはどんどん表現が豊かになっていくのです。この文書を、例えば index.html という名前でウェブページを置く専用のディレクトリに保存すれば、もうホームページの原型はできたことになります。上のリンク先の HTML 文書は hello.html という名前で保存してあります。

"<" と ">" で囲まれている大文字で書かれている部分はエレメントと呼ばれます。 (大文字でなくてもいいのですが見やすいようにそうしました。) エレメントは基本的に、<HEAD> </HEAD> のように始まりと終わりを示す２つのタグ(開始タグと終了タグ)で組になっています。 bracketing と同じ原理です。(^_^)

ちなみに改行の位置も全然関係ないので、自分が見やすいように適当に改行を入れて書いてかまいません。

では、どのようにこの文書が書かれているのか、順に見てみましょう。

こんな感じでホームページは書かれていきます。あとは趣向を凝らして自分らしい文章を書いてゆけばいいわけです。簡単ですね。

でも hello.html だけではページが1つだけなので全然面白くありません。ページも増やしたいし、そうして新しく作ったページへのリンクも張りたいところです。そもそも、リンクするための書式を文書中に入れることができる、というのが、HTML が HyperText という名前を冠しているゆえんでもあります。 (正式にはもちろん「ハイパーリンク」ですが、特に混同の恐れはないと思いますので、ここでは単に「リンク」といいます。) 次の節ではリンクを中心に説明していきましょう。

2. 絵の表示とリンクの張り方

この節では絵の表示とリンクの張り方について説明します。それでは、前節の文書の内容に追加していく形でやってみましょう。

1. <HEAD>
2. <TITLE>Welcome to ASAKO IIDA's HomePage </TITLE>
3. </HEAD>
4. <BODY>
5. <H1>飯田朝子のホームページへようこそ！</H1>
6. <H2>東京大学文学部４年<BR>言語学研究室</H2>
7. <HR>
8. <P><IMG SRC="face.gif"> これが私です。かわいいでしょ。
9. <P><A HREF="private.html">飯田朝子の研究一覧</A>
10. <HR>
11. <ADDRESS>ASAKO IIDA / iida@gengo.l.u-tokyo.ac.jp</ADDRESS>
12. </BODY>

文書は 7 行目まで全く同じです。加えられたのは 8, 9 行目です。ではまず、タグ <P> を説明しておきましょう。

P エレメントは段落を表します。見た目では 8 行目と 9 行目が改行されているので、<BR> とほとんど同じじゃないか、と思うかもしれませんが、P エレメントは段落という、文章の構造を表す重要なマーカーですので区別して使うことが大切です。上の例 (hello2.html) でも行われているように、終了タグ </P> は省略できます。従って、上の文書は次のように書いても全く同じです。

[省略]
8. <P><IMG SRC="face.gif">私の写真</P>
9. <P><A HREF="private.html">飯田朝子の研究一覧</A></P>
[省略]

では、この節のトピックである <IMG SRC="face.gif"> と <A HREF="private.html">飯田朝子の研究一覧</A> の説明に移りましょう。２つのタグに共通しているのは、参照するファイルをエレメントの属性 (attribute) として指定しなければならないことです。

<IMG SRC="……"> は画像 (image) を表示するタグです。エレメントの名前 IMG の後に、画像ファイルを指定する SRC という属性を指定するようになっています (…の部分にファイル名を書きます)。

(もし、指定された画像ファイルがなかったり、画像のダウンロードの途中の段階にあるときは、右側 (多分) に見えているようなアイコンがでます。このときにどんな画像がでるかはブラウザにより異なります。）これも終了タグと対になっていませんね。ファイル名はそのHTMLのある所から相対パスで参照することもできます。例えばアイコンの絵を icon というディレクトリにまとめる場合、<IMG SRC="./icon/face.gif"> (または単に <IMG SRC="icon/face.gif">) のように書きます。一つ階層が上の親ディレクトリにあるファイルを相対パスで参照するときは <IMG SRC="../face.gif"> となります。

また「これが私です...」の文字は絵の右隣に表示されていますが、画像の位置を特に調整したい時には ALIGN という属性を加えます。例えば、画像をもっと上に表示したいときは、<IMG ALIGN=top SRC="images/face.gif">私の写真<BR> のようにしましょう。 top 以外には bottom, middle, right, left があります (ただし、厳密に位置を指定することは難しいようです)。ちなみに、何も指定しない時は middle になっています。画像は一般的には gif か jpeg のフォーマットが使われているようです。

次がいよいよリンクです。リンクは A (anchor) エレメントで指定し、どの文書にリンクするかを HREF という属性で表わします。上の例 (hello2.html) では、次のように書きました。

<A HREF="private.html">飯田朝子の研究一覧</A>

となります。リンクのない普通の文章とは、違って見えますね。リンクは、特に指定しなければ青い文字に下線が引いてある形で表わされることが多いようです (hello2.html をブラウザで見てみてください)。リンクにマウスポインタを持ってくるとポインタの矢印の形が変化し、リンク部分をクリックすると private.html という文書が開きます。ここでのファイル指定も相対パスが使え、<A HREF="doc/document.html"> のようにディレクトリを作って文書を管理することができます。

3. ページの増やし方

まだ、リンク先のページを作っていませんでした。ここでは２ページ目のリソースとして private.html をつくってみましょう。 index.html と同じディレクトリに private.html というファイルを作ってください。中身は下のようにしてみます。

1. <HEAD>
2. <TITLE>Private data of ASAKO IIDA</TITLE>
3. </HEAD>
4. <BODY>
5. <H1>飯田朝子の研究一覧</H1>
6. <H2>日本語分類辞</H2>
7. <HR>
8. <P><A HREF="hello2.html">飯田朝子のホームページに戻る</A><BR>
9. <A HREF="http://www.gengo.l.u-tokyo.ac.jp/indexj.html">言語学研究室のホームページへ</A>
10. </BODY>

まず、この文書では、袋小路にならないように、8 行目に hello2.html へ戻るリンク (「ホームページへ戻る」) をつけています。

また、ファイル名を書いていた部分に直接 URL (Uniform Resource Locator(s)) を書いて、他の人が書いたページへのリンクを張ることができます。この文書では、9 行目で言語学研究室のホームページ (URL は http://www.gengo.l.u-tokyo.ac.jp/indexj.html) へリンクを張ってみました。

なお、リンクを張る時に、文字ではなくてボタンみたいにしたい時は、

のように IMG エレメントを A エレメント内に埋めこめば、画像をクリックしてリンク先に飛べるようになります。 (ここでは ani_133.gif という画像ファイルを参照しています。)

これで2ページ目を作ることができました。同じ要領で3ページ、4ページとどんどん増やすことができます。あとは作る人のアイデア次第。

さて、ここまでホームページ作成の基本を解説してきました。次からはいちいちリストを書くのではなくて、リファレンスのような形でこまごまとしたタグについて説明しようと思います。

4. いろいろなタグ

(1) 番号なしリストの書き方

のように箇条書のリストをつくります。 UL というエレメント (<UL> </UL>) の間に <LI> タグをつけてアイテムを書きます。

(2) 番号つきリストの書き方

となります。構造は番号なしの UL エレメントと同じですね。

(3) 定義リストの書き方

<DL>
<DT>言語学研究室 <DD>世界の諸言語に関する研究を行っている
<DT>学生室 <DD>学生のオアシス
</DL>

のように、用語を説明するのに使います。DL エレメント (definition list) <DL> と </DL> の間に <DT> (definition term 定義する用語)、<DD> (definition description 定義の説明) が入ります。

(4) スペースや改行を有効にしたテキストの表示

次の文章では、半角のスペースを "_" で、改行を "↓" で表わしています。

<PRE>↓
ス _ _ ペ _ _ _ースや↓
_ _ _ _ _改行が↓
↓
↓
↓
そのまま出せます。↓
</PRE>↓

<PRE> と </PRE> で囲まれた文章は、スペースや改行がそのまま出ます。上の文章も普通 <BR> がないと、一行に書かれてしまいますが、こうしておくとそのまま出せるはずです。

(5) 文字の飾り

<B>ボールド体、強調された文字</B><BR>
<I>イタリック体、斜体文字</I><BR>
<TT>タイプライタの文字</TT><BR>
<U>文字にアンダーライン</U>

これらはそれぞれ、はさまれた文字のフォントを指定しています。

(6) 特定の場所へのリンク

<A HREF="#dokosoko">同じページのどこそこへジャンプ</A>
………
………
<A NAME="dokosoko">ジャンプした先</A>

一枚のページでも、長くなると見出しごとにジャンプしたくなります。同じページ内でも上のように、dokosoko の部分を適当に名前を付けてやれば、リンクを張ることができます。これは何も同じページでなくてもよくて、

<A HREF="nextpage.html#asoko">次のページのあそこへ</A>

のようにすれば、違うページの特定の場所にもリンクできます。

…ということで、いろいろなタグについて説明してみました。これを参考にかっこいいホームページを作ってみて下さい。 (ネットスケープで他の人のページを見ている時、これはマネしたい！と思ったら、メニューのViewという所から、Document Sourceを選びましょう。そのページがどういうテクニックで書かれているかを直接見ることができます。)

5. 背景、文字、リンクに色をつける

背景・リンク・文字の色を変えると、ホームページもぐっと色彩豊かになります。これはタグで色を指定して行います。例えば、今まで <BODY> とのみ書いていた所を、

のようにすると、背景、リンク、文字等の色を変えることができます。 BGCOLOR が背景の色、TEXT は通常のテキストの色 (この場合は黒)、LINK, VLINK は未訪問、訪問済みのリンク部分の色です。 "#xxxxxx" は # のあとを２文字づつ区切って読み、それぞれ R, G, B の輝度値を２ケタの１６進数で示しています。

１０進数は０から９の１０文字で数を表しますが、１６進数は０から９にａからｆを加えた１６文字で数を表します。すなわち１０進数の１０は１６進数ではａになり、１６進数のｆは１０進数の１５にあたります。例えば１０進数の２５は、２×１０＋５×１となります。一方１６進数で２５と表すと、２×１６＋５×１＝３７、で１０進数では３７です。１０進数で２ケタ目は「１０の位」ですが、１６進数では「１６の位」ということです。 (従って、２ケタの１０進数の最大値は９９ですが、１６進数の最大値はｆｆで、１０進数にすると、ｆ（＝１５）×１６＋ｆ＝２５５になります。) 例を挙げましょう

具体的には、#ff0000であれば、R=ff(=255),G=0,B=0で赤になります。同様に#00ff00は緑、#0000ffは青になります。#000000は黒、#ffffffは白 (←白で書いてあります) になります。あとは数字をいろいろ変えて、好きな色を作ってみて下さい。但し、色によっては画面で見にくかったり、お使いのモニタがサポートできない色もあります。背景の色と文字の色のバランスを考えて、見易いホームページを目指しましょう。

今回はここまでです。また更にアップしてきますので，どうぞ参考にしてください。

簡単なホームページの作り方

もくじ