サンプルページ解説 3


二つ目の表枠内の内容以下を書いてゆきます。

解 説 HTML リスト&ページ  (タグの詳細)

 @二つ目の表には画像を並べるので枠線を消すため、border="0"としました。

 A行全体を中央配置するようにalign="center"で指定しました。

 B一列目のセルの高さを指定height="121"して、行全体の高さを指定します。

 Cリンク設定された図を枠なしborder="0"とし、幅と高さwidth="139" height="106"を設定し、図が非表示のとき表示する文字alt="中国 九寨溝・黄龍"も指定しました。

 D図と同時に文字も、同じリンク先にクリッカブルにしました。

 E2行目以降も同じように記述します。

 F4列接続して、1行分のスペースを作りました。

 G3行目も一行目と同様に記述しました。

 H色付きで太めの水平線を追加しました。

 Iリンク指定で、メール先指定でメールソフトが起動するようにmailtoを記述しました。

 J半角スペースを記述したいときは、 と記述します。

 Khttp から書いて、絶対アドレスを指定することも出来ます。

 Lリンク先のページを新たなページに開くには、target="_blank"を記述します。

 Mタグは入れ子を乱さないように注意して閉じましょう。


 仕上り予定のページ
<html>
 <head> ・・・・途中省略・・・・</head>
<body background="st01_bg.gif">
 <center><font ・・・・・・・・</font><br><br>
 <table border="0" bgcolor="#00cc00" ・・・・・・・・
  ・・・・・・・・ ・・・・途中省略・・・・ ・・・・・・・・
 </table> <br><br>  (ここまでは前のページで解説)

@<table width="720" border="0">
  <tr Aalign="center">
   <td width="25%" Bheight="121"><a href="../../../jsisen/jkyusai/jkyusai.html">
    <img src="taku44s.jpg" Cwidth="139" height="106" border="0" alt="中国 九寨溝・黄龍">
     <br>D中国 九寨溝・黄龍</a></td>
 E<td width="25%"><a href="../../../jkeirin/jkeirin.html">
    <img src="rikouD9s.jpg" width="149" height="107" border="0" alt="中国 桂林">
     <br>中国 桂林</a></td>
   <td width="25%"><a href="../../../jkeirin/jchokakai/jchokakai.html">
    <img src="chokai54s.jpg" width="150" height="107" border="0" alt="武陵源・張家界">
     <br>中国 武陵源・張家界</a></td>
   <td width="25%"><a href="../../../jnzld/jnzld.html">
    <img src="queen4s.jpg" width="152" height="105" border="0" alt="ニュージーランド">
     <br>ニュージーランド</a></td>
   </tr>
 F<tr><td colspan="4"> </td></tr>
 G<tr align="center">
    <td><a href="../../../jfuji/fuji.html">
     <img src="y0399s.jpg" width="141" height="106" border="0" alt="富士山">
      <br>富士山</a></td>
    <td ><a href="../../../jtaisetu/taisetu.html">
     <img src="920082s.jpg" width="153" height="102" border="0" alt="大雪山の紅葉">
      <br>大雪山の紅葉</a></td>
    <td><a href="../../../jkouran/kouran.html">
     <img src="y21c3s.jpg" width="150" height="102" border="0" alt="香嵐渓">
      <br>香嵐渓</a></td>
    <td><a href="../../../jtanzawa/tanzawa.html">
     <img src="spr408rs.jpg" width="137" height="99" border="0" alt="丹沢のページ">
      <br>丹沢のページ</a></td>
   </tr>
  </table>
H<hr size="5" color="#663300" width="720">
  <a href="../kihon1.html">
   <img src="next_ts.gif" width="80" height="20" border="0" align="middle"></a>
  <a href="Imailto:lvh09931@biglobe.ne.jp">
   <img src="a018ani.gif" border="0" align="middle">J&nbsp;ご意見等はメール</a>
    でお願いします
  <a href="Khttp://tohoho.wakusei.ne.jp/html/index.htm" Ltarget="_blank">
   タグの詳細はこちら
   <img src="tohoho.gif" width="88" height="31" border="0" align="middle"
    alt="とほほさんのページ"></a>
  </center>
  <hr size="5" color="#663300" width="720">
M</center></body></html>

【出来上がったページ】


 以上の作業で13種のタグで、右のようなページが完成しました。→

くらげのTop  HP作りのTop   HTMLの初歩     戻る