*リンク*・・・のつづき

2.相対パスと絶対パス

さて、ここでリンクというものについて、もう少し勉強しておきましょう！

さっき、
<A HREF="profile.html">自己紹介</A>
と書きましたね。
問題は、"profile.html"の部分です。

このように、リンク先にHTML名を指定する場合、
そのHTMLが同じフォルダ内にあることが前提になります。

（違うフォルダにあった場合、・・・それは、４日目に登場します！）

このように、リンク先が同じフォルダにあるとか無いとかで指定することを、「相対パス」と呼びます。

また、リンクは、
他人のホームページへのジャンプにも使えます。
たとえばリンクをはりたいホームページが「https://7-tag.com/index.html」の場合、

　　　<A HREF="https://7-tag.com/index.html">ななたぐのへや</A>

リンク先は、http://で始まるアドレスも指定できるんですね！
このように、リンク先のアドレスをhttp://・・・から指定することを、「絶対パス」と呼びます。

では、絶対パスを利用して、こんなページを作ってみましょう！↓

こんなページへGO!!


↑このページは例ですので、お友達のページなどどこでも好きなホームページへのリンクに書き換えてください！

新しいページを作るので、テキストエディタにて「ファイル」→「新規作成」とし、まっさらな状態にしてください。
そしたら、さっそく書いてみましょう！
とりあえず基本骨格から。
例のページでは、背景は「pink」、文字は「purple」です。

<HTML>
  <HEAD>
    <TITLE>リンクのページ</TITLE>
  </HEAD>
  
  <BODY bgcolor="pink" text="purple">



  </BODY>
</HTML>

タイトル文字を書き入れましょう。

<HTML>
  <HEAD>
    <TITLE>リンクのページ</TITLE>
  </HEAD>
  
  <BODY bgcolor="pink" text="purple">
  <CENTER><H1>リンク</H1></CENTER>



  </BODY>
</HTML>

1行目はYahoo!JAPAN（http://www.yahoo.co.jp/）へのリンクです。

<HTML>
  <HEAD>
    <TITLE>リンクのページ</TITLE>
  </HEAD>
  
  <BODY bgcolor="pink" text="purple">
  <CENTER><H1>リンク</H1></CENTER>
  <A HREF="http://www.yahoo.co.jp/">Yahoo!JAPAN</A>・・・検索サイト。
  
  
  </BODY>
</HTML>

ここまで書けたら、
ファイル名：「link.html」
ファイルの種類：「テキストファイル」
で保存して、ブラウザで確認してみてください！

うまくいってたら、続けていくつかリンクを書いてみましょう♪
例：
楽天（http://www.rakuten.co.jp/ ）
＠ｎｉｆｔｙ（http://www.nifty.com/）

あ、改行、忘れないでくださいね～～!!(2回目!!)

最後に、「トップページに戻る」というリンクを、相対パスで入れておきましょう！
（整形のために<CENTER>を使っています。）

  （略）
  <CENTER><A HREF="top.html">←トップページに戻る</A></CENTER>
  （略）

さて、これで「top.html」と「link.html」の2ページを作りました。
せっかくなので、トップページからリンクページにジャンプするか、確認してみましょう！！
ブラウザで「top.html」を開き、「リンク」をクリックしてみてください。

どう、ちゃんとジャンプした!?

楽しくなってきましたね～♪(^o^)

3.メールアドレスにリンク

さて、今一度テキストエディタで「top.html」を開いてください！
さっきやり残した、「メールはこちら」をやってみたいと思います。

サンプルページで「メールはこちら」をクリックした方はわかったと思いますが、
メールアドレスにリンクをはると、メーラーソフト（メールをするソフト。OutlookExpressなど）が起動します。
メールアドレスにリンクをはるには、<A HREF="mailto:(メールアドレス)">～</a>と書きます。

<HTML>
  <HEAD>
    <TITLE>ななたぐのへや</TITLE>
  </HEAD>
  
  <BODY bgcolor="yellow" text="blue">
      <CENTER><H1>
          <FONT color="red">ななたぐのへや</FONT>
          </H1></CENTER>
      <FONT size="5">「ななたぐのへや」</FONT>へようこそ！<BR>
      初めてのホームページです。
      <BR><BR>
      <A HREF="profile.html">自己紹介</A><BR>
      <A HREF="diary.html">日記</A><BR>
      <A HREF="bbs.html">掲示板</A><BR>
      <A HREF="link.html">リンク</A><BR>
      <BR>
      <CENTER>
      <A HREF="mailto:sample@samle.xx">メールはこちら</A>
      </CENTER>
  </BODY>
</HTML>

整形のために<CENTER>と<BR>を使っています。

※
ただし、この方法だとメールアドレスを公開することになりますので、それがイヤな人は
「６日目」に登場する「レンタルCGI」というところの「メールフォーム」を使ってください。
参考までに↓
『ふぉーむらん』

キ～ンコ～ン♪カ～ンコ～ン♪・・・
本日はここまで!


お疲れさまでした～('-^)
明日の講座は「表を作る」で、自己紹介のページを作ります！
お楽しみに♪





back to top


Copyright (C) 7tag project dv