目次に戻る

インラインイメージ

ここでは文書中にイメージを埋め込む方法を説明します。

イメージファイルの作成

WWWのブラウザが標準で使える画像ファイルの形式はGIFフォーマットか JPEGフォーマットです。それでインラインイメージを用いるには、 まずこれらのフォーマットのイメージファイルを用意しなければなりません。

Windows標準の画像ファイル形式である BMP 形式のファイルは直接使えないので、 これらの形式の絵を Web ページで利用するには、ファイルの形式を GIFかJPEG形式に変換する必要があります。

様々なツールがありますが、使い慣れたものをお使いください。

注意：他の人が作成した画像をコピーして そのまま使うと著作権の問題が発生する場合があるので 注意する必要があります

イメージの張り付け

イメージを文書中に張り付けるにはIMGというタグを使います。 このタグの書き方は以下の通りです。

<IMG SRC="xxxxx.gif">

このxxxxx.gifの所に張り付けたいイメージのGIFファイルを指定します。 それでは実際にイメージを張り付ける例を挙げます。

<IMG SRC="face.gif">私の顔

ここではface.gifというファイルを張り付けるように指示しています。 これにより、以下のような出力を得ることができます。

私の顔

背景色

背景色の指定には以下のタグを用います。

<BODY BGCOLOR="#rrggbb">

このタグは rrggbb の部分に値を入れて色を指定します。 rrの部分には赤(red)の強さ、ggの部分は緑(green)の強さ、 bbの部分には青(blue)の強さを16進数で指定します。 以下に主な色の値を示します。

黒#000000
白#ffffff
赤#ff0000
緑#00ff00
青#0000ff

背景へのイメージの貼り付け

HTMLでは背景に色を指定するだけでなく、イメージを貼り付ける ことができます。これを行うには以下のように記述します。

<BODY BACKGROUND="xxxxx.gif">

リンクの張り方

リンクとはある特定のURLや文書の特定の位置へのポインタです。 このリンクのボタンを押すとそれが指示する内容を表示します。 ここではこのリンクの作り方を説明します。

他のURLへのリンク

ネットサーフィンをする時に、良く利用するURLへの リンクを用意しておくととても便利です。 ここではそのような他のURLへのリンクの張りかたを説明します。 それでは自分のページから「北九州テクノセンターホームページ」 (URL http://www.kitakyu-techno-ctr.co.jp/) に行くためのリンクを張ってみましょう。 これには次のように記述します。

<A HREF="http://www.kitakyu-techno-ctr.co.jp/~fujiki/"> 藤木 健士ののホームページへ</A>

このように記述すると、

藤木 健士のホームページへ

のように、マウスで押せる部分が現れます。 ここをマウスでクリックすると「北九州市のホームページ」 へ移動することができるようになります。 接続先のURLを変えたい場合にはHREF=に続く""に囲まれた部分を変更してください。

またイメージを用いてそれをリンクのボタンにすることもできます。 それには以下のように書きます。

<A HREF="http://www.city.kitakyushu.jp/">
<IMG SRC="kitakyu.gif">北九州市のホームへ
</A>

これをブラウザで表示すると、次のようになります。

北九州市のホームへ

このように<A>から</A>までの部分全体がボタンになって、 イメージの部分をクリックしてもリンク先に移動できるようになります。