第3回例題

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


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

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


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

◇<IMG SRC>タグを使って画像を表示

 <IMG SRC>タグは、画像ファイルを表示するタグです。 gif形式やjpg形式のの画像ファイルを表示できます。

 ※ <IMG SRC>タグを使って画像表示命令を書いた htmファイルと表示したい画像ファイルは同じフォルダ内に置いてください。

<IMG SRC>タグを使って画像を表示

◇<CENTER>タグを使って画面の中央に画像を表示

 <CENTER>タグは、文字や画像を画面の中央に表示するためのタグです。

<CENTER>タグを使って画面の中央に画像を表示

◇<ALIGN>タグを使って画像と文章の高さを合わせる

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

<ALIGN>タグを使って画像と文章の高さを合わせる

◇<HIGHT><WIDTH>タグを使って画像の大きさを指定

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

<HIGHT><WAIDTH>タグを使って画像の大きさを指定

◇<BORDER>タグを使って画像の周りに枠線を付ける

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

<BORDER>タグを使って画像の周りに枠線を付ける

◇<HSPACE>タグを使って画像の左右に隙間を空ける

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

<HSPACE>タグを使って画像の左右に隙間を空ける

◇<BACKGROUND>タグを使って画面の背景に画像を表示

 <BODY>タグはの後ろに<BACKGROUND>という命令を追加すると、背景として画像が 表示されるようになります。

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

<BACKGROUND>タグを使って画面の背景に画像を表示

◇<HR>タグを使って区切り線を挿入する

 <HR>タグは、区切り線(水平線)を挿入するタグです。 <WIDTH>という命令の追加で線の長さが、<SIZE>という命令の追加で太さが指定できます。

<HR>タグを使って区切り線を挿入する

◇<EMBED SRC>タグを使って音楽を流す

 <EMBED SRC>タグは、音楽ファイルやビデオファイルを再生するためのタグです。 <AUTOSTART>という命令を組み合わせると、ページを開くと自動で音楽やビデオの再生を 始めるように指定できます。

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

<EMBED>タグを使って音楽を流す


【ホ−ムペ−ジ制作の基礎の基礎(HTML入門)へ戻る】