| 解 説 | HTML リスト＆ページ (タグの詳細) |
①最初の表の枠線をcellspacing="2"で書くために、本来の枠線を消すため、border="0"としました。 ②セルの高さをheight="130"、文字を中央にTopから配置でするようにしました。align="center" valign="top" ③一行目は改行し、④本文を書き出しました。 ⑤文字「13種のタグ」に対して、ふたつ上のフォルダにあるフォルダkisoのなかのbtag.htmlというページに跳ぶように、相対アドレス指定でリンクを張りました。../../kiso/btag.html ⑥<br><br>で改行と１行挿入を行います。 ⑦⑧図test09.jpgにリンクを張り、ページのkiso2.htmlの「kai」という名前の位置に跳ぶようリンクを張りました。 ../../kiso/kiso2.html#kai ⑧その図の属性を、width="252" height="251" border="0" alt="図のページの解説"と指定しました。 ⑨同じフォルダのページkihon1.htmlに画像next_ts.gifからリンク。 ⑩図をポイントすると文字「次のページへ」を表示するようにalt="次のページへ"と記述。 ⑪セル内の内容を縦方向に中央揃えするようにvalign="middle"と記述。 ⑫１行のひとつのセルの高さを指定すると、１行の他のセルもそれに引きずられます。 仕上り予定のページ |
<html><head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>サンプルページ</title></head> <body background="st01_bg.gif"> <center><font size="7" color="#993300"><b>演習用サンプルページ</b></font><br><br> <table ①border="0" bgcolor="#00cc00" cellpadding="0" cellspacing="2"> <tr> <td width="447" background="st01_bg.gif" ②height="130" align="center" valign="top">③<br> ④ここは演習用サンプルページです。 ⑤<a href="../../kiso/btag.html"> 13種のタグ</a>で書きました。<br><br> 有用な限られたタグで、まずホームページ作りに慣れましょう。<br> 少ないタグでも工夫次第で、多彩なページが出来ることをご確認ください。⑥<br><br> 必要に応じ、色々なタグや<a href="../../susumu/xml.html" target="_self"> 進んだ手法</a>を勉強すればさらに多彩になります。<br> 上達の秘訣は、はじめから欲張り過ぎないことでしょう。</td> <td width="253" rowspan="4" background="st01_bg.gif" align="center"> ⑦<a href="../../kiso/kiso2.html#kai"> ⑧<img src="test09.jpg" width="252" height="251" border="0" alt="図のページの解説"></a></td> </tr> <tr> <td background="st01_bg.gif" align="center" valign="top" height="67"><br> ではこのページ作り方を、順を追って解説しましょう。 ⑨<a href="kihon1.html"> <img src="next_ts.gif" height="17" border="0" ⑩alt="次のページへ"></a> <br><br><a href="../../../index.html">くらげのTop</a> <a href="../../hp_g.html">HP作りのTop</a> <a href="../../syoho/syoho1.html">HTMLの初歩</a> <a href="../../kiso/kiso4.html">右図のページを表示</a></td> </tr> <tr> <td background="st01_bg.gif" align="center" height="24"> <a href="../../kiso/kiso2.html#kai">右図のページの解説</a> は、図をクリックしてもご覧頂けます。→</td> </tr> <tr> <td background="st01_bg.gif" align="center" ⑪valign="middle" height="21"> 以下の図は、クリックすると関連ページにジャンプします。</td> </tr> </table> <br><br> <table width="720" border="1"> <tr align="center"> <td width="25%" ⑫height="121"> </td> <td width="25%"> </td> <td width="25%> </td> <td width="25%> </td> </tr> <tr> <td colspan="4"> </td> </tr> <tr align="center"><td> </td> <td> </td> <td> </td> <td> </td> </tr> </table> <hr size="5" color="#663300" width="720"> </center></body></html>  
|
以上の作業で右のページのように、上の表の内容が完成しました。→ |
