練習八（文字の練習）
もう文字の表示はご理解しているでしょうがもう一度復習しましょう。
文字のタグは<FONT>テキスト</FONT>で大きさ（size）や色（color）、字体（face）などの属性をFONTタグ の中に指定します。
文字の大きさについて、下の例を見て理解してください。
| サイズ1 | size"1" | |
| サイズ２ | size"2" | |
| サイズ３ | size"3" | |
| サイズ４ | size"4" |
さらに、文字を強調するために太字指定タグ<B>テキスト</B>あります。
また<I>テキスト</I> は斜体タグです。アンダーラインは<U></U>です。
カラーコード＝色見本はここをクリック
(文章の貼り付け)
それではソース4に文を入れましょう
-------------------------------------（ソース5）--------------------------------
<html>
<head>
<br>
<title>私のホームページ</title><br>
</head>
<body bgcolor="#ffff99">
<br>
<br>
<center>
<img src="C:/homepage/image/taitol.gif" width="316"
height="73" border="0">
<br>
<font size="+2" color="#800000" >
私のホームページを訪ねていただきましてありがとうございます<br>
このサイトは私の趣味の世界を紹介しています</font>
<br>
<img src="C:/homepage/image/iwate14-52.jpg" width="360">
<br>
<font size="-1">この写真は開運橋から撮影しました。<br></font>
<br>
<a href="mailto:yosi@h.email.ne.jp"><b><font size="+1"
color="#F00000">
メールをください</font></b></a>
</center>
</body>
</html>
----------------------------------------------------------------------------------
文字の大きさにはプラスの他にマイナス記号も使えます。写真の説明には文字を小さくしました。改行<ｂｒ>タグを好きなように増減してください。
○このまま全部コピーしてＩＥ画面からソースを表示させて全て削除して貼り付けてもいいですが、変更した赤書きのところだけコピーし、貼り付け作業をしたほうが理解が進むでしょう。でき上がったら上書き保存をしてください。
ＩＥ画面を最新情報にし、下記の画面が出てくれば成功です。 （忘れた方は練習四 参照）
 私のホームページを訪ねていただきありがとうございます このサイトは私の趣味の世界を紹介しています  この写真は開運橋から撮影しました メールをください |
ようやく形ができてきましたね。写真に枠をつけて飾って見たいですね。
練習九( 表を活用し画像の額縁の作成)
今度は額縁をつけます。先ず額縁を表示するタグとテキストを追加したソース６をおみせしましょう。
----------------------------------------（ソース6）------------------------------
<html>
<head>
<title>私のホームページ</title><br>
</head>
<body bgcolor="#ffff99">
<br>
<center>
<img src="C:/homepage/image/taitol.gif" width="316"
height="73" border="0">
<br><br>
<font size="+2" color="#800000" >私のホームページを訪ねていただきましてありがとうございます<br>
このサイトは私の趣味の世界を紹介しています</font>
<br><br>
<table allign="left" border="5" bordercolorlight="#999999"
bordercolordark="#663333">
<tbody>
<tr>
<td>
<img src="C:/homepage/image/iwate14-52.jpg" width="360"
border="0"></td>
</tr>
</tbody>
</table>
<br>
<font size="-1">この写真は開運橋から撮影しました。<br></font>
<br>
<a href="mailto:yosi@h.email.ne.jp"><b><font size="+1"
color="#F00000">メールをください</font></b></a>
</center>
</body>
</html>
------------------------------------------------------------------------
私のホームページを訪ねていただきありがとうございます このサイトは私の趣味の世界を紹介しています
メールをください |
変更したところは下記の赤の部分です。<img src="C:/homepage/image/iwate14-52.jpg" width="360">
と指定した写真の設定は変えていません。
<table allign="left" border="5" bordercolorlight="#999999" bordercolordark="#663333">
<tbody>
<tr>
<td>
<img src="C:/homepage/image/iwate14-52.jpg" width="360"></td>
</tr>
</tbody>
</table>
○このまま全部コピーしてＩＥ画面からソースを表示させて全て削除して貼り付けてもいいですが、変更したところだけコピーして貼り付け作業をしたほうが理解が進むでしょう。でき上がったら上書き保存をしてください。
（タグの説明）
この作業で新しく出てきたタグは<table><tbody><ｔｒ><ｔｄ>です。
この額縁は表作成の応用編です。これらのタブは全て表の基本形に使うタブです。
<table>〜</table> は 表全体を囲って示します
<ｔｒ>〜</ｔｒ> は 横一列のデータを囲みます
<ｔｄ>〜</ｔｄ> は データ用セルでデータを囲って、囲まれた範囲が一つのデータになります
<tbody>〜</tbody>は データをグループ化しいわゆる表の本体部分をくくります。（ちょっと難しいかも、
流しておいてください）
その他にborderは外枠の太さ、bordercolorlightは明るい枠の色の指定、 bordercolordarkは暗い部分の枠の色指定。
ここには無いがborder-colorは枠の色指定です。
----------------------------------------------------------------------------
（表の基本形）
<table border="2" align="left">
<tbody>
<tr>
<th align="center">品名</th><th align="center">数量</th><th align="center">単価</th>
<thalign="center">金額</th>
</tr>
<tr>
<td align="center">りんご</td><td align="right">120</td><td align="right">100</td>
<td align="right">12000</td>
</tr>
<tr>
<td align="center">みかん</td><td align="right">200</td><td align="right">50</td>
<td align="right">10000</td>
</tr>
<tr>
<td align="center">か き</td><td align="right">50</td><td align="right">120</td>
<td align="right">6000</td>
</tr>
</tbody>
</table>
| 品名 | 数量 | 単価 | 金額 |
|---|---|---|---|
| りんご | 120 | 100 | 12000 |
| みかん | 200 | 50 | 10000 |
| か き | 50 | 120 | 6000 |
<th>〜</th>は見出しのセルをあらわします。
またソース中ｔｄタグ内の align＝"center"はセルの中を
中央寄せに 指定しています。
左寄せはleft。右寄せはrightです。数字は右寄せです。
<ｔｄ>〜</ｔｄ>は一つのデータを<ｔｒ>〜</ｔｒ>は横一列を
<tbody>〜</tbody>表全体をそれぞれ囲んでいます。
<table>〜</table>が全体の表の枠ソース範囲を設定しています。
<table>から表の設定が始まり</table>で表のそーすが終わってるヨということです。
----------------------------------------------------------------------------
○なお，上の<table border="2">の設定値を2から0にすると枠の線を非表示にできます。
さらに数値が0の場合はborderの表示は省略できます。
○また、上の表の右側に解説文を書いていますがこの表を左寄せにしてその右側を文が廻り込んで表示されるようにtableタグ内に<table border="2" align="left">とalign="left"を追加して指定しています。