HTMLをHTMLとして成り立たせているタグであるリンクタグについて実践します。
この記事で紹介するタグ：a
リンクタグのサンプル
表示イメージ
ファイル名：html03.html
<!DOCTYPE html>
<html lang="ja">
<head>
<title>HTMLの基本タグ3</title>
<meta charset="utf-8">
</head>
<body>
<h1>HTMLの基本タグ3</h1>
<h2>リンク集</h2>
<p><a href="https://www.amazon.co.jp/">Amazonへ</a></p>
<p><a href="https://www.youtube.com/" target="_blank">YouTubeへ</a></p>
</body>
</html>
解説
上記サンプルでは、Amazonへのリンクをクリックするとhrefで指定されたURLページへ遷移します。YouTubeへをクリックすると別タブが開いてhrefで指定したURLページに遷移します。
aタグの使い方
基本的な使い方
<a href="リンク先URL">リンク文字列</a>
aタグには終了タグがあります。<a>～</a>でくくられた文字列がサイト上に表示される文字列となり、その文字列をクリックするとhrefで指定したリンク先URLにページ遷移します。ちなみに遷移（せんい）とは、ページ間の移動を意味します。
使用例
<a href="https://www.amazon.co.jp/">Amazonへ</a>
表示イメージ
targetを使ったターゲット属性の指定
リンクタグにはターゲット属性といって、aタグの属性にtargetを指定するとクリックした際、ページ遷移の方法を指定できます。
一般に外部サイトにページ遷移する際によく利用されるのが、
target="_blank"
です。
使用例）
<a href="https://www.youtube.com/" target="_blank">YouTubeへ</a>
などとすると、YouTubeへをクリックした際、別のタブが開いてYouTubeの画面が表示されます。
リンクタグの注意点
aタグ自体は文字列と同じ扱いなので、pタグなどのブロックレベル要素でくくる必要があります。
<p><a href="https://www.amazon.co.jp/">Amazonへ</a></p>
aタグは、リストタグと組み合わせて用いられることも多いです。
リストタグの要素をリンクにした例
<ol>
<li><a href="https://www.amazon.co.jp/">Amazonへ</a></li>
<li><a href="https://www.youtube.com/">YouTubeへ</a></li>
</ol>
表示イメージ
HTMLの根本は、このリンクタグ（aタグ）だと思います。
HTMLのHTの部分（Hyper Textの部分）を体現しているタグが、aタグだと思います。
aタグがあってこそのHTMLと言っては大げさでしょうか？
課題
１
以下のイメージのような文章の途中にリンクする文字列を作ってみよう。
ファイル名：tenki.html
表示イメージ
リンクタグへの設定情報は以下の通り。
| リンク文字列 | リンク先URL |
|---|---|
| こちら | https://weather.yahoo.co.jp/weather/ |
２
番号付きリスト（olタグ）とリンクタグ（aタグ）を使って以下のようなリンクサイトを作成してみよう。
ファイル名：osusume.html
【条件】各リンクは、別タブ（ウインドウ）で開くものとする
表示イメージ
リンク文字列とURLは以下の通り。（もちろんデータは、皆さんのおすすめサイトベスト３でもOKです）
| リンク文字列 | リンク先URL |
|---|---|
| GIGAZINE | https://gigazine.net/ |
| Windy | https://www.windy.com/ |
| はてなブックマーク | https://b.hatena.ne.jp/ |
コメント