HTML&CSS入門「aタグでページリンクを作ろう」

スポンサーリンク
Pocket
LINEで送る

別ページに飛ぶリンクを作るにはaタグを使います。今回はaタグについて学習しましょう。

aタグを使ってリンクを作ろう

aタグの基本的な使い方は以下の通りです。

<a href=”飛ばしたいURL”>リンク文字</a>

では、実際に使って見ます。

htmlファイルのbodyタグに以下のコードを記述してみてください。

<a href=”http://notsleeeping.com/”>プログラマーは眠らないトップページ</a>

これをブラウザで見るとこのサイトのトップページへのリンクが表示されます。

 

リンクを別タブで開きたいときはtarget=”_blank”を設定します。

スポンサーリンク

<a href=”http://notsleeeping.com/” target=”_blank”>プログラマーは眠らないトップページ</a>

 

別ファイルに飛ばす

メインのページindex.htmlから別のhtmlファイルに飛ばしてみましょう。

index.htmlと同じディレクトリ(フォルダ)にpage1.htmlというファイルを作成しましょう。

index.htmlにpage1.htmlというファイルに以下のリンクをつけます。

<a href=”page1.html”>2ページ目へのリンク</a>

hrefにリンク先のファイル名を指定することでそのファイルに飛ばすリンクが表示されます。