ＨＴＭＬでの画像の扱い方
HTMLでは、画像は<img>タグで扱います。
HTMLで使用できる画像は、gif、jpg、png、の３種類です。
画像はできる限り、ファイルサイズの小さなものを使用し、意味のない画像を使用しないように心がけましょう。
画像の表現
画像を表示する場合は、下記の様に、画像の名前と保存場所、画像のサイズ、幅、高さ、 画像を表示できない場合に表示する代替文字、を必ず書きましょう。
<img src="images/gif/back01.gif" width="150" height="60" alt="背景画像">
<img src="images/jpg/keybord.jpg" width="150" height="60" alt="キーボード">
<img src="images/png/logo_s.png" width="150" height="60" alt="nandenロゴ">
では実際に表示して見ましょう。
簡単に表示できましたか？・・・
画像は、無料素材サイトなどでも簡単に手に入りますが、出来る限りご自身で製作しオリジナリティのあるものを
使用しましょう。
そうすれば、閲覧者にも製作者の意思が伝わると思います。
さらにユーザビリティを考え、画像の上にマウスを乗せた場合に、画像の説明が出るともっといいですね。
その場合は、<title>を加えます。
<img src="images/png/logo_s.png" width="150" height="60" title="nanden.netのロゴです。" alt="nandenロゴ">
実際に表示してみると下記の様になります。画像にマウスを乗せてご確認ください。
<alt>を書いていれば同じようになっているのでは？・・・と思われる方も、おられるでしょう。
この<alt>と<title>の違いはいったいなんなんでしょう・・・
<alt>は、前でも説明していますが、代替文字：つまり画像が表示されない場合、その代替となるものです。
<title>には、この代替の機能がありません。
また、オーサリングツールを使用して製作したページには、<border>という属性が、書き込まれますが、
<img>要素内に書くことはありません。