ホームページを作るにはHTML(HyperText Markup Language－ハイパーテキストマークアップランゲージ)というプログラミング言語を使う。この言語は何語なんだろうかと思えば、英語。もちろん英語に達者でなくともホームページは作れますが、自分で作るならやっぱり理解しておいたほうが、後々楽なんじゃないでしょうか。正直HTMLを見てすぐに理解するのは難しいかもしれませんが、じっくりここはHTMLの文法と単語の意味をひとつひとつ噛み締めながら、ホームページを作成していきたいと思います。この言語の英語に慣れれば、ホームページを自由自在にデザインを施せるようになれるでしょう。骨太のホームページビルダーを目指して、泥臭くそして理屈っぽくいってみましょう。
前回のおさらい。まずはこれが最初に来る部分。
次に行う作業は<html><head><body>の３個。それぞれどんな意味があるんでしょうか。www.w3schools.comから英語で、www.openspc2.orgから日本語で見てみましょう。
①<html>
This element tells a browser that this is an HTML document.
HTML文書であることを指定します。HTML文書の種類はで指定します。
②<head>
The head element can contain information about the document. The browser does not display the "head information" to the user.
ページのヘッダー（情報部分）を指定します。
③<body>
The body element defines the documents' body. It contains all the contents of the document (like text, images, colors, graphics, etc.).
ページの本文（ページ内容）を示します。
※この部分が実際にブラウザで表示されるんですね。
並び順はこんな感じ・・・
<html>
<head>
</head>
<body>
</body>
</html>
まとめるとこうなります・・・
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
</head>
<body>
</body>
</html>
通常は上のような感じになりますが、今回はウィンドウを２つに区切ってみたい。その場合は<frameset>というのを使うらしいのです。framesetとは何?
The frameset element defines a frameset. It is used to organize multiple windows (frames). Each frame holds a separate document.(www.w3schools.comより)
分割したフレームごとにドキュメントを表示させる。つまり、別々にドキュメントを用意するということですね。ここで大事なのは、タグは使いませんということです・・・。
タグの属性には、colsとrowsがあります。cols(columns)は縦列、rowsは横列を指定します。自分としては縦列を２・8の割合で分割したいので、属性にはcolsを使う。するとこんな感じになります。
<frameset cols = "20%, *"> ※「80%」の部分は「*」でもOK!
</frameset>
それから次にやらなければならないのは、との間にというものを入れないといけないらしい。www.openspc2.orgのサイトにありました、サンプルテキストを参照させていただくとこんな感じ・・・
<frameset rows="20%,*">
<frame src="top.html">
<frame src="bottom.html">
</frameset>
frameタグの定義は－Defines a sub window (a frame)。属性がsrc、値がURL、この属性は－Defines the URL of the file to show in the frame。srcとはsourceの略で、フレームに表示させたいドキュメントのある場所ってことでしょうか。その場所が値のURLということになるんだと思います。URLはUniform Resource Locatorの略。その意味は－インターネット上に存在する情報資源(文書や画像など)の場所を指し示す記述方式。インターネットにおける情報の「住所」にあたる。情報の種類やサーバ名、ポート番号、フォルダ名、ファイル名などで構成される(e-words.jpより)。ドキュメント君、君はこのフレームに表示されているけど元はどこにいたのかい? はい「top.html」というところです。つまり、「top.html」というファイルをこのフレームに引っぱってくるということでしょう・・・。分かったようで分からないような。ここはやりながら覚えましょう。
自分のですとこんな感じにすればいいんでしょうか。
<frameset cols = "20%, *">
<frame src ="left.html"> ※leftは20%の方です。
<frame src ="right.html"> ※rightは*(80%)の方です。
</frameset>
すべてをまとめるとこんな感じ・・・
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
</head>
<frameset cols = "20%, *">
<frame src ="left.html">
<frame src ="right.html">
</frameset>
</html>
これをInternet Explorerで見てみると、やりました!! 見事、フレームが出来上がってましたよ。今日はとりあえず自己満足の余韻を引きながら終わりということで・・・。次は分割したウィンドウに文字を表示してみたいですね。