ページをリンクする


トップへ  HPの作り方MENUへ


これでホームページらしくなる!

ひとつページを作ったら、次はリンクです。
皆さんは今、トップページから「HPをつくろう!」という文字をクリックして、移動したページの「画像なし」という文字をクリックして・・・というようにしてこのページにきているはずです。
このように、ページとページをつなげるのがリンクの役目なのです。
このリンクをつたって世界中の様々なホームページを見る、これこそがインターネットの最大の楽しみではないでしょうか?
では、皆さんもリンクをつくってみましょう!


その1 ページを二つ用意する

リンクするには、ページが2つないと始まりません。
別に自分で2つのページを必ず用意しなければならないというわけではありませんが、ホームページ制作に早くなれるためにも自分で2つ用意してみましょう。
皆さんはもうすでに自己紹介のページを作ってあるので、今回はトップページをつくってみましょう。

これはあくまでも例です。このようなものを自分でつくってみて下さい。
(例の中で出てくる線は<HR>というタグを使っています。使いたい場合は<HR>タグを線を引きたい場所に書き込んで下さい。改行されて線が引かれます。また、終了タグは必要ありません)


その2 保存場所のチェックと再編集

皆さんは作成したHTMLファイルをどこに保存しているのでしょうか?デスクトップ?それともMyDocuments?
保存する場所は実は皆さんの好みでかまわないのですが、今後たくさんのファイルを管理するのを楽にするために、ここでひとつにまとめてしまいましょう。
まずデスクトップでマウスの右ボタンをクリックし、[新規作成]→[フォルダ]を選択して下さい。
新しいフォルダが作成されましたね。そうしたらそのフォルダの名前を[homepage]にして、ドラッグアンドドロップで移動して下さい。
(ドラッグアンドドロップで移動するとは・・・・。まずコピーしたいファイルを左クリック。そして、マウスの左ボタンを押したままhomepageフォルダの所までマウスカーソルを持っていき、そこで左ボタンを離す。これで最初に選択したファイルがhomepageフォルダの中に移動するはずです。)

ついでに、一度保存したHTML文章を編集する方法を紹介します。
まずはメモ帳を起動。[ファイル]→[開く]で出てくるウインドウの[ファイルの種類]を[すべてのファイル]にして保存したHTML文章を読み込めば、また編集する事ができます。
編集したHTML文章は、メモ帳の[ファイル]→[上書き保存]で簡単に保存できます。

その3 ページをリンクでつなぐ

それでは、用意した2つのページをつないでみましょう。
リンクは<A>タグのHARF属性でリンク先ファイル名を指定して行います。
・・・文章だとわかりづらいので、実際にやってみましょう。

私はトップページを[index.html]、自己紹介のページを[profile.html]というファイルに保存しました。
この場合トップページから自己紹介へのリンクを作るには<A HREF="profile.html">〜</A>というタグを使います。
〜の部分に、クリックしたらリンクするようになる部分を書き込みます。
私の場合、「自己紹介のページに行く」という部分をクリックしたらリンクするようにしたいので、次のように書きます。

<A HREF="profile.html">自己紹介のページに行く</A>

これで「自己紹介のページに行く」という部分をクリックしたら、自己紹介のページにリンクするようになりました。

今度は自分のページでやってみましょう。
<A HREF="profile.html"></A>のprofile.htmlというところに、自分の自己紹介を書いたファイルの名前を入れて下さい。
そして「〜」のところにすきな言葉を入れ、終了タグの</A>で閉じればできあがりです。ちゃんとリンクできるか確かめて下さい。
「リンクできない!」という人は、リンク先のファイル名が正しいか、またリンク先のファイルがトップページと同じ「homepage」フォルダに入っているかを確認して下さい。




トップへ  HPの作り方MENUへ