1.説明
HTMLのimgタグは、ウェブページ上に画像を表示するために使用されます。以下は、imgタグの基本的な構文です。
<img src="画像のURL" alt="画像の代替テキスト">
src属性は、表示する画像のURLを指定します。URLは、画像が保存されている場所（ローカルファイル、別のウェブサイト、クラウドストレージなど）を示します。例えば、ローカルファイルを参照する場合は、以下のようになります。
<img src="images/myimage.jpg" alt="私の画像">
alt属性は、画像が読み込まれなかった場合や、視覚障がいを持つ人がウェブページを利用する場合に代替となるテキストを提供します。例えば、以下のようになります。
<img src="images/myimage.jpg" alt="私の画像">
imgタグには、さまざまな属性があります。以下は、よく使用されるものです。
width：画像の幅を指定します。単位はピクセルです。
height：画像の高さを指定します。単位はピクセルです。
title：画像にマウスを重ねると表示されるテキストを指定します。
style：画像のスタイルを指定します。CSSのルールと同様に、セミコロンで区切って指定します。
例えば、以下のようになります。
<img src="images/myimage.jpg" alt="私の画像" width="300" height="200" title="美しい風景" style="border: 1px solid black;">
最後に、注意点として、imgタグは単独で使用する必要があります。つまり、開始タグ <img> と終了タグ </img> を使用する必要はありません。
2.実践
lesson2-3.htmlファイルを作成してあげてください。- 次に以下のソースコードをコピーして
lesson2-3.htmlファイルに貼り付けます。
lesson2-3.html
<!DOCTYPE html>
<html>
<body>
<img
src="https://damono.dev/assets/logo/logo.damono999.png"
alt="画像が表示されない場合"
title="画像をホバーすると表示"
width="200"
height="200"
/>
</body>
</html>
- コードを貼り付けたらwindowsの場合
ctrl+s、mac場合cmd+sでコードを保存します。 - ドラッグ&ドロップでファイルをブラウザに渡して画像が表示されれば成功です。
