7.画像を貼り付ける【壁紙を貼りつける】これまでは、ホームページにタグだけを使って文字を飾りレイアウトを整える 方法を学んできましたが、これからは画像(イメージ情報)を取りこむことで、タグ だけでは出来なかった装飾を行なうこと写真を貼りつけることを検討しましょう。 <BODY>タグのbgcoloor="#RRBBGG"による背景色の指定では、単一の色しか表現 出来ませんでしたがbackgroudという属性(アトリビュート) を追加することで、指定した画像―例えば壁紙など―を画面の背景として用いることが出来ます。 いま市販のホームページ素材集から、次ぎのような壁紙を取りこんでimageと 云う名を付けた新しいフォルダに、kabegami.gifと云う名前をつけて保存します。
新しいフォルダ―――――――――表紙(タイトル)
|
|
―――太極拳コーナ(既設、1頁)
|
|
|――俳句コーナ(未設、1頁)
|
|
――imageフォルダ――kabegami.gif
<BODY>タグのbackgroudを利用
して、先に仕上げた『太極拳のホームページ』に、この壁紙を貼ることにします。
<BODY>タグ及びその属性の記述は次ぎのとおりです。
<BODY background="image/kabegami.gif" text="#0000cd">
(注)"image/kabegami.gif"は、imageフォルダにあるkabegami.gif
ファイルを指定すると云うこと、即ちフォルダとファイルの親子関係を表しています。(注).gifと.jpgについて ホームページで取り扱うことの出来る画像のファイル形式は.gif形式と .jpg形式です。 一般に.gif形式はイラスト、ロゴ、ボタンなどの保存に、.jpg形式は写真の保存に用いられています。 上のように<BODY>タグ記述すると、ブラウザには次ぎのよう指定した画像(壁紙)をタイル状に 並べて表示することが出来ます。
【写真を貼りつける】 既存の写真をスキャナから呼び込むか、またはデジカメから読みこんでimageフォルダに、 例えばsyasin.jpgと云う名前をつけて保存します。 この写真をブラウザに表示するには、<IMG> (IMaGe)タグを使用します。 <IMG>タグはsrc(source)で指定した画像を、指示した width(幅)、height(高さ)で表示します。 また画像が表示されるまでの時間、あるいは画像を表示できない環境ではalt (ALTernate text)で指示した代替の文字を表示させます。 上のように既に壁紙を貼りつけた『太極拳のホームページ』に、太極拳大会の写真をを貼ることに します。
(注)画像サイズが分からなければ省略しても構いません。 但し、ブラウザが 画像のサイズを計算してから表示するので時間がかかると云われています。サイズ(widthおよびheight)が分かって いれば必ず記述しましょう。 <IMG>タグを、<P>と</P>ではさんで段落としているのは、align="center"の指示で画像を画面の中央に 揃えるためです。
|