Introductory Experiments in the Laboratory
テンプレート4
下のソースコードをエディタにコピーアンドペーストして編集してください。赤文字の部分をコメント表示<!-- -->に従って書き換えて使用します。基本的に改変は自由です。
文字化けするときは文字コードのcharset=Shift_JISをcharset=euc-jpかcharset=iso-2022-jpに変えてみてください。
文字化けするときは文字コードのcharset=Shift_JISをcharset=euc-jpかcharset=iso-2022-jpに変えてみてください。
フレームページ
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html lang="ja">
<head profile="http://iel.nobody.jp/">
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>My Web Site</title><!-- ページタイトルを記入 -->
</head>
<frameset cols="20%, *"><!-- 左右フレームの比率を指定 -->
<frame src="templete04-1.html" name="menu"><!-- 左側ページを指定 -->
<frame src="templete04-2.html" name="main"><!-- 右側ページを指定 -->
<noframes><!-- フレームが表示できないときのコメント -->
このページを表示するには、フレームをサポートしているブラウザが必要です。<br>
このブラウザはフレームセットをサポートしていません。<br>
</noframes>
</frameset>
</html>
<html lang="ja">
<head profile="http://iel.nobody.jp/">
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>My Web Site</title><!-- ページタイトルを記入 -->
</head>
<frameset cols="20%, *"><!-- 左右フレームの比率を指定 -->
<frame src="templete04-1.html" name="menu"><!-- 左側ページを指定 -->
<frame src="templete04-2.html" name="main"><!-- 右側ページを指定 -->
<noframes><!-- フレームが表示できないときのコメント -->
このページを表示するには、フレームをサポートしているブラウザが必要です。<br>
このブラウザはフレームセットをサポートしていません。<br>
</noframes>
</frameset>
</html>
メニューページ
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head profile="http://iel.nobody.jp/">
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<base target="main">
<title>My Web Site</title><!-- ページタイトルを記入 -->
</head>
<body bgcolor="#ffffff" text="#003333"><!-- 背景色、文字色を指定 -->
<div align="center"><span style="font-size: 14pt;"><!-- 文字の大きさを指定 -->
<br>
MENU<br>
<br>
<a href="">menu1</a><br>
<br>
<a href="">menu2</a><br>
<br>
<a href="">menu3</a><br>
<br>
<a href="">menu4</a><br>
<br>
</span>
<br>
<!-- Yahoo! -->
<form method="get" action="http://search.yahoo.co.jp/bin/search" target="_blank" style="width:160px;">
<table width="160" border="0" cellpadding="0" cellspacing="0">
<tr><td>
<a href="http://www.yahoo.co.jp/">
<img src="http://i.yimg.jp/images/search/sb_y_logo.gif" alt="Yahoo! JAPAN" border="0"></a>
<input type="text" name="p" size="20">
<input type="hidden" name="fr" value="ysvn">
<input type="image" height="21" alt="検索" width="47" src="http://img.yahoo.co.jp/images/s_w.gif" name="search" style="margin-top: 10px">
<input type="image" height="21" alt="画像" width="47" src="http://img.yahoo.co.jp/images/s_i.gif" name="isearch" style="margin-top: 10px">
<br>
<input type="image" height="21" alt="ニュース" width="47" src="http://img.yahoo.co.jp/images/s_n.gif" name="nsearch">
<input type="image" height="21" alt="辞書" width="47" src="http://img.yahoo.co.jp/images/s_d.gif" name="dsearch">
</td></tr>
</table>
</form>
<!-- Yahoo! -->
</div>
</body>
</html>
<html lang="ja">
<head profile="http://iel.nobody.jp/">
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<base target="main">
<title>My Web Site</title><!-- ページタイトルを記入 -->
</head>
<body bgcolor="#ffffff" text="#003333"><!-- 背景色、文字色を指定 -->
<div align="center"><span style="font-size: 14pt;"><!-- 文字の大きさを指定 -->
<br>
MENU<br>
<br>
<a href="">menu1</a><br>
<br>
<a href="">menu2</a><br>
<br>
<a href="">menu3</a><br>
<br>
<a href="">menu4</a><br>
<br>
</span>
<br>
<!-- Yahoo! -->
<form method="get" action="http://search.yahoo.co.jp/bin/search" target="_blank" style="width:160px;">
<table width="160" border="0" cellpadding="0" cellspacing="0">
<tr><td>
<a href="http://www.yahoo.co.jp/">
<img src="http://i.yimg.jp/images/search/sb_y_logo.gif" alt="Yahoo! JAPAN" border="0"></a>
<input type="text" name="p" size="20">
<input type="hidden" name="fr" value="ysvn">
<input type="image" height="21" alt="検索" width="47" src="http://img.yahoo.co.jp/images/s_w.gif" name="search" style="margin-top: 10px">
<input type="image" height="21" alt="画像" width="47" src="http://img.yahoo.co.jp/images/s_i.gif" name="isearch" style="margin-top: 10px">
<br>
<input type="image" height="21" alt="ニュース" width="47" src="http://img.yahoo.co.jp/images/s_n.gif" name="nsearch">
<input type="image" height="21" alt="辞書" width="47" src="http://img.yahoo.co.jp/images/s_d.gif" name="dsearch">
</td></tr>
</table>
</form>
<!-- Yahoo! -->
</div>
</body>
</html>
メインページ
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head profile="http://iel.nobody.jp/">
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta name="keywords" content="東京大学,情報処理"><!-- 検索に使用するキーワードを記入 -->
<title>My Web Site</title><!-- ページタイトルを記入 -->
<style type="text/css">
<!--
p{ font-size: 14pt; padding: 10px; }
//-->
</style>
</head>
<body bgcolor="#ffffff" text="#003333"><!-- 背景色、文字色を指定 -->
<div align="center">
<span style="font-size: 24pt;color: #ff3333;">Site Title</span><br>
<br>
<img src="tokeidai.jpg" alt="東京大学"><!-- 画像を指定 -->
</div>
<p>test text test text test text test text test text test text test text test text test text </p>
<p>The quick brown fox jumps over the lazy dog.<br>The quick brown fox jumps over the lazy dog.</p>
<p>The quick brown fox jumps over the lazy dog.<br>The quick brown fox jumps over the lazy dog.<br>
The quick brown fox jumps over the lazy dog.</p>
<br>
<div align="right" style="font-weight: bold;">Copyright© 2003 YOUR NAME , All Rights Reserved.</div>
</body>
</html>
<html lang="ja">
<head profile="http://iel.nobody.jp/">
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta name="keywords" content="東京大学,情報処理"><!-- 検索に使用するキーワードを記入 -->
<title>My Web Site</title><!-- ページタイトルを記入 -->
<style type="text/css">
<!--
p{ font-size: 14pt; padding: 10px; }
//-->
</style>
</head>
<body bgcolor="#ffffff" text="#003333"><!-- 背景色、文字色を指定 -->
<div align="center">
<span style="font-size: 24pt;color: #ff3333;">Site Title</span><br>
<br>
<img src="tokeidai.jpg" alt="東京大学"><!-- 画像を指定 -->
</div>
<p>test text test text test text test text test text test text test text test text test text </p>
<p>The quick brown fox jumps over the lazy dog.<br>The quick brown fox jumps over the lazy dog.</p>
<p>The quick brown fox jumps over the lazy dog.<br>The quick brown fox jumps over the lazy dog.<br>
The quick brown fox jumps over the lazy dog.</p>
<br>
<div align="right" style="font-weight: bold;">Copyright© 2003 YOUR NAME , All Rights Reserved.</div>
</body>
</html>
