1. HTMLについて

ホームページはHTML言語で書かれています。HTMLという言語は基本的にただのテキストにいろいろな制御文 字をいれることによってホームページを書くためのものです。結局全部テキストなので、どんなエディタを 使って書いても問題ありません。
　ここではemacsを使うことを考えて書いてみます。emacsの使い方 はわかるでしょうか？研究室にある利用の手引 きを参考にしてみて下さい。最低限の使い方がわかるので、とりあえずそれで十分です。 HTMLも日々進化していて、凝ったしかけができるようになっていますが、ここでは簡単なことにとどめておきます。 まずやってみることが大切です。簡単な例を出しましょう。

★ 以下のファイルは、本来は「＜」は半角の「<」で，そして「＞」は「>」で書かれます。 自分のファイルに転写するときは，これを置換してください。

---------------------------------------------------------
＜HEAD＞
＜TITLE＞Welcome to ASAKO IIDA's HomePage ＜/TITLE＞
＜/HEAD＞

＜BODY＞
＜H1＞ 飯田朝子のホームページへようこそ！ ＜BR＞
＜/H1＞
＜H2＞東京大学文学部４年＜BR＞言語学研究室
＜/H2＞
＜HR＞

＜ADDRESS＞ASAKO IIDA / iida@gengo.l.u-tokyo.ac.jp
＜/ADDRESS＞

＜/BODY＞
---------------------------------------------------------

この文字列をNetscapeなどのブラウザにかけると以下のように見えるわけです：

飯田朝子のホームページへようこそ！

東京大学文学部４年
言語学研究室

書いたファイルとブラウザで見た状態とではだいぶ違うことがお分かりいただけますね。 このタグと呼ばれる文字列を挿入して組み合わせることによって，ホームページはどんどん表現が豊かに なっていくのです。
この文字列をindex.htmlという名前で保存しておけば、もうホームページの原型はできたことになります。

かっこで囲まれている大文字で書かれている部分が制御コードです。大文字で なくてもいいのですが見やすいようにそうしました。ちなみに改行の位置も全然関係ないので見やすく書いて 下さい。制御コードは基本的に、＜HEAD＞＜/HEAD＞のように始まりと終わりを示す２つで一組になって扱われ ます。bracketingと同じ原理です。(^_^)

・まず、＜HEAD＞……＜/HEAD＞はこの間にヘッダがくることを示します。次の＜TITLE＞……＜/TITLE＞は、 タイトルを書く部分です。netscapeの大外枠の一番上に表示されますね。日本語が表示されない場合があるの で、できれば英語で書きましょう。

・次に＜BODY＞が来ています。これも一番下の＜/BODY＞と一対になっています。この間がホームページの本体 になるわけですが、この制御タグは本当はなくても大丈夫です。後々のためにはあった方がいいです。

・＜H1＞……＜/H1＞+はその間に表示される文字の大きさを指定します。 H1が一番大きくて、数字が大きくなるほど文字は小さくなります。 H6まであります。このコードを書かないと文字の大きさはH4の大きさで表示されます。

・次に＜BR＞と＜HR＞という２つの「終わりの指定」のないタグが出てきます。＜BR＞はそこで改行すること を示しています。このように改行を指定しないと、文章はそのまま1行になってしまうのです。 ＜HR＞は水平に 一本の線を引いてくれます。

・さて最後の＜ADDRESS＞……＜/ADDRESS＞はアドレスを書くものです。これもなくても大丈夫。

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

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

　でもこれだけではページが1つだけなので全然面白くありません。ページも増やしたいし、リンクも張りた いところです。そこで次節ではリンクを中心に説明していきましょう。

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

---------------------------------------------------------------------------
＜HEAD＞
＜TITLE＞Welcome to ASAKO IIDA's HomePage ＜/TITLE＞
＜/HEAD＞

＜BODY＞
＜H1＞ 飯田朝子のホームページへようこそ！＜P＞
＜/H1＞

＜H2＞
東京大学文学部４年＜BR＞言語学研究室
＜/H2＞
＜HR＞

＜IMG SRC="face.gif"＞私の写真＜BR＞
＜A HREF="private.html"＞飯田朝子の研究一覧＜/A＞＜BR＞
＜HR＞

＜ADDRESS＞ ASAKO IIDA / iida@gengo.l.u-tokyo.ac.jp
＜/ADDRESS＞

＜/BODY＞
--------------------------------------------------------------------------
再びこれをブラウザにかけると．．．
--------------------------------------------------------------------------

飯田朝子のホームページへようこそ！

東京大学文学部４年
言語学研究室

3.ページの増やし方

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

＜HEAD＞
＜TITLE＞Private data of ASAKO IIDA＜/TITLE＞
＜/HEAD＞

＜BODY＞
＜H1＞飯田朝子の研究一覧＜/H1＞＜P＞＜H2＞日本語分類辞＜BR＞
＜/H2＞
＜HR＞ ＜A HREF="index.html"＞ホームページに戻る＜/A＞＜BR＞
＜/BODY＞

-----------------------------------------------------------------------
また、ブラウザにかけると・・・
-----------------------------------------------------------------------

飯田朝子の研究一覧

日本語分類辞

4.いろいろなタグ

この節では補足の形でタグの説明をしましょう。

(1)番号なしリストの書き方
＜UL＞
＜LI＞意味論　＜LI＞統語論
＜/UL＞
これは
・意味論　・統語論
のように箇条書になります。＜UL＞＜/UL＞の間に＜LI＞のタグをつけてアイテムを 書きます。

(2)番号つきリストの書き方
＜OL＞
＜LI＞意味論　＜LI＞統語論　＜LI＞音韻論
＜/OL＞
これは
１意味論　２統語論　３音韻論
となります。番号なしのものとほとんど同じです。

(3)定義型リストの書き方
＜DL＞
＜DT＞言語学研究室 ＜DD＞世界の諸言語に関する研究を行っている。
＜DT＞研究生室 ＜DD＞学生の研究の場所
＜/DL＞
これは

 	言語学研究室	   世界の諸言語に関する研究を行っている。
	研究生室	   学生の研究の場所

(4)スペースや改行を有効にしたテキストの表示
＜PRE＞
スペースや改行がそのまま出せます。
＜/PRE＞

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

(5)文字の飾り
＜B＞ボールド体、強調された文字＜/B＞ ＜I＞イタリック体、斜体文字＜/I＞
＜TT＞タイプライタの文字＜/TT＞ ＜U＞文字にアンダーライン＜/U＞
これらはそれぞれ、はさまれた文字のフォントが変わります。

(6)特定の場所へのリンク
＜A HREF="#dokosoko"＞同じページのどこそこへジャンプ＜/A＞
………
………
＜A NAME="dokosoko"＞ジャンプした先＜/A＞

1ページでも長くなると、見出しごとにジャンプしたくなります。同じページ内でも 上のように、dokosokoの部分を適当に名前を付けてやれば、リンクを張ることがで きます。
これは何も同じページでなくてもよくて、＜A HREF="nextpage.html#asoko"＞次の ページのあそこへ＜/A＞のようにすれば、違うページの特定の場所にもリンクでき ます。

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

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

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

例えば、今まで＜BODY＞と書いていた所を、
＜BODY BGCOLOR="#aab6ff" TEXT="#000000" LINK="#e000a0" VLINK="#aa00ff"＞ のようにすると、背景、リンク、文字等の色を変えることができます。BGCOLORが背景 の色、TEXTは文字の色、LINK,VLINKはリンク前、後の文字の色です。"#??????"は# のあとを２文字づつ区切って読み、それぞれR,G,Bの 輝度値を２ケタの１６進数で 示しています。
１０進数は０から９の１０文字で数を表しますが、１６進数は０から９にａから ｆを加えた１６文字で数を表します。すなわち １０進数の１０は１６進数ではａに なり、１６進数のｆは１０進数の１５になります。例えば１０進数の２５は、２× １０＋５×１となります。一方１６進数で２５と表すと、２×１６＋５×１＝３７、 で１０進数では３７です。１０進数で２ケタ目は「１０の位」ですが、１６進数では「１６の位」ということです。だから２ケタの１０進数の最大値は９９ですが、１６進数の最 大値はｆｆで、１０進数にすると、ｆ（＝１５）×１６＋ｆ＝２５５になります。 16進法：１、２、３、４、５、６、７、８、９、ａ、ｂ、ｃ、ｄ、ｅ、ｆ、ｇ

例）16進法で「５３」＝５×１６＋３×１＝８３
	　　「ｂｆ」＝１２×１６＋１５×１＝２０７