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

2.相対パスと絶対パス

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

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

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

(違うフォルダにあった場合、・・・それは、4日目に登場します!)

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

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

   <A HREF="http://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/ )
@nifty(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>を使っています。


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

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


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





back to top



Copyright (C) 7tag project dv