これは、HTMLを書くための短い入門です。HTMLとは何でしょうか。それは、ウェブ・ブラウザで使用される特別なテキスト文書の一つで、テキストや画像を表示するために使われます。そのテキストは、段落の始めを示す<p>や、段落の終わりを示す</p>といったマークアップ・タグ（markup tag）を含みます。HTML文書はしばしば"ウェッブ・ページ"と呼ばれます。ブラウザは、インターネットのおかげで世界のほとんどすべてのウェッブ・サーバからウェッブ・ページを引き出します。
多くの人々は、未だにHTMLをWindowsのメモ帳や、MacのTextEditのようなツールを使って手で書いています。このガイドは、あなたにもそうする気を起こし、そうするようになるでしょう。たとえあなたがHTMLを直接編集せずに、Netscape ComposerやW3C AmayaのようなHTMLエディタを使おうとしていようとも、このガイドは、それらのツールをよりよく使うことや、あなたのHTML文書が広い範囲のブラウザでアクセス可能にする方法をあなたに理解させることが出来るでしょう。一度、HTMLを執筆することの基本に慣れてしまえば、あなたはCSSを使ってスタイルを追加する方法を学んだり、進んだHTMLについての私のページで扱われてる事柄に挑戦し続けようと思うかもしれません。
追記 上手な勉強方法は、他の人がどのようにhtmlページを書いているかを見ることです。そうするために、ブラウザの「表示」メニューをクリックして「ソース」をクリックしてみてください。替わりに「ファイル」メニューをクリックして「ソースを見る」をクリックする必要があるブラウザもあります。このページでそれをやってみて、私がどのように以下で私が説明する考えを適用しているかを見てください。多くのページはどちらかというと覆いの下は散らかり放題だと見えるようになったとき、厳しく批判できる目が自分に培われたことがわかるでしょう！
Macユーザに関しては、ファイルを".html"拡張子で保存する前に、あなたの文書がプレーンテキストの形式になっていることを確かめる必要があるでしょう。TextEditでは、「フォーマット」メニューの「プレーンテキストにする」オプションで、これにすることができます。
このページはあなたに
<title>私の最初のHTML文書</title>テキストを「私の最初のHTML文書」からあなたの必要に応じたものに変更してください。タイトルテキストは、開始タグ<title>の後に続き、対応する終了タグ</title>で終了です。タイトルはあなたの文書の最初に置かれるべきです。
これをするには、上述のものをテキストエディタにタイプして、「test.html」というような名前で保存してください、そしてウェッブ・ブラウザでファイルを見てください。 もしファイル拡張子が「.html」か「.htm」ならば、ブラウザはそれをHTML文書であると見なすでしょう。 ほとんどのブラウザはウィンドウのタイトルバーにタイトルを表示します。タイトルだけだと、ブラウザは空のページを表示するでしょう。心配はしないで下さい。 次の節では表示可能な内容をどうやって追加するかを説明します。
重要な見出しを追加する方法はこれです：
<h1> 重要な見出し </h1>そして、少しだけ重要性の低い見出しはこれです:
<h2> 少しだけ重要性の低い見出し </h2>
あなたが書く各々の段落は<p>タグで始めるべきです。</p>タグは、見出しタグの様な要素の終わりタグとは違って、あってもなくてもかまいません。
<p>これは最初の段落です。</p>
<p>これは2番目の段落です。</p>
これは本当に<em>興味深い</em>話題です！
<img src="peter.jpg" width="200" height="150">src属性は、その画像ファイルを示します。widthとheight属性は厳密に必要とういわけではありませんが、あなたのウェッブ・ブラウザの表示を速くするのに役立ちます。まだ何か欠けていますよ！画像が見られない人達は、それが表示されないときに読むことができる説明が必要です。あなたは短い説明を以下のように追加することができます:
<img src="peter.jpg" width="200" height="150" alt="私の友達 ピーター">alt属性は、短い説明、この場合は「私の友達ピーター」を与えるために使用されます。複雑な画像については、もっと長い説明を与える必要があるかもしれません。これが「peter.html」ファイルに書かれていたとして、longdesc属性を使って以下のようにそれを加えることができます：
<img src="peter.jpg" width="200" height="150"あなたは画像を多くの方法で創り出すことができます：例えば、デジタルカメラで、画像をスキャンすることで、或いはペイントソフトかドローソフトで創り出すことで。ほとんどのブラウザはGIFとJPEGの画像形式を理解することができ、より新しいブラウザはPNG画像形式も理解することができます。画像がネットワークを通じてダウンロードされる間の長時間の遅れを避けるために、大きな画像ファイルを使うのを避けるべきです。
alt="My friend Peter" longdesc="peter.html">
一般的に言って、JPEGは写真とその他のなめらかに変化する画像について最適で、一方、GIFとPNGは色の変化しない領域や直線やテキストを含むグラフィックスには向いています。これら三つすべての形式は、粗雑な版の画像が最初に送られてから漸進的に精練されていくという漸進的描出のオプションが利用可能です。
リンクは<a>タグで定義されます。あなたが編集しているHTMLファイルと同じディレクトリ（又はフォルダ）にあるファイル「peter.html」で定義されたページへのリンクを定義しましょう：
これは<a href="peter.html">ピーターのページ</a>へのリンク<a>と</a>の間のテキストは、リンクへの見出しとして使用されています。この見出しは、青の下線付きテキストになるのが普通です。
もしあなたのリンクしているファイルが親フォルダ（/ディレクトリ）に在るならば、その直前に"../"を付ける必要があります、例えば:
<a href="../mary.html">メアリーのページ</a>もしあなたのリンクしているファイルがサブデイレクトリの中に在るならば、そのサブディレクトリ名に"/"を付けたものをその（ファイル名）の前に入れる必要があります、例えば:
<a href="friends/sue.html">スーのページ</a>相対パスの使用は、必要なだけディレクトリ達の木を登ったり降りたりすることでファイルにリンクすることを可能にします、例えば:
<a href="../college/friends/john.html">ジョンのページ</a>これは、最初に親ディレクトリの中で、"college"という名前の他のディレクトリを探し、次に"friends"という名前のサブディレクトリで、"john.html"という名前のファイルを探します。
他のウェッブ・サイトのページにリンクするには、完全なウェッブ・アドレス（普通は、URLと呼ばれる）を与える必要があります、例えば:
これは、<a href="http://www.w3.org/">W3C</a>へのリンクです。画像をハイパーテキストへのリンクに変えることもできます、例えば、以下は会社のホーム・ページにたどり着くために、その会社のロゴをクリックすればよいようにしてくれる:
<a href="/"> <img src="logo.gif" alt="ホームページ"> </a>これでは"/"を、ディレクトリ木のルート、つまりホーム・ページを参照するために使っています。
<ul>
<li>最初のリスト項目</li>
<li>2番目ののリスト項目</li>
<li>3番目ののリスト項目</li>
</ul>
常に</ul>終了タグでリストを終わる必要がありますが、</li>は無くてもよくて、省略可能であることに気をつけてください。
二つ目の種類のリストは、番号付きリストで、しばしば
順序付けられたリスト(ordered list)と呼ばれる。<ol>と<li>タグを使用します、例えば:
<ol>
<li>最初のリスト項目</li>
<li>2番目ののリスト項目</li>
<li>3番目ののリスト項目</li>
</ol>
丸付きリストと同様で、常に</ol>終了タグでリストを終わる必要がありますが、</li>は無くてもよく、省略可能です。
三番目の、そして最後のリストは、定義リスト(definition list)です。このリストで語句とその定義をリストにすることができます。 この種類のリストは<dl>タグで始まり</dl>で終わります。 各々の語句は<dt>タグで始まり、各々の定義は<dd>で始まります。 例えば:
<dl>
<dt>最初の語句</dt>
<dd>その定義</dd>
<dt>2番目の語句</dt>
<dd>その定義</dd>
<dt>3番目の語句</dt>
<dd>その定義</dd>
</dl>
終了タグ</dt>と</dd>は無くてもよく、省略可能です。
一つリストはもう一つリストの中に入れ子にすることができることに注意して下さい。
例えば:
<ol>
<li>最初のリスト項目</li>
<li>
2番目のリスト項目
<ul>
<li>最初の入れ子の項目</li>
<li>2番目の入れ子の項目</li>
</ul>
</li>
<li>3番目のリスト項目</li>
</ol>
もっと長いリスト項目のために、段落や見出し等を活用することもできます。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=Shift_JIS">
<title> あなたの文書のタイトルで置き換えなさい </title>
</head>
<body>
あなたの文書の内容で置き換えなさい
</body>
</html>
以下は省略