HTML基礎編

リンク

リンクの設定

　ウェブで最も大切なものと言えばリンクです。そもそもリンクはハイパーリンクの略。ハイパーリンクで関連づけられたテキストがハイパーテキストなんです。「HTML」の「H」はハイパーテキストの「H」。なので、リンクはHTMLの最も大事な機能ということです。
　リンクを張るには<a>タグを使います。アンカータグ。Anchorは、船のいかり(錨)の意味ですが、まさに他のページにジャンプする出発点で「いかりを上げろー」ということで、アンカーと覚えましょう。

SPONSORED LINK

　その前にまず、新たな作業ファイルを準備します。webkisoフォルダにあるひな型ファイル「hina.html」を選択し、[Ctrl]+[c]でコピー、そのまま[Ctrl]+[v]で貼り付けます。何やらさっぱりな人は「準備編・ひな型ファイル」を見ましょう。
　ひな型ファイルをコピーしてできたファイル「hina - コピー.html」の名前を、練習用ファイルの3つ目という意味で「ren03.html」に変更。変更したら、テキストエディタとブラウザを起動し、画面の左と右にテキストエディタとブラウザを配置、作った「ren03.html」をテキストエディタとブラウザにドラッグ＆ドロップ。ren03.htmlの中身と表示結果を確認できるようにします。
　準備が整ったところで、リンクの張り方を見ていきましょう。
　テキストエディタで、ren03.htmlに、次のように書き込みます。書き込む場所は<body>～</body>の間、下のテキストエディタのイメージで言うと8～11行目です。それから9行目にあるファイル名は「ren02.html」ですのでお間違いなく。

　　

　追加した部分だけ抜き出すと以下の通り。

　　

　簡単に説明しておくと、リンクの<a>タグは、<a>～</a>という構造になっています。そしてその間に挟まれた文字列がクリックできるようになり、指定されたリンク先にジャンプできるようになります。上のサンプルでは各行の最後に改行<br>タグが設定されていますが問題ないですよね。
　それから<a>タグには、リンク先を指定する「href属性」があります。<a>タグでリンクを張るときには不可欠な属性です。「エイチレフ」と読みますが、ハイパーテキスト(hypertext)のリファレンス(reference、参照)からきています。
　入力が終わったら[Ctrl]+[s]で上書き保存し、ブラウザの表示を[F5]キーで更新してみて下さい。ブラウザの表示は下のイメージのようになりましたか？さらには、リンクの設定が正しいか、リンクの部分をクリックして試しましょう。

　　

　「前回の成果」リンクに設定された「ren02.html」は、このページの一つ前の「画像表示」で作ったファイルです。作ってある人は「ren02.html」のサンプルページが表示されるはずです。ですが「ren02.html」を作ってない人はクリックしてもリンク切れエラーになります。作ったのにリンク切れエラーになったり、ページが変わらない人、別ページが表示される人は、webkisoフォルダを見て「ren02.html」があるかどうかを確かめると同時に、HTMLをよく見てファイル名やその他の部分が間違っていないかよく確認しましょう。
　それからもう一つのリンク。「林幹人研究室」をクリックすると「林幹人研究室のページ」にジャンプします。ジャンプできない場合は入力をよく確かめて下さい。うまくジャンプできたらOK。ブラウザの戻るボタンで戻りましょう。

SPONSORED LINK

　ところで「href属性」の設定方法に違いがあることに気づいた人は目の付け所がスバラシイ。上のサンプルの場合、一つ目がファイルだけを指定し、二つ目が「https://～」とURLを指定しています。
　わかりやすいので二つ目から説明しますが、「https://hayalab.com/index.html」のようにURLで指定する方法を「絶対パス」による指定と言います。URLは、インターネットの世界で唯一の住所のようなものなので、「絶対このファイル！」ということになるので「絶対パス」と覚えておきましょう。
　一方、「href="ren02.html"」と指定した一つ目の方は、ファイル名しか書かれていません。世界にはおそらく「ren02.html」というファイルはあるでしょうし、この資料で勉強している人のパソコンの多くに「ren02.html」ファイルがあるでしょう。それなのに、ファイル名を指定しただけで間違いなく、前の資料であなたが作った(はずの)あなたのパソコンのwebkisoフォルダにある(はずの)「ren02.html」が表示されるのはなぜか？それはもちろん、ジャンプ元の「ren03.html」から見て同じフォルダにあるからです。サーバー名とかフォルダ名とか指定しなくても、ファイル名だけで指定できます。
　この話、一つ前の「画像表示」のページでも出てきました。ジャンプ元から見て同じフォルダということで、ジャンプ元を基準に相対的な位置でリンクを設定することから、このことを「相対パス」と呼ぶんでしたね。この場合は、同じフォルダなのでファイル名だけですが、これも「相対パス」です。
　通常、ウェブサイトの開発の中で、開発するページ同士や画像ファイルなどは基本的にすべて「相対パス」で指定します。いちいち長いURLを書くような絶対パスは使いません。他方で外部のサイトにリンクを張るときは当然「絶対パス」で書きます。うまく使い分けましょう。「相対パス」について詳しくは「ウェブサイト作成入門・相対パス」もどうぞ。

SPONSORED LINK

画像へのリンク設定

　このようなリンクは文字だけではなく画像にも張ることができます。画像をクリックしたらジャンプするってたまにありますよね。練習用の画像をこちらからダウンロードして下さい。右クリックして「ファイルに保存」を選び、webkisoフォルダの中の「gazoフォルダ」に保存します。画像ファイルの名前は変更せず「p02.jpg」のまま保存して下さい。「gazoフォルダ」については、一つ前の「画像表示」のページで、画像ファイルの保存用フォルダとして作りました。飛ばしてきた人は、webkisoフォルダの中に「gazoフォルダ」を作って保存して下さい。
　画像ファイルが準備できたら、テキストエディタで「ren03.html」を以下のように修正します。追加したのは下のイメージの行番号12のところです。

　　

　追加した行だけ貼っておきます。

　　

　上記の編集イメージでは、<img>タグだけ反転表示しています。その周りを<a>～</a>タグが囲んでいます。つまり、リンクの「クリックできるところ」に文字ではなく、画像をはめ込んだ、ということになります。そして画像は、今ダウンロードして「gazo」フォルダに保存した「p02.jpg」です。なので「src属性」は「gazo/p02.jpg」と相対パスで指定されています。つまり、このHTMLファイル「ren03.html」から見て、同じフォルダにある「gazoフォルダ」に格納された「p02.jpg」、ということを表しています。
　その上でリンク先は、2行上の「前回の成果」と同じ「ren02.html」となっています。表示された「p02.jpg」の画像をクリックすると「ren02.html」にジャンプする、ということになることを想定しています。

SPONSORED LINK

　テキストエディタの編集が終わったら、[Ctrl]+[s]で保存し、ブラウザで[F5]キーで更新して結果を確認しましょう。以下イメージのように表示されれば第一関門クリア。次に画像をクリックして「ren02.html」にジャンプしたらパーフェクト。思うようにならないときは、よく見直して下さい。

　　

　「リンク」については、ページ内の別の場所に飛ぶ「ページ内リンク」とか、クリックすると別ウインドウが開いてリンク先を表示する設定もできますが、ここでは必要なところだけに絞って次に行きたいと思います。もう少しいろいろ知りたい場合は、兄弟サイト「ウェブサイト作成入門・リンク」に情報がありますので参考にして下さい。
　インライン要素はこの辺にして、次に、ブロックレベル要素について見ていきたいと思います。
ページのトップへ戻る
SPONSORED LINK