【書式】<HEAD>
<TITLE>〜</TITLE>
<ISINDEX>
<NEXTID>
<LINK>
<BASE>
<META>
</HEAD>
【機能】ヘッダパート。
|
【解説】ページのヘッダを表わすタグ。
<HEAD>〜</HEAD>のなかには、次のタグを埋め込むことができる。
・<TITLE>〜</TITLE>
ページのタイトルを記述。ブラウザのメニューバーに、ここに記述した文字列がタイトルとして表示される。
・<ISINDEX>
キーワード入力用のウィンドウを表示し、ユーザーが入力したキーワードをもとに検索を行なう。ただし、セキュリティに問題があると指摘されているため、あまり利用されていない。
・<NEXTID>
ページ作成者が、ページにIDを付けたいときに利用する。
・<LINK>
他のページと関連付けるときに使用する。書式は、次のようになる。
<LINK REL="mode / parent / prev / next" HREF="mailto:/File">
<LINK REV="mode / parent / prev / next" HREF="mailto:/File">
RELはrelationshipの略で関係、REVはreverseの略で逆行を意味するもの。さらに、modeと指定した場合は、ドキュメントの著作者のことで、HREFにメールアドレス（HREF="mailto:E-Mail.Address"）を指定する。
parent、prev、nextのいずれかを指定した場合は、現在表示されているページの親ディレクトリ（parent）の指定ファイル、前（prev）、次（next）のファイルを指定する。それぞれのファイルが、どんな関係かをドキュメント中に記述しておくわけだ。
・<BASE>
基本となるURLを指定するタグで、次の書式で指定する。
<BASE HREF="URL">
URLには、ドキュメントのファイル名をフルパスで指定する。ここで指定したURLを基準として、ドキュメント中で相対パスで指定されているURLの場所が、特定されるようになる。
・<META>
他のタグでは定義できない情報を記述するためのタグで、次のような書式で記述する。
<META HTTP-EQUIV / NAME="Expires/Keyword/Replay-to/IndexType"
COMTENT="n;URL=url">
METAタグには、HTTP-EQUIVまたはNAMEアトリビュートを使って、他のタグでは定義できない情報を記述する。この両者のアドリビュートは、厳密にいえば異なっているが、現状では表示植えにはなんの影響もない。ただし、Netscape Navigatorには「HTTP-EQUIV="Refresh"」というアトリビューが追加されているので注意。
HTTP-EQUIVまたはNAMEアトリビュートの次には、オブションを指定するが、上記したのは一般的によく用いられているもの。これら以外のものも、もちろん定義して利用することができる。
実際には、たとえば次のように記述することができる。
<HEAD>
<META HTTP-EQUIV="Expires" CONTENT="1996.08.31">
<META NAME="Reply-to" CONTENT="name@address">
</HEAD>
なお、Netscape Navigator 1.1b以降では、「HTTP-EQUIV="Refresh"」がサポートされている。これはドキュメントのリフレッシュを行なわせるもので、次のような書式で記述する。
<META HTTP-EQUIV="Refresh" CONTENT="n";URL="url">
CONTENTには、自動的にドキュメントがリロードされるまでの時間を、秒単位で指定。さらにURLにリロードされるファイルを指定することができる。
このタグを利用すれば、あるページを表示させたあと、指定した秒数が経過すると、自動的に別のページに飛ばせるなどということもできる。また、ビデオ画像を表示させ、自動的にこの画像をリフレッシュさせ、あたかもリアルタイムの画像が表示されているように見せることだって可能だ。
たとえば、ページにSSIを利用して現在時刻を表示させる。そのままでは表示されている時刻は止まったままなので、５秒後にリフレッシュさせてみよう。さらにリフレッシュされたのがよくわかるよう、ページも別のものに切り替えてみる。ソースは次のようになる。
【test1.htmlのソース】
<HEAD>
<META HTTP-EQUIV="Refresh" CONTENT="5;
URL=http://address/test2.html">
<TITLE>Test1 Page</TITLE>
</HEAD>
<!--#config timefmt="%H:%M:%S"-->
<H3>
<!--#echo var="DATE_LOCAL"--><BR>
<BR>
文書１です。</H3>
|
【test2.htmlのソース】
<HEAD>
<META HTTP-EQUIV="Refresh" CONTENT="5">
<TITLE>Test2 Page</TITLE>
</HEAD>
<!--#config timefmt="%H:%M:%S"-->
<H3>
<!--#echo var="DATE_LOCAL"--><BR>
<BR>
文書２です。</H3> |
◆BODY……本文
【書式】<BODY BACKGROUND="name" BGCOLOR="#rrggbb" TEXT="#rrggbb"
LINK="#rrggbb" ALINK="#rrggbb" VLINK="#rrggbb" >
本文
</BODY>
【機能】ドキュメント本文を記述する。同時に、背景の画像や色、文字色、
リンク部の文字色などを指定することもできる。
|
【解説】ホームページ上に表示される本文は、すべてこの<BODY>〜</BODY>のタグのなかに記述することになる。ここに書かれているものが、ページに表示される。
<BODY>タグには、いくつかの属性を指定することもできる。これは１つのページで一度だけ指定できるものだから、そのページの基本となるものを設定しておけばいいだろう。
指定できるアトリビュートとその意味や用法は、次のようになる。
・BACKGROUND="name"
ページの背景の画像を指定する。文書の背景に画像が表示されているページは、それだけでカッコよく見えるものだが、nameの部分に背景に表示したい画像のファイル名を指定すればいい。
たとえば、test.gifという画像をページの背景として利用したいときは、次のように指定する。
<BODY BACKGROUND="test.gif">
</BODY>
なお、WWWブラウザが利用できる画像の形式は、JPEGまたはGIF形式の画像だけ。つまりここで指定する画像ファイルも、やはりJPEGかGIF形式のものである必要がある。
背景の画像に、たとえば次のような画像を用意しておく。
この画像ファイルをBACKGROUNGで指定すると、次のようなページが表示される。ときどき見かけるページだが、なかなかカッコいいではないか。カラーでお見せできないのが残念だが、ちょっと工夫すればこんなことも可能なのだ。
・BGCOLOR="#rrggbb"
背景色の指定。ブラウザによって独自に背景色を設定することができるものもあるが、それはホームページで背景色が設定されていないときに表示されるもの。BODYタグのBGCOLORでホームページの背景色を設定していれば、ブラウザの設定にかかわらず指定した背景色でページが表示される。
指定するのは16進数で、#記号につづけてrrggbbを指定する。といっても、初心者ではちょっと馴染みがないだろう。背景色ばかりでなく、文字の色など設定できる部分では、16進数で設定するようになっている。代表的な色の16進数を掲載しておくので、これを参考にしていただきたい。
| 色 | 名前 | 16進数 |
| 白 | White | #FFFFFF |
| 赤 | Red | #FF0000 |
| 緑 | Green | #00FF00 |
| 青 | Blue | #0000FF |
| マゼンダ | Magenta | #FF00FF |
| シアン | Cyan | #00FFFF |
| 黄 | Yellow | #FFFF00 |
| 黒 | Black | #000000 |
| アクアマリン | Aquamarine | #70DB93 |
| 青紫 | Blue Violet | #9F5F9F |
| 茶 | Brown | #A62A2A |
| こげ茶 | Dark Brown | #5C4033 |
| 灰色 | Grey | #C0C0C0 |
| 水色 | Sky Blue | #3299CC |
※色名と16進数の関係は、KDDのサイト（http://w3.lab.kdd.co.jp/technotes/WWW/Media/colorname.html）またはLem Apperson氏のホームページ（http://www.infi.net/wwwimages/colorindex.html）に詳しく出ているので、ここを参考にするといい。
16進数で設定すれば、16,777,216色のなかの任意の色が設定できる。が、これだけ微妙な色を表示できるビデオカードを利用しているユーザーは、それほど多くはないだろう。そこで16進数の代わりに、直接色の名前を指定してしまう方法もある。次のようにすればいい。
<BGCOLOR="colorname">
colornameの部分には、色の名前を指定する。名前には、上表のようなものがあるから、たとえば背景色を黒（black）にしたければ、<BGCOLOR="black">と指定すればいい。ただし、タグで色名を直接指定した場合、ブラウザによっては表示されないものもあるので注意。こんなときは、やはり16進数で指定するしかない。
なお、背景色に黒を設定すると、ブラウザの初期設定では文字も黒になっているため、別途文字色を指定しないと、ブラウザの文字が背景に隠れて消えてしまうので注意したい。
・TEXT="#rrggbb"
基本的な文字の色の指定。後述する<FONT COLOR="rrggbb">タグでとくに文字色を指定しないかぎり、文字は基本的にこのタグで指定した色になる。いずれのタグも使用しない場合は、ブラウザで設定されている色になる。
なお、やはりタグ中の#rrggbbの16進数の代わりに、色名を直接指定することもできる。
・LINK="#rrggbb"
リンク部分の色の指定。再三記述しているように、HTMLはハイパーテキストを実現するもの。文書中に他のページやサイトを埋め込んでおくと、その部分をクリックするだけで指定したページやサイトにジャンプすることができる。
これを“リンク”というが、リンクしている部分は本文とは別の色に設定できる。これはブラウザの設定によるが、ページの製作者が意識的に色を指定することもできる。それが<BODY LINK="#rrggbb">の設定だ。
もちろんこの色の設定も、色の16進数を指定するか、色名を直接指定することができる。
・ALINK="#rrggbb"
データを読み込んでいる途中での、リンク部分の色の指定。リンク部をクリックしたときに表示される色だが、とくに意図がなければ指定する必要はないだろう。
・VLINK="#rrggbb"
すでに読み込んだページへのリンク部分の色の指定。これが指定されていない場合は、ブラウザの設定している色になる。
次の画面は、リンク部分がよくわかるよう、ブラウザの背景色を白に、通常のテキストを黒、リンク部分を赤、そしてすでに読み込んだページのリンク部分の色をグレーに設定してみたもの。
【ソース例】
【ソース例】
<HTML>
<BODY BGCOLOR="white" TEXT="black" LINK="red" VLINK="gray">
<A HREF="link.html">まだ読み込んでいない</A>リンク部<BR>
<A HREF="link2.html">すでに読み込んだ</A>リンク部<BR>
</HTML> |
◆!……コメント
【書式】<!--コメント-->
【機能】コメントを埋め込む。
|
【解説】HTML文書のなかに書き込んだ文字列は、とくに指定がないかぎりそのままブラウザでも表示されてしまう。
ところが、実際にちょっと複雑なページのソースを見ると、タグと文字列が入り乱れていて、ちょっと見には判然としない。もちろんこれをブラウザが判読し、ちゃんと表示してくれるからいいのだが、HTML文書を作成しているときには、どこからどこまでが何を記述しているのか、といったコメントを埋め込んでおきたいものだ。
また、ページを定期的に更新するためにも、ところどころにコメントを埋め込んでおくと、あとで文書に手をいれやすい。
このHTML文書にコメントを入れるのが、<!-->タグだ。次のように利用すればいい。
<!--この部分から以降がコメント-->
タグの終了は > の記号の部分。実際には <!〜> という形式で〜の部分がコメントとみなされるが、書式は <!--〜--> となっているから、この形式を守っておいたほうがいいだろう。
