前回は 画像の配置 について紹介しました。
今回は リンクの張り方 についてです。
それでは見ていきましょう
リンクの張り方
リンクというと色々あります。
自分のホームページ内に張るリンク（内部リンク）。
自分のホームページ外に張るリンク（外部リンク）。
どちらも a タグを使います。
a は anchor（アンカー）の略です。
指定した場所同士をつなげて、情報同士を結びつけるイメージですね。
ちなみにリンクのことをハイパーリンクとも言います。
href属性
この href属性 を使って、リンク先を指定します。
リンクの指定方法は実は2種類あります。
相対パスと絶対パス
img タグのときには話をしなかったのですが。
パスには相対パスと絶対パスというものがあります。
- 相対パス → そのファイルから見て目的のファイルがどこにあるか指定する方法。
- 絶対パス → フルパスとも言います。URLを指定する方法。
外部リンクは絶対パスで指定します。
内部リンクは好みがあるかもしれませんが、静的なサイト（今回練習で作成しているようなページ）で階層がシンプルなものは相対パスでも良いと思います。
記述も相対パスで書いた方が短いです。
リンクをクリックしたときにメールソフトを起動させる
href=”mailto:メールアドレス（問い合わせ用など）” というふうに指定するとメールソフトが起動します。
メールソフトは相手の環境に依存します。
target属性
色々、値はあるのですが。
よく使うもの一つだけ紹介します。
target=”_blank” です。
これを指定すれば、リンク先のページを別ウィンドウで開くことができます。
基本的に外部リンクの場合は、この target=”_blank” を指定します。
こうすることで違うサイトへ移動したということをわかりやすくするためです。
コーディングしてみると
今までやったことを踏まえて、コーディングしてみます。
前回作成した index.html が下記の通りです。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>ぱそたのHTML講座</title> </head> <body> <img src="img/pasota.gif" alt="ぱそた"> <h1>プロフィール</h1> <p>名前：ぱそた</p> </body> </html>
今回は、これと別で link.html という HTMLファイル を作成します。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>リンクのテストページ</title> </head> <body> <img src="img/pasota.gif" alt="ぱそた"> <h1>リンクのテストページ</h1> <h2>内部リンク</h2> <p><a href="index.html">ぱそたのHTML講座</a></p> <h2>外部リンク</h2> <p><a href="https://www.yahoo.co.jp/" target="_blank">Yahoo!JAPAN ホームページ</a></p> <h2>お問い合わせ</h2> <p><a href="mailto:hunyahunya@hunyahunya">お問い合わせの方はクリック（メールアドレスはデタラメです）</a></p> </body> </html>
link.html をブラウザ（Edge）で表示するとこんな感じです。
あとはリンクをクリックして指定したページにジャンプするかテストしてみましょう。
最後に
いかがでしょうか。
ここでは紹介しませんでしたが。
a タグを使えば、ページ内の指定した箇所へジャンプするといったこともできます。
次回は、リスト（箇条書き）について紹介します。
今作成しているページはデザインしていないので、物足りないと感じているかもしれませんが。
デザインに関しては CSS を学習すれば、できるようになります。
今やっていることを確実に身につけることは検索エンジンなどにホームページを見てもらうための重要な知識なので。
基本ですが、がんばっていきましょう。
