(10)分業・協業・情報処理(忠臣蔵史料集を例に)
(13)ソフトなし(タグ言語のみ)で写真付きページ作成

(1)ビルダー3のソフトで作った写真付きページ
堀部弥兵衛より大石内蔵助へ
写真(大石内蔵助と大石主税)
 大石内蔵助方へ弥兵衛方ヨリ返書留
 旧臘廿五日ノ貴書当月十七日相達拝見仕候、道中無恙御上着弥御健達御超歳可被成ト改年ノ御祝儀努力目出度申納候、然ハ隠居ノ義ニ付品々被仰下候
 尤少ニテモ指図ハ不申聞候、恐惶謹言
  正月廿六日         堀部弥兵衛判
   大石内蔵助様
ビルダー3のソフトで作った写真付きページ

(2)ビルダー3のソフトで作った写真付きページのソース画面(タグ言語)
@<HTML>
A<HEAD>
B<META name="GENERATOR" content="IBM HomePage Builder V3.0 for Windows">
C<TITLE></TITLE>C
</HEAD>A
D<BODY>
E<CENTER>
F<TABLE Gwidth="700">
H<TR>
I<TD Lalign="center">J<B>堀部弥兵衛より大石内蔵助へ</B>J</TD>I</TR>H
-----
@<TR>
F<TD Aalign="center"><BIMG src="004ah.jpg" Cheight="405" Dwidth="600"></TD>F</TR>@
@<TR>
<TD Aalign="center">E<B>写真(大石内蔵助と大石主税)</B>E</TD></TR>@
-----
H<TR>
I<TD align="left"> 大石内蔵助方へ弥兵衛方ヨリ返書留K<BR>
 旧臘廿五日ノ貴書当月十七日相達拝見仕候、道中無恙御上着弥御健達御超歳可被成ト改年ノ御祝儀努力目出度申納候、然ハ隠居ノ義ニ付品々被仰下候K<BR>
 尤少ニテモ指図ハ不申聞候、恐惶謹言K<BR>
  正月廿六日         堀部弥兵衛判K<BR>
   大石内蔵助様</TD>I</TR>H
</TABLE>F
</CENTER>E
</BODY>D
</HTML>@
ビルダー3のソフトで作った写真付きページのソース画面(タグ言語)

(1)「-----」から「-----」で囲まれた部分が、新規に追加された写真と、写真の説明文です。
写真付きページのタグ言語(ソース画面、設計図)の解説です。
(1)「@<TR>〜</TR>」の間に囲まれた内容を1行に納めるというタグ言語です。この場合、写真(004ah.jpg)を中央に揃えるという意味です。
(A)「Aalign="center"」は中央揃えのタグ言語です。「F<TD>〜</TD>」に囲まれた場合、セル内文字・写真を中央揃えというタグ言語です。この場合、1行の中に1セルを作り、写真1枚を中央揃えするという意味です。
(3)「<BIMG src="004ah.jpg"」は写真(IMG)のファイル名が「004ah.jpg」という意味です。
(4)「Cheight="405"」は写真の高さ(height)が「405ピクセル」という意味です。
(5)「Dwidth="600"」は写真の幅(width)が「600ピクセル」という意味です。
(6)「E<B>〜</B>」の間に囲まれた文字を太字にします。
(7)「F<TD>〜</TD>」は、1行内のセルの数を表します。

写真なしページのタグ言語(ソース画面、設計図)の解説です。
(1)「@<HTML>〜</HTML>」の間にタグ言語を記述します。
(2)「A<HEAD>〜</HEAD>」の間にページのタイトルやMETA情報などを記述します。
(3)「B<META name="GENERATOR" content="IBM HomePage Builder V3.0 for Windows">はウインドウズ用IBM社のHomePage Builder V3.0のソフトを使っているという意味です。
(4)「C<TITLE></TITLE>」の間にタイトルを記述します。
(5)「D<BODY>〜</BODY>」の間に文字や写真、表などを記述します。これがホームページとして見える部分です。
(6)「E<CENTER>〜</CENTER>」の間の文字・写真を中央揃えします。
(7)「F<TABLE>〜</TABLE>」の間に表を作成するタグ言語です。
(8)「Gwidth="700"」は「F<TABLE>〜</TABLE>」の間で使うタグ言語です。表の幅(width)を700ピクセル(="700")に設定するという意味です。
(9)「H<TR>〜</TR>」の間に囲まれた内容を1行で表示します。
(10)「I<TD>〜</TD>」の間に囲まれた内容を1セルで表示します。
(11)「J<B>〜</B>」の間に囲まれた文字を太字にします。
(12)「K<BR>」の次の文字を強制改行します。
(13)「Lalign="center"」は中央揃えのタグ言語です。「I<TD>〜</TD>」に囲まれた場合、セル内文字・写真を中央揃えするという意味です。
**参考ー左揃え(left)、右揃え(right)です。
タグ言語の構造を知る←クリック
写真付きの完成ページ←クリック

(3)ビルダー3で様々なページを作り、タグ言語を研究しよう!!