無料ホームページ作成講座 >> HTML講座 >> ページを移動する

ページを移動する(リンクを張る)

リンク

1ページにいっぱい詰め込みすぎると見てくれる人は疲れるし、管理も大変です。
ページを分けて、ページを移動する(リンクを張る)文を作りましょう。

まずページを移動するには、移動するページが必要になりますよね。
index.htmlをメモ帳で開いてますよね、それを
index.htmlと同じフォルダに 名前を付けて保存 で 『 sub.html 』 としてください。

そしてタイトルに『 ページを移動しました 』とでも付けます。
出来ましたか?
ではテキストリンクで少し説明していきます。sub.html の上書き保存を忘れずに!!

テキストリンク


<a href="□□"> △△ </a>


□□ にリンクを張りたい参照先URL ( http://〜.jp/ 等) をいれます。
△△ に参照先のタイトルや何が表示されるのか分かりやすい文を入れます。

<a href="□□"> △△ </a> を書き込んだら

ここでは index.htmlファイル には □□ に sub.html を入れてください。

また、sub.htmlファイル には □□ に index.html を入れてください。

sub.htmlに移動するリンク(←文字サンプルです。リンクはしていません)

↑こんな風に△△に入れた文字が表示されクリックして移動できたら成功です。

画像リンク


<a href="URL"> <img src="画像の場所" alt="補足文"> </a>


コレで画像を使ってページを移動できます。
alt はこの画像が何なのかを補足するものです。
このページの左上の ホームページ初陣 の画像にポインタを合わせてみてください。
ホームページ初陣と表示されますよね。
altはコレを表示させるためのものです。

なぜ alt が必要なのか?
例をあげてみますね。
上がaltを使ったもの、下は使っていないものです。

Porta商店街

このよう画像が表示されない時に代替でテキストが表示されます。
上はどのページに行くかわかりますよね。
しっかり alt を使いましょう。

 

新しいウィンドウで表示


<a href="□□" target="_blank"> △△ </a>


target="_blank" を入れることで新しいウィンドウで開きます。

 

フレームを解除してウィンドウ全体に表示


<a href="□□" target="_top"> △△ </a>


target="_top" を入れることでフレームを解除して開きます。

 

同じウィンドウ又はフレーム内に表示


<a href="□□" target="_self"> △△ </a>


target="_self" を入れることでフレーム内にページを開きます。

 

HTMLの基本的な記述方法は、このサイトでは、ここまでにしておきます。

⇒ 次は、みんなに見てもらうための レンタルサーバー を借りましょう。