1. 使用方法：<IMG SRC="test.gif" ALT="本站特約模特兒" ALIGN=RIGHT BORDER=0 HSPACE=2 VSPACE=2 HEIGHT=56 WIDTH=32>

2. 標籤解說：目前常見的網頁圖形格式有兩種就是 GIF 及 JPG 兩種格式。GIF 格式只有256色，不過色彩比較鮮豔乾淨漂亮，適合電腦美工圖案。而 JPG 格式的圖案是全彩失真壓縮，比較適合一大堆顏色的圖片，如照片就較適合用JPG格式來呈現。

3. 使用範例

基本用法	用法：<IMG SRC="圖檔名稱、路徑"> 顯示圖片最基本的方法（就是不加任何屬性啦！）其中 test.gif 就是圖檔的檔名。
原始碼	<IMG SRC="test.gif">嗨！我是本站的模特兒喔！
呈現結果	嗨！我靚仔嗎?

長寬設定	用法：<IMG SRC="圖檔" HEIGHT="高度" WIDTH="寬度"> 設圖片的大小，其實不用設也可以，但是有設更好，可以加快瀏覽速度，因為瀏覽器就不用在那邊花時間算您的圖片有多大啦！此外您也可以自己隨意設定圖片大小。
原始碼	<IMG SRC="test.gif" HEIGHT=30 WIDTH=30>
呈現結果

加上說明	用法：<IMG SRC="圖檔" ALT="說明文字"> 滑鼠一到圖上時，說明文字就會自動出現。此外，在圖片未顯示出來或顯示不出來時，也會以這一段字代替，讓使用者知道這個未顯示出來的圖片究竟是幹嘛用的。
原始碼	<IMG SRC="test.gif" ALT="本站特約模特兒">移到圖上看看。
呈現結果	移到圖上看看。

圖片位置	用法：<IMG SRC="圖檔" ALIGN="位置"> 圖片位置設定！可以靠左放：ALIGN=LEFT、靠上ALIGN=TOP、靠下ALIGN=BOTTOM、垂直置中ALIGN=MIDDLE，其中靠左放可以造成『文繞圖』的效果。
原始碼	<IMG SRC="test.gif"ALIGN=RIGHT>嗨！我往右邊靠！
呈現結果	嗨！我往右邊靠！
原始碼	<IMG SRC="test.gif" ALIGN=LEFT>嗨！我往左邊靠！
呈現結果	嗨！我往左邊靠！
原始碼	<IMG SRC="test.gif" ALIGN=TOP>文字對齊我頭頂！
呈現結果	文字對齊我頭頂！
原始碼	<IMG SRC="test.gif" ALIGN=BOTTOM>文字對齊我腳底！
呈現結果	文字對齊我腳底！
原始碼	<IMG SRC="test.gif" ALIGN=MIDDLE>文字對齊我中間！
呈現結果	文字對齊我中間！

邊框設定	用法：<IMG SRC="圖檔" BORDER="邊框粗細"> 設定邊框大小，通常都設成 0 感覺比較美觀啦！因為內定的框框實在是不怎麼漂亮....。尤其在連結時，設框框簡直是醜斃了...。
原始碼	<IMG SRC="test.gif" BORDER="4">
呈現結果

左右間距	用法：<IMG SRC="圖檔" HSPACE="離左右物件的距離"> 離文字的水平距離，通常多少也設一點，以免靠文字太近，看起來才不會有太擠的感覺。
原始碼	左邊的字<IMG SRC="test.gif" HSPACE="15">右邊的字
呈現結果	左邊的字右邊的字

上下間距	用法：<IMG SRC="圖檔" VSPACE="離上下物件的距離"> 離文字的垂直距離，通常多少也設一點，以免靠文字太近，看起來才不會有太擠的感覺。
原始碼	上面的字<BR><IMG SRC="ptest.gif" VSPACE="15"><BR>下面的字
呈現結果	上面的字 下面的字

1. 關於路徑：現在我們來談談圖片路徑的事，路徑不對，不管您的網頁名稱寫的多正確也沒用，因為瀏覽器無法尋著您的路徑去找到該有的圖片，所以，我們來看看該如何正確的使用路徑。有些人並不喜歡將網頁及圖通通放在同一個目錄下，比如說有人將圖檔全放在 c:\image 裡，而網頁檔放在 c:\demo 裡，這樣子的話，我們該如何正確的寫圖片的路徑呢？幾種常見的情形整理成下表：

Html檔的位置	圖檔的位置	寫法	情形說明
c:\demo	c:\demo	<img src="test.gif">	圖文均在同一目錄
c:\demo	c:\demo\image	<img SRC="../../images/test.gif">	圖在網頁下一層目錄
c:\demo	c:\	<img src=" ../test.gif">	圖在網頁上一層
c:\demo	c:\image	<img src=" ../../images/test.gif">	圖文在同一層但不同目錄

或許有人看到不明就理，先說明一下，「../」是回到上一層目錄的意思。「image/」則是進入下一層目錄image之意，而「../../image/」的意思就是，回到上一層目錄，然後再進入目錄image中。以上我們使用的均為「相對路徑」的概念。

2. 影像單位：或許您會常常看到px這個單位，沒錯，這是我們在製作最常用的一個單位了。這個單位完整的寫法是「Pixels」，我們稱之為「像素」。像素，是螢幕上的一個小光點，然而這一小光點的大小，並非是固定的，舉個例子而言，螢幕本身十五吋，不會因為你的任何設定而變成十七吋。但是，其解析度是可以改變的，我們常見的解析度有以下幾種：「640 ×480」、「800 ×600」、「1024 ×768」。舉其中之一的 640 ×480 來說，其代表的就是在螢幕上有寬 640 個光點，高有 480 光點，若是我們將解析度調整為 800 ×600 其寬勢必要從 640 變成 800 個光

3. 影像格式：網頁用的圖檔目前只有 GIF 格式（即副檔名為gif的圖檔，如：bg.gif）以及JPG格式（即副檔名為jpg的圖檔，如：bg.jpg）為一般的瀏覽器所接受。其他如 bmp 格式或是 pcx 格式都是無法在網頁上使用的，若非得要用，那就利用影像繪圖軟體來作格式的轉換吧！