こちら - 教材ドットコム

■ 教材ドットコムオリジナル問題集
ＨＰ制作技術能力認定試験対策問題集３ ■
日情協
ＨＰ制作技術能力認定試験
対策問題（２、３級）
（１）利用について
１．注意事項
1.受験級別に問題があるので、それぞれを解くこと。
2.制限時間は１２０分とする。
3.途中でわからないことがあったら、随時聞くこと。
4.個別にチェックしてほしい場合はその都度教員を呼ぶこと。
5.画像素材は与えられたものを利用すること。
6.画面写真を見て、ある程度は自分で判断して問題を解くこと。
２
謝辞
この問題を作成するにあたって以下のサイトから素材を使用させていただきました。
この場を借りまして、お礼申し上げます。
1.なつの素材屋さん
http://www.nachu.com/sozai/
2.アメリカンホームダイレクト
http://www.americanhome.co.jp/home/index.html
3.マネックス
http://www.monex.co.jp/
３
利用について
1.この教材の著作権は教材ドットコムが保有いたします。
2.公的な学校機関における利用については無料ですが、それ以外のいずれの仕様については有料と
なりますので、別途メールにてご相談下さい。
3.教材についてのお問い合わせは下記サイト内の掲示板にてお願いいたします。
http://www.kyouzai.com/
「教材ドットコム」
以上
-1 -
■ 教材ドットコムオリジナル問題集
ＨＰ制作技術能力認定試験対策問題集３ ■
（２）３級対策
【問題】次の画面、および仕様を参考にソースを組みなさい。画像素材はｓｏｚａｉフォルダ内のも
のを使いなさい。
index.htm
link.htm
-2 -
■ 教材ドットコムオリジナル問題集
ＨＰ制作技術能力認定試験対策問題集３ ■
profile.htm
【仕様１】index.htm
1.ページ全体の設定
2.タイトル
3.link画像
4.Profile画像
5.メール画像
6.表
背景画像：kabeusagi-aka.gif
リンクの色：#cc33CC
訪問済のリンクの色：#cc0000
テキストの色：#cc0066
ライン画像：neko-line.gif
ヨコ幅：５００ピクセル
タテ幅：３２ピクセル
枠線：０
文字色：#cc0066
サイズ：＋３
文字：猫ちゃんのＨＴＭＬ講座
ライン画像：neko-link.gif
ヨコ幅：１００ピクセル
タテ幅：３１ピクセル
枠線：０
ライン画像：neko-profile.gif
ヨコ幅：１２０ピクセル
タテ幅：３１ピクセル
枠線：０
ライン画像：mawarupost.gif
ヨコ幅：５０ピクセル
タテ幅：８０ピクセル
枠線：０
メールアドレス：[email protected]
全体の幅：ウィンドウの８０％
左右のセルの幅：それぞれ５０％
セル背景色：#FFDDDD、#DDFFDD、#DDDDFF、#FFFFDD
右下のセル内の文字：等幅フォント
-3 -
■ 教材ドットコムオリジナル問題集
ＨＰ制作技術能力認定試験対策問題集３ ■
【仕様２】link.htm
1.ページ全体の設定
2.タイトル
3.画像１
4.画像２
5.戻る画像
背景画像：kabeusagi-aka.gif
リンクの色：#cc33CC
訪問済のリンクの色：#cc0000
テキストの色：#cc0066
ライン画像：neko-line.gif
ヨコ幅：５００ピクセル
タテ幅：３２ピクセル
枠線：０
文字色：#cc0066
サイズ：＋３
文字：リンク集
画像：monex_0518b.gif
ヨコ幅：１２７ピクセル
タテ幅：６０ピクセル
枠線：０
リンク先：http://www.monex.co.jp/
画像：aha_08ba.gif
ヨコ幅：１２７ピクセル
タテ幅：６０ピクセル
枠線：０
リンク先：http://www.americanhome.co.jp/
ライン画像：neko-index.gif
ヨコ幅：１００ピクセル
タテ幅：３１ピクセル
リンク先：index.htm
【仕様３】profile.htm
1.ページ全体の設定
2.タイトル
3.戻る画像
4.表
背景画像：kabeusagi-aka.gif
リンクの色：#cc33CC
訪問済のリンクの色：#cc0000
テキストの色：#cc0066
ライン画像：neko-line.gif
ヨコ幅：５００ピクセル
タテ幅：３２ピクセル
枠線：０
文字色：#cc0066
サイズ：＋３
文字：プロフィール
ライン画像：neko-index.gif
ヨコ幅：１００ピクセル
タテ幅：３１ピクセル
リンク先：index.htm
表の全体の横サイズ：ウィンドウの８０％
枠幅：５０％づつ
枠線：１
キャプション：略歴
背景色：#FFCCCC
-4 -
■ 教材ドットコムオリジナル問題集
ＨＰ制作技術能力認定試験対策問題集３ ■
【３級解答】
■■■■■■■■■■■■■■■■■■■■■■■index.htm
<HTML>
<HEAD>
<TITLE>猫ちゃんのＨＴＭＬ講座</TITLE>
</HEAD>
<BODY BACKGROUND="sozai/kabeusagi-aka.gif" LINK="#cc33CC" VLINK="#cc0000" TEXT="#cc0066">
<CENTER>
<IMG SRC="sozai/neko-line.gif" WIDTH="500" HEIGHT="32"><BR>
<FONT COLOR="#cc0066" SIZE="+3">猫ちゃんのＨＴＭＬ講座</FONT><BR>
<IMG SRC="sozai/neko-line.gif" WIDTH="500" HEIGHT="32"><P>
<TABLE WIDTH="80%" BORDER="1">
<TR>
<TD BGCOLOR="#FFDDDD" WIDTH="50%" ALIGN="CENTER">
<A HREF="link.htm"><IMG SRC="sozai/neko-link.gif" WIDTH="100" HEIGHT="31" BORDER="0"></A>
</TD>
<TD BGCOLOR="#DDFFDD" WIDTH="50%" ALIGN="CENTER">
<A HREF="profile.htm">
<IMG SRC="sozai/neko-profile.gif" WIDTH="120" HEIGHT="31" BORDER="0">
</A>
</TD>
</TR>
<TR>
<TD ALIGN="CENTER" BGCOLOR="#DDDDFF">
<ADDRESS>
<A HREF="mailto:[email protected]">
<IMG SRC="sozai/mawarupost.gif" WIDTH="50" HEIGHT="80" ALIGN="middle" BORDER="0">
[email protected]</A>
</ADDRESS>
</TD>
<TD VALIGN="TOP" BGCOLOR="#FFFFDD">
<TT>
ようこそ猫ちゃんのＷＷＷ入門へ。<BR>
このサイトでは私なりに多少間違いはあるかもしれませんが、ホームページをはじめる際のテクニッ
クを解説しようと思っています。よろしくね。
</TT></TD>
</TR>
</TABLE>
</CENTER>
</BODY>
</HTML>
■■■■■■■■■■■■■■■■■■■■■■■■link.htm
<HTML>
<HEAD>
<TITLE>リンク集</TITLE>
</HEAD>
<BODY BACKGROUND="sozai/kabeusagi-aka.gif" LINK="#cc33CC" VLINK="#cc0000" TEXT="#cc0066">
<CENTER>
<IMG SRC="sozai/neko-line.gif" WIDTH="500" HEIGHT="32"><BR>
<FONT COLOR="#cc0066" SIZE="+3">リンク集</FONT><BR>
<IMG SRC="sozai/neko-line.gif" WIDTH="500" HEIGHT="32"><P>
<HR>
-5 -
■ 教材ドットコムオリジナル問題集
ＨＰ制作技術能力認定試験対策問題集３ ■
</CENTER>
<P>
好きなサイトをクリックして下さい。<P>
<A HREF="http://www.monex.co.jp/">
<IMG SRC="sozai/monex_0518b.gif" WIDTH="127" HEIGHT="60" ALIGN="TOP" BORDER="0">
マネックス</A><P>
<A HREF="http://www.americanhome.co.jp/">
<IMG SRC="sozai/aha_08ba.gif"WIDTH="127" HEIGHT="60" ALIGN="TOP" BORDER="0">
アメリカンホームダイレクト</A><P>
<HR ALIGN="LEFT"><P>
<A HREF="index.htm">
<IMG SRC="sozai/neko-index.gif" WIDTH="100" HEIGHT="31" ALIGN="TOP" BORDER="0">
トップページへ戻る</A>
</BODY>
</HTML>
■■■■■■■■■■■■■■■■■■■■■■profile.htm
<HTML>
<HEAD>
<TITLE>作者のプロフィール</TITLE>
</HEAD>
<BODY BACKGROUND="sozai/kabeusagi-aka.gif" LINK="#cc33CC" VLINK="#cc0000" TEXT="#cc0066">
<CENTER>
<IMG SRC="sozai/neko-line.gif" WIDTH="500" HEIGHT="32"><BR>
<FONT COLOR="#cc0066" SIZE="+3">プロフィール</FONT><BR>
<IMG SRC="sozai/neko-line.gif" WIDTH="500" HEIGHT="32">
<HR>
<TABLE WIDTH="80%" BORDER="0" BGCOLOR="#FFCCCC">
<CAPTION>略歴</CAPTION>
<TR><TH>年度</TH><TH>内容</TH></TR>
<TR VALIGN="top">
<TD WIDTH="50%">
平成１０年４月</TD>
<TD>
Ｙａｐｏｏを立ち上げる<BR>
今のダンナと結婚</TD>
</TR>
<TR VALIGN="top">
<TD>
平成１１年１０月</TD>
<TD>
１００００ヒット達成</TD>
</TR>
</TABLE>
</CENTER>
<HR>
<A HREF="index.htm">
<IMG SRC="sozai/neko-index.gif" WIDTH="100" HEIGHT="31" ALIGN="TOP" BORDER="0">
トップページへ戻る</A>
</BODY>
</HTML>
-6 -
■ 教材ドットコムオリジナル問題集
ＨＰ制作技術能力認定試験対策問題集３ ■
（３）２級対策
【問題】次の画面、および仕様を参考にソースを組みなさい。画像素材はｓｏｚａｉフォルダ内のも
のを使いなさい。
index.htm
link.htm
-7 -
■ 教材ドットコムオリジナル問題集
ＨＰ制作技術能力認定試験対策問題集３ ■
profile.htm
【仕様１】index.htm
1.ページ全体の設定
2.タイトル
3.link画像
4.Profile画像
5.メール画像
6.表
背景画像：kabeusagi-aka.gif
リンクの色：#cc33CC
訪問済のリンクの色：#cc0000
テキストの色：#cc0066
ライン画像：neko-line.gif
ヨコ幅：５００ピクセル
タテ幅：３２ピクセル
枠線：０
文字色：#cc0066
サイズ：＋３
文字：猫ちゃんのＨＴＭＬ講座
ライン画像：neko-link.gif
ヨコ幅：１００ピクセル
タテ幅：３１ピクセル
枠線：０
ライン画像：neko-profile.gif
ヨコ幅：１２０ピクセル
タテ幅：３１ピクセル
枠線：０
ライン画像：mawarupost.gif
ヨコ幅：５０ピクセル
タテ幅：８０ピクセル
枠線：０
メールアドレス：[email protected]
全体の幅：ウィンドウの８０％
左右のセルの幅：それぞれ５０％
セル背景色：#FFDDDD、#DDFFDD、#DDDDFF、#FFFFDD
右下のセル内の文字：等幅フォント
-8 -
■ 教材ドットコムオリジナル問題集
ＨＰ制作技術能力認定試験対策問題集３ ■
【仕様２】link.htm
1.ページ全体の設定
2.タイトル
3.フォーム
4.戻る画像
背景画像：kabeusagi-aka.gif
リンクの色：#cc33CC
訪問済のリンクの色：#cc0000
テキストの色：#cc0066
ライン画像：neko-line.gif
ヨコ幅：５００ピクセル
タテ幅：３２ピクセル
枠線：０
文字色：#cc0066
サイズ：＋３
文字：リンク希望フォーム
フォーム名：F1
テキストボックス名：Q1
テキストボックス幅：２５
ラジオボタン名：Q2
メニュー名：Q3
項目名１：日記
送信値：NIKKI
項目名２：インターネット関連送信値：NET
項目名３：趣味、その他
送信値：ETC
チェックボックス名：Q4
項目名１：コンピュータ
送信値：COM
項目名２：音楽
送信値：MUSIC
項目名３：アート
送信値：ART
項目名４：ゲーム
送信値：GAME
テキストエリア名：Q5
テキストエリア横幅：４０
縦幅：４
送信ボタン名：Q6
リセットボタン名：Q7
※フォーム内はリスト表示させること
ライン画像：neko-index.gif
ヨコ幅：１００ピクセル
タテ幅：３１ピクセル
リンク先：index.htm
【仕様３】profile.htm
1.ページ全体の設定
2.タイトル
3.戻る画像
4.表
背景画像：kabeusagi-aka.gif
リンクの色：#cc33CC
訪問済のリンクの色：#cc0000
テキストの色：#cc0066
ライン画像：neko-line.gif
ヨコ幅：５００ピクセル
タテ幅：３２ピクセル
枠線：０
文字色：#cc0066
サイズ：＋３
文字：プロフィール
ライン画像：neko-index.gif
ヨコ幅：１００ピクセル
タテ幅：３１ピクセル
リンク先：index.htm
表の全体の横サイズ：ウィンドウの８０％
枠幅：５０％づつ
枠線：１
キャプション：略歴
背景色：#FFCCCC
-9 -
■ 教材ドットコムオリジナル問題集
ＨＰ制作技術能力認定試験対策問題集３ ■
【２級解答】
■■■■■■■■■■■■■■■■■■■■■■■index.htm
<HTML>
<HEAD>
<TITLE>猫ちゃんのＨＴＭＬ講座</TITLE>
</HEAD>
<BODY BACKGROUND="sozai/kabeusagi-aka.gif" LINK="#cc33CC" VLINK="#cc0000" TEXT="#cc0066">
<CENTER>
<IMG SRC="sozai/neko-line.gif" WIDTH="500" HEIGHT="32"><BR>
<FONT COLOR="#cc0066" SIZE="+3">猫ちゃんのＨＴＭＬ講座</FONT><BR>
<IMG SRC="sozai/neko-line.gif" WIDTH="500" HEIGHT="32"><P>
<TABLE WIDTH="80%" BORDER="1">
<TR>
<TD BGCOLOR="#FFDDDD" WIDTH="50%" ALIGN="CENTER">
<A HREF="link.htm"><IMG SRC="sozai/neko-link.gif" WIDTH="100" HEIGHT="31" BORDER="0"></A>
</TD>
<TD BGCOLOR="#DDFFDD" WIDTH="50%" ALIGN="CENTER">
<A HREF="profile.htm">
<IMG SRC="sozai/neko-profile.gif" WIDTH="120" HEIGHT="31" BORDER="0">
</A>
</TD>
</TR>
<TR>
<TD ALIGN="CENTER" BGCOLOR="#DDDDFF">
<ADDRESS>
<A HREF="mailto:[email protected]">
<IMG SRC="sozai/mawarupost.gif" WIDTH="50" HEIGHT="80" ALIGN="middle" BORDER="0">
[email protected]</A>
</ADDRESS>
</TD>
<TD VALIGN="TOP" BGCOLOR="#FFFFDD">
<TT>
ようこそ猫ちゃんのＷＷＷ入門へ。<BR>
このサイトでは私なりに多少間違いはあるかもしれませんが、ホームページをはじめる際のテクニッ
クを解説しようと思っています。よろしくね。
</TT>
</TD>
</TR>
</TABLE>
</CENTER>
</BODY>
</HTML>
- 10 -
■ 教材ドットコムオリジナル問題集
ＨＰ制作技術能力認定試験対策問題集３ ■
■■■■■■■■■■■■■■■■■■■■■■■■link.htm
<HTML>
<HEAD>
<TITLE>リンク希望フォーム</TITLE>
</HEAD>
<BODY BACKGROUND="sozai/kabeusagi-aka.gif" LINK="#cc33CC" VLINK="#cc0000" TEXT="#cc0066">
<CENTER>
<IMG SRC="sozai/neko-line.gif" WIDTH="500" HEIGHT="32"><BR>
<FONT COLOR="#cc0066" SIZE="+3">リンク希望フォーム</FONT><BR>
<IMG SRC="sozai/neko-line.gif" WIDTH="500" HEIGHT="32"><P>
</CENTER>
<blockquote>
当サイトにリンクを希望する方は下のフォームからお願いします。<P>
<FORM NAME="F1">
<OL>
<LI>サイト名：<INPUT NAME="Q1" TYPE="text" SIZE="25"><BR>
<LI>性別：
男<INPUT TYPE="radio" VALUE="MAN" NAME="Q2" CHECKED>
女<INPUT TYPE="radio" VALUE="WOMAN" NAME="Q2"><BR>
<LI>ジャンル：<SELECT NAME=Q3">
<OPTION VALUE="NIKKI" SELECTED>日記
<OPTION VALUE="NET" >インターネット関連
<OPTION VALUE="ETC" >趣味、その他
</SELECT><BR>
<LI>カテゴリー：
<INPUT TYPE="checkbox" VALUE="COM" NAME="Q4" CHECKED>コンピュータ
<INPUT TYPE="checkbox" VALUE="MUSIC" NAME="Q4" CHECKED>音楽
<INPUT TYPE="checkbox" VALUE="ART" NAME="Q4" CHECKED>アート
<INPUT TYPE="checkbox" VALUE="GAME" NAME="Q4" CHECKED>ゲーム<BR>
<LI>紹介文：
<TEXTAREA NAME="Q5" ROWS="4" COLS="40"></TEXTAREA>
<INPUT NAME="Q6" TYPE="submit" VALUE="送信">
<INPUT NAME="Q7" TYPE="reset" VALUE="リセット">
</OL>
</FORM>
<A HREF="index2.htm">
<IMG SRC="sozai/neko-index.gif" WIDTH="100" HEIGHT="31" ALIGN="TOP" BORDER="0">
トップページへ戻る</A>
</blockquote>
</BODY>
</HTML>
- 11 -
■ 教材ドットコムオリジナル問題集
ＨＰ制作技術能力認定試験対策問題集３ ■
■■■■■■■■■■■■■■■■■■■■■■profile.htm
<HTML>
<HEAD>
<TITLE>作者のプロフィール</TITLE>
</HEAD>
<BODY BACKGROUND="sozai/kabeusagi-aka.gif" LINK="#cc33CC" VLINK="#cc0000" TEXT="#cc0066">
<CENTER>
<IMG SRC="sozai/neko-line.gif" WIDTH="500" HEIGHT="32"><BR>
<FONT COLOR="#cc0066" SIZE="+3">プロフィール</FONT><BR>
<IMG SRC="sozai/neko-line.gif" WIDTH="500" HEIGHT="32">
<HR>
<TABLE WIDTH="80%" BORDER="0" BGCOLOR="#FFCCCC">
<CAPTION>略歴</CAPTION>
<TR><TH>年度</TH><TH>内容</TH></TR>
<TR VALIGN="top">
<TD WIDTH="50%">
平成１０年４月</TD>
<TD>
Ｙａｐｏｏを立ち上げる<BR>
今のダンナと結婚</TD>
</TR>
<TR VALIGN="top">
<TD>
平成１１年１０月</TD>
<TD>
１００００ヒット達成</TD>
</TR>
</TABLE>
</CENTER>
<HR>
<A HREF="index.htm">
<IMG SRC="sozai/neko-index.gif" WIDTH="100" HEIGHT="31" ALIGN="TOP" BORDER="0">
トップページへ戻る</A>
</BODY>
</HTML>
- 12 -

Download Report