Lesson1-3:リンクと画像

Lesson1-3 Webページにリンクや画像を挿入しよう

1.ハイパーリンク

リンクの基本タグ:<a>

href属性:リンク先のURLを指定。

例:<a href="https://example.com">Exampleサイト</a>

1-1.内部リンク

相対リンク:サイト内のファイルに対するパスを記述。

例:<a href="/about.html">相対リンク</a>

1-2.外部リング

絶対リンク:完全なURLを記述。

例:<a href="https://example.com/page">絶対リンク</a>

2.アンカーリンク

id属性:リンクの識別用。

例:<h2 id="section1">。

リンク元でidを参照:<a href="#section1">アンカーリンク</a>。

3.ダウンロードリンク

download属性:ファイルを直接ダウンロード可能。

例:<a href="file.pdf" download>ファイルをダウンロード</a>

4.画像の表示とサイズ指定

画像の表示タグ:<img>

例:<img src="image.jpg" alt="説明文">

src属性:画像のファイルパスを指定。

alt属性:画像の代替テキスト(アクセシビリティ向上)。

例:<img src="example.jpg" alt="サンプル画像">

Lesson1-3 Webページにリンクや画像を挿入しよう 存在しない画像

width属性:画像の横幅を指定。

height属性:画像の高さを指定。

例:(img src="example.jpg" alt="サンプル画像" width="300" height="200")

Lesson1-3 Webページにリンクや画像を挿入しよう Lesson1-3 Webページにリンクや画像を挿入しよう Lesson1-3 Webページにリンクや画像を挿入しよう

5.注意点

画像のalt属性は必ず設定し、SEOやアクセシビリティを考慮。

相対リンクを使用する際は、ファイルの階層構造に注意。

画像のサイズを適切に設定し、ページの表示速度を最適化。

トップページへ戻る