練習

HTML

以下のテキストをHTMLで記述する。

                • -

マイホーム・グリーン計画

マイホームで趣味で始めた園芸が，家中を埋め尽くすくらいに大変な状態になってしまいました。だから本当は「マイホームからちょっとグリーンを減らしたいかも計画」なページかもしれません。
イメージ画像
最新の更新情報

* ハーブデータベースにパセリを追加しました(5/3)
* ハーブ写真集にペパーミントを追加しました(4/30)

観葉植物の基礎知識

観葉植物の種類や，育てる環境，コツ，購入値段の話など諸々の雑記です。

ハーブ データベース
コツコツと作ってみました。現在30種類のデータがあります。
ハーブ写真集
うちのハーブたちをデジカメで撮ってみました。
掲示板
ハーブな話題を熱く語る掲示板です。どうぞ足跡を残していってください。

著作者　e-mail: xxx@xxx.com

              • -
<html>
<head>
<title>マイホーム・グリーン計画</title>
</head>

<body>
<h1>マイホーム・グリーン計画</h1>
<p>マイホームで趣味で始めた園芸が，家中を埋め尽くすくら
いに大変な状態になってしまいました。</p>
<p>だから本当は「マイホームからちょっとグリーンを減らし
たいかも計画」なページかもしれません。</p>

<img src="images/H_A053S.jpg">
<h2>最新の更新情報</h2>
<ul>
<li> ハーブデータベースにパセリを追加しました(5/3)</li>
<li> ハーブ写真集にペパーミントを追加しました(4/30)</li>
</ul>
<h2>観葉植物の基礎知識</h2>

<p>観葉植物の種類や，育てる環境，コツ，購入値段の話など
諸々の雑記です。</p>
<dl>
<dt>ハーブ データベース</dt>
<dd>コツコツと作ってみました。現在30種類のデータがありま
す。</dd>
<dt>ハーブ写真集</dt>
<dd>うちのハーブたちをデジカメで撮ってみました。</dd>
</dl>
<h3>掲示板</h3>
<p>ハーブな話題を熱く語る掲示板です。どうぞ足跡を残して
いってください。</p>

<address>著作者　e-mail: xxx@xxx.com</address>
</body>
</heml>

ここまでは、前回までで習った内容です。（addressやdlなどの追記はありますが）

これにさらに前回、新たに学習したことを記入します。

<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.01
 Trasitional//EN""http://www.w3.org/tr/html4/loose/dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/heml; 
Charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" 
content="text/css">
<title>マイホーム・グリーン計画</title>
<style type="text/css">
body{
background:#e0efe0;
}
h1{
color:#23ae1c;
}
h2{
color:#c1dd04;
}
</style>
</head>
<!--ここからbody開始-->
<body>
<h1>マイホーム・グリーン計画<h1>
<p>マイホームで趣味で始めた園芸が，家中を埋め尽くすくら
いに大変な状態になってしまいました。</p>
<p>だから本当は「マイホームからちょっとグリーンを減らし
たいかも計画」なページかもしれません。</p>
<p><a href="#"><img src="images/H_A053S.jpg"alt="" 
width="300" height="200"></a></p>

<h2>最新の更新情報</h2>
<ul>
<li> ハーブデータベースにパセリを追加しました(5/3)</li>
<li> ハーブ写真集にペパーミントを追加しました(4/30)</li>
</ul>
<h2>観葉植物の基礎知識</h2>

<p>観葉植物の種類や，育てる環境，コツ，購入値段の話など
諸々の雑記です。</p>
<dl>
<dt><a herf="#">ハーブ データベース</a></dt>
<dd>コツコツと作ってみました。現在30種類のデータがありま
す。</dd>
<dt><a herf="#">ハーブ写真集</a></dt>
<dd>うちのハーブたちをデジカメで撮ってみました。</dd>
<dt><a herf="#">掲示板</a></dt>
<dd>ハーブな話題を熱く語る掲示板です。どうぞ足跡を残して
いってください。</dd>
</dl>

<address>著作者　e-mail:<a herf="mailto:xxx@xxx.com"> 
xxx@xxx.com</a></address>

</body>
<!--ここでbody終了-->

</html>


こういう風に表示されます。