次は、他のページへ移動するリンクを作ってみましょう!
よく見かける「○○はこちら」や「○○さんのサイト(ブログ)へ」みたいな、アレです。
ちなみに、リンクを設定することを「リンクを貼る」と言ったりもします。
リンクを設定するには
リンクを設定するには<a>タグを使います。
[入力例]<a href="">と</a>の間にテキストを入れ、””の間にURLを入れることによりリンクすることができます。
試しに私が管理している「さきちん絵はがき」へ、リンクを貼ってみましょう!
</body>の上に、以下のコードを追加します。
<h2>他ページへのリンク</h2>
<p>下の文字をクリックすると、さきちん絵はがきへ移動します。</p>
<a href="http://www.tadahagaki.com">さきちん絵はがきへ</a>
<html>
<head>
<meta charset="utf-8">
<title>ホームページの勉強中</title>
</head>
<body>
<h1>簡単なページの制作</h1>
<ol>
<li>文字の入力について</li>
<li>他ページへのリンク</li>
<li>画像の挿入・表示</li>
</ol>
<h2>文字の入力について</h2>
<p>HTMLの文字の入力</p>
<p>タグを使わずに文字を入力することも可能ですが、文法的には間違いです。<br>文字を入力する際は、必ず適切なタグで囲むよう気をつけましょう。</p>
<h2>他ページへのリンク</h2>
<p>下の文字をクリックすると、さきちん絵はがきへ移動します。</p>
<a href="http://www.tadahagaki.com">さきちん絵はがきへ</a>
</body>
</html>
入力が完了したら、保存してブラウザで確認してみましょう。
以下のように表示されるとOKです。
※試しにリンク先をクリックしてみましょう!さきちん絵はがきへ移動すると思います。
問題なく移動できたでしょうか?
基本的には、このような方法でリンクを作成します。
別ウィンドウや別タブでリンクを開きたい場合
ちなみに、先ほどは同じウィンドウでリンクが行われましたが、別ウィンドウで開いてリンクしたい!なんて時もあると思います。
そんなときは、URLの後ろにtarget="_blank"を付け加えます。
この状態でクリックすると、別ウィンドウでリンク先ページが開きます。
自分のホームぺージ内へのリンクの場合は同じウィンドウで。
他の人のホームページや異なるコンテンツ(ブログ)などの場合は違うウィンドウで開く場合が多いです。
この辺りは、使い勝手やリンク先への配慮を考えて使い分けるといいと思います。
覚えておきたいポイント
ページの移動以外にもOK
<a>タグはページの移動だけではなく、ファイルであれば全てリンクすることができます。例えばzipを指定した場合はダウンロードが開始されます。
リンクに関するマナー
他の方のホームページへリンクする場合には、なるべく許可を得ることが望ましいです。(無断リンクを嫌う人もいますので…)。
リンクフリーなどの記載がある場合は許可を得る必要はありません。
もちろん、このさきちんWEBもさきちん絵葉書も全てリンクフリーです。じゃんじゃんリンクOKです!