画像表示とリンクのマークアップ

画像を挿入する

<img src="画像の場所・ファイル名" alt="画像の説明">

<!--src src属性/参照-->
<!--"画像の場所・ファイル名"　src属性の値-->

<!--alt alt属性/代替テキスト-->
<!--"画像の説明"　alt属性の値-->

パスの記述例

<img src="images/ring.jpg">

リンクの設定

<a href="リンク先のパスやファイル名・URL" target="_blank">テキストや画像<a/>
<!--href属性/リンクの記述-->
<!--target属性/_blankにより新しいタブで表示-->

画像にリンクを設定する

<a href="URL"><img src="画像の場所・ファイル名" alt="代替テキスト"></a>

メールアドレス・電話番号へのリンク

<a href="mailto:hoge@sample.com">テキストや画像</a>
<a href="tel:03012345678">テキストや画像</a>

相対パスの書き方

<a href="ファイル名・html">テキストや画像</a>
<img src="ファイル名.jpg">

<!--同じディレクトリにある場合-->
<a href="../ファイル名.html">テキストや画像</a>
<img src="../ファイル名.jpg">
<!--１つ上のディレクトリにある場合-->
<a href="フォルダ名/ファイル名・html">テキストや画像</a>
<img src="フォルダ名/ファイル名・jpg">
<!--同じディレクトリ内の別のフォルダの中にあるファイルの場合-->

絶対パスの書き方

<a href="https://xxxxxxx">テキストや画像</a>
<img src="https://xxxxxxx/ファイル名・jpg">

ページ内の特定の場所へのリンク指定

<!--ページ内の特定箇所の目印の書き方-->
<h2 id="id名">テキスト</h2>
<!--ページ内の特定箇所へのリンクの書き方-->
<!--同じページ内-->
<a href="#id">テキストや画像</a>
<!--別のページ-->
<a href="ファイルまでのパス#id">テキストや画像</a>