ここでは、IT系企業の新入社員向けにHTMLを解説しています。

デザイナーになるほどHTMLに詳しくなくてもいいけれど、Webアプリを作る上で必要な入力画面は自力で作りたい、そんなあなたのためのページです。

7.リンクを貼る

リンク

リンクを貼るとユーザーを別ページに誘導することができます。

HTML(HyperText Markup Language)には“Hyper”(超える)“Text”(今までのテキストを)という意味があります。

まさに、HTMLの語源になっているのがこのリンクの機能です。 

今回は、以下の3つのリンクについて学びます。

URLのリンク

別ファイルへのリンク

ページ内リンク

<アウトプットイメージ>

ブラウザで確認する

URLのリンク

まずはURLのリンクです。

<アウトプットイメージ>

ヤフージャパンへ

<ソースコード>

 

リンクを作るにはこのように<a>タグを使います。

“href”でリンク先を指定します。

ちなみに“a”は「anchor(錨)」、“href”は「hyper reference」の略です。

今回は、例としてヤフージャパンのURLを指定しています。

 

なお、下記のようにtarget属性に”_blank”を指定すると、

別タブで開くリンクにすることができます。

 <アウトプットイメージ>

ヤフージャパンを新しいタブで

<ソースコード>

ただし、ユーザーが現在ページを見失ったり、「戻るボタン」が使えなくなるというデメリットは把握して使いましょう。

 

別ファイルへのリンク

次に別のファイルへのリンクです。

<ソースコード> 

別ファイルを用意し、同じ階層配置します。

その(パスを含んだ)ファイル名を“href”で指定します。

今回はリンク先として同一のフォルダ内にあるnext.htmlとしています。

ここでもしも、リンク先のファイルが同一のフォルダ内になかったらどのように指定したら良いでしょうか?

下位フォルダにある場合と上位フォルダを辿る必要がある場合とに分けて説明します。

1.下位フォルダにある場合

underフォルダ内のnext.htmlを指定しています。

そのまま直感的に表現できます。

2.上位フォルダを辿る必要がある場合

「..」で一つ上のフォルダに移動します。

「../brother/」は同じ階層にあるフォルダ内のファイルという意味になります。

このようなパスの指定方法を相対パスといいます。

自分自身(のHTMLファイル)から見た相対的な位置関係を指定するのでこの名前があります。

もうひとつ「http://」で始まる絶対パスという方法もありますが、リンク先の指定方法としては相対パスのほうが優れています。

なぜなら、ドメインを変更しても、リンクを修正しなくて良いからです。

なお、相対パスは「現在地からの道案内」、絶対パスは「住所」に例えることができます。

ページ内リンク

最後にページ内リンクです。

 
<ソースコード>

 

リンクしたいところに“id”を指定します。

リンク先のidは同じものを記入します。

このように書けば、ページ内リンクを作ることができます。

 

 

以上、今回は「URLリンク、別ファイルリンク、ページ内リンク」について学びました。

次回は、「画像を貼って表現力アップ」する方法について学びましょう。