HTML イメージ
HTMLを使用すると、ドキュメントに画像を表示できます。
例
- 画像を挿入する
- この例では、ウェブページに画像を表示する方法を示します。
- 異なる場所から画像を挿入する
- この例では、他のフォルダーやサーバーの画像をウェブページに表示する方法を示します。
画像タグ（<img>）とソース属性（Src）
HTMLでは、画像は<img>タグで定義されます。
<img>は空タグであり、これは属性のみを含み、閉じタグがないことを意味します。
ページ上に画像を表示するには、ソース属性（src）を使用する必要があります。srcは「source」を意味します。ソース属性の値は、画像のURLアドレスです。
画像を定義する语法は：
<img src="url" />
URLは、画像が保存されている場所を指します。例えば、"boat.gif"という名前の画像がwww.codew3c.comのimagesディレクトリに配置されている場合、そのURLはhttp://www.codew3c.com/images/boat.gifです。
ブラウザは、ドキュメント内の画像タグが表示される場所に画像を表示します。画像タグを2つの段落の間に配置すると、ブラウザはまず最初の段落を表示し、次に画像を表示し、最後に2つ目の段落を表示します。
テキスト属性（Alt）を置き換える
alt属性は、画像に代替のテキストを定義するために使用されます。代替テキストの値はユーザーが定義します。
<img src="boat.gif" alt="Big Boat">
ブラウザが画像を読み込めない場合、代替テキスト属性は読者に失われた情報を伝えます。その場合、ブラウザは代替テキストを表示するのではなく、画像を表示します。ページ上のすべての画像に代替テキスト属性を追加することは良い習慣です。これにより、情報の表示がより良いになり、テキストのみのブラウザを使用する人々にとって非常に有益です。
基本的な注意事項 - 有益なヒント：
もし某个HTMLファイルが10つの画像を含んでいる場合、このページを正しく表示するために11つのファイルをロードする必要があります。画像のロードには時間がかかるため、私たちの提案は：画像を慎重に使用することです。
さらに多くの例
- 背景画像
- この例では、HTMLページに背景画像を追加する方法を示します。
- 画像を配置する
- この例では、文字の中で画像を配置する方法を示します。
- 浮遊画像
- この例では、画像を段落の左側や右側に浮遊させる方法を示します。
- 画像サイズを調整する
- この例では、画像を異なるサイズに調整する方法を示します。
- 画像に代替テキストを表示する
- この例では、画像に代替テキストを表示する方法を示します。ブラウザが画像を読み込めない場合、代替テキスト属性は読者に失われた情報を伝えます。ページ上のすべての画像に代替テキスト属性を追加することは良い習慣です。
- 画像リンクを作成する
- この例では、画像をリンクとして使用する方法を示します。
- 画像マップを作成する
- この例では、クリック可能なエリアを持つ画像マップを作成する方法を示します。各エリアはリンクです。
- 画像を画像マップに変換する
- この例では、普通の画像を画像マップに設定する方法を示します。
