タグ言語から様々なページの作り方(マニュアル)

(1)原簿の原簿を開く
(1)原簿の原簿を開く

(1)ブラウザ画面上の「体験的パソコン論」をクリック
(2)「(04)ビルダー3+ソース(設計)画面」をクリック
(3)「【14】ソフトなし タグ言語でページ作成に挑戦」をクリック
(4)「原簿の原簿━独立1列×4行(見出し、写真、キャプチャー、説明文)」をクリック
(5)「表示」→「ソース」をクリック
(6)全てをドラッグして「コピー」→「メモ帳」に「貼り付け」
タグ言語の実習(メモ帳を開いて準備)←クリック
タグ言語(ソース)の開き方←クリック
タグ言語の実習(メモ帳にタグ言語をコピー&貼り付け)←クリック

(2)原簿の原簿のタグ言語をメモ帳に貼り付け
<HTML>
<HEAD>

<TITLE>独立1列×4行(見出し、写真、キャプチャー、説明文)</TITLE>
</HEAD>

<BODY bgcolor="white">

<CENTER>
<TABLE>
<TR>
<TD align="center"><B><FONT size="+4" color="blue" face="麗流隷書">見出し</FONT></B></TD>
</TR>
</TABLE>
</CENTER>

<CENTER>
<TABLE width="700" border="1">
<TR>
<TD align="center"><IMG src="01.jpg" height="100" width="100"></TD>
</TR>
</TABLE>
</CENTER>

<CENTER>
<TABLE width="700" border="1">
<TR>
<TD align="center"><B>キャプチャー</B></TD>
</TR>
</TABLE>
</CENTER>

<CENTER>
<TABLE width="700" border="1">
<TR>
<TD align="center"><IMG src="02.jpg" height="100" width="100"></TD>
<TD align="left"> 左写真説明文1
<BR>
<BR>
 左写真説明文2
<BR>
<BR>
 左真説明文3
</TD>
</TR>
</TABLE>
</CENTER>

<CENTER>
<TABLE border="1">
<TR>
<TD align="left" width="350"> 右写真説明文1
<BR>
<BR>
 右写真説明文2
<BR>
<BR>
 右写真説明文3
</TD>
<TD align="center" width="350"><IMG src="03.jpg" height="100" width="100"></TD>
</TR>
</TABLE>  
</CENTER>

<CENTER>
<TABLE width="700" border="1">
<TR>
<TD align="left"> 説明1
<BR>
 説明2 
<BR>
 説明3
</TD>
</TR>
</TABLE>
</CENTER>

</BODY>
</HTML>
(2)原簿の原簿のタグ言語をメモ帳に貼り付け

(3)<CENTER>〜</CENTER>が1行
@<CENTER>
<TABLE>
<TR>
<TD align="center"><B><FONT size="+4" color="blue" face="麗流隷書">見出し</FONT></B></TD>
</TR>
</TABLE>
</CENTER>@

@<CENTER>
<TABLE width="700" border="1">
<TR>
<TD align="center"><IMG src="01.jpg" height="100" width="100"></TD>
</TR>
</TABLE>
</CENTER>@
(3)<CENTER>〜</CENTER>が1行

(1)「<CENTER>〜</CENTER>」が1行です。
(2)ここでは、「<CENTER></CENTER>」が2カ所あるので、2行を意味します。
(3)レイアウトに合わせ、必要な「<CENTER></CENTER>」を追加します。
(4)レイアウトに合わせ、不必要な「<CENTER></CENTER>」を削除します。

(4)不必要な「<CENTER></CENTER>」を削除
<HTML>
<HEAD>

<TITLE>独立1列×4行(見出し、写真、キャプチャー、説明文)</TITLE>
</HEAD>

<BODY bgcolor="white">

<CENTER>
<TABLE>
<TR>
<TD align="center"><B><FONT size="+4" color="blue" face="麗流隷書">見出し</FONT></B></TD>
</TR>
</TABLE>
</CENTER>

<CENTER>
<TABLE width="700" border="1">
<TR>
<TD align="center"><IMG src="02.jpg" height="100" width="100"></TD>
<TD align="left"> 左写真説明文1
<BR>
<BR>
 左写真説明文2
<BR>
<BR>
 左真説明文3
</TD>
</TR>
</TABLE>
</CENTER>

<CENTER>
<TABLE width="700" border="1">
<TR>
<TD align="left"> 説明1
<BR>
 説明2 
<BR>
 説明3
</TD>
</TR>
</TABLE>
</CENTER>

</BODY>
</HTML>
(4)不必要な「<CENTER></CENTER>」を削除

(1)ここでは、見出し、左写真の説明文、説明文のページを作成します。
(2)不必要な「<CENTER></CENTER>」を削除します。
この段階のページ←クリック

(5)見出し・写真・説明文の入力
<HTML>
<HEAD>

<TITLE>大高源五 両国橋で宝井其角と再会す</TITLE>
</HEAD>

<BODY bgcolor="white">

<CENTER>
<TABLE>
<TR>
<TD align="center"><B><FONT size="+4" color="blue" face="麗流隷書">大高源五 両国橋で宝井其角と再会す</FONT></B></TD>
</TR>
</TABLE>
</CENTER>

<CENTER>
<TABLE width="700" border="1">
<TR>
<TD align="center"><IMG src="../img/gisi06.jpg" height="253" width="400"></TD>
<TD align="left"> 両国橋で出会う大高源五と宝井其角
<BR>
<BR>
 十二月十三日は年の暮れの煤払いの日になっていました。源五さんは煤竹売りに変装して吉
良邸の様子を探っていました。その帰りに両国橋に来た時、其角さんと出会いました。
</TD>
</TR>
</TABLE>
</CENTER>

<CENTER>
<TABLE width="700" border="1">
<TR>
<TD align="left"> 源五さんは本心をさとられないように知らぬ振りをして通り過ぎようとしました。しかし、気がついた
其角さんはあまりの身なりに哀れを感じて、「年の瀬や 水の流れと 人の身は」と詠むと、源五さん
は「あしたまたるる その宝船」と返歌しました。

<BR>
 其角さんはその歌から源五さんの再就職が決まったんだろうと推測しましたが、はっと気がつきま
した。待ちに待った討ち入りを暗示していることに…。
</TD>
</TR>
</TABLE>
</CENTER>

</BODY>
</HTML>
(5)見出し・写真・説明文の入力

(1)見出し・写真・説明文を入力します。
(2)写真のサイズはフォトショップエレメンツで確認します、
写真のサイズをフォトショップエレメンツで確認←クリック
完成のページ←クリック
枠非表示の完成ページ←クリック