ハイパーリンク入門

本節の目的
ハイパーリンクの書き方と、絶対リンク・相対リンクについて学習します。

ハイパーリンクの作り方

HTMLでは、文書中のハイパーリンクを埋め込みたい場所に「<a href="WebページのURI"> ~ </a>」という記法で参照先WebページのURIを指定します。WebブラウザでHTML文書を表示すると、<a> と </a> ではさまれた部分がリンクの見出しとして表示されます。

<a href="http://www.kumamoto-u.ac.jp/"> 熊本大学 トップページ </a>

もし、上の例で「トップページ」の部分だけをリンクの見出しとして表示させたいときは、次のように書きます。

熊本大学 <a href="http://www.kumamoto-u.ac.jp/"> トップページ </a>

上の2つのリンクを持ったHTML文書は次のようになります。

<html>
<body>

<a href="http://www.kumamoto-u.ac.jp/"> 熊本大学 トップページ </a>

<br>

熊本大学 <a href="http://www.kumamoto-u.ac.jp/"> トップページ </a>

</body>
</html>

上記をブラウザで表示すると次のようになります。色が変わっている部分がリンクですので、クリックすると指定されたサイトへジャンプします。

基本はこれだけです。簡単ですね。

さて、表計算ソフトの演習で数式からセルを参照する時に、絶対参照と相対参照の2種類の参照方法があったのを覚えているでしょうか。数式をコピーした時に、参照先が変わらないのが絶対参照、参照先が変わるのが相対参照でした。

ハイパーリンクにも同じように絶対参照と相対参照の2種類の参照方法があり、それぞれ「絶対URI」「相対URI」の書式を用いて指定します。両者の違いは次の通りです。

  • 「HTML文書の置き場所を変えても参照先が変わらないのが絶対URI」
  • 「HTML文書の置き場所を変えると参照先が変わるのが相対URI」

絶対URIと相対URI

注:Adobe Flashコンテンツのため非表示


絶対URIと相対URIの定義や使い道が分かったところで、具体例を示しておきます。

絶対URIの例
  • http://www.kumamoto-u.ac.jp/
  • http://www.kumamoto-u.ac.jp/index.html
  • http://www.kumamoto-u.ac.jp/kyouiku/
  • http://www.kumamoto-u.ac.jp/visitor/zaigakusei.html
相対URIの例
  • ./ex1.html
  • ./w04/ex1.html
  • ../w05/test/t0.html


また、これらのURIをハイパーリンクとして利用する時には、次のようにします。

絶対URIを用いたハイパーリンクの例 <a href="http://www.kumamoto-u.ac.jp/"> 熊本大学のトップページ </a>
相対URIを用いたハイパーリンクの例 <a href="./ex1.html"> サンプルページ </a>

演習

  1. 1.下の図の左側にある index.html から黄色の ex2.html へのハイパーリンクを書くための相対URIは、どうなるでしょう?
    下のボタンをクリックすると、入力およびチェックができます。合格するまで何度も挑戦して下さい。
    ただし、文字は半角英数字で入力すること。

    (注意) href=" " は不要です。 ” ”の中に書くのが(相対)URIですので、それだけを書いて下さい。
    先頭の「./」もしくは「../」を忘れないように!

  1. 2.下の図で、赤矢印で示したハイパーリンクを追加するには、どのような相対URIを書けばいいでしょうか?

Copyright Takayuki Nagai 2011, All Rights Reserved.

最終更新日時: 2021年 12月 24日(金曜日) 11:45