情报Aプリント⑩ kamon.jp.doc

高等学校「情報Ａ」実習プリント⑩ Ｗｅｂページのしくみを知ろう！ ＜　ねらい　＞ 　１．Ｗｅｂページのしくみを理解する 　２．Ｗｅｂページのプログラム言語であるＨＴＭＬ言語の基本を体験する ＜　準　備　＞ 　１．個人フォルダの中に「Web」（半角）というフォルダを作る。 　　　作った「Web」フォルダの中に「Page1」「Page2」というフォルダを作る。 　２．プログラムから「メモ帳」を起動させる。 ※「スタート」→「プログラム」→「アクセサリ」→「メモ帳」 ＜　実　習　＞ 　１．半角英数字で以下の枠の内容を入力する。（右はその意味） 　 ←ここからHtmlのプログラムという宣言 　　　　　　　　　　　　　　　　　　　←このページのタイトルを定義、ここでは「page1」 　　　　　　　　　　　　　　　　　　　←ここからが本文 　　　　　　　　　　　　　　　　　　　←本文の終わりの宣言 　　　　　　　　　　　　　　　　　　　←これでプログラムは終わりという宣言 ２．名前「01.htm」（半角）とつけて、「Page１」フォルダに保存する。 ３．本文を入力し、編集する。 （１）背景の色を好きな色に変える 　　①bodyをbody bgcolor=”red”とうちかえる。（注意　半角） 　　②”red”の部分を違う色に変えてみる 　　　※色見本教科書P141にあり、”#（教科書の記号）”で入力する。 （２）本文を入力する。 　　①先ほどの後ろに「今日は木曜日です！明日は金曜日です！あさっては土曜日です！」と日本語入力します。 （３）改行する 　①入力した文章の後ろにbrと入力する。 　　　今日は木曜日です！br明日は金曜日です！brあさっては土曜日です！ （４）本文の文字の色や大きさを変える。 　　①「明日は金曜日です！」の前後に以下のことばを入力する 　　　font color=”white”明日は金曜日です！/font　 　②”white”の部分を違う色に変えてみる 　　③「あさっては土曜日です！」の前後に以下のことばを入力する。 　　　font color=”white” size=”7”あさっては金曜日です！/font　 　　④”7”の数字を１～7の間で変えてみる。 （５）区切り線を入力する。 　　①本文のあとにhrと入力する ４．２ページ目に自己紹介のページを作ります。 （１）メモ帳で「ファイル」→「新規作成」で新しいページを開く （２）１．の内容を入力し、「02.htm」の名で「Page２」のフォルダに保存する （３）１ページ目の内容を参考に自己紹介のページを作成する ５．「Page1」と「Page2」をハイパーリンクでつなぎます。 （１）１ページ目の本文の最後に次の文章を入力する 　a href=”../Page2/02.htm”紹介ページへ/a （２）２ページ目の本文の最後に次の文章を入力する 　a href=”../Page1/01.htm”紹介ページへ/a 　 ＜　発　展　＞ ?学校のＷｅｂページを表示し、「表示」→「ソース」で見てみよう！ 高等学校「情報Ａ」実習プリント⑩-2 　Ｗｅｂページのしくみを知ろう②　 ＜　ねらい　＞　 １．Ｗｅｂページをソフトを使って簡単に作成する方法を学習する。 ＜　準　備　＞ １．サーバーの個人フォルダの中に「Web２」フォルダを作成 ２．「ホームページビルダー」を起動する 　　※「どこでも配置モード」になっていることを確認して「ＯＫ」を押す 実習：「自己紹介のページ」を作成しながら、操作法を理解する ＜　操　作　＞ （１）背景?文字の色を設定する。 ①　一番上の「書式」ボタンの上で左クリック。 ②　一覧の中から「背景」を選ぶ（左クリック）→「背景」ダイアログが表示される。 ③「カラーギャラリー」を左クリックし、背景と文字の組み合わせをえらぶ。 ④　決まったら「ＯＫ」の上で左クリック、②の画面へ戻りもう一度「ＯＫ」をおす。 　　　　　　　　　　　　　　　　　　　　　　　　　　→これで背景と文字の色が変わる。 （２）ロゴを作成する。 ①　画面上の　　ボタンの上で、左クリック。 ②　キーボードの「半角」ボタンを押して、日本語入力モードとする。 ③　Logoのもととなる文字を入力し、Logoのタイプをサンプルから選ぶ。 ④　文字サイズをマウスで動かし「36ポイント」とし、最後に「ＯＫ」ボタンを左クリック。 （３）水平線をロゴの下に引く ①　画面の　「水平線」のマークの上で、左クリック。 ②　そのままマウスをシート上に持っていき、線を引きたい場所の上で左