第3回例題

●例題用ファイル（ご自由にダウンロードしてください）

• カタカゴ画像ファイル katakago.jpg
  
• 背景用もみじ画像ファイル maple.jpg
  
• 音楽ファイル music.mid
  

　※ ファイル名の上でマウス右クリック⇒対象をファイルに保存⇒ 名前を付けて保存（そのままのファイル名でデスクトップ等に保存）

●タグを使って画像を表示する方法

◇＜ＩＭＧ　ＳＲＣ＞タグを使って画像を表示

　＜ＩＭＧ　ＳＲＣ＞タグは、画像ファイルを表示するタグです。 gif形式やjpg形式のの画像ファイルを表示できます。

　※ ＜ＩＭＧ　ＳＲＣ＞タグを使って画像表示命令を書いた htmファイルと表示したい画像ファイルは同じフォルダ内に置いてください。

◇＜ＣＥＮＴＥＲ＞タグを使って画面の中央に画像を表示

　＜ＣＥＮＴＥＲ＞タグは、文字や画像を画面の中央に表示するためのタグです。

◇＜ＡＬＩＧＮ＞タグを使って画像と文章の高さを合わせる

　文章が右側にいくように、画像の位置を「左(left)」に設定します。「右(right)」と入力すれば、画像の位置は右側になります。

◇＜ＨＩＧＨＴ＞＜ＷＩＤＴＨ＞タグを使って画像の大きさを指定

　画像の大きさを指定すると、画像ファイルだけの指定に比べてブラウザで画像を表示するのが速くなります。 見に来てくれる人に対してのちょっとしたエチケットですね。

◇＜ＢＯＲＤＥＲ＞タグを使って画像の周りに枠線を付ける

　写真に黒い枠線を付けて表示すると、写真がひきしまってきれいに見える効果があります。 枠線の太さは、数値の大きさで調節することができます。

◇＜ＨＳＰＡＣＥ＞タグを使って画像の左右に隙間を空ける

　画像と文章の間は、少し隙間が空いてるほうが読みやすいです。

◇＜ＢＡＣＫＧＲＯＵＮＤ＞タグを使って画面の背景に画像を表示

　＜ＢＯＤＹ＞タグはの後ろに＜ＢＡＣＫＧＲＯＵＮＤ＞という命令を追加すると、背景として画像が 表示されるようになります。

　※ 背景用の画像ファイルは、もちろんhtmファイルと同じフォルダ内に置いてください。

◇＜ＨＲ＞タグを使って区切り線を挿入する

　＜ＨＲ＞タグは、区切り線（水平線）を挿入するタグです。 ＜ＷＩＤＴＨ＞という命令の追加で線の長さが、＜ＳＩＺＥ＞という命令の追加で太さが指定できます。

◇＜ＥＭＢＥＤ　ＳＲＣ＞タグを使って音楽を流す

　＜ＥＭＢＥＤ　ＳＲＣ＞タグは、音楽ファイルやビデオファイルを再生するためのタグです。 ＜ＡＵＴＯＳＴＡＲＴ＞という命令を組み合わせると、ページを開くと自動で音楽やビデオの再生を 始めるように指定できます。

　※ 音楽ファイルやビデオファイルは、もちろんhtmファイルと同じフォルダ内に置いてください。