画像を表示する
画像を貼り付ける
まず、画像ファイルについて説明します。Windowsではよく拡張子が.bmpであるビットマップファイルが扱われますが、ビットマップファイルは画像の容量がでかすぎてホームページで公開するには適していません。そこで、もっと画像ファイルを圧縮して容量を小さくします。.jpg.jpegで終わるJPEGファイル、.gifで終わるGIFファイルなどがよくホームページには用いられます。
さて、まずこの画像ファイルを保存するディレクトリを作ります。.public_htmlの中にpictureというディレクトリ(名前は自由)を作ってください。画像ファイルは全てこの中に置きます。これは義務ではないのですが、HTML文書と画像ファイルを分離すると扱いやすくなるのでこのように専用のディレクトリを作ることを薦めます。画像ファイルに限らず、CGIやCSSなども専用のディレクトリを用意することで扱いやすくなります。
次に、表示する画像を用意しましょう。今回は絵を描く時間はないのでWEBページから画像をダウンロードしてそれを使うことにします。以下の画像を右クリックして保存するを選び、.public_html/pictureの中にダウンロードしてください。
ちなみにこの画像は情報基盤センターのトップページにあるのと同じ。クラスによっては情報処理の授業でこの画像を自分のページに貼らされたりします。同じクラスのホームページすべてに同じ画像が貼られてるのはなんか気持ち悪いです。
次にこの画像ファイルを貼り付けてみましょう。画像を貼り付けるタグは<img>タグです。src属性でファイル名を指定することで画像を貼り付けることができます。
表示されましたか？少し大きすぎると感じるかもしれません。そのようなときはサイズを自由に変更して表示することができます。width属性で横幅、height属性で縦幅を設定してください。
これでちょうど良い大きさになったと思います。
画像にリンクを貼る
今までの知識を応用すれば、<img>タグを<a>タグではさめばよいことはわかると思います。ではその通りやってみましょう。
確かにリンクは貼れましたが、このままだと青い枠が表示されて美しくありません。これを消すにはborder=0とすれば枠が表示されなくなります。
<img>タグのその他の属性
<img>タグには他にも様々な属性があります。
もし、指定した画像ファイルが存在しなかった場合に表示する文章を指定するにはalt属性を用いてください。
マウスカーソルを画像の上に重ねたときに表示する文章を指定するにはtitle属性を用いてください。
文章の中に画像を埋め込むとき、画像を左に表示するか、右に表示するかはalign属性を使って指定してください。
他にも様々な属性がありますが、これらが特によく用いられます。
回りこみを止める時は上のように<br clear=all>とすれば次の文は画像の下に表示されます。
因みに、回り込みのテキストの縦の位置も変えることができます。align属性にtop,middle,bottomのいずれかを指定することで変えることができます。
align属性にtop,middle,bottomのいずれかを指定した場合はテキストが必ず右に回りこみます。もし、左の中央付近に文章を回りこませたいと思ったら表を用いれば簡単にできますのでそれまでお待ちください。
画像を壁紙にする
画像は壁紙に指定することもできます。<body>タグのbackground属性に画像ファイルを指定してください。
もし、指定した画像ファイルが存在しなかった場合は、bgcolorで指定した背景色が表示されます。