競技課題｜ホームページ

(1)

1/9 平成 28 年度埼玉県障害者技能競技大会ホームページ競技課題 A １競技の概要 （１）競技課題競技課題Ａは課題の傾向を示した公開課題であり、競技課題Ｂは競技当日用である。（２）課題の概要「ネットワークセキュリティ」のホームページとして、スタイルシートと次のページを作成する。・ネットワークセキュリティ・コンピュータウィルス・無線 LAN のセキュリティ・ファイヤーウォール（３）競技時間競技時間は１２０分とする。（４）作品提出方法作成した作品は、大会主催者が準備した用紙への出力及びフロッピーディスクへの書き込みによって提出する。自前のフロッピーディスク、ＣＤ－ＲＯＭなどの持ち込み及び提出はできない。 ２使用機器 （１）ハードウェア FMV ESPRIMO D583/H （２）ソフトウェア

ＯＳ：Microsoft Windows 7 Professional ブラウザソフト：Microsoft Internet Explorer 11.0 テキストエディタ：NotePad または TeraPad（フリーウェア）プラグイン：なし ３注意事項 （１）競技時には参考図書の持ち込みは認めるが、メモ、データやプログラムファイルの入ったフロッピーディスク、ＣＤ－Ｒ等の持ち込みは認めない。（２）参加者はハードウェアおよびソフトウェアの持ち込みは可能である。（３）競技場での座席位置は、予め競技委員が決定しておく。（４）競技開始前に、パソコンの調子をみる練習時間を設ける。（５）競技中に万一機器が故障した場合は、競技委員の指示に従うこと。

(2)

４仕様（１）全体を通しての仕様 ①フォルダ構成・デスクトップに各自のローマ字による氏名のフォルダを作成すること。・このフォルダにすべてのファイルを保存すること。 ②HTML5 の文書型宣言各ページには、次の文書型宣言を入力する。 <!DOCTYPE html> ③html 要素の入力各ページには、次の html 要素を入力する。 <html lang="ja"> ④ヘッダ情報各ページには、次のヘッダ情報を入力する。 <meta charset="Shift_JIS" /> ⑤アクセシビリティに関して A) 画像タグには alt 属性を記述する。例：alt=” メールヘッダ” B) 全般的にアクセシビリティに配慮し作成する。 ⑥その他各課題には仕様が示されているが、それ以外の事項については各自の判断で行うこと。

(3)

3/9 （２）課題 1 スタイルシートの作成次の仕様に従って、スタイルシートを作成しなさい。【仕様】・ファイル名は、「stylesheet.css」とし、ｃｓｓフォルダに格納する。・div 要素を使用し、図のように「header」、「menu」、「main」、「footer」の四つに段組みする。

header

main

footer

・「body」を次のように設定する。 ◎背景色を「明るい青系」に設定する。 ◎左側マージンを「100px」、右側マージンを「100px」とする。 ◎幅を「1200px」とする。 ◎フォントの種類として「メイリオ」を第一優先として設定する。ただし、「メイリオ」フォントを設定できない場合、「標準」フォントを設定する。・「header」を次のように定義する ◎上側マージンを「15px」とする。・「menu li」を次のように定義する。 ◎表示形式をインライン形式とする。 ◎左側に配置する。・「menu li a」を次のように定義する。 ◎表示形式をブロック形式とする。 ◎幅を「275px」とする。 ◎文字列の水平を「中央」に配置する。 ◎文字サイズを「large」する。・「main」を次のように定義する。 ◎高さを「100％」とする。・「footer」を次のように定義する。 ◎下側に配置し、高さを「50px」とする。 ◎左右両方の回り込みを解除する。・「div.pic」を次のように定義する。 ◎中央揃えにする。

(4)

・「見出し 1」を次のように定義する。 ◎h1 要素で文字色を「濃い青系」とする。・「見出し 2」を次のように定義する。 ◎h2 要素で文字色を「濃い青系」とする。 ◎上側マージンを「20ｐｘ」とする。 ◎左側の回り込みを解除する。・「ブレーク（改行）」を次のように定義する。 ◎右側に対して回り込みを解除する。・「区切り線」を次のように定義する。 ◎太さを「3px」とする。 ◎色は「黒」とする。 ◎左側の回り込みを解除する。・「dt」を次のように定義する。 ◎太字にする・「ｄｄ」を次のように定義する。全てのマージンを「10ｐｘ」とする。・「画像」を次のように定義する。 ◎全てのマージンを「10px」とする。

(5)

