目次

項番	ページ内リンク	説明
1	1.はじめに
2	2.imgタグについて
3	3.iframeタグについて
4	4.さいごに

更新履歴
2024/07/19　@junerさんから qiitaの見易さ・記事コード修正案を頂きました。☺
記事コードが余りわからなかったので、非常に助かりました！☺

※勝手に載せてるので、怒られたら消します。
2024/07/19　初稿

1-はじめに

html における画像を挿入する方法
・imgタグ
・iframeタグ

の解説記事

※「絶対パス」もしくは「相対パス」の記事は後日書きます。

「絶対パス」
『https://www.~~~~~~.com/img/sample.jpg』
インターネットにある『https://www.~~~~~~.com/』の『img』の『sample.jpg』を参照するよ☺

「相対パス」
『img/sample.jpg"』
同じファイル内の『img』の『sample.jpg』を参照するよ☺

2-imgタグについて

imgタグ

src=画像のurl先
<img src="[ファイル名]">

<img src="[ファイル名]">

alt=画像の名前
<img src="[ファイル名]" alt="ここの写真の名前・ロゴ画像・etc">

<img src="[ファイル名]" alt="ここの写真の名前・ロゴ画像・etc">

title=マウスカーソルがあった時に名前が出るよ
<img src="[ファイル名]" alt="ここの写真の名前・ロゴ画像・etc" title="マウスカーソルがあった時に名前が出るよ">

<img src="[ファイル名]" alt="ここの写真の名前・ロゴ画像・etc" title="マウスカーソルがあった時に名前が出るよ">

3-iframeタグについて

iframeタグは別のHTMLを読み込む際に使われるタグで、主な用途としては、別のWebサイトやSNSに公開されている画像や動画を転載する場合に使用します。
(例：youtube/google map とか)


<iframe src="https://www.=====.com"></iframe>

<!-- https://www.=====.comの動画をiframeで表示するよ☺ -->
<iframe src="https://www.=====.com"></iframe>

width="幅" %・px とかで指定するよ☺
height="高さ" %・px とかで指定するよ☺

<iframe src="https://www.=====.com" width="100%" height="500px" frameborder="0"></iframe>

<!-- https://www.=====.comの動画をiframeでwidth="100%" height="500px"表示するよ☺ -->
<iframe src="https://www.=====.com" 
width="100%" height="500px" frameborder="0">
</iframe>

<iframe src="https://redstar-hp.netlify.app/images/logo.jpg" width="300px" height="100%"　frameborder="0"></iframe>

width="300px" 300ピクセル
height="100%" 100%
で表示するよ☺

<iframe src="https://redstar-hp.netlify.app/images/logo.jpg"
width="300px" height="100%" frameborder="0">
</iframe>

4-さいごに

恐らくいっぱい記事があると思いますが書きました。
自分で書いている『htmlのサンプルコード』のurlリンクとして使いたいと思い、執筆しています。
まだ編集中ですが、良かったら見てみて下さい。☺