第8回リンクを張る

| | コメント(0) | トラックバック(0)
リンクとは2つ以上の情報を関連づけることで、具体的にはウェブページ上のある部分をクリックすると別にページがひらく仕組みになっているものです。
このある部分はテキストでも画像でもかまいません。
また、リンク先は、他のウェブページでも、同一ページ内でも、写真などの画像でもかまいません。

次のソースをコピーしてlink.htmlのように適当な名前を付けて保存してブラウザで見てください。
見た目には「yaho!のページ」と表示されるだけですが、そこをクリックするとyahooのトップページが開くはずです。
このソースはテストなのでhead内の記述は省略しています。
--------------------------------------------------------------------------------------------------------------------
リンクテスト <html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
    <title>リンクテスト</title>
</head>
<body>
    <a href="http://yahoo.co.jp">yahooのページ</a>
</body>
</html>
--------------------------------------------------------------------------------------------------------------------

つまりリンクした箇所をa要素で囲んで、href属性でリンク先のURLを設定するだけです。
この例では外部のページなので「http://yahoo.co.jp」のように書きましたが、自分自身のページで同じ場所にあるページなら、
<a href="./index.html">topページ</a>
のようにファイル名をしてするだけでかまいません。



次に同一ページ内にリンクを張る方法を紹介します。
まずは次のソースをコピーして適当な名前を付けて保存してブラウザで見てください。
そしてリンクの部分をクリックして動きを確かめてください。
------------------------------------------------------------------------------------------------------------------
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
    <title>リンクテスト</title>
</head>
<body>
    <h1><a namae="top">同一ページ内でのリンク</a></h1>
    <p>
      <a href="#aaa">Aに移動</a>
      <br />
      <a href="#bbb">Bに移動</a>
      <br />
      <a href="#ccc">Cに移動</a>
  </p>
  <p>
   ↓<br />
   ↓<br />
   ↓<br />
   ↓<br />
   ↓<br />
   ↓<br />
   ↓<br />
   ↓<br />
 </p>
 <p><a name="aaa">A</a></p>
 <p><a href="#top">TOPに移動</a></p>
  <p>
   ↓<br />
   ↓<br />
   ↓<br />
   ↓<br />
   ↓<br />
   ↓<br />
   ↓<br />
   ↓<br />
 </p>
 <p><a name="bbb">B</a></p>
 <p><a href="#top">TOPに移動</a></p>
  <p>
   ↓<br />
   ↓<br />
   ↓<br />
   ↓<br />
   ↓<br />
   ↓<br />
   ↓<br />
   ↓<br />
 </p>
  <p><a name="ccc">C</a></p>
  <p><a href="#top">TOPに移動</a></p>
  <p>
   ↓<br />
   ↓<br />
   ↓<br />
   ↓<br />
   ↓<br />
   ↓<br />
   ↓<br />
   ↓<br />
   ↓<br />
   ↓<br />
   ↓<br />
   ↓<br />
   ↓<br />
   ↓<br />
   ↓<br />
   ↓<br />
   ↓<br />
   ↓<br />
   ↓<br />
   ↓<br />
   ↓<br />
   ↓<br />
   ↓<br />
   ↓<br />
 </p>
</body>
</html>
------------------------------------------------------------------------------------------------------------------
どうでしたか?
ページ内で指定した場所に移動できたと思います。
つまり次様な関係があります。
-----------------------------------------
(リンク元)
<a href="#a">Aに移動</a>




(リンク先)
<a mane="a">ここはA</a>
----------------------------------------
リンク先の name="" には、任意の名前を指定します。

名前には、アルファベットで始まる半角英数字(一部の記号も使用可)で好きな名前を指定できます。
(name="1abc"は数字で始まっているので使えません。)
名前に使用できる記号は、ハイフン( - )、アンダーバー( _ )、コロン( : )、ピリオド( . )の4つです。


リンク元の href="" には、シャープ( # )に続けて name="" で使用した名前を指定します。

この名前が、リンク元とリンク先を結びつけることになります。1ページ内に複数のリンク設定を行う場合には、この名前が重複しないように注意してください。






トラックバック(0)

このブログ記事を参照しているブログ一覧: 第8回リンクを張る

このブログ記事に対するトラックバックURL: http://kumao.net/mt/mt-tb.cgi/91

コメントする

KUMAOの押入TOPへ

カウンタ

アーカイブ

ウェブページ

ブログランキング・にほんブログ村へ

このブログ記事について

このページは、kumaoが2008年12月14日 13:28に書いたブログ記事です。

ひとつ前のブログ記事は「第7回 ../image/002.gif とは?」です。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。

books