プログラミング 授業計画2
ページ選択
Page1
/Page2/
Page3
USBメモリに設定したWebkisoフォルダから、エディタを起動し準備する。
HTML基礎編 ブロック要素
を参照して、ブロック要素とは何かについて理解した上で、資料に従いren04.htmlファイルを作成せよ。
作成したren04.htmlファイルを編集し、hrタグにwidth属性、size属性、align属性を追加し、それぞれ50%、10、centerを設定せよ。回答例は以下。
さらにren04.htmlファイルを編集し、ページに含まれる「ニュータイプ」の文字を赤字に変更せよ。前回の内容を思い出しブロック要素とインライン要素の違いを意識すること。インライン要素はブロックレベル要素の中に入り、入れ子になる。回答例は以下(修正は3か所)。
ニュータイプ
HTML基礎編 リスト
を参照して、リストの設定方法を確認し、資料に従いren05.htmlファイルを作成せよ。
作成したren05.htmlファイルを編集し、ページタイトルを「プログラミングのページ」に修正せよ。回答例は以下。
プログラミングのページ
さらにren05.htmlファイルを編集し、ページの本文の大見出しとしてページの先頭に「プログラミングを学ぼう」と表示せよ。大見出しのタグを設定すること。回答例は以下。
プログラミングを学ぼう
同様にren05.htmlファイルを編集し、「プログラミング学習の5カ条」と「プログラミングの重要用語」に中見出しタグを設定せよ。回答例は以下(1つのみ)。
プログラミング学習の5カ条
HTML基礎編 テーブル
を参照して、テーブル(表)のタグについて確認し、資料に従いページを作成せよ。
HTML基礎編 その他
を参照して、オーディオ機能、ボタンの設置、コメントタグについて確認し、資料に従いページを作成せよ。
完了したら[名城公園キャンパスフォルダ]-[management]-[hayashi]-[tue4]-[report]の自分のフォルダに作成したファイルを提出して下さい。
スタイルシート編
CSS基礎編 CSSとは
を参照して、CSSとは何か、HTMLとの関係はどのようなものかについて確認せよ。
CSS基礎編 基本の書き方
を参照して、まずは、CSSの基本的な書き方までを確認せよ。(セレクタの指定方法以下は後で確認)
CSS基礎編 CSSの適用
を参照して、HTMLにスタイルシートを適用する3つの方法について確認し、特に外部ファイルから適用する方法が重要なことを理解せよ。またCSS適用の優先順位についても確認せよ。
CSS基礎編 CSSファイル
を参照して、テンプレCSS「temp.css」を作成せよ。また、ひな形HTMLを修正し「hina2.html」を作成せよ。
CSS基礎編 文字のスタイル
を参照して、演習ファイルの編集を通じて、文字のスタイル設定について確認せよ。
CSS基礎編 基本の書き方
を今一度確認し、セレクタの指定方法とコメントのつけ方について確認せよ。
CSS基礎編 文章のスタイル
を参照して、演習ファイルの編集を通じて、文章のスタイルの設定方法について確認せよ。
ren11.htmlとren11.cssを編集しているTerapadを閉じ、エクスプローラでこれらのファイルをコピーして、test11.htmlとtest11.cssを作成、Terapadで開いて編集できるようにせよ。またtest.htmlはブラウザでも開いて確認できるようにせよ。
test11.cssを編集し、大見出しh1に対し、文字色をオレンジで、下線をつけよ。また、段落pに対し、文字サイズを0.8倍にせよ。
test11.cssを編集し、段落pに対し、行間を1.2に変更し、両端揃えに設定せよ。
CSS基礎編 背景関連
を参照し、「ren11.html」と「ren11.css」を編集して、背景色、背景画像の設定などについて確認せよ。
CSS基礎編 ボックスモデル
を参照し、「ren11.html」と「ren11.css」を編集して、ボックスモデルの考え方や操作方法について確認せよ。
完了したら[名城公園キャンパスフォルダ]-[management]-[hayashi]-[tue4]-[report]の自分のフォルダに
ren11
.htmlと
ren11
.cssファイルを提出して下さい。
ページ選択
Page1
/Page2/
Page3
page bottom
page top