簡単なホームページの作り方　第５回  　　　　　　

５、文字や画像などの表現方法（楽しいホームページを作ろう）

ここでは、講演会の簡単な案内文（チラシ）を参考にして文字や画像等の表現方法を
見てみよう。（参考：kmham211/kanda.htm）

以下は、ワープロ（一太郎）で作成したある講演会の案内文の骨子です。

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
　  商店街新年躍進講演会開催の 　・・・・・・・（１）
　　　　　　ご　案　内
（２）
　  　商店街の活性化とは何か 　　　　　　      ・・・・・・・・・・（３）
  ＝＝＝＝商店・商店街の発展のために＝＝＝＝
（２）
　　  　主催：尾西市商店街連合会
（２）
  謹啓　
      ・・・・・・・・・・・・・・・・・・・・・・・・・・・・
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　敬具
                                  記



講師の

写真




 
 日　時　平成１０年１月２１日（水）午後３時       （４）
 場　所　尾西市商工会館　２Ｆ　会議室            （４）
 講　師　〇〇　先生      　                    　   （４）
 聴講料　　　　無　料　　　　                　      （４）



（Ａ:写真説明など）

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

（１）は見出しです。文字の大きさは、<FONT SIZE=6 COLOR="#0000ff">で指定されて
　　　いるように　SIZE=6　であり、文字色は青色です。FONTのオプションとして文字
　　　の大きさや色を指定しています。

　　　（文字色については第４回参照及び付録のタグ・オプション一覧表を参照）
　　　（カラーテストも実験してください。）

（２）は罫線ですが、gazouディレクトリの中にある「line011.jpg」がここに挿入されて
　　　います。書式は以下の通りです。

　　<IMG SRC="gazou/line011.jpg" ALT="">　　　　　  　　　････････････（２）


（３）は文字色の指定で、ソースを見ると分かるように赤色です。
　　<FONT SIZE=5 COLOR="#ff0000"><B>商店街の活性化とは何か</B></FONT>

　　このように、文字の特徴を左側のタグで指定し、右側のタグで指定を解除します。

　　（参考：これらのタグはＨＯＴＡＬＬなどでは、指示に従って入力すれば、自動的に
　　　付けられます。また、文字色も書式欄などから簡単に指定できます。）

　　　（文章の回り込み）
（４）は、講師の写真画像の右回りに講演会の日時、場所等を回らせています。
　　画像が文字の左側にくるようにするには、以下のようにします。（参考:尾西まつり）

　　<IMG SRC="datagazou/kanda.gif" ALT="" ALIGN=LEFT>    ････････････（５）

　　　（画像を指定するIMGタグについてはオプションが多数あるので、付録参照）

 　LEFTとあるところをRIGHTとすれば、写真が右側にきます。(kanda2.htm)参照。


　　又、写真等のイメージを貼り付けるには（２）や（５）のような書き方をします。
　　この場合は、datagazouにあるkanda.gifという講師の写真を表示させています。

　　（注：写真などをイメージスキャナで読み込んで、画像編集ソフト等で適当な大きさ
　　　等に加工して、あらかじめ　ディレクトリ（/datagazou）に入れておきます。）
　　　

　　さらに、文章の回り込みを途中で解除するには、区切るところに<BR CLEAR>と
　　入れます。後続の文章は、これによって画像の下に表示されます。


　　（ＨＴＭＬでは、画像を文字と同様に扱うので、どんなに大きな画像でもそれは １行　
　　とみなします。従って、写真などの解説文はこれら写真の左右に回り込ませて表示
　　すると、全体が見やすくなります。）

　　（注：画像ファイルなどはサイズが大きくなりがちで、これの表示には時間が掛かる
　　　ので、「インターレースGIFファイル」や「プログレッシブJPGファイル」に画像
　　　ソフトなどで編集して短時間に表示されるように工夫してください。）


（Ａ）の例は、表（枠）の作成です。
  ここでは、（Ａ）がキャプションとして画像の下に貼り付けられています。
　付録のタグ・オプション一覧表　参照
　　
　（注：ホームページ作成ソフトのＨＯＴＡＬＬでは、表の作成が簡単にできます。
　　行の升目の数と列の升目の数を指定すればその数の升目ができるので、その升目に
　　文字を入力してあとから文字の大きさを指定します。）
　
　　　この例では文字の大きさは　<FONT SIZE=7>　です。

  表の作成は、TABLEタグを使い、書式は以下の通りです。
　（解説、用例は次回、講座６を参照）
　　
　<TABLE ALIGN=LEFT BORDER CELLSPACING=8>････テーブル作成定義（大きさ８､表は左側）

  <TR>　････････････････････････････････････　表組の行を定義する(<TR></TR>)

　<TD>　　　　･･････････････････････････<TABLE>の中でデータセルを作る(<TD></TD>)

　<FONT SIZE=7><B>講師の</B></FONT><BR>･･･････文字を太字にする(<B></B>)

　<FONT SIZE=7><B>写真</B></FONT><BR>　･･･････文字サイズを７にする

  <CAPTION ALIGN=BOTTOM>(Ａ:写真説明など)</CAPTION>･････キャプション指定

　</TD></TR></TABLE> 　･･････････････････････････････（各終了タグ）


　また、TABLEタグにオプションを付けて罫線を太くすることができます。
　
　　<TABLE ALIGN=LEFT BORDER CELLSPACING=8>　この 8 を 16 にすると罫線の
　　大きさが倍のになります。CELLSPACINGオプションがないときは、通常　２　です。

　キャプションは、表のタイトルなど、表に添付して説明する場合等に付けます。
　上の場合は、表組の下にセンタリングで表示されます。


最後にサウンドについて

 　サウンドについては、私は、著作権フリーの「素材集」などから適当にコピーして
　使っています。
　（オリジナルなサウンドは、ＭＩＤＩ機器などで編集して利用しますが、ここでは省略）

 ＣＤ－ＲＯＭなどからのコピーの仕方や利用の仕方は、以下の通りです。


（１）素材集などのＣＤ－ＲＯＭから、エクスプローラーで目的のディレクトリにコピーして
　　適当に改名して保存する。

（２）サウンドデーターを例えば、「ページを開いたら再生される」ようにする方法は、
　　　以下のとおりです。

　<EMBED SRC="oto/song3.wav"　 HIDDEN=true 　AUTOSTART=true
　 VOLUME=100 　LOOP=true>



　この例では、oto　というディレクトリに保存されている　song3.wav　を　自動的に
　ボリューム　100　で、ページが開いている間、無限に　(LOOP=true)　ならします。

　　　LOOP=3　なら、３回鳴らします。

　（HIDDENは、ＷＡＶサウンドのデータ画像を画面に表示させない仕方。
　　また、EMBED SRC=" " は、ﾈｯﾄｽｹｰﾌﾟ用のタグで、ここにデーターを埋め込む　
　　という意味です。）
 この<EMBED>タグは、エンプティタグで終タグはありません。

（例えばこのページでは、上の例に従ってサウンドが無限になり続けます。）

以下、次回(第６回は、ここをクリックしてください。）トップへ戻る

ホーム　　　　　　　　　　　タグ一覧表