ホームページを自作します。エディタを使って自分でつくるオリジナルなホームページの作り方を説明します。SEO対策webサイトを作ります。

MakingHPsample2

エディタでHPを作る_sample2 の解説


《サンプルプログラム》

1.sample1(2カラム版) ⇔ sample1の解説
2.sample2(3カラム版) ⇔ 解説:このページ
3.sample3(2カラム版) ⇔ ( 左サイドメニュー部分とヘッダー部分が固定表示の例)

  
実際に、モデル「2.sample2」に倣って、3カラムのページを作ってみましょう。

「2.sample2」をクリックすると、ホームページが現れます。
その画面上にマウスを乗せ、右クリックするとポップアップメニューが開くので、
そのポップアップメニューの中にある「ページのソースを表示」をクリックしてください。
sample2のソースコードが出てきますので、
このソースコードを見やすい様に画面を縮小表示しておいてくださいネ。
 そのソースコードに従って説明していきます。

ねらいは、「3カラムのコーディングの方法を習得する」ことです。

ホームページの構造(1),(2)の部分【DTD宣言,head要素】

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 <meta http-equiv="Content-Style-Type" content="text/css" />
 <title>XHTMLの基本</title>
 <link rel="stylesheet" type="text/css" href="mckstyle.css" />
 </head>

解説

文書型宣言(DTD)
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">で、
XHTML1.0の厳密型(Strict)であることがわかります。

 <html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">より、
このサイトは、html4を「xml1.0」の書式に準拠して改変した書式の「xhtml1.0」(厳密型)
で作られたサイトで、使用言語は日本語です。
  
また、
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 <meta http-equiv="Content-Style-Type" content="text/css" />
で、
metaとは、ひとつ上の次元、ひとつ上の段階、超~、付属の、追加の、~の後に追加した、
のような意味でしたね。
従って、このmetaタグは、「全体に対して追加的な情報」、「body部分に影響を与える
ひとつ上の次元、立場、ひとつ上の追加的情報」となります。

そして、このサイトはhtmlとCSSで書かれていて、文字コードはUTF-8です。
 
次に、
 <link rel="stylesheet" type="text/css" href="mckstyle.css" />で、
スタイルシート「mckstyle.css」は別ファイルであり、その所在は
「href="mckstyle.css"」
より、同じサーバー上の同じデレィクトリ内にあることがわかります。


ホームページの構造(3)の部分(ヘッダーブロック)

 <body>
 <div id="Wrap">
 <div id="header">
 <div class="moji_small">ホームページをCSS、XHTMLを利用して、テキストエディタで作成します。
 </div>
 <img border="1" height="125" src="images/scene1.PNG" width="100%" alt="霧島山" />
 <ul>   
   <li><a href="http://michoka.jp/tezukuri_HP/HP_sample2.html">TOP</a></li>
   <li><a href="http://makehp.mitioka.com/sample_css_html_HP.html">sample1</a></li>
   <li><a href="#">CSS</a></li>
   <li><a href="http://mitioka.com/yasaitukuri/sample_yasaitukuri.html">野菜作り</a></li>
   <li>・・</li>
   <li>・・</li>
 </ul>
 </div><!-- /header_end -->

解説します。
まず、
 <body> ←・・・・ ここからホームページの中身が始まります。

 <div id="Wrap"> ←・・・これは中段(左サイドメニュー+コンテンツ+右サイドコラム)の全体を包むブロックの設定の始まりです。

  <div id="header"> ←・・・・ヘッダーブロック部分の始まりです。

 <div class="moji_small">ホームページをCSS、XHTML、PHPを利用して、テキストエディタで作成します。
 </div> ←・・・・サイト概略説明文です。次に示す画像のすぐ上に来ます。

 <img src="./images/homepage_header_image.JPG" alt="高千穂峰" height="285" width="100%">
 ↑ この部分は、幅945px、高さ285pxの画像です。↑

 width="100%"は、スタイルシート「mckstyle.css」の中の「#header」に記述
してある「width: 945px;」より、その100%だから、945pxであることがわかります。

#header {
      clear: both;
      width: 945px;   ←・・・・この幅の100%だから、945pxである。
      padding: 1px;
      background-color: #ccff99;
      border: solid 1px #1f2e3d;
      margin-left: auto;
      margin-right: auto;
      text-align:center;
      }

   
   <ul> ←・・・・ヘッダー部ナビメニューの始まり。 
   <li><a href="http://michoka.jp/tezukuri_HP/HP_sample2.html">TOP</a></li>
   ↑↑・・・ここよりメニュー項目始まり。
   <li><a href="http://makehp.mitioka.com/sample_css_html_HP.html">sample1</a></li>
   <li><a href="#">CSS</a></li>
   <li><a href="http://mitioka.com/yasaitukuri/sample_yasaitukuri.html">野菜作り</a></li>
   <li>・・</li>
   <li>・・</li>  ←・・・・ここでメニュー項目終わり。
   </ul> ←・・・・ここでナビメニュー終わり。
  </div><!-- /header -->  ←・・・・ ここでヘッダーブロック終了です。

ホームページの構造(3)の部分(innerブロック)

【(左サイドメニュー)+(メインコンテンツ)】部分

 <div id="inner">
   <div id="largeWrap">
    <div id="mainWrap">
 <h1>XHTMLの勉強</h1>
 <p>
  パスカルは、「人間は考える葦である。」と言った。
 </p>
 <h2>XHTMLの基礎1</h2>
 <h3> <箇条書き> </h3>
 <em>・番号なし</em>
 <div style="border:solid 1px #369;width:400px">
 <pre>
  <p>私の好きな雑誌:</p>
  <ul>
   <li>りぼん</li>
   <li>なかよし</li>
  </ul>
 </pre>
 </div>
 ↓↓これを実行すると;
 <p>私の好きな雑誌:</p>
 <ul style="list-style-type:disk">
  <li style="display:list-item">りぼん</li>
  <li style="display:list-item">なかよし</li>
 </ul>
 <br />
  ul は unordered list(番号無し箇条書き),li は list item<br />(箇条書き項目)。
 <li> ... </li> の中には文字などのインライン要素や、またはブロックレベル要素が入る。
 <br />
 <hr>
 <br />
 <br />
   </div><!-- /mainWrap END -->
 <div id="leftsideWrap">
  <span style="color:white">(左サイドメニュー)</span>
  <ul>    
   <li><a href="http://michoka.jp/tezukuri_HP/HP_sample2.html">TOP</a></li>
   <li><a href="http://makehp.mitioka.com/sample_css_html_HP.html">sample1</a></li>
   <li><a href="#">CSS</a></li>
   <li><a href="http://mitioka.com/yasaitukuri/sample_yasaitukuri.html">野菜作り</a></li>
    <li>・・</li><br /><br />
    <li>・・</li><br /><br />
  </ul>
  </div><!-- /leftsideWrap -->
  <div class="clear"><hr /></div>
  </div><!-- /largeWrap END -->


powered by QHM 6.0.4 haik
based on PukiWiki 1.4.7 License is GPL. QHM

最新の更新 RSS  Valid XHTML 1.0 Transitional