ホームページの作成

HTML（Hyper Text Markup Language）とは

・本文と他の文章を電子的に結びつけ、参照をしやすくした文章のことをいう。
・表示には、WWWブラウザーをしようする。
・ファイルは、テキスト形式なのでワープロやエディターで作成、編集が可能。
・タグと呼ばれる書式を文章中に記載することにより、表示される。

HTMLの文章構造

HTMLは必ず次の条件で構成される必要がある。

＜HTML＞で始まり＜／HTML＞で終わる。
＜HEAD＞ヘッダー＜／HEAD＞と＜BODY＞ボディー＜／BODY＞部分で構成される。
＜HEAD＞ヘッダー＜／HEAD＞部分には、文章に関する情報を書いておく。WWWブラウザーには表示されない。
＜HEAD＞ヘッダー＜／HEAD＞部分には、＜TITLE＞タイトル＜／TITLE＞を一つだけ書く。
＜BODY＞ボディー＜／BODY＞部分には、文章の本体を書く。WWWブラウザーにはここが表示される。

では、実際のホームページをもとにその構造を見てみましょう。
$\includegraphics{sample.eps}$
実際のファイルの中身は次のようになっています。

＜HTML＞
＜HEAD＞
＜TITLE＞「オーストラリアからの交換留学生を迎えて」＜／TITLE＞
＜／HEAD＞
＜BODY＞
＜H1＞「ひろば」＜／H1＞＜BR＞
＜H2 ALIGN="CENTER"＞「オーストラリアからの交換留学生を迎えて」＜／H2＞＜BR＞
＜H3 ALIGN="RIGHT"＞(財)中国四国酪農大学校西家忠治＜／H3＞＜HR＞
9月2日から11月1日までの約2ヵ月間，カンガルーの国，オーストラリアからジャミー君（20歳）とダイアナさん（20歳）の二人の交換留学生がやって来ました。＜BR＞
＜IMG SRC="koukan3.jpg" ALIGN="RIGHT" HSPACE=10 VSPACE=10＞
・・・途中省略・・・
＜BR CLEAR="ALL"＞
・・・途中省略・・・
＜HR＞＜BR＞
＜A HREF="index.htm"＞戻る＜／A＞＜BR＞
＜／BODY＞
＜／HTML＞

それでは、内容について一つづつ説明します。
1行目の＜HTML＞についてですが、このファイルがHTMLのファイルであることを宣言しています。この宣言を行うことにより、ブラウザーがファイルを読み込んだときにHTMLの文法にのっとって表示してくれます。

また、＜HTML＞を宣言したら文末で必ず＜／HTML＞を書いてHTMLの終了を宣言しなければなりません。
2 行目の＜HEAD＞と4行目＜／HEAD＞ですが、ここには、文章の情報を書きます。
3行目の＜TITLE＞「オーストラリアからの交換留学生を迎えて」＜／TITLE＞は、この文章のタイトルをウィンドウの上部に表示します。
6行目から、ブラウザー内に表示される本文が入ります。＜BODY＞で本文の開始を宣言します。また、本文の終了は＜／BODY＞で終わらなければなりません。
7行目から9行目の＜H＃＞～＜／H＃＞から、見出しになります。この文字は標準より太字で表示されます。＃の数字部分が小さい数字になるほど文字のサイズは大きくなります。数字の範囲は1～6です。
11行目からが文章になります。文章の途中で強制改行を行いたい場合は、改行したい場所に＜BR＞（11行目）を書きます。また、段落を変えたい場合には＜P＞を書きます。
13行目の＜IMG SRC="koukan3.jpg" ALIGN="RIGHT" HSPACE=10 VSPACE=10＞は画像の表示命令です。画面に表示したいファイル名「koukan3.jpg」を書くことにより、画面上に画像を表示させます。
17行目の＜BR CLEAR="ALL"＞は画像の回り込みを中止させます。
21行目の＜HR＞は画面上に罫線を表示させます。
23行目の＜A HREF="index.htm"＞戻る＜／A＞＜BR＞は他のファイルへのリンクを設定しています。画面上では、タグに囲まれた「戻る」の文字は下線が引かれた状態で表示されます。ここをマウスでクリックすると、リンクの設定されたファイル（例の場合「index.htm」）が表示されます。

主なタグの説明

背景の設定（＜BODY＞）

＜BODY＞は、ホームページの背景等の設定ができます。

＜BODY BGCOLOR="◇"＞
背景色
＜BODY TEXT="◇"＞
標準の文字の色
＜BODY LINK="◇"＞
リンク部分の文字の色
＜BODY VLINK="◇"＞
すでに読み込んだ部分の文字の色
＜BODY ALINK="◇"＞
データを読み込んでいる途中の文字の色
＜BODY BACKGROUND="XXX.gif"＞
背景に画像ファイルを表示

"◇"は表示する色を16進数で設定します。主な色のコードは次のとおりです。