5/9 （３）課題２「ネットワークセキュリティ」の作成 次の仕様に従って、トップページを作成しなさい。【仕様】・ファイル名は「index.html」とする。・タイトルは、「ネットワークセキュリティ」とする。・スタイルシート「stylesheet.css」を取り込む。・与えられたテキストファイル「ネットワークセキュリティ.txt」をもとにして、次のように文字を配置する。 ◎「header」部分の設定・文字列「ネットワークセキュリティ」を「見出し 1」で配置する。 ◎区切り線の設定・「header」部の真下に「区切り線」を配置する。 ◎「menu」部分の設定・文字列「どんな被害があるのか？」、「コンピュータウィルス対策」、「無線 LAN のセキュリティ」、「ファイヤーウォール」を順序なしリストで配置する。・それぞれの箇条書き項目から、「index.html」、「virus.html」、「wifi.html」、「firewall.html」にリンクを設定する。 ◎区切り線の設定・「menu」部の真下に「区切り線」を配置する。 ◎「footer」部分の設定

・文字列「Copyright(C) Abilympic Saitama」を「address タグ」で設定する。

・文字列「Abilympic Saitama」を選択すると、メール送信画面が起動し、宛先が「[email protected]」となるように設定する。 ◎区切り線の設定

(6)

◎「main」部分の設定・文字列「どんな被害があるのか？」を「見出し 2」で配置する。・文章「近年」～「必要がある。」の文章は「段落」で配置する。・「不正アクセス」、「フィッシング詐欺」は定義リストとして設定し、「不正アクセス」、「フィッシング詐欺」の文字列は定義リストのタイトルとして設定する。・画像「mailheder.jpg」を「image」フォルダに保存して、完成例を参考にして配置する。・完成例を参考にして、文末にブレーク（改行）を設定する。・画像、画像の説明文は下図のように中央揃えに設定する。

(7)

7/9 （４）課題 3 「コンピュータウィルス」ページの作成 次の仕様に従って、「コンピュータウィルス」ページを作成しなさい。【仕様】・ファイル名は「virus.html」とする。・タイトルは、「コンピュータウィルス」とする。・スタイルシート「stylesheet.css」を取り込む。・与えられたテキストファイル「ウィルス.txt」をもとにして、次のように文字を配置する。・段組みの「main」以外は「index.html」と同じ設定とする。 ◎「main」部分の設定・文字列「コンピュータウィルス対策」を「見出し 2」で配置する。・「コンピュータウィルスとは？」、「感染経路」、「ウィルス」、「ワーム」、「トロイの木馬」、「スパイウェア」、「対策」は定義リストとして設定し、「コンピュータウィルスとは？」、「感染経路」、「ウィルス」、「ワーム」、「トロイの木馬」、「スパイウェア」、「対策」の文字列は定義リストのタイトルとして設定する。・「IPA（情報処理推進機構）」の文字列に「https://www.ipa.go.jp」へのリンクを設定する。・完成例を参考にして、文末にブレーク（改行）を設定する。

(8)

（５）課題４「無線 LAN のセキュリティ」ページの作成 次の仕様に従って、「無線 LAN のセキュリティ」ページを作成しなさい。【仕様】・ファイル名は「wifi.html」とする。・タイトルは、「無線 LAN のセキュリティ」とする。・スタイルシート「stylesheet.css」を取り込む。・段組みの「main」以外は「index.html」と同じ設定とする。 ◎「main」部分の設定・文字列「無線 LAN のセキュリティ」を「見出し 2」で配置する。・「近年、」～「あげられる。」の文章には「段落」で配置し、完成例を参考にして、必要に応じてブレーク（改行）を行う。・「暗号キー」、「MAC アドレスによるフィルタリング」は定義リストとして設定し、「暗号キー」、「MAC アドレスによるフィルタリング」の文字列は定義リストのタイトルとして設定する。・完成例を参考にして、文末にブレーク（改行）を設定する。

(9)

9/9 （６）課題５「ファイヤーウォール」ページの作成次の仕様に従って、「ファイヤーウォール」ページを作成しなさい。【仕様】・ファイル名は「firewall.html」とする。・タイトルは、「ファイヤーウォール」とする。・スタイルシート「stylesheet.css」を取り込む。・段組みの「main」以外は「index.html」と同じ設定とする。 ◎「main」部分の設定・文字列「ファイヤーウォール」を「見出し 2」で配置する。・「元々は」～「利用する。」の文章には「段落」で配置し、完成例を参考にして、必要に応じてブレーク（改行）を行う。・「パケットフィルタリング型」、「アプリケーションゲートウェイ型」は定義リストとして設定し、「パケットフィルタリング型」、「アプリケーションゲートウェイ型」の文字列は定義リストのタイトルとして設定する。・画像「firewall.jpg」、「proxy.jpg」を「image」フォルダに保存して、完成例を参考にして配置する。・完成例を参考にして、文末にブレーク（改行）を設定する。以上