画像

東京女子大学のトップページ   情報処理センターのページ   東京女子大学の Gmail のページ   東京女子大学の図書館のページ   浅川のホームページ   この授業のホームページへ

html 入門   HTMLの基本となる考え方   タイトル   段落   見出し   list の書き方   表の書き方   リンクの張り方   画像の表示   特殊文字   コメント   スタイルの指定

10. 画像

指定した位置に画像を表示するのは、img 要素(IMaGe)を用い、 src 属性(SouRCe)で画像ファイルのファイル名を指定し、 画像が表示できないブラウザで閲覧する人や、目の不自由な人のために alt 属性(ALTernative)で説明をつける。 標準的なブラウザでは、マウスカーソルを画像の上に置くと、altで 示した文字列が表示される。

画像の大きさを指定したいときは, width属性で横幅をピクセル(pixel=画像上の点)単位で指定し, height 属性で高さをピクセル単位で指定する。 (ディスプレ全体で幅1024、高さ768などが多い)

表示したい画像 imgTop01A.jpg を index.html と同じフォルダにおいてあるとき、

  <img src="./imgTop01A.jpg" alt="東京女子大学トップページ画像" />

とすると
東京女子大学トップページ画像
となりる。img タグは単独タグであるため閉じる時には > ではなく /> としなければならない。
画像の大きさを

  <img src="./imgTop01A.jpg" alt="東京女子大学トップページ画像" width="270" height="60" />

と指定したとき、
東京女子大学トップページ画像
となる。

<img src"" の引数には URL も書くことができる。たとえば,

 <img src="http://www.cis.twcu.ac.jp/~asakawa/images2004/myface2004.jpg" alt="My Portrait" />

とすれば,

My Portrait

となる。

リンクと画像を組み合わせれば

<a href="http://www.twcu.ac.jp"><img src="./imgTop01A.jpg" alt="東京女子大学のトップページへ" width="270" height="60" /></a>

とすることにより,
東女のトップページは次の画像をクリックしてください。 東京女子大学のトップページへ
という画像によるリンクを作ることができる。