ホームページの楽しさは、カラフルなグラフィク・イメージを使うことができる点にあります。アニメーションなどをはめ込むと、そのページが生き生きして来ます。けれども、あまり多用すると、ダウンロードに時間がかかったり、悪くすると、コンピューターが動かなくなったりします。ホームページがどんな出来ぐあいかは、オフラインでも確かめられますが、その時コンピューターはハードディスクからデーターを読み込んでいますから、比較的早く処理してくれます。しかし、オンラインでは、データーはモデムを通して送られてくるので、オフラインの時のようなわけにはいかないことを頭にいれておかなければなりません。
インターネットで使うイメージ・ファイルは .jpg か .gif 形式のものです。一般に写真などは .jpg (または .jpeg) で、アニメーション、その他は .gif です。画像は最初は自分で作るよりも、他の人の作ったものを拝借して使います。フリーの画像サイトがたくさんありますから、自分なりに分類してコレクションを作っておくといいでしょう。ブラウザで画像にカーソールを持っていって、マウスの右ボタンを押すと、その画像を名前を付けて保存できます。そのページが背景画像を持っていたら、背景を同じように右クリックすることによって、自分のコンピューターに保存しておけます。大抵は自由に使っていいのですが、著作権のあるものもありますので、注意してください。
画像を表示させるには、<img src=" .... "> を使います。" .... " の名かには、画像のファイル名が入ります。<img src="neko.gif"> というようにします。たいてい、画像は文章のなかに埋めこみますので、あとに続く文章に対する画像の位置を指定してやらなけばなりません。
左に画像がきて、文章が右に来る場合は <img src="neko.gif" align="left"> とし、画像が右で、文章が左の場合は <img src="neko.gif" align="right">とします。もし、画像と文字とがくっつきすぎる場合は <img src="neko.gif" align="left" hspace="8" vspace="6"> などとすると、画像の上下や左右に空白ができて、文字のまわりこみを防ぎます。hspace が左右の余白を、vspace が上下の余白を調整します。数字は画面のピクセル数です。ＶＧＡの画面では 640X480 ＳＶＧＡの画面は800X600です。最近は多くの人が 800X600 の画面を使っていますが、640X480 もまだまだ使われていますので、ページを作る時はＶＧＡ画面に収まるようにしたらいいと思います。
これは＜align="left"
の場合＞の例です。イメージが文章の左に来ていますね。文章が長くなった場合は、文章がイメージの下にはいります。このネコの画像は、gif
フォーマットの2色画像です。色数の多い画像のほうがきれいなのですが、ダウンロードに時間がかかるので、私は、減色処理をして使うことが多いです。また、この画像はバックグラウンドの色を透明に処理してありますので、どのウォールペーパーの上に置いても、バックグラウンドが、ウォールペーパーになります。この処理の仕方は、GIMP
では、次の手順で行います。
これは＜align="right"
の場合＞の例です。イメージが文章の右に来ています。
画像を画面の中央におき、その下に文字を入れたい時はどうしたらいいでしょうか。
<center> <img src="neko.gif"> </center> <br><br> これがぼくのネコです。ぼくのネコは ..... <br>とすればいいのです。<br> を入れると、文字が画像の下に来ます。
背景画像をウォールペーパーにして画面いっぱいにはりつけるには、<body background="sky.gif"> というように、<body> の中で背景画像を指定します。
ボタンの画像を押すと、どこかにリンクされていくようなのがありますね。あれはどうすればいいのでしょう。文字に対して <a href=" .... "> を使ったように、画像に対してもおなじことをすればいいのです。
<a href="neko.html"><img src="ball.gif"></a>このボタンを押してね！
＜次のように表示されます＞
このボタンを押してね！＜実際にクリックしてみてください。＞
こうすると、「どこかにリンクしていますよ」というしるしに、画像が <body link=" ... "> で指定された色のラインで囲まれます。あまりかっこいいものではないので、<img src="ball.gif" border="0">としてラインを消してしまいましょう。
＜次のように表示されます＞
このボタンを押してね！＜実際にクリックしてみてください。＞
画像は送るのにも、表示させるのにも時間がかかりますので、小さな画像（サムネール）を置いて、それをクリックすれば大きな画像が見られるというようなこともできます。それには、まず、neko.gif を表示する neko.html を作っておき、次に neko.gif から neko_s.gif というサムネールをつくり、次のようにすれば、ブラウザは neko.gif を表示します。
<a href="neko.html"><img src="neko_s.gif"> ミースケの大きい画像が見れます。
＜次のように表示されます＞
ミースケの大きい画像が見れます。＜実際にクリックしてみてください。＞
多くの人は <table> ..... </table> タグは表を作るためだけのものと誤解しています。<table> タグは表を作る以上にもっと活用できるタグです。
<center> <table cellpading="20"> <tr> <td bgcolor="red"> <br> <font size="+3">ぼくのページにようこそ</font> </td> </tr> </table> </center>とすれば、画面の中央に赤い背景のバーナーが出来上がります。
＜次のように表示されます＞
| ぼくのページにようこそ |
<td> ... </td> の間に、表示させたい物を入れればいいのです。<td bgcolor=" ... "> は <body bgcolor=" ... "> と同じような働きをします。
段組み編集も <table>タグを使って出来ます。
<table> <td> <!-- これは左の段です --> </td> <td> <!-- これは真ん中の段です --> </td> <td> <!-- これは右の段です --> </td> </table>
<!-- と --> で囲まれた部分は画面には表示されません。ここにコメントをいれておくと、後で変更する時に便利です。
上の二つの例は、何れも、縦に並ぶ項目、行 (row) が一つだけでした。次に行 (row) が三つで列 (colum) が二つの表を作ってみましょう。
<table border="2"> <tr><td>Large Size<td>$2.95</td></tr> <tr><td>Medium Size<td>$2.45</td></tr> <tr><td>Small Size<td>$1.95</td></tr> </table>というように並べて書けばいいのです。
＜次のように表示されます＞
| Large Size | $2.95 |
| Medium Size | $2.45 |
| Small Size | $1.95 |
表の中にさらに表をつくるのでなければ、</td> や </tr> は省略できますが、省略しないできちんと書くようにしたほうが、XHML に移行する時のために良いと思います。
表に枠を付けたい時は、枠の大きさを cellspacing= で、枠と中の文字との間隔を cellpadding= で表わします。次の数字を変えると表がどう変わるか、試してみてください。
<table border="2" cellspacing="10" cellpadding="10"> <tr><td>Large Size<td>$2.95</td></tr> <tr><td>Medium Size<td>$2.45</td></tr> <tr><td>>Small Size<td>$1.95</td></tr> </table>
＜次のように表示されます＞
| Large Size | $2.95 |
| Medium Size | $2.45 |
| Small Size | $1.95 |
文字装飾とは、フォントの大きさや色を変えたり、太字や斜体文字にしたりといったことです。太字や斜体文字は次のタグで変えたい文字を挟みこめばいいのです。
<b> ..... </b> 太字の場合
<i> ..... </i> 斜体文字の場合
フォントの大きさや色を変えるには、<font size="..." color="..."> ..... </font> を使います。
フォントのサイズは 1-6 で 1 が一番小さく、 6 が最大です。基本のサイズが 3 ですから、<font size="5"> と指定する代わりに <font size="+2"> と言うふうに相対的に指定してもかまいません。ちょっとしたコメントを本文よりも少し小さく表わしたい時は、<small> ..... </small> を使う方が、いちいち <font size="..."> を使うより便利です。
フォントの色は先の140色から名前で選ぶかＲＧＢコードを指定します。
段落体裁で良く使うのは、<ul> と <list> でしょう。<ul> .... </ul> は、それ以降の段落に、一定の字数左に空白（インデント）を与えます。<ul>は何個でもネストにして使うことができます。しかし、使ったあとは必ず </ul> で戻しておいてください。
<ul>ぼくのネコ <ul>第一章 誕生 <ul>その一 ミースケの親 </ul></ul></ul>
<list> ..... </list> はいわゆる「ぶらざがりインデント」です。項目を並べて書く時に便利です。各項目の頭に来る「点」の形は <ul type="..." >で指定することができます。disk なら「黒丸」、circle なら「縦長の黒丸」、square は「黒い四角」になります。
引用文を、左側も、右側も空白をあけて書くには、<blockquote> ..... </blockquote> を使います。<blockquote> は小さな段落の引用ばかりでなく、ページ全体をブラウザのウィンドウから左右を退かせて表示してくれますので、ページがとても見やすくなります。<body ..... > のすぐあとに <blockquote> と入れてしまえばいいのです。
画面に単純な横線を入れて、段落を区切るには <hr> タグを使います。ただ単に <hr> とすれば、画面いっぱいに横線が引かれます。画面の半分の短い線を引くには <hr width="50%"> として、横線の長さを指定します。横線の幅は <hr size= > で変えられます。size= の後には数字（ピクセル）が来ます。
触れられなかった細かい点が多くありましたが、以上で初級篇を終わります。気のきいたページに出会ったら、そのＨＴＭＬファイルを保存しておいて、オフラインでじっくりとタグと画面の関係を眺めて勉強してみてください。HTML を学べば、エディタを使って気のきいたホームページを作ることができます。私は、ある人が MS Word で作った HTML を編集しなおしたことがありますが、MS Word のコードは複雑怪奇で、無意味なものが多く、52K もあったこのファイルを 10K のコンパクトなファイルに書き換えたことがあります。コンパクトで見ばえのする HTML ファイルは、ワープロタイプのホームページ作成アプリケーションでは作ることはできません。ぜひ、手に慣れたエディターを見つけ、HTML タグを参照しながら、ご自分でホームページを作ってみてください。HTML 4.0 Reference は http://www.htmlhelp.com でご覧になれます。日本語ページもあります。私はオフラインマニュアル wgdhtml40.tar.gz をダウンロードして使っています。
最近、神崎氏の書いた「ごく簡単な HTML の説明」というページを見つけました。「ごく簡単」と言っても、リンクをたどっていくと分かるように、これはとても奥深いページで、一読の価値があります。HTML の鉄人の方々もぜひご覧になってください。