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