HTMLソースを説明していきます。
HTMLソースsample6.htmlの注意事項を赤い字で記しています。
重複する箇所は省略しています。（但し、重要な箇所は残します）
−−−−−−−−−−−−−−−−−前略−−−−−−−−−−−−−−−−−
<head>
−−−−−−−−−−−−−−−−−中略−−−−−−−−−−−−−−−−−
<link rel="start" href="sample6.html" />
<link href="style6.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container"> コンテナーブロックの開始
<div id="banner"> バナーブロックの開始
<h1>HTMLCSS.biz-ホームページ制作講座</h1>
<h2>初心者がHTMLとスタイルシートを使いこなせるようになる事を目指すホームページ作成講座</h2> バナーの図の上に文字を乗せています。調整はスタイルシートで行っています
</div>
<div id="contents"> コンテンツブロックの開始
<p>「HTMLCSS.biz-ホームページ制作講座」はHTMLとスタイルシート(CSS)が始めての人が、本格的な商用ホームページやアフィリエイトサイトを作成出来るようになる事を目的としています。<br />
−−−−−−−−−−−−−−−−−中略−−−−−−−−−−−−−−−−−
準備するものはWindows付属のメモ帳ですが、<span class="cont"><a href="http://hide.maruo.co.jp/">秀丸エディタ</a></span>等があるほうが尚良いです。他にダウンロードするソフトがありますが、次章でダウンロード先を後章で利用方法について説明します。<br /> このページではリンクの設定が３つあります コンテンツ内でのリンクはマウスカーソルをリンクに乗せると反転します スタイルシートで設定します
−−−−−−−−−−−−−−−−−中略−−−−−−−−−−−−−−−−−
<div class="ubox"> 角丸の画像に字を乗せています スタイルシートで設定します これは小さいボックス
<h3>当教材の構成について</h3>
<p class="c1">このマニュアル<br />
HTMLファイル、sample1.html〜sample8.html<br />
スタイルシート、style1.css〜style8.css
</p>
</div>
<div class="ubox2"> 角丸の画像に字を乗せています スタイルシートで設定します これは大きいボックス
<h3>HTMLについて</h3>
<p class="c1">HTMLとは<span class="cont"> コンテンツ部分のリンクの設定
<a href="http://ja.wikipedia.org/wiki/HyperText_Markup_Language">HyperText Markup Language
</a></span>の略です。文書の論理的な<br />構造を示す言語です。</p>
−−−−−−−−−−−−−−−−−中略−−−−−−−−−−−−−−−−−
<div class="ubox"> 角丸の画像に字を乗せています スタイルシートで設定します これは小さいボックス
<h3>スタイルシート(CSS)について</h3>
<p class="c1">CSSは<span class="cont">
−−−−−−−−−−−−−−−−−中略−−−−−−−−−−−−−−−−−
</div> コンテンツブロックの終了
<div id="rightsidebar"> 右ナビゲーションブロックの開始
<ul> ボタン状のリンク部分です 仕掛けはスタイルシートにあります 画像は使っていません
<li class="menu"><a href="../1/sample1.html">サンプル１−<br />１カラムレイアウトその１</a></li>
<li class="menu"><a href="../2/sample2.html">サンプル２−<br />１カラムレイアウトその２</a></li>
<li class="menu"><a href="../3/sample3.html">サンプル３−<br />２カラムレイアウトその１</a></li>
<li class="menu"><a href="../4/sample4.html">サンプル４−<br />２カラムレイアウトその２</a></li>
<li class="menu"><a href="../5/sample5.html">サンプル５−<br />右ナビゲーションその１</a></li>
<li class="menu"><a href="sample6.html">サンプル６−<br />右ナビゲーションその２</a></li>
<li class="menu"><a href="../7/sample7.html">サンプル７−<br />３カラムレイアウトその１</a></li>
<li class="menu"><a href="../8/sample8.html">サンプル８−<br />３カラムレイアウトその２</a></li>
</ul>
</div> 右ナビゲーションブロックの終了
<div id="footer"> フッターブロックの開始
<div class="fmenu"> スタイルシートで位置を調整しています ここでもバナー画像の上にリンク文字を乗せています
<span class="menu2"><a href="../1/sample1.html">サンプル1.1カラムレイアウトその１</a></span>
<span class="menu2"><a href="../2/sample2.html">サンプル2.1カラムレイアウトその２</a></span>
<span class="menu2"><a href="../3/sample3.html">サンプル3.2カラムレイアウトその１</a></span>
<br class="cl" /> 改行させ、回り込みを解除しています 単に<br />とするとスタイルが崩れます
<span class="menu2"><a href="../4/sample4.html">サンプル4.2カラムレイアウトその２</a></span>
<span class="menu2"><a href="../5/sample5.html">サンプル5.右ナビゲーションその１</a></span>
<span class="menu2"><a href="sample6.html">サンプル6.右ナビゲーションその２</a></span>
<br class="cl" />
<span class="menu2"><a href="../7/sample7.html">サンプル7.3カラムレイアウトその１</a></span>
<span class="menu2"><a href="../8/sample8.html">サンプル8.3カラムレイアウトその２</a></span>
</div>
</div> フッターブロックの終了
</div>
<div class="powerd">
<address>
Copyright ©2007 あなたのホームページ名or会社名 All Rights Reserved.<br />
Powered by<span class="cont"><a href="http://www.htmlcss.biz">HTMLCSS.biz-ホームページ制作講座</a></span>
</address>著作権リンクの削除禁止
</div>
</body>
</html>
スタイルシートの説明にお進み下さい。メニューは上部にあります。