〜マンガの為のHTML入門〜
Step10.3:INDEXページについて…。
<html>
<head>
<!--タイトルバー-->
<title>
貴方のHPのタイトル
</title></head>
<!--ページ全体の背景色-->
<body bgcolor="#cccccc">
<center>
<!--『表紙イラスト』のイメージファイル指定タグ-->
<BR>
<img src="index-img.jpg">
<BR><BR>
<!--テーブルの起点、およびテーブル全体の横幅のサイズ設定-->
<table width="550"><TR>
<!--テーブルの１列目(INDEX枠)の起点-->
<TH width="180"
valign="top" bgcolor="#99cccc">
<font size="4"
color="maroon"><br>
<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>
<br><br>
<!--テーブルの2列目(Information枠)の起点-->
<th valign="top" bgcolor="#ffffff">
<BR>
<font size="5"
color="orange">
“Information”</font>
<BR><BR>
<!--コメントスペース-->
</th></tr></table>
</font>
</center>
</body>
</html>
〜メモ帳にHTMLタグをコピーする〜
*右上の図の様なブラウザ画面が現れればコピーは成功です。（↑）
〜HTMLとブラウザ画面の相関関係図〜
*画面ではINDEX上の各作品タイトルが黒文字ですが図作成上のミスです。
当然、ここは貴方の作品名に書き替えてください。
〜HTML解説図〜
*画面ではINDEX上の各作品タイトルが黒文字ですが図作成上のミスです。
当然、ここは貴方の作品名に書き替えてください。
これ以外のサンプルを御覧になりたい方は
サンプル“INDEX-04”へ…
このサンプルを利用するので次のStepへ進みたい方は
Step11.0へ…
なお各ステップにおいて解らない点がありましたら
ここをクリックして
“まんが浪人の掲示板”
に質問を書き込んで置いてください。
*回答はも“まんが浪人の掲示板”にて発表いたします。
ただし、解る範囲でしかお答えできませんので、
その点は理解していただき、ご容赦ください。
また回答には数日〜十数日以上かかる場合があります。
Step0.1(INDEX)に戻る
|
<html> <head> <!--タイトルバー--> <title> 貴方のHPのタイトル </title></head> <!--ページ全体の背景色--> <body bgcolor="#cccccc"> <center> <!--『表紙イラスト』のイメージファイル指定タグ--> <BR> <img src="index-img.jpg"> <BR><BR> <!--テーブルの起点、およびテーブル全体の横幅のサイズ設定--> <table width="550"><TR> <!--テーブルの１列目(INDEX枠)の起点--> <TH width="180" valign="top" bgcolor="#99cccc"> <font size="4" color="maroon"><br> <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> <br><br> <!--テーブルの2列目(Information枠)の起点--> <th valign="top" bgcolor="#ffffff"> <BR> <font size="5" color="orange"> “Information”</font> <BR><BR> <!--コメントスペース--> </th></tr></table> </font> </center> </body> </html> |
|---|
〜メモ帳にHTMLタグをコピーする〜
*右上の図の様なブラウザ画面が現れればコピーは成功です。（↑）
〜HTMLとブラウザ画面の相関関係図〜
*画面ではINDEX上の各作品タイトルが黒文字ですが図作成上のミスです。
当然、ここは貴方の作品名に書き替えてください。
〜HTML解説図〜
*画面ではINDEX上の各作品タイトルが黒文字ですが図作成上のミスです。
当然、ここは貴方の作品名に書き替えてください。
これ以外のサンプルを御覧になりたい方は
サンプル“INDEX-04”へ…
このサンプルを利用するので次のStepへ進みたい方は
Step11.0へ…
なお各ステップにおいて解らない点がありましたら
ここをクリックして
“まんが浪人の掲示板”
に質問を書き込んで置いてください。
*回答はも“まんが浪人の掲示板”にて発表いたします。
ただし、解る範囲でしかお答えできませんので、
その点は理解していただき、ご容赦ください。
また回答には数日〜十数日以上かかる場合があります。
Step0.1(INDEX)に戻る