紹介ページの概要を作成

このサイトについて｜ サイトマップ


アフィリエイトで稼ぐのは厳しい　⇒　速習HTML　⇒　紹介ページの概要を作成

牛乳の工房ページの概要を作成します。

　　この文字をクリックするとサンプルダウンロード出来ます。


背景に模様を付ける　←　｜　→　ヘッダと配置の整備


●　htmlで牛乳の工房ページの概要だけ作ります

①　トップページのindex.htmlを開き、別前を付けて保存します。about.html　にします。

②　タイトルを”野辺山高原社- 牛乳の工房について”に変更します。

③　＜div id="containertop"＞と＜/div＞の間のものを全て削除します。

④　h1タグを追加して、”野辺山高原社”にします。

⑤　pタグを追加して中身を”牛乳はもちろん、八ヶ岳の自然もお届けする牛乳の工房です”にします。

⑥　トップメニュー部分は　index.html　からコピーします。（削除せずに残しても可）

⑦　次に見出しだけ書き込みます。

　　中見出しは　”牛乳の工房について”で、＜h2＞＜/h2>で挟みます。
　　小見出しは３個で、＜h3＞＜/h3>で挟みます。
　　・”高原の中にある工房”
　　・”高原の四季も楽しむことが出来ます”
　　・”工房のまわりにある散策名所”

⑥　copyrightは　index.html　からコピーします。（削除せずに残しても可）


これで、次の様なhtmlソースが出来上がります。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org
/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
　<head>
　　<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
　　<title>野辺山高原社- 牛乳の工房について</title>
　</head>

　<body>

　<div id="containertop">

　<h1>野辺山高原社</h1>

　<p>牛乳はもちろん、八ヶ岳の自然もお届けする牛乳の工房です</p>

　<ul>
　<li><a fref="index.html">トップ</a></li>
　<li><a fref="about.html">牛乳の工房について</a></li>
　<li><a fref="event.html">イベントの案内</a></li>
　<li><a href="mailto:yatugatake@web.mail">メール</a></li>
　<li><a href="http://blog.xxx.xxx/">ブログ</a></li>
　</ul>

　<h2>牛乳の工房について</h2>

　<h3>高原の中にある工房</h3>

　<h3>高原の四季も楽しむことが出来ます</h3>

　<h3>工房のまわりにある散策名所</h3>

　<address>Copyright (C) 野辺山高原社</address>

　</div>

　</body>
</html>



サンプルを表示したイメージです。

見出しの大きさがスッキリせず、先頭位置も揃っていません。

　　紹介ページ