紹介ページの概要を作成

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


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


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

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


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


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

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

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

B <div id="containertop">と</div>の間のものを全て削除します。

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

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

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

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

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

E 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>




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

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

  紹介ページ