画像を入れる

HTML文書の中には画像を入れることができます。画像の挿入を表わすタグは IMG です。挿入する画像ファイルを SRC パラメータで示します。例えば、<img src="hehe.gif"> と書くと、

のようになります。なお、</IMG> という終了のタグは必要ありません。また、SRC の引数は HREF と同様に同じディレクトリにある場合にはそのファイル名を、同じサーバにある場合にはそのファイルへのパスを、あるいは URL を記述します。

ALIGN パラメータを使うと、ある程度画像の位置を指定することもできます。

のように行の上の線にそろえたり、 (ここでは <img src="hehe.gif" align="top"> と書いてあります。)

この例のようにコラムの右端に置いたりできます。
(これは <img src="hehe.gif" align="right"> と書きました。)

画像ファイルの作成

HTML文書に入れることのできる画像は、ファイル形式が JPEG または GIF のものだけです。JPEG は写真や3DCG のような色が滑らかに変化するもの、GIFはお絵描きのような色数の少ないものに適しています。

お絵描きで画像を作るには、[スタート]メニューから [プログラム]->[アクセサリ]->[ペイント]を選び、マウスをガチャガチャやって絵を描き、適当な場所(例えば C:\html) に、適当な名前(例えば hehe.bmp) で保存します。
あるいは、エクスプローラで [ファイル]->[新規作成]-> [ビットマップイメージ]を作り、適当な名前をつけてからそのファイルをダブルクリックしてもいいかもしれません。

次に、ビットマップファイルを GIF 形式のファイルに変換します。 98年入学生の大学推奨パソコンの場合には、[スタート]-> [プログラム]->[Addition] に Irafan View というのがあるらしいです。無ければ、WS_FTP で情報科学FTPサーバから iview268.zip を取ってきてください。unzip で解凍できますので、Mikatype をインストールした手順を参考にして、適当な名前のディレクトリにインストールしてください。

I_view32.exe を起動して、さっき作った bmp ファイルを読み取り、 GIF形式で Save しましょう。

前回までに作った first.html の中に

<html>
<head>
<title>My First HTML</title>
</head>
<body>
<h1>初めてのHTML文書</h1>
<h2>情報科学コース１年 誰野誰男</h2>
これは、私の書いた初めてのHTML文書です。
<p>
そして、これが私の似顔絵です。
<p> <img src="hehe.gif">
</body>
</html>

のように書き加えてみましょう。

自分のパソコン上のファイルを開いて、画像が入ることを確かめましょう。

画像ファイル(.gif) をサーバに Binary で転送します。また、書き改めた first.html を ASCII でサーバに転送します。サーバの文書を開いて同じように画像が入っていることを確かめなさい。

デジカメを使って写真を入れたり、プリントされた写真であればスキャナを使ったりということもできますが、この授業では取り扱わないことにします。