おたすけHTML入門 HTML入門メニュー

第3回へ  第5回へ
1999/10/01(金)
 第4回「ページをリンクさせよう」

 メニューごとに作成したページをリンクさせたり、別のホームページとリンク
させてみましょう。

■複数ページになった時のリンク

 あるページから別ページへのジャンプ。または、ページ内のある位置への移動。
別ページのある位置へのジャンプをしたい時に使用するタグが、<A> 〜 </A> です。

 <A>タグで下記属性を使う。

 HREF="url"     リンク先URLを入れる。

 HREF="#***"    同じページ内で、<A NAME="***"> 〜 </A>指定した
                位置にジャンプ。

 HREF="url#***" 別ページの <A NAME="***"> 〜 </A>指定した
                位置にジャンプ。


 TARGET="・・・"

 TARGET="・・・"に名前を指定すると、指定した名前のウィンドウやフレームが
存在すればそこに表示し、存在しなければその名前を持つウィンドウを新規に
開いて表示します。
   指定がない場合は、同一ウインドウ・フレームに表示します。
但し、<HEAD>〜</HEAD>のヘッダー内部で、 <BASE TARGET="・・・"> が
設定されている場合は、このウィンドウに表示されます。

 TARGET="_blank"

  毎回、ウィンドウを新規に開いてそこに表示します。

 TARGET="_top"

 フレーム分割されていれば、すべての分割を解除してそこに表示します。

 NAME="キーワード"

  ページ内のある位置にジャンプしたい場合は、そのリンク先で、
<A NAME="XXXX">〜</A> として、ユニークな名前をつけておく必要
がある。

  XXXX には、そのページ内のキーワードなる名称をつける。
  そのページ内で、複数個のキーワードを設ける場合は、必ず、別の名前にして
下さい。


■ A タグに囲まれた部分の文字表示

  <A HREF="url" > 〜 </A> で囲んだ部分には、アンダーラインがつき、
そこをクリックしてリンク先にジャンプします。そして、再びそのページに戻ると、
そのリンク部分の色が違っています。
 このようなリンク部の色設定は、<BODY>〜</BODY>タグで指定します。

 下記の属性を使います。

 LINK="color"   リンク部分の色
 ALINK="color"  マウスをクリックして、リンク先ページが表示されるまでの色
 VLINK="color"  キャッシュ(すでに読み込んでいる)されている場合の色

  color については、第2回の説明参照。


■ 画像をクリックしてリンクさせる場合

 <A HREF="url"> 〜 </A>と、画像を表示する<IMG>タグをいっ
しょに使います。

 <A HREF="url" TARGET="..."><IMG SRC="ファイル名" BORDER="n"></A>

  BORDER=n 表示される画像の外枠の太さを指定します。
           「0」を指定すれば、枠は表示されません。


■ リンクを使ってメール送信

 <A HREF="mailto:メールアドレス">〜</A>
設定されているメーラーが起動し、指定メールアドレス宛にメールが送信できます。

例)
 +----------+
 | mail.gif | ご意見・ご感想をお待ちしています。こちらまでどうぞ
 +----------+ --------------------------------------------------

 <A HREF="mailto:taro@***.ne.jp"><IMG SRC="mail.gif" BORDER=0>
ご意見・ご感想をお待ちしています。こちらまでどうぞ</A>


■ リンクのサンプル

例)

  +--- smp6.html
  |
  +- ensoku/   -- smp6_1.html
  |
  +- undoukai/ -- smp6_2.html
  |
  +- camp/     -- smp6_3.html


先頭ページ smp6.html

 楽しかった思い出

 1.遠足   <--------------- smp6_1.html "ensoku6"   にジャンプ
    6年1組の思い出 <---  smp6_1.html "ensoku6_1" にジャンプ
    6年2組の思い出 <---  smp6_1.html "ensoku6_2" にジャンプ
    6年3組の思い出 <---  smp6_1.html "ensoku6_3" にジャンプ

 2.運動会

 3.夏休みキャンプ

 「Yahoo! Japan」で検索


 遠足ページ smp6_1.html    <--- <A NAME="ensoku6">   </A>

   6年1組の思い出        <--- "ensoku6_1" にジャンプ
   6年2組の思い出        <--- "ensoku6_2" にジャンプ
   6年3組の思い出        <--- "ensoku6_3" にジャンプ

  楽しかった思いでに戻る。<--- smp6.html にジャンプ


 1組                     <--- <A NAME="ensoku6_1"> </A>

  1行目
    ・・・・・
    7行目
    ページ先頭に戻る       <--- "ensoku6" にジャンプ

 2組                     <--- <A NAME="ensoku6_2"> </A>

  1行目
    ・・・・・
    7行目
    ページ先頭に戻る       <--- "ensoku6" にジャンプ


 3組                     <--- <A NAME="ensoku6_3"> </A>

  1行目
    ・・・・・
    7行目
    ページ先頭に戻る       <--- "ensoku6" にジャンプ


[ファイル名:smp6.html]
<HTML>
<HEAD>
<TITLE>サンプル6</TITLE>
</HEAD>
<BODY BGCOLOR="#ffffff" TEXT="#000000" LINK="#0080ff"
ALINK="#ff80ff" VLINK="#000080">

<H1>楽しかった思い出</H1>
<A HREF="ensoku/smp6_1.html" ><FONT SIZE="3">1.遠足</FONT></A><BR>
   <A HREF="ensoku/smp6_1.html#ensoku6_1"><FONT SIZE="3">6年1組の思い出</FONT></A><BR>
   <A HREF="ensoku/smp6_1.html#ensoku6_2"><FONT SIZE="3">6年2組の思い出</FONT></A><BR>
   <A HREF="ensoku/smp6_1.html#ensoku6_3"><FONT SIZE="3">6年3組の思い出</FONT></A><P>
<A HREF="undoukai/smp6_2.html"><FONT SIZE="3">2.運動会</FONT></A><P>
<A HREF="camp/smp6_3.html"><FONT SIZE="3">3.夏休みキャンプ</FONT></A><P>

<A HREF="http://www.yahoo.co.jp/">「Yahoo! Japan」</A>で検索<P>

</BODY>
</HTML>


[ファイル名:smp6_1.html]
<HTML>
<HEAD>
<TITLE>サンプル6−1</TITLE>
</HEAD>
<BODY BGCOLOR="#ffffff" TEXT="#000000" LINK="#0080ff"
ALINK="#ff80ff" VLINK="#000080">

<A NAME="ensoku6"><H1>遠足ページ</H1></A>
 <A HREF="#ensoku6_1"><FONT SIZE="3">6年1組の思い出</FONT></A><BR>
 <A HREF="#ensoku6_2"><FONT SIZE="3">6年2組の思い出</FONT></A><BR>
 <A HREF="#ensoku6_3"><FONT SIZE="3">6年3組の思い出</FONT></A><P>
 <A HREF="../smp6.html"><FONT SIZE="3">楽しかった思いでに戻る</FONT></A><P>

<A NAME="ensoku6_1"><H2>1組</H2></A>
 1行目<BR>
 2行目<BR>
 3行目<BR>
 4行目<BR>
 5行目<BR>
 6行目<BR>
 7行目<P>
<A HREF="#ensoku6">ページ先頭に戻る</A><P>

<A NAME="ensoku6_2"><H2>2組</H2></A>
 1行目<BR>
 2行目<BR>
 3行目<BR>
 4行目<BR>
 5行目<BR>
 6行目<BR>
 7行目<P>
<A HREF="#ensoku6">ページ先頭に戻る</A><P>

<A NAME="ensoku6_3"><H2>3組</H2></A>
 1行目<BR>
 2行目<BR>
 3行目<BR>
 4行目<BR>
 5行目<BR>
 6行目<BR>
 7行目<P>
<A HREF="#ensoku6">ページ先頭に戻る</A><P>

</BODY>
</HTML>


■一定時間経過後、指定ページにジャンプしたい時

 ホームページが移動になった際、旧URLをアクセスしてきた人に、新URLに自動
的にジャンプさせたり、複数のページを連続してみせたい時に使用します。

  <META>タグを使用します。
  このタグは、<HEAD>〜</HEAD>ヘッダ部に記述します。

<META HTTP-EQUIV="Refresh" CONTENT="n;URL=http://***/">

 n に秒数を、http://***/ にジャンプ先URLを、指定します。


例)  5秒後に指定したURLにジャンプします。

-----------------------------------------------
                【お知らせ】
  下記のURLに移動しました。5秒後に移動します。

    http://www.ne.jp/asahi/sun/rise/link/

   移動しない場合は ここをクリックして下さい。
-----------------------------------------------


[ファイル名:smp7.html]
<HTML>
<HEAD>
<META HTTP-EQUIV="Refresh"
CONTENT="5;URL=http://www.ne.jp/asahi/sun/rise/link/">
<TITLE>サンプル7</TITLE>
</HEAD>
<BODY BACKCOLOR="#FFFFFF" TEXT="#000000">
<CENTER>
<HR SIZE="2" WIDTH="70%" ALIGN="center">
<FONT SIZE=5 COLOR="#008080">【お知らせ】</FONT><P>
<FONT SIZE=4 COLOR="#000000">下記URLに移動しました。5秒後に移動します。</FONT><P>
<FONT SIZE=4
COLOR="#FF0000">http://www.ne.jp/asahi/sun/rise/link/</FONT><P>
<FONT SIZE=4 COLOR="#000000">移動しない場合は
<A HREF="http://www.ne.jp/asahi/sun/rise/link/" TARGET="_top">
ここ</A>をクリックして下さい。</FONT>
<HR SIZE="2" WIDTH="70%" ALIGN="CENTER">
</CENTER>
</BODY>
</HTML>


■他の人のページにリンクする場合の注意点

  わかりやすく解説しているページがありますので、こちらを参照下さい。

[参考URL]
ホームページ安全講座
第5回 引用とリンクのしかた
http://www.watch.impress.co.jp/internet/www/column/hpsafety/hps5.htm


■自分のページにリンクしてくれている人を探す方法

  ホームページを公開すると、どんな人が見てくれているのか?
  どんなページが自分にリンクしてくれているのか?
  知りたくなるものです。
  そんな時は。。。

・検索エンジン等から探す。

 自分のホームページのタイトルをキーに探す。
 特にフレッシュアイ等は、1ヶ月間の間に更新された最新情報がわかります。
しかしこの方法では、リンクした相手が検索エンジンに登録しなければ、探す
ことはできません。

・アクセス解析

 自作CGIが使えるプロバイダーならば、無料でアクセス解析ソースを提供して
いるサイトから入手し、自分のホームページに組み込む。

 具体的に知ることができる情報
  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 いつ
 どのIPアドレス(プロバイダー等)から
 どのブラウザ(IE NC)およびバージョンを使い、
 どのOSマシンから、
 どのURLページを経由して、
 等の情報が読み取れ、その情報をログファイルに保存し、
 そのファイルの分析(何時、何曜日にアクセスが多いか、どのURLージから
  のアクセスが多いか)が可能になるわけです。

 このログ情報を元に、相手のホームページに訪問してみる。

・アクセス解析サービスを提供しているサイトを利用する。

  [参考URL]
 アクセス情報「Visual Data System」
 http://www.vds.ne.jp/
 アクセス情報を集計・解析してくれるサービスを提供。
 有料ですが、2週間のお試し期間があります。


■第1回から4回までを振り返る

ホームページを作るまでの初歩的なことがらを説明してきました。
どこまで受け入れていただけたか、多少の不安があります。

  こんなことを知りたい。
  ここをもっと詳しく知りたい。
  こんな情報が役に立った。

といった、メールをいただければ幸いです。お待ちしております。


■今後の予定

 第5回 「とにかくホームページを公開しよう」

  第2回〜第4回の内容で、とにかくホームページと呼べそうなものができま
  したので、実際に公開して見ましょう。

 第6回 「Java Script にも挑戦」

 多くのホームページで、HTMLのタグ以外に、Java Scriptの機能を使って
  います。簡単な概略を説明します。

 第7回 「テーブル機能について」

 再び、HTMLのタグ説明に戻り、よく使われるテーブル機能について説明
 します。

 第8回 「フレーム機能について」

 ブラウザの画面を、いくつかに分割したい時に使うフレーム機能について説
  明します。


第3回へ  第5回へ