はびきのうぇぶ ジョイのタイトルロゴ

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

このページは各ホームページ(ウェブページ)のリンクや使用する画像などへのリンクが理解できているかどうかをテストするページです。
リンクをクリックしてうまく接続できずにエラーページが表示されたり、ページ内の画像の部分が×印になっていたりすることがあります。
これらは
 1.リンク先のページがない
 2.リンクの画像がない
 3.リンクが間違っている
 4.全角文字で書かれている
 5.インターネットの接続状態やサーバーの状態が悪くて表示が遅い、または表示できないなど
のいずれかです。

5は仕方ないですが、1、2や4も論外です(問い合わせのあったページでは結構多かったですが)。
各ページはすでに用意されており、画像も不備なく用意できているとすれば、あとはリンクのどこかが間違っています。
1、2、4、5が大丈夫なら、必ずリンクが間違っています。

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


フォルダがどのようにつながっているのか、下の画像をよく見てからテストに入ってください。
このページから見たフォルダの状態
このページ「index.html」と同じ階層に「hako1」〜「hako5」があり、
 「hako1」の中に「pocket1」〜「pocket5」
 「hako2」の中に「pocket6」〜「pocket10」
 「hako3」の中に「pocket11」〜「pocket15」
 「hako4」の中に「pocket16」〜「pocket20」
 「hako5」の中に「pocket21」〜「pocket25」
のフォルダが入っています。画像やページはフォルダの中に用意しています。

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


■テスト1 難易度☆☆☆☆ 作成:2009/09/27
同じ階層にある「monkey.gif」を表示しなさい。

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


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

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


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

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


このページに「bear.gif」の画像を表示させるには、書き込んだすべてのURL(絶対URL)でリンクするか、 すでに表示されていた部分を除いてあなたが書き込んだ部分だけ(相対URL)でリンクするかのどちらかの方法でできます。
相対URLで書いてみると下記のとおり表示されます。

「pocket22」に入っている「bear.gif」

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


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

このページからでは判りにくいので次のページから回答してください。


■テスト5 難易度★☆☆☆〜★★★★ 作成:??????

ここからは相対URLのテストに入りますが、勉強会参加者専用サイトになり一般の方には公開していません。
ダウンロードしてパソコン上でできるように作りますが、まだ未完成です。




Copyright© はびきのうぇぶ ジョイのHTML勉強会のページ All Right Reserved.   制作:ホームページを自作しよう≪JoyWave便利箱≫