簡単ホームページをメモ帳で作ろうよ


第16回:リンクを作ろう(その2)

<nifty:FROM40PC/MES/15/XXX>

<リンクの作り方 その21 耳に穴あけて、イヤリンク。> (^_^;
おいしいよね、イカのリンク。(そりゃ、リングフライやろ)

さて、今回はホームページ作成講座の第16回、リンクの作成その2です。

まずは前回のおさらいから行きましょう。前回のサンプルタグで以下のような内容を学習しました。
段落ごとにコメントタグ(説明するだけのタグ)を書いてありますので、見ながら復習してみてください。


<HTML>
<HEAD>
<TITLE>リンクを作って遊びましょ</TITLE>
<!--↑ブラウザに表示される、ページのタイトルを指定-->
</HEAD>
<BODY bgcolor="#ff9fff">
<!--↑本文の背景を淡いピンクに指定-->
<P>
<!--↑改行と空白を置く指定-->
<A href="linka.htm">リンク先1に飛びます</A>
(同一ウィンドウで linka.htmへ飛びます)
</P>
<!--↑リンク作成、テキストをクリックしてジャンプする方法で-->
<P>
<A href="linka.htm">
<IMG src="40pcmini.gif" width="88" height="31" border="0"></A>
(同上)
</P>
<!--↑リンク作成、画像をリンクボタンにするバージョン-->
<P>
<A href="linka.htm" target="_blank">リンク先1に飛びます</A>
(別ウィンドウで linka.htmへ飛びます)
</P>
<!--↑リンク、テキスト、新たにウィンドウを開く方法で-->
<P>
<A href="linka.htm" target="_blank">
<IMG src="40pcbanner.gif" width="454" height="59" border="0"></A>
(同上)
</P>
<!--↑リンクその4画像、新たなウィンドウへバージョン-->
<P>
<BR>
<!--改行の指定-->
<A href="#keyword1">Sortieのキーワード</A><BR>
(このページの下のキーワード Sortie のキーワードにジャンプ)<BR>
<!--リンクその5、同一ページ内のキーワードへリンク設定。以下省略-->

<A href="#keyword2">ほんちのキーワード</A><BR>
(このページの下のキーワード ほんちのキーワードにジャンプ)<BR>

<A href="#keyword3">みつりんのキーワード</A><BR>
(このページの下のキーワード みつりんのキーワードにジャンプ)<BR><BR><P>

<!--↓ネームタグで本文中にキーワードを設定しています-->
<A name="keyword1">Sortieのキーワード</A><BR><BR>
ここにいろいろ書きます。<BR><BR><BR><BR><BR><BR><BR><BR><BR><P>
<A name="keyword2">ほんちのキーワード</A><BR><BR>
ここにいろいろ書きます。<BR><BR><BR><BR><BR><BR><BR><BR><BR><P>
<A name="keyword3">みつりんのキーワード</A><BR><BR>
ここにいろいろ書きます。
<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR></P>
<P>本日の練習はこれまでとしましょう。(^_^)<BR>
では、ハッピーPCいんぐ!<BR><BR><BR><BR></P>
</BODY>
</HTML>



後半部分がちょっと複雑に見えますけど、軽く読み流して済ませちゃいましょう。(^_^;改行を多用しているのは、見え方が分かりやすいようにする都合です。


<今回のテーマ、指定したページの指定した位置に直接ジャンプ>

さて、今回はまず、別のページにただジャンプするのではなくて、別ページの特定の位置(キーワードを設定した位置)にジャンプすることに挑戦してみます。
ジャンプ先のページが縦に長く、たくさんの項目がある場合は、キーワードで設定した位置にジャンプする設定にするほうが親切だと思います。

基本的なタグの書き方は以下のようになります。リンクを書くほうのページと、ジャンプ先のページの両方に同じキーワードを使ってタグを記述する必要があります。

<リンクを書くページ>
<A href="jumpsaki.htm#sortie">次のページのそるちの項目まで直接ジャンプ</A>
<A href="jumpsaki.htm#honch">次のページのほんちの項目に直接ジャンプ</A>
<A href="jumpsaki.htm#hide">次のページのひでの項目に直接ジャンプ</A>

<ジャンプ先のページ>
<A name="sortie">そるちの項目</A>
<A name="honch">ほんちの項目</A>
<A name="hide">ひでの項目</A>

これだけでは味気ないので、次のようなサンプルページを作ってみました。リンクを書くページと、ジャンプ先のページを二つ作る必要があります。まずは、リンクを書くページのサンプルです。ichia.htm としました。それほど複雑ではないと思うので、コメントタグによる解説は省略しました。なお、改行タグ<br>を多用しているのは、タグの機能を分かりやすくするためです。


<html>
<head>
<title>
位置指定ジャンプの練習
</title>
</head>
<body>
<br><br><br>
<A href="jumpsaki.htm#sortie">次のページのそるちの項目まで直接ジャンプ</A>
<br><br><br>
<A href="jumpsaki.htm#honch">次のページのほんちの項目に直接ジャンプ</A>
<br><br><br>
<A href="jumpsaki.htm#hide">次のページのひでの項目に直接ジャンプ</A>
<br><br><br>
</body>
</html>

こんなページができました。それぞれのページをクリックする前に、ジャンプ先のページを作りましょう。

次に、ジャンプ先のページを作ってみます。jumpsaki.htmとしました。

<html>
<head>
<title>
位置指定ジャンプの練習
</title>
</head>
<body>
<A name="sortie"><font size="5" color=blue>そるちの項目</font></A><br>
こ<br>
れ<br>
は<br>
そ<br>
る<br>
ち<br>
の<br>
項<br>
目<br>
<A name="honch"><font size="5" color=red>ほんちの項目</font></A><br>
こ<br>
れ<br>
は<br>
ほ<br>
ん<br>
ち<br>
の<br>
項<br>
目<br>
<A name="hide"><font size="5" color=yellow>ひでの項目</font></A><br>
こ<br>
れ<br>
は<br>
ひ<br>
で<br>
の<br>
項<br>
目<br>
<br><br><br><br><br><br>練習おわり(^_^)
</body>
</html>


そるちの項目をクリックすると、ここにジャンプしてきます。


ひでの項目をクリックすると、ここにジャンプします。
うまく行きましたか。


<今日のテーマその2は、リンクタグを利用してメールを送ろう>

では、次です。リンクを作るタグを利用して、メール送信ができるようにしてみましょう。作り方は簡単です。次のように、リンク先に mailto:を含めたメールアドレスを書いてあげるだけです。
リンクの書き方の基本は <A href="ジャンプ先">リンクはこちらから</A>
などと書きましたから、たとえば次のようにタグを書けば良いことになります。たとえば、

<A href="mailto:mitsurin@from40pc.ne.jp">ご意見・ご希望をお聞かせください
</A>

と書いた場合、「ご意見・ご希望をお聞かせください」をクリックすると、メールソフトが起動して、メールを送信できるようになります。
ただし、ブラウザが対応していないと、このタグは活躍できませんが、最近のブラウザであれば、問題ないと思います。もちろん、メールソフトをブラウザで指定しておく必要はあります。(なお、上のメールアドレスは、フィクションですので、メールは送らないでください)

では、サンプルタグをひとつ見ていただいて、今回のしめくくりとしたいと思います。下の例では、「ご意見ご希望をお聞かせください」をクリックするとメールソフトが起動し、題名も「ホームページ講座の練習よん」と入力してくれます。あとは本文を打つだけで済みます。
trial.htm とでも名前を付けて作ってみます。


<html>
<head>
<title>
アンカータグを利用して、メール送信に挑戦
</title>
</head>
<body>
<br>
<br>
<br>
<A href="mailto:mitsurin@from40pc.ne.jp?Subject=ホームページ講座の
練習よん">
<font size="7" color="blue">ご意見ご要望をお聞かせください</font>
</A>
</body>
</html>


trial.htm とでも名前を付けて保存し、ブラウザで開いてみましょう。

ここをクリックすると、メールソフトが起動するはずです。

なお、上のメールアドレスは本物ではありませんので、練習しないでください。練習なさりたい方は、ご自分のメールアドレスに変更して練習してください。インターネットにアクセスしている状態で、上のタグをブラウザで開けば、メール送信できます。たとえば、「ホームページ講座16回の練習です。お返事不要。39(^_^)」などと書いてご自分宛にメールを送ってみましょう。分かりやすいくて良いと思います(^_^)。

メールソフトが立ち上がらない場合は、ブラウザの設定を確かめてみましょう。Internet Explorer の場合、次の箇所を確認しましょう。

上の例では、ブラウザと連動するメールソフトを Eudora Pro にしている例です。

Lesson 1 Lesson 2 Lesson 3 Lesson 4 Lesson 5 Lesson 6 Lesson 7 Lesson 8 Lesson 9 Lesson10
Lesson11 Lesson12 Lesson13 Lesson14 Lesson15 Lesson16 Lesson17 Lesson18 Lesson19 Lesson20
Lesson21 Lesson22 Lesson23 Lesson24 Lesson25 Lesson26 Lesson27 Lesson28 Lesson29 Lesson30

みつりんの簡単ホームページ講座トップ

トップページへ コマンドプロンプト VBAで遊ぼう パレットへ(注) ホームページ道場へ(注)
(注)@nifty会員のみご利用いただけます 30日で完成ホームページ本 ファイルの開き方

Since 15/06/1999
ホームページの内容の転載を禁じます made by mitsurin