Web基本

Web

HTMLで記述するべき内容

  1. 情報の優先順位を決める
  2. 優先順位の高い情報から→h1〜h6(一般的にはh5まで)
  3. 何の要素マークアップすればよいか迷ったら P 要素を設定する
  4. 見出し＋本文の関係の次に箇条書きul, ol, dl の3種類を使い分ける

テキストデーター(txt)からHTML作成

原本のテキスト

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

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

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

観葉植物の基礎知識

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

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

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



HTML作成

<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html/loose.dtd">
<html lang="ja">
<head>

<meta http-equiv="Content-Type"content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style Type"content="text/css">
<title>マイホーム・グリーン計画</title>
<style type="text/css">

body{
background: #e0efe0;
 } 
h1{
color: #23ae1c;
}
</style>
</head>
<h1>マイホーム・グリーン計画</h1>
<p>マイホームで趣味で始めた園芸が，家中を埋め尽くすくらいに大変な状態になってしまいました。</p>
<p>だから本当は「マイホームからちょっとグリーンを減らしたいかも計画」なページかもしれません。</p>
<p><a href"#"><img src="images/01.jpg" alt="" width="400" height="266"></a></p>
<h2>最新の更新情報</h2>
<ul>
<li>ハーブデータベースにパセリを追加しました(5/3)</li>
<li>ハーブ写真集にペパーミントを追加しました(4/30)</li>
</ul>
<h2>観葉植物の基礎知識</h2>
<p>観葉植物の種類や，育てる環境，コツ，購入値段の話など諸々の雑記です。</p>
<dl>
<dt><a href"#">ハーブ データベース</a></dt>
<dd>コツコツと作ってみました。現在30種類のデータがあります。</dd>
<dt><a href"#">ハーブ写真集</a></dt>
<dd>うちのハーブたちをデジカメで撮ってみました。</dd>
<dt><a href"#">掲示板</a></dt>
<dd>ハーブな話題を熱く語る掲示板です。どうぞ足跡を残していってください。</dd>
</dl>
<address>著作者　e-mail:<a href="mailto:xxx@xxx.com">xxx@xxx.com</a></address>
</body>
</html>

ブラウザで確認