ねっと先生 ところで、いんた君。インターネットの特色は何か、と聞かれたら、どう答えるかい？
いんた君 アッ、という間に、世界中に情報が伝わることでしょ。
ねっと先生 うん。それも大きな特色だけど、まだある。いろいろな絵や写真、場合によっては音も伝えることができるんだ。
いんた君 絵や写真って、それ、動いたりするの？
ねっと先生 そうだよ。だけど、絵を動かしたり音を出したりするには、たくさんのデータを処理しなければならないから、時間がかかる。機械や回線の能力がもっと向上しないと、快適に使える状況にはならないね。
いんた君 先生、絵や写真は、どうやったら見ることができるようになるの？
ねっと先生 よし、きょうはその話をしようか。インターネットに情報を発信するための言語であるＨＴＭＬの世界では、絵や写真のことを「イメージ」と呼んでいる。で、そのイメージを表示する道具が、これまた「タグ」。前回まで勉強してきただろ、あの仲間さ。「イメージ・タグ」といって、次のように使うんだ。
ねっと先生 「"」と「"」ではさまれたに、絵や写真のデータを入れたファイルの名前を書くんだ。そうすると、パソコンがそのファイルを読みに行って、画面に表示してくれる。
いんた君 「gif」って、何のこと？
ねっと先生 ふつう、「ジフ」と読むんだが、「ギフ」と読む人もいる。通信回線上で写真や絵をやりとりするのに便利なようにと、アメリカで開発されたイメージ・ファイルの形式で、画面を表示するためのソフトが何であろうと、ちゃんと読み込むことができる。だから、イメージ・ファイルは gif でつくるようにしたほうがいいと、一般的には言われているんだ。
いんた君 gif のほかには、何があるの？
ねっと先生 有名なものに「jpeg ( jpg )」がある。「ジェイペグ」と読む。gif に比べるとデータ量が少ないので、画面の表示も速いんだけど、ふつうはその分だけ、絵の品質も悪くなる。
いんた君 「ALT」というのは？
ねっと先生 英語で「代わり」という意味の「alternative」からきている。たとえば、表示された画面の中で、こんなマークが出ることがある。
いんた君 どれもにているけど、よく見ると、にていないね。
ねっと先生 いちばん左は、画面を読んでいるとちゅうでストップのボタンを押したりすると、出てくる。ここに絵や写真がありますよ、というお知らせ。まん中は、ＨＴＭＬのテキストに書いてある場所に、そのイメージ・ファイルが見あたりませんという警告。右は、確かにファイルはあるのだけれど、中身がこわれていたり、パソコンのメモリが不足していたりして読めませんという意味だよ。
いんた君 絵や写真が、ちゃんと出ないんじゃ、おもしろくないね。
ねっと先生 そこで使うのが「ALT」だ。何かの理由でイメージが表示されない場合には、代わりにこういう文字を表示してくださいという命令なんだ。
いんた君 ほかにも、いろいろあるね。
ねっと先生 「WIDTH」「HEIGHT」はそれぞれ、イメージのはばと高さを変えるための命令。「＃」には、どのくらい大きくしたり、小さくしたりするかという単位や比率を入れる。
いんた君 「ALIGN」は？
ねっと先生 イメージと文章がいっしょになっている画面の場合、イメージに対して、どこに文章を配置するかという命令だ。「top」「center」「bottom」はそれぞれ、上、まん中、下という意味。「left」「right」は、それぞれイメージを左寄せ、右寄せにするという意味だよ。ところで、いんた君、絵とか写真というけど、パソコンの画面に取り込むのに、どんな方法があるか、あげてごらん。
いんた君 パソコンで絵をかけばいいんでしょ。いつも遊んでるよ。
ねっと先生 それもひとつ。それから、スキャナといって、絵や写真を読みとる機械もある。ちかごろはデジタルカメラといって、フィルムじゃなく、メモリの中に写真をしまいこんでおけるカメラも売っているんだよ。
いんた君 すごい。先生、持ってるの？
ねっと先生 もう少し、安くなったら、買うつもりだ。
いんた君 あれ？ 先生、この右側の写真、なんだかおかしいよ。
ねっと先生 ああ、これかい？ インターレースというんだ。イメージのデータ量が大きいと、なかなか画面に表示されなくてイライラする。そこで、最初はあらっぽく表示し、だんだんきめこまかく絵が現れるようにする方法なんだ。右から左の絵に移っていくわけだ。
いんた君 そういえば先生、このページの背景は、クリーム色の中に、うっすらと「Ｓｃｈｏｏｌ Ｐａｇｅ」と書いてあるよ。
ねっと先生 <BODY BACKGROUND="イメージ・ファイルの名前"> というタグの書き方をすると、イメージ・ファイルの絵がまるでタイルのように、連続して表示されるんだ。
いんた君 色を変えることはできるの？
ねっと先生 <BODY BGCOLOR="＃RRGGBB"> という書き方をする。「RRGGBB」は、難しいけど、１６進数という数字だ。先生にまかせてくれればいいよ。ほかに、背景を透明にする方法もある。たとえば、リンゴの絵を画面に取りこむとする。リンゴは四角形じゃないから、白い背景部分がリンゴの回りに表示されたりして、きれいじゃない。そこで、リンゴの背景色を透明にしてしまうんだ。すると、リンゴの絵だけを切り取って、別の画面にはった感じになる。この方法を使うと、別々のイメージが１枚の絵のようにぴったりおさまるんだ。
いんた君 ぼく、よくわかんないから、先生におまかせ。
ねっと先生 ところで、いんた君、絵や写真を取りこむさいに、いちばん大切なことは何だと思う？
いんた君 できるだけ、きれいに見えることでしょ？
ねっと先生 だけど、「きれい」にこだわって、大きな絵や写真を入れたりすると、データ量が大きくなって、画面になかなか表示されなくなる。さっき、インターレースというやり方を教えてあげただろ？ あれもひとつの方法だけど、まず大切なのは、絵や写真が多いほうがにぎやかだなんて考えずに、必要なもの以外は取りこまないこと。イメージはできるだけ小さくすること。使う色の数も、できるだけ少なくすること。それでいかにきれいに見せるか、そこが腕のふるいどころなんだよ。
いんた君 絵や写真じゃないけど、先生、ときどき表（ひょう）みたいなのがあるね。あれもタグなの？
ねっと先生 そうだ。「テーブル」って呼んでいる。枠（わく）に厚みをつけたりすると、がくぶちのような表ができたりする。
いんた君 むずかしいのかなあ。
ねっと先生 いろいろな種類のタグがあるけど、基本はかんたん。表のはじまりと終わりを <TABLE> と </TABLE> ではさむ。はじめの <TABLE> を <TABLE BORDER=＃> という具合（＃は数字）にすると、枠がいろいろな太さで表示される。
いんた君 あとは、たてとよこに線を引っぱるだけだね。
ねっと先生 線というより、枠だね。よこ方向の枠は <TD> と </TD> で、たて方向は <TR> と </TR> で区切るんだ。
いんた君 先生、やってみて。
ねっと先生 たとえば
<TABLE BORDER=5>
<TR>
<TD> </TD> <TD> Ａ<TD>Ｂ</TD></TR>
<TR>
<TD> １</TD> <TD> Ａ１<TD>Ｂ１</TD></TR>
<TR>
<TD> ２</TD> <TD> Ａ２<TD>Ｂ２</TD></TR>
</TABLE>
というＨＴＭＬテキストを表示すると
| Ａ | Ｂ | |
| １ | Ａ１ | Ｂ１ |
| ２ | Ａ２ | Ｂ２ |
という具合だ。 いんた君 でも、<TR> とか<TD> とか、たくさん出てきて、まちがえちゃいそうだ。
ねっと先生 そう。じっさいにつくるのは、たいへんなんだ。ところで、こんなの、見たことある？
いんた君 これ、高校野球の組み合わせでしょ？
ねっと先生 大当たり。朝日新聞の「 asahi.com 」というインターネット・サービスの中から、ちょっと借りてきたんだ。これ、実は、gif とテーブルを組み合わせてつくってある。ちょうど、きょう勉強したタグだよ。
いんた君 すごい。でも、ＨＴＭＬ見ても、さっぱりわかんないや。
ねっと先生 テーブルも絵や写真と同じで、あまり大きくすると、なかなか画面に表示されなくてイライラする。注意したほうがいいよ。
いんた君 ＨＴＭＬって、思いどおりにいかないんだね。
