<a href="index.htm">index.htmへのリンク</a>
<a href="http://choppo.s20.xrea.com/">チョッポルンガデジタルトレイン</a>
a要素はインライン要素で、href属性でリンク先を指定します。 InternetExplorerなどのWebブラウザでは、aタグ内の文字列が表示され、 そこをクリックすることにより、リンク先へ飛べます。
リンクを作ったり、画像を配置するときは、パスを指定しなければいけません。
パスは、ファイルの場所を示します。
上の例では、index.htmとhttp://choppo.s20.xrea.com/がパスにあたります。
上の例のhttp://choppo.s20.xrea.com/は、ページのURLを示しています。
これは、リンク元のページに関係なく、リンク先を指定できます。
この記述方法を絶対パスといいます。
実際の住所に例えると、"東京都港区"というのが絶対パスです。
東京都新宿区に住んでる人でも、大阪に住んでる人でも"東京都の港区だ！"とすぐにわかります。
ただ"港区"と書いたらどうなるでょう？
おそらく、東京の人は、"東京都港区"、大阪府大阪市の人は"大阪府大阪市港区"だと思うでしょう。
このように、リンク元によって、
リンク先が変わるパスの記述方法を相対パスと呼びます。
上の例では、index.htmが相対パスです。
相対パスについて、具体的に説明します。 例えば、図のようなディレクトリ構成があるとします。
フォルダ1の中に、1-1.htm、1-2.htmという2つのファイルがあったとき、
1-1.htmに、1-2.htmへのリンクを相対パスで書く場合は、
ファイルの場所が同じなので、そのまま、1-2.htmと書くことができます。
1-2.htmに1-1.htmへのリンクを作る場合も同じように書けます。
フォルダ2の中にある、2.jpgという画像ファイルを1-1.htmに表示させたいときはどうでしょう。
2.jpgは、フォルダ2の中にあるため、1-1.htmと2.jpgはファイルの場所が違います。
この場合、2/2.jpgと書きます。
これは、"フォルダ2の中の2.jpgというファイル"を表しています。
同様に、フォルダ3の中にある、
3.htmへのリンクを1-1.htmに作りたいときは、2/3/3.htmと書きます。
これは、"フォルダ2の中にあるフォルダ3の中の3.htmというファイル"を表しています。
さらに、フォルダ3の中にある3.htmで、
フォルダ2の中にある2.jpgを使いたい場合は、../2.jpと書きます。
これは、"1つ外（上）のフォルダの中の2.jpgというファイル"を指します。
同じように、フォルダ3の中の3.htmに、フォルダ1の1-2.htmへのリンクを作る場合は、
../1-2.htmと記述します。
パスは、そのファイルの保存されている場所とファイル名（拡張子も必要）で構成されます。
しかし、例外があります。
http://choppo.s20.xrea.com/のような場合です。
これは、ファイルの場所のみでファイル名がありません。 しかし、ちゃんとパスとして成立します。 それは、住所だけ指定された場合に読み込むファイルが決まっているからです。 多くのページは、住所だけの場合、 index.htmやindex.htmlを読み込むように設定されています。 一番最初に見て欲しいページをindex.html（又は.htm）にしておくと良いと思います。
ファイル名だけのパス指定では、ファイルの先頭へしかリンクを貼ることができません。
同じページ内でのリンクや、違うページの特定の位置へのリンクを作りたい場合は
id="名前"でその場所に固有の名前を付けます。
例えば、
<div id="welcome" class="section">
<h1 class="h">ようこそ、チョッポルンガデジタルトレインへ！</h1>
<p>当サイトは、Web作成の解説と鉄道写真を公開しています。</p>
</div>
と書いたところへのリンクを作るときは、
href="#名前"と記述を使って記述します。
<a href="#welcome">ようこそ、チョッポルンガデジタルトレインへ！</a>
他のページの決まった場所へのリンクは、
href="パス#名前"と書きます。
id属性は、その要素を識別するための名前で、CSSを記述する際にも有効です。 意味のあるわかりやすい名前を付けておきましょう。
上記の例のような場合、div要素ではなくh1要素にid属性を指定して、 その見出しへのリンクを記述しているようなケースをよく見かけます。 しかし、そのリンクをたどって得たい情報は、見出しそのものではなく、 見出しを含めた本文のはずです。
例えば、辞書のようなページを作った場合、 単語のリンクをたどった人が得たい情報は、単語そのものではなく、 単語の意味や説明であるはずです。 単語と意味、説明を含めたdiv要素に対して、id属性を指定して、 そこへのリンクを貼るのがベストだと思います。