Chapter-01

Chapter-02

Chapter-03

Chapter-04

1.リンクを挿入する

前回新しいページを作成したので、Chap1は「index.html」と「about.html」の複数のページを持つサイトになりました。

    chap1

  • index.html
  • about.html

しかし、この2つのページはリンクで繋がっていません。なので今回は、「index.html」から「about.html」へアクセスできるようにリンクを挿入してみましょう。

リンクを挿入

では「index.html」開き、「<p>ここは北海道情報大学のサイトです</p>」の次の行に以下のように入力してください。

index.html
<h1>北海道情報大学</h1>
<p>ここは北海道情報大学のサイトです。</p>
<a href="about.html">北海道情報大学って？</a>
<a href=""></a>アンカータグ･･･リンクを付与したいテキストや画像を囲うタグ
「" "」内にはリンク先のアドレスを書きます

今回は「index.html」と「about.html」が同じフォルダにあるので、「" "」内に入力するリンク先は、ファイル名である「about.html」だけで繋がります。

「about.html」からも「index.html」に戻れるようにリンクを挿入してみよう

今度は「about.html」開き、前回入力したリスト「<ul>～</ul>」の次の行に以下のように入力しましょう。

about.html
<h1>北海道情報大学とは？</h1>
<ul>
   <li>北海道情報大学は、江別にあります</li>
   <li>北海道情報大学は、私立大学です</li>
   <li>北海道情報大学は、情報に関して学ぶ大学です</li>
</ul>
<a href="index.html">ホームへ戻る</a>

打ち終わったら、実際にブラウザでhtmlファイルを開いて、ちゃんとリンクが繋がっているかチェックしましょう。

見本ページを新しいタブで開く

上のように表示されていれば、正しく作成できています。

2.「about.html」を別のフォルダに移動してみよう

「chap1」フォルダの中に「test」フォルダを作成し、その中に「about.html」を入れてみましょう。

    chap1

  • index.html

      • test

    • about.html

この状態で先ほど作ったリンクを押すと、「ページが見つかりません」などと表示されるかと思います。

このように、ファイルの位置がズレてしまうと、正しくリンクされなくなってしまいます。

ファイルを移動した後、テキストエディタで「about.html」を開き直しましょう。開き直さずに上書き保存してしまうと、元の位置に新たに別の「about.html」ができてしまいます。

下の階層にあるhtmlファイルへリンク

「index.html」から見て一つ下の階層（「test」フォルダ）にある「about.html」へリンクを繋ぎなおしてみましょう。

「index.html」開き、先ほど入力したaタグ「<a href="～">～</a>」を以下のように書き換えてみましょう。

index.html
<h1>北海道情報大学</h1>
<p>ここは北海道情報大学のサイトです。</p>
<a href="test/about.html">北海道情報大学って？</a>

「" "」内が「about.html」から「test/about.html」に変わりました。

これは、「test」フォルダの「about.html」へリンク、という意味です。

上の階層にあるhtmlファイルへリンク

今度は、「test」フォルダへ移動した「about.html」から、一つ上の階層にある「index.html」へのリンクを繋ぎなおします。

「about.html」開き、先ほど入力したaタグ「<a href="～">～</a>」を以下のように書き換えてみましょう。

about.html
<h1>北海道情報大学とは？</h1>
<ul>
   <li>北海道情報大学は、江別にあります</li>
   <li>北海道情報大学は、私立大学です</li>
   <li>北海道情報大学は、情報に関して学ぶ大学です</li>
</ul>
<a href="../index.html">ホームへ戻る</a>

「" "」内の「index.html」の前に「../」がつきました。

「../」は、「一つ上のフォルダの」という意味です。

正しくリンクが繋がっていますか？

先ほどと同じようにリンクが繋がっていることを確認しましょう。

見本ページを新しいタブで開く

3.絶対パスで他のサイトへのリンクを挿入する

これまでのリンクの仕方は、htmlファイルから見た相対的な位置で繋ぐ「相対パス」でした。他のwebサイトなどにリンクする際は、そのようなリンクの繋ぎ方は出来ないので「絶対パス」を使います。

絶対パスとは、以下のように、ただ単に「http://」からアドレス全てを書くだけです。

.htmlファイル
<a href="http://www.do-johodai.ac.jp/">北海道情報大学</a>

※上は例なのでhtmlに書き足す必要はありません

PAGE TOP