HTML－リンクの張り方を理解するためのページ（タグ利用編）－

最初のページ

このページは【タグを用いた『別ページへのリンクを張る方法』】を理解してもらうことを目的として作成しました。
このページを『最初のページ』とします。
次のページへのリンクを辿れば、当然『次のページ』へ行くことができます。

次のページへ

<<解説>>
上の『次のページへ』という部分をクリックすると次のページが表示されます。

ここには『<a href="tugi_page.htm">次のページへ</a>』と書いてあります。
ＨＴＭＬのソースを確認して下さい。
ソースを表示するにはメニューバーから『表示（V）』・『ソース（c）』と選択すればできます。

<a href=

アンカータグの開始

"tugi_page.htm">

飛び先のファイル名
またはＵＲＬ

次のページへ

飛び先のファイル
についての簡単な説明を記述

画面上に表示され
るもの

</a>

アンカータグの終了

この例ではリンクの飛び先はtugi_page.htmであり、分かりやすいように次のページへという説明を表示するようにしています。

『次のページへ』という部分の前後にはスペースをあける必要はありません（Webページの特性上ここではスペースがあいてしまいました。勿論、スペースを入れても構いませんが、当然画面上にはスペースが表示されます）。

<<参考>><a href="">

Anchor Hyper Referenceのことで、省略した形、つまり<a href="">というように記述します。

ハイパーリンクを設定する（俗に『リンクを張る』といいます）ときに使うタグです。
</a>と対にして使用します。

＊＊　動作確認をするための課題　＊＊　この課題を提出する必要はありません

１．

最初のページ（first_page.htm）と次のページ（tugi_page.htm）のソースを確認して、何となくの感覚をつかむ。
ブラウザを用いて動作確認もする。

２．

動作確認が済んだら、自分でfirst_page.htmとtugi_page.htmを書いてみよう。
次の２つのファイルを別々に書き、該当のファイル名で保存する（コピー・アンド・ペーストして作業を短縮しても構わない）。

<<first_page.htmの内容>>

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
ここは最初のページです。<br>
<a href="tugi_page.htm">次のページへ</a>
</body>
</html>

<<tugi_page.htmの内容>>

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
ここは次のページです。<br>
<a href="first_page.htm">最初のページへ</a>
</body>
</html>

両方のＨＴＭＬファイルが保存できたら、ブラウザを用いて動作確認もする。

３．

『tugi_page.htm』のファイル名を『next_page.htm』に変更してみる。
ブラウザから動作確認（『更新』ボタンを押すこと）をして、上手く動かなくなったことを確認する。

４．

『メモ帳』などのエディタを使って、『first_page.htm』のソースを次のように変更する。

『<a href="tugi_page.htm">次のページへ</a>』の"tugi_page.htm"という部分を"next_page.htm"に変更

上書き保存後、ブラウザを用いて動作確認をする。
タグを用いてリンクを張る方法について理解している生徒は、分からなくて『困っている友達』に教えてあげて下さい。

課題16のページへ課題36のページへ課題40のページへ最初のページへ