６．コンテンツを作る　その１
コンテンツとしてペットおよび好きな花、コレクションのページを作ります。
それぞれのファイル名および保存場所は次のとおりとします。
その１ではペットのページを作成します。



コンテンツファイル名保存フォルダ


ペットpet1.htmpet


好きな花hana1.htmhana


コレクションcolct1.htmcolct





ファイル【pet1.htm】のHTML作成



A1


A2B2


A3B3


ホームフォルダ内に作成してあるフォルダ【pet】内にファイル【pet1.htm】
を作成する。
HTML Table Builderに上中央の背景画面色・文字色・セル幅および上右側の
データを入力してＨＴＭＬを作成する。
このHTMLを【pet1.htm】のメモ帳に貼り付け上書き保存する。

１．青文字部を参考に【pet1.htm】を書き換えてください。
　　上書き保存後【pet1.htm】ファイルのアイコンをダブルクリックし結果を確認してください。
２．赤文字部を書き加えてください
　　上書き保存後【pet1.htm】ファイルのアイコンをダブルクリックして書き加えた効果を確認
　　してください。
１．完成サンプル　　２．完成サンプル


<html lang="ja">
<head>
<title>可愛らしいペット</title>
<style type="text/css">
<!--
@import url(../qqq.css);
body{font-size:22pt;color:navy;background-color:lavender}
table{background-color:mintcream}
td{font-size:16pt}
.wh{width:370px}
-->
</style>
</head>
<body>
<div align="center">
<span class="red">可愛らしいペット</span><br><br>
<table>
<tr><td colspan="2" align="center">
<br>ペットを紹介します。ペットの画像をクリックしてください。<br><br>
</td></tr><tr><td class="wh">
<img src="pet1s.jpg" style="float:left"><br><br><br>ポチです。
</td><td class="wh">
<img src="pet2s.jpg" style="float:right"><br><br><br>タマです。
</td></tr><tr><td class="wh">
<img src="pet3s.jpg" style="float:left"><br><br><br>デブです。
</td><td class="wh">
<img src="pet4s.jpg" style="float:right"><br><br><br>ヌルです。
</td></tr>
</table>
</div>
</body>
</html>

解説
１．td{font-size:16pt}
　　tdタグ部の文字サイズを１８ポイントから１６ポイントに変更

２．<td colspan="2" align="center">
　　tdタグのalign属性でそのタグ内の文字・画像の配置を設定する。
　　align属性の値がleftの場合：左揃え
　　align属性の値がcenterの場合：中央揃え
　　align属性の値がrightの場合：右揃え

３．<img src="pet1s.jpg" style="float:left"><br><br><br>ポチです。
　　imgタグで画像【pet1s.jpg】を表示する。
　　src属性の値（url）は表示する画像ファイルの保存場所と画像ファイル名を/で連結して
　　示すが画像を呼び出すHTMLファイルと画像ファイルが同じフォルダ内にあるので
　　src="pet1s.jpg"のとおり保存場所は記述する必要がない。

　　スタイルシートのfloat属性で画像の配置と文字の回り込みを設定する。
　　float属性の値がleftの場合：画像は左、文字は画像の右に配置される。
　　float属性の値がrightの場合：画像は右、文字は画像の左に配置される。

スタイルシート解説参照　　float

タグ解説参照　　<td>タグ　　<img>タグ