ゼミI実習


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

HTML実習(その2)画像の扱いと表


前回の復習から始めてみましょう。

練習1.ezHTMLを使用して、新規にindex.htmのファイルを用意しなさい。このファイルではまだタグを使ってプログラムを書く必要はありません。用意できたら、保存しておきましょう。前回のファイルが残っている場合には上書きしておいてかまいません。操作を忘れた方は前回のテキストを参考にしてください。

できたファイルを一度ブラウザで確認してみましょう。何も表示されませんが、それで大丈夫です。

ezHTMLのプログラム入力部分(以降エディタとします)の左側に三つタブがあります。タグ解析をクリックしておきましょう。

エディタ部分でbodyタグをクリックしておきます。するとタグ解析のウィンドウにbodyと表示されます。この状態でbodyタグの属性を設定することができます。

タグ解析ウィンドウの属性のところをクリックします。何か選択できるような画面になります。下三角印をクリックすると属性のリストが現れるのでbgcolorを選択してください。エンターキーを1回たたくとエディタにこの属性の名前が入ります。

次にこの属性bgcolorの右側の属性値のところをクリックします。...のボタンが現れるのでクリックします。色を選択できる画面になるので適当に選んでみましょう。また、色選択のウィンドウの上部にはアイコンが並んでいます。パレットのアイコンを使うとさらに細かい色の設定を行うことができます。

適当な色を選択してクリックするとその色の16進で表現された値が入ります。この16進の値は#で始まり、左から2桁ずつで赤、緑、青の成分を表現しています。FFとした場合その成分がもっとも強く出てきます。

色を選択後エンターキーを1回たたくと、エディタに先ほど入力された属性に対し今選択した値が設定されます。

上書き保存してから、どのように表現されるか確認してください。

次に画像を用意してみましょう。ペイントを起動してみてください。何か適当に絵を描きましょう。メニューの変形>キャンパスの色とサイズを使うと画像の大きさを調節することができます。

絵が完成したら、メニューのファイル>名前をつけて保存をクリックします。保存する場所はWebページを保存している場所を指定します。ファイル名は自分にとってわかりやすい名前をつけます。なるだけ半角英数字を使って名前をつけます。記号も使用することができます。

ファイルの種類ではPNG、GIF、JPEGの3種類から選んでください。今回はJPEGを選択しておきましょう。保存ボタンをクリックすると、ファイル名、例えばjpegtestとした場合、jpgが拡張子として加えられ保存されたファイル名はjpegtest.jpgとして保存されます。

bodyタグではさまれた部分に今保存された絵を表示してみたいと思います。次の操作を行ってください。

・bodyタグではさまれた部分をクリックする。
・標準タブに額縁の絵のようなアイコンが二つあるので右側のアイコンをクリックします。
・設定用のウィンドウが表示されます。
・イメージパスの右側に...のボタンがあるのでクリックするとファイルを選択する画面が現れます。 ・ファイルを保存しているフォルダを開くとさきほど保存したファイルjpegtest.jpgが表示されるのでこれをクリックして選択してから、開くボタンをクリックします。
・そうするとイメージパスの部分にファイルのある場所を示すパスが入力されます。
・その下には属性を設定するための項目が並んでいます。
・幅、高さ、代替テキストの部分にチェックが入っています。
・プレビューの下の部分にファイルの縦横の大きさ、およびファイルのサイズが表示されています。
・標準ではこの値が幅と高さの部分に入っています。
・もちろん、この値を変えると、ファイル自体の大きさは変わりませんがブラウザで表示する時に拡大、縮小の効果を与えます。
・もう一つ代替テキストでは、イメージの変わりに表示させるテキストを入力することができます。これは後で画像を用意する場合に便利です。
・ここに画像1と入力しておきましょう。
・属性の下の部分に画像を表示するためのimgタグが表示されています。imgタグは対で使用されないタグです。
・OKボタンをクリックすることでエディタにこのタグを表示することができます。

上書き保存してから、どのように表示されるか確認してみましょう。

次に表を作ってみましょう。表を作るにはtableタグ、trタグ、tdタグを組み合わせて使います。

ezHTMLを使えば簡単に作れるので試してみましょう。

次のような2行2列の表を作ってみます。

以下のようにして作っていきます。

・bodyタグではさまれた部分をクリックする。あらかじめエンターキーを1回たたいて空行を作ってからクリックするときれいにタグを挿入することができます。
・表タブの左から二つ目のアイコンをクリックします。
・レイアウトタブの設定用のウィンドウが表示されます。
・設定のところで縦に2、横に2を設定します。
・他にもいろいろ設定できますが、今回は他に何も設定しません。
・次にデザインタブをクリックします。
・枠線のところで枠線の太さを1に設定します。
・貼り付けボタンをクリックします。

<table border="1">
	<tr>
		<td></td>
		<td></td>
	</tr>
	<tr>
		<td></td>
		<td></td>
	</tr>
</table>

上記のようなタグが作られます。ところがこのままだと表で表示するものが入っていないので次のようにデータを書き加えます。

<table border="1">
	<tr>
		<td>A</td>
		<td>B</td>
	</tr>
	<tr>
		<td>C</td>
		<td>D</td>
	</tr>
</table>

上書き保存して、確認してみましょう。

ところで次のような表を作りたいことがあります。

A
C D

つまりもともと2行2列の表なのですが、1行2列として、1行目が2行目の2列にまたがるようにしたいのです。

以下のようにして作っていきます。

・この場合、まず1行目を一列にしますエディタでデータBの入っているtdタグを削除します。
・エディタの隣のタグ解析タブをクリックします。
・それからデータAの入っているtdタグをクリックします。
・属性でcolspanを選択しエンターキーを1回たたきます。
・隣の属性値を2に設定しエンターキーを1回たたきます。

colspanでまたがる列の数を指定しています。上書き保存して、確認してみましょう。

練習2.では一列目の一行がが二列目の二行にまたがるようにしてみましょう。rowspanを使用してまたがる行を指定することができます。

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

2006kyouzai.lzh

練習3.kyouzai2006フォルダの中の、kunihata.txtを参考にしながら、グループごとに国旗と国名の対応表を表示するWebページを作ってください。