せっかく、なんでもベスト３や絵と写真、お気に入りリンク集を作ったのでこれらを全部くっつけて自分のホームページにしましょう。 ここでフレームというものを使います。フレームを使えば、画面を複数に分割し、左のフレームの項目をクリックすると、右のフレームにその内容が表示されるといった使い方ができます。
Netscape
とメモ帳で HP.html を開いて下さい。これがフレームを使ったホームページです。
まず
<FRAMESET> タグを使って１つのページを分割します。フレームを設定したHTML ファイルには <BODY> タグがないことに注意して下さい。
|
<HTML>
<HEAD> <TITLE>Youko`s HomePage</TITLE> </HEAD>
<FRAMESET COLS="25%,75%"> <FRAME NAME="choice" SRC="mokuji.html"> <FRAME NAME="view" SRC="title.html"> </FRAMESET>
</HTML> |
<FRAMESET COLS=
？ %, ＄ %> ･･･ </FRAMESET> でページを左右に分割します。？％で左側、＄％で右側の幅の大きさを決めます。このとき？＋＄＝１００になるようにして下さい。
つぎに
<FRAME NAME= ”左側のフレームの名前” SRC= ”読み込むファイル名”> を書き、続けて <FRAME NAME= ”右側のフレームの名前” SRC= ”読み込むファイル名” > を書きます。今回は左側のフレームの名前を
choice として、そこに mokuji.html をロードし、右側のフレームの名前を view として、 title.html をロードしています。フレームの名前はどんな名前をつけてもかまいません。
なぜ名前をつけるんだろう、とかいろいろ疑問が出てくると思いますが、とりあえずフレームとはこういうものだと覚えて下さい。
ページをフレームに分割できたところでこのページを徐々に自分のものにしていきましょう。
このファイルは
<TITLE> のところだけ自分の名前に変えて、上書き保存して下さい。
|
<HTML>
<HEAD> <TITLE>Youko`s HomePage</TITLE> </HEAD>
<BODY BGCOLOR=pink TEXT=red> <CENTER> <H1> 洋子のホームページ </H1><BR> <BLINK> <H3>WELCOME TO YOUKO`S HOMEPAGE<H3> </BLINK> </CENTER> </BODY>
</HTML> |
それではまず、自分のタイトル画面を作りましょう。メモ帳で
title.html を開いてください。この
HTML ファイルが右側のフレームにロードされているわけです。ここに出てくるタグはもうわかりますね。自分なりに書き換えて上書き保存しておいて下さい。
|
<HTML>
<HEAD> <TITLE>Youko`s HomePage</TITLE> </HEAD>
<BODY> <A HREF="info.html" TARGET="view"> 自己紹介 </A><BR> <BR> <A HREF="graphic.html" TARGET="view"> 絵と写真 </A><BR> <BR> <A HREF="best3.html" TARGET="view"> なんでもベスト３ </A><BR> <BR> <A HREF="link.html" TARGET="view"> お気に入りリンク集 </A></BODY>
</HTML> |
さてつぎに、メモ帳で
mokuji.html を開いてください。これは、左側のフレームにロードされていたファイルです。
・
<A HREF=” ファイル名 ” TARGET=” フレーム名 ”> ･･･ </A> はリンクのところでやったものとほとんど同じで、ファイル名のところは URL を入れてもかまいません。ただ違うところは、
TARGET=” フレーム名 ” とあるように、このタグで囲まれたホットテキストをクリックすると、指定されたフレームに HTML ファイルがロードされます。今回のものを例に説明すると、左側のフレーム（
choice フレーム）にある、なんでもベスト３というホットテキストをクリックすると、右側のフレーム（ view フレーム）に best3.html がロードされるわけです。とりあえずこのファイルは
<TITLE> の部分を変えるだけでいいと思います。
|
<HTML>
<HEAD> <TITLE>Youko`s HomePage</TITLE> </HEAD>
<BODY BGCOLOR=aqua TEXT=red> <CENTER> <H1> 洋子の自己紹介 </H1></CENTER> <HR> <UL> <LI><B> 名前 </B> ：永井 洋子<LI><B> 生年月日 </B> ：昭和５９年９月１１日<LI><B> 星座 </B> ：おとめ座<LI><B> 血液型 </B> ：Ｂ型<LI><B> 住所 </B> ：東京都小平市<LI><B> 出身校 </B> ：若林小学校<LI><B> クラブ </B> ：ブラスバンド部<LI><B> 趣味 </B> ：音楽を聴くこと、ゲームをすること</UL> <BR> </BODY>
</HTML> |
こんどは
choice フレームにある自己紹介をクリックしたときにロードされるinfo.html をつくりましょう。ここはせっかく基本編で作ったものがあるのでそれを使います。まずメモ帳に
sample.html を開いてください。そして上のように余分なものを消して、必要であれば色などをつけて、ファイルの、名前をつけて保存を選び info.html として保存してください。さあこれでフレームを使った自分のホームページができたはずです。
Netscape で HP.html のファイルを開いてみてください（すでに HP.html を開いている人はリロードして下さい）。
うまく自分のホームページが画面にでたら、左側のフレームのホットテキストを選んで、自分のホームページをみてみましょう。どうですか、うまくできていますか。
しかし、これではいちばんはじめのタイトル画面に戻れませんね。
そこで、
info.html 、 best3.html 、 graphic.html 、 link.html それぞれの HTML ファイルの </BODY> の上に<A HREF=”title.html”>
タイトルに戻る </A>を挿入してみてください。
どこのページからでもタイトル画面に戻れるようになります。
これで、ホームページを作ろう（応用編）も終わりです。
今回、学んだことをフルに活用して自分なりのホームページを作ってみてください。
HTML にはまだまだいろいろなタグがあり、もっともっといろんな事ができます。このテキストをきっかけにみなさんがホームページ作りに興味をもっていただければ、幸いです。
最後に、今回使ったタグに加えて、基本的なタグの一覧表をのせておきます。
ぜひ、活用して下さい。