<<MENU>>

ファイルに保存

ファイルを開く

文字・大きさ・色

背景色の変更
背景に画像設定

画像の貼り付け

音の貼り付け

表の貼り付け

水平線・色・太さ

記号や番号など

スクロール文字

別ページにリンク

同ページ内リンク

動画の貼り付け

アップロード

HTMLタグ関係

FAQのページへ

Frontpageメニュー

講座トップへ

HTML-リンクの張り方を理解するためのページ(タグ利用編)-


最初のページ

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



次のページへ

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

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

<a href=

アンカータグの開始





"tugi_page.htm">

飛び先のファイル名
またはURL




次のページへ

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

画面上に表示され
るもの
</a>

アンカータグの終了





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

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

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

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


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

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

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

<<first_page.htmの内容>>

<html>
<head></head>
<body>
ここは最初のページです。<br>
<a href="tugi_page.htm">次のページへ</a>
</body>
</html>

<<tugi_page.htmの内容>>

<html>
<head></head>
<body>
ここは次のページです。<br>
<a href="first_page.htm">最初のページへ</a>
</body>
</html>

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

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

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

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

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


解説ページへ戻る