第５回目

1. 分割表示に関するタグ

<FRAMESET COLS="分割するウィンドウのサイズ">
<FRAME SRC="表示するページのURL">
</FRAMESET>
ウィンドウを左右に２つ(以上)に分割する.
分割された各画面を「フレーム」と呼ぶ.
分割するとき，<BODY> ... </BODY> のタグは使ってはならない．
「分割するウィンドウのサイズ」はいずれかの方法で指定：
- 左右のページの割合により指定 ==> "30%, 70%", "30%, 30%, 40%" など
- 一つののページの幅を指定し, 右側のページは残りを使う ==> "100,*", "*, 500, 200" など
２つのフレームに分割する場合，少なくとも３つのページを用意する必要あり：
- 分割の設定をするページ（下記の例では frame1.html）
  このページに <FRAMESET COLS="..."> を書く．
  このページでは<BODY> ... </BODY> のタグは使わない！
- 左側のフレームで表示するページ（下記の例では left.html）
- 右側のフレームで表示するページ（下記の例では right.html）
  これらのページは普通のページと同様に書いて良い．
  他人のつくったページをリンクしても良い．

使用例: frame1.html

<HTML> <HEAD> <TITLE> フレームの例1</TITLE> </HEAD> <FRAMESET COLS="30%,70%"> <FRAME SRC="left.html"> <FRAME SRC="right.html"> </FRAMESET> </HTML>

<FRAMESET ROWS="分割するウィンドウのサイズ">
<FRAME SRC="表示するページのURL">
</FRAMESET>
ウィンドウを上下に２つ(以上)に分割する.

使用例: frame2.html

<HTML> <HEAD> <TITLE> フレームの例2</TITLE> </HEAD> <FRAMESET ROWS="200,*"> <FRAME SRC="http://www.tohoku.ac.jp/"> <FRAME SRC="http://www.tohoku.ac.jp/index-j.html"> </FRAMESET> </HTML>

<FRAMESET FRAMEBORDER="no">
... </FRAMESET>
フレームの境界線をすべてなくす．
<FRAME FRAMEBORDER="no">
特定のフレームの境界線をなくす．
<FRAMESET BORDER="数値">
... </FRAMESET>
フレームの境界線の太さを指定．

使用例: frame3.html

<FRAMESET COLS="15%,70%,15%" BORDER="20"> <FRAME SRC="left.html"> <FRAME SRC="http://www.tohoku.ac.jp/" FRAMEBORDER="no"> <FRAME SRC="right.html" FRAMEBORDER="no"> </FRAMESET>

<FRAMESET BORDERCOLOR="色の名前">
... </FRAMESET>
フレームの境界線に色を付ける．
<FRAME MARGINHEIGHT="数値" MARGINWIDTH="数値">
フレーム内に表示するページの上下および左右の余白を指定する．

使用例: frame4.html

<FRAMESET COLS="50%,50%" BORDER="20" BORDERCOLOR="maroon"> <FRAME SRC="http://www.tohoku.ac.jp/" MARGINWIDTH="100"> <FRAME SRC="http://www.tohoku.ac.jp/index-j.html" MARGINHEIGHT="100"> </FRAMESET>

左のフレーム内でのリンク先を右のフレームで表示させる方法
- 分割の設定をするページ --- frame5.html
- 左のフレームで表示するページ --- contents.html
- 右のフレームで表示するページ --- body.html
の場合：

（１）分割の設定をするページ frame5.html において, NAME="..." のようにして右のフレームに名前をつける．

例：

<FRAMESET COLS="20%,80%"> <FRAME SRC="contents.html"> <FRAME SRC="body.html" NAME="body"> </FRAMESET> </HTML>

（２）左のフレームに表示するページ contents.html においてリンクを作成するときに，次のように TARGET="..." をつける．
"..." の部分は，右フレームの名前（今回は body）を入れる．

例：

目次 <P> <A HREF="http://www.tohoku.ac.jp/" TARGET="body"> 東北大（英語版）</A><BR> <A HREF="http://www.tohoku.ac.jp/index-j.html" TARGET="body"> 東北大（日本語版）</A><BR> <A HREF="http://www.library.tohoku.ac.jp/" TARGET="body"> 付属図書館 </A><BR> <A HREF="http://www.isc.tohoku.ac.jp/" TARGET="body"> 情報シナジーセンター </A>

（３）右のフレームに表示するページ body.html には，最初に表示するページを適当に作る．

左のフレーム内でのリンク先をウィンドウ全体で表示させる方法
上記の（２）において, TARGET="_top" とする．

使用例: frame6.html

2. その他のタグ

<BODY BACKGROUND="画像ファイル名">
... </BODY>
ページの背景にイメージを配置する．
指定した画像ファイルにより，ページの背景が縦横に埋め尽くされる．
例１：青い四角いボタンを背景にした場合 bg1.html
例２：茶色のチェック模様を背景にした場合 bg2.html
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=euc-jp">
ページの文字化けを防ぐために, あらかじめ文字コードを指定する．
"euc-jp" は EUC のときに使う．
シフトJISのときは "Shift_JIS"，JISコードのときは "iso-2022-jp" を使用．
※ダブルクォーテーションの位置に注意！
<META HTTP-EQUIV="refresh" CONTENT="数値; url=ページのURL">
ページを自動的に読み込ませる．
<HEAD> ... </HEAD> の間に入れて使用．
「数値」で指定した秒数後に, 「ページのURL」で指定したページを自動的に読み込む．
※ダブルクォーテーションの位置に注意！

使用例: auto.html

<HTML> <HEAD> <TITLE> 自動でページを読み込む </TITLE> <META HTTP-EQUIV="refresh" CONTENT="3; url=http://www.tohoku.ac.jp"> </HEAD> <BODY> ３秒後に東北大のページにジャンプします． </BODY> </HTML>

<BODY LINK="色の名前" ALINK="色の名前" VLINK="色の名前" >
... </BODY>
ページのリンクに関連する文字の色を設定する．
LINK はリンクが設定された部分の文字の色（通常は青）
ALINK はリンクが設定された部分の文字をクリックしているときの文字の色（通常は赤）
VLINK はリンクが設定された部分の文字の色（リンク先をすでに訪問した場合）（通常は紫）

使用例: link2.html

<BODY BGCOLOR="pink" LINK="white" ALINK="gray" VLINK="black"> リンクに関連する文字の色を変えてみました． <A HREF="http://www.is.tohoku.ac.jp"> 東北大学情報科学研究科 </A> </BODY>

第５回目レポート課題:
これまで習ったタグを活用して，自己紹介を中心とした自分のホームページを作成すること．

必須項目:

フレームを利用すること．
過去のレポートへのリンク一覧を作ること．
文字化けが起こらないように, タグ <META HTTP-EQUIV="Content-Type" CONTENT="text/html; CHARSET=euc-jp"> を使うこと．

メインとなるページのファイル名: index.html
締め切り:
火曜日の受講生，金曜日の受講生ともに →１１月３０日（木）まで

注意:

ページを公開するときに, index.html を公開するだけでなく,
- リンクしているページのファイル
- 表示している画像ファイル
すべてを公開すること．
index.html というページを公開すると, 次のような変化がみられます：
自分のページのURL
http://www.cs.ecip.tohoku.ac.jp/campus/b1i/users/自分のアカウント/ を指定すると, 自動的に index.html のページが表示されます．
特に, netscape の「ホーム」ボタンを押すと index.html のページが表示されます．
逆に, 今までは表示されていた公開ページの一覧は表示されなくなります．

★ 火曜日受講生のページ一覧のためのURLは http://www.cs.ecip.tohoku.ac.jp/campus/b1h/users/ （学内限定）
★ 金曜日受講生のページ一覧のためのURLは http://www.cs.ecip.tohoku.ac.jp/campus/b1i/users/ （学内限定）

★ webページの作り方についてもっと知りたい学生は http://tohoho.wakusei.ne.jp/www.htm などのページを見て勉強して下さい．