ウェブサイトの“書き方”⑥~リンク

May 30th,2015
リンクを埋め込む
リンク
前置き編でも紹介したとおり、HTMLは文書間を“リンク”することができるテキストです。
ウェブサイトのもっとも大事な機能といっても過言ではないですが、とても簡単に埋め込むことができます。
下がリンクタグです。
<a href="sample.html">リンク</a>
<a>~</a>でリンクにする文字を囲み、リンク先のページの場所を"href"属性で指定します。
相対パス?絶対パス?
URLの種類
リンクなどに指定するURLには相対パスと絶対パスがあります。
相対パス
現在位置を基準として目的のファイルとの相対的な位置で指定する方法。
例えると、「3つ目の角を右に曲がって突き当りを左に曲がったところにある千代田さん家」のような場所の表し方です。
絶対パス
現在位置とは関係なく絶対的な位置で指定する方法。
“http://”などから始まるインターネット上のアドレスで指定します。
例えると、「東京都千代田区千代田1丁目1番地1号にある千代田さん家」のような場所の表し方です。
相対パス
相対パスでは、“./”が現在位置と同じ階層、“../”が一つ上の階層を表し、そのあとに続けてファイル名や、フォルダ名を書いていきます。
例として、以下のような階層構造のウェブサイトがあるとします。
“banana.html”から“apple.html”へリンクする場合
同じ階層にあるのでURLは“./apple.html”となります。
実際には“./”は省略できるので通常はファイル名だけの“apple.html”と書きます。
“banana.html”から“mangosteen.html”へリンクする場合
一つ下の階層にあるので“tropical/mangosteen.html”とフォルダ名とファイル名を続けて書きます。
“banana.html”から“index.html”へリンクする場合
一つ上の階層にあるので“../index.html”となります。
“banana.html”から“tomato.html”へリンクする場合
別の階層にあるので、一つ上の階層の“vegetables”というフォルダの...というように“../vegetables/tomato.html”と書きます。
深い階層構造の場合は“../”を“道筋”にある階層の数だけ重ねます。
“mangosteen.html”から“index.html”へリンクする場合
二つ上の階層にあるので“../”を二つ続けて記述して“../../index.html”となります。
“index.html”から“mangosteen.html”へリンクする場合
二つ下の階層にあるので“fruits/tropical/mangosteen.html”と“道筋”にあるすべてのフォルダ名を書きます。
相対パス?絶対パス?
同じウェブサイト内では、絶対パスを使用することもできますが、通常は相対パスを使用します。
今作成しているウェブサイトでは、ホームページの“index.html”と、コンテンツページの“banana.html”、“apple.html”は同じ階層上(フォルダ)にあるので、
互いにリンクをする場合は、
<a href="banana.html">バナナについて</a>
のように相対パスでリンクすることができます。
リンクを埋め込む
ホームページとコンテンツページをリンクで結びます。
下のようにそれぞれのページへのリンクを設定していきます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>果物を食べる</title>
</head>
<body>

<h1>果物を食べる</h1>
<p>美味しいフルーツについて紹介していきます。</p>

<h2>メニュー</h2>
<ul>
<li><a href="apple.html">りんご</a></li>
<li><a href="peach.html">もも</a></li>
<li><a href="banana.html">バナナ</a></li>
<li><a href="mangosteen.html">マンゴスチン</a></li>
<li><a href="link.html">リンク</a></li>
<li><a href="contact.html">連絡先</a></li>
</ul>

<p>&copy; copyright 2015 Frouts wo taberu</p>

</body>
</html>
保存したら“index.html”をブラウザで開いてみてください。
リンクを埋め込んだ文字が青くなっているはずです。
この文字をクリックしてリンク先として設定したページに飛ぶことができれば成功です。
あとはコンテンツページからホームページへ戻るリンクも必要になるので、同様に設定します。
<a href="index.html">トップに戻る</a>
一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク