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

5、文字や画像などの表現方法(楽しいホームページを作ろう) ここでは、講演会の簡単な案内文(チラシ)を参考にして文字や画像等の表現方法を 見てみよう。(参考:kmham211/kanda.htm 以下は、ワープロ(一太郎)で作成したある講演会の案内文の骨子です。 ====================================   商店街新年躍進講演会開催の  ・・・・・・・(1)       ご 案 内 (2)    商店街の活性化とは何か        ・・・・・・・・・・(3) ====商店・商店街の発展のために==== (2)     主催:尾西市商店街連合会 (2) 謹啓  ・・・・・・・・・・・・・・・・・・・・・・・・・・・・                                敬具
講師の
写真
日 時 平成10年1月21日(水)午後3時 (4) 場 所 尾西市商工会館 2F 会議室 (4) 講 師 〇〇 先生     (4) 聴講料    無 料       (4) (A:写真説明など) ===================================== (1)は見出しです。文字の大きさは、<FONT SIZE=6 COLOR="#0000ff">で指定されて    いるように SIZE=6 であり、文字色は青色です。FONTのオプションとして文字    の大きさや色を指定しています。    (文字色については第4回参照及び付録のタグ・オプション一覧表を参照)    (カラーテストも実験してください。) (2)は罫線ですが、gazouディレクトリの中にある「line011.jpg」がここに挿入されて    います。書式は以下の通りです。   <IMG SRC="gazou/line011.jpg" ALT="">         ・・・・・・・・・・・・(2) (3)は文字色の指定で、ソースを見ると分かるように赤色です。   <FONT SIZE=5 COLOR="#ff0000"><B>商店街の活性化とは何か</B></FONT>   このように、文字の特徴を左側のタグで指定し、右側のタグで指定を解除します。   (参考:これらのタグはHOTALLなどでは、指示に従って入力すれば、自動的に    付けられます。また、文字色も書式欄などから簡単に指定できます。)    (文章の回り込み) (4)は、講師の写真画像の右回りに講演会の日時、場所等を回らせています。   画像が文字の左側にくるようにするには、以下のようにします。(参考:尾西まつり   <IMG SRC="datagazou/kanda.gif" ALT="" ALIGN=LEFT> ・・・・・・・・・・・・(5)  

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

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


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

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

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


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

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


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

  表の作成は、TABLEタグを使い、書式は以下の通りです。
 (解説、用例は次回、講座6を参照)
  
 <TABLE ALIGN=LEFT BORDER CELLSPACING=8>・・・・テーブル作成定義(大きさ8、表は左側) <TR> ・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・ 表組の行を定義する(<TR></TR>)

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

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

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

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

 </TD></TR></TABLE>  ・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・(各終了タグ)


 また、TABLEタグにオプションを付けて罫線を太くすることができます。     <TABLE ALIGN=LEFT BORDER CELLSPACING=8> この 8 を 16 にすると罫線の   大きさが倍のになります。CELLSPACINGオプションがないときは、通常 2 です。  キャプションは、表のタイトルなど、表に添付して説明する場合等に付けます。  上の場合は、表組の下にセンタリングで表示されます。 最後にサウンドについて  サウンドについては、私は、著作権フリーの「素材集」などから適当にコピーして  使っています。  (オリジナルなサウンドは、MIDI機器などで編集して利用しますが、ここでは省略) CD−ROMなどからのコピーの仕方や利用の仕方は、以下の通りです。
(1)素材集などのCD−ROMから、エクスプローラーで目的のディレクトリにコピーして   適当に改名して保存する。 (2)サウンドデーターを例えば、「ページを開いたら再生される」ようにする方法は、    以下のとおりです。  <EMBED SRC="oto/song3.wav"  HIDDEN=true  AUTOSTART=true   VOLUME=100  LOOP=true>
 この例では、oto というディレクトリに保存されている song3.wav を 自動的に  ボリューム 100 で、ページが開いている間、無限に (LOOP=true) ならします。    LOOP=3 なら、3回鳴らします。  (HIDDENは、WAVサウンドのデータ画像を画面に表示させない仕方。   また、EMBED SRC=" " は、ネットスケープ用のタグで、ここにデーターを埋め込む    という意味です。) この<EMBED>タグは、エンプティタグで終タグはありません。 (例えばこのページでは、上の例に従ってサウンドが無限になり続けます。)

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

ホーム           タグ一覧表