まず、『DeMo.html 基本』がどんな塊をどのように並べて構成されているのか見えるようにしてみます。
このページで部分的に出すために多少レイアウトやソースを変えていますが、基本的なところは変えていません。その中で、背景色が薄い青に変わっているところがありますね？これが記述された各タグで構成された部分（ブロック要素）です。ここではこの部分を『コンテンツ』と呼んでいきます。
あ。
水平線だけは背景色が変わりませんが、これは<hr />で記述した部分です。
ようこそ！
ここは最も基本的なHTMLを用いたレイアウトのデモページです。
特に難しいことはしていませんが、これの応用で他の全てのレイアウトも構築されるんですよ。
構造さえ理解しちゃえばHTMLは単純なものですので、肩肘張らずにいきましょー。
DeMo.htmlにお越しいただきありがとうございます。
ここは……………………………で、
@+*=&'$&)[]「＠：；な〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜というサイトです。
そうそう。
このデモページに書いてあるProfileや今日の日記はフィクションです。
デモページ用に適当に書いている文章ですので、誤解なきようお願いします。
生息地：北緯33度 東経66度
好きなアルコール度数：22度
平熱：36.9度
うっとりしちゃう角度：斜め45度
チャームポイント：喉
好きな食べ物：アボカド
持っている資格：上級シスアド
口癖：まいど
11月11日（日） 晴れ
のべつまくなし、やることもなし。
空に浮かぶ雲を眺め、ぼんやりと過ぎる時間を楽しむ。
そんな一日を予定していたが、近所に住む姪っ子が遊びに来たためにあえなく断念。どうやら以前、弟の家で飲んでいたときに約束した（らしい）遊園地へ連れていけとせがまれ、仕方なく連れて行くことになってしまった。
弟は弟で、これ幸いとばかりに私に姪っ子を押し付け、のんびりしていると言う。
そういえばあの時、酒の席で弟が姪っ子が遊園地に行きたがっているという話を私に振った気がする。確か、その流れで私が連れて行こうと約束したのではなかったか……。
おのれ弟ぉぉ
この借りはいずれ返してやるぞ。
たーのーしーみ〜ぃに、しておげぇぇぇい。
それではソースと合わせていきましょう。まずはページ内に表示はされないけど重要な部分です。一気にいきますよ。
なお、この色の文字は要素の簡単な説明です。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">『DTD宣言』です
<html>『HTMLの記述を開始』です
<head>『ヘッダ』の開始
<title>DeMo.html 基本</title>『ページタイトル（ブラウザ左上）』です
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
『文字コードの指定』です
</head>『ヘッダ』の終了
ここまででページの基本的な情報を作成しています。
DTD宣言はこのページがHTMLのどの定義で作られているかを宣言するものです（→その項目へ）。
ここでは<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">を使っていますが、これは各定義の中で最も規則が緩いものです。
これを書かなくてもページは表示されるので、どの定義を使えばいいのか不安な場合は、無記入でも構わないと思います。
HTMLの記述を開始することをブラウザに知らせるために<html>を書きます。これは一番上と下に必ず記述するタグですので、同時に終了タグも書いておくと記述のし忘れがなくてお勧めですよ。
ヘッダは<head></head>で作られます。ここにブラウザに表示するタイトルを<title></title>内に書き（このページは『八百万楽遊庵』になっています）、文字化けを防ぐために文字コードの指定を<meta>タグ内に書きます。
文字コードの指定はShift_JISにしています。他にEUCなどがあるのですが、大抵はこれで大丈夫ですのでこのまま書いちゃってください。
それではページ内の構造に入っていきましょう。
<body topmargin="50" rightmargin="100" bottommargin="50" leftmargin="100" bgcolor="#fafae8">
『ページのボディの作成』を開始
ここでページのボディ（ブラウザに表示される部分）の開始を宣言します。<html>タグと同様にページの最後の方で閉じるタグですので、これも先に</html>の前にでも書いておくといいですよ。
さて、ここではページの余白と背景色を決めています。top／right／bottom／leftmarginのそれぞれで上右下左（この順番で覚えるとCSS使用時に便利です）の余白を設定しています。
bgcolorは背景色です。ここではカラーコードで指定していますが、redやblueといった特定の色名でも指定可能です。
<h1 align="right">DeMo.html</h1>見出し
見出しの<h1>を使用して、Webページのタイトルを書いています。<hα>（αは1〜6）は見出しのタグで、1が最も大きく、6が最も小さい文字サイズで表示されます。1に近ければ近いほど大きい見出しということですね。
そして、align="right"でこの見出しを右揃えにして、文字がページの右側にくるようにしています。
<hr />水平線
<hr />で水平線を出し、ページタイトルと以下のコンテンツを区切っています。
<p align="center">段落の開始
文字の設定→<font size="6" color="#008aff">ようこそ！</font>←文字の設定終了<br />改行タグ
ここは最も基本的なHTMLを用いたレイアウトのデモページです。<br />
特に難しいことはしていませんが、これの応用で他の全てのレイアウトも構築されるんですよ。<br />
構造さえ理解しちゃえばHTMLは単純なものですので、肩肘張らずにいきましょー。
</p>段落の終了
<p>タグで段落を作ります。この中に書かれた文章は一つの段落として扱われて、次の<p>の間には改行が入り区別されます。ここではalign="center"を使って、文字を中央に揃えています。
文字は標準では、大きさはブラウザの指定フォントサイズ、色は黒になっています。それを変更したい時は<font>タグを用いて変更します。size="6"（標準は3）で文字を大きくし、color="値"（値には色名やカラーコード）で色を指定の色にしています。このように、文章内の指定範囲がインライン要素となります。
文章を改行したいので、改行タグの<br />を記述します。
書くだけ書いたら、最後に</p>で段落を終了します。
この<p>は終了タグの</p>を省略しても読み込まれはするのですが、やはりちゃんと終了していきましょう。
次に、各コンテンツへのリンクを書いていきます。
<p align="center">
リンクの設定→<a href="#aisatu">ご挨拶</a>←リンクの設定終了 <a href="#prof">Profile</a> <a href="#today">今日の日記</a>
</p>
段落と中央揃えに関しては一つ上のものと同じです。
選択すればページのコンテンツを頭出しできるリンクを設定しましょう。これは上下に長いページで使うととても有効なものです。
<a>と</a>に挟まれた文字や画像をリンクとして設定することができます。
リンク先はhref="URLや指定場所"で設定します。
ここでは他のページへのリンクではなく、ページ内の指定場所へのリンクを行いますので、href="#キーワード"と、#（半角シャープ）の後に半角英数でキーワードをつけてリンク先を指定します。
あ、各リンクの間の隙間は全角スペース2つで間をとっています。
ではこれを踏まえて各コンテンツを作っていきましょう。
<h2 name="aisatu" id="aisatu">見出しとキーワードの設定<font color="maroon">ご挨拶</font></h2>見出しとキーワードの設定終了
<p>
DeMo.htmlにお越しいただきありがとうございます。<br />
ここは……………………………で、<br />
@+*=&'$&)[]「＠：；な〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜というサイトです。<br /><br />
改行二回でスペース空け
そうそう。<br />
このデモページに書いてあるProfileや今日の日記はフィクションです。<br />
<em>強調開始デモページ用に適当に書いている文章</em>強調終了ですので、誤解なきようお願いします。
</p>
<h2>タグで見出しを作成し、リンクのためのキーワード設定をしています。ここでは<h2>タグの中にある、name="aisatu" id="aisatu"がこのキーワードを設定する属性です。上のリンク設定でhref="#aisatu"と指定したリンクの対象がここになります。（このリンクについての詳細はこちら）
見出しは色を変えていますが、これは先に出た<font>タグで指定しています。また、この<h2>と下の<p>で作成した段落にはalignで文章の位置を指定していません。この場合、標準の左揃えとなります。
改行二回でスペース空けは、改行の<br />を二回繰り返すことで一行分のスペースを空けています。（この場合別途<p>タグで上下それぞれを囲むのが正しいのかもしれませんが）。
文章の中で強調したい所が出てきたら、大抵は「太字の斜体」・「太字」・「文字サイズの巨大化」などで強調しています。ここでは挟み込んだ文章を太字の斜体にする『強調』タグの<em>を使っています。
<br /><br />改行二回でスペース空け
<h2 name="prof" id="prof"><font color="maroon">Profile</font></h2>
<p align="center">
太字の開始→<b>生息地：北緯33度 東経66度<br /><br />
好きなアルコール度数：22度<br /><br />
平熱：36.9度<br /><br />
うっとりしちゃう角度：斜め45度<br /><br />
チャームポイント：喉<br /><br />
好きな食べ物：アボカド<br /><br />
持っている資格：上級シスアド<br /><br />
口癖：まいど</b>←太字の終了
</p>
さて、一番はじめの改行二回でスペース空けですが、これは本来正しい使い方ではないようです。しかし、HTMLのみで独立したタグ同士の間を調節するのは他にないため、これでスペースを空けてコンテンツを離して見やすいように調節しています。なお、改行一回ではほとんど間は開きません。
タグ同士の間を調節するにはCSSでの指定があります。詳しくはCSSでのレイアウト（解説は工事中）をご参照下さい。
このコンテンツの文字は太字にすることで、他のコンテンツの文章との差別化をしています。『太字』タグの<b></b>で挟み込まれた文章が太字になります。
<br /><br />
<h2 name="today" id="today"><font color="maroon">今日の日記</font></h2>
<p>
<b>11月11日（日） 晴れ</b><br /><br />
のべつまくなし、やることもなし。<br />
空に浮かぶ雲を眺め、ぼんやりと過ぎる時間を楽しむ。<br />
そんな一日を予定していたが、近所に住む姪っ子が遊びに来たためにあえなく断念。どうやら以前、弟の家で飲んでいたときに約束した（らしい）遊園地へ連れていけとせがまれ、仕方なく連れて行くことになってしまった。<br />
弟は弟で、これ幸いとばかりに私に姪っ子を押し付け、のんびりしていると言う。<br />
そういえばあの時、酒の席で弟が姪っ子が遊園地に行きたがっているという話を私に振った気がする。確か、その流れで私が連れて行こうと約束したのではなかったか……。<br /><br />
<font color="red" size="5"><em>おのれ弟ぉぉ</em></font><br /><br />
この借りはいずれ返してやるぞ。<br />
たーのーしーみ〜ぃに、しておげぇぇぇい。
</p>
</body>ページのボディの終了
</html>HTMLの記述の終了
あとはここまで使ってきた記述の連続です。
最後にページのボディの終了とHTMLの記述の終了を忘れずに行いましょう。先に書いたとおり、前もって書いておくと書き忘れの心配はありませんよ。
これでWebページが一つできあがりました。