〜マンガの為のHTML入門〜
Step10.5:INDEXページについて…。
<html>
<head>
<!--タイトルバー01-->
<title>貴方のHPのタイトル</title></head>
<!--02ページ全体の背景イメージ指定-->
<body background="index-back01.jpg">
<center>
<BR>
<!--03ブラウザ画面上タイトル文字の設定-->
<font size="6" color="navy">
貴方のHPのタイトル</font>
<BR>
<!--04第１テーブル(この場合Information用)の枠組の基本設定-->
<table width="500" height="*"
border="5"
bordercolor="#999999">
<tr><th valign="top" bgcolor="#cccccc">
<font size="6" color="orange"><i>
〜Information〜</i></font>
<BR>
<BR>
<!--05“Information”コメント文字の設定-->
<font size="3" color="#666666">
<BR><BR>
<BR><BR>
</font>
</th></tr>
</table>
<!--06第1テーブル枠終了点-->
<BR>
<BR>
<!--07“INDEX”文字のサイズ＆色指定-->
<font size="6" color="maroon"><i>
〜INDEX〜</i></font>
<BR>
<!--08“INDEX”注意書きのサイズ＆色指定-->
<font size="2" color="red">
*各作品・イラストページへは“絵”をクリックすると行ける様になっています。
</font>
<BR>
<BR>
<!--09第2テーブル(ここでは作品紹介/INDEX用)の枠組の基本設定-->
<table width="800" height="*"
border="5" bordercolor="#999999">
<TR>
<!--10.INDEX第一枠(表一段目左)の画像枠の設定-->
<TH bgcolor="#ffffff" width="150" height="220">
<a href="abc.htm">
<img src="index-abc.jpg"></a>
</th>
<!--11.INDEX第一枠のコメント枠の設定-->
<TH bgcolor="#cccccc" width="250"
height="*" valign="top" align="left">
<font size="4" color="navy">
ABC
</font><BR>
<font size="2" color="#666666">
作品へのコメント・梗概…
</th>
<!--12.INDEX第二枠(表一段目右)の画像枠の設定-->
<TH bgcolor="#ffffff" width="150" height="*">
<a href="abc2.htm">
<img src="index-abc2.jpg"></a>
</th>
<!--13.INDEX第二枠のコメント枠の設定-->
<TH bgcolor="#cccccc" width="250"
height="*" valign="top" align="left">
<font size="4" color="navy">
ABC PartU
</font><BR>
<font size="2" color="#666666">
作品へのコメント・梗概…
</th></tr>
<TR>
<TH bgcolor="#ffffff" width="150" height="220">
<!--14.INDEX第三枠(表二段目左)の画像枠の設定-->
<a href="mvk101.htm">
<img src="index-mvk101.jpg"></a>
</th>
<!--15.INDEX第三枠のコメント像枠の設定-->
<TH bgcolor="#cccccc" width="250"
height="*" valign="top" align="left">
<font size="4" color="navy">
桃太郎VS金太郎〜第1話〜
</font><BR>
<font size="2" color="#666666">
作品へのコメント・梗概…
</th>
<!--16.INDEX第四枠(表二段目右)の画像枠の設定-->
<TH bgcolor="#ffffff" width="150" height="*">
<a href="mvk201.htm">
<img src="index-mvk201.jpg"></a>
</th>
<!--17.INDEX第一枠のコメント像枠の設定-->
<TH bgcolor="#cccccc" width="250"
height="*" valign="top" align="left">
<font size="4" color="navy">
桃太郎VS金太郎〜第2話〜
</font><BR>
<font size="2" color="#666666">
作品へのコメント・梗概…
</th></tr>
<!--18.INDEX別枠のイラストへのリンク画像枠の設定-->
<tr><th bgcolor="#999999" colspan="4">
<BR>
<!--19.ILLUSTRATIONの文字のサイズ＆色指定-->
<font size="5" color="purple"><i>
〜ILLUSTRATION〜</i></font>
<BR>
<BR>
<!--20.各イラストへのリンクの設定-->
<a href="ill01.htm"><img src="ill01.jpg"></a>
<a href="ill02.htm"><img src="ill02.jpg"></a>
<a href="ill03.htm"><img src="ill03.jpg"></a>
<a href="ill04.htm"><img src="ill04.jpg"></a><BR><BR>
<a href="ill01.htm"><img src="ill05.jpg"></a>
<a href="ill02.htm"><img src="ill06.jpg"></a>
<a href="ill03.htm"><img src="ill07.jpg"></a>
<a href="ill04.htm"><img src="ill08.jpg"></a><BR><BR>
<BR>
<BR>
</th></tr>
</table>
</font>
</center>
</body>
</html>
*文字の色はコピーすると全て黒になりますので気にする必要はありません。
〜メモ帳にHTMLタグをコピーする〜
*右上の図の様なブラウザ画面が現れればコピーは成功です。（↑）
ただし、このスタイルの場合はページ全体の背景イメージを挿入して、
それを画面上で確認するまでは最終的なコピー成功とはいえません。
〜HTMLとブラウザ画面の相関関係図〜
〜HTML解説図〜
*再度サンプル“INDEX−01”から見直す場合には
ここ
をクリックして下さい。
<html>
<head>
<!--タイトルバー01-->
<title>貴方のHPのタイトル</title></head>
<!--02ページ全体の背景イメージ指定-->
<body background="index-back01.jpg">
<center>
<BR>
<!--03ブラウザ画面上タイトル文字の設定-->
<font size="6" color="navy">
貴方のHPのタイトル</font>
<BR>
<!--04第１テーブル(この場合Information用)の枠組の基本設定-->
<table width="500" height="*"
border="5" bordercolor="#999999">
<tr><th valign="top" bgcolor="#cccccc">
<font size="6" color="orange"><i>
〜Information〜</i></font>
<BR>
<BR>
<!--05“Information”コメント文字の設定-->
<font size="3" color="#666666">
<BR><BR>
<BR><BR>
</font>
</th></tr>
</table>
<!--06第1テーブル枠終了点-->
<BR>
<BR>
<!--07“INDEX”文字のサイズ＆色指定-->
<font size="6" color="maroon"><i>
〜INDEX〜</i></font>
<BR>
<!--08“INDEX”注意書きのサイズ＆色指定-->
<font size="2" color="red">
*各作品・イラストページへは“絵”をクリックすると行ける様になっています。
</font>
<BR>
<BR>
<!--09第2テーブル(ここでは作品紹介/INDEX用)の枠組の基本設定-->
<table width="800" height="*" border="5" bordercolor="#999999">
<TR>
<!--10.INDEX第一枠(表一段目左)の画像枠の設定-->
<TH bgcolor="#ffffff" width="150" height="220">
<a href="abc.htm">
<img src="index-abc.jpg"></a>
</th>
<!--11.INDEX第一枠のコメント枠の設定-->
<TH bgcolor="#cccccc" width="250"
height="*" valign="top" align="left">
<font size="4" color="navy">
ABC
</font><BR>
<font size="2" color="#666666">
作品へのコメント・梗概…
</th>
<!--12.INDEX第二枠(表一段目右)の画像枠の設定-->
<TH bgcolor="#ffffff" width="150" height="*">
<a href="abc2.htm">
<img src="index-abc2.jpg"></a>
</th>
<!--13.INDEX第二枠のコメント枠の設定-->
<TH bgcolor="#cccccc" width="250"
height="*" valign="top" align="left">
<font size="4" color="navy">
ABC PartU
</font><BR>
<font size="2" color="#666666">
作品へのコメント・梗概…
</th></tr>
<TR> <TH bgcolor="#ffffff" width="150" height="220">
<!--14.INDEX第三枠(表二段目左)の画像枠の設定-->
<a href="mvk101.htm">
<img src="index-mvk101.jpg"></a>
</th>
<!--15.INDEX第三枠のコメント像枠の設定-->
<TH bgcolor="#cccccc" width="250"
height="*" valign="top" align="left">
<font size="4" color="navy">
桃太郎VS金太郎〜第1話〜
</font><BR>
<font size="2" color="#666666">
作品へのコメント・梗概…
</th>
<!--16.INDEX第四枠(表二段目右)の画像枠の設定-->
<TH bgcolor="#ffffff" width="150" height="*">
<a href="mvk201.htm">
<img src="index-mvk201.jpg"></a>
</th>
<!--17.INDEX第一枠のコメント像枠の設定-->
<TH bgcolor="#cccccc" width="250"
height="*" valign="top" align="left">
<font size="4" color="navy">
桃太郎VS金太郎〜第2話〜
</font><BR>
<font size="2" color="#666666">
作品へのコメント・梗概…
</th></tr>
<!--18.INDEX別枠のイラストへのリンク画像枠の設定-->
<tr><th bgcolor="#999999" colspan="4">
<BR>
<!--19.ILLUSTRATIONの文字のサイズ＆色指定-->
<font size="5" color="purple"><i>
〜ILLUSTRATION〜</i></font>
<BR>
<BR>
<!--20.各イラストへのリンクの設定-->
<a href="ill01.htm"><img src="ill01.jpg"></a>
<a href="ill02.htm"><img src="ill02.jpg"></a>
<a href="ill03.htm"><img src="ill03.jpg"></a>
<a href="ill04.htm"><img src="ill04.jpg"></a><BR><BR>
<a href="ill01.htm"><img src="ill05.jpg"></a>
<a href="ill02.htm"><img src="ill06.jpg"></a>
<a href="ill03.htm"><img src="ill07.jpg"></a>
<a href="ill04.htm"><img src="ill08.jpg"></a><BR><BR>
<BR>
<BR>
</th></tr>
</table>
</font>
</center>
</body>
</html>
Step11.0へ…
なお各ステップにおいて解らない点がありましたら
ここをクリックして
“まんが浪人の掲示板”
に質問を書き込んで置いてください。
*回答はも“まんが浪人の掲示板”にて発表いたします。
ただし、解る範囲でしかお答えできませんので、
その点は理解していただき、ご容赦ください。
また回答には数日〜十数日以上かかる場合があります。
Step0.1(INDEX)に戻る