ファイル【hana1.htm】のHTML作成
HTML Table BuilderのＡ１セルに z を入力してHTMLを作成する。
ホームフォルダに作成した【hana】フォルダに【hana1.htm】を作成し【表示】
メニューのソースで開くメモ帳に貼り付け上書き保存する。
１．青文字部を参考に記述してください。
上書き保存後【hana1.htm】ファイルのアイコンをダブルクリックし結果を確認してください。
２．赤文字部を書き加えてください。
上書き保存後【hana1.htm】ファイルのアイコンをダブルクリックして書き加えた効果を確認
してください。
赤文字部の記述は【９．文字サイズの設定】を参照して下さい。
黒文字部は説明文を追加する場所を示すコメントです。記述する必要はありません。
１．完成サンプル ２．完成サンプル
<html lang="ja">
<head>
<title>好きな花</title>
<style type="text/css">
<!--
@import url(../qqq.css);
body{font-size:22pt;color:black;background-color:lavender}
table{background-color:mintcream;width:750px}
td{font-size:14pt}
.fnt1{font-size:22pt;color:red}
-->
</style>
</head>
<body>
<div align="center">
<span class="blue">好きな花</span><br><br>
<table>
<tr><td>
<br><a href="hana1.jpg"><img src="hana1s.jpg" style="float:left"></a>
<span class="fnt1">アサガオ</span><br>
ヒルガオ科／アサガオ属<br>
つる性１年草<br>
和名／別名・・・和：アサガオ<br>
原 産 地・・・園芸交配種（熱帯アメリカ）<br>
用 途・・・花壇、鉢植え、垣根仕立てなど<br>
花 色・・・赤、白、青、紫、柿色など<br>
出回 り 期・・・夏<br><br><!--------- ここに追加書き込み --------->
<hr>
<br><a href="hana2.jpg"><img src="hana2s.jpg" style="float:right"></a>
<span class="fnt1">イカリソウ</span><br>
メギ科／イカリソウ属<br>
<br>
和名／別名・・・和：イカリソウ<br>
原 産 地・・・日本<br>
用 途・・・花壇、鉢植え<br>
花 色・・・桃、泡紫色、白<br>
出回 り 期・・・春<br><br><!--------- ここに追加書き込み --------->
<hr>
<br><a href="hana3.jpg"><img src="hana3s.jpg" style="float:left"></a>
<a href="hana32.jpg"><img src="hana32s.jpg" style="float:right"></a>
<span class="fnt1">シモバシラ</span><br>
シソ科／シモバシラ属<br>
<br>
和名／別名・・・和：シモバシラ<br>
分 布・・・関東以西〜九州<br>
用 途・・・<br>
花 色・・・白<br>
出回 り 期・・・秋<br><br><!--------- ここに追加書き込み --------->
<hr>
<br><a href="hana4.jpg"><img src="hana4s.jpg" style="float:right"></a>
<span class="fnt1">ヤマユリ</span><br>
ユリ科／ユリ属<br>
<br>
和名／別名・・・和：ヤマユリ<br>
原 産 地・・・日本<br>
用 途・・・庭植え、鉢植え、切花<br>
花 色・・・白地に褐色斑点、黄色条斑<br>
出回 り 期・・・夏<br><br><!--------- ここに追加書き込み --------->
</td></tr>
</table>
</div>
</body>
</html>
スタイルシート解説参照 class float margin
タグ解説参照 <table> <span>
<span class="fnt1">は「９．文字サイズの設定」参照
|