HTMLソースを説明します。HTMLソースsample2.htmlの注意事項を赤い字で記しています。付属のhtmlを使用して下さい。
<?xml version="1.0" encoding="Shift_JIS"?>
<!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" xml:lang="ja" lang="ja">
上記の部分は如何なる場合も変更しないでください
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
必須
<meta http-equiv="Content-Style-Type" content="text/css" /> 必須
<meta http-equiv="imagetoolbar" content="no" />
写真からこれを表示させない
<link rev="made" href="mailto:xxx@xxx.com" /> あなたのメールアドレスを
<meta name="description" content="初心者がHTMLとスタイルシートを使いこなせるようになる事を目指すホームページ作成講座" />ここにホームページの紹介文を短めに
<meta name="keywords" content="ホームページ,制作,講座,ネット,初心者,HTML,スタイルシート,css,テンプレート" /> キーワードを２０個ほど
<title>HTMLCSS.biz-ホームページ制作講座</title> SEO的に最重要、最重要キーワードを記述
<link rel="start" href="sample2.html" />
<link href="style2.css" rel="stylesheet" type="text/css" /> スタイルシート名を指定
</head>
<body>
<div id="container"> コンテナーブロックの開始
<div id="banner"> バナーブロックの開始
<h1>初心者がHTMLとスタイルシートを使いこなせるようになる事を目指すホームページ作成講座</h1> SEO上重要な<h1>タグです キーワードを含めて強調したい簡潔な文章とします
</div> バナーブロックの終了
<div id="contents"> コンテンツブロックの開始
<div class="contents-inner">
<div class="contents-top">
<img src="main.jpg" width="700" height="250" alt="main" /> 先程加工した画像をここで指定
</div>
<h2>はじめに</h2>
<p>「HTMLCSS.biz-ホームページ制作講座」はHTMLとスタイルシート(CSS)が始めての人が、本格的な商用ホームページやアフィリエイトサイトを作成出来るようになる事を目的としています。<br />が無いと改行しません
本格的なホームページとは、見た目が格好良く、HTML文法がパーフェクトで、SEO対策もパーフェクトであることにより、実践により、集客、稼げるホームページということです。<br />
（重要）改行タグは<br>ではなく、<br />です
「HTMLCSS.biz-ホームページ制作講座」の特徴は単なるタグや属性のリファレンスではなく、実際にホームページを作成するためのチュートリアルです。従いまして、学術的にHTML、CSSを学ぶ方向けではありません。<br />
準備するものはWindows付属のメモ帳ですが、<a href="http://hide.maruo.co.jp/">秀丸エディタ</a>等があるほうが尚良いです。他にダウンロードするソフトがありますが、次章でダウンロード先を後章で利用方法について説明します。<br />
「HTMLCSS.biz-ホームページ制作講座」ではXHTML1.0準拠にて説明を心がけています。HTMLでは大文字、小文字共に使えますが、XHTMLでは小文字のみのため、当マニュアル内では全て小文字表記となります。<br />
動作環境はInternetExplorer6.0です。</p>
<div class="contents-vline"><hr /></div> 横のライン
<h2>当教材の構成について</h2>
<p>このマニュアル<br />
HTMLファイル、sample1.html〜sample8.html<br />
スタイルシート、style1.css〜style8.css</p>
<div class="contents-vline"><hr /></div> 横のライン
<h2>HTMLについて</h2>
<p>HTMLとは<a href="http://ja.wikipedia.org/wiki/HyperText_Markup_Language">
HyperText Markup Language</a>の略です。文書の論理的な構造を示す言語です。<br />
HTMLは<a href="http://www.w3.org/">W3C（World Wide Web Consortium）</a>という非営利団体により規格が定められています。<br />
XHTMLとは<a href="http://ja.wikipedia.org/wiki/Extensible_HyperText_Markup_Language">
Extensible HyperText Markup Language</a>の略で、XMLの文法で再定義されたコンピュータ言語です。W3Cにより規格が定められています。</p>
<div class="contents-vline"><hr /></div> 横のライン
<h2>スタイルシート(CSS)について</h2>
<p>CSSは<a href="http://ja.wikipedia.org/wiki/Cascading_Style_Sheets">Cascading Style Sheets</a>の略です。HTMLやXHTMLで見栄えを定義する仕様です。<br />
CSSはW3Cにより規格が定められています。
</p>
<br />
</div>
</div> コンテンツブロックの終了
<div id="footer"> フッターブロックの開始
<ul> リスト１段目
<li><a href="../1/sample1.html">サンプル１−１カラムレイアウトその１</a></li> samplex.htmlは適切なhtml名に置きかえてください
<li><a href="sample2.html">サンプル２−１カラムレイアウトその２</a></li>
<li><a href="../3/sample3.html">サンプル３−２カラムレイアウトその１</a></li>
</ul>
<br class="cl" /> 回り込みの解除
<ul> リスト２段目
<li><a href="../4/sample4.html">サンプル４−２カラムレイアウトその２</a></li>
<li><a href="../5/sample5.html">サンプル５−右ナビゲーションその１</a></li>
<li><a href="../6/sample6.html">サンプル６−右ナビゲーションその２</a></li>
</ul>
<br class="cl" /> 回り込みの解除
<ul> リスト３段目
<li><a href="../7/sample7.html">サンプル７−３カラムレイアウトその１</a></li>
<li><a href="../8/sample8.html">サンプル８−３カラムレイアウトその２</a></li>
</ul>
</div> フッターブロックの終了
</div> コンテナーブロックの終了
<address>
Copyright ©2007-2008 あなたのホームページ名or会社名 All Rights Reserved.<br />
Powered by<span class="cont"><a href="http://www.htmlcss.biz">HTMLCSS.biz-ホームページ制作講座</a></span>著作権表示リンクの削除禁止
</address>
アクセス解析のプログラムを入れる場合はここに
</body>
</html>
スタイルシートの説明にお進み下さい。メニューは上部にあります。