楽しい「情報」演習 第４回（５回連載）
〜ＨＴＭＬの基礎と自己表現〜神奈川県立川崎北高等学校
■ はじめに
柴田 功
isao@johoka.net
http://www.johoka.netホームページ作成ソフトを使うとワープロ感覚で簡単にホームページを作成できますが、自分でサイトを管理するようになるとＨＴＭＬの基礎知識は必ず必要になります。ホームページの舞台裏といえるＨＴＭＬを知っておくことは決して無駄ではないと思います。この演習では、ホームページ作成ソフトを使わずに、メモ帳にＨＴＭＬタグを直接打ってホームページ作成する基本的な演習をします。■ ＤＡＴＡ
２年生必修科目「情報Ａ」（１学年１単位、２学年１単位、計２単位）■ 準備
４０人に４人のティームティーチングによる指導
生徒用パソコン教室PC40台
ソフトウェア Windows98SE、Office2000、IBMホームページビルダー2001
サーバ WindowsＮＴ4.0
第１週 動機付け、自己紹介文、ＨＴＭＬの基礎
第２週 ＨＴＭＬの活用（背景色、文字色、リンク、表、箇条書き）授業で作成した生徒のWebページをインターネットで公開するのか、それとも校内ＬＡＮだけの公開に留めておくのかによってWebページの内容はかなり異なってきます。今回の授業はクラス替えの直後ということもあり、校内ＬＡＮだけの公開で、自己紹介を目的としたWebページを作成し、クラス、氏名、部活動、出身中学などの個人情報の掲載は個人の自由としました。ＨＴＭＬファイルとＧＩＦファイルはサーバの共有フォルダに保存させる方法をとったのでＦTPなどの作業を省略できましたが、保存するサーバ内に生徒人数分のフォルダの作成をしたり、アクセス権を設定したり（バッチファイルで処理）、TOPページを作成したりと準備に苦労しました。■ 演習（１） Webページの舞台裏を覗いてみようまずはブラウザで好きなページを表示させ、そのページのソースを見ることでWebページがＨＴＭＬという言語でできていることを理解させました。ところどころ、読むことができる日本語の部分と< >で囲まれたタグを確認できます。■ 演習（２） メモ帳でHTMLタグを入力してみよう
Windowsの「アクセサリ」にある「メモ帳」を起動し、右図のように入力します。■ 演習（３） タイトル、本文で自己紹介してみよう<TITLE>と</TITLE>の間にそのページタイトル、<BODY>と</BODY>の間には全角文字でそのページの本文を入力します。時間に余裕のある人はどんどん自己紹介文を入力していました。更新はこの後も続けていきますが、ここでいったんサーバに保存します。保存先は本人と先生はフルアクセス、他の生徒は読みとり専用とし、友だちのページを間違って上書きしないように工夫しました。■ 演習（４） 友だちのページを閲覧してみよう
自分の自己紹介のページがひとまず完成したら、クラスの友だちのページを開いてみます。右の図のようなＴＯＰページから学年全体の友だちのプロフィールを読むことができるようになりました。何人かが友だちのページを読み始めると、クラス全体が自分のページの作成よりも友だちのページを見る方に夢中になってしまいますが、それもこちらのねらいでもありました。友人のページをみてようやく、Webページは情報の中身が大切であることに気がつくようです。１週目の授業はこのあたりで終了です。■ 演習（５） ソースを表示し更新しよう２週目の授業の最初は、友だちのページを見ることから始めましたが、１週間で他のクラスのページが更新されていることに気がつきます。デザイン的にも工夫したページを発見すると、更新したいというモチベーションが上がってきます。ブラウザで自分のページを表示させ、そのソースを開いて編集を開始します。基本的なタグ一覧を参考にして、箇条書き、表組、画像貼りつけなど、ホームページを更新していきます。■ 演習（６） 背景色、文字色を付けよう
Web作成での色は機種に依存しないWebセーフカラー２１６色を使います。■ 演習（７） ハイパーリンクを作ろう
例）白＝＃FFFFFF、赤＝＃FF0000、緑＝＃00FF00、青＝＃0000FF
<body bgcolor="#00ff00">
生徒にとって６桁の数字を変えると背景色が変わることが不思議なようで、何度も何度も背景色をタグで変えている姿が多く見られるようになりました。この演習で色のデジタル化を実感します。余裕のある生徒は、自分で２ページ目を作り、ハイパーリンクを貼りつけます。友だちのページやＴＯＰページに戻るリンクを貼る生徒も現れました。■ まとめ・評価評価の方法として、生徒の自己評価、相互評価が考えられますが、本校では、情報Ａの授業担当者全員が、全生徒の作品を評価しました。その平均を中心に決めています。評価の観点は以下の通りにしました。■ 最後に
- 情報の内容〜本文
- Webページのデザイン〜配色、レイアウト
最近は、ＨＴＭＬを知らなくてもWebページを作ることはできますが、Webページのしくみを知る上でも一度はＨＴＭＬのタグを直接打ってWebページを作る体験をさせたい思っています。また、この演習以外にインターネットに公開するWebページを作成させる演習を行って、情報モラルの観点も評価する機会が必要と思いました。
