HTMLソースを説明していきます。
HTMLソースsample7.htmlの注意事項を赤い字で記しています。
重複する箇所は省略しています。（但し、重要な箇所は残します）
−−−−−−−−−−−−−−−−−前略−−−−−−−−−−−−−−−−−
<head>
−−−−−−−−−−−−−−−−−中略−−−−−−−−−−−−−−−−−
<link rel="start" href="sample7.html" />
<link href="style7.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container"> コンテナーブロックの開始
<div id="banner"> バナーブロックの開始
<h1>HTMLCSS.biz-ホームページ制作講座</h1> バナー上に文字を表示
</div> バナーブロックの終了
<div id="leftsidebar"> 左ナビゲーションブロックの開始
<div class="mentop">メニュー</div> メニューは左ナビゲーションに設置
<div class="indtp"> スタイルシートで表風に
<ul>
<li><a href="../1/sample1.html">サンプル１−<br />１カラムレイアウトその１</a></li>
<li><a href="../2/sample2.html">サンプル２−<br />１カラムレイアウトその２</a></li>
<li><a href="../3/sample3.html">サンプル３−<br />２カラムレイアウトその１</a></li>
<li><a href="../4/sample4.html">サンプル４−<br />２カラムレイアウトその２</a></li>
<li><a href="../5/sample5.html">サンプル５−<br />右ナビゲーションその１</a></li>
<li><a href="../6/sample6.html">サンプル６−<br />右ナビゲーションその２</a></li>
<li><a href="sample7.html">サンプル７−<br />３カラムレイアウトその１</a></li>
<li><a href="../8/sample8.html">サンプル８−<br />３カラムレイアウトその２</a></li>
</ul>
</div>
</div> 左ナビゲーションブロックの終了
<div id="contents"> コンテンツブロックの開始
<h2>初心者がHTMLとスタイルシートを使いこなせるようになる事を目指すホームページ作成講座</h2> コンテンツ上部の大きめな文字
<div class="contop">はじめに</div> スタイルシートで表風に
<div class="indtp2">
<p class="c1">「HTMLCSS.biz-ホームページ制作講座」はHTMLとスタイルシート(CSS)が始めての人が、本格的な商用ホームページやアフィリエイトサイトを作成出来るようになる事を目的としています。
−−−−−−−−−−−−−−−−−中略−−−−−−−−−−−−−−−−−
準備するものはWindows付属のメモ帳ですが、<span class="cont"><a href="http://hide.maruo.co.jp/">秀丸エディタ</a></span>等があるほうが尚良いです。他にダウンロードするソフトがありますが、次章でダウンロード先を後章で利用方法について説明します。<br />
−−−−−−−−−−−−−−−−−中略−−−−−−−−−−−−−−−−−
</div>
<br />
</div> コンテンツブロックの終了（これまでと異なり短め）
<div id="rightsidebar"> 右ナビゲーションブロックの開始
<div class="rgttop">当教材の構成について</div> スタイルシートで表風に
<div class="indtp3">
<p class="c2">このマニュアル<br /> コンテンツ部分の文字を小さめに、大きめにすると縦にはみ出る
HTMLファイル、sample1.html〜sample8.html<br />
スタイルシート、style1.css〜style8.css</p>
</div>
表と表の間はスタイルシートで調整可能
<div class="rgttop">HTMLについて</div>
<div class="indtp3">
<p class="c2">HTMLとは<span class="cont">
<a href="http://ja.wikipedia.org/wiki/HyperText_Markup_Language">HyperText Markup Language</a>
</span>の略です。文書の論理的な構造を示す言語です。<br />
−−−−−−−−−−−−−−−−−中略−−−−−−−−−−−−−−−−−
</div>
<div class="rgttop">スタイルシート(CSS)について</div>
<div class="indtp3">
<p class="c2">CSSは<span class="cont">
<a href="http://ja.wikipedia.org/wiki/Cascading_Style_Sheets">Cascading Style Sheets</a>
</span>の略です。HTMLやXHTMLで見栄えを定義する仕様です。<br />
CSSはW3Cにより規格が定められています。</p>
</div>
</div> 右ナビゲーションブロックの終了
</div> コンテナーブロックの終了
<address>
Copyright ©2007 あなたのホームページ名or会社名 All Rights Reserved.<br />
Powered by<span class="cont"><a href="http://www.htmlcss.biz">HTMLCSS.biz-ホームページ制作講座</a></span>
</address>著作権リンクの削除禁止
</body>
</html>
スタイルシートの説明にお進み下さい。メニューは上部にあります。