扉のページへ｜上へ｜前のページ｜次の章

ハイパーリンク

ＨＴＭＬで書かれたファイルの特徴は，ボタンの役割をする部分を設定し，同じファイルや別のファイルのページにジャンプさせることができることです．

単純なハイパーリンク

基本的な書き方は，

<A HREF="URI"> クリックしてもらう文字や画像 </A>

ここで，「URI」とは呼び出すファイルの場所と名前のことです．リンクの行く先によって指定の仕方が変わります．

他のファイルへのリンク

最も単純でよく使うのは， URI として単にファイル名を指定することです．つまり，

<A HREF="ファイル名"> クリックしてもらう文字や画像 </A>

の様にします．こうすると，クリックしたときに「ファイル名」に指定したファイルが呼び出されます．
ただし，この時注意しなければならないのは，呼び出す側のファイルと，呼び出される側のファイルが，コンピューター上で同じフォルダーの中になければなりません．

同じ場所にないファイルを呼び出す場合は，呼び出すファイルから見て呼び出されるファイルの位置がどこにあるかを含めて指定しなければなりません．

呼び出すファイルが別の場所にある場合

練習１－５

ブラウザにホームページアドレスを入力してwebページを呼び出すと，自動的に「index.html」というファイルが呼び出されるようになっています．従って，「index.html」を必ず作成し，他のページはそこからハイパーリンクで辿れるように作らなければなりません．

ここでは，自分の「index.html」を作成し，ハイパーリンクの練習をしてみます．

  1. VSCode で「HTML」の新規ファイルを作り，「HTMLの骨格」を書き，「index.html」という名前で保存する．
  2. 「index.html」に以前作成した「renshu1.html」へのハイパーリンクを「ホームページの練習」という文をクリックして呼び出せるように作る．
  3. 保存した後，ブラウザで「index.html」を表示させハイパーリンクが動作することを確かめましょう．

より高度なリンク

同じファイルの特定の場所にリンクする

クリックするところに，

<A HREF="#識別名"> クリックしてもらう部分 </A >

呼び出したい先のHTML要素に,「ID属性」を使用して次のように指定しておきます．

<（何らかのHTML要素） ID=" 識別名 "> リンクの行き先 </(何らかの要素)>

この 「識別名」 の部分は自分で分かりやすいキーワードに決めます．
ただし，同じファイル内で同じ識別名を使用してはいけません．

後々の利便性を考えて，全ての見出しにはID属性を付けておくと良いでしょう．

例

例えば，このページの <BODY> に 「 top 」 という「ID属性」を付けておけば，

このページの先頭へ

というようなボタンを作ることが出来ます．

今の場合は，<BODY> のところを

<BODY ID="top">

クリックするところに，

<A HREF="#top"> このページの先頭へ </A>

と書けばよいのです．

別のファイルの特定の場所にリンクする

クリックするところに，

<A HREF="URI#識別名"> クリックしてもらう部分 </A>

リンク先には次のように指定しておきます．

<(何かの要素) ID="識別名"> リンクの行き先 </(何かの要素)>

例

例えば，以前のページ（「jyoho_mk1.html」 というファイル）の「インターネット使用法」という見出しに 「usage」 というIDを付けておけば，

dammy インターネットの使用法

というようなリンクを作ることが出来ます．

今の場合は，「jyoho_mk1.html」 というファイルの「インターネットの使用法」という見出しのところに

dammy
<H2 ID="usage">インターネットの使用法</H2>

クリックするところに，

<A HREF="jyoho_mk1.html#usage">インターネットの使用法</A >

のように書けばよいのです．

別のホームページにリンクする

クリックする部分に

<A HREF="http://(homepage-address)"> クリックしてもらう部分 </A>

とすれば，他のホームページにリンクを張れます．

例

例えば，

<A HREF="http://www.kitasato-u.ac.jp"> 北里大学ホームページ </A>

とすれば，次のようになります．

クリックして下さい． 北里大学ホームページ

読み込むウィンドウを指定する

通常リンク先のファイルは,呼び出したファイルと同じ窓に読み込まれますが,「TARGET属性」を指定することによって,これを変更することが可能です.指定できる値は以下のものです.

ウィンドウ名予めウィンドウに名前を付けておきそれを指定
_blank新しい窓を開いて表示
_self元と同じ窓に表示
_parent現在の窓の親に当たる窓に表示
_top最も上位の窓に表示

例

例えば，

<A HREF="http://www.kitasato-u.ac.jp" TARGET="_blank"> 北里大学ホームページ </A>

とすれば，次のようになります．

クリックして下さい． 北里大学ホームページ

練習１－６

  1. 新しいファイルを作成し，HTMLの骨格，「好きな季節」，「行ってみたい場所」の文章を入力し，「renshu2.html」として保存する．この時，いままで学習したセクションや「見出し」，「段落」等を使用する．見出しには「ID属性」を設定しておく．
  2. 「index.html」，「renshu1.html」，「renshu2.html」の各ページに，「他ページへのリンク」を作成する．特に，renshu2.htmlへのリンクには見出しへのリンクも作ってみる．
  3. リンクがうまく動作することを確認する．

練習１－７

今まで作成したHTMLファイルを「stuサーバー」（学生用のWEBサーバー）にある自分のホームディレクトリーの中の「public_html」と言うディレクトリーに送ってみましょう．参照：ホームページを公開する

公開したら，ブラウザに自分のホームページアドレス（参照：ホームページを見る）を入力して表示できることを確認しましょう．

HTML文法チェック

公開したホームページや，作成したHTMLファイルの文法をチェックしてくれるサイトがあります．

代表的なサイト

  1. Another HTML-lint：HTML 文法チェッカー
  2. The W3C Markup Validation Service：HTML 文法チェッカー
  3. (X)HTML5 Validator：HTML 文法チェッカー
  4. W3C CSS 検証サービス ：CSS 文法チェッカー

練習１－８

自分のホームページをチェックして，エラーがあったら修正しましょう．
注意：Another HTML-lint の場合，HTMLヴァージョンをHTML5にしてチェックして下さい．

扉のページへ｜上へ｜前のページ｜次の章