ホームページ作成講座 -入門編-第8講
第8講では、「リンク」方法と「aタグ」の使い方について解説します。 第7講をまだお読みでない方は、先に第7講をお読みください。
スポンサーリンク
リンクしよう
サトシ、「test.htm」を「test2.htm」というファイル名で保存してごらん | |
え? なんで? | |
「リンク」をするには他のページがないと駄目だろ | |
ああ たしかに ・・・よし 保存したぜ | |
じゃあ「test2.htm」から「test.htm」に「リンク」させようか |
今「メモ帳」で開いている「test.htm」を「test2.htm」という新しい名前で保存しましょう。 やり方については「test.htm」を初めて保存した時と同じです。忘れてしまった場合は講座2を参照しましょう。 それでは、「test2.htm」から「test.htm」に「リンク」させる方法を解説します。 「リンク」をするには「aタグ」を用います。
<html><body><a href="./test.htm">テストページへ</a></body></html>
リンクさせたい文字の部分に <a>〜</a> の形で設定し、「href属性」を「href="***"」という形で指定します。 「***」は「リンク」したいページのファイルまでのパスを設定します。通常は「相対パス」です。忘れてしまった場合は講座6を参照しましょう。 ここでは「test.htm」にリンクさせたいので、「./test.htm」とします。 実行すると、次のようになります。
よっしゃ! 「リンク」できるようになったぜ! | |
更に 「target属性」を設定すれば 新しいウィンドウに表示させたり出来るぞ |
「リンク」先のページを新しいウィンドウに表示させるには「target属性」に「_blank」を設定します。
<html><body><a href="./test.htm" target="_blank">テストページへ</a></body></html>
「target="_blank"」という形で設定します。「_(半角アンダーバー)」を忘れないようしましょう。 「target属性」を設定しない場合は、「target="_self"」とした場合と同じになります。 ページが「フレーム」で表示されている場合、「target="_top"」とすれば、全ての「フレーム」分割を消去して表示します。 「target="_parent"」とすれば、1つだけ「フレーム」分割を消去して「親フレーム」に表示します。 また、「target="***"」で「***」に「frameタグ」の「name属性」で指定した名前を設定すれば、その「フレーム」分割したページに表示されます。 「フレーム」は1つのウィンドウに複数のページを表示できる機能です。詳しくは、後ほど解説します。
ホントだ! 新しいウィンドウが勝手に出てくる! | |
他のホームページに「リンク」する時は 自分のページと区別するために 新しいウィンドウに表示するのが好ましいぞ | |
そうなんだ | |
それとな 「aタグ」は「リンク」するためだけの「タグ」ではないぞ | |
え? 他にも出来る事があるのか? |
「aタグ」に「name属性」を設定して、名前付けを行うことが出来ます。
<html><body><a name="syoukai">ページ内容の紹介</a></body></html>
「name="***"」という形で設定します。 「***」は付けたい名前を半角英数字で自由に指定できますが、最初の文字に数字を使うのは推奨されていません。 「./test2.htm#syoukai」と、ファイル名の後ろに「#(半角シャープ)」を付けて、その後に「name属性」で名前付けした名前を指定して「リンク」すると、ページ移動後にその部分に自動スクロールされます。 同一ページ内に「リンク」を張りたい場合は「#syoukai」のように、ファイル名を省略できます。 ただし、ページ内容がスクロールする必要がある程に多くないと意味がありません。 下の例では、「name="t1"」と名前付けしてある上記タイトル「リンクしよう」の部分に瞬間スクロールします。
・・・
<a href="#t1">タイトルの部分へ</a>
・・・
「aタグ」って便利だな! | |
前講で教えた「bodyタグ」の「link属性」と一緒に練習してごらん | |
ああ そうだった そうだった ・・・あれ・・・ どうやるんだっけ・・・ | |
おいおい・・・ 頼むぜ サトシ・・・ |
まとめ
- 「aタグ」の「href属性」にページ名を設定すると「リンク」できる
- 「aタグ」の「target属性」で「リンク」先のページを表示させるウィンドウを設定できる
- 「aタグ」の「name属性」を設定すると名前付けできる
- 「name="***"」と名前付けした部分にリンクする場合は「#***」をファイル名の後ろに付ける
スポンサーリンク