〜マンガの為のHTML入門〜
Step10.2:INDEXページについて…。
<html>
<head>
<!--タイトルバー-->
<title>
貴方のHPのタイトル
</title></head>
<!--ページ全体の背景色-->
<body bgcolor="#cccccc">
<center>
<!--１つ目のテーブルの起点、およびテーブル全体の横幅のサイズ設定-->
<table width="800"><TR>
<!--テーブルの１列目(INDEX枠)の起点-->
<TH bgcolor="#6699cc"
width="150" valign="top">
<!--INDEXの文字のサイズ＆色指定-->
<font size="4"
color="maroon">
<i><B>
“INDEX(目次)”</B></I></font>
<font size="3"
Color="Blue">
<BR>
<BR>
<!--各作品へのリンク-->
作品『ABC』<BR>
<a href="abc01.htm">
P01</a><BR>
<a href="abc10.htm">
P10</a><BR>
<a href="abc20.htm">
P20</a><BR>
……<BR>
<BR><BR>
『桃太郎VS金太郎』<BR>
<a href="mvk01.htm">
P01</a><BR>
<a href="mvk10.htm">
P10</a><BR>
<a href="mvk20.htm">
P20</a><BR>
……<BR>
<BR>
<BR>
<!--イラストコーナーへのリンク-->
<a href="ill.htm">
<font color="red">
“ｲﾗｽﾄｺｰﾅｰ”へ…</a>
</font></font><br><br>
</TH>
<!--テーブルの2列目の背景色＆枠の横幅設定-->
<TH bgcolor="#ffffff" valign="top">
<!--『表紙イラスト』のイメージファイル指定タグ-->
<img src="index-img.jpg">
<BR>
<BR>
</TH></TR></table>
<!--1つ目のテーブルの終了点-->
<BR><BR>
<!--2つ目のテーブル(“Information”用)の起点、
およびテーブル全体の横幅のサイズ設定-->
<table bgcolor="#ffffff" width="500">
<tr><th>
<!--Information文字のサイズ＆色指定-->
<font size="5
"color="orange">
“Information”</font><BR>
<BR>
<!--コメント文字のサイズ＆色指定-->
<font size="3"
color="#999999">
<BR><BR>
<!--コメントスペース-->
<BR>
</th></tr></table>
<BR>
</center>
</body>
</html>
*文字の色はコピーすると全て黒になりますので気にする必要はありません。
〜メモ帳にHTMLタグをコピーする〜
*右上の図の様なブラウザ画面が現れればコピーは成功です。（↑）
〜HTMLとブラウザ画面の相関関係図〜
*画面ではINDEX上の各作品タイトルが黒文字ですが図作成上のミスです。
当然、ここは貴方の作品名に書き替えてください。
〜HTML解説図〜
*画面ではINDEX上の各作品タイトルが黒文字ですが図作成上のミスです。
当然、ここは貴方の作品名に書き替えてください。
これ以外のサンプルを御覧になりたい方は
サンプル“INDEX-03”へ…
このサンプルを利用するので次のStepへ進みたい方は
Step11.0へ…
なお各ステップにおいて解らない点がありましたら
ここをクリックして
“まんが浪人の掲示板”
に質問を書き込んで置いてください。
*回答はも“まんが浪人の掲示板”にて発表いたします。
ただし、解る範囲でしかお答えできませんので、
その点は理解していただき、ご容赦ください。
また回答には数日〜十数日以上かかる場合があります。
Step0.1(INDEX)に戻る
|
<html> <head> <!--タイトルバー--> <title> 貴方のHPのタイトル </title></head> <!--ページ全体の背景色--> <body bgcolor="#cccccc"> <center> <!--１つ目のテーブルの起点、およびテーブル全体の横幅のサイズ設定--> <table width="800"><TR> <!--テーブルの１列目(INDEX枠)の起点--> <TH bgcolor="#6699cc" width="150" valign="top"> <!--INDEXの文字のサイズ＆色指定--> <font size="4" color="maroon"> <i><B> “INDEX(目次)”</B></I></font> <font size="3" Color="Blue"> <BR> <BR> <!--各作品へのリンク--> 作品『ABC』<BR> <a href="abc01.htm"> P01</a><BR> <a href="abc10.htm"> P10</a><BR> <a href="abc20.htm"> P20</a><BR> ……<BR> <BR><BR> 『桃太郎VS金太郎』<BR> <a href="mvk01.htm"> P01</a><BR> <a href="mvk10.htm"> P10</a><BR> <a href="mvk20.htm"> P20</a><BR> ……<BR> <BR> <BR> <!--イラストコーナーへのリンク--> <a href="ill.htm"> <font color="red"> “ｲﾗｽﾄｺｰﾅｰ”へ…</a> </font></font><br><br> </TH> <!--テーブルの2列目の背景色＆枠の横幅設定--> <TH bgcolor="#ffffff" valign="top"> <!--『表紙イラスト』のイメージファイル指定タグ--> <img src="index-img.jpg"> <BR> <BR> </TH></TR></table> <!--1つ目のテーブルの終了点--> <BR><BR> <!--2つ目のテーブル(“Information”用)の起点、 およびテーブル全体の横幅のサイズ設定--> <table bgcolor="#ffffff" width="500"> <tr><th> <!--Information文字のサイズ＆色指定--> <font size="5 "color="orange"> “Information”</font><BR> <BR> <!--コメント文字のサイズ＆色指定--> <font size="3" color="#999999"> <BR><BR> <!--コメントスペース--> <BR> </th></tr></table> <BR> </center> </body> </html> |
|---|
*文字の色はコピーすると全て黒になりますので気にする必要はありません。
〜メモ帳にHTMLタグをコピーする〜
*右上の図の様なブラウザ画面が現れればコピーは成功です。（↑）
〜HTMLとブラウザ画面の相関関係図〜
*画面ではINDEX上の各作品タイトルが黒文字ですが図作成上のミスです。
当然、ここは貴方の作品名に書き替えてください。
〜HTML解説図〜
*画面ではINDEX上の各作品タイトルが黒文字ですが図作成上のミスです。
当然、ここは貴方の作品名に書き替えてください。
これ以外のサンプルを御覧になりたい方は
サンプル“INDEX-03”へ…
このサンプルを利用するので次のStepへ進みたい方は
Step11.0へ…
なお各ステップにおいて解らない点がありましたら
ここをクリックして
“まんが浪人の掲示板”
に質問を書き込んで置いてください。
*回答はも“まんが浪人の掲示板”にて発表いたします。
ただし、解る範囲でしかお答えできませんので、
その点は理解していただき、ご容赦ください。
また回答には数日〜十数日以上かかる場合があります。
Step0.1(INDEX)に戻る