タイトルの「正しい」とは，XHTML 1.0 の規格に合っている， より具体的に言うと Markup Validation Service で合格とされるような（いわゆる）ホームページの書き方， という意味です。
私はいままでも（いわゆる）ホームページを作成してきましたが， “一応，Internet Explorer で思ったように表示されればよい” との基準で作っていました。 それを，改めよう，その練習のため， このページを正しい書き方で書いてみよう， というのが目的です。 日本語版 Windows 10 上で作ることを前提としています。
ファイルの冒頭と最後によくわからない行を書くことになりますが， それは，以前， 奥村晴彦 (Haruhiko Okumura) 氏のページから写しました。同氏に感謝します。
なお，「ホームページ」の前に「（いわゆる）」をつけているのは， 本来の「ホームページ」とは異なる， 日本での慣用となっている意味で「ホームページ」 ということばを使っているからです。
「ローマ字篇」とあるのは， ローマ字書き日本語も含むページを作ることを念頭に置いているからです。
途中からローマ字書きになりますが，そこでのつづり方は次の通りです。 服部四郎氏の新日本式ローマ字を元にしています。
â, ô, û, ñ などの文字が打てるよう， 適当な言語のキーボードを Windows にインストールしておきましょう。 スペイン語がおすすめです。
（いわゆる）ホームページとは， .html で終わる名前を持ったテキストファイルにすぎません。 ですから，Windows で言えば「メモ帳」で作成できます。
初歩のうちは，一つのフォルダにすべての .html ファイルを置くのがよいでしょう。Windows での，そのやり方を説明します。 （Windows における基本的なフォルダ・ファイル操作は既知と仮定します。）
適当なフォルダを新規に作り， それを Explorer で開きます。 右クリック→「新規作成」→「テキスト ドキュメント」 で新規のテキストファイルを作成します。 それを，「index.html」という名前に変更します。 拡張子を変更するので確認のためのメッセージが出ますが， 「はい」を押します。 最初のファイル， すなわち，見る人が最初に見ることになるページは， この名前にするのが普通です。
そのアイコンをクリック（あるいはダブルクリック）してファイルを開くと， Edge の中にそのファイルが表示されますが，いまは空（から）です。
次に，Explorer 内で index.html を選択してから右クリック→「プログラムから開く」→「メモ帳」とすると， index.html がメモ帳で開きます。そこに，いまからいろいろと書き込んでゆきます。
まず，ファイルに次をコピーして貼り付けます。
<!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" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>誰それのページ</title> </head> <body> </body> </html>
これのほとんどは必ず書くことに決まっているもの，と理解してください。 それぞれの意味は私にはわかりません。 「誰それのページ」は適宜変えてください。 ここに書いた文字列は（Internet Explorer ならば） タブのところに表示されます。
ここでこのファイルを保存しましょう。 その際，文字コードを，いま最も普通と思われる UTF-8 に変えたいので，メモ帳で 「ファイル」→「上書き保存」ではなく， 「ファイル」→「名前を付けて保存」とし， 「文字コード」を UTF-8 に変更し，「保存」を押します。 さっきまで空だった，同名のファイルがありますので， 「上書きしますか？」と出ますが，「はい」を押します。
（いわゆる）ホームページの中身は， <body> と </body> の間に書きこんでゆきます。
私は，初めの <body> の次の行に，次を書きます。
<h1>誰それのページ</h1>
すなわち， <title> と </title> の間に書いたものと同じものを書きます。
空行， すなわち何も文字が書かれていない行は， ブラウザには無視されますから， 上で「次の行」と書きましたが， 実際には空行を一つ入れるほうが見やすいと思います。 書いたのち，メモ帳で上書き保存し，Edge で再読み込み （Ctrl+R または F5）すると， 大きな文字で，いま書いたものが表示されます。
<h1> や </h1> はタグと呼ばれるもので， （いわゆる）ホームページには表示されません。 この<h1> と </h1> は， この間に書かれた文字列を最も大きな見出しとして表示せよ， という意味です。 <h2> と </h2>, <h3> と </h3>, ... と数が大きくなるにつれて，より小さな見出しとして表示されます。 （「<h1> と </h1>」の次に「<h2> と </h2>」 をとばして「<h3> と </h3>」を書いてはいけない， ということはありません。）
本文は，次のように書きます。これを， <h1> ... </h1> の次にコピー &ペーストし， 上書き保存し，Edge で再読み込みをしてみてください。 <p> と </p> で囲まれた部分が一つの段落です。 以下のサンプル自身が，書き方の説明になっていますので， それも読んでください。
<p> 段落の中で改行しても， ブラウザで見るときには改行はされません。 ですから，適宜，改行を入れましょう。 ブラウザによっては改行が欧文一文字分の空白として表示されることがありますので， 改行するのは句読点のあと，開きカッコの前，閉じカッコの後ろ， としておくのが無難です。 </p> <h2>初めに</h2> <p> 一つ小さな見出しをつけてみました。 本文の書き方は上と同じです。 </p> <p> 空行は無視されるので， .html ファイルを書くときに見やすいよう，適宜入れるとよいでしょう。 </p> <p> 本文中に「岩瀬 順一」のように空白をおくと， ブラウザ上でも空白になります。 「岩瀬 順一」のように複数の空白を置いても， 表示されるスペースは一つ分だけです。 （全角スペース「 」は全角スペースとして表示されます。） </p>
これは必須ではありませんが， 私は，次を，最後の </body>, </html> の直前に書くことにしています。 ページの終わりであることと，著者がだれであるかを示すためです。 <hr /> は仕切りのような横線を表示させるものです。 （このページ自身は少し違う書き方をしています。）
<hr /> <address> 岩瀬順一 (IWASE Zjuñici) </address>
ここまでの作業でできあがった index.html は次のようになります。
<!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" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>誰それのページ</title> </head> <body> <h1>誰それのページ</h1> <p> 段落の中で改行しても， ブラウザで見るときには改行はされません。 ですから，適宜，改行を入れましょう。 ブラウザによっては改行が欧文一文字分の空白として表示されることがありますので， 改行するのは句読点のあと，開きカッコの前，閉じカッコの後ろ， としておくのが無難です。 </p> <h2>初めに</h2> <p> 一つ小さな見出しをつけてみました。 本文の書き方は上と同じです。 </p> <p> 空行は無視されるので， .html ファイルを書くときに見やすいよう，適宜入れるとよいでしょう。 </p> <p> 本文中に「岩瀬 順一」のように空白をおくと， ブラウザ上でも空白になります。 「岩瀬 順一」のように複数の空白を置いても， 表示されるスペースは一つ分だけです。 （全角スペース「 」は全角スペースとして表示されます。） </p> <hr /> <address> 岩瀬順一 (IWASE Zjuñici) </address> </body> </html>
見出しと本文だけからなる（いわゆる）ホームページなら， ここまでの知識で書けます。
ftp ソフトを使って，できたページを与えられた場所に載せます。 ftp ソフトの使い方などはここでは省略します。
<a href="https://www.google.co.jp">Google</a> と書けば， Google となります。
同じフォルダ内のファイル a.html にリンクをはりたいなら， <a href="a.html">次のページ</a> と書けばＯＫです。
SHIFT kii o osi nagara hidari no ALT kii o osu koto de, hudañ no kii hairecu to Supeiñgo no kii hairecu to ga kôgo ni kawarimasu.
Â, â, Ô, ô, Û, û no jô na jamagata cuki no mozi o ucu ni wa, Supeiñgo ni kirikaete, SHIFT kii o osi nagara "@" kii o uci, sore kara A, a, O, o, U, u o ucimasu. ñ wa ";" kii o ucimasu. Ômozi no Ñ o ucu ni wa SHIFT si nagara ";" kii o ucimasu.
"<", ">" nado wa Supeiñgo hairecu de wa utenai jô desu no de, hudañ no kii hairecu ni kirikaete ucimasu.
Korera no mozi wa .html fairu de wa tokubecu na imi o mocimasu no de, sono mama cukau koto ga dekimaseñ.
Zjuñ ni, <, >, ", & to kaku to, burauza no naka de wa korera no kigô ga hjôzi saremasu.
<ul> <li>Daiici no kômoku ......</li> <li>Daini no kômoku ......</li> <li>Daisañ no kômoku ......</li> </ul>
Ue no jô ni kaku to, cugi no jô ni hjôzi saremasu.
Bañgô o cuketai toki wa cugi no jô ni simasu.
<ol> <li>Daiici no kômoku ......</li> <li>Daini no kômoku ......</li> <li>Daisañ no kômoku ......</li> </ol>
Cugi no jô ni hjôzi saremasu.
Kazjôgaki no ireko ga kanô desu.
<ul>
<li>cugi no jô ni narimasu.
<ol>
<li>Daiici no ...</li>
<li>Daini no ...</li>
</ol>
</li>
<li>mata, ika no jô ni ....
<ol>
<li>Sono ici ...</li>
<li>Sono ni ...</li>
<li>Sono sañ ...</li>
</ol>
</li>
</ul>
Cugi no jô ni narimasu.
Gjô no hazime ni kûhaku o oite imasu ga, kore wa mijasusa no tame de, burauza de no miekata ni wa kiite kimaseñ.
Cjûi: kazjôgaki wa, <p> ... </p> no naka ni irete wa ikemaseñ. Cugi wa macigai desu.
<p> Cugi no jô na kêsu ga kangaeraremasu. <ul> <li>kore kore sika zika</li> <li>kore kore sika zika</li> </ul> to iqta guai desu. </p>
Tadasii kakikata wa, cugi no jô na mono desu.
<p> Cugi no jô na kêsu ga kangaeraremasu. </p> <ul> <li>kore kore sika zika</li> <li>kore kore sika zika</li> </ul> <p> to iqta guai desu. </p>
<table border="1"> <tr><td>2</td><td>9</td><td>4</td></tr> <tr><td>7</td><td>5</td><td>3</td></tr> <tr><td>6</td><td>1</td><td>8</td></tr> </table>
Kore de cugi no jô ni narimasu.
| 2 | 9 | 4 |
| 7 | 5 | 3 |
| 6 | 1 | 8 |
border="1" o border="0" ni kaeru to cugi no tôri desu.
| 2 | 9 | 4 |
| 7 | 5 | 3 |
| 6 | 1 | 8 |
Hutacu izjô no masu o cunageru ni wa, cugi no jô ni simasu.
<table border="1"> <tr><td colspan="2">29</td><td>4</td></tr> <tr><td rowspan="2">7<br />6</td><td>5</td><td>3</td></tr> <tr><td>1</td><td>8</td></tr> </table>
| 29 | 4 | |
| 7 6 | 5 | 3 |
| 1 | 8 | |
<br /> wa soko de kaigjô seyo, no imi desu.
Hjô mo, <p> ... </p> no naka ni irete wa ikemaseñ.
<img src="a.jpg"> no jô ni kakeba hairimasu.
Hjô (<table> ... </table>) no naka ni <h1> ... </h1> ja <p> ... </p> ga okeru no de, cugi no jô ni site taiyaku-hû no kumikata ga dekimasu.
<table border="0"> <tr><td> <h1>大きな見出し</h1> </td><td> </td><td> <h1>Ôkina midasi</h1> </td></tr> <tr><td> <h2>中くらいの見出し</h2> </td><td></td><td> <h2>Cjûkurai no midasi</h2> </td></tr> <tr><td> <p> 本文 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . </p> </td><td></td><td> hoñbuñ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . </td></tr> <tr><td colspan="3"><hr /></td></tr> <tr><td> <h2>中くらいの見出し (2)</h2> </td><td></td><td> <h2>Cjûkurai no midasi (2) </h2> </td></tr> <tr><td> <p> 本文 (2) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . </p> </td><td></td><td> hoñbuñ (2) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . </td></tr> <tr><td colspan="3"><hr /></td></tr> </table>
大きな見出し |
Ôkina midasi | |
中くらいの見出し |
Cjûkurai no midasi | |
|
本文 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . | hoñbuñ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . | |
中くらいの見出し (2) |
Cjûkurai no midasi (2) | |
|
本文 (2) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . | hoñbuñ (2) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . | |
<table border="0"> o <table border="1"> ni kaeta mono. Tane akasi.
大きな見出し |
Ôkina midasi | |
中くらいの見出し |
Cjûkurai no midasi | |
|
本文 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . | hoñbuñ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . | |
中くらいの見出し (2) |
Cjûkurai no midasi (2) | |
|
本文 (2) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . | hoñbuñ (2) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . | |