平成 28 年度埼玉県障害者技能競技大会ホームページ競技課題 A 1 競技の概要 (1) 競技課題競技課題 Aは課題の傾向を示した公開課題であり 競技課題 Bは競技当日用である (2) 課題の概要 ネットワークセキュリティ のホームページとして スタイルシートと次のページを作成する ネットワークセキュリティ コンピュータウィルス 無線 LAN のセキュリティ ファイヤーウォール (3) 競技時間競技時間は 120 分とする (4) 作品提出方法作成した作品は 大会主催者が準備した用紙への出力及びフロッピーディスクへの書き込みによって提出する 自前のフロッピーディスク CD-ROM などの持ち込み及び提出はできない 2 使用機器 (1) ハードウェア FMV ESPRIMO D583/H (2) ソフトウェア OS :Microsoft Windows 7 Professional ブラウザソフト :Microsoft Internet Explorer 11.0 テキストエディタ :NotePad または TeraPad( フリーウェア ) プラグイン : なし 3 注意事項 (1) 競技時には参考図書の持ち込みは認めるが メモ データやプログラムファイルの入ったフロッピーディスク CD-R 等の持ち込みは認めない (2) 参加者はハードウェアおよびソフトウェアの持ち込みは可能である (3) 競技場での座席位置は 予め競技委員が決定しておく (4) 競技開始前に パソコンの調子をみる練習時間を設ける (5) 競技中に万一機器が故障した場合は 競技委員の指示に従うこと 1/9
4 仕様 (1) 全体を通しての仕様 1 フォルダ構成 デスクトップに各自のローマ字による氏名のフォルダを作成すること このフォルダにすべてのファイルを保存すること 2HTML5 の文書型宣言各ページには 次の文書型宣言を入力する <!DOCTYPE html> 3html 要素の入力各ページには 次の html 要素を入力する <html lang="ja"> 4 ヘッダ情報各ページには 次のヘッダ情報を入力する <meta charset="shift_jis" /> 5 アクセシビリティに関して A) 画像タグには alt 属性を記述する 例 :alt= メールヘッダ B) 全般的にアクセシビリティに配慮し作成する 6 その他各課題には仕様が示されているが それ以外の事項については各自の判断で行うこと 2/9
(2) 課題 1 スタイルシートの作成次の仕様に従って スタイルシートを作成しなさい 仕様 ファイル名は stylesheet.css とし css フォルダに格納する div 要素を使用し 図のように header menu main footer の四つに段組みする header menu main footer body を次のように設定する 背景色を 明るい青系 に設定する 左側マージンを 100px 右側マージンを 100px とする 幅を 1200px とする フォントの種類として メイリオ を第一優先として設定する ただし メイリオ フォントを設定できない場合 標準 フォントを設定する header を次のように定義する 上側マージンを 15px とする menu li を次のように定義する 表示形式をインライン形式とする 左側に配置する menu li a を次のように定義する 表示形式をブロック形式とする 幅を 275px とする 文字列の水平を 中央 に配置する 文字サイズを large する main を次のように定義する 高さを 100% とする footer を次のように定義する 下側に配置し 高さを 50px とする 左右両方の回り込みを解除する div.pic を次のように定義する 中央揃えにする 3/9
見出し 1 を次のように定義する h1 要素で文字色を 濃い青系 とする 見出し 2 を次のように定義する h2 要素で文字色を 濃い青系 とする 上側マージンを 20px とする 左側の回り込みを解除する ブレーク ( 改行 ) を次のように定義する 右側に対して回り込みを解除する 区切り線 を次のように定義する 太さを 3px とする 色は 黒 とする 左側の回り込みを解除する dt を次のように定義する 太字にする dd を次のように定義する 全てのマージンを 10px とする 画像 を次のように定義する 全てのマージンを 10px とする 4/9
(3) 課題 2 ネットワークセキュリティ の作成次の仕様に従って トップページを作成しなさい 仕様 ファイル名は 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 を選択すると メール送信画面が起動し 宛先が test@web.mail となるように設定する 区切り線の設定 footer 部の真上に 区切り線 を配置する 5/9
main 部分の設定 文字列 どんな被害があるのか? を 見出し 2 で配置する 文章 近年 ~ 必要がある の文章は 段落 で配置する 不正アクセス フィッシング詐欺 は定義リストとして設定し 不正アクセス フィッシング詐欺 の文字列は定義リストのタイトルとして設定する 画像 mailheder.jpg を image フォルダに保存して 完成例を参考にして配置する 完成例を参考にして 文末にブレーク ( 改行 ) を設定する 画像 画像の説明文は下図のように中央揃えに設定する 6/9
(4) 課題 3 コンピュータウィルス ページの作成次の仕様に従って コンピュータウィルス ページを作成しなさい 仕様 ファイル名は virus.html とする タイトルは コンピュータウィルス とする スタイルシート stylesheet.css を取り込む 与えられたテキストファイル ウィルス.txt をもとにして 次のように文字を配置する 段組みの main 以外は index.html と同じ設定とする main 部分の設定 文字列 コンピュータウィルス対策 を 見出し 2 で配置する コンピュータウィルスとは? 感染経路 ウィルス ワーム トロイの木馬 スパイウェア 対策 は定義リストとして設定し コンピュータウィルスとは? 感染経路 ウィルス ワーム トロイの木馬 スパイウェア 対策 の文字列は定義リストのタイトルとして設定する IPA( 情報処理推進機構 ) の文字列に https://www.ipa.go.jp へのリンクを設定する 完成例を参考にして 文末にブレーク ( 改行 ) を設定する 7/9
(5) 課題 4 無線 LAN のセキュリティ ページの作成次の仕様に従って 無線 LAN のセキュリティ ページを作成しなさい 仕様 ファイル名は wifi.html とする タイトルは 無線 LAN のセキュリティ とする スタイルシート stylesheet.css を取り込む 段組みの main 以外は index.html と同じ設定とする main 部分の設定 文字列 無線 LAN のセキュリティ を 見出し 2 で配置する 近年 ~ あげられる の文章には 段落 で配置し 完成例を参考にして 必要に応じてブレーク ( 改行 ) を行う 暗号キー MAC アドレスによるフィルタリング は定義リストとして設定し 暗号キー MAC アドレスによるフィルタリング の文字列は定義リストのタイトルとして設定する 完成例を参考にして 文末にブレーク ( 改行 ) を設定する 8/9
(6) 課題 5 ファイヤーウォール ページの作成次の仕様に従って ファイヤーウォール ページを作成しなさい 仕様 ファイル名は firewall.html とする タイトルは ファイヤーウォール とする スタイルシート stylesheet.css を取り込む 段組みの main 以外は index.html と同じ設定とする main 部分の設定 文字列 ファイヤーウォール を 見出し 2 で配置する 元々は ~ 利用する の文章には 段落 で配置し 完成例を参考にして 必要に応じてブレーク ( 改行 ) を行う パケットフィルタリング型 アプリケーションゲートウェイ型 は定義リストとして設定し パケットフィルタリング型 アプリケーションゲートウェイ型 の文字列は定義リストのタイトルとして設定する 画像 firewall.jpg proxy.jpg を image フォルダに保存して 完成例を参考にして配置する 完成例を参考にして 文末にブレーク ( 改行 ) を設定する 以上 9/9