<h1> 番号なし箇条書きの例 </h1> <ul> <li> 最初の項目 <li>2 番目の項目 <li> 最後の項目 </ul> 図 2 番号付き箇条書きの HTML 文書例項目の先頭には, 自動的にのような黒丸記号が表示されるこれ以外の記号を用いるには, 表 2

Size: px

Start display at page:

Download "<h1> 番号なし箇条書きの例 </h1> <ul> <li> 最初の項目 <li>2 番目の項目 <li> 最後の項目 </ul> 図 2 番号付き箇条書きの HTML 文書例項目の先頭には, 自動的にのような黒丸記号が表示されるこれ以外の記号を用いるには, 表 2"

のぶみつこしの
5 years ago
Views:

1 情報コミュニケーション入門 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

2 <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

3 情報コミュニケーション入門 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

部の代わりに,<frameset> ~</frameset> を記述し, 画面の分割の方向数幅を指定する分割された個々の部分には,<frame> タグによって, フレームの名前 ( 別の Web ページを特定の場所に表示させる際の目印となる ) を name 属性で指示し, さらに src 属性で最初に呼び出す Web

4 フレームと 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

5 情報コミュニケーション入門 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

6 <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.

7 情報コミュニケーション入門 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,*.

8 練習 8 練習 9のメールでの添付手順できあがった Web ページをメールで添付するときは, その構成ファイル (*.html,*.png など ) をすべて添付しないと, 完全ではない複数のファイルをそれぞれ添付するのはメンドウなので, このような場合, 以下の手順で, フォルダとそこに含まれるすべてのファイルをひとつのファイルにまとめる ( まとめられたものを一般にアーカイブと呼ぶ ) ことができるエクスプローラで, 作品の入ったフォルダが見えている状態にし, 当該のフォルダ上で右クリックし, 図 13 のように, 圧縮 (Zip 形式 ) フォルダに送り込むと, 自動的にアーカイブに変換したファイルが生成されるファイルの名前は, 元のフォルダ名に.zip という拡張子が付される図 13 ZIP 形式のアーカイブの作成手順 ( 右クリックして表示されるメニュー内容は, 実習室で行う場合, 若干異なります ) メールでの添付ファイルは, 元のフォルダ名に.zip がついたファイルのみを指定すれば, すべてのファイルをまとめて送信できる元のフォルダの内容を変更した場合, 圧縮ファイルの内容は自動的には更新されないので, 圧縮ファイルを削除してから, 手順をやり直す必要があるメールの添付ファイルの状態から内容を開こうとしてもムダなので, 圧縮ファイルが正しい状態かどうかは, いったん別のフォルダに圧縮ファイルを保存して, その場所で展開 ( あるいは解凍 ) させてから確認すること 8/8

<4D F736F F D A957A A A8FEE95F18F88979D DEC90AC E646F63>

<4D F736F F D A957A A A8FEE95F18F88979D DEC90AC E646F63> 情報処理 C (P.1) 情報処理 C (2011 年度 ) ホームページの作成 http://open.shonan.bunkyo.ac.jp/~ohtan/ テキストエディタ ( メモ帳 TeraPad など ) でHTMLファイルを作成する HTML(Hyper Text Markup Language ) ホームページを記述するための言語のことテキストエディタの起動 (TeraPad の場合

<h1> 番号なし箇条書きの例 </h1> <ul> <li> 最初の項目 <li>2 番目の項目 <li> 最後の項目 </ul> 図 2 番号付き箇条書きの HTML 文書例 項目の先頭には, 自動的に のような黒丸記号が表示される これ以外の記号を用いる には, 表 2

<h1> 番号なし箇条書きの例 </h1> <ul> <li> 最初の項目 <li>2 番目の項目 <li> 最後の項目 </ul> 図 2 番号付き箇条書きの HTML 文書例項目の先頭には, 自動的にのような黒丸記号が表示されるこれ以外の記号を用いるには, 表 2