黒
＃000000
白
＃FFFFFF
赤
＃FF0000
緑
＃00FF00
青
＃0000FF
黄
＃FFFF00
紫
＃800080
灰
＃808080
薄灰
＃C0C0C0
濃桃
＃FF00FF
白
＃00FFFF

見出しの設定（＜H＃＞）

＃に数字を書き、見出しのサイズを調整します。また、以下のオプションが設定できます

＜H1 ALIGN="right"＞
画面上で右寄せで表示
＜H1 ALIGN="center"＞
画面上で中心に表示
＜H1 ALIGN="left"＞
画面上で左寄せで表示

リスト表示

リスト表示には次の3種類があります。

＜UL＞＜LI＞
マーク付きリスト例＜UL＞＜LI＞今日＜LI＞明日＜／UL＞

今日
明日

＜OL＞＜LI＞
番号順リスト例＜OL＞＜LI＞今日＜LI＞明日＜／OL＞

今日
明日

＜DL＞＜DT＞＜DD＞
定義型リスト例＜DL＞＜DT＞今日＜DD＞今日は昨日の明日＜／DL＞

今日
今日は昨日の明日

画像の表示（＜IMG SRC="XXX.gif"＞）

画像を表示させるためのタグです。"XXX.gif"に表示させたいファイルの名前を書きます。画像の形式には幾つも種類がありますが、ブラウザーで表示できるファイルの種類はJPEG（拡張子jpg）とGIF（拡張子gif）形式です。

＜IMG SRC=XXX.gif ALT="ファイル説明"＞
テキストのみの表示の場合、表示名で説明する場合に利用。
＜IMG SRC="XXX.gif" ALIGN="◇"＞
文字の回り込み。◇=leftもしくはright
＜IMG 略 VSPACE="" HSPACE=""＞
文字回り込み時に画像との間隔を調整、VSPACEは縦間隔、HSPACEは横間隔
＜CAPTION＞
画像の説明を画像の下部に表示する。

表組み（＜TABLE＞）

WWWで表を表示するには、次の4つのタグを利用します。

＜TABLE＞
表組みの宣言

＜TABLE BORDER＞
罫線を表示する
＜TABLE＞
罫線を表示しない

＜TR＞
列の定義

＜TR "right"＞
右よせ
＜TR "cennter"＞
中央
＜TR＞
左寄せ

＜TD＞
表示データの定義

＜TD "right"＞
右よせ
＜TD "cennter"＞
中央
＜TD＞
左寄せ
＜TD ROWSPAN＞
複数の行にまたがる場合
＜TD COLSPAN＞
複数の列にまたがる場合

＜TH＞
表見出しの定義

＜TH "right"＞
右よせ
＜TH ＞
中央
＜TH "left"＞
左寄せ

例1＜TABLE BODER＞＜TR＞＜TH＞A＜／TH＞＜TH＞B＜／TH＞＜TH＞C＜／TH＞＜／TR＞＜TR＞＜TD＞1＜／TD＞＜TD＞牛＜／TD＞＜TD＞豚＜／TD＞＜／TR＞＜TR＞＜TD＞2＜／TD＞＜TD＞鶏＜／TD＞＜TD＞羊＜／TD＞＜／TR＞＜／TABLE＞

A B C

1 牛豚

2 鶏羊

例2＜TABLE BODER＞＜TR＞＜TD COLSPAN="2"＞牛＜／TH＞＜／TR＞＜TR＞＜TD＞ホルスタイン＜／TD＞＜TD＞ジャージー＜／TD＞＜／TR＞＜／TABLE＞

牛

ホルスタインジャージー

ファイルのリンク

他のファイルへジャンプする設定をリンクといいます。リンクの種類は大きく分けて2種類あります。

同じ文章内でのリンクリンクを指定する方＜A HREF="＃jump"＞ジャンプ＜／A＞リンクされる側＜A NAME="jump" ＞
他の文章とのリンク

同じサーバー上にある場合（2.htmから3.htmを呼び出す場合）＜A HREF="k33/3.htm"＞ファイル3へジャンプ＜／A＞ディレクトリとファイル名だけで良い。ちなみに、3.htmから2.htmを呼び出す場合は、＜A HREF="../2.htm"＞ファイル2へジャンプ＜／A＞となる。
異なるサーバー上にある場合（2.htmから1.htmを呼び出す場合）＜A HREF="http://:www.pref.okayama.jp/chikusanka/1.htm"＞ファイル1へジャンプ＜／A＞
ジャンプ先のサーバー名ディレクトリ、ファイル名を指定しなければならない。
この他にも、HTMLの多種あり、ブラウザーのバージョンアップに伴い、新しいタグも生まれていますが、基本的な、ホームページは以上のタグで作成することが可能です。もっと凝ったホームページを作成したい人は、幾つも解説の本が出版されていますので、そちらを参考に作成してみたください。

A	B	C
1	牛	豚
2	鶏	羊

牛
ホルスタイン	ジャージー