1.画像タグ:imgの使い方
<img>タグは画像を示す要素です。このタグを使うとブラウザに画像を表示させることができます。
<img>タグを利用するには属性をいくつか指定する必要があります。
src属性
表示したい画像の場所を指定します。以下のように記述します。
<img src="dog.jpg" />
この際、dog.jpgは<img>タグを記述するファイルと同じ場所にある必要があります。
違う場所にある場合は以下のようにディレクトリを指定します。
サンプル:
<img src="images/dog.jpg" />
alt属性
alt属性は画像の代替となるテキスト情報です。画像が読み込まれる間に表示されたり、音声読み上げブラウザがこのテキストを読み上げてくれます。
サンプル:
<img src="images/dog.jpg" alt="犬がお座りしている写真" />
width、height属性
画像の高さと横幅を指定します。widthは横幅、heightは高さです。
サンプル:
<img src="images/dog.jpg" width="600" height="315" />
<img>タグの注意点
<img>タグは特殊なタグで通常のタグは開始タグ、終了タグが存在しますが、<img>タグはこれだけで完結します。なので、<img>タグの最後に/をいれてこのタグだけで完結するということを記述します。「/>」で閉じタグを表すことができます。
2.画像タグをindex.htmlに記述する
dog.jpgをこちらからダウンロードし、html-lessonフォルダに保存します。
index.htmlの<body>〜</body>内に以下の内容を記述します(前のレッスンで書いたものは消して構いません)
<img src="dog.jpg" alt="犬がお座りしている写真" height="316" width="300" />
上書き保存してブラウザを更新すると、以下のように表示されます。