| おたすけＨＴＭＬ入門 |
 |
1999/10/01(金)
第４回「ページをリンクさせよう」
メニューごとに作成したページをリンクさせたり、別のホームページとリンク
させてみましょう。
■複数ページになった時のリンク
あるページから別ページへのジャンプ。または、ページ内のある位置への移動。
別ページのある位置へのジャンプをしたい時に使用するタグが、<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 については、第２回の説明参照。
■ 画像をクリックしてリンクさせる場合
<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" にジャンプ
６年１組の思い出 <--- smp6_1.html "ensoku6_1" にジャンプ
６年２組の思い出 <--- smp6_1.html "ensoku6_2" にジャンプ
６年３組の思い出 <--- smp6_1.html "ensoku6_3" にジャンプ
2.運動会
3.夏休みキャンプ
「Yahoo! Japan」で検索
遠足ページ smp6_1.html <--- <A NAME="ensoku6"> </A>
６年１組の思い出 <--- "ensoku6_1" にジャンプ
６年２組の思い出 <--- "ensoku6_2" にジャンプ
６年３組の思い出 <--- "ensoku6_3" にジャンプ
楽しかった思いでに戻る。<--- smp6.html にジャンプ
１組 <--- <A NAME="ensoku6_1"> </A>
１行目
・・・・・
７行目
ページ先頭に戻る <--- "ensoku6" にジャンプ
２組 <--- <A NAME="ensoku6_2"> </A>
１行目
・・・・・
７行目
ページ先頭に戻る <--- "ensoku6" にジャンプ
３組 <--- <A NAME="ensoku6_3"> </A>
１行目
・・・・・
７行目
ページ先頭に戻る <--- "ensoku6" にジャンプ
[ファイル名：smp6.html]
<HTML>
<HEAD>
<TITLE>サンプル６</TITLE>
</HEAD>
<BODY BGCOLOR="#ffffff" TEXT="#000000" LINK="#0080ff"
ALINK="#ff80ff" VLINK="#000080">
<H1>楽しかった思い出</H1>
<A HREF="ensoku/smp6_1.html" ><FONT SIZE="3">１．遠足</FONT></A><BR>
<A HREF="ensoku/smp6_1.html#ensoku6_1"><FONT SIZE="3">６年１組の思い出</FONT></A><BR>
<A HREF="ensoku/smp6_1.html#ensoku6_2"><FONT SIZE="3">６年２組の思い出</FONT></A><BR>
<A HREF="ensoku/smp6_1.html#ensoku6_3"><FONT SIZE="3">６年３組の思い出</FONT></A><P>
<A HREF="undoukai/smp6_2.html"><FONT SIZE="3">２．運動会</FONT></A><P>
<A HREF="camp/smp6_3.html"><FONT SIZE="3">３．夏休みキャンプ</FONT></A><P>
<A HREF="http://www.yahoo.co.jp/">「Yahoo! Japan」</A>で検索<P>
</BODY>
</HTML>
[ファイル名：smp6_1.html]
<HTML>
<HEAD>
<TITLE>サンプル６−１</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">６年１組の思い出</FONT></A><BR>
<A HREF="#ensoku6_2"><FONT SIZE="3">６年２組の思い出</FONT></A><BR>
<A HREF="#ensoku6_3"><FONT SIZE="3">６年３組の思い出</FONT></A><P>
<A HREF="../smp6.html"><FONT SIZE="3">楽しかった思いでに戻る</FONT></A><P>
<A NAME="ensoku6_1"><H2>１組</H2></A>
１行目<BR>
２行目<BR>
３行目<BR>
４行目<BR>
５行目<BR>
６行目<BR>
７行目<P>
<A HREF="#ensoku6">ページ先頭に戻る</A><P>
<A NAME="ensoku6_2"><H2>２組</H2></A>
１行目<BR>
２行目<BR>
３行目<BR>
４行目<BR>
５行目<BR>
６行目<BR>
７行目<P>
<A HREF="#ensoku6">ページ先頭に戻る</A><P>
<A NAME="ensoku6_3"><H2>３組</H2></A>
１行目<BR>
２行目<BR>
３行目<BR>
４行目<BR>
５行目<BR>
６行目<BR>
７行目<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に移動しました。５秒後に移動します。
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>サンプル７</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に移動しました。５秒後に移動します。</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]
ホームページ安全講座
第５回 引用とリンクのしかた
http://www.watch.impress.co.jp/internet/www/column/hpsafety/hps5.htm
■自分のページにリンクしてくれている人を探す方法
ホームページを公開すると、どんな人が見てくれているのか？
どんなページが自分にリンクしてくれているのか？
知りたくなるものです。
そんな時は。。。
・検索エンジン等から探す。
自分のホームページのタイトルをキーに探す。
特にフレッシュアイ等は、１ヶ月間の間に更新された最新情報がわかります。
しかしこの方法では、リンクした相手が検索エンジンに登録しなければ、探す
ことはできません。
・アクセス解析
自作CGIが使えるプロバイダーならば、無料でアクセス解析ソースを提供して
いるサイトから入手し、自分のホームページに組み込む。
具体的に知ることができる情報
~~~~~~~~~~~~~~~~~~~~~~~~~~~~
いつ
どのIPアドレス（プロバイダー等）から
どのブラウザ(IE NC)およびバージョンを使い、
どのOSマシンから、
どのURLページを経由して、
等の情報が読み取れ、その情報をログファイルに保存し、
そのファイルの分析(何時、何曜日にアクセスが多いか、どのURLージから
のアクセスが多いか)が可能になるわけです。
このログ情報を元に、相手のホームページに訪問してみる。
・アクセス解析サービスを提供しているサイトを利用する。
[参考URL]
アクセス情報「Visual Data System」
http://www.vds.ne.jp/
アクセス情報を集計・解析してくれるサービスを提供。
有料ですが、２週間のお試し期間があります。
■第１回から４回までを振り返る
ホームページを作るまでの初歩的なことがらを説明してきました。
どこまで受け入れていただけたか、多少の不安があります。
こんなことを知りたい。
ここをもっと詳しく知りたい。
こんな情報が役に立った。
といった、メールをいただければ幸いです。お待ちしております。
■今後の予定
第５回 「とにかくホームページを公開しよう」
第２回〜第４回の内容で、とにかくホームページと呼べそうなものができま
したので、実際に公開して見ましょう。
第６回 「Java Script にも挑戦」
多くのホームページで、ＨＴＭＬのタグ以外に、Java Scriptの機能を使って
います。簡単な概略を説明します。
第７回 「テーブル機能について」
再び、ＨＴＭＬのタグ説明に戻り、よく使われるテーブル機能について説明
します。
第８回 「フレーム機能について」
ブラウザの画面を、いくつかに分割したい時に使うフレーム機能について説
明します。
