はびきのうぇぶ　ジョイのホームページ階層・リンクについてのHTMLテストページ２

階層・リンクについてのHTMLテストページ２

このページは、すでに「階層」について勉強された方に用意したテストページ２です。
まだの方は、充分ではありませんが「階層」についての簡単な解説を用意していますので学んでください。
「階層はなんとなく判るが、このページは難しい」と思う方は、テストページ１からお試しください。
下記の問題を指定の方法で回答してください。

フォルダがどのようにつながっているのか、下の画像をよく見てからテストに入ってください。

このページのひとつ上の階層の「index.html」と同じ階層に「hako1」～「hako5」があり、
　「hako1」の中に「pocket1」～「pocket5」
　「hako2」の中に「pocket6」～「pocket10」
　「hako3」の中に「pocket11」～「pocket15」
　「hako4」の中に「pocket16」～「pocket20」
　「hako5」の中に「pocket21」～「pocket25」
のフォルダが入っています。画像やページはフォルダの中に用意しています。

テスト結果のあとはブラウザの「戻る」で戻ってください。
どうしてもうまくいかないときは、簡単HP　問い合わせに「テスト番号」と「作ったURL」を記載して問い合わせてください。

■テスト４　難易度★★★☆ 作成：2009/09/27
「pocket13」に入っている「zou.gif」を表示しなさい。

このページは「http://joy2.shisyou.com/joy-kansai5/hako1/」です。すでに表示されているはずですので、削ったり書き込んだりしてください。完成したURLをすべてコピーし、インターネットのアドレス欄（URL欄）に貼り付け「Enter」キーを押すと表示されます。
正しく書き込めれば「zou.gif」の画像が表示されます。

このページに「zou.gif」の画像を表示させるには、書き込んだすべてのURL（絶対URL）でリンクするか、相対URLでリンクするかのどちらかの方法でできます。
相対URLで書いてみると下記のとおり表示されます。

通常、自分のサーバー内のリンクはこの相対URLを使います。例えば、
「index.html」のページと違う階層に「pocket22」フォルダがあり、その中にある「cat.gif」という写真を「index.html」に表示させる場合、
<img src="../hako5/pocket22/cat.gif" alt="*****" width="***" height="***" border="0">
（***は説明や数値など。このページの画像は border="1" にしています）　などと書きます。
「../」はひとつ上の階層に戻ることを示しています。ふたつ上に戻る場合は「../../」と書きます。