HTML試験

使用するアプリケーション：brackets、Fireworks、FFFTP

教科書・プリント参照可

1. 試験用ファイル・フォルダの作成(pro/site/test)
   • windowsでpro/site内にtestフォルダを作成。試験に使用するファイルや画像はそこに入れる。
   • bracketsでkozo.htmlからtestフォルダ内にtest.htmlを作成。解答はそのなかにHTMLで記述し、トップページからリンクを貼る。
   • タイトルとh1で「〜（自分のペンネーム）のHTML試験」と記入し、属性で水平方向中央揃えにする
2. リンク
   • プログラムのトップページでの作業 （pro/site/index.html）
     • ページの一番下に区切り線（罫線）をつけ、その下に「試験」と入力し、今日作成したtest.htmlへのリンクを貼る
     • 更新履歴の本日分を追加し17/02/06　試験と入力し、「試験」からtest.htmlへのリンクを貼る
3. 画像(test.html)
   • h1の下に段落を作成し属性で水平方向中央揃えにし、その中にimgフォルダのhome.gifを表示させトップページ(../index.html) へリンクさせる
4. リスト （リンクボタンの下に見出し2で「問3.リスト」と見出しを作りその下に）
   • 番号付きリストを作成し問題と対応する番号に以下の問題の解答を記入せよ
     1. HTMLの背景色を表す属性は？
     2. テーブルタグで行を表すものは？
     3. aタグ、imgタグ、olタグのうち終了タグが必要ないのは？
     4. 外部スタイルシートに用いられる拡張子を3文字で記述せよ
     5. スタイルシートの属性と値の間に用いられる記号をカタカナ3文字で記述せよ
5. テーブル （見出し2で「問5.テーブル」と見出しを作りその下に）
   • 下記完成サンプルのようなテーブルを作成すること（borderのサイズは1で）
     1. 基本的なテーブル
     2. 行の結合したテーブル（横幅200ピクセル）
     3. 行と列が結合したテーブル（横幅200ピクセル）
6. CSSインラインスタイルシート
   • ページ上部「HTML試験」の＜h1＞にstyle属性を用いてCSSで色を赤に、水平揃えを中央揃えに指定せよ
7. 埋め込みスタイルシートと表示効果のないタグとclass属性を用いて以下の指定を実現せよ
   • ページ上部＜ｈ1＞「HTML試験」の「HTML」部分だけを改行せずに緑色にする
     • class名はmidoriとし、スタイルはヘッダ部分に記述すること
8. 背景画像
• ブックマーク等を利用しインターネット上から自由なテーマでメインイメージ用の画像を探しコピー
  • fireworksで幅750ピクセル高さ200ピクセルの書類を作成しペーストし、画像をトリミングする
  • 最適化パネルで最適化をjpegにし、test.jpgでtestフォルダへ書き出し
• ヘッダ部分にh1を幅750px高さ200pxに指定し、作成したtest.jpgを背景画像として指定する
9. 擬似クラス （見出し2で「問9.擬似クラス」と見出しを作りその下に）
• 「2月の授業日記」と記述し、diaryフォルダの2.htmlへテキストリンクを張る
10. 外部スタイルシート
• リンクタグでdiary.cssにリンクさせこのページのh2全てに背景色を表示させる
• diary.cssに記述し、このページおよび、diaryのすべてのページでリンク部分のカーソルの上にマウスが乗ったら任意の色に色が変わるように指定せよ
11. ページをボックスに入れる
• ページ全体を「box」という名前のclassで括り、幅を750pxでセンタリングさせる指定をヘッダ内に記述
12. 自由課題
• 1.と同様にkozo.htmlを別名保存しtestフォルダ内にfree.htmlとしタイトルとh1でタイトルを記述
• 1０.と同様にリンクタグでdiary.cssにリンクさせる
• 11.と同様にページ全体を「box」という名前のclassで括り、幅を750pxでセンタリングさせる指定をヘッダ内に記述
• その下に2.で作成したトップへのリンクボタンをコピーする
• 8.と同様にテーマに沿った画像を探しfireworksの幅750px高さ200pxの書類にペースとしてトリミングし、free.jpgで testフォルダへ書き出し
• 8.と同様にh1を幅750px高さ200pxに指定し、free.jpgを背景画像として指定する
• h2で見出しを立て自由な内容でページ作成
• test.htmlに戻り、h2で「問9.自由課題」と見出しを立てその下に自由課題ページへと記述し、free.htmlへリンクさせる
13. 感想
• test.html　に＜ｈ2＞で「きょうのひとこと」と見出しを作りHTMLを学んだ感想を入れる
14. ファイルのアップロード
    • 必要なファイルをすべてサーバーにアップロードしブラウズ出来るか確認する
    • 授業中作成したページの未完成部分があれば完成させる

解答例(test.html)

自由課題(free.thml)