Webサイトを作ろう！（HTML編）

7. 画像

1. 画像を表示するタグ

校訓「自治創造」「明朗親和」

上の写真を表示させているのは、以下のようなタグです。

<p> <img src="kokun.jpg" alt="校訓「自治創造」「明朗親和」" width="455px" height="341px"> </p>

代替文字は何のために記述するの？

(1)　何らかの理由で画像が表示できない場合、代わりに表示されます。

画像の貼り付け失敗例

(2)　視覚障害者が使う「読み上げソフト」で読み上げられます。

たとえば、「私の学校の校訓はこの写真の通りです」と写真を載せていても、写真が表示されない場合や写真を見ることができない人には情報が伝わりません。画像の情報を伝える代替文字を必ず入れるようにしましょう。

画像のサイズの調べ方

  1. 画像ファイルの入っているフォルダとブラウザのウインドウを開きます。
  2. 画像ファイルをブラウザのウインドウにドラッグ＆ドロップします。
  3. 画像の上で右クリックして、「プロパティ」を表示させます。
  4. 「大きさ」の項目に、幅×高さの順で表示されています。

ブラウザにドラッグ・アンド・ドロップ

プロパティの画面

2. 画像を掲載する際の注意点

1.大きなサイズのファイルを乗せないこと

すべての閲覧者がブロードバンド環境でインターネットを利用しているとは限りません。ファイルサイズはできるだけ小さくしましょう。⇒画像ファイルを縮小する方法

2.肖像権・著作権を侵害しないこと

3. 練習問題4

まず画像を保存します。

  1. 下の写真の上で右クリックして、「名前をつけて画像を保存」を選びましょう。
  2. 保存する場所に[マイドキュメント]＞[web]のフォルダを選びます。
  3. ファイル名が「taimen」、ファイルの種類が「JPG」になっていることを確認し、「OK」ボタンをクリックします。

　

  1. 「練習問題4」をクリックしてください。
  2. ブラウザのメニューバーの[表示]＞[ソース]をクリックしてください。
  3. メモ帳のメニューバーの[ファイル]＞[名前をつけて保存]をクリックしてください。
  4. マイドキュメントの「web」フォルダに、ファイル名はそのまま（「practice04.html」）で保存してください。
  5. <body>と</body>のタグの間に、「taimen.jpg」を表示させるタグを正しく記述してください（代替文字は自分で考えて、画像サイズは自分で調べること）。
  6. [マイドキュメント]＞「web]＞[practice04.html]のアイコンをダブルクリックして、画像が表示されるか確認してみましょう。

時間が余った人は

<img>タグを<p></p>タグで囲まなくてはならない理由を読んでみましょう。→ブロックレベル要素とインライン要素（「The Web KANZAKI」より）

←2-6 表　　Topページ　　2-8 リンク→