ホームページの作り方
(その三)

 今日は表の基本について勉強しましょう。それでは身近なもので、昨日、最初の画面にはめ込んだ写真に枠をつけてみましょう。ここでは表のタグについて覚えてください。
 そんなに難しいものではありません。このタグを覚えておくとソフトを利用して作ったプログラムソースが壊れたときでもこの基本を知っていれば簡単に直すこともできます。
 また同じようなデータが増えるときもソースのコピーで簡単に増やすことが可能です。


※第三日目


練習八
(文字の練習)


 もう文字の表示はご理解しているでしょうがもう一度復習しましょう。
   文字のタグは<FONT>テキスト</FONT>で大きさ(size)や色(color)、字体(face)などの属性をFONTタグ の中に指定します。

          文字の大きさについて、下の例を見て理解してください。 
サイズ1 size"1"
サイズ2 size"2"
サイズ3 size"3"
サイズ4 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>

----------------------------------------------------------------------------------

文字の大きさにはプラスの他にマイナス記号も使えます。写真の説明には文字を小さくしました。
改行<br>タグを好きなように増減してください。

このまま全部コピーしてIE画面からソースを表示させて全て削除して貼り付けてもいいですが、変更した赤書きのところだけコピーし、貼り付け作業をしたほうが理解が進むでしょう。でき上がったら上書き保存をしてください。

 IE画面を最新情報にし、下記の画面が出てくれば成功です。  (忘れた方は練習四 参照)        


私のホームページを訪ねていただきありがとうございます
このサイトは私の趣味の世界を紹介しています



この写真は開運橋から撮影しました

メールをください

ようやく形ができてきましたね。写真に枠をつけて飾って見たいですね。


練習九( 表を活用し画像の額縁の作成)

  今度は額縁をつけます。先ず額縁を表示するタグとテキストを追加したソース6をおみせしましょう。

----------------------------------------(ソース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>


○このまま全部コピーしてIE画面からソースを表示させて全て削除して貼り付けてもいいですが、変更したところだけコピーして貼り付け作業をしたほうが理解が進むでしょう。でき上がったら上書き保存をしてください。

(タグの説明)
  この作業で新しく出てきたタグは<table><tbody><tr><td>です。
この額縁は表作成の応用編です。これらのタブは全て表の基本形に使うタブです。
<table>〜</table> は 表全体を囲って示します
<tr>〜</tr>     は 横一列のデータを囲みます
<td>〜</td>    は データ用セルでデータを囲って、囲まれた範囲が一つのデータになります
<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">1
2000</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>は見出しのセルをあらわします。
 またソース中tdタグ内の align="center"はセルの中を
 中央寄せに 指定しています。
 左寄せはleft。右寄せはrightです。数字は右寄せです。
  <td>〜</td>は一つのデータを<tr>〜</tr>は横一列を
 <tbody>〜</tbody>
表全体をそれぞれ囲んでいます。
 <table>〜</table>が全体の表の枠ソース範囲を設定しています。
<table>から表の設定が始まり</table>で表のそーすが終わってるヨということです。
----------------------------------------------------------------------------
なお,上の<table border="2">の設定値を2から0にすると枠の線を非表示にできます。
さらに数値が0の場合はborderの表示は省略できます。
また、上の表の右側に解説文を書いていますがこの表を左寄せにしてその右側を文が廻り込んで表示されるようにtableタグ内に<table border="2" align="left">とalign="left"を追加して指定しています。
 

 いかがですかソースをコピーしながら進んでも、少しずつ身についていくと思います。
 市販ソフトの利用であればこの程度のものは半日もかかりませんが、何回も言うように、ホームページ作っていくうちにさらに上を目指してJavaScriptを導入する時が来てもHTMLを知っていれば困ることは無いと思います。
 何故ならばホームページ作成ソフトなどでは手軽にホームページが作れると共に本人が気がつかないでJavaScriptを活用しソースができてしまいます。JavaScriptとHTMLがごちゃごちゃになっています。何かの拍子でページが異常な動きが出たときでも、少なくともHTMLの知識を知っていればソースのエラーを見つけ出せることもできるでしょう。
 出きるだけHTMLでプログラムソースを書けるというか読めるようにしておくべきです。
 次回はフレームについて解説します。

その一その二その三その四その五その六その七