Webページから別のWebページへ移動するために使われるのがリンクです。他のWebページへのリンクを設定するにはa要素を使います。a要素の書式は次の通りです。
<a href="リンク先を表すURI">テキスト</a>
<a href="http://www.geocities.jp/pasoboranet/index.html">パソボラホームページ</a>へのリンク
同じ階層にあるファイルへのリンクは次のように記述します。
<a href="ファイル名">テキスト</a>
下記をファイル名「odekake_index.html」として「text」フォルダーに保存します。
<h1>お出かけ日記</h1>
<p>
外出した時の記録を残して行きます。
</p>
<p>
<a href="zoo.html">2008年12月 動物園</a>
</p>
下の階層のファイルへのリンクは次のように記述します。
<a href="ディレクトリ名/ファイル名">テキスト</a>
ここでは「text」フォルダーに「diary」というフォルダーを用意し、その中に「park.html」というファイルを作成して。「odekake_index.html」から「park.html」へのリンクを設定しました。
park.html
<h1>公園にて</h1>
<p>
コスモスの季節、公園に行って見物してきました。
</p>
<h2>コスモス</h2>
<p>
ここの公園のコスモスは自然な感じが咲いています。あまり
手入れがされておらず高さもばらばらです。
</p>
<h2>ドングリ</h2>
<p>
ドングリも結構落ちていました。冬が近いようです。
</p>
odekake_index.html
<h1>お出かけ日記</h1>
<p>
外出した時の記録を残して行きます。
</p>
<p>
<a href="zoo.html">2008年12月 動物園</a>
</p>
<p>
<a href="diary/park.html">2008年10月 公園</a>
</p>
上の階層のファイルへのリンクは次のように記述します。
<a href="../ファイル名">テキスト</a>
1つ上の階層は「..」で表します。2つ以上の上の階層も同じように「../../ファイル名」など「..」を階層の分だけ「/」でつなげて記述します。
前項とは逆に「park.html」から「odekake_index.html」へのリンクを設定します。
<h1>公園にて</h1>
<p>
コスモスの季節、公園に行って見物してきました。
</p>
<h2>コスモス</h2>
<p>
ここの公園のコスモスは自然な感じが咲いています。あまり
手入れがされておらず高さもばらばらです。
</p>
<h2>ドングリ</h2>
<p>
ドングリも結構落ちていました。冬が近いようです。
</p>
<p>
<a href="../odekake_index.html">目次へ戻る</a>
</p>
他のサイトにあるWebページへのリンクは次のように記述します。
<a href="リンク先WebページのURI">テキスト</a>
リンク先へ移動した後に元にページに戻るためにはリンク先のWebページに記述してもらう必要がありますが自由にはなりません。 aタグ内に「 target="_blank"」を挿入すると、リンク先のページを新しいウインドウで開くことができます。
<a href="リンク先WebページのURI" target="_blank">テキスト</a>
<h1>初詣ベスト3</h1> <p> 初詣の参拝者数が多いところをご紹介します。 </p> <p> 1.<a href="http://www.meijijingu.or.jp/" target="_blank">明治神宮</a> </p> <p> 2.<a href="http://www.naritasan.or.jp/" target="_blank">成田山新勝寺</a> </p> <p> 3.<a href="http://www.kawasakidaishi.com/" target="_blank">川崎大師</a> </p>
特定の場所へリンクを設定するには、リンク先となる場所に目印を付けておきその場所にリンクを設定します。
リンク先の要素にID属性を使ってリンク先となる場所の目印を付けます。例えばh2要素に次のようにid属性を付けます。
<h2 id="名前">テキスト</h2>
リンク元では目印に対して次のようにhref属性の値を設定します。
<a href="リンク先を表すURI#名前">テキスト</a>
リンク先ページ：ファイル名「it.html」
<h1 id="top">語句説明</h1>
<p>
IT用語に関する語句説明を行います。
</p>
<h2 id="homepag">ホームページとは</h2>
<p>
インターネットを使うと多くの企業や個人が情報を公開しています。利用者
はブラウザと呼ばれるソフトウェアを使い企業や個人が公開している情報を
閲覧できるのですが、公開している文書の1ページ1ページをWebページと呼
びます。
</p>
<h2 id="browser">Webブラウザとは</h2>
<p>
インターネット上で公開されているWebページなどの様々な情報を見るため
に使用するソフトウェアがWebブラウザです。単にブラウザと呼ばれること
も多いです。
</p>
<h2 id="html">HTMLとは</h2>
<p>
HTMLはHyperText Markup Languageの略で、Webページを作成する時に使用
される言語の一つです。HTMLを使用して文書を作成することで、文書の構
造を明確にしたり文書の中に画像や動画などを配置することができます。
</p>
<h2>ブログとは</h2>
<p>
時事のニュースに対して自分の意見などをWebサイトで公開されたものを、
Webサイトに記録するという意味でWeb＋Log＝Weblog(ウェブログ)と呼ばれ
るようになりました。そしてウェブログが略されたブログが一般的に使わ
れるようになっています。
</p>
<p>
<a href="#top">ページトップへ</a>
</p>
リンク元ページ：ファイル名「it_index.html」
<h1>IT用語辞典</h1>
<p>
IT用語辞典の目次です。
</p>
<p>
<a href="it.html#homepage">ホームページとは</a>
</p>
<p>
<a href="it.html#browser">Webブラウザとは</a>
</p>
<p>
<a href="it.html#html">HTMLとは</a>
<p>
これまでに作成したページへのリンク集のページを作成し、「講習会」フォルダーの直下にファイル名「index.html」 として保存します。
<h1>ホームページ講習会</h1>
<h2>文章の作成</h2>
<p><a href="text/b_1.html">段落と改行</a></p>
<p><a href="text/kuuhaku.html">空白や改行をそのまま表示</a></p>
<p><a href="text/inyo.html">他の文章を引用</a></p>
<p><a href="text/kyouchou.html">強調表示</a></p>
<p><a href="text/jouge.html">上付文字と下付文字</a></p>
<p><a href="text/rakugou.html">略語の表示</a></p>
<p><a href="text/tuika.html">追加と削除の修正履歴</a></p>
<h2>リンクの設定</h2>
<p><a href="text/lodekake_index.html">お出かけ日記</a></p>
<p><a href="text/zoo.html ">動物園にて</a></p>
<p><a href="text/diary/park.html">公園にて</a></p>
<p><a href="text/hatumoude.html ">初詣</a></p>
<p><a href="text/it_index.html ">IT用語辞典</a></p>
<p><a href="text/it.html ">IT語句説明</a></p>