〜マンガの為のHTML入門〜

Step11.0:文章を書く為には…！

さて、ここまでコピーや簡単(？)な書き替え作業で
HP作成をサポートしてきた当サイトですが、
ここにきてとうとう、それでは解決できない問題にたどりついてしまいました。
それが「文章を書く」という作業です。
残念ながら貴方のHP上のInformation等に書き込むコメントを
ここで先に書いておく事はできませんからね。 そこで、
このStep11.0では文章を書きこむのに最低限必要な事だけを
ピックアップして説明させてもらいます。


この文章の下には、これまでのサンプル“INDEX-01〜05”のHTMLタグの一覧があります。
その中からご自分が選択されたサンプルの処まで画面をスクロールさせましょう。
そこには以前コピーしたタグには無かった薄い青色に覆われた部分があるはずです。
(*サンプル“INDEX-05”には“Information”以外にINDEXにもコメントを書きこむ個所があります)

この薄い青の部分が“Information”枠の設定およびコメント書き込みをする場所です。

更にその青枠の上と下に <TH>と </TH>というタグがある事を確認して下さい。
そして、貴方のINDEXタグの中からこの2つのタグに当たる<TH>と </TH>を探し出してください。
(*このタグは貴方のHTMLファイル上ではもちろん緑色をしていません。
また、<TH>と </TH> というタグはこの場所以外にもたくさんあるので
別の場所の物を選ばない様に注意しましょう。
探す際のポイントは、このページの画面では赤い文字で書かれている部分
これを手がかりにすると少しわかり易くなるかもしれません。)

それぞれの薄青枠の一番下の行には
*このサンプルを選んだ方は ここをクリックして下さい！
というコメントが付け加えられていますので、
必要なサンプルのそこをクリックして下さい。
それぞれに対応した説明ページにジャンプします。

サンプル“INDEX-01”

<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>

 サンプル“INDEX-02”

<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>
サンプル“INDEX-03”

<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>

サンプル“INDEX-04”

<html>
<head>
<!--タイトルバー-->
<title> 貴方のHPのタイトル </title></head>
<!--ページ全体の背景色-->
<body bgcolor="#cccccc">
<center>

<!--テーブルの起点、およびテーブル全体の横幅のサイズ設定-->
<table width="800" height="550"><TR>

<!--テーブルの１列目(INDEX枠)の起点-->
<TH bgcolor="#6699cc" width="150" valign="top">
<!--INDEXの文字のサイズ＆色指定-->
<BR>
<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 background="index-back.jpg" valign="top">
<BR>
<!--HPタイトル文字-->
<font size="6" color="navy">
貴方のHPのタイトル
</font>
<BR><BR>
<!--Information文字のサイズ＆色指定-->
<font size="5 "color="orange">
“Information”</font><BR>

<!--コメント文字のサイズ＆色指定-->
<font size="3" color="#999999">
<BR><BR>
<!--コメントスペース-->





<BR>
</TH></tr></table>
<!--*このサンプルを選んだ方は ここをクリックして下さい！-->
<BR>

</center>
</body>

</html>
サンプル“INDEX-05”


<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>

なお各ステップにおいて解らない点がありましたら
ここをクリックして
“まんが浪人の掲示板”
に質問を書き込んで置いてください。

*回答はも“まんが浪人の掲示板”にて発表いたします。
ただし、解る範囲でしかお答えできませんので、
その点は理解していただき、ご容赦ください。
また回答には数日〜十数日以上かかる場合があります。

 Step0.1(INDEX)に戻る