紹介ページabout.htmlの概要作成

売れるホームページの作り方 ⇒ 速攻HTML ⇒ 紹介ページの概要を作成


速攻HTML

湖畔の工房ページの概要を作成します

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



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


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


A タイトルを”河口湖観光社- 湖畔の工房について”に変更します。


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


C h1タグを追加して、”河口湖観光社”にします。


D pタグを追加して中身を”工房はもちろん、河口湖の自然もお届けする湖畔の工房です”にします。


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


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


  中見出しは ”湖畔の工房について”で、<h2></h2gt;で挟みます。
  小見出しは3個で、<h3gt;</h3gt;で挟みます。
  ・”河口湖クラフトパーク”
  ・”河口湖大石紬伝統工芸館”
  ・”河口湖畔のまわりにある散策名所”


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>





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


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


  紹介ページ