情報コミュニケーション入門 b HTML による Web ページ作成の練習 : 応用編 この応用練習は, 余力のある人だけ取り組めばよい ただし, 最終頁は全員確認してお くこと 効果的な表現のための工夫一般に, 文章のみの Web ページは単調になりやすいため, 適宜小見出しを入れたり, 箇条書きや図表を駆使して, 印象的なデザインを工夫する 基本的な表現方法は HTML 辞書などに頼らなくても利用できるようにマスターしておいたほうがよい 箇条書き ( 番号付き ) 番号付きの箇条書きを表現するには,<OL>~</OL> を用いる 各項目は <LI> で始める (</LI> で挟んでもよい ) <h1> 番号付き箇条書きの例 </h1> <ol> <li> 最初の項目 <li>2 番目の項目 <li> 最後の項目 </ol> 図 1 番号付き箇条書きの HTML 文書例 番号は, 自動的に 1.,2. のようにカウントアップされる アラビア数字の代わりにロー マ数字などを使いたい場合には, 表 1 のように <OL> タグに属性指定 type= を加える <ol type= 1 > <ol type= i > <ol type= I > <ol type= a > <ol type= A > 表 1 OL タグにおける TYPE 属性の指定方法 ( 省略時の標準 ) 番号をアラビア数字で, 1, 2, 3 のように表示させる 番号をローマ数字小文字で, i, ii, iii のように表示させる 番号をローマ数字大文字で, I, II, III のように表示させる 番号を英小文字で, a, b, c のように表示させる 番号を英大文字で, A, B, C のように表示させる また, 番号を途中から始めたい場合には, 属性指定 start= を加えて,<ol start= 3 > のよ うに指定する 箇条書き ( 番号なし ) 番号なしの箇条書きを表現するには,<ul>~</ul> を用いる 各項目は <li> で始める (</li> で挟んでもよい ) 1/8
2011.07.06 <h1> 番号なし箇条書きの例 </h1> <ul> <li> 最初の項目 <li>2 番目の項目 <li> 最後の項目 </ul> 図 2 番号付き箇条書きの HTML 文書例 項目の先頭には, 自動的に のような黒丸記号が表示される これ以外の記号を用いる には, 表 2 のように <ul> タグに属性指定 type= を加える <ul type= disc > <ul type= square > <ul type= circle > 表 2 UL タグにおける TYPE 属性の指定方法 ( 省略時の標準 ) 記号を黒丸 で表示する 記号を四角 で表示する 記号を白丸 で表示する 箇条書きの入れ子 箇条書きは,2 つ以上を入れ子の状態で使うことも可能である ブラウザの種類にもよ るが, 内側の箇条書きは右側にインデントされて表示される <h1> 入れ子で使った箇条書きの例 </h1> <ul> <li> 外側の最初の項目 <ul> <li> 内側の最初の項目 <li> 内側の2 番目の項目 </ul> <li> 外側の2 番目の項目 <li> 外側の3 番目の項目 </ul> 図 3 入れ子で使用した箇条書きの HTML 文書例 表文章を線で囲んだり, 項目ごとの一覧にまとめたい時は,<TABLE>~</TABLE> を用いて表形式で表現する 各行は,<tr>~</tr> ではさみ, さらのその内部で各列を <td>~ </td> ではさんでおく テキストだけでなく,<img> タグを用いて埋め込み画像を行列状 2/8
情報コミュニケーション入門 b にレイアウトしたい時にも利用できる <h1>table タグによる魔法陣 </h1> <table border= 1 > <tr><td>2</td><td>7</td><td>6</td></tr> <tr><td>9</td><td>5</td><td>1</td></tr> <tr><td>4</td><td>3</td><td>8</td></tr> </table> 図 4 <TABLE> で表現した魔法陣の HTML 文書例 図 4は, 数値を行列風にまとめて魔法陣を表現したものである 境界線 ( 罫線 ) の幅は border 属性で指定する 罫線が不要な時は, 何も指定しないか,border= 0 を指定する 表全体を一定の幅にしたい時は,width 属性で, 数値 ( ピクセル = 画素単位の幅 ) か, 表示画面全体に対する百分率を指示する 特定の列だけ幅を指定する時は,<td> に width 属性を指定すればよい その他, 色分けされた表に仕立てるには,<td> タグにおいて,bgcolor= 属性を用いる 値は, 色の名前か,# に続けた 6 桁の 16 進数値で RGB の値を指定する その他, 整列のオプションも指定できる 表 3 <TD> タグのオプション属性 属性 属性名 値の形式 意味 " 色の名前 " "red","green" など 2 桁を 1 セットとし,00~FF までの 16 進 背景色 bgcolor "#6 桁の 16 進数値 " 数値で色の強さを指定する 最初の 2 桁が Red, 次の 2 桁が Green, 最後の 2 桁が Blue に対応する "left" 左寄せ 水平方向の整列 align "center" 中央寄せ "right" 右寄せ "top" 上寄せ 垂直方向の整列 valign "middle" 中央寄せ "bottom" 下寄せ フレームを用いた Web ページ フレームを用いると, ひとつのウィンドウ内に複数の Web ページを同時に表示させるこ とができ, 目次付きのプレゼンテーションなどを容易に実現できる 3/8
2011.07.06 フレームと Web ページとの関係 図 5 に, フレームを用いた Web ページの概念を示す 図 5 フレームを用いた Web ページの概念 ポイントは, 元になるファイルと,Web ページの内容そのものを示すファイルとを分割することである 元になるファイルには,HTML 文書の BODY 部の代わりに,<frameset> ~</frameset> を記述し, 画面の分割の方向 数 幅を指定する 分割された個々の部分には,<frame> タグによって, フレームの名前 ( 別の Web ページを特定の場所に表示させる際の目印となる ) を name 属性で指示し, さらに src 属性で最初に呼び出す Web ページのファイル名あるいは URL を指示しておく 図 5の例では,<frameset> によって, 画面を水平方向に 2 つのフレームに分割し, それぞれのフレームの幅を画面幅の 20%,80% に指定してある さらに続けて,<frame> によって,( 記述してある順に, 左から右に向かってのそれぞれのフレームの指定を行うことになる ) それぞれ,toc,body という名前をフレームに与え, それぞれ最初に表示させる Web ページを mokuji.html,top.html と指示してある <frameset> は入れ子にすることも可能で, 例えば, 図 6のようなフレームに分割するには, 図 7 のような指示をすればよい 図 6 やや複雑なレイアウトのフレーム 4/8
情報コミュニケーション入門 b <frameset rows= 15%,85% > <frame name= header src= header.html > <frameset cols= 20%,80% > <frame name= toc src= toc.html > <frameset rows= 80%,20% > <frame name= body src= body.html > <frame name= footer src= footer.html > </frameset> </frameset> </frameset> まず, 全体を上下に 2 分割下側のフレームをさらに左右に 2 分割さらに, 右側のフレームを上下に 2 分割 図 7 図 6 に対応するフレームの定義例 アンカー指示の注意フレームを用いたプレゼンテーション内にアンカーを記述する時は, どのフレームに表示させるかを明示する必要がある <a> タグに target 属性でフレームにつけた名前を指定すればよい なお, フレームを解除して画面全体に表示させる時は, フレーム名を _top とし, 別のウィンドウに表示させる時はフレーム名を _blank とする 練習 ここまでの内容を実際の例で確認してみよう 以下, 練習 8 で使用した z: webpage フォ ルダ内に,HTML ファイルを作成していくことにする 手順 1 適当なフォルダを z: ドライブ上に作成しておく ( マイコンピュータ z: ドライブ, と開き, 右クリックで 新規作成 フォルダ と選択, 新規フォルダ を適当な名前( たとえば myweb) に変更する ) なお, 練習 8および練習 9を行っていれば, すでに存在しているはずなので改めて作成する必要はない 手順 2 作成したフォルダを開いたら, 表組みの例を mahoujin.html というファイル名で作成してみよう テキストエディタ ( メモ帳など ) を起動した後, 以下の内容を入力し, 名前を付けて保存 でファイルの種類を すべて (*.*) にした後, mahoujin.html という名前 ( すべて半角文字 ドット. を抜かさないこと ) で保存する 5/8
2011.07.06 <head><title> 表を使った表現例 </title></head> <body> 魔方陣 <table border="1"> <tr><td>2</td><td>7</td><td>6</td></tr> <tr><td>9</td><td>5</td><td>1</td></tr> <tr><td>4</td><td>3</td><td>8</td></tr> </table> </body> 図 8 mahoujin.html の内容 手順 3 以下, 同様に, 図 9~ 図 11 のファイルを作成し, それぞれ保存しておく <head><title> 目次 </title></head> <body> <h2> 目次 </h2> <ul> <li><a href="naiyou.html" target="body"> トップページ </a> <li><a href="mahoujin.html" target="body">table を用いた魔方陣の表現 </a> </ul> </body> 図 9 mokuji.html の内容 <head><title> トップページ </title></head> <body> <h2> トップページ </h2> フレームを用いると, ひとつのウィンドウ内の上下左右に異なるページを表示させることが可能になります </body> 図 10 naiyou.html の内容 6/8
情報コミュニケーション入門 b <head><title> フレームを使ったレイアウト例 </title></head> <frameset cols="20%,80%"> <frame name="toc" src="mokuji.html"> <frame name="body" src="naiyou.html"> </frameset> 図 11 framepage.html の内容 手順 4 すべて作成して保存し終えたら,framepage.html をブラウザで開いてみよう ( エクスプローラ上などでダブルクリックしてもよい ) 図 12 のように表示されたら成功である 左側の 目次 フレームのアンカーを使って, 適宜フレームの内容が切り替えられることを確認してみよう 内容を修正する場合は, メモ帳を起動した後, 開く で ファイルの種類 を すべて (*.*) にしておいてから読み込む 図 12 framepage.html( フレーム付きの Web ページ ) の表示例 実習課題 4 の応用課題 ( 加点対象の部分 ) も, 今回の手順に準じて作成すれば, さほど 難しいものではないので, 余裕のある人はこなしておきましょう 7/8
2011.07.06 練習 8 練習 9のメールでの添付手順できあがった Web ページをメールで添付するときは, その構成ファイル (*.html,*.png など ) をすべて添付しないと, 完全ではない 複数のファイルをそれぞれ添付するのはメンドウなので, このような場合, 以下の手順で, フォルダとそこに含まれるすべてのファイルをひとつのファイルにまとめる ( まとめられたものを一般にアーカイブと呼ぶ ) ことができる エクスプローラで, 作品の入ったフォルダが見えている状態にし, 当該のフォルダ上で右クリックし, 図 13 のように, 圧縮 (Zip 形式 ) フォルダに送り込むと, 自動的にアーカイブに変換したファイルが生成される ファイルの名前は, 元のフォルダ名に.zip という拡張子が付される 図 13 ZIP 形式のアーカイブの作成手順 ( 右クリックして表示されるメニュー内容は, 実習室で行う場合, 若干異なります ) メールでの添付ファイルは, 元のフォルダ名に.zip がついたファイルのみを指定すれば, すべてのファイルをまとめて送信できる 元のフォルダの内容を変更した場合, 圧縮ファイルの内容は自動的には更新されないので, 圧縮ファイルを削除してから, 手順をやり直す必要がある メールの添付ファイルの状態から内容を開こうとしてもムダなので, 圧縮ファイルが正しい状態かどうかは, いったん別のフォルダに圧縮ファイルを保存して, その場所で 展開 ( あるいは 解凍 ) させてから確認すること 8/8