| 前回は、左ペインが終了、コンテンツの表示部分に掛かる所まででした。
引き続き、「旅の思い出・写真集」のトップページを題材にします |
|
ソースをTeraPadで開き、80行で折り返し＆行番号を付加して有ります。 |
|
|
少しだけ、ダブらせて、118行目から。 |
|
 |
|
118行目、</TD>、ここが、左ペインの終了位置でした。
119行目、<TD width="5"></TD>、これでも、1つのセル、
幅を5pxに指定しているだけです。
120行目、<TD align="left" valign="top"
width="790"><BR>、3番目のセル、幅790px、左寄せの上寄せ表示
121行目、<BR>、改行です
122行目、<B><FONT color="#660000" size="+2">
「私の旅行記録・旅の思いで写真集」</FONT></B><BR>
本文が始まりました、<B>は太字、<FONT color=#660000>
は文字色を"茶"、「私 からは入力した文書で、
</FONT>、フォント指定終了、</B>で太字終了、<BR>は改行ですね。
123行目、<BR>、改行、1行空けるんです
124行目、 <FONT color="#660000">
「私の旅行記 私旅行と写真が趣味なんです、
一人で何処にでも出かけて、写真を沢山写してくるんです。<BR>
 ,は、空白文字、それ以降は、123行目と同じ事ですね。
ここから、131行目までは、もう、説明不要でしょう、少しとばします。
132行目、<TABLE width="100%">、幅100%の表を作ります。
120行の790pxが、幅100%の対象になります。
133行目、<TBODY>、テーブルの本体開始宣言です。
134行目、<TR>、テーブルの一行目です。
135行目、<TD valign="top" colspan="2"
bgcolor="#95d2a5"> <A href="1_takayama.html">
思い出の高山</A></TD>
<TD valign="top" colspan="2"
bgcolor="#95d2a5">は、
上寄せ、セルの結合数”２”、セルの色”＃95d2a5”を表します。
 ,は空白文字、<A href="1_takayama.html">
思い出の高山</A></TD>、”思い出の高山”の文字に、リンクを設定しています。
</A>、リンク設定終了、</TD>、セル（列）の終了
136行目、</TR>、一行終了。
|
| メニュー表示の部分です |
|
 |
|
137行目、<TR>、2行目開始
138行目、<TD valign="top" align="left" height="33"
width="20%">、最初のセル、上寄せ、左寄せ、高さ33px、幅20%
<A href="1_takayama.html">
リンク設定、対象は、"1_takayama.html"
<IMG src="okuhida1.jpg" border="0" width="150"
height="112">、写真"okuhida1.jpg"を枠なし、幅150px高さ112pxで表示する
</A>、リンク終了、</TD>、セルの終了。
つまり、写真"okuhida1.jpg"にファイル"1_takayama.html"
へのリンクを設定しているんです。
139行目、<TD valign="top" align="left" width="80%"
height="33"> 200X年11月に1泊で、高山に行って来ました。<BR>
次のセル、幅80%、上寄せ、左寄せで、文章を書き込んであります。
高さ33pxは、殆ど意味を成さないタグですね。
140行目、<BR>
141行目、 雪が降り出したり、少し寒かったんですが、とても楽しい旅でした。<BR>
空白文字に続き、文章があります。<BR>、改行
142行目、</TD>、セルの終了
143行目、</TR>、2行目終了。
ここまで、135行目から、143行目までが一組になってます。
135行目の colspan="2" は、
下の行はセルが2つ、上の行ではセルを1つに結合表示する事を意味してます。
144行目、<TR>3行目開始
145行目、<TD valign="top" align="left" colspan="2"
bgcolor="#95d2a5" height="12"> Template_12</TD>
138行目に同じですが、中身が、 Template_12だけです。
146行目、</TR>3行目終了
147行目、<TR>4行目開始
148行目、<TD valign="top" align="left" height="33"
width="20%"><BR>最初のセルは20%
149行目、</TD>最初のセル終了
150行目、<TD valign="top" align="left" width="80%"
height="33"><BR>2番目は、80%
151行目、</TD>2番目セル終了
152行目、</TR>4行目終了
144行目〜152行目で1セット2行分の表になります。この後は其の繰り返しの為暫らく省略します。 |
| 60行ほど飛びました、この間は同じ事の繰り返しで表を組み立ててます。 |
|
 |
|
225行目、メニュー部分が終わり、フッター部分に入ります
226行目、<TD align="left" valign="top" colspan="2"
bgcolor="#95d2a5"> </TD>
メニューの続きみたいですが、文字がありません。
227行目、</TR>、行の終了
228行目、<TR>、新しい行
229行目、<TD align="center" valign="top" colspan="2"
height="89"><BR>
メニューの続きみたいですが、セルが1つだけ、
230行目、<BR>、改行
231行目、<A href="index.html">
ページトップに戻る</A> </TD>ページトップに戻る為のリンクを設定
232行目、</TR>、行終了
233行目、</TBODY>、133行目で始まった表本体の終了
234行目、</TABLE>、132行目で始まった表の終了
235行目、</TD>、120行目で始まったセルの終了
236行目、<TD width="5"></TD>、
119行、120行に続く3つ目のセル、幅5pxの空のセルです。
237行目、</TR>、53行目で始まった行の終了
238行目、</TBODY>、52行目で始まった表本体の終了
239行目、</TABLE>、51行目で始まった表の終了
240行目、</DIV>、50行目で始まった一纏め終了
241行目、</DIV>、41行目で始まった一纏め終了
242行目、</TD>、40行目のセルの終了。
243行目、</TR>、39行目の行の終了。
244行目、</TBODY>、38行目で始まった表本体の終了。
245行目、</TABLE>、37行目で始まった表の終了。
246行目、</DIV>、27行目で始まった一纏め終了。
247行目、</BODY>、9行目で始まった本体部分の終了。
248行目、</HTML>、2行目で始まったHTML文書の終了。 |
| END |
|
途中多少飛ばしましたが、最後まで来ました。
233行以降、次々に、閉じていくばかり、人力の場合間違えやすい部分です。
「CSS」が、流行るのも無理ないのでしょうが、ビルダーを使う限りこのやり方の方が楽なんです。
次回は、このファイル内の、不具合箇所を修正しながら、HTMLの特性を覚えていきましょう。 |
|
|
