基礎と応用のホームページ講座（４０）

学校たよりの相互リンク(ソース画面の活用)

「ソース画面で相互リンク(１)」画面

写真（１）

写真（１）は、「ソース画面で相互リンク(１)」画面です。 (１)マイコンの「tayori」フォルダ内の「tayori03」ページをクリック(またはダブルクリック)

「ソース画面で相互リンク(２)」画面

写真（２）

写真（２）は、「ソース画面で相互リンク(２)」画面です。 (１)「tayori03」ページを表示

「ソース画面で相互リンク(３)」画面

写真（３）

写真（３）は、「ソース画面で相互リンク(３)」画面です。 (１)アドレス(D：\yamatesho\tayori\tayori03.htm)を確認する (２)「D」ドライブの「yamatesho」フォルダ内の「tayori」フォルダ内の「tayori03」ページを表示という意味 (３)「表示」→「ソース」

「ソース画面で相互リンク(４)」画面

写真（４）

写真（４）は、「ソース画面で相互リンク(４)」画面です。 (１)�@「tayori03-メモ帳」とは、tayori03ページの設計図という意味 (２)�A「IBM HomePage Builder V3.0 for Windows」とは、ウインドウズ版ビルダー３という意味 (３)�B「home01ah.gif」(homeボタン)をクリックすると、�C「tayori_ndx」(小目次)にリンクするという意味 (４)�D「back01ah.gif」(backボタン)をクリックすると、�E「tayori02」ページにリンクするという意味 (５)ソース画面の現在地である「tayori03」が重要な意味をもっています。 (６)「ソース画面」を「閉じる」

「ソース画面で相互リンク(５)」画面

写真（５）

写真（５）は、「ソース画面で相互リンク(５)」画面です。 (１)tayori03ページのブラウザ画面の「back」ボタンをクリック (２)tayori02ページが表示されました。 (３)tayori02ページの「表示」→「ソース」

「ソース画面で相互リンク(６)」画面

tayori02-メモ帳 <P> <A href="tayori_ndx.htm"><IMG src="home01ah.gif"></A> �@<A href="tayori01.htm"><IMG src="back01ah.gif"></A> </P>

写真（６）

写真（６）は、「ソース画面で相互リンク(６)」画面です。 (１)写真（６）は、写真（５）のソース画面です。 (２)tayori03ページもあるtayori02ページです。進むボタンが必要です。

「ソース画面で相互リンク(７)」画面

tayori02-メモ帳 <P> <A href="tayori_ndx.htm"><IMG src="home01ah.gif"></A> �@<A href="tayori01.htm"><IMG src="back01ah.gif"></A> �A<A href="�Atayori01.htm"><IMG src="�@back01ah.gif"></A> </P>

写真（７）

写真（７）は、「ソース画面で相互リンク(７)」画面です。 (１)�@以下をドラッグして、右クリック→「コピー」 (２)�@以下を�Aの場所で、右クリック→貼り付け」

「ソース画面で相互リンク(８)」画面

tayori02-メモ帳 <P> <A href="tayori_ndx.htm"><IMG src="home01ah.gif"></A> �@<A href="tayori01.htm"><IMG src="back01ah.gif"></A> �A<A href="�Ctayori03.htm"><IMG src="�Bnext01ah.gif"></A> </P>

写真（８）

写真（８）は、「ソース画面で相互リンク(８)」画面です。 (１)写真（７）の�@back01ah.gifを�Bnext01ah.gifに変更(backをnextに変更するだけ) (２)写真（７）の�Atayori01.htmを�Ctayori03.htmに変更(01を03に変更するだけ)

「ソース画面で相互リンク(９)」画面

写真（９）

写真（９）は、「ソース画面で相互リンク(９)」画面です。 (１)「ファイル」→「上書き保存」→メモ帳を「閉じる」

「ソース画面で相互リンク(１０)」画面

写真（１０）

写真（１０）は、「ソース画面で相互リンク(１０)」画面です。 (１)�@「更新」→�A実行結果 (２)「home」ボタンをクリック

「ソース画面で相互リンク(１１)」画面

tayori_ndx-メモ帳 <TR> <TD>03</TD> <TD></TD> <TD align="left"><B>クズの種で地球緑化に役立てる</B></TD></TR> <TR> <TD>02</TD> <TD>�@<IMG src="new01ah.gif" alt="New" height="26" width="57"></TD> <TD align="left">�B<A href="tayori02.htm"><B>校区の自然に親しむ</B>�C</A></TD></TR> <TR> <TD>01</TD> <TD>　</TD> <TD align="left"><A href="tayori01.htm"><B>宮山から見た那波港と相生湾</B></A></TD></TR>

写真（１１）

写真（１１）は、「ソース画面で相互リンク(１１)」画面です。 (１)写真（１１）は、写真（１０）のソース画面です。

「ソース画面で相互リンク(１２)」画面

tayori_ndx-メモ帳 <TR> <TD>03</TD> <TD>�A<IMG src="new01ah.gif" alt="New" height="26" width="57"></TD> <TD align="left">�D<A href="tayori03.htm"><B>クズの種で地球緑化に</B>�E</A></TD></TR> <TR> <TD>02</TD> <TD>　</TD> <TD align="left"><A href="tayori02.htm"><B>校区の自然に親しむ</B></A></TD></TR> <TR> <TD>01</TD> <TD>　</TD> <TD align="left"><A href="tayori01.htm"><B>宮山から見た那波港と相生湾</B></A></TD></TR>

写真（１２）

写真（１２）は、「ソース画面で相互リンク(１２)」画面です。 (１)写真（１１）の�@以下を切り取りして、�Aに貼り付け (２)写真（１１）の�B以下をコピーして、�Dに貼り付け→tayori03と変更 (３)写真（１１）の�C以下の</A>をコピーして、�Eに貼り付け (４)「ファイル」→「上書き保存」→メモ帳を「閉じる」

「ソース画面で相互リンク(１３)」画面

↑（完成ページにリンク）

写真（１３）

写真（１３）は、「ソース画面で相互リンク(１３)」画面です。 (１)完成ページです。