このチュートリアルでは、Webページにハイパーリンクを追加する手順について説明します。

ハイパーリンクは、アンカーリンク要素<a>を使用してテキストまたは画像に追加できます。 <a>タグには、宛先リンクを指定するために使用される属性hrefが必要です。 <a>要素は次のように使用されます。

<a href="www.DestinationLink.com">The text you want to link</a>

以下のコードスニペットを「index.html」ファイルに追加し、サンプルの強調表示されたテキストをhttps://digitalocean.com/communityなどの実際のリンクに変更してみてください。

<a href="https://www.digitalocean.com/community">The text you want to link</a>

(チュートリアルシリーズに従わなかった場合は、チュートリアルHTMLプロジェクトのセットアップindex.htmlファイルのセットアップ手順を確認できます。 ファイルを保存してブラウザにロードします。

次のような出力が表示されます。

HTML Link

次のような要素で画像要素をラップすることで、画像をリンクすることもできます。

<a href="https://www.digitalocean.com/community">The text you want to link
<img src="https://html.sammy-codes.com/images/small-profile.jpeg">
</a>

ブラウザでコードスニペットをテストして、機能することを確認してください。 これで、Webページのテキストや画像にハイパーリンクを追加する方法を理解する必要があります。