Spur 趣味から得た知識【HTML講座】　 　HTML（画像を貼る）　

写真や画像を貼るのをやってみましょう。
<IMG>というタグを使います。
このタグも単独で使いますから、</IMG>は必要ありません。
さっそくやってみましょう。
画像ファイルは適当なものを用意して、「C:\mypage」に入れておいてください。画像には拡張子が「.gif」か「.jpg」のものをお使いください。
画像ファイル名の「mimi.jpg」はご自分の保存したファイル名に読み替えて入力してください。

例によって、「sample6a.htm」を次のように修正してください。

  <HTML>
  <HEAD>
　<CENTER><FONT SIZE=4 COLOR="#00FFFF">HTMLのお勉強</FONT></CENTER><BR>
  </HEAD>
  <BODY>
　<HR SIZE=5 NOSHADE><BR>
　HTMLは<FONT COLOR="#CCCC33">タグ</FONT>というもので書くプレーンなテキストファイルである。<BR>
　<UL TYPE="circle"><BR>
　<LI>項目Ａ<BR>
　<LI>項目Ｂ<BR>
　<LI>項目Ｃ<BR>
　</UL><BR>
　<IMG SRC="mimi.jpg"><BR>
　<OL><BR>
　<DD><LI>箇条書き１<BR>
　<DD><LI>箇条書き２<BR>
　<DD><LI>箇条書き３<BR>
　</OL><BR>
  </BODY>
  </HTML>

これは「sample7.htm」で保存するんですね？
ちゃんと、このようになりましたか？

えっ？　写真が出ない？
それは指定した画像ファイルがあなたのパソコンのハードディスクに無いからです。
適当な写真か画像を用意して、「C:\mypage」に保存し、そのファイル名を使ってください。
とりあえず、丁度良いものが無い方は、いくつか用意しましたので、マウスの右クリックで「名前を付けて保存」をしてください。

ドナウ河畔の町並み スイスの田舎町 Archen おすましミミ

さて、これからが大変です。
実は、<IMG>タグにはたくさんのオプションがあるのです。
簡単に一覧表にして説明します。

ALT画像にマウスを当てた時に表示するテキスト文字
例：<IMG SRC="mimi.jpg" ALT="ウチのミミです">
WIDTH数値または％を指定：幅、ブラウザ表示部分に対しての％指定も可能。これを指定してあるとレイアウト表示が高速化されます
例：<IMG SRC="mimi.jpg" WIDTH=50>
HEIGHT数値または％を指定：高さ、ブラウザ表示部分に対しての％指定も可能。これを指定してあるとレイアウト表示が高速化されます
例：<IMG SRC="mimi.jpg" HEIGHT=30%>
ALIGN(top / middle / center / bottom / texttop / baseline / absmiddle / absbottom)：イメージの位置を指定
(left / right)：テキストの回り込み指定。解除は<BR>の項を参照
例：<IMG SRC="mimi.jpg" ALIGN="CENTER">
VSPACE数値を指定：縦の隙間をピクセル数で指定
例：<IMG SRC="mimi.jpg" VSPACE=20>
HSPACE数値を指定：横の隙間をピクセル数で指定
例：<IMG SRC="mimi.jpg" HSPACE=15>
LOWSRC本来の画像より先に表示する画像を指定
例：<IMG SRC="mimi.jpg" LOWSRC="temp.gif">
BORDER数値を指定：境界線の太さをピクセル数で指定
例：<IMG SRC="mimi.jpg" BORDER=5>
これらのオプションは複数を指定することも可能です。

また、画像ファイルは、他のディレクトリや他のサイト（他のサーバ）にあるものも指定出来ます。
そんな場合のアドレス表現方法は、こちらに詳しく書きました。

←前へ  次へ→