ＨＴＭＬ Lesson ・・・No.3

リンクを張ろう

ＨＰを見ているときに、
マウスのポインターを乗せると指マークになるところがあります。
これは、別のページにジャンプできる「リンクスポット」です。
ここをクリックすると、別のページが表示されます。

このリンクが、ＨＰの醍醐味です！
次々とＨＰを渡っていくことを、「ネットサーフィン」といいます。

・・・リンクのタグ・・・

<a>はアンカー(anchor)タグ
リンクの指定をする
href はその属性のひとつ

リンクを張るには相手が要りますね。
すでにネットに存在するページにリンクを張るのもいいでしょう。
相手のページのアドレス（ＵＲＬ）をメモしてください。

ＵＲＬ＝Ｕniform Ｒesource Ｌocator

一般的には、こんな格好をしています

http://www.abcd.jp/

・・・試しにヤフーにリンクを張ってみましょう。・・・

ヤフーのＵＲＬは、http://www.yahoo.co.jp/

HTML No.9

<html>
<head>
<title>
ＨＴＭＬ勉強会
</title>
</head>
<body bgcolor="lavenderblush">
<center>
<h2>自分のＨＰを持とう！</h2>

お手本は<a href="http://www.yahoo.co.jp/">ヤフー</a>で探そう！<br><br><br>

</center>
</body>
</html>

次に更新手続きをしてください。

自分のＨＰを持とう！

お手本はヤフーで探そう！

リンクスポットには、色が変わり下線がつきます。
この部分にポインターが乗ると指マークが出て、
クリックするとリンク先にジャンプします。

ヤフーにリンクしたこのソースを、
「index.htm」と名前を付けて保存しましょう。

次は、自分で作った他のページにリンクしてみましょう。

新しいページを作ります。

HTML No.10

<html>
<head>
<title>
わたしのお気に入り
</title>
</head>
<body bgcolor="lemonchiffon">
<center>
<h2>わたしの好きなもの</h2>

<a href="index.htm">トップページ</a>へ！<br><br><br>

</center>
</body>
</html>

これを別の名前で保存します。
ここでは、「like.htm」としておきます。

次に更新手続きをしてください。

わたしの好きなもの

トップページへ！

リンクを張ったときは、戻ることも考えましょう。
人のページの場合はブラウザの「戻る」ボタンを使いますが、
自分のページには、お互いをリンクしておきましょう。

No. 11

次に更新手続きをしてください。

自分のＨＰを持とう！

お手本はヤフーで探そう！

わたしのお気に入りも見てください！

これで、両方のページを行ったり来たりできるようになりました。

・・・注意・・・

<a href="http://www.yahoo.co.jp/">と
<a href="like.htm">とを見比べると
書き方がちがいますね。
これは、「パスの書き方」が違うのです。
「パス」とは、"http://www.yahoo.co.jp/"と、"like.htm"の部分です。
前者を「絶対パス」、後者を「相対パス」といいます。

絶対パスを書くと、どこからでもアクセスできますが、
相対パスを書くと、起点になるところからでないとアクセスできません。

いわば、英語で国名から住所を書くと、世界中に届きますが、
自分の家の中のあの部屋にある本といっても、
人にはわからないというようなことです。

「ｉｎｄｅｘ」って

「index.html」または「index.htm」の話

ＨＰのトップページは、
たいてい「index.html」または「index.htm」になっています。
トップページが目次の役目をするからです。

ＨＰにアクセスするときは、
ブラウザの「アドレス」欄にＵＲＬを入力します。

基本的には、
表示させたいファイル名を指定します。

つまり

http://kurbis.obachama.net/html/lesson1.html

と入力すると、
アドレス内の「html」フォルダの中にある
「lesson1.html」ファイルを表示します。

または

http://kurbis.obachama.net/html/

と入力すると、
アドレス内の「html」フォルダの中の
「index.html」または「index.htm」を表示します。

　また

http://kurbis.obachama.net/

と入力すると、アドレスの直下にある
「index.html」または「index.htm」を表示します。

つまり、ファイルを指定しないときは、
「index.html」または「index.htm」を探して、
それを表示します。

このとき、どちらもない場合は、
同レベルのファイルを全部、列挙表示するか、
もしくは、どこにもアクセスできない状態になります。

別の言い方をすると、

http://kurbis.obachama.net/

にアクセスすると、
アドレス直下にある
「index.html」または「index.htm」を表示します。

また

http://kurbis.obachama.net/html/

にアクセスすると、
アドレス内の「html」フォルダに
「index.html」または「index.htm」を探しに行きます。

そして、

http://kurbis.obachama.net/image/jlogo.gif

アドレス内の「image」フォルダにある
「jlogo.gif」という画像ファイルを表示します。

つまり、ファイル名を指定しない限り、
ブラウザは自動的に、そのレベルにある
「index.html」または「index.htm」を探しに行きます。

次回は画像の貼り付け

制作者のＨＰかぼちゃの旅