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

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

6.リンクを貼る

リンク

リンクを貼るとユーザーをページに飛ばすことが出来ます。

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

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

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

URLのリンク

別のファイルへのリンク

ページ内リンク

URLのリンク

まずはURLのリンクです。

 

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

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

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

 

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

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

 

 

 

別ファイルへのリンク

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

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

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

 

 

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

 

 

ページ内リンク

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

 

 

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

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

 

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

 

 

ここまでのまとめとしてブラウザで確認してみましょう

 

今回は

「URLリンク」

「別ファイルリンク」

「ページ内リンク」

について学びました。

 

 

次回は、「画像表示」についてやっていきたいと思います!