ゼミII実習


ゼミIIで使用しているテキストがあります

動的Webページ作成(その1)演習の準備、そもそも静的Webページとは


これからWebページを動的に作るということについて考えていきます。

まず、復習として静的なページから作っていきましょう。静的なWebページとはHTMLなどのタグを使いあらかじめ用意されたWebページのことを指します。これに対し動的なWebページとはWebページにアクセスした時にプログラムなどにより作られるページを指します。

これから作るWebページのために下のリンクを右クリックしてkyouzai2006.lzhをダウンロードしてください。ダウンロードしたファイルは解凍しておきます。

2006kyouzai.lzh

次のHTMLのプログラムをテキストエディタを使って入力してください。入力したらとりあえずHドライブにwcup1.htmとして保存してください。

<html>
<head>
<title>
WorldCup2006
</title>
<style type="text/css">
<!--
body{background-color:#ffffff;margin-left:10%;margin-right:10%}
#content{
  margin: 0;
  padding: 3% 3% 0 0;
  color: #333333;
  line-height: 1.166;	
  font-size: 80%;
  font-family: Arial,sans-serif;
}
#tf{
  margin: 3% 0 0 5%;
  border-bottom: 1px solid #cccccc;
}
#bb{
  margin: 0 0 0 5%;
  border-bottom: 1px solid #cccccc;
}
#bf{
  margin: 0 0 0 5%;
}
div td{
  font-size: 80%;
  font-family: Arial,sans-serif;
}
-->
</style></head>
<body>
<div id="content">
<center>
WorldCup2006参加国一覧
</center>
<br>
グループA
<div id="tf">
<table>
<tr>
<td width="150"><img src="thumb_nail/GER_tn.png"></td><td>ドイツ</td>
</tr>
</table>
</div>
<div id="bb">
<table>
<tr>
<td width="150"><img src=""></td><td>コスタリカ</td>
</tr>
</table>
</div>
<div id="bb">
<table>
<tr>
<td width="150"><img src=""></td><td>ポーランド</td>
</tr>
</table>
</div>
<div id="bf">
<table>
<tr>
<td width="150"><img src=""></td><td>エクアドル</td>
</tr>
</table>
</div>
</div>
</body>
</html>

今、作ったwcup1.htmの動作をApache Webサーバを使って確認します。

まず、毎回Cドライブに保存されたファイルは再起動後消去されるので、これから行う操作は毎回行うようにしてください。

C:\Program Files\Apache Group\Apache2\htdocsのフォルダにHドライブに保存したwcup1.htmをコピーします。Apache2でなくApacheかもしれません。

同様にして同じhtdocsフォルダに先ほど解凍したファイルのうちthumb_nailフォルダもコピーしておきます。

スタート>すべてのプログラム>ネットワークツール>Apacheの順にクリックします。

タスクバー右下にApacheのアイコンが出ます。クリックして出てきたメニューでstartをクリックしてApacheサーバを起動します。

インターネットエクスプローラを起動します。メニューのファイル>開くで次のURLを入力するか、アドレスのところで入力してwcup1.htmの表示を確認します。

http://localhost/wcup1.htm

以下の練習では2006kunihata.txtに国旗と国名の情報が入っています。thumb_nailフォルダに入っている画像はこの画像ファイルの国名のところに_tnがついたものになっています。

練習1.グループAの部分は未完成なので完成させてください。

練習2.グループBからHまでの表も作ってください。