内容を充実させる

２．１リンクについて

　内容を充実させるには、index.htmlファイルに全て書込むのではなく、内容に応じた新たな複数のページ（ファイル）を作り、それらをお互いにリンクします（繋ぎます）。

（１）新しいページを作る

　自己紹介のページとＸ山への挑戦は別のページを作って、最初のページとリンクしましょう。

ファイル名

自己紹介のページ honbun1.html

Ｘ山への挑戦のページ honbun2.html

としてみましょう。

　また、ファイルが多くなることを想定して、管理し易いように homepage フォルダの中にさらにフォルダを作ります（「フォルダを作る」のＣ：を選択する代わりに homepage を選択します。）。
　ＨＴＭＬファイルを入れる html フォルダと画像を入れる image フォルダを作ります。index.html 以外のＨＴＭＬファイル(honbun1.html,honbun2.html)は html フォルダに入れます。

　フォルダとファイルの対応は次のとおりです。

	フォルダ        ファイル
	homepage--------index.html（ホームページ）
	 |
	 +---html-------honbun1.html（自己紹介のページ）
	 |              honbun2.html（Ｘ山への挑戦のページ）
	 |
	 +---image------watasi.jpg（私の写真）

（２）他のページとリンクする

　他のページとのリンク（そこをクリックすると他のページに飛んで行く）するには、次の様にします。
<A HREF="パス/ファイル名">自己紹介のページです。</A>
このように書くことによって、「自己紹介のページです。」をクリックすると、パス/ファイル名で指定されたファイルが表示されます。

　パスとは指定するファイルの存在するフォルダを指定するもので、リンク元（A HREF="‥‥を書いているファイル）からの相対位置で指定するのが良いと思います。

　相対パスの指定方法は次の通りです。

フォルダパス具体例具体例の説明

同一フォルダ何も書かない "honbun2.html" honbun1.htmlからhonbun2.htmlを指定する。

下位フォルダフォルダ名/ "html/honbun1.html" index.htmlからhonbun1.htmlを指定する。

上位フォルダ ../ "../index.html" honbun1.htmlからindex.htmlを指定する。

隣のフォルダ ../フォルダ名/ "../image/watasi.jpg" honbun1.htmlからwatasi.jpgを指定する。

パス／ファイル名に使用する英字は、大文字と小文字が別の文字として区別されるので注意しましょう。（フォルダおよびファイル名が小文字を使用していればパスも小文字とする。）

（３）各ページの例

　それでは、各ページを次の例に従って作成して下さい。
　（<HTML>～</HTML>までをマウスでドラッグして選択状態にし、「編集」－「コピー」してからメモ帳に「貼り付け」ればキー入力が不要です。）

index.html
<HTML>
<HEAD><TITLE>エムの旅日記</TITLE></HEAD>
<BODY STYLE="background:aqua">
<DIV STYLE="text-align:center">
<SPAN STYLE="font-size:200%;font-style:italic;font-weight:bold">エムの旅日記</SPAN><BR>
<HR COLOR=green SIZE=8 WIDTH=60%>
<SPAN STYLE="color:blue">これは、</SPAN>
<SPAN STYLE="font-size:300%;color:red">私（エム）</SPAN>の旅の記録です。
<HR COLOR=green>
</DIV>
<SPAN STYLE="font-weight:bold">
◆ <A HREF="html/honbun1.html">自己紹介</A><BR><BR>
◆ <A HREF="html/honbun2.html">Ｘ山への挑戦</A><BR>
</SPAN>
</BODY>
</HTML>

honbun1.html
<HTML>
<HEAD><TITLE>自己紹介</TITLE></HEAD>
<BODY STYLE="background:white;color:green">
<DIV STYLE="text-align:center">
<HR WIDTH=60% SIZE=5 COLOR=red>
<SPAN STYLE="font-size:150%;font-weight:bold">自己紹介</SPAN>
<HR WIDTH=60% SIZE=5 COLOR=red>
</DIV>
★私はエムです。<BR>
☆これが私です。
<A HREF="../image/watasi.jpg">ここをクリック</A>して見て下さい。<BR>
ここに戻るにはブラウザの「戻る」釦を使って下さい。<HR>
<DIV STYLE="text-align:center">
<A HREF="../index.html">［ホームページへ］</A>
<A HREF="honbun2.html">［Ｘ山への挑戦へ］</A>
</BODY>
</HTML>

honbun2.html
<HTML>
<HEAD><TITLE>Ｘ山への挑戦</TITLE></HEAD>
<BODY STYLE="background:green;color:white">
<DIV STYLE="text-align:center">
<HR WIDTH=60% SIZE=5 COLOR=red>
<SPAN STYLE="font-size:150%;font-weight:bold">Ｘ山への挑戦</SPAN>
<HR WIDTH=60% SIZE=5 COLOR=red>
</DIV>
　〇月〇日、私はＸ山に登りました。
<A HREF="../image/yama.jpg">ここをクリックする</A>と、
その時の写真が見れます。<BR>
ここに戻るにはブラウザの「戻る」釦を使って下さい。<HR>
<DIV STYLE="text-align:center">
<A HREF="../index.html">［ホームページへ］</A>
<A HREF="honbun1.html">［自己紹介へ］</A>
</BODY>
</HTML>

以上を作成した結果は、次の釦を押して新しいウインドを開いてご確認下さい。

（「Ｘ山への挑戦」のページのリンク部分の文字が見えにくい色になっていると思います。この色は<BODY>タグのSTYLE中で色指定できます。A:link{color:yellow}とA:visited{color:aqua} を追加してみて下さい。）

ページのトップへ

２．２画像の貼り付け

　ページの内容に応じて画像を使うことにより、文章だけでは表現できない、充実したページが構成できます。画像の種類や作り方についてはm-tezukaの画像教室の「画像の作り方」（別ウインドに表示）を参照して下さい。

　画像の貼り付け方には、文章の一部として貼り付ける場合と、背景（その画像の上に文章を書く）として貼り付ける場合があります。

（１）文章の一部として貼り付ける

　この場合には、画像を１文字として表示する方法と、画像の周りに文章を配置する方法があります。
　先ず、画像を一文字として扱う方法のＨＴＭＬは次の通りです。

これは、私の写真です。<IMG SRC="../image/watasi.jpg">美人でしょう。

""内はパス付ファイル名で２．１の（２）で説明した通りです。
どのように表示されるかは、右の釦を押してご覧ください。

　次は、画像の周りに文章を配置するＨＴＭＬです。

<IMG SRC="../image/watasi.jpg" ALIGN=left>
この文章は、画像の右側に表示されます。<BR CLEAR=ALL>
ここからは、画像の下に表示されます。

どのように表示されるかは、右の釦を押してご覧ください。
ALIGN=rightとすれば画像が右側になります。

（２）背景として貼り付ける

　これにも、ページ全体の背景として貼り付ける場合と、一部の背景として貼り付ける場合があります。例を参考にして応用してみて下さい。

全体の背景として貼り付ける場合は次の通りです。

<BODY STYLE="BACKGROUND:URL(パス/ファイル名)">
これは背景としてページ全体にタイル貼りされます。<BR>
画像と文字の色に注意しましょう。

どのように表示されるかは、右の釦を押してご覧ください。

一部（widthとheightで大きさを指定）の背景として貼り付ける場合は次の通りです。

<DIV STYLE="BACKGROUND:URL(パス/ファイル名);width:200px;height:120px">
この部分だけに貼り付けられます。<BR>
画像の大きさ（200px×120px）と同じ大きさのwidthとheightにすると、このようになります。
</DIV>

どのように表示されるかは、右の釦を押してご覧ください。

		ファイル名
自己紹介のページ		honbun1.html
Ｘ山への挑戦のページ		honbun2.html

フォルダ	パス	具体例	具体例の説明
同一フォルダ	何も書かない	"honbun2.html"	honbun1.htmlからhonbun2.htmlを指定する。
下位フォルダ	フォルダ名/	"html/honbun1.html"	index.htmlからhonbun1.htmlを指定する。
上位フォルダ	../	"../index.html"	honbun1.htmlからindex.htmlを指定する。
隣のフォルダ	../フォルダ名/	"../image/watasi.jpg"	honbun1.htmlからwatasi.jpgを指定する。

２．リンクと画像で内容を充実させる

２．１ リンクについて

（１） 新しいページを作る

（２） 他のページとリンクする

（３） 各ページの例