| HTMLの書き方 基礎４＆５ | ||
| 発言番号 | 発言日時 | 発言者 |
| 01122 | 97/12/25 06:19 | にゃん |
<BODY> タグの中には、いろいろなオプションを書くことができます。ここでは、背景色と、地の文章の文字色を指定する方法を説明します。
<BODY BGCOLOR="#00FFFF" TEXT="#000080"> 〜 ここにホームページの中身 〜 </BODY> |
たとえばこのように指定すると、背景が水色になり、文字は暗い青で表示されます。BGCOLOR というオプションが背景色を指定し、TEXT というオプションが文字色を指定しているわけです。色の指定方法は、前に「文字の色を変えたい」で述べたのと同じです。
色コードについては、カラーチャートを参考にしてください。
さらに、LINK= で、他のページにリンクしている文字列の色を指定し、VLINK= で、訪問済みのリンクを表示する色を指定し、ALINK= で、今クリックして開こうとしているリンクを表示する色を指定することもできます。背景に画像を入れる指定も、<BODY> のオプションとして行いますが、それについては後述。
ブラウザに表示させる画像は、GIF 形式か JPEG 形式のどちらかでなくてはなりません。それぞれ、拡張子を .gif と .jpg にして、画像ファイルを用意しましょう。
画像を表示させるタグは、<IMG SRC="画像ファイルのURL"> です。自分のホームページの同じディレクトリに置いてある画像であれば、"画像ファイルのURL" のところには、"画像ファイル名" をそのまま書けばＯＫです。（なお、URL やファイル名は、大文字と小文字を区別します。間違えるとファイルが見つかりません。たいていのシステムでは、ファイル名を小文字で書いておけば大丈夫なはずです）。
たとえば、次のような HTML 文書を作ってみました。
<HTML> <HEAD><TITLE>だれかさんのＨＰ</TITLE></HEAD> <BODY BGCOLOR="#00FFFF" TEXT="#000080"> <CENTER> <H2>いらっしゃいませ</H2> ここはわたくしのホームページでございます。<BR> 愛する猫と妻の写真を見てください。 <P><IMG SRC="catwife.jpg"></P> かわいいっしょ </CENTER> </BODY> </HTML> |
けっこうこれだけでも、ホームページっぽく見えるものです。画像表示の <IMG> タグにも、いろんなオプションがありますが、書きだすときりがないので後にしましょう。
<BODY> のオプションで、<BODY BACKGROUND="back1.gif"> のように、BACKGROUNDの指定を書き足してやると、その画像が背景になります。
クリックひとつで他のページへ跳べるというのが、HTML のすごい所です。そういう「リンク」を作るには、<A HREF="リンク先のURL">〜</A> というタグを使います。このタグで挟まれている文字列は、たいていのブラウザでは、アンダーライン付きで表示され、そこをクリックすると、リンク先へジャンプします。
ホームページと同じディレクトリに diary.htm という「日記」ファイルを作って、そこへリンクするためには、
このほど、<A HREF="diary.htm">日記</A>をつけようと思い立ちました。 |
のように書くことで、「日記」の文字をクリックすると diary.htm へ跳ぶようになります。あるいは、よそのホームページへリンクするためには、
<A HREF="http://forum.nifty.com/fhonyaku/">翻訳フォーラムのＨＰ</A>へＧＯ！ |
のように書きましょう。
ページ上からメールを出せるようにするには、以下のようにリンクを貼ります。
例：ご意見は<A HREF="mailto:MXG00142@nifty.ne.jp">MXG00142@nifty.ne.jp</A>まで。
リンク先を「http:」ではなく「mailto:」と書けば、「メールを出す」という命令になるわけです。「mailto:」のあとには、自分のインターネット・メールアドレスを入れます。
HTML 文書には、引用符「"」がたくさん出てきます。引用符は、かならずペアで使うものなのに、閉じるほうの「"」を書き忘れることが、少なくとも私はしょっちゅうあります。ブラウザによっては、閉じるほうの「"」が抜けていても、なんとなく表示できてしまえるものもありますが、一般的には、「"」が抜けただけで、画面はむちゃくちゃになります。付け忘れないように気をつけましょう。
| 上の大きなボタンを押すと、テキストエリアに書かれている内容が、右のフレームに表示されます。いろいろ好きなことを書いて試してみましょう。（Netscape 2 では、この JavaScript がうまく作動しません） |
次の記事