【Part2】Webページに画像を入れたり、リンクを貼り付けたりする

Webページに画像やリンクを追加することは、情報を視覚的に伝えるための重要な方法です。これにより、ユーザーの関心を引き、コンテンツをより魅力的で理解しやすくすることができます。

画像を入れる方法

画像をWebページに挿入するには、<img>タグを使用します。このタグにはいくつかの属性があり、画像のURL、サイズ、説明などを指定できます。例えば、以下のコードは、指定されたURLから画像を読み込み、それをWebページに表示します。

<img src="画像のURL" alt="画像の説明" width="画像の幅" height="画像の高さ">

src属性には画像のURLを、alt属性には画像が表示されない場合に代わりに表示されるテキストを、widthとheight属性には画像のサイズをピクセル単位で指定します。

画像のURLは絶対URLのほかに、相対URLも利用することができます。例えば、次のようなフォルダ・ファイル構成になっている場合を考えます。

Web
├ index.html
└ images
　└photo1.png

このフォルダ構成の場合、index.htmlにphoto1.pngを読み込む<img>タグは、次のようになります。

<img src="images/photo.png">

Webページにリンクを追加するには、<a>タグを使用します。このタグは、ユーザーがクリックすると指定されたURLにナビゲートするハイパーリンクを作成します。例えば、以下のコードは、テキスト「ここをクリック」にリンクを付け、ユーザーがクリックすると指定されたURLに移動します。

<a href="リンク先のURL">ここをクリック</a>

href属性にはリンク先のURLを指定します。また、リンクのテキストはユーザーにとってわかりやすく、関連性のあるものにすることが重要です。

次の記事では、表とリストをWebページに追加してみましょう